@epam/ai-dial-ui-kit 0.16.0-dev.4 → 0.16.0-dev.43

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.4",
-  "generatedAt": "2026-10-12T13:52:00.659Z",
+  "version": "0.16.0-dev.43",
+  "generatedAt": "2026-10-24T19:06:23.562Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -17,7 +17,7 @@
     "setupNotes": "## Next.js Integration\n1. Install the package. React is the only peer you have to supply — everything\n   the kit renders with, it installs itself.\n\n``` bash\nnpm install @epam/ai-dial-ui-kit\nnpm install react react-dom\n```\n\nAdd the editor packages only if you use the `@epam/ai-dial-ui-kit/editors`\nsubpath. They are optional peers, so `npm install` stays quiet without them, and\nthe kit only reaches for them when a `Lazy*` editor actually mounts:\n\n``` bash\nnpm install monaco-editor @monaco-editor/react @uiw/react-md-editor\n```\n\n2. Import style in the root layout of the project:\n\n```tsx\n// app/layout.tsx\nimport \"@epam/ai-dial-ui-kit/styles.css\";\n```\n\n3. Usage example\n\n```tsx\n// app/page.tsx\n\"use client\";\nimport { DialPrimaryButton } from \"@epam/ai-dial-ui-kit\";\n\nexport default function Home() {\n  return (\n    <div className=\"w-full h-full flex flex-col gap-3 items-center justify-center\">\n      <h1>Test library</h1>\n      <DialPrimaryButton onClick={() => alert('Hello AI DIAL!')} />\n    </div>\n  );\n}\n```\nSee \"🎨 Theming & Customization\" section in README."
   },
   "styles": "# Typography CSS Utility Classes\n\n## Design-system-compliant classes (`dial-*-text`)\n\nUse these by default. They follow the design system type scale.\n\n| Class                             | Design name                 | Weight   | Size / Line-height                  |\n| --------------------------------- | --------------------------- | -------- | ----------------------------------- |\n| `.dial-display1-text`             | Display 1                   | semibold | 32px / 48px                         |\n| `.dial-display2-text`             | Display 2                   | semibold | 28px / 40px                         |\n| `.dial-display3-text`             | Display 3                   | semibold | 22px / 32px                         |\n| `.dial-h1-text`                   | Heading 1                   | semibold | 20px / 28px                         |\n| `.dial-h2-text`                   | Heading 2                   | semibold | 18px / 26px                         |\n| `.dial-h3-text`                   | Heading 3                   | semibold | 16px / 24px                         |\n| `.dial-body-text`                 | Body Text                   | normal   | 16px / 24px                         |\n| `.dial-body-semi-text`            | Body Text (Semi Bold)       | semibold | 16px / 24px                         |\n| `.dial-body-paragraph-text`       | Body Paragraph              | normal   | 16px / 26px                         |\n| `.dial-body-paragraph-semi-text`  | Body Paragraph (Semi Bold)  | semibold | 16px / 26px                         |\n| `.dial-small-text`                | Small Text                  | normal   | 14px / 20px                         |\n| `.dial-small-semi-text`           | Small Text (Semi Bold)      | semibold | 14px / 20px                         |\n| `.dial-small-paragraph-text`      | Small Paragraph             | normal   | 14px / 24px                         |\n| `.dial-small-paragraph-semi-text` | Small Paragraph (Semi Bold) | semibold | 14px / 24px                         |\n| `.dial-tiny-text`                 | Tiny Text                   | normal   | 12px / 16px                         |\n| `.dial-tiny-lead-text`            | Tiny Text Lead              | normal   | 12px / 16px (+0.03em, uppercase)    |\n| `.dial-tiny-semi-text`            | Tiny Text (Semi Bold)       | semibold | 12px / 16px                         |\n| `.dial-tiny-lead-semi-text`       | Tiny Text Lead (Semi Bold)  | semibold | 12px / 16px (+0.03em, uppercase)    |\n| `.dial-caption-text`              | Caption                     | normal   | 10px / 12px                         |\n| `.dial-caption-lead-semi-text`    | Caption Lead (Semi Bold)    | semibold | 10px / 12px (+0.06em, uppercase)    |\n| `.dial-code-text`                 | Code                        | normal   | 14px / 20px (Fira Code / monospace) |\n| `.dial-italic-text`               | Italic                      | normal   | 18px / 22px (serif, italic)         |\n| `.dial-small-italic-text`         | Small Italic                | normal   | 14px / 20px (serif, italic)         |\n| `.dial-tiny-italic-text`          | Tiny Italic                 | normal   | 12px / 16px (serif, italic)         |\n| `.dial-caption-italic-text`       | Caption Italic              | normal   | 10px / 12px (serif, italic)         |\n\nThe three `*-lead-*` classes apply `text-transform: uppercase` themselves — pass them the sentence-case string, not a pre-uppercased one, so the accessible name stays readable.\n\n`.dial-code-text` resolves its family through `var(--theme-font-mono, var(--font-fira-code, 'Fira Code'))` before falling back to the system monospace stack. The kit ships no font file; the host provides the face.\n\nThe `*-italic-text` classes use a serif italic face and are intended for mathematical and formula symbols. Their line-heights follow the corresponding typography size; the default 18px variant uses a fixed 22px line-height to keep standalone symbols vertically aligned without changing their container's height.\n\n## Legacy classes (avoid in new code)\n\nClasses like `dial-h1`, `dial-h2`, `dial-body`, `dial-small*`, `dial-tiny*`, `dial-caption` are legacy. They can be used in legacy projects if user explicidly specify they need legacy typography.\n\n## Raw SCSS source\n",
-  "theming": "# Theming & CSS Variable Tokens\n\nAI DIAL UI Kit uses CSS custom properties (variables) for theming.\nDark and light themes are switched by setting different values for these variables on `:root` or a theme wrapper element.\n\n## Usage in Tailwind\n\nThe Tailwind config maps CSS variables to utility classes.\nUse these classes in your components:\n\n```tsx\n// Backgrounds\n<div className=\"bg-layer-0\" />   // darkest background\n<div className=\"bg-layer-1\" />   // main content area\n<div className=\"bg-layer-2\" />   // elevated panels\n\n// Text\n<span className=\"text-primary\" />    // main text color\n<span className=\"text-secondary\" />  // muted text\n<span className=\"text-error\" />      // error state\n\n// Borders\n<div className=\"border border-primary\" />  // standard border\n<div className=\"border border-error\" />    // error border\n```\n\n## Override CSS Variables\n\n```css\n:root {\n  --bg-layer-0: #000000;\n  --bg-layer-1: #0c101d;\n  --bg-layer-2: #161b2d;\n  --bg-layer-3: #1d2439;\n  --text-primary: #eef1f7;\n  --text-secondary: #9fa6bd;\n  --text-error: #f76464;\n  --stroke-primary: #696e7c;\n  --controls-bg-accent-primary: #3664e2;\n  /* ... see tailwind.config.js for full list */\n}\n```\n\n## Overlay stacking\n\nPortalled overlays stack on a ladder driven by one variable, `--z-overlay`\n(default `52`): `z-popup` (base — `Popup` backdrop), `z-floating` (+1 —\n`Dropdown`/`Select` overlays, submenus, `Calendar`), `z-interactive-tooltip`\n(+2 — `InteractiveTooltip`), `z-tooltip` (+3 — `Tooltip`). To lift every\noverlay above a host's own sticky header or modal, set the base once on `:root`\n(or in a `ThemeScope` class) — the steps move together, so their order is kept:\n\n```css\n:root {\n  --z-overlay: 1000;\n}\n```\n\nDo not override `[role='menu']` or hardcode `z-[53]` in a host. To move one\noverlay only, pass a `z-*` utility through its class prop (`listClassName`,\n`overlayClassName`, `contentClassName`, `panelClassName`) — `mergeClasses`\nreplaces the layer's step with it.\n\n## Token Reference\n\n\n### backgroundsColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-sunken` | `var(--bg-layer-sunken)` | `#EEF1F7` |\n| `layer-base` | `var(--bg-layer-base)` | `#F5F7FA` |\n| `layer-raised` | `var(--bg-layer-raised)` | `#FCFCFC` |\n| `gradient-1` | `var(--bg-gradient-1)` | `#1D4ED8` |\n| `gradient-1-hover` | `var(--bg-gradient-1-hover)` | `#6785FB` |\n| `gradient-1-active` | `var(--bg-gradient-1-active)` | `#1D4ED8` |\n| `gradient-2` | `var(--bg-gradient-2)` | `#885DF2` |\n| `gradient-2-hover` | `var(--bg-gradient-2-hover)` | `#885DF2` |\n| `gradient-2-active` | `var(--bg-gradient-2-active)` | `#7C3AED` |\n| `control-accent-alpha` | `var(--bg-control-accent-alpha)` | `#2764D90F` |\n| `control-accent-alpha-hover` | `var(--bg-control-accent-alpha-hover)` | `#2764D924` |\n| `control-accent-alpha-hover-subtle` | `var(--bg-control-accent-alpha-hover-subtle)` | `#2764D90A` |\n| `control-accent-alpha-active` | `var(--bg-control-accent-alpha-active)` | `#2764D933` |\n| `control-accent-alpha-active-subtle` | `var(--bg-control-accent-alpha-active-subtle)` | `#2764D914` |\n| `control-accent` | `var(--bg-control-accent)` | `#1D4ED8` |\n| `control-accent-muted` | `var(--bg-control-accent-muted)` | `#E1EAF9` |\n| `control-accent-hover` | `var(--bg-control-accent-hover)` | `#5976E9` |\n| `control-neutral` | `var(--bg-control-neutral)` | `#FCFCFC` |\n| `control-neutral-hover-strong` | `var(--bg-control-neutral-hover-strong)` | `#848E9C` |\n| `control-neutral-hover-muted` | `var(--bg-control-neutral-hover-muted)` | `#E0E6F0` |\n| `control-neutral-active` | `var(--bg-control-neutral-active)` | `#D1DBEA` |\n| `control-neutral-default` | `var(--bg-control-neutral-default)` | `#ACB3C3` |\n| `control-inverted` | `var(--bg-control-inverted)` | `#57647A` |\n| `control-error` | `var(--bg-control-error)` | `#AE2F2F` |\n| `control-error-hover` | `var(--bg-control-error-hover)` | `#BF3939` |\n| `control-error-active` | `var(--bg-control-error-active)` | `#CC4545` |\n| `control-error-alpha` | `var(--bg-control-error-alpha)` | `#F764641A` |\n| `control-error-alpha-hover` | `var(--bg-control-error-alpha-hover)` | `#F7646426` |\n| `control-error-alpha-active` | `var(--bg-control-error-alpha-active)` | `#F7646433` |\n| `control-disable-primary` | `var(--bg-control-disable-primary)` | `#DCE0E8` |\n| `control-disable-secondary` | `var(--bg-control-disable-secondary)` | `#ACB3C3` |\n| `green-1` | `var(--bg-visual-green-1)` | `#CDE8E5` |\n| `green-2` | `var(--bg-visual-green-2)` | `#D1F0DC` |\n| `violet-1` | `var(--bg-visual-violet-1)` | `#DDE3F9` |\n| `violet-2` | `var(--bg-visual-violet-2)` | `#F1E9FF` |\n\n### shadowColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `xs-1` | `var(--shadow-xs-1)` | `#2764D933` |\n| `xs-2` | `var(--shadow-xs-2)` | `#161B2D08` |\n\n### borderColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-alpha` | `var(--stroke-accent-alpha)` | `#2764D933` |\n| `gradient-1` | `var(--stroke-gradient-1)` | `#5976E9` |\n| `gradient-2` | `var(--stroke-gradient-2)` | `#885DF2` |\n| `accent-focus` | `var(--stroke-accent-focus)` | `#6785FB` |\n| `error-alpha` | `var(--stroke-error-alpha)` | `#AE2F2F73` |\n| `control-disable-primary` | `var(--stroke-control-disable-primary)` | `#848E9C` |\n\n### textColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `warning-icon` | `var(--text-warning-icon)` | `#EEC840` |\n| `green-1` | `var(--text-visual-green-1)` | `#059669` |\n| `green-2` | `var(--text-visual-green-2)` | `#0D6E72` |\n| `green-3` | `var(--text-visual-green-3)` | `#065F46` |\n| `brown-1` | `var(--text-visual-brown-1)` | `#D36817` |\n| `brown-2` | `var(--text-visual-brown-2)` | `#B45309` |\n| `violet-1` | `var(--text-visual-violet-1)` | `#7C3AED` |\n| `violet-2` | `var(--text-visual-violet-2)` | `#3730B7` |\n| `control-permanent` | `var(--text-control-permanent)` | `#FCFCFC` |\n| `control-inverted` | `var(--text-control-inverted)` | `#FCFCFC` |\n| `control-disable-primary` | `var(--text-control-disable-primary)` | `#848E9C` |\n| `control-disable-secondary` | `var(--text-control-disable-secondary)` | `#DCE0E8` |\n| `control-accent-hover` | `var(--text-control-accent-hover)` | `#5976E9` |\n| `control-accent-active` | `var(--text-control-accent-active)` | `#6785FB` |\n\n### backgroundsColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-0` | `var(--bg-layer-0)` | `#FCFCFC` |\n| `layer-1` | `var(--bg-layer-1)` | `#E0E6F0` |\n| `layer-2` | `var(--bg-layer-2)` | `#EEF1F7` |\n| `layer-3` | `var(--bg-layer-3)` | `#FCFCFC` |\n| `layer-4` | `var(--bg-layer-4)` | `#D1DBEA` |\n| `accent-primary-alpha` | `var(--bg-accent-primary-alpha)` | `#7DA4FF26` |\n| `accent-secondary-alpha` | `var(--bg-accent-secondary-alpha)` | `#37BABC2E` |\n| `accent-tertiary-alpha` | `var(--bg-accent-tertiary-alpha)` | `#A972FF2E` |\n| `accent-primary` | `var(--bg-accent-primary)` | `#5C8DEA` |\n| `accent-secondary` | `var(--bg-accent-secondary)` | `#37BABC` |\n| `red-400` | `var(--bg-red-400)` | `#F76464` |\n| `controls-accent-primary` | `var(--controls-bg-accent-primary)` | `#124ACE` |\n| `controls-accent-primary-hover` | `var(--controls-bg-accent-primary-hover)` | `#2656D9` |\n| `controls-accent-primary-active` | `var(--controls-bg-accent-primary-active)` | `#3664E2` |\n| `controls-accent-primary-alpha-active` | `var(--controls-bg-accent-primary-alpha-active)` | `#7DA4FF5C` |\n| `controls-accent-secondary-alpha-active` | `var(--controls-bg-accent-secondary-alpha-active)` | `#37BABC5C` |\n| `controls-accent-tertiary-alpha-active` | `var(--controls-bg-accent-tertiary-alpha-active)` | `#A972FF5C` |\n| `controls-error` | `var(--controls-bg-error)` | `#AE2F2F` |\n| `controls-error-hover` | `var(--controls-bg-error-hover)` | `#BF3939` |\n| `controls-error-active` | `var(--controls-bg-error-active)` | `#CC4545` |\n| `controls-error-alpha-active` | `var(--controls-bg-error-alpha-active)` | `#F764645C` |\n| `controls-disable-accent` | `var(--controls-bg-disable-accent)` | `#7C8293` |\n| `controls-disable` | `var(--controls-bg-disable)` | `#D1DBEA` |\n| `controls-neutral-hover` | `var(--controls-bg-neutral-hover)` | `#D1DBEA` |\n| `controls-neutral-active` | `var(--controls-bg-neutral-active)` | `#9FA6BD` |\n| `controls-accent-success-alpha-hover` | `var(--controls-bg-accent-success-alpha-hover)` | `#37BABC2E` |\n| `controls-accent-success-alpha-active` | `var(--controls-bg-accent-success-alpha-active)` | `#37BABC5C` |\n| `controls-enable-primary` | `var(--controls-enable-primary)` | `#FCFCFC` |\n\n### borderColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--stroke-accent-primary)` | `#124ACE` |\n| `accent-secondary` | `var(--stroke-accent-secondary)` | `#007274` |\n| `controls-accent` | `var(--controls-bg-accent)` | `#5C8DEA` |\n| `red-900` | `var(--red-900)` | `#402027` |\n\n### textColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--text-accent-primary)` | `#7DA4FF` |\n| `accent-secondary` | `var(--text-accent-secondary)` | `#37BABC` |\n| `accent-tertiary` | `var(--text-accent-tertiary)` | `#A972FF` |\n| `controls-permanent` | `var(--controls-text-permanent)` | `#FCFCFC` |\n| `controls-accent-disable` | `var(--controls-text-accent-disable)` | `#D1DBEA` |\n| `controls-primary-disable` | `var(--controls-text-primary-disable)` | `#696E7C` |\n| `controls-secondary-disable` | `var(--controls-text-secondary-disable)` | `#9FA6BD` |\n| `controls-neutral` | `var(--controls-text-neutral)` | `#161B2D` |\n| `controls-accent-primary-hover` | `var(--controls-text-accent-primary-hover)` | `#3664E2` |\n| `controls-accent-primary-active` | `var(--controls-text-accent-primary-active)` | `#7DA4FF` |",
+  "theming": "# Theming & CSS Variable Tokens\n\nAI DIAL UI Kit uses CSS custom properties (variables) for theming.\nDark and light themes are switched by setting different values for these variables on `:root` or a theme wrapper element.\n\n## Usage in Tailwind\n\nThe Tailwind config maps CSS variables to utility classes.\nUse these classes in your components:\n\n```tsx\n// Backgrounds\n<div className=\"bg-layer-0\" />   // darkest background\n<div className=\"bg-layer-1\" />   // main content area\n<div className=\"bg-layer-2\" />   // elevated panels\n\n// Text\n<span className=\"text-primary\" />    // main text color\n<span className=\"text-secondary\" />  // muted text\n<span className=\"text-error\" />      // error state\n\n// Borders\n<div className=\"border border-primary\" />  // standard border\n<div className=\"border border-error\" />    // error border\n```\n\n## Override CSS Variables\n\n```css\n:root {\n  --bg-layer-0: #000000;\n  --bg-layer-1: #0c101d;\n  --bg-layer-2: #161b2d;\n  --bg-layer-3: #1d2439;\n  --text-primary: #eef1f7;\n  --text-secondary: #9fa6bd;\n  --text-error: #f76464;\n  --stroke-primary: #696e7c;\n  --controls-bg-accent-primary: #3664e2;\n  /* ... see src/styles/theme.scss for full list */\n}\n```\n\n## Overlay stacking\n\nPortalled overlays stack on a ladder driven by one variable, `--z-overlay`\n(default `52`): `z-popup` (base — `Popup` backdrop), `z-floating` (+1 —\n`Dropdown`/`Select` overlays, submenus, `Calendar`), `z-interactive-tooltip`\n(+2 — `InteractiveTooltip`), `z-tooltip` (+3 — `Tooltip`). To lift every\noverlay above a host's own sticky header or modal, set the base once on `:root`\n(or in a `ThemeScope` class) — the steps move together, so their order is kept:\n\n```css\n:root {\n  --z-overlay: 1000;\n}\n```\n\nDo not override `[role='menu']` or hardcode `z-[53]` in a host. To move one\noverlay only, pass a `z-*` utility through its class prop (`listClassName`,\n`overlayClassName`, `contentClassName`, `panelClassName`) — `mergeClasses`\nreplaces the layer's step with it.\n\n## Token Reference\n\n\n### backgroundsColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-base` | `var(--bg-layer-base)` | `#f5f7fa` |\n| `error` | `var(--bg-error)` | `#f3d6d8` |\n| `warning` | `var(--bg-warning)` | `#faf0cf` |\n| `info` | `var(--bg-info)` | `#e1eaf9` |\n| `success` | `var(--bg-success)` | `#dbf1eb` |\n| `gradient-1` | `var(--bg-gradient-1)` | `#1d4ed8` |\n| `gradient-2` | `var(--bg-gradient-2)` | `#885df2` |\n| `blue` | `var(--bg-visual-blue)` | `#d6edf9` |\n| `green-1` | `var(--bg-visual-green-1)` | `#cde8e5` |\n| `green-2` | `var(--bg-visual-green-2)` | `#d1f0dc` |\n| `brown` | `var(--bg-visual-brown)` | `#fde8d8` |\n| `red` | `var(--bg-visual-red)` | `#fce7f3` |\n\n### borderColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `primary` | `var(--stroke-primary)` | `#57647a` |\n| `secondary` | `var(--stroke-secondary)` | `#d1dbea` |\n| `tertiary` | `var(--stroke-tertiary)` | `#e0e6f0` |\n| `error` | `var(--stroke-error)` | `#ae2f2f` |\n| `warning` | `var(--stroke-warning)` | `#eec840` |\n| `info` | `var(--stroke-info)` | `#1d4ed8` |\n| `accent` | `var(--stroke-accent)` | `#1d4ed8` |\n| `success` | `var(--stroke-success)` | `#007274` |\n| `default` | `var(--stroke-default)` | `#b2c2dd` |\n| `gradient-1` | `var(--stroke-gradient-1)` | `#5976e9` |\n| `gradient-2` | `var(--stroke-gradient-2)` | `#885df2` |\n| `focus` | `var(--stroke-focus)` | `#161b2d` |\n\n### textColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `primary` | `var(--text-primary)` | `#161b2d` |\n| `secondary` | `var(--text-secondary)` | `#57647a` |\n| `tertiary` | `var(--text-tertiary)` | `#848e9c` |\n| `accent` | `var(--text-accent)` | `#1d4ed8` |\n| `error` | `var(--text-error)` | `#ae2f2f` |\n| `warning` | `var(--text-warning)` | `#7f6300` |\n| `warning-icon` | `var(--text-warning-icon)` | `#eec840` |\n| `info` | `var(--text-info)` | `#1d4ed8` |\n| `success` | `var(--text-success)` | `#007274` |\n| `blue` | `var(--text-visual-blue)` | `#1189c8` |\n| `green-1` | `var(--text-visual-green-1)` | `#059669` |\n| `green-2` | `var(--text-visual-green-2)` | `#0d6e72` |\n| `green-3` | `var(--text-visual-green-3)` | `#065f46` |\n| `brown-1` | `var(--text-visual-brown-1)` | `#d36817` |\n| `brown-2` | `var(--text-visual-brown-2)` | `#b45309` |\n| `red` | `var(--text-visual-red)` | `#9d174d` |\n| `violet-1` | `var(--text-visual-violet-1)` | `#7c3aed` |\n| `violet-2` | `var(--text-visual-violet-2)` | `#3730b7` |\n\n### placeholderColor\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `primary` | `var(--text-primary)` | `#161b2d` |\n\n### backgroundsColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-0` | `var(--bg-layer-0)` | `#fcfcfc` |\n| `layer-1` | `var(--bg-layer-1)` | `#e0e6f0` |\n| `layer-2` | `var(--bg-layer-2)` | `#eef1f7` |\n| `layer-3` | `var(--bg-layer-3)` | `#fcfcfc` |\n| `layer-4` | `var(--bg-layer-4)` | `#d1dbea` |\n| `blackout` | `var(--bg-blackout)` | `#0c101d4d` |\n| `neutral` | `var(--bg-neutral)` | `#fcfcfc` |\n| `accent-primary` | `var(--bg-accent-primary)` | `#5c8dea` |\n| `accent-secondary` | `var(--bg-accent-secondary)` | `#37babc` |\n| `red-400` | `var(--bg-red-400)` | `#f76464` |\n| `controls-error` | `var(--controls-bg-error)` | `#ae2f2f` |\n| `controls-disable` | `var(--controls-bg-disable)` | `#d1dbea` |\n\n### borderColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--stroke-accent-primary)` | `#124ace` |\n| `accent-secondary` | `var(--stroke-accent-secondary)` | `#007274` |\n| `controls-accent` | `var(--controls-bg-accent)` | `#5c8dea` |\n| `hover` | `var(--stroke-hover)` | `#eef1f7` |\n| `red-900` | `var(--red-900)` | `#402027` |\n\n### textColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--text-accent-primary)` | `#7da4ff` |\n| `accent-secondary` | `var(--text-accent-secondary)` | `#37babc` |\n| `accent-tertiary` | `var(--text-accent-tertiary)` | `#a972ff` |\n| `controls-permanent` | `var(--controls-text-permanent)` | `#fcfcfc` |\n| `controls-neutral` | `var(--controls-text-neutral)` | `#161b2d` |\n\n### shadowColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `lg` | `var(--shadow-lg)` | `#2764d914` |",
   "components": [
     {
       "name": "Spinner",
@@ -423,7 +423,7 @@
     },
     {
       "name": "Calendar",
-      "category": "Components_2_0",
+      "category": "Components_2_0/Calendar",
       "generation": "2.0",
       "description": "A date/time picker supporting four selection modes.\naliases: DatePicker|DateTimePicker\nDesign system 2.0\n\nRenders a text-field trigger that opens a rounded month-grid popover for\nthe `date`/`datetime` modes, a masked `\"HH:mm\"` text field for `time`, and\na popover list of weekday names for `weekday`. Month/weekday names and\ndate formatting are localized via the `locale` prop.",
       "props": [
@@ -520,7 +520,14 @@
           "type": "boolean",
           "required": false,
           "defaultValue": "false",
-          "description": "Shows the viewer's timezone (e.g. `(GMT+01:00) Europe/Berlin`) at the trailing edge of the `time` field"
+          "description": "Shows the viewer's timezone (e.g. `(GMT+01:00) Europe/Berlin`) at the trailing edge of the time fields (`time` mode and the `datetime` popover footer)"
+        },
+        {
+          "name": "showTimePicker",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "`time` mode only: shows a clock button that opens an hour/minute list popover next to the typeable field"
         }
       ],
       "examples": [
@@ -532,7 +539,7 @@
       "name": "FolderPath",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A read-only, non-clickable folder/location path built on top of `DialBreadcrumb`.\naliases: FolderBreadcrumb|LocationPath\nDesign system 2.0\n\nEvery segment is disabled (no navigation); the first segment gets a leading\nfolder icon and the last segment is styled as the current/leaf item.",
+      "description": "A read-only, non-clickable folder/location path styled like `DialBreadcrumb`.\naliases: FolderBreadcrumb|LocationPath\nDesign system 2.0\n\nEvery segment is disabled (no navigation); the first segment gets a leading\nfolder icon and the last segment is styled as the current/leaf item. A path\nof more than three segments collapses its middle into a non-interactive `…`\nthat shows the full path (`Shared > Team > Sub > Reports`) in a tooltip on\nhover; the hidden segments stay in the accessible text.\n\nWhen the path is too wide, the leaf keeps its width longest: the folder\nbefore it truncates first, down to about one character, and if the leaf\nstill does not fit, that folder joins the `…` as well. Only then does the\nleaf truncate.",
       "props": [
         {
           "name": "segments",
@@ -558,14 +565,14 @@
           "name": "className",
           "type": "string",
           "required": false,
-          "description": "Additional CSS classes applied to the breadcrumb's `<nav>` element.\n`DialBreadcrumb` scrolls horizontally on overflow, so this must not shrink\nthe nav to content width (e.g. never `w-auto`)."
+          "description": "Additional CSS classes applied to the `<nav>` element.\nThe nav clips on overflow, so this must not shrink it to content width\n(e.g. never `w-auto`)."
         },
         {
           "name": "ariaLabel",
           "type": "string",
           "required": false,
           "defaultValue": "'Folder path'",
-          "description": "Accessible name for the underlying `<nav>`.\n`DialBreadcrumb` would otherwise name it \"Breadcrumb\", which misdescribes a\npath with no navigable items; override it when a page shows more than one."
+          "description": "Accessible name for the `<nav>`. A path\nhas no navigable items, so it is not named \"Breadcrumb\"; override it when a\npage shows more than one."
         }
       ],
       "examples": [
@@ -1234,6 +1241,12 @@
           "required": false,
           "description": "Accessible name for the field; use it when there is no visible label."
         },
+        {
+          "name": "ariaDescribedBy",
+          "type": "string",
+          "required": false,
+          "description": "Ids of extra elements describing the field, e.g. an error rendered outside it; the field's own `error`/`caption` are linked automatically."
+        },
         {
           "name": "searchable",
           "type": "boolean",
@@ -1679,7 +1692,7 @@
       "name": "PasswordInput",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A password field with a reveal toggle, built on .\naliases: SecureInput|ToggleablePassword\nDesign system 2.0\n\nThe toggle is a real `<button>`, so it is reachable by keyboard and announces\nboth its purpose and its state. `type` and `iconAfter` are owned by this\ncomponent; every other  prop is passed through.\n\nA disabled field is masked with no toggle at all, and comes back masked if it\nis enabled again.",
+      "description": "A password field with a reveal toggle, built on .\naliases: SecureInput|ToggleablePassword\nDesign system 2.0\n\nThe toggle is a real `<button>`, so it is reachable by keyboard and announces\nboth its purpose and its state. `type` and `iconAfter` are owned by this\ncomponent; every other  prop is passed through.\n\nA disabled field is masked with no toggle at all, and comes back masked if it\nis enabled again.\n\n`isToggleHidden` does the same without disabling the field: use it when there\nis nothing to reveal, such as a stored secret the server never returns.",
       "props": [
         {
           "name": "showPasswordLabel",
@@ -1694,6 +1707,12 @@
           "required": false,
           "defaultValue": "'Hide password'",
           "description": "Accessible name of the toggle while the value is visible"
+        },
+        {
+          "name": "isToggleHidden",
+          "type": "boolean",
+          "required": false,
+          "description": "Hides the reveal toggle and keeps the value masked, leaving the field editable"
         }
       ],
       "examples": [
@@ -2204,10 +2223,62 @@
           "type": "0 | -1 | RefObject<HTMLElement | null>",
           "required": false,
           "description": "Initial focus target inside the overlay on open, forwarded to `FloatingFocusManager`; when omitted, matches pre-existing behavior"
+        },
+        {
+          "name": "searchable",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Show a search field above `items` that filters them and highlights the match"
+        },
+        {
+          "name": "searchValue",
+          "type": "string",
+          "required": false,
+          "description": "Controlled query of the search field"
+        },
+        {
+          "name": "onSearchChange",
+          "type": "(value: string) => void",
+          "required": false,
+          "description": "Fired with every edit of the search field, and with `''` when the menu closes"
+        },
+        {
+          "name": "searchPlaceholder",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Search'",
+          "description": "Placeholder and accessible name of the search field"
+        },
+        {
+          "name": "searchClearLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Clear search'",
+          "description": "Accessible name of the search field's clear button"
+        },
+        {
+          "name": "noResultsLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'No results found'",
+          "description": "Text shown and announced when the query leaves no items"
+        },
+        {
+          "name": "filterItem",
+          "type": "DropdownItemFilter",
+          "required": false,
+          "description": "Item matcher; defaults to a case-insensitive substring match on a string `label`"
+        },
+        {
+          "name": "maxVisibleItems",
+          "type": "number",
+          "required": false,
+          "description": "Rows the item list shows before it scrolls"
         }
       ],
       "examples": [
-        "// Simple items menu\n<Dropdown items={[{ key: 'profile', label: 'Profile' }, { key: 'logout', label: 'Logout' }]}>\n  <button type=\"button\" className=\"px-3 py-2 rounded border\">Open</button>\n</Dropdown>\n\n// Hover trigger\n<Dropdown trigger={[DropdownTrigger.Hover]} placement=\"bottom-end\" items={items}>\n  <button type=\"button\" className=\"px-3 py-2 rounded border\">Hover me</button>\n</Dropdown>\n\n// Custom overlay content\n<Dropdown closable renderOverlay={() => <div className=\"p-3\">Custom content</div>}>\n  <button type=\"button\" className=\"px-3 py-2 rounded border\">Custom</button>\n</Dropdown>"
+        "// Simple items menu\n<Dropdown items={[{ key: 'profile', label: 'Profile' }, { key: 'logout', label: 'Logout' }]}>\n  <button type=\"button\" className=\"px-3 py-2 rounded border\">Open</button>\n</Dropdown>\n\n// Hover trigger\n<Dropdown trigger={[DropdownTrigger.Hover]} placement=\"bottom-end\" items={items}>\n  <button type=\"button\" className=\"px-3 py-2 rounded border\">Hover me</button>\n</Dropdown>\n\n// Custom overlay content\n<Dropdown closable renderOverlay={() => <div className=\"p-3\">Custom content</div>}>\n  <button type=\"button\" className=\"px-3 py-2 rounded border\">Custom</button>\n</Dropdown>\n\n// Searchable menu, seven rows tall before it scrolls\n<Dropdown searchable maxVisibleItems={7} items={items}>\n  <button type=\"button\" className=\"px-3 py-2 rounded border\">Create</button>\n</Dropdown>"
       ],
       "sourceFile": "components/New/Dropdown/Dropdown.tsx"
     },
@@ -2326,7 +2397,7 @@
       "name": "CaptionText",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A component for displaying caption text with consistent styling\naliases: HelperText|ValidationText\nDesign system 2.0",
+      "description": "A component for displaying caption text with consistent styling\naliases: HelperText|ValidationText\nDesign system 2.0\n\nIt carries no live-region role: a field caption or error is described, not\nannounced. Give it an `id` and point the control's `aria-describedby` at it\n(the 2.0 form controls do this for their own `caption` / `error`). Wrap it in\na `role=\"alert\"` region only for a message that must interrupt, such as a\nfailed submit.",
       "props": [
         {
           "name": "text",
@@ -2343,7 +2414,7 @@
         }
       ],
       "examples": [
-        "<CaptionText text=\"This field is required\" variant={CaptionType.Error} />"
+        "<input aria-describedby=\"name-error\" aria-invalid />\n<CaptionText id=\"name-error\" text=\"This field is required\" variant={CaptionType.Error} />"
       ],
       "sourceFile": "components/New/CaptionText/CaptionText.tsx"
     },
@@ -3022,7 +3093,7 @@
       "name": "Tabs",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A row or rail of tabs, marking the active one and showing optional icons and count badges.\naliases: TabRow|TabNavigation|TabBar|VerticalTabs|SettingsNav|SideNav\nDesign system 2.0\n\nFollows the ARIA tabs pattern with automatic activation: only the active tab is\nin the tab order, and the arrow keys move both focus and selection. `Home` and\n`End` jump to the first and last tab, and the arrows wrap around the ends.\nTabs marked `disabled` are greyed out, cannot be clicked, and are skipped by\nkeyboard navigation.\n\n`TabOrientation.Horizontal` draws the default row: the active tab takes a\ngradient underline, and `ArrowLeft` / `ArrowRight` move along it.\n`TabOrientation.Vertical` draws the settings-page rail instead — full-width\nrows with the active one on a tinted pill rather than an underline, driven by\n`ArrowUp` / `ArrowDown`. The rail is the shape to reach for when the tabs\nlabel whole pages of a settings surface; the row, when they filter one.\n\n`className` lands on whichever element is outermost: the heading wrapper when\n`sectionLabel` is set, the `role=\"tablist\"` itself when it is not.\n\nThe component renders the tabs only; the panels stay with the consumer.",
+      "description": "A row or rail of tabs, marking the active one and showing optional icons and count badges.\naliases: TabRow|TabNavigation|TabBar|VerticalTabs|SettingsNav|SideNav\nDesign system 2.0\n\nFollows the ARIA tabs pattern with automatic activation: only the active tab is\nin the tab order, and the arrow keys move both focus and selection. `Home` and\n`End` jump to the first and last tab, and the arrows wrap around the ends.\nTabs marked `disabled` are greyed out, cannot be clicked, and are skipped by\nkeyboard navigation.\n\n`TabOrientation.Horizontal` draws the default row: the active tab takes a\ngradient underline, and `ArrowLeft` / `ArrowRight` move along it.\n`TabOrientation.Vertical` draws the settings-page rail instead — full-width\nrows with the active one on a tinted pill rather than an underline, driven by\n`ArrowUp` / `ArrowDown`. The rail is the shape to reach for when the tabs\nlabel whole pages of a settings surface; the row, when they filter one.\n\nA tab with a `status` (`TabStatus.Error` or `TabStatus.Warning`) draws a\ncoloured icon after its label, and the status text joins the tab's accessible\nname so the state reaches assistive tech as well as sighted users.\n\n`className` lands on whichever element is outermost: the heading wrapper when\n`sectionLabel` is set, the `role=\"tablist\"` itself when it is not.\n\nThe component renders the tabs only; the panels stay with the consumer.",
       "props": [
         {
           "name": "tabs",
@@ -3660,7 +3731,7 @@
       "name": "Avatar",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A person's or an entity's picture, or its initials on a colour picked from\nits name.\naliases: UserAvatar|InitialsAvatar|ProfilePicture\nDesign system 2.0\n\nThe same name always gets the same colour, drawn from the theme's visual\ntokens, so a list of avatars stays stable between renders and sessions. An\nimage that is missing or fails to load falls back to the initials; a new\n`src` tries the image again.\n\nAn avatar with an `alt` is a `role=\"img\"` named by it, whether it shows the\nimage or the initials. Without one it is decorative and hidden from\nassistive technology, which is right when a visible name sits beside it.",
+      "description": "A person's or an entity's picture, or its initials on a colour picked from\nits name.\naliases: UserAvatar|InitialsAvatar|ProfilePicture\nDesign system 2.0\n\nThe same name always gets the same colour, drawn from the theme's visual\ntokens, so a list of avatars stays stable between renders and sessions; pass\n`color` to pin one entry of `AVATAR_PALETTE` instead, so every avatar of a\nkind shares one colour regardless of name or locale. An image that is\nmissing or fails to load falls back to the initials; a new `src` tries the\nimage again.\n\nAn avatar with an `alt` is a `role=\"img\"` named by it, whether it shows the\nimage or the initials. Without one it is decorative and hidden from\nassistive technology, which is right when a visible name sits beside it.",
       "props": [
         {
           "name": "name",
@@ -3701,6 +3772,12 @@
           "defaultValue": "AvatarShape.Circle",
           "description": "Outline of the avatar"
         },
+        {
+          "name": "color",
+          "type": "AvatarColorClasses",
+          "required": false,
+          "description": "Explicit colour pair overriding the deterministic pick from `name`"
+        },
         {
           "name": "className",
           "type": "string",
@@ -3713,6 +3790,12 @@
           "required": false,
           "description": "Type-scale class for the initials, replacing the size-derived font size"
         },
+        {
+          "name": "imageClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied only while the image is shown"
+        },
         {
           "name": "onImageError",
           "type": "(event: SyntheticEvent<HTMLImageElement>) => void",
@@ -3729,7 +3812,7 @@
       "name": "EntityIdentity",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "The identity block of a DIAL entity: its icon, a coloured type label, the\nname and the version, with an optional featured chip.\naliases: EntityHeader|ModelHeader|AppIdentity\nDesign system 2.0\n\nThe type label is plain uppercase text coloured by `item.type`. The icon is\na square `Avatar`, so a missing or broken image falls back to the initials of\nthe name. The icon is decorative: the name next to it already names the\nentity.",
+      "description": "The identity block of a DIAL entity: its icon, a coloured type label, the\nname and the version, with an optional featured chip.\naliases: EntityHeader|ModelHeader|AppIdentity\nDesign system 2.0\n\nThe type label is plain uppercase text coloured by `item.type`. The icon is\na square `Avatar`, so a missing or broken image falls back to the initials of\nthe name. The image sits on the `bg-entity-icon` plate, so a dark theme can\nkeep a dark, transparent logo legible. The icon is decorative: the name next\nto it already names the entity.",
       "props": [
         {
           "name": "item",
@@ -3743,6 +3826,13 @@
           "required": false,
           "description": "User-visible strings"
         },
+        {
+          "name": "showType",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether to show the type label"
+        },
         {
           "name": "showVersion",
           "type": "boolean",
@@ -3828,6 +3918,89 @@
       ],
       "sourceFile": "components/New/EntityIdentity/EntityIdentity.tsx"
     },
+    {
+      "name": "SelectedEntityCard",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "The card of a form field that holds one selected entity — a model, an agent,\na toolset: its identity, a skeleton while the catalog loads, its raw id when\nthe catalog does not list it, or a placeholder when nothing is selected.\naliases: SelectedModelCard|ModelCard|EntityCard\nDesign system 2.0\n\nThe control that changes the selection lives next to the card, not in it:\nthe card is not interactive.",
+      "props": [
+        {
+          "name": "entityId",
+          "type": "string",
+          "required": true,
+          "description": "Id of the selected entity, `''` when there is none"
+        },
+        {
+          "name": "item",
+          "type": "EntityIdentityItem",
+          "required": false,
+          "description": "The selected entity as the catalog lists it"
+        },
+        {
+          "name": "isLoading",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the catalog is still loading"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Dims the card"
+        },
+        {
+          "name": "error",
+          "type": "string",
+          "required": false,
+          "description": "Error text under the card; also turns its border red"
+        },
+        {
+          "name": "details",
+          "type": "ReactNode",
+          "required": false,
+          "description": "A line under the name"
+        },
+        {
+          "name": "labels",
+          "type": "SelectedEntityCardLabels",
+          "required": false,
+          "description": "User-visible strings"
+        },
+        {
+          "name": "showType",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether to show the type label"
+        },
+        {
+          "name": "iconSize",
+          "type": "number",
+          "required": false,
+          "defaultValue": "44",
+          "description": "Icon size in px"
+        },
+        {
+          "name": "headingLevel",
+          "type": "number",
+          "required": false,
+          "defaultValue": "4",
+          "description": "Heading level of the name"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the card"
+        }
+      ],
+      "examples": [
+        "<SelectedEntityCard\n  entityId=\"gpt-4o\"\n  item={{ type: EntityType.Model, name: 'GPT-4o', version: '2024-11-20' }}\n  isLoading={isLoading}\n  labels={{ type: t('Model'), placeholder: t('Select model') }}\n/>"
+      ],
+      "sourceFile": "components/New/SelectedEntityCard/SelectedEntityCard.tsx"
+    },
     {
       "name": "SideDrawer",
       "category": "Components_2_0",
@@ -3976,7 +4149,7 @@
       "name": "Tag",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A compact label element used for selections, filters, or categories.\naliases: Chip|Pill\nDesign system 2.0\n\nThe tag has one height — the 32px pill of the 2.0 design. There is no `size`\nprop: a tag sizes itself, and a caller that needs a different height is\nusually reaching for a button.\n\nThe label truncates rather than wrapping, and carries a native `title` so the\nfull text stays reachable when it does.\n\nA tag with `onClick` becomes a `role=\"button\"` operable with Enter and Space.\nIts remove control is a real nested `<button>`, so keep the two roles apart in\nthe caller: a clickable tag that is also closable gives a screen reader two\nactions with no way to tell which one it landed on.\n\nNo tag draws a rim; the two appearances are told apart by their fill.\n`TagAppearance.Selectable` is the filter chip of the 2.0 design: no fill\nat all until it is selected, one hover tint shared by both states, a semibold\nlabel once selected, and the state carried on `aria-pressed` rather than by\nthe tint alone. Give it an `onClick` — a selectable tag that cannot be\nactivated is a colour and nothing else.\n\nSelecting one therefore changes its width by the difference between the\nregular and semibold label. In a wrapping filter row that is what the design\nasks for; if a fixed width matters, give the chip one.",
+      "description": "A compact label element used for selections, filters, or categories.\naliases: Chip|Pill\nDesign system 2.0\n\nThe tag is the 32px pill of the 2.0 design; `TagAppearance.Bordered` is the\ncompact 24px value chip of a form field. There is no `size` prop: a tag sizes\nitself, and a caller that needs a different height is usually reaching for a\nbutton.\n\nThe label truncates rather than wrapping, and carries a native `title` so the\nfull text stays reachable when it does.\n\nA tag with `onClick` becomes a `role=\"button\"` operable with Enter and Space.\nIts remove control is a real nested `<button>`, so keep the two roles apart in\nthe caller: a clickable tag that is also closable gives a screen reader two\nactions with no way to tell which one it landed on.\n\n`outlined` and `selectable` draw no rim and are told apart by their fill;\n`bordered` draws one: the outlined `Badge`'s look, for a value the user can\nremove, on a surface the rimless fill would vanish on.\n`TagAppearance.Selectable` is the filter chip of the 2.0 design: no fill\nat all until it is selected, one hover tint shared by both states, a semibold\nlabel once selected, and the state carried on `aria-pressed` rather than by\nthe tint alone. Give it an `onClick` — a selectable tag that cannot be\nactivated is a colour and nothing else.\n\nSelecting one therefore changes its width by the difference between the\nregular and semibold label. In a wrapping filter row that is what the design\nasks for; if a fixed width matters, give the chip one.",
       "props": [
         {
           "name": "label",
@@ -3995,7 +4168,7 @@
           "type": "TagAppearance",
           "required": false,
           "defaultValue": "TagAppearance.Outlined",
-          "description": "`outlined` is the filled chip on the raised\nlayer; `selectable` is the unfilled filter chip that tints and turns semibold when selected."
+          "description": "`outlined` is the filled chip on the raised\nlayer; `selectable` is the unfilled filter chip that tints and turns semibold when selected;\n`bordered` is the compact rimmed value chip of a form field."
         },
         {
           "name": "selected",
@@ -4909,6 +5082,73 @@
       ],
       "sourceFile": "components/New/ResizableContainer/ResizableContainer.tsx"
     },
+    {
+      "name": "ResizeHandle",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A vertical separator on the inline-end edge of a panel that resizes the panel\nby pointer or keyboard.\naliases: Splitter|ColumnResizer|DragHandle|Divider\nDesign system 2.0\n\nThe component is controlled: it reports every width through `onWidthChange`\nand the host applies it to the panel. It is a focusable `separator` — the\nwindow-splitter pattern — so the arrow keys move it by `keyboardStep`, `Home`\nand `End` jump to the bounds, and a double click resets it to `defaultWidth`.\nDrag and keys follow the writing direction, so a panel at the inline start\ngrows as the pointer moves towards the inline end, in RTL as well.\n\nIt is positioned absolutely against its nearest positioned ancestor, over the\npanel's inline-end edge, and draws a thin line. The accent line and the hint\nappear once the pointer has rested on the handle, and a themed arrow follows\nthe pointer instead of the native cursor. Hide it on screens too narrow to\ndrag on by wrapping it, e.g. in `hidden desktop:block`.",
+      "props": [
+        {
+          "name": "width",
+          "type": "number",
+          "required": true,
+          "description": "Current width of the panel in px."
+        },
+        {
+          "name": "minWidth",
+          "type": "number",
+          "required": true,
+          "description": "Smallest width in px."
+        },
+        {
+          "name": "maxWidth",
+          "type": "number",
+          "required": true,
+          "description": "Largest width in px."
+        },
+        {
+          "name": "defaultWidth",
+          "type": "number",
+          "required": false,
+          "description": "Width a double click resets to."
+        },
+        {
+          "name": "onWidthChange",
+          "type": "(width: number) => void",
+          "required": true,
+          "description": "Called with the next, limited width."
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "required": true,
+          "description": "Accessible name of the separator."
+        },
+        {
+          "name": "tooltip",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Hint shown beside the pointer once it rests on the handle."
+        },
+        {
+          "name": "keyboardStep",
+          "type": "number",
+          "required": false,
+          "defaultValue": "DEFAULT_KEYBOARD_STEP",
+          "description": "Width change of one arrow key press in px."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the handle."
+        }
+      ],
+      "examples": [
+        "<div className=\"relative\" style={{ width }}>\n  <Sidebar />\n  <ResizeHandle\n    width={width}\n    minWidth={280}\n    maxWidth={640}\n    defaultWidth={400}\n    onWidthChange={setWidth}\n    label=\"Resize sidebar\"\n    tooltip=\"Drag to resize\"\n  />\n</div>"
+      ],
+      "sourceFile": "components/New/ResizeHandle/ResizeHandle.tsx"
+    },
     {
       "name": "ConditionalResizableContainer",
       "category": "Components_2_0",
@@ -4932,7 +5172,7 @@
       "name": "NoDataContent",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "Message shown in place of a list, table or grid that has nothing to show.\naliases: EmptyState|NoResults|ZeroState\nDesign system 2.0\n\nFills its container and centres an illustration, a headline and an optional\nsecondary line. The icon is decorative, so it is hidden from assistive tech\nand the text carries the message on its own.",
+      "description": "Message shown in place of a list, table or grid that has nothing to show.\naliases: EmptyState|NoResults|ZeroState\nDesign system 2.0\n\nFills its container and centres an illustration, a headline, an optional\nsecondary line and an optional action. The icon is decorative, so it is\nhidden from assistive tech and the text carries the message on its own.",
       "props": [
         {
           "name": "title",
@@ -4950,7 +5190,13 @@
           "name": "icon",
           "type": "ReactNode",
           "required": false,
-          "description": "Illustration above the title. Defaults to the empty-state document mark."
+          "description": "Illustration above the title. Defaults to the placeholder-list card."
+        },
+        {
+          "name": "action",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional way forward, rendered under the text."
         },
         {
           "name": "live",
@@ -4979,104 +5225,232 @@
         }
       ],
       "examples": [
-        "<NoDataContent\n  title=\"No results found\"\n  description=\"Try a different search term.\"\n/>\n\n<NoDataContent title=\"Nothing here yet\" icon={<IconInbox size={60} />} live />"
+        "<NoDataContent\n  title=\"No chats found\"\n  description=\"Try a different search term or check your filters.\"\n  live\n/>\n\n<NoDataContent\n  title=\"No chats yet\"\n  description=\"Chats will appear here once you start one.\"\n  action={<Button label=\"New chat\" onClick={createChat} />}\n/>"
       ],
       "sourceFile": "components/New/NoDataContent/NoDataContent.tsx"
     },
     {
-      "name": "TransferQueue",
+      "name": "StateScreen",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A floating panel listing the files of an upload, download, import or export\nwith a live status per row.\naliases: UploadQueue|ImportQueue|ExportQueue|UploadProgress|ProgressToast\nDesign system 2.0\n\nEach row shows the file's `FileIcon` and name, and a trailing status: a\nspinner (with a cancel control on hover or focus) while in progress, a check\non success, a warning or error icon whose reason is both its tooltip and its\naccessible name, or \"Canceled\". The header carries the host's title, a count\nof failed items, and collapse and close controls. Collapsed while work runs,\nthe rows are replaced by one aggregate `ProgressBar`.\n\nClosing while an item is in progress or has failed asks for confirmation\nfirst. Once every item has succeeded the queue closes itself after\n`autoCloseDelay`; a warned or canceled row keeps it open so it can be read.\n\nThe root is a polite `role=\"status\"` live region. Positioning is left to\nthe host — wrap it in a fixed container at the screen corner.",
+      "description": "A whole screen given over to one state the app cannot work past: signed out,\naccess denied, a misconfigured provider.\naliases: AuthScreen|LoginScreen|ForbiddenPage|AccessDenied|ErrorPage|FullPageState\nDesign system 2.0\n\nFills its container and centres a round icon badge, an `h1`, an optional\ndescription and an optional action. The root is a `section` named by its\ntitle, so the state is a landmark of its own. For an empty list or grid\ninside a page, use `NoDataContent` instead.",
       "props": [
         {
           "name": "title",
-          "type": "string",
-          "required": true,
-          "description": "Heading, rendered verbatim"
-        },
-        {
-          "name": "items",
-          "type": "TransferQueueItem[]",
+          "type": "ReactNode",
           "required": true,
-          "description": "Items to show, in display order"
+          "description": "Headline of the state, rendered as the page's `h1`."
         },
         {
-          "name": "onClose",
-          "type": "() => void",
-          "required": true,
-          "description": "Called when the queue should close"
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional line under the title."
         },
         {
-          "name": "onCancelItem",
-          "type": "(id: string) => void",
+          "name": "icon",
+          "type": "ReactNode",
           "required": false,
-          "description": "Called with an item's id when the user cancels it"
+          "description": "Glyph drawn in the round badge; the badge is omitted without one."
         },
         {
-          "name": "labels",
-          "type": "Partial<TransferQueueLabels>",
+          "name": "action",
+          "type": "ReactNode",
           "required": false,
-          "description": "Overrides for the English default strings"
+          "description": "The way out of the state, rendered under the text."
         },
         {
-          "name": "autoCloseDelay",
-          "type": "number",
+          "name": "className",
+          "type": "string",
           "required": false,
-          "defaultValue": "TRANSFER_QUEUE_AUTO_CLOSE_DELAY_MS",
-          "description": "Delay before an all-succeeded queue closes itself; `0` disables"
+          "description": "Additional CSS classes for the container."
         },
         {
-          "name": "className",
+          "name": "titleClassName",
           "type": "string",
           "required": false,
-          "description": "Additional CSS classes for the root panel"
+          "description": "Additional CSS classes for the title."
         },
         {
-          "name": "bodyClassName",
+          "name": "descriptionClassName",
           "type": "string",
           "required": false,
-          "description": "Additional CSS classes for the list of rows"
+          "description": "Additional CSS classes for the description."
         }
       ],
       "examples": [
-        "<TransferQueue\n  title=\"Importing 2 files\"\n  items={[\n    { id: '1', name: 'report.pdf', status: TransferQueueItemStatus.Success },\n    { id: '2', name: 'data.csv', status: TransferQueueItemStatus.InProgress, percent: 40 },\n  ]}\n  onClose={handleClose}\n  onCancelItem={handleCancel}\n/>"
+        "<StateScreen\n  icon={<IconLock size={DIAL_ICON_SIZE.LG} stroke={DIAL_KIT_ICON_STROKE} />}\n  title=\"Log in to configure your QuickApp\"\n  description=\"Set up instructions, add-ons and settings.\"\n  action={<NeutralButton label=\"Log in\" onClick={openLogin} />}\n/>"
       ],
-      "sourceFile": "components/New/TransferQueue/TransferQueue.tsx"
+      "sourceFile": "components/New/StateScreen/StateScreen.tsx"
     },
     {
-      "name": "Grid",
+      "name": "FormSection",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A data grid built on ag-Grid, wired to the 2.0 tokens and controls.\naliases: DataTable|TableGrid|DataGrid\nDesign system 2.0\n\nComes preconfigured with case-insensitive sorting, floating column filters,\ncolumns sized to the available width, a row context menu, truncation\ntooltips, and an empty state.\n\nThe selection column renders the 2.0 `Checkbox` and `Radio` instead of\nag-Grid's own inputs, so selection looks and behaves like every other control\nin the kit and the select-all reaches the `mixed` state when the selection is\npartial. The column stays faded out until the row is hovered, something is\nselected, or the keyboard reaches it.\n\nSelection works controlled or uncontrolled: pass `selectedRowIds` to own it,\nor read `onSelectionChange` and let the grid keep its own. A `sort` declared\non a column is honoured — 1.0 stripped it on startup.",
+      "description": "A titled section of a form or a builder column: a heading with an optional\naction at its end, an optional description and the section's content.\naliases: SectionRow|FieldSection|SettingsSection|FormGroup|SectionHeader\nDesign system 2.0\n\nThe root is a `section` named by its heading, so each section is a region a\nscreen reader can jump to. `headingLevel` picks the heading element so the\nsection fits the outline of the page it is mounted in; the variant only sets\nthe type scale. The action sits at the inline end of the heading row and\nnever shrinks; the content is rendered as given, with no field styling of its\nown. For a collapsible group, use `Accordion`; for a single labelled control,\nthe control's own `label`.",
       "props": [
         {
-          "name": "columnDefs",
-          "type": "ColDef<T>[]",
-          "required": false,
-          "description": "Column definitions, in ag-Grid `ColDef` format."
+          "name": "title",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Heading of the section; also names the `section` landmark."
         },
         {
-          "name": "rowData",
-          "type": "T[]",
+          "name": "action",
+          "type": "ReactNode",
           "required": false,
-          "description": "Rows to display."
+          "description": "Control at the end of the heading row."
         },
         {
-          "name": "additionalGridOptions",
-          "type": "GridOptions<T>",
+          "name": "description",
+          "type": "ReactNode",
           "required": false,
-          "description": "Extra ag-Grid options, merged over the defaults."
+          "description": "Optional line under the heading."
         },
         {
-          "name": "getContextMenuItems",
-          "type": "(row: T) => DropdownItem[]",
+          "name": "variant",
+          "type": "FormSectionVariant",
           "required": false,
-          "description": "Items of the row context menu. Omit for no menu."
+          "defaultValue": "FormSectionVariant.Row",
+          "description": "Type scale of the heading and description. Defaults to `FormSectionVariant.Row`."
         },
         {
-          "name": "className",
-          "type": "string",
+          "name": "headingLevel",
+          "type": "FormSectionHeadingLevel",
+          "required": false,
+          "defaultValue": "3",
+          "description": "Level of the heading element. Defaults to `3`."
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "The section's fields or values."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the container."
+        },
+        {
+          "name": "titleClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the heading."
+        },
+        {
+          "name": "descriptionClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the description."
+        },
+        {
+          "name": "contentClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the content wrapper."
+        }
+      ],
+      "examples": [
+        "<FormSection\n  title=\"Model\"\n  variant={FormSectionVariant.Caption}\n  action={<GhostButton label=\"Change\" onClick={openPicker} />}\n  description=\"The model that answers in this application.\"\n>\n  <SelectedEntityCard entityId={modelId} />\n</FormSection>"
+      ],
+      "sourceFile": "components/New/FormSection/FormSection.tsx"
+    },
+    {
+      "name": "TransferQueue",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A floating panel listing the files of an upload, download, import or export\nwith a live status per row.\naliases: UploadQueue|ImportQueue|ExportQueue|UploadProgress|ProgressToast\nDesign system 2.0\n\nEach row shows the file's `FileIcon` and name, and a trailing status: a\nspinner (with a cancel control on hover or focus) while in progress, a check\non success, a warning or error icon whose reason is both its tooltip and its\naccessible name, or \"Canceled\". The header carries the host's title and the\ncollapse and close controls. Collapsed while work runs,\nthe rows are replaced by one aggregate `ProgressBar`.\n\nClosing while an item is in progress asks for confirmation first; a queue\nwhose items have all settled, failed ones included, closes straight away. Once every item has succeeded the queue closes itself after\n`autoCloseDelay`; a warned or canceled row keeps it open so it can be read.\n\nThe root is a polite `role=\"status\"` live region. Positioning is left to\nthe host — wrap it in a fixed container at the screen corner.",
+      "props": [
+        {
+          "name": "title",
+          "type": "string",
+          "required": true,
+          "description": "Heading, rendered verbatim"
+        },
+        {
+          "name": "items",
+          "type": "TransferQueueItem[]",
+          "required": true,
+          "description": "Items to show, in display order"
+        },
+        {
+          "name": "onClose",
+          "type": "() => void",
+          "required": true,
+          "description": "Called when the queue should close"
+        },
+        {
+          "name": "onCancelItem",
+          "type": "(id: string) => void",
+          "required": false,
+          "description": "Called with an item's id when the user cancels it"
+        },
+        {
+          "name": "labels",
+          "type": "Partial<TransferQueueLabels>",
+          "required": false,
+          "description": "Overrides for the English default strings"
+        },
+        {
+          "name": "autoCloseDelay",
+          "type": "number",
+          "required": false,
+          "defaultValue": "TRANSFER_QUEUE_AUTO_CLOSE_DELAY_MS",
+          "description": "Delay before an all-succeeded queue closes itself; `0` disables"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the root panel"
+        },
+        {
+          "name": "bodyClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the list of rows"
+        }
+      ],
+      "examples": [
+        "<TransferQueue\n  title=\"Importing 2 files\"\n  items={[\n    { id: '1', name: 'report.pdf', status: TransferQueueItemStatus.Success },\n    { id: '2', name: 'data.csv', status: TransferQueueItemStatus.InProgress, percent: 40 },\n  ]}\n  onClose={handleClose}\n  onCancelItem={handleCancel}\n/>"
+      ],
+      "sourceFile": "components/New/TransferQueue/TransferQueue.tsx"
+    },
+    {
+      "name": "Grid",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A data grid built on ag-Grid, wired to the 2.0 tokens and controls.\naliases: DataTable|TableGrid|DataGrid\nDesign system 2.0\n\nComes preconfigured with case-insensitive sorting, floating column filters,\ncolumns sized to the available width, a row context menu, truncation\ntooltips, and an empty state.\n\nThe selection column renders the 2.0 `Checkbox` and `Radio` instead of\nag-Grid's own inputs, so selection looks and behaves like every other control\nin the kit and the select-all reaches the `mixed` state when the selection is\npartial. The column stays faded out until the row is hovered, something is\nselected, or the keyboard reaches it.\n\nSelection works controlled or uncontrolled: pass `selectedRowIds` to own it,\nor read `onSelectionChange` and let the grid keep its own. A `sort` declared\non a column is honoured — 1.0 stripped it on startup.",
+      "props": [
+        {
+          "name": "columnDefs",
+          "type": "ColDef<T>[]",
+          "required": false,
+          "description": "Column definitions, in ag-Grid `ColDef` format."
+        },
+        {
+          "name": "rowData",
+          "type": "T[]",
+          "required": false,
+          "description": "Rows to display."
+        },
+        {
+          "name": "additionalGridOptions",
+          "type": "GridOptions<T>",
+          "required": false,
+          "description": "Extra ag-Grid options, merged over the defaults."
+        },
+        {
+          "name": "getContextMenuItems",
+          "type": "(row: T) => DropdownItem[]",
+          "required": false,
+          "description": "Items of the row context menu. Omit for no menu."
+        },
+        {
+          "name": "className",
+          "type": "string",
           "required": false,
           "description": "Additional CSS classes for the grid container."
         },
@@ -9300,823 +9674,150 @@
       "sourceFile": "components/DropdownIcon/DropdownIcon.tsx"
     },
     {
-      "name": "DialFileManager",
-      "category": "FileManager",
+      "name": "DialSchemaRenderer",
+      "category": "Name",
+      "generation": "1.0",
+      "description": "Renders a JSON Schema as a form UI with collapsible sections, validation, and default values.\naliases: SchemaRenderer|JsonSchemaForm\nDesign system 1.0",
+      "props": [],
+      "examples": [
+        "<DialSchemaRenderer\n  schema={mySchema}\n  onChange={(v) => console.log(v)}\n  onDefaultValues={(defaults) => console.log(defaults)}\n/>"
+      ],
+      "sourceFile": "components/SchemaRenderer/SchemaRenderer.tsx",
+      "supersededBy": "SchemaRenderer"
+    },
+    {
+      "name": "DialJsonEditor",
+      "category": "Data Display",
       "generation": "1.0",
-      "description": "File Manager layout with a collapsible folders tree, breadcrumb/search header, and a data grid.\naliases: FileExplorer|FileBrowser\nDesign system 1.0",
+      "description": "A JSON editor component built on top of Monaco Editor.\nDesign system 1.0\nProvides syntax highlighting, validation, and theme support for JSON editing.\n\nLazy-loaded component. This component is not exported directly from the UI kit to avoid errors when using with SSR. Use `LazyDialJsonEditor` and the manifest `lazy` field for dynamic import guidance.",
       "props": [
         {
-          "name": "path",
-          "type": "string",
+          "name": "value",
+          "type": "string | undefined",
           "required": false,
-          "description": "Absolute path of the current location (e.g. \"/All files/Design/Icons\")"
+          "description": "The JSON string value to edit"
         },
         {
-          "name": "defaultPath",
+          "name": "currentTheme",
           "type": "string",
-          "required": false,
-          "description": "Initial path used in uncontrolled mode (applied only on first render)"
+          "required": true,
+          "description": "The theme to apply to the editor"
         },
         {
-          "name": "className",
-          "type": "string",
+          "name": "themesConfig",
+          "type": "Record<EditorThemes, editor.IStandaloneThemeData>",
           "required": false,
-          "description": "Additional classes for the root container"
-        },
-        {
-          "name": "managerLabel",
-          "type": "ReactNode",
-          "required": false
+          "defaultValue": "EDITOR_THEMES_CONFIG",
+          "description": "Custom theme configurations"
         },
         {
-          "name": "gridClassName",
-          "type": "string",
-          "required": false,
-          "description": "Additional classes for the grid container"
+          "name": "onChange",
+          "type": "(value: string | undefined) => void",
+          "required": true,
+          "description": "Callback fired when the editor content changes"
         },
         {
-          "name": "allowedFileTypes",
-          "type": "DialFileAcceptType[]",
+          "name": "onValidateJSON",
+          "type": "OnValidate",
           "required": false,
-          "description": "Allowed file types (same format as the HTML `<input accept>` attribute). Controls upload filtering and which items are disabled in the File Manager UI. Supports MIME types, wildcards (e.g. `image/*`), and extensions (e.g. `.svg`)."
+          "description": "Callback fired when JSON validation occurs"
         },
         {
-          "name": "items",
-          "type": "DialFile[]",
+          "name": "options",
+          "type": "editor.IStandaloneEditorConstructionOptions",
           "required": false,
-          "description": "Full hierarchical list of files and folders used by both tree and grid"
-        },
+          "description": "Additional Monaco editor options"
+        }
+      ],
+      "examples": [],
+      "sourceFile": "components/JsonEditor/JsonEditor.tsx",
+      "lazy": {
+        "loaderExportName": "LazyDialJsonEditor",
+        "packageImport": "@epam/ai-dial-ui-kit",
+        "ssr": false,
+        "nextDynamicExample": "import dynamic from 'next/dynamic';\nimport { LazyDialJsonEditor } from '@epam/ai-dial-ui-kit';\n\nconst DialJsonEditor = dynamic(\n  async () => (await LazyDialJsonEditor()).DialJsonEditor,\n  { ssr: false },\n);"
+      }
+    },
+    {
+      "name": "DialMarkdownEditor",
+      "category": "Data Display",
+      "generation": "1.0",
+      "description": "A Markdown editor component built on top of\n\nLazy-loaded component. This component is not exported directly from the UI kit to avoid errors when using with SSR. Use `LazyDialMarkdownEditor` and the manifest `lazy` field for dynamic import guidance.",
+      "props": [
         {
-          "name": "rootItem",
-          "type": "DialRootFolder",
+          "name": "value",
+          "type": "string",
           "required": false,
-          "description": "Optional root folder item to represent the top-level container in the tree"
+          "description": "The current markdown content"
         },
         {
-          "name": "filesLoading",
-          "type": "boolean",
+          "name": "onChange",
+          "type": "(value: string) => void",
           "required": false,
-          "description": "When true, shows skeleton loading state in the grid"
+          "description": "Callback fired when the editor content changes"
         },
         {
-          "name": "sharedByMePaths",
-          "type": "Set<string>",
+          "name": "height",
+          "type": "number",
           "required": false,
-          "description": "Set of items paths that the user has shared with others. Enables UI indicators (icons/badges) in the tree and grid."
+          "defaultValue": "300",
+          "description": "Height of the editor in pixels"
         },
         {
-          "name": "maxSelectableFileSize",
-          "type": "number",
+          "name": "preview",
+          "type": "PreviewType",
           "required": false,
-          "description": "Maximum allowed file size for selection in bytes"
+          "defaultValue": "'edit'",
+          "description": "Preview mode ('edit', 'live', 'preview')"
         },
         {
-          "name": "selectedPaths",
-          "type": "Set<string>",
+          "name": "theme",
+          "type": "EditorThemes",
           "required": false,
-          "description": "Controlled set of selected item paths"
+          "defaultValue": "EditorThemes.dark",
+          "description": "Theme for the editor ('light' or 'dark')"
         },
         {
-          "name": "defaultSelectedPaths",
-          "type": "Set<string>",
+          "name": "className",
+          "type": "string",
           "required": false,
-          "description": "Initial selected paths used in uncontrolled mode"
+          "description": "Additional CSS classes for the container"
         },
         {
-          "name": "onSelectedPathsChange",
-          "type": "(paths: Set<string>) => void",
+          "name": "placeholder",
+          "type": "ReactNode",
           "required": false,
-          "description": "Callback fired when the selected paths change"
+          "description": "Content to display when the editor is empty"
         },
         {
-          "name": "showHiddenFiles",
+          "name": "showDragbar",
           "type": "boolean",
-          "required": false
-        },
-        {
-          "name": "onShowHiddenFilesChange",
-          "type": "(value: boolean) => void",
-          "required": false
-        },
-        {
-          "name": "treeOptions",
-          "type": "FileTreeOptions",
           "required": false,
-          "description": "Options that configure the collapsible sidebar and folders tree"
-        },
+          "defaultValue": "true",
+          "description": "Whether to show the bottom drag bar that resizes the editor height"
+        }
+      ],
+      "examples": [
+        "<DialMarkdownEditor\nvalue=\"# Hello World\"\nonChange={(value) => console.log(value)}\nheight={400}\ntheme=\"dark\"\n/>"
+      ],
+      "sourceFile": "components/MarkdownEditor/MarkdownEditor.tsx",
+      "lazy": {
+        "loaderExportName": "LazyDialMarkdownEditor",
+        "packageImport": "@epam/ai-dial-ui-kit",
+        "ssr": false,
+        "nextDynamicExample": "import dynamic from 'next/dynamic';\nimport { LazyDialMarkdownEditor } from '@epam/ai-dial-ui-kit';\n\nconst DialMarkdownEditor = dynamic(\n  async () => (await LazyDialMarkdownEditor()).DialMarkdownEditor,\n  { ssr: false },\n);"
+      },
+      "supersededBy": "MarkdownEditor"
+    }
+  ],
+  "types": [
+    {
+      "name": "AnalyticsCardVariant",
+      "kind": "enum",
+      "members": [
         {
-          "name": "toolbarOptions",
-          "type": "ToolbarOptions",
-          "required": false,
-          "description": "Options for the file manager toolbar"
-        },
-        {
-          "name": "showNavigationPanel",
-          "type": "boolean",
-          "required": false,
-          "description": "Determines whether to display the navigation panel."
-        },
-        {
-          "name": "navigationPanelOptions",
-          "type": "NavigationPanelOptions",
-          "required": false,
-          "description": "Options for the breadcrumb and search panel (value/onSearchChange for controlled search)"
-        },
-        {
-          "name": "gridOptions",
-          "type": "GridOptions",
-          "required": false,
-          "description": "Options forwarded to `DialGrid`; supports `columnDefs` override and `filterable` flag and date locale/options"
-        },
-        {
-          "name": "bulkActionsToolbarOptions",
-          "type": "BulkActionsToolbarOptions",
-          "required": false,
-          "description": "Options for the bulk actions toolbar shown when items are selected"
-        },
-        {
-          "name": "deleteConfirmationOptions",
-          "type": "DeleteConfirmationOptions",
-          "required": false,
-          "description": "Options for the delete confirmation popup"
-        },
-        {
-          "name": "destinationFolderPopupOptions",
-          "type": "DialFileManagerDestinationFolderPopupOptions",
-          "required": false
-        },
-        {
-          "name": "conflictResolutionPopupOptions",
-          "type": "DialFileManagerConflictResolutionPopupOptions",
-          "required": false
-        },
-        {
-          "name": "compactViewWidthBreakpoint",
-          "type": "number",
-          "required": false,
-          "description": "Width (px) below which the component switches to compact view."
-        },
-        {
-          "name": "customBreakpointRef",
-          "type": "RefObject<HTMLElement | null>",
-          "required": false
-        },
-        {
-          "name": "onPathChange",
-          "type": "(nextPath?: string) => void",
-          "required": false,
-          "description": "Callback fired when user navigates via tree or breadcrumb"
-        },
-        {
-          "name": "onTableFileClick",
-          "type": "(file: GridRow) => void",
-          "required": false,
-          "description": "Callback fired when a file row is clicked in the grid"
-        },
-        {
-          "name": "handleSelectionClick",
-          "type": "(file: GridRow[]) => void",
-          "required": false
-        },
-        {
-          "name": "onGridApiChange",
-          "type": "(api: GridApi) => void",
-          "required": false
-        },
-        {
-          "name": "onCopyFiles",
-          "type": "(items: DialCopiedItem[], destinationFolder: string) => void",
-          "required": false,
-          "description": "Callback fired when files copy-paste"
-        },
-        {
-          "name": "onMoveToFiles",
-          "type": "(\n    items: DialCopiedItem[],\n    sourceFolder: string,\n    destinationFolder: string,\n  ) => void",
-          "required": false,
-          "description": "Callback fired when files cut-paste or rename"
-        },
-        {
-          "name": "onDeleteFiles",
-          "type": "(items: DialDeletedItem[], sourceFolder: string) => void",
-          "required": false,
-          "description": "Callback fired when files are deleted"
-        },
-        {
-          "name": "onDownloadFiles",
-          "type": "(items: DialFile[]) => void",
-          "required": false,
-          "description": "Callback fired when files are downloaded"
-        },
-        {
-          "name": "onRenameValidate",
-          "type": "(value: string, item: DialFile) => string | null",
-          "required": false,
-          "description": "Optional callback to validate a file or folder name during renaming. Should return an error message string if the name is invalid, or null if it's valid."
-        },
-        {
-          "name": "renameValidationMessages",
-          "type": "RenameValidationMessages",
-          "required": false,
-          "description": "Optional custom validation messages for renaming files and folders. Note that you need to add `${NotificationVariant.Warning}__` prefix to the `hiddenItemWarning` message to display it as a warning with the warning icon."
-        },
-        {
-          "name": "forbiddenSymbolsRegExp",
-          "type": "RegExp",
-          "required": false,
-          "description": "Optional RegExp will be used in the validation for the files and folders names. The \"g\" and \"y\" flags are not allowed in this RegExp and will be ignored."
-        },
-        {
-          "name": "forbiddenSymbolsTooltip",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Optional tooltip displayed when a file or folder name contains forbidden characters"
-        },
-        {
-          "name": "skipForbiddenSymbolsCheckForActions",
-          "type": "boolean",
-          "required": false,
-          "description": "When provided, skips the forbidden-symbols check when building row action menus, so all actions are shown even for items whose names contain forbidden characters."
-        },
-        {
-          "name": "onCreateFolder",
-          "type": "(\n    file: DialUploadFileItem,\n    folderPath: string,\n    fileId: string,\n  ) => void | Promise<void>",
-          "required": false
-        },
-        {
-          "name": "onCreateFolderValidate",
-          "type": "(\n    name: string,\n    parentFolder: DialFile,\n  ) => string | null",
-          "required": false
-        },
-        {
-          "name": "folderCreationValidationMessages",
-          "type": "CreateFolderValidationMessages",
-          "required": false
-        },
-        {
-          "name": "getDisabledTooltip",
-          "type": "(row: FileManagerGridRow) => string | undefined",
-          "required": false
-        },
-        {
-          "name": "fileTooLargeTooltip",
-          "type": "string",
-          "required": false,
-          "description": "Optional tooltip text displayed when a file is too large."
-        },
-        {
-          "name": "unsupportedFileTypeTooltip",
-          "type": "string",
-          "required": false,
-          "description": "Optional tooltip text displayed when an unsupported file type is selected."
-        },
-        {
-          "name": "onUploadFiles",
-          "type": "(\n    files: DialUploadFileItem[],\n    destinationFolder: string,\n  ) => void",
-          "required": false,
-          "description": "Callback fired when files are uploaded"
-        },
-        {
-          "name": "prepareUploadFileName",
-          "type": "(name: string) => string",
-          "required": false,
-          "description": "Optional mapper applied to each uploaded item's name before conflict resolution runs and before `onUploadFiles`/`onUploadArchive` are called. Use it to sanitize or normalize names (e.g. stripping forbidden symbols). Conflict detection is performed against the mapped names, so renames take place before the conflict check."
-        },
-        {
-          "name": "onValidateUpload",
-          "type": "(\n    files: DialUploadFileItem[],\n    existingFiles: DialFile[],\n    destinationFolder: string,\n  ) => FileUploadValidationResult | Promise<FileUploadValidationResult>",
-          "required": false,
-          "description": "Callback to validate files before upload"
-        },
-        {
-          "name": "maxFileSize",
-          "type": "number",
-          "required": false,
-          "description": "Maximum allowed file size for uploads in bytes"
-        },
-        {
-          "name": "uploadValidationMessages",
-          "type": "FileUploadValidationMessages",
-          "required": false,
-          "description": "Custom validation messages for file uploads. Consumers can customize these strings for a11y and copy consistency."
-        },
-        {
-          "name": "onUploadArchive",
-          "type": "(\n    file: File,\n    name: string,\n    destinationFolder: string,\n  ) => void",
-          "required": false,
-          "description": "Callback fired when archive files are uploaded"
-        },
-        {
-          "name": "uploadEnabled",
-          "type": "boolean",
-          "required": false,
-          "description": "Whether files uploads are enabled"
-        },
-        {
-          "name": "fileMetadataPopupOptions",
-          "type": "FileMetadataPopupOptions",
-          "required": false
-        },
-        {
-          "name": "onGetInfo",
-          "type": "(file: DialFile) => void | Promise<void>",
-          "required": false
-        },
-        {
-          "name": "onUnshareFiles",
-          "type": "(files: DialFile[]) => void | Promise<void>",
-          "required": false
-        },
-        {
-          "name": "onRemoveFilesAccess",
-          "type": "(files: DialFile[]) => void | Promise<void>",
-          "required": false
-        },
-        {
-          "name": "actionsRef",
-          "type": "Ref<DialFileManagerActionsRef>",
-          "required": false,
-          "description": "Ref exposing a limited set of imperative File Manager actions (e.g., creating a folder). Allows parent components to trigger internal behaviors programmatically. This ref is not a DOM ref and should be used only for invoking the component’s public actions API."
-        },
-        {
-          "name": "onSearchFiles",
-          "type": "(folder: string, query: string) => void",
-          "required": false
-        },
-        {
-          "name": "searchInProgress",
-          "type": "boolean",
-          "required": false
-        },
-        {
-          "name": "searchResults",
-          "type": "DialFile[]",
-          "required": false
-        },
-        {
-          "name": "clearSearchResults",
-          "type": "() => void",
-          "required": false
-        },
-        {
-          "name": "emptyStateIcon",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Optional icon for empty state"
-        },
-        {
-          "name": "emptyStateTitle",
-          "type": "string",
-          "required": false,
-          "description": "Optional title text displayed when there are no files."
-        },
-        {
-          "name": "emptyStateDescription",
-          "type": "string",
-          "required": false,
-          "description": "Optional description text displayed below the empty state title."
-        },
-        {
-          "name": "sharedWithMeIds",
-          "type": "string[]",
-          "required": false,
-          "description": "Optional list of file IDs that are shared with the current user."
-        },
-        {
-          "name": "onFolderPopupPathChange",
-          "type": "(newPath?: string) => void",
-          "required": false
-        },
-        {
-          "name": "onManagePermissions",
-          "type": "(path?: string) => void",
-          "required": false
-        },
-        {
-          "name": "onPreview",
-          "type": "(path?: string) => void",
-          "required": false
-        },
-        {
-          "name": "onOpenInNewTab",
-          "type": "(file: DialFile) => void",
-          "required": false
-        },
-        {
-          "name": "previewExtensions",
-          "type": "string[]",
-          "required": false
-        },
-        {
-          "name": "isRenameFileAvailable",
-          "type": "boolean",
-          "required": false
-        },
-        {
-          "name": "isDuplicateFolderAvailable",
-          "type": "boolean",
-          "required": false
-        },
-        {
-          "name": "customUploadFileAction",
-          "type": "(\n    currentPath?: string,\n    currentFolder?: DialFile,\n  ) => void",
-          "required": false
-        },
-        {
-          "name": "customCreateNewItemAction",
-          "type": "(\n    currentPath?: string,\n    currentFolder?: DialFile,\n  ) => void",
-          "required": false
-        },
-        {
-          "name": "customDuplicateAction",
-          "type": "(items?: DialFile[]) => void",
-          "required": false
-        },
-        {
-          "name": "customDeleteItemsAction",
-          "type": "(\n    items: DialFile[],\n    parentFolderPath: string,\n  ) => void",
-          "required": false
-        },
-        {
-          "name": "customDownloadItemsAction",
-          "type": "(items?: DialFile[]) => void",
-          "required": false
-        },
-        {
-          "name": "nonClickableTableColumns",
-          "type": "FileManagerColumnKey[]",
-          "required": false
-        },
-        {
-          "name": "hideSearchPathItemName",
-          "type": "boolean",
-          "required": false
-        },
-        {
-          "name": "showHiddenFileSwitcherInDestinationPopup",
-          "type": "boolean",
-          "required": false
-        },
-        {
-          "name": "showCreateFolderButtonInDestinationPopup",
-          "type": "boolean",
-          "required": false
-        },
-        {
-          "name": "autoSelectUploadedItems",
-          "type": "boolean",
-          "required": false,
-          "description": "When true, automatically selects newly uploaded or created items (files, archives, folders) after they appear in the current directory. Useful in attach flows where the user expects immediate selection feedback."
-        },
-        {
-          "name": "maxNewFolderDepth",
-          "type": "number",
-          "required": false
-        },
-        {
-          "name": "onNewFolderDepthExceeded",
-          "type": "() => void",
-          "required": false
-        },
-        {
-          "name": "initialUploadFilesOpen",
-          "type": "boolean",
-          "required": false
-        }
-      ],
-      "examples": [
-        "// Minimal usage\n<DialFileManager items={files} path=\"/All files\" />\n\n// With loading state\n<DialFileManager items={files} path=\"/All files\" filesLoading={true} />\n\n// With controlled search and disabled grid filters\nconst [query, setQuery] = useState('');\n<DialFileManager\n  items={files}\n  path=\"/All files/Design\"\n  navigationPanelOptions={{\n    searchable: true,\n    value: query,\n    onSearchChange: setQuery,\n  }}\n  gridOptions={{ filterable: false }}\n/>\n\n// With custom tree width and title\n<DialFileManager\n  items={files}\n  treeOptions={{ width: 300, title: 'Explorer', showFiles: true }}\n/>\n\n// With explicit provider (advanced apps)\n<FileManagerProvider items={files} path=\"/All files\">\n  <MyCustomHeader />\n  <DialFileManagerView />  // internal view\n  <MyCustomFooter />\n</FileManagerProvider>"
-      ],
-      "sourceFile": "components/FileManager/FileManager.tsx"
-    },
-    {
-      "name": "DialDestinationFolderPopup",
-      "category": "FileManager/components",
-      "generation": "1.0",
-      "description": "DestinationFolderPopup\naliases: FolderSelector|PathChooser\nDesign system 1.0",
-      "props": [],
-      "examples": [
-        "<DestinationFolderPopup\n  open={isOpen}\n  onClose={handleClose}\n  onConfirm={handleConfirm}\n  mode=\"copy\"\n  title=\"Copy 3 files\"\n  items={files}\n  rootItem={rootFolder}\n  path={currentPath}\n  onPathChange={setCurrentPath}\n/>"
-      ],
-      "sourceFile": "components/FileManager/components/DestinationFolderPopup/DestinationFolderPopup.tsx"
-    },
-    {
-      "name": "DialFoldersTree",
-      "category": "Data Display",
-      "generation": "1.0",
-      "description": "DialFoldersTree — A hierarchical folder tree component with nested expand/collapse support, selection highlighting,\nDesign system 1.0\nand optional file display.",
-      "props": [
-        {
-          "name": "items",
-          "type": "DialFile[]",
-          "required": true,
-          "description": "Array of folder and file nodes to display in the tree."
-        },
-        {
-          "name": "expandedPaths",
-          "type": "Set<string>",
-          "required": false,
-          "description": "Set of folder paths that should be expanded."
-        },
-        {
-          "name": "loadingPaths",
-          "type": "Set<string>",
-          "required": false,
-          "defaultValue": "new Set()",
-          "description": "Set of folder paths currently loading (shows spinner or placeholder)."
-        },
-        {
-          "name": "loadedPaths",
-          "type": "Set<string>",
-          "required": false,
-          "defaultValue": "new Set()",
-          "description": "Set of folder paths that have loaded."
-        },
-        {
-          "name": "sharedByMePaths",
-          "type": "Set<string>",
-          "required": false,
-          "defaultValue": "new Set()",
-          "description": "Set of items paths that the user has shared with others. Enables UI indicators (icons/badges)."
-        },
-        {
-          "name": "selectedPath",
-          "type": "string",
-          "required": false,
-          "description": "Path representing the currently selected folder or file."
-        },
-        {
-          "name": "renamedPath",
-          "type": "string",
-          "required": false,
-          "description": "Path of the folder or file currently being edited."
-        },
-        {
-          "name": "createdFolderPath",
-          "type": "string | null",
-          "required": false,
-          "description": "Optional Path of the new created folder."
-        },
-        {
-          "name": "showFiles",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false",
-          "description": "Whether to show files in addition to folders."
-        },
-        {
-          "name": "rootItemPath",
-          "type": "string",
-          "required": false,
-          "description": "Path of the folder to treat as the custom root node (no context menu, special label)."
-        },
-        {
-          "name": "rootItemLabel",
-          "type": "string",
-          "required": false,
-          "description": "Label to display for the root node instead of its actual name."
-        },
-        {
-          "name": "emptyStateTitle",
-          "type": "string",
-          "required": false,
-          "defaultValue": "'No Folders'",
-          "description": "Title text displayed when there are no items."
-        },
-        {
-          "name": "emptyStateDescription",
-          "type": "string",
-          "required": false,
-          "description": "Optional description text for the empty state."
-        },
-        {
-          "name": "emptyStateIcon",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Optional icon to display in the empty state."
-        },
-        {
-          "name": "onItemClick",
-          "type": "(item: DialFile) => void",
-          "required": false,
-          "description": "Callback fired when a folder or file is clicked (receives the corresponding `DialFile` node)."
-        },
-        {
-          "name": "onRenameSave",
-          "type": "(value: string) => void",
-          "required": false,
-          "description": "Callback fired when editing is confirmed with a valid name (receives the new name)."
-        },
-        {
-          "name": "onRenameCancel",
-          "type": "() => void",
-          "required": false,
-          "description": "Callback fired when editing is cancelled."
-        },
-        {
-          "name": "onRenameValidate",
-          "type": "(value: string, item: DialFile) => string | null",
-          "required": false,
-          "description": "Function to validate the new name during editing. Should return an error string or `null` if valid."
-        },
-        {
-          "name": "onCreateFolderSave",
-          "type": "(value: string) => void",
-          "required": false,
-          "description": "Optional Callback fired when create new folder is confirmed"
-        },
-        {
-          "name": "onCreateFolderCancel",
-          "type": "() => void",
-          "required": false,
-          "description": "Optional Callback fired when create new folder is cancelled"
-        },
-        {
-          "name": "getContextMenuItems",
-          "type": "(item: DialFile) => DropdownItem[]",
-          "required": false,
-          "description": "Function returning context menu items for a given node."
-        },
-        {
-          "name": "areHiddenFilesVisible",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false",
-          "description": "Whether hidden files (dotfiles) should be visible in the tree."
-        },
-        {
-          "name": "onExpandedPathsChange",
-          "type": "(expandedPaths: Set<string>) => void",
-          "required": false
-        },
-        {
-          "name": "forbiddenSymbolsRegExp",
-          "type": "RegExp",
-          "required": false,
-          "description": "Optional RegExp used to validate folder and file names for forbidden characters."
-        },
-        {
-          "name": "forbiddenSymbolsTooltip",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Optional tooltip content displayed when a name contains forbidden characters."
-        },
-        {
-          "name": "newFolderDefaultName",
-          "type": "string",
-          "required": false,
-          "description": "Optional new folder default name."
-        }
-      ],
-      "examples": [
-        "// Basic usage with folders and files\nconst items: DialFile[] = [\n  {\n    path: '/documents',\n    name: 'Documents',\n    nodeType: DialFileNodeType.FOLDER,\n    items: [\n      {\n        path: '/documents/file.txt',\n        name: 'file.txt',\n        nodeType: DialFileNodeType.FILE,\n      },\n    ],\n  },\n];\n\n<DialFoldersTree items={items} showFiles />\n\n// With expanded and selected items\nconst expandedPaths = new Set(['/documents']);\n\n<DialFoldersTree\n  items={items}\n  expandedPaths={expandedPaths}\n  selectedPath=\"/documents/file.txt\"\n  onItemClick={(item) => console.log('Clicked:', item.path)}\n/>\n\n// With inline renaming and validation\n<DialFoldersTree\n  items={items}\n  renamedPath=\"/documents\"\n  onRenameValidate={(value) => (value.trim() ? null : 'Name cannot be empty')}\n  onRenameSave={(newValue) => console.log('Saved new name:', newValue)}\n  onRenameCancel={() => console.log('Edit cancelled')}\n/>\n\n// With custom empty state and context menu\nconst getContextMenuItems = (item: DialFile): DropdownItem[] => [\n  { key: 'rename', label: 'Rename' },\n  { key: 'delete', label: 'Delete', danger: true },\n];\n\n<DialFoldersTree\n  items={[]}\n  emptyStateTitle=\"No Content\"\n  emptyStateDescription=\"Upload files or create a new folder to get started.\"\n  emptyStateIcon={<IconFolderPlus />}\n  getContextMenuItems={getContextMenuItems}\n/>"
-      ],
-      "sourceFile": "components/FileManager/components/FoldersTree/FoldersTree.tsx"
-    },
-    {
-      "name": "DialSchemaRenderer",
-      "category": "Name",
-      "generation": "1.0",
-      "description": "Renders a JSON Schema as a form UI with collapsible sections, validation, and default values.\naliases: SchemaRenderer|JsonSchemaForm\nDesign system 1.0",
-      "props": [],
-      "examples": [
-        "<DialSchemaRenderer\n  schema={mySchema}\n  onChange={(v) => console.log(v)}\n  onDefaultValues={(defaults) => console.log(defaults)}\n/>"
-      ],
-      "sourceFile": "components/SchemaRenderer/SchemaRenderer.tsx",
-      "supersededBy": "SchemaRenderer"
-    },
-    {
-      "name": "DialJsonEditor",
-      "category": "Data Display",
-      "generation": "1.0",
-      "description": "A JSON editor component built on top of Monaco Editor.\nDesign system 1.0\nProvides syntax highlighting, validation, and theme support for JSON editing.\n\nLazy-loaded component. This component is not exported directly from the UI kit to avoid errors when using with SSR. Use `LazyDialJsonEditor` and the manifest `lazy` field for dynamic import guidance.",
-      "props": [
-        {
-          "name": "value",
-          "type": "string | undefined",
-          "required": false,
-          "description": "The JSON string value to edit"
-        },
-        {
-          "name": "currentTheme",
-          "type": "string",
-          "required": true,
-          "description": "The theme to apply to the editor"
-        },
-        {
-          "name": "themesConfig",
-          "type": "Record<EditorThemes, editor.IStandaloneThemeData>",
-          "required": false,
-          "defaultValue": "EDITOR_THEMES_CONFIG",
-          "description": "Custom theme configurations"
-        },
-        {
-          "name": "onChange",
-          "type": "(value: string | undefined) => void",
-          "required": true,
-          "description": "Callback fired when the editor content changes"
-        },
-        {
-          "name": "onValidateJSON",
-          "type": "OnValidate",
-          "required": false,
-          "description": "Callback fired when JSON validation occurs"
-        },
-        {
-          "name": "options",
-          "type": "editor.IStandaloneEditorConstructionOptions",
-          "required": false,
-          "description": "Additional Monaco editor options"
-        }
-      ],
-      "examples": [],
-      "sourceFile": "components/JsonEditor/JsonEditor.tsx",
-      "lazy": {
-        "loaderExportName": "LazyDialJsonEditor",
-        "packageImport": "@epam/ai-dial-ui-kit",
-        "ssr": false,
-        "nextDynamicExample": "import dynamic from 'next/dynamic';\nimport { LazyDialJsonEditor } from '@epam/ai-dial-ui-kit';\n\nconst DialJsonEditor = dynamic(\n  async () => (await LazyDialJsonEditor()).DialJsonEditor,\n  { ssr: false },\n);"
-      }
-    },
-    {
-      "name": "DialMarkdownEditor",
-      "category": "Data Display",
-      "generation": "1.0",
-      "description": "A Markdown editor component built on top of\n\nLazy-loaded component. This component is not exported directly from the UI kit to avoid errors when using with SSR. Use `LazyDialMarkdownEditor` and the manifest `lazy` field for dynamic import guidance.",
-      "props": [
-        {
-          "name": "value",
-          "type": "string",
-          "required": false,
-          "description": "The current markdown content"
-        },
-        {
-          "name": "onChange",
-          "type": "(value: string) => void",
-          "required": false,
-          "description": "Callback fired when the editor content changes"
-        },
-        {
-          "name": "height",
-          "type": "number",
-          "required": false,
-          "defaultValue": "300",
-          "description": "Height of the editor in pixels"
-        },
-        {
-          "name": "preview",
-          "type": "PreviewType",
-          "required": false,
-          "defaultValue": "'edit'",
-          "description": "Preview mode ('edit', 'live', 'preview')"
-        },
-        {
-          "name": "theme",
-          "type": "EditorThemes",
-          "required": false,
-          "defaultValue": "EditorThemes.dark",
-          "description": "Theme for the editor ('light' or 'dark')"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes for the container"
-        },
-        {
-          "name": "placeholder",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Content to display when the editor is empty"
-        },
-        {
-          "name": "showDragbar",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "true",
-          "description": "Whether to show the bottom drag bar that resizes the editor height"
-        }
-      ],
-      "examples": [
-        "<DialMarkdownEditor\nvalue=\"# Hello World\"\nonChange={(value) => console.log(value)}\nheight={400}\ntheme=\"dark\"\n/>"
-      ],
-      "sourceFile": "components/MarkdownEditor/MarkdownEditor.tsx",
-      "lazy": {
-        "loaderExportName": "LazyDialMarkdownEditor",
-        "packageImport": "@epam/ai-dial-ui-kit",
-        "ssr": false,
-        "nextDynamicExample": "import dynamic from 'next/dynamic';\nimport { LazyDialMarkdownEditor } from '@epam/ai-dial-ui-kit';\n\nconst DialMarkdownEditor = dynamic(\n  async () => (await LazyDialMarkdownEditor()).DialMarkdownEditor,\n  { ssr: false },\n);"
-      },
-      "supersededBy": "MarkdownEditor"
-    }
-  ],
-  "types": [
-    {
-      "name": "AnalyticsCardVariant",
-      "kind": "enum",
-      "members": [
-        {
-          "name": "Default",
-          "value": "'default'"
+          "name": "Default",
+          "value": "'default'"
         },
         {
           "name": "Compact",
@@ -10148,169 +9849,43 @@
       "name": "AnalyticsCardCompareItem",
       "kind": "interface",
       "members": [
-        {
-          "name": "title",
-          "value": "ReactNode"
-        },
-        {
-          "name": "value",
-          "value": "ReactNode"
-        }
-      ],
-      "sourceFile": "models/analytics.ts"
-    },
-    {
-      "name": "DialTooltipContainerOptions",
-      "kind": "interface",
-      "members": [
-        {
-          "name": "initialOpen?",
-          "value": "boolean"
-        },
-        {
-          "name": "placement?",
-          "value": "Placement"
-        },
-        {
-          "name": "isTriggerClickable?",
-          "value": "boolean"
-        },
-        {
-          "name": "open?",
-          "value": "boolean"
-        },
-        {
-          "name": "onOpenChange?",
-          "value": "(open: boolean) => void"
-        }
-      ],
-      "sourceFile": "components/Tooltip/TooltipContext.tsx"
-    },
-    {
-      "name": "FileManagerGridRow",
-      "kind": "interface",
-      "members": [
-        {
-          "name": "id",
-          "value": "string"
-        },
-        {
-          "name": "name",
-          "value": "string"
-        },
-        {
-          "name": "updatedAt?",
-          "value": "string"
-        },
-        {
-          "name": "size?",
-          "value": "number"
-        },
-        {
-          "name": "author?",
-          "value": "string"
-        },
-        {
-          "name": "path",
-          "value": "string"
-        },
-        {
-          "name": "parentPath?",
-          "value": "string | null"
-        },
-        {
-          "name": "nodeType",
-          "value": "DialFileNodeType"
-        },
-        {
-          "name": "extension?",
-          "value": "string"
-        },
-        {
-          "name": "isTemporary?",
-          "value": "boolean"
-        },
-        {
-          "name": "owner?",
-          "value": "string"
-        },
-        {
-          "name": "contentType?",
-          "value": "string"
-        },
-        {
-          "name": "contentLength?",
-          "value": "number"
+        {
+          "name": "title",
+          "value": "ReactNode"
         },
         {
-          "name": "folderId?",
-          "value": "string"
+          "name": "value",
+          "value": "ReactNode"
         }
       ],
-      "sourceFile": "components/FileManager/FileManagerContext.tsx"
+      "sourceFile": "models/analytics.ts"
     },
     {
-      "name": "GridOptions",
+      "name": "DialTooltipContainerOptions",
       "kind": "interface",
       "members": [
         {
-          "name": "columnDefs?",
-          "value": "(\n    | ColDef<GridRow>\n    | ((\n        dateLocale: Intl.LocalesArgument,\n        dateOptions: Intl.DateTimeFormatOptions | undefined,\n        isCompactView: boolean,\n      ) => ColDef<GridRow, unknown>)\n  )[]"
-        },
-        {
-          "name": "filterable?",
-          "value": "boolean"
-        },
-        {
-          "name": "dateLocale?",
-          "value": "Intl.LocalesArgument"
-        },
-        {
-          "name": "dateOptions?",
-          "value": "Intl.DateTimeFormatOptions"
-        },
-        {
-          "name": "showFiles?",
-          "value": "boolean"
-        },
-        {
-          "name": "showFolders?",
+          "name": "initialOpen?",
           "value": "boolean"
         },
         {
-          "name": "visibleColumns?",
-          "value": "FileManagerColumnKey[]"
-        },
-        {
-          "name": "selectionMode?",
-          "value": "GridSelectionMode"
+          "name": "placement?",
+          "value": "Placement"
         },
         {
-          "name": "wrapCustomCellRenderers?",
+          "name": "isTriggerClickable?",
           "value": "boolean"
         },
         {
-          "name": "allowDisabledContextMenu?",
+          "name": "open?",
           "value": "boolean"
         },
         {
-          "name": "actionLabels?",
-          "value": "{\n    [DialFileManagerActions.AddSibling]?: string;\n    [DialFileManagerActions.AddChild]?: string;\n    [DialFileManagerActions.Duplicate]?: string;\n    [DialFileManagerActions.Copy]?: string;\n    [DialFileManagerActions.Rename]?: string;\n    [DialFileManagerActions.Download]?: string;\n    [DialFileManagerActions.Delete]?: string;\n    [DialFileManagerActions.Move]?: string;\n    [DialFileManagerActions.Info]?: string;\n    [DialFileManagerActions.Unshare]?: string;\n    [DialFileManagerActions.ManagePermissions]?: string;\n    [DialFileManagerActions.Preview]?: string;\n    [DialFileManagerActions.RemoveAccess]?: string;\n  }"
+          "name": "onOpenChange?",
+          "value": "(open: boolean) => void"
         }
       ],
-      "sourceFile": "components/FileManager/FileManager.tsx"
-    },
-    {
-      "name": "ToolbarOptions",
-      "kind": "type",
-      "sourceFile": "components/FileManager/FileManager.tsx",
-      "typeBody": "Omit<\n  DialFileManagerToolbarProps,\n  'areHiddenFilesVisible' | 'onToggleHiddenFiles'\n> & {\n  newActions?: {\n    uploadFiles?: NewAction;\n    newFolder?: NewAction;\n    uploadArchive?: NewAction;\n    newItem?: NewAction;\n  };\n  showHiddenFilesToggle?: boolean;\n}"
-    },
-    {
-      "name": "BulkActionsToolbarOptions",
-      "kind": "type",
-      "sourceFile": "components/FileManager/FileManager.tsx",
-      "typeBody": "Omit<\n  DialFileManagerBulkActionsToolbarProps,\n  'onClearSelection' | 'actions' | 'selectedCount'\n> & {\n  actionLabels?: {\n    [DialFileManagerActions.Duplicate]?: string;\n    [DialFileManagerActions.Copy]?: string;\n    [DialFileManagerActions.Download]?: string;\n    [DialFileManagerActions.Delete]?: string;\n    [DialFileManagerActions.Move]?: string;\n    [DialFileManagerActions.Unshare]?: string;\n    [DialFileManagerActions.RemoveAccess]?: string;\n  };\n}"
+      "sourceFile": "components/Tooltip/TooltipContext.tsx"
     },
     {
       "name": "EditorThemes",
@@ -10573,6 +10148,22 @@
       ],
       "sourceFile": "types/tab.ts"
     },
+    {
+      "name": "TabStatus",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Error",
+          "value": "'error'"
+        },
+        {
+          "name": "Warning",
+          "value": "'warning'"
+        }
+      ],
+      "sourceFile": "types/tab.ts",
+      "description": "Validation state a tab can flag on itself, e.g. a form section with problems."
+    },
     {
       "name": "TabView",
       "kind": "enum",
@@ -10665,131 +10256,6 @@
       ],
       "sourceFile": "types/select.ts"
     },
-    {
-      "name": "DialFileManagerTabs",
-      "kind": "enum",
-      "members": [
-        {
-          "name": "MyFiles",
-          "value": "'my_files'"
-        },
-        {
-          "name": "Shared",
-          "value": "'shared'"
-        },
-        {
-          "name": "Organization",
-          "value": "'organization'"
-        },
-        {
-          "name": "Review",
-          "value": "'review'"
-        }
-      ],
-      "sourceFile": "types/file-manager.ts"
-    },
-    {
-      "name": "DialFileManagerActions",
-      "kind": "enum",
-      "members": [
-        {
-          "name": "AddSibling",
-          "value": "'addSibling'"
-        },
-        {
-          "name": "AddChild",
-          "value": "'addChild'"
-        },
-        {
-          "name": "Duplicate",
-          "value": "'duplicate'"
-        },
-        {
-          "name": "Copy",
-          "value": "'copy'"
-        },
-        {
-          "name": "Move",
-          "value": "'move'"
-        },
-        {
-          "name": "Download",
-          "value": "'download'"
-        },
-        {
-          "name": "Delete",
-          "value": "'delete'"
-        },
-        {
-          "name": "Rename",
-          "value": "'rename'"
-        },
-        {
-          "name": "Info",
-          "value": "'info'"
-        },
-        {
-          "name": "Unshare",
-          "value": "'unshare'"
-        },
-        {
-          "name": "RemoveAccess",
-          "value": "'removeAccess'"
-        },
-        {
-          "name": "ManagePermissions",
-          "value": "'managePermissions'"
-        },
-        {
-          "name": "Preview",
-          "value": "'preview'"
-        },
-        {
-          "name": "OpenInNewTab",
-          "value": "'openInNewTab'"
-        }
-      ],
-      "sourceFile": "types/file-manager.ts"
-    },
-    {
-      "name": "FileManagerColumnKey",
-      "kind": "enum",
-      "members": [
-        {
-          "name": "Name",
-          "value": "'name'"
-        },
-        {
-          "name": "UpdatedAt",
-          "value": "'updatedAt'"
-        },
-        {
-          "name": "Size",
-          "value": "'size'"
-        },
-        {
-          "name": "Author",
-          "value": "'author'"
-        },
-        {
-          "name": "Owner",
-          "value": "'owner'"
-        },
-        {
-          "name": "Path",
-          "value": "'path'"
-        },
-        {
-          "name": "Actions",
-          "value": "'__actions'"
-        },
-        {
-          "name": "Version",
-          "value": "'version'"
-        }
-      ],
-      "sourceFile": "types/file-manager.ts"
-    },
     {
       "name": "FlexibleActionsDirection",
       "kind": "enum",
@@ -11287,76 +10753,6 @@
       ],
       "sourceFile": "models/file.ts"
     },
-    {
-      "name": "DialCopiedItem",
-      "kind": "interface",
-      "members": [
-        {
-          "name": "sourceUrl",
-          "value": "string"
-        },
-        {
-          "name": "destinationUrl",
-          "value": "string"
-        },
-        {
-          "name": "overwrite?",
-          "value": "boolean"
-        },
-        {
-          "name": "nodeType",
-          "value": "DialFileNodeType"
-        }
-      ],
-      "sourceFile": "models/file-manager.ts"
-    },
-    {
-      "name": "DialDeletedItem",
-      "kind": "interface",
-      "members": [
-        {
-          "name": "sourceUrl",
-          "value": "string"
-        },
-        {
-          "name": "nodeType",
-          "value": "DialFileNodeType"
-        }
-      ],
-      "sourceFile": "models/file-manager.ts"
-    },
-    {
-      "name": "DialUploadFileItem",
-      "kind": "interface",
-      "members": [
-        {
-          "name": "fileContent",
-          "value": "File"
-        },
-        {
-          "name": "name",
-          "value": "string"
-        }
-      ],
-      "sourceFile": "models/file-manager.ts"
-    },
-    {
-      "name": "DialFileManagerActionsRef",
-      "kind": "interface",
-      "members": [
-        {
-          "name": "createFolder",
-          "value": "() => void"
-        }
-      ],
-      "sourceFile": "models/file-manager.ts"
-    },
-    {
-      "name": "DialFileAcceptType",
-      "kind": "type",
-      "sourceFile": "models/file-manager.ts",
-      "typeBody": "| `${string}/${string}` // MIME (wildcard)\n  | `.${string}`"
-    },
     {
       "name": "GridSelectionMode",
       "kind": "enum",
@@ -11944,6 +11340,14 @@
         {
           "name": "disabled?",
           "value": "boolean"
+        },
+        {
+          "name": "status?",
+          "value": "TabStatus"
+        },
+        {
+          "name": "statusLabel?",
+          "value": "string"
         }
       ],
       "sourceFile": "components/New/Tabs/Tabs.tsx",
@@ -12018,6 +11422,41 @@
       "sourceFile": "types/badge.ts",
       "description": "How a `Badge` is drawn."
     },
+    {
+      "name": "AvatarColor",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Green1",
+          "value": "'green-1'"
+        },
+        {
+          "name": "Violet2",
+          "value": "'violet-2'"
+        },
+        {
+          "name": "Brown",
+          "value": "'brown'"
+        },
+        {
+          "name": "Red",
+          "value": "'red'"
+        },
+        {
+          "name": "Green2",
+          "value": "'green-2'"
+        },
+        {
+          "name": "Blue",
+          "value": "'blue'"
+        },
+        {
+          "name": "Violet1",
+          "value": "'violet-1'"
+        }
+      ],
+      "sourceFile": "types/avatar.ts"
+    },
     {
       "name": "AvatarShape",
       "kind": "enum",
@@ -12036,6 +11475,22 @@
       "sourceFile": "types/avatar.ts",
       "description": "The outline an `Avatar` is clipped to."
     },
+    {
+      "name": "AvatarColorClasses",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "background",
+          "value": "string"
+        },
+        {
+          "name": "foreground",
+          "value": "string"
+        }
+      ],
+      "sourceFile": "utils/avatar.ts",
+      "description": "A background and text colour pair for an initials avatar, as Tailwind classes."
+    },
     {
       "name": "EntityIdentityItem",
       "kind": "interface",
@@ -12109,6 +11564,22 @@
       "sourceFile": "types/entity-type.ts",
       "description": "The category of a DIAL catalog entity. It picks the colour of the type label and the featured chip."
     },
+    {
+      "name": "SelectedEntityCardLabels",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "type?",
+          "value": "string"
+        },
+        {
+          "name": "placeholder?",
+          "value": "string"
+        }
+      ],
+      "sourceFile": "components/New/SelectedEntityCard/SelectedEntityCard.tsx",
+      "description": "User-visible strings of `SelectedEntityCard`."
+    },
     {
       "name": "TagAppearance",
       "kind": "enum",
@@ -12120,6 +11591,11 @@
         {
           "name": "Selectable",
           "value": "'selectable'"
+        },
+        {
+          "name": "Bordered",
+          "value": "'bordered'",
+          "comment": "The compact, rimmed chip of a value in a form field (a host, a variable)."
         }
       ],
       "sourceFile": "types/tag.ts"
@@ -12208,6 +11684,35 @@
       ],
       "sourceFile": "types/tooltip.ts"
     },
+    {
+      "name": "FormSectionHeadingLevel",
+      "kind": "type",
+      "sourceFile": "components/New/FormSection/FormSection.tsx",
+      "typeBody": "2 | 3 | 4 | 5 | 6"
+    },
+    {
+      "name": "FormSectionVariant",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Row",
+          "value": "'row'",
+          "comment": "A field of a form: small semibold heading, small description, an 8px header gap."
+        },
+        {
+          "name": "Caption",
+          "value": "'caption'",
+          "comment": "A titled group of a builder column: caption-lead heading, tiny description."
+        },
+        {
+          "name": "Setting",
+          "value": "'setting'",
+          "comment": "One setting inside a group: tiny semibold heading, tiny description."
+        }
+      ],
+      "sourceFile": "types/form-section.ts",
+      "description": "How a `FormSection` sets its heading, description and content."
+    },
     {
       "name": "TransferQueueItem",
       "kind": "interface",
@@ -12378,11 +11883,6 @@
       "name": "convertGridDateToDate",
       "sourceFile": "utils/grid-date.ts"
     },
-    {
-      "name": "useDialFileManagerTabs",
-      "sourceFile": "components/FileManager/hooks/use-file-manager-tabs.tsx",
-      "signature": "(tabLabels?: Record<DialFileManagerTabs, string>, initialTab: DialFileManagerTabs = DialFileManagerTabs.MyFiles) => unknown"
-    },
     {
       "name": "EDITABLE_CONTAINER_ATTRIBUTE",
       "sourceFile": "hooks/use-editable-item.tsx",
@@ -12403,24 +11903,17 @@
       "name": "UseEditableItemOptions",
       "sourceFile": "hooks/use-editable-item.tsx"
     },
-    {
-      "name": "FileManagerProvider",
-      "sourceFile": "components/FileManager/FileManagerProvider.tsx",
-      "description": "Provider that encapsulates all File Manager business logic:\n- path & navigation\n- search (controlled + uncontrolled)\n- hidden files toggle\n- tree collapsed state\n- selection\n- clipboard (copy / cut / paste)\n- delete confirmation state\n- computed grid rows\n- new actions",
-      "signature": "FileManagerProvider: FC<FileManagerProviderProps>"
-    },
-    {
-      "name": "useFileManagerContext",
-      "sourceFile": "components/FileManager/hooks/use-file-manager-context.ts",
-      "description": "Hook to read the File Manager context.\nThrows if used outside of the provider.",
-      "signature": "() => unknown"
-    },
     {
       "name": "useThemeScope",
       "sourceFile": "components/New/ThemeScope/ThemeScope.tsx",
       "description": "Class names of the enclosing `ThemeScope`s, outermost first, or `''` when the\ncaller sits outside any scope. Components rendering into a `FloatingPortal`\nmerge this onto their floating root so the tokens follow them out of the\nsubtree.",
       "signature": "() => string"
     },
+    {
+      "name": "AVATAR_PALETTE",
+      "sourceFile": "utils/avatar.ts",
+      "signature": "AVATAR_PALETTE: Record<AvatarColor, AvatarColorClasses>"
+    },
     {
       "name": "extractInitials",
       "sourceFile": "utils/avatar.ts",
@@ -12530,21 +12023,6 @@
     }
   ],
   "constants": [
-    {
-      "name": "NAME_COLUMN",
-      "sourceFile": "constants/file-grid-columns.tsx",
-      "signature": "(headerName: string) => unknown"
-    },
-    {
-      "name": "SIZE_COLUMN",
-      "sourceFile": "constants/file-grid-columns.tsx",
-      "signature": "(headerName: string) => ColDef"
-    },
-    {
-      "name": "UPDATED_AT_COLUMN",
-      "sourceFile": "constants/file-grid-columns.tsx",
-      "signature": "(headerName: string) => unknown"
-    },
     {
       "name": "DIAL_ICON_SIZE",
       "sourceFile": "constants/icon.ts",
@@ -12583,7 +12061,7 @@
     {
       "name": "DIAL_KIT_CLASS",
       "sourceFile": "constants/public-class-names.ts",
-      "signature": "DIAL_KIT_CLASS = {\n  /* ── Feedback and status ───────────────────────────────────────────────── */\n  /** The `role=\"status\"` root of a `Spinner`. */\n  spinner: 'dial-kit-spinner',\n  /**\n   * The outermost element of a `ProgressBar`: the box wrapping its label,\n   * track and readout — or the track itself, which is the root when the bar\n   * has neither.\n   */\n  progressBar: 'dial-kit-progress-bar',\n  /** The root of a `Skeleton`, wrapping its avatar and text rows. */\n  skeleton: 'dial-kit-skeleton',\n  /**\n   * The `Notification` surface. Present on every wrapper too — the toast and\n   * section-message variants of error, info, success, warning, loading and\n   * general all render this component.\n   */\n  notification: 'dial-kit-notification',\n  /** The empty-state root of `NoDataContent`. */\n  noDataContent: 'dial-kit-no-data-content',\n  /** The `role=\"status\"` panel of a `TransferQueue`: header, rows and aggregate bar. */\n  transferQueue: 'dial-kit-transfer-queue',\n\n  /* ── Text ──────────────────────────────────────────────────────────────── */\n  /** The text element of a `Highlight`, which renders the matched query. */\n  highlight: 'dial-kit-highlight',\n  /** The caption line under a field, rendered by `CaptionText`. */\n  captionText: 'dial-kit-caption-text',\n  /**\n   * A caption in its error variant — what `ErrorText` renders. Additive to\n   * `captionText`, since one component draws both.\n   */\n  errorText: 'dial-kit-error-text',\n  /** The `Label` root, which wraps the `label` element and its info button. */\n  label: 'dial-kit-label',\n\n  /* ── Containers ────────────────────────────────────────────────────────── */\n  /** The `article` element of a `CardShell`. */\n  cardShell: 'dial-kit-card-shell',\n  /** The `aside` element of a `CollapsibleSidebar`. */\n  collapsibleSidebar: 'dial-kit-collapsible-sidebar',\n  /** The content box inside a `ResizableContainer`'s resize frame. */\n  resizableContainer: 'dial-kit-resizable-container',\n  /**\n   * The `role=\"dialog\"` panel of a `Popup`. Its backdrop is reached through\n   * `overlayClassName`.\n   */\n  popup: 'dial-kit-popup',\n  /** The `role=\"dialog\"` panel of a `BottomSheet`. */\n  bottomSheet: 'dial-kit-bottom-sheet',\n  /** The `role=\"dialog\"` panel of a `SideDrawer`, open or closed. */\n  sideDrawer: 'dial-kit-side-drawer',\n  /** The `Popup` panel of a `ConfirmationPopup`, additive to `popup`. */\n  confirmationPopup: 'dial-kit-confirmation-popup',\n  /** The root of an `Accordion`. */\n  accordion: 'dial-kit-accordion',\n  /** The breadcrumb root of a `FolderPath`. */\n  folderPath: 'dial-kit-folder-path',\n  /** The `nav` element of a `Breadcrumbs` trail. */\n  breadcrumbs: 'dial-kit-breadcrumbs',\n  /**\n   * One segment of a `Breadcrumbs` trail: the link, button or plain span that\n   * draws the label — not the `li`, which also holds the separator after it.\n   */\n  breadcrumbsItem: 'dial-kit-breadcrumbs-item',\n\n  /* ── Menus and overlays ────────────────────────────────────────────────── */\n  /**\n   * The trigger wrapper of a `Dropdown`. Its floating panel is reached through\n   * `listClassName`.\n   */\n  dropdown: 'dial-kit-dropdown',\n  /**\n   * The `role=\"none\"` item list inside a dropdown overlay — the box that holds\n   * the rows and owns their vertical padding. Present in both generations, and\n   * on a submenu's own list. It is *not* the floating panel.\n   */\n  dropdownList: 'dial-kit-dropdown-list',\n  /**\n   * One row of a floating overlay: a dropdown item, a `Select` option, a\n   * submenu trigger, or a submenu child. It sits on the element that draws the\n   * row box — so on the wrapper, not the inner button, for a row that has a\n   * `rightControl` beside it.\n   */\n  menuItem: 'dial-kit-menuitem',\n  /**\n   * The trailing check of a chosen `MenuItemMark.Check` row. Decorative, like\n   * the glyph itself — the row's `aria-checked` / `aria-selected` carries the\n   * state.\n   */\n  menuItemCheck: 'dial-kit-menuitem-check',\n  /** The primary icon of a `DialDropdownIcon` trigger. */\n  dropdownIcon: 'dial-kit-dropdown-icon',\n  /**\n   * The caret badge of a `DialDropdownIcon` trigger — the round plate the\n   * chevron sits on. Absent when `showCaret` is `false`.\n   */\n  dropdownIconCaret: 'dial-kit-dropdown-icon-caret',\n  /** The bubble of a `Tooltip`, rendered by `TooltipContent` into a portal. */\n  tooltip: 'dial-kit-tooltip',\n  /** The panel of an `InteractiveTooltip` — the one whose content takes focus. */\n  interactiveTooltip: 'dial-kit-interactive-tooltip',\n  /** The text element of an `EllipsisTooltip`, which is also its trigger. */\n  ellipsisTooltip: 'dial-kit-ellipsis-tooltip',\n\n  /* ── Fields ────────────────────────────────────────────────────────────── */\n  /** The `Search` field, additive to the `dial-kit-input` its `Input` carries. */\n  search: 'dial-kit-search',\n  /** The `PasswordInput` field, additive to `dial-kit-input`. */\n  passwordInput: 'dial-kit-password-input',\n  /** The `NumberInput` field, additive to `dial-kit-input`. */\n  numberInput: 'dial-kit-number-input',\n  /** The `TagInput` field, additive to `dial-kit-input`. */\n  tagInput: 'dial-kit-tag-input',\n  /** The `AutocompleteTagInput` field, additive to `dial-kit-input`. */\n  autocompleteTagInput: 'dial-kit-autocomplete-tag-input',\n  /** The root of a `Select`, wrapping its label, field and caption. */\n  select: 'dial-kit-select',\n  /** The trigger button of an `InlineSelect`. */\n  inlineSelect: 'dial-kit-inline-select',\n  /** The root of a `Calendar`, wrapping its label and date field. */\n  calendar: 'dial-kit-calendar',\n  /** The root of a `SchemaRenderer`, wrapping its top-level sections or fields. */\n  schemaRenderer: 'dial-kit-schema-renderer',\n  /**\n   * The card of one collapsible `SchemaRenderer` section, at any depth: a\n   * top-level property, a nested object or array, an array item, or a\n   * key-value entry holding an object.\n   */\n  schemaRendererSection: 'dial-kit-schema-renderer-section',\n  /** The drop area of a `FileDropzone`. */\n  fileDropzone: 'dial-kit-file-dropzone',\n  /**\n   * The root of a `FileIcon`, wrapping the file or folder glyph (or\n   * its spinner while loading) and the shared badge.\n   */\n  fileIcon: 'dial-kit-file-icon',\n  /** The row of a `FileName`: its type icon, the name and any details. */\n  fileName: 'dial-kit-file-name',\n  /** The `FileName` row of a `FolderName`, additive to `fileName`. */\n  folderName: 'dial-kit-folder-name',\n  /**\n   * The `role=\"img\"` badge of a `SharedEntityIndicator` — standalone, or the\n   * shared badge a `FileIcon` draws over its glyph.\n   */\n  sharedEntityIndicator: 'dial-kit-shared-entity-indicator',\n  /** The root of a `Badge`: the label box, with its icon when it has one. */\n  badge: 'dial-kit-badge',\n  /** The root of an `Avatar`: the image, or the initials box that replaces it. */\n  avatar: 'dial-kit-avatar',\n  /** The root row of an `EntityIdentity`: its icon, type label, name and version. */\n  entityIdentity: 'dial-kit-entity-identity',\n\n  /* ── Controls ──────────────────────────────────────────────────────────── */\n  /** The row of a `Switch`: the control and its label. */\n  switch: 'dial-kit-switch',\n  /** The row of a `Checkbox`: the box and its label. */\n  checkbox: 'dial-kit-checkbox',\n  /** The decorative box a `CheckboxBox` draws, in a checkbox or a menu row. */\n  checkboxBox: 'dial-kit-checkbox-box',\n  /** The row of a `Radio`: the circle and its label. */\n  radio: 'dial-kit-radio',\n  /** The root of a `RadioGroup`, wrapping its label and its radios. */\n  radioGroup: 'dial-kit-radio-group',\n  /**\n   * The root of a `RadioGroupPopupField`, wrapping its label and the collapsed\n   * field that opens the group.\n   */\n  radioGroupPopupField: 'dial-kit-radio-group-popup-field',\n  /** The `role=\"radiogroup\"` track of a `SegmentedControl`. */\n  segmentedControl: 'dial-kit-segmented-control',\n  /** One segment of a `SegmentedControl`. */\n  segmentedControlItem: 'dial-kit-segmented-control-item',\n  /**\n   * The outermost element of a `Tabs`: the box wrapping its heading and tab\n   * list — or the `role=\"tablist\"` itself, which is the root when the tabs\n   * carry no `sectionLabel`.\n   */\n  tabs: 'dial-kit-tabs',\n  /**\n   * The `role=\"tablist\"` holding the tabs, in either orientation. Additive to\n   * `tabs` when there is no heading above it, since one element is then both.\n   */\n  tabList: 'dial-kit-tab-list',\n  /**\n   * One tab inside `Tabs`, in either orientation. The selected tab of a\n   * horizontal row keeps its own `dial-kit-tab-selected-underline`.\n   */\n  tab: 'dial-kit-tab',\n  /**\n   * The selected tab, additive to `tab`. A horizontal row draws its selection\n   * with `dial-kit-tab-selected-underline`, which carries the gradient rule;\n   * this one carries no declarations and marks the selected tab in either\n   * orientation.\n   */\n  tabSelected: 'dial-kit-tab-selected',\n  /** The `sectionLabel` heading above a `Tabs`. Absent when there is none. */\n  tabsSectionLabel: 'dial-kit-tabs-section-label',\n  /**\n   * The `role=\"group\"` row of a `FilterChips`. Its chips are `Tag` pills, so\n   * they carry `dial-kit-tag` and have no entry of their own.\n   */\n  filterChips: 'dial-kit-filter-chips',\n  /** A `Tag` pill, wherever it is rendered — including a `TagInput`'s rows. */\n  tag: 'dial-kit-tag',\n  /**\n   * A `ToggleIconButton`, additive to the `dial-kit-base-icon-button` it\n   * already carries.\n   */\n  toggleIconButton: 'dial-kit-toggle-icon-button',\n  /** A `CloseButton`, additive to `dial-kit-base-icon-button`. */\n  closeButton: 'dial-kit-close-button',\n  /** An `InfoButton`, additive to `dial-kit-base-icon-button`. */\n  infoButton: 'dial-kit-info-button',\n  /**\n   * The wrapper of a `ButtonDropdown` — its trigger carries\n   * `dial-kit-base-button`.\n   */\n  buttonDropdown: 'dial-kit-button-dropdown',\n} as const"
+      "signature": "DIAL_KIT_CLASS = {\n  /* ── Feedback and status ───────────────────────────────────────────────── */\n  /** The `role=\"status\"` root of a `Spinner`. */\n  spinner: 'dial-kit-spinner',\n  /**\n   * The outermost element of a `ProgressBar`: the box wrapping its label,\n   * track and readout — or the track itself, which is the root when the bar\n   * has neither.\n   */\n  progressBar: 'dial-kit-progress-bar',\n  /** The root of a `Skeleton`, wrapping its avatar and text rows. */\n  skeleton: 'dial-kit-skeleton',\n  /**\n   * The `Notification` surface. Present on every wrapper too — the toast and\n   * section-message variants of error, info, success, warning, loading and\n   * general all render this component.\n   */\n  notification: 'dial-kit-notification',\n  /** The empty-state root of `NoDataContent`. */\n  noDataContent: 'dial-kit-no-data-content',\n  /** The `section` root of a `StateScreen`. */\n  stateScreen: 'dial-kit-state-screen',\n  /** The `role=\"status\"` panel of a `TransferQueue`: header, rows and aggregate bar. */\n  transferQueue: 'dial-kit-transfer-queue',\n\n  /* ── Text ──────────────────────────────────────────────────────────────── */\n  /** The text element of a `Highlight`, which renders the matched query. */\n  highlight: 'dial-kit-highlight',\n  /** The caption line under a field, rendered by `CaptionText`. */\n  captionText: 'dial-kit-caption-text',\n  /**\n   * A caption in its error variant — what `ErrorText` renders. Additive to\n   * `captionText`, since one component draws both.\n   */\n  errorText: 'dial-kit-error-text',\n  /** The `Label` root, which wraps the `label` element and its info button. */\n  label: 'dial-kit-label',\n\n  /* ── Containers ────────────────────────────────────────────────────────── */\n  /** The `article` element of a `CardShell`. */\n  cardShell: 'dial-kit-card-shell',\n  /** The `aside` element of a `CollapsibleSidebar`. */\n  collapsibleSidebar: 'dial-kit-collapsible-sidebar',\n  /** The content box inside a `ResizableContainer`'s resize frame. */\n  resizableContainer: 'dial-kit-resizable-container',\n  /** The `role=\"separator\"` element of a `ResizeHandle`. */\n  resizeHandle: 'dial-kit-resize-handle',\n  /**\n   * The `role=\"dialog\"` panel of a `Popup`. Its backdrop is reached through\n   * `overlayClassName`.\n   */\n  popup: 'dial-kit-popup',\n  /** The `role=\"dialog\"` panel of a `BottomSheet`. */\n  bottomSheet: 'dial-kit-bottom-sheet',\n  /**\n   * The backdrop of a `BottomSheet`: the portalled, scroll-locking layer on\n   * `z-popup` that holds the panel.\n   */\n  bottomSheetOverlay: 'dial-kit-bottom-sheet-overlay',\n  /** The `role=\"dialog\"` panel of a `SideDrawer`, open or closed. */\n  sideDrawer: 'dial-kit-side-drawer',\n  /** The `Popup` panel of a `ConfirmationPopup`, additive to `popup`. */\n  confirmationPopup: 'dial-kit-confirmation-popup',\n  /** The root of an `Accordion`. */\n  accordion: 'dial-kit-accordion',\n  /** The breadcrumb root of a `FolderPath`. */\n  folderPath: 'dial-kit-folder-path',\n  /** The `nav` element of a `Breadcrumbs` trail. */\n  breadcrumbs: 'dial-kit-breadcrumbs',\n  /**\n   * One segment of a `Breadcrumbs` trail: the link, button or plain span that\n   * draws the label — not the `li`, which also holds the separator after it.\n   */\n  breadcrumbsItem: 'dial-kit-breadcrumbs-item',\n\n  /* ── Menus and overlays ────────────────────────────────────────────────── */\n  /**\n   * The trigger wrapper of a `Dropdown`. Its floating panel is reached through\n   * `listClassName`.\n   */\n  dropdown: 'dial-kit-dropdown',\n  /**\n   * The `role=\"none\"` item list inside a dropdown overlay — the box that holds\n   * the rows and owns their vertical padding. Present in both generations, and\n   * on a submenu's own list. It is *not* the floating panel.\n   */\n  dropdownList: 'dial-kit-dropdown-list',\n  /** The search row above the item list of a `searchable` `Dropdown`. */\n  dropdownSearch: 'dial-kit-dropdown-search',\n  /**\n   * One row of a floating overlay: a dropdown item, a `Select` option, a\n   * submenu trigger, or a submenu child. It sits on the element that draws the\n   * row box — so on the wrapper, not the inner button, for a row that has a\n   * `rightControl` beside it.\n   */\n  menuItem: 'dial-kit-menuitem',\n  /**\n   * The trailing check of a chosen `MenuItemMark.Check` row. Decorative, like\n   * the glyph itself — the row's `aria-checked` / `aria-selected` carries the\n   * state.\n   */\n  menuItemCheck: 'dial-kit-menuitem-check',\n  /** The primary icon of a `DialDropdownIcon` trigger. */\n  dropdownIcon: 'dial-kit-dropdown-icon',\n  /**\n   * The caret badge of a `DialDropdownIcon` trigger — the round plate the\n   * chevron sits on. Absent when `showCaret` is `false`.\n   */\n  dropdownIconCaret: 'dial-kit-dropdown-icon-caret',\n  /** The bubble of a `Tooltip`, rendered by `TooltipContent` into a portal. */\n  tooltip: 'dial-kit-tooltip',\n  /** The panel of an `InteractiveTooltip` — the one whose content takes focus. */\n  interactiveTooltip: 'dial-kit-interactive-tooltip',\n  /** The text element of an `EllipsisTooltip`, which is also its trigger. */\n  ellipsisTooltip: 'dial-kit-ellipsis-tooltip',\n\n  /* ── Fields ────────────────────────────────────────────────────────────── */\n  /** The `Search` field, additive to the `dial-kit-input` its `Input` carries. */\n  search: 'dial-kit-search',\n  /** The `PasswordInput` field, additive to `dial-kit-input`. */\n  passwordInput: 'dial-kit-password-input',\n  /** The `NumberInput` field, additive to `dial-kit-input`. */\n  numberInput: 'dial-kit-number-input',\n  /** The `TagInput` field, additive to `dial-kit-input`. */\n  tagInput: 'dial-kit-tag-input',\n  /** The `AutocompleteTagInput` field, additive to `dial-kit-input`. */\n  autocompleteTagInput: 'dial-kit-autocomplete-tag-input',\n  /** The root of a `Select`, wrapping its label, field and caption. */\n  select: 'dial-kit-select',\n  /** The trigger button of an `InlineSelect`. */\n  inlineSelect: 'dial-kit-inline-select',\n  /** The root of a `Calendar`, wrapping its label and date field. */\n  calendar: 'dial-kit-calendar',\n  /** The root of a `SchemaRenderer`, wrapping its top-level sections or fields. */\n  schemaRenderer: 'dial-kit-schema-renderer',\n  /**\n   * The card of one collapsible `SchemaRenderer` section, at any depth: a\n   * top-level property, a nested object or array, an array item, or a\n   * key-value entry holding an object.\n   */\n  schemaRendererSection: 'dial-kit-schema-renderer-section',\n  /** The drop area of a `FileDropzone`. */\n  fileDropzone: 'dial-kit-file-dropzone',\n  /**\n   * The root of a `FileIcon`, wrapping the file or folder glyph (or\n   * its spinner while loading) and the shared badge.\n   */\n  fileIcon: 'dial-kit-file-icon',\n  /** The row of a `FileName`: its type icon, the name and any details. */\n  fileName: 'dial-kit-file-name',\n  /** The `FileName` row of a `FolderName`, additive to `fileName`. */\n  folderName: 'dial-kit-folder-name',\n  /**\n   * The `role=\"img\"` badge of a `SharedEntityIndicator` — standalone, or the\n   * shared badge a `FileIcon` draws over its glyph.\n   */\n  sharedEntityIndicator: 'dial-kit-shared-entity-indicator',\n  /** The root of a `Badge`: the label box, with its icon when it has one. */\n  badge: 'dial-kit-badge',\n  /** The root of an `Avatar`: the image, or the initials box that replaces it. */\n  avatar: 'dial-kit-avatar',\n  /** The root row of an `EntityIdentity`: its icon, type label, name and version. */\n  entityIdentity: 'dial-kit-entity-identity',\n  /** The bordered card of a `SelectedEntityCard`, not the wrapper that also holds its error. */\n  selectedEntityCard: 'dial-kit-selected-entity-card',\n  /** The `section` root of a `FormSection`: its heading row, description and content. */\n  formSection: 'dial-kit-form-section',\n\n  /* ── Controls ──────────────────────────────────────────────────────────── */\n  /** The row of a `Switch`: the control and its label. */\n  switch: 'dial-kit-switch',\n  /** The row of a `Checkbox`: the box and its label. */\n  checkbox: 'dial-kit-checkbox',\n  /** The decorative box a `CheckboxBox` draws, in a checkbox or a menu row. */\n  checkboxBox: 'dial-kit-checkbox-box',\n  /** The row of a `Radio`: the circle and its label. */\n  radio: 'dial-kit-radio',\n  /** The root of a `RadioGroup`, wrapping its label and its radios. */\n  radioGroup: 'dial-kit-radio-group',\n  /**\n   * The root of a `RadioGroupPopupField`, wrapping its label and the collapsed\n   * field that opens the group.\n   */\n  radioGroupPopupField: 'dial-kit-radio-group-popup-field',\n  /** The `role=\"radiogroup\"` track of a `SegmentedControl`. */\n  segmentedControl: 'dial-kit-segmented-control',\n  /** One segment of a `SegmentedControl`. */\n  segmentedControlItem: 'dial-kit-segmented-control-item',\n  /**\n   * The outermost element of a `Tabs`: the box wrapping its heading and tab\n   * list — or the `role=\"tablist\"` itself, which is the root when the tabs\n   * carry no `sectionLabel`.\n   */\n  tabs: 'dial-kit-tabs',\n  /**\n   * The `role=\"tablist\"` holding the tabs, in either orientation. Additive to\n   * `tabs` when there is no heading above it, since one element is then both.\n   */\n  tabList: 'dial-kit-tab-list',\n  /**\n   * One tab inside `Tabs`, in either orientation. The selected tab of a\n   * horizontal row keeps its own `dial-kit-tab-selected-underline`.\n   */\n  tab: 'dial-kit-tab',\n  /**\n   * The selected tab, additive to `tab`. A horizontal row draws its selection\n   * with `dial-kit-tab-selected-underline`, which carries the gradient rule;\n   * this one carries no declarations and marks the selected tab in either\n   * orientation.\n   */\n  tabSelected: 'dial-kit-tab-selected',\n  /** The `sectionLabel` heading above a `Tabs`. Absent when there is none. */\n  tabsSectionLabel: 'dial-kit-tabs-section-label',\n  /**\n   * The `role=\"group\"` row of a `FilterChips`. Its chips are `Tag` pills, so\n   * they carry `dial-kit-tag` and have no entry of their own.\n   */\n  filterChips: 'dial-kit-filter-chips',\n  /** A `Tag` pill, wherever it is rendered — including a `TagInput`'s rows. */\n  tag: 'dial-kit-tag',\n  /**\n   * A `ToggleIconButton`, additive to the `dial-kit-base-icon-button` it\n   * already carries.\n   */\n  toggleIconButton: 'dial-kit-toggle-icon-button',\n  /** A `CloseButton`, additive to `dial-kit-base-icon-button`. */\n  closeButton: 'dial-kit-close-button',\n  /** An `InfoButton`, additive to `dial-kit-base-icon-button`. */\n  infoButton: 'dial-kit-info-button',\n  /**\n   * The wrapper of a `ButtonDropdown` — its trigger carries\n   * `dial-kit-base-button`.\n   */\n  buttonDropdown: 'dial-kit-button-dropdown',\n} as const"
     }
   ]
 }