@epam/ai-dial-ui-kit 0.16.0-dev.3 → 0.16.0-dev.32

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.3",
-  "generatedAt": "2026-10-12T13:27:06.424Z",
+  "version": "0.16.0-dev.32",
+  "generatedAt": "2026-10-21T19:48:14.902Z",
   "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",
@@ -2204,10 +2217,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 +2391,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 +2408,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"
     },
@@ -3660,7 +3725,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 +3766,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",
@@ -4909,6 +4980,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",
@@ -4983,11 +5121,65 @@
       ],
       "sourceFile": "components/New/NoDataContent/NoDataContent.tsx"
     },
+    {
+      "name": "StateScreen",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "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": "ReactNode",
+          "required": true,
+          "description": "Headline of the state, rendered as the page's `h1`."
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional line under the title."
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Glyph drawn in the round badge; the badge is omitted without one."
+        },
+        {
+          "name": "action",
+          "type": "ReactNode",
+          "required": false,
+          "description": "The way out of the state, rendered under the text."
+        },
+        {
+          "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 title."
+        },
+        {
+          "name": "descriptionClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the description."
+        }
+      ],
+      "examples": [
+        "<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/StateScreen/StateScreen.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, 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 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",
@@ -5204,10 +5396,17 @@
           "required": false,
           "defaultValue": "'Select all rows'",
           "description": "Accessible name of the select-all control."
+        },
+        {
+          "name": "colorScheme",
+          "type": "GridColorScheme",
+          "required": false,
+          "defaultValue": "GridColorScheme.Light",
+          "description": "AG Grid color scheme. `dark` paints native controls dark."
         }
       ],
       "examples": [
-        "interface Product { id: string; name: string; price: number }\n\nconst columns: ColDef<Product>[] = [\n  { field: 'name', headerName: 'Product', flex: 1 },\n  { field: 'price', headerName: 'Price', width: 120 },\n];\n\n<Grid<Product> columnDefs={columns} rowData={products} />\n\n// With selection and a context menu\n<Grid<Product>\n  columnDefs={columns}\n  rowData={products}\n  selectionMode={GridSelectionMode.MULTIPLE}\n  selectedRowIds={selectedIds}\n  onSelectionChange={(ids) => setSelectedIds(ids)}\n  selectRowLabel={(row) => `Select ${row.name}`}\n  getContextMenuItems={(row) => [{ key: 'edit', label: 'Edit' }]}\n/>"
+        "interface Product { id: string; name: string; price: number }\n\nconst columns: ColDef<Product>[] = [\n  { field: 'name', headerName: 'Product', flex: 1 },\n  { field: 'price', headerName: 'Price', width: 120 },\n];\n\n<Grid<Product> columnDefs={columns} rowData={products} />\n\n// With selection and a context menu\n<Grid<Product>\n  columnDefs={columns}\n  rowData={products}\n  selectionMode={GridSelectionMode.MULTIPLE}\n  selectedRowIds={selectedIds}\n  onSelectionChange={(ids) => setSelectedIds(ids)}\n  selectRowLabel={(row) => `Select ${row.name}`}\n  getContextMenuItems={(row) => [{ key: 'edit', label: 'Edit' }]}\n/>\n\n// Dark native controls, including the date-filter calendar\n<Grid<Product> columnDefs={columns} rowData={products} colorScheme={GridColorScheme.Dark} />"
       ],
       "sourceFile": "components/New/Grid/Grid.tsx"
     },
@@ -9293,796 +9492,123 @@
       "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",
-          "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"
-        },
-        {
-          "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",
+          "name": "showDragbar",
           "type": "boolean",
           "required": false,
           "defaultValue": "true",
@@ -10096,214 +9622,88 @@
       "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": "Compact",
-          "value": "'compact'"
-        }
-      ],
-      "sourceFile": "types/analytics.ts"
-    },
-    {
-      "name": "AnalyticsBarColorStop",
-      "kind": "interface",
-      "members": [
-        {
-          "name": "from",
-          "value": "number"
-        },
-        {
-          "name": "to",
-          "value": "number"
-        },
-        {
-          "name": "color",
-          "value": "string"
-        }
-      ],
-      "sourceFile": "models/analytics.ts"
-    },
-    {
-      "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"
-        },
+        "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": "isTemporary?",
-          "value": "boolean"
+          "name": "Default",
+          "value": "'default'"
         },
         {
-          "name": "owner?",
-          "value": "string"
-        },
+          "name": "Compact",
+          "value": "'compact'"
+        }
+      ],
+      "sourceFile": "types/analytics.ts"
+    },
+    {
+      "name": "AnalyticsBarColorStop",
+      "kind": "interface",
+      "members": [
         {
-          "name": "contentType?",
-          "value": "string"
+          "name": "from",
+          "value": "number"
         },
         {
-          "name": "contentLength?",
+          "name": "to",
           "value": "number"
         },
         {
-          "name": "folderId?",
+          "name": "color",
           "value": "string"
         }
       ],
-      "sourceFile": "components/FileManager/FileManagerContext.tsx"
+      "sourceFile": "models/analytics.ts"
     },
     {
-      "name": "GridOptions",
+      "name": "AnalyticsCardCompareItem",
       "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": "title",
+          "value": "ReactNode"
         },
         {
-          "name": "showFiles?",
-          "value": "boolean"
-        },
+          "name": "value",
+          "value": "ReactNode"
+        }
+      ],
+      "sourceFile": "models/analytics.ts"
+    },
+    {
+      "name": "DialTooltipContainerOptions",
+      "kind": "interface",
+      "members": [
         {
-          "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",
@@ -10658,131 +10058,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",
@@ -11280,76 +10555,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",
@@ -12011,6 +11216,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",
@@ -12029,6 +11269,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",
@@ -12334,6 +11590,22 @@
       ],
       "sourceFile": "types/transfer-queue.ts",
       "description": "Lifecycle status of one item in a `TransferQueue`."
+    },
+    {
+      "name": "GridColorScheme",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Light",
+          "value": "'light'"
+        },
+        {
+          "name": "Dark",
+          "value": "'dark'"
+        }
+      ],
+      "sourceFile": "types/grid.ts",
+      "description": "Color scheme `Grid` passes to AG Grid. It selects the light or dark theme\npart and the browser `color-scheme` native controls inside the grid follow."
     }
   ],
   "hooks": [
@@ -12355,11 +11627,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",
@@ -12380,24 +11647,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",
@@ -12453,7 +11713,7 @@
       "name": "GRID_THEME_PARAMS",
       "sourceFile": "components/New/Grid/constants.ts",
       "description": "ag-Grid theme parameters, resolved from the 2.0 colour tokens with the same\nliteral fallbacks the Tailwind config carries, so a consumer that defines no\nCSS variables still gets the intended palette.\n\nHover uses the subtle accent tint and selection the slightly stronger\nselected tint, as in the grid cell design.",
-      "signature": "GRID_THEME_PARAMS = {\n  accentColor: 'var(--bg-control-accent, #1D4ED8)',\n  backgroundColor: 'var(--bg-layer-raised, #FCFCFC)',\n  oddRowBackgroundColor: 'var(--bg-layer-sunken, #EEF1F7)',\n  selectedRowBackgroundColor:\n    'var(--bg-control-accent-alpha-active-subtle, #2764D914)',\n  rowHoverColor: 'var(--bg-control-accent-alpha-hover-subtle, #2764D90A)',\n  borderColor: 'var(--stroke-tertiary, #E0E6F0)',\n  // Dividers inside the table sit on the thin stroke (0.5px) rather than the\n  // 1px main stroke that controls and standalone dividers use, so a dense grid\n  // reads as rows of data instead of a set of boxes. Sub-pixel widths are\n  // antialiased rather than snapped, which is what makes the line look lighter.\n  // `wrapperBorder` and the pinned-column boundary are left on the main stroke\n  // by the theme: those frame the table and separate its regions rather than\n  // dividing rows and columns.\n  rowBorder: THIN_TABLE_DIVIDER,\n  // Off: ag-Grid draws this one both under the header and between the title\n  // row and the filter row, and the design has no line between those two. The\n  // line under the header is drawn at 1px in `styles/grid.scss`.\n  headerRowBorder: false,\n  headerColumnBorder: THIN_TABLE_DIVIDER,\n  // The design's header divider is a short 12px mark centred in the cell, not\n  // the 20px (half the row) ag-Grid draws by default.\n  headerColumnBorderHeight: 12,\n  chromeBackgroundColor: 'var(--bg-layer-base, #F5F7FA)',\n  headerBackgroundColor: 'var(--bg-layer-raised, #FCFCFC)',\n  foregroundColor: 'var(--text-primary, #161B2D)',\n  headerTextColor: 'var(--text-secondary, #57647A)',\n  // 1.0 asked the browser for dark native widgets while painting a light\n  // theme; the scheme now matches the palette it is used with.\n  browserColorScheme: 'light',\n  headerFontSize: 14,\n  headerFontWeight: 600,\n  fontSize: 14,\n  fontFamily: 'var(--theme-font, var(--font-inter))',\n  spacing: 4,\n  borderRadius: 4,\n  // Search fields in the header and filter popups: `rounded-lg`.\n  inputBorderRadius: 8,\n  wrapperBorderRadius: 8,\n}"
+      "signature": "GRID_THEME_PARAMS = {\n  accentColor: 'var(--bg-control-accent, #1D4ED8)',\n  backgroundColor: 'var(--bg-layer-raised, #FCFCFC)',\n  oddRowBackgroundColor: 'var(--bg-layer-sunken, #EEF1F7)',\n  selectedRowBackgroundColor:\n    'var(--bg-control-accent-alpha-active-subtle, #2764D914)',\n  rowHoverColor: 'var(--bg-control-accent-alpha-hover-subtle, #2764D90A)',\n  borderColor: 'var(--stroke-tertiary, #E0E6F0)',\n  // Dividers inside the table sit on the thin stroke (0.5px) rather than the\n  // 1px main stroke that controls and standalone dividers use, so a dense grid\n  // reads as rows of data instead of a set of boxes. Sub-pixel widths are\n  // antialiased rather than snapped, which is what makes the line look lighter.\n  // `wrapperBorder` and the pinned-column boundary are left on the main stroke\n  // by the theme: those frame the table and separate its regions rather than\n  // dividing rows and columns.\n  rowBorder: THIN_TABLE_DIVIDER,\n  // Off: ag-Grid draws this one both under the header and between the title\n  // row and the filter row, and the design has no line between those two. The\n  // line under the header is drawn at 1px in `styles/grid.scss`.\n  headerRowBorder: false,\n  headerColumnBorder: THIN_TABLE_DIVIDER,\n  // The design's header divider is a short 12px mark centred in the cell, not\n  // the 20px (half the row) ag-Grid draws by default.\n  headerColumnBorderHeight: 12,\n  chromeBackgroundColor: 'var(--bg-layer-base, #F5F7FA)',\n  headerBackgroundColor: 'var(--bg-layer-raised, #FCFCFC)',\n  foregroundColor: 'var(--text-primary, #161B2D)',\n  headerTextColor: 'var(--text-secondary, #57647A)',\n  // Native form controls inside the grid, including the date filter's\n  // calendar, follow this value. The light default matches the token\n  // fallbacks. `Grid` sets it again after this object is spread, because a\n  // dark `colorScheme` has to replace this light value or the browser keeps\n  // painting those controls light.\n  browserColorScheme: 'light',\n  headerFontSize: 14,\n  headerFontWeight: 600,\n  fontSize: 14,\n  fontFamily: 'var(--theme-font, var(--font-inter))',\n  spacing: 4,\n  borderRadius: 4,\n  // Search fields in the header and filter popups: `rounded-lg`.\n  inputBorderRadius: 8,\n  wrapperBorderRadius: 8,\n}"
     },
     {
       "name": "GRID_ROW_HEIGHT",
@@ -12507,21 +11767,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",
@@ -12560,7 +11805,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\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"
     }
   ]
 }