@epam/ai-dial-ui-kit 0.13.0-dev.9 → 0.14.0-dev.1

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.13.0-dev.9",
-  "generatedAt": "2026-07-24T21:25:38.882Z",
+  "version": "0.14.0-dev.1",
+  "generatedAt": "2026-08-19T12:39:41.400Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -20,45 +20,2863 @@
     },
     "setupNotes": "## Next.js Integration\n1. Install the package and peer dependencies that are not currently in your project\n``` bash\nnpm install @epam/ai-dial-ui-kit\nnpm install react react-dom  @tabler/icons-react classnames\nnpm install @floating-ui/react monaco-editor @monaco-editor/react\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                             | Weight   | Size / Line-height      |\n| --------------------------------- | -------- | ----------------------- |\n| `.dial-display1-text`             | semibold | 32px / 48px             |\n| `.dial-display2-text`             | semibold | 28px / 40px             |\n| `.dial-h1-text`                   | semibold | 22px / 32px             |\n| `.dial-h2-text`                   | semibold | 20px / 28px             |\n| `.dial-h3-text`                   | semibold | 18px / 26px             |\n| `.dial-body-text`                 | normal   | 16px / 24px             |\n| `.dial-body-semi-text`            | semibold | 16px / 24px             |\n| `.dial-body-paragraph-text`       | normal   | 16px / 26px             |\n| `.dial-body-paragraph-semi-text`  | semibold | 16px / 26px             |\n| `.dial-small-text`                | normal   | 14px / 20px             |\n| `.dial-small-semi-text`           | semibold | 14px / 20px             |\n| `.dial-small-paragraph-text`      | normal   | 14px / 24px             |\n| `.dial-small-paragraph-semi-text` | semibold | 14px / 24px             |\n| `.dial-tiny-text`                 | normal   | 12px / 16px             |\n| `.dial-tiny-semi-text`            | semibold | 12px / 16px             |\n| `.dial-caption-text`              | normal   | 10px / 12px             |\n| `.dial-caption-semi-text`         | semibold | 10px / 12px             |\n| `.dial-code-text`                 | normal   | 14px / 20px (monospace) |\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## Token Reference\n\n\n### backgroundsColors\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| `layer-5` | `var(--bg-layer-5)` | `#F5F7FA` |\n| `layer-6` | `var(--bg-layer-6)` | `#F8FAFC` |\n| `layer-7` | `var(--bg-layer-7)` | `#00000006` |\n| `layer-8` | `var(--bg-layer-8)` | `#f0f2f5` |\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| `accent-tertiary` | `var(--bg-accent-tertiary)` | `#A972FF` |\n| `red-400` | `var(--bg-red-400)` | `#F76464` |\n| `orange-400` | `var(--bg-orange-400)` | `#D97C27` |\n| `orange-800` | `var(--bg-orange-800)` | `#B25500` |\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| `shadow-blue` | `var(--shadow-blue-500)` | `#2764D924` |\n| `shadow-grey` | `var(--shadow-grey-1000)` | `#161B2D08` |\n\n### controlsBgColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\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-hover` | `var(--controls-bg-alpha-hover)` | `#F764642E` |\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-accent` | `var(--controls-bg-accent)` | `#5C8DEA` |\n| `controls-accent-hover` | `var(--controls-bg-accent-hover)` | `#4878D2` |\n| `controls-accent-alpha` | `var(--controls-bg-accent-alpha)` | `#5C8DEA2B` |\n| `controls-enable-primary` | `var(--controls-enable-primary)` | `#FCFCFC` |\n| `control-accent-alpha` | `var(--bg-control-accent-alpha)` | `#2764D914` |\n| `control-accent-alpha-hover` | `var(--bg-control-accent-alpha-hover)` | `#2764D924` |\n| `control-accent-alpha-active` | `var(--bg-control-accent-alpha-active)` | `#2764D933` |\n| `control-accent` | `var(--bg-control-accent)` | `#124ACE` |\n| `control-neutral` | `var(--bg-control-neutral)` | `#FCFCFC` |\n| `control-neutral-hover` | `var(--bg-control-neutral-hover)` | `#E0E6F0` |\n| `control-neutral-active` | `var(--bg-control-neutral-active)` | `#D1DBEA` |\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-disable` | `var(--bg-control-disable)` | `#C7CBD4` |\n\n### borderColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--stroke-accent-primary)` | `#124ACE` |\n| `accent-primary-hover` | `var(--stroke-accent-primary-hover)` | `#7DA4FF` |\n| `accent-secondary` | `var(--stroke-accent-secondary)` | `#007274` |\n| `accent-tertiary` | `var(--stroke-accent-tertiary)` | `#7E39EC` |\n| `hover-tint` | `var(--stroke-hover-tint)` | `#0000001f` |\n| `accent-alpha` | `var(--stroke-accent-alpha)` | `#2764D933` |\n| `controls-accent` | `var(--controls-bg-accent)` | `#5C8DEA` |\n| `accent-primary-hover` | `var(--stroke-accent-primary-hover)` | `#4878d2` |\n| `red-900` | `var(--red-900)` | `#402027` |\n\n### controlsBorderColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `controls-focus` | `var(--controls-stroke-focus)` | `#EEF1F7` |\n\n### textColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `warning-icon` | `var(--text-warning-icon)` | `#EEC840` |\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-disable` | `var(--controls-text-disable)` | `#0C101D` |\n\n### controlsTextColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\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` |\n| `control-permanent` | `var(--text-control-permanent)` | `#FCFCFC` |\n| `control-disable` | `var(--text-control-disable)` | `#7C8293` |\n| `controls-primary` | `var(--controls-primary)` | `#FCFCFC` |\n| `controls-disable` | `var(--controls-text-disable)` | `#575F73` |",
+  "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\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\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## 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\n### controlsBgColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\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-active` | `var(--bg-control-accent-alpha-active)` | `#2764D933` |\n| `control-accent` | `var(--bg-control-accent)` | `#124ACE` |\n| `control-neutral` | `var(--bg-control-neutral)` | `#FCFCFC` |\n| `control-neutral-hover` | `var(--bg-control-neutral-hover)` | `#E0E6F0` |\n| `control-neutral-active` | `var(--bg-control-neutral-active)` | `#D1DBEA` |\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-hover` | `var(--bg-control-error-alpha-hover)` | `#F764641A` |\n| `control-error-alpha-active` | `var(--bg-control-error-alpha-active)` | `#F7646433` |\n| `control-disable` | `var(--bg-control-disable)` | `#DCE0E8` |\n\n### borderColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `hover-alpha` | `var(--stroke-hover-alpha)` | `#2764D933` |\n| `focus-blue` | `var(--stroke-focus-blue)` | `#6785FB` |\n| `accent-alpha` | `var(--stroke-accent-alpha)` | `#2764D933` |\n| `error-alpha` | `var(--stroke-error-alpha)` | `#AE2F2F73` |\n| `control-disable-alpha` | `var(--text-control-disable-alpha)` | `#848E9C` |\n\n### visualBgColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\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### visualTextColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\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\n### textColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `warning-icon` | `var(--text-warning-icon)` | `#EEC840` |\n\n### controlsTextColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `control-permanent` | `var(--text-control-permanent)` | `#FCFCFC` |\n| `control-disable-alpha` | `var(--text-control-disable-alpha)` | `#848E9C` |\n| `control-disable-beta` | `var(--text-control-disable-beta)` | `#DCE0E8` |\n| `control-blue-hover` | `var(--text-control-blue-hover)` | `#5976E9` |\n| `control-blue-active` | `var(--text-control-blue-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` |",
   "components": [
+    {
+      "name": "Spinner",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "Design system 2.0",
+      "props": [
+        {
+          "name": "size",
+          "type": "number",
+          "required": false,
+          "defaultValue": "40"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "fullWidth",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false"
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Loading'"
+        }
+      ],
+      "examples": [],
+      "sourceFile": "components/Spinner/Spinner.tsx"
+    },
+    {
+      "name": "ProgressBar",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A horizontal bar indicating progress toward a goal.\naliases: Progress|LoadingBar|Meter\nDesign system 2.0\n\nNames itself from `labelProps.label` through `aria-labelledby`; without one it\nfalls back to `aria-label`, and finally to `Progress` so the bar is never\nanonymous. Prefer a real label — several bars all announcing \"Progress\" tell a\nscreen reader user nothing about which is which.\n\nScreen readers derive the announced percentage from the value and `max`. When\nthe raw numbers are more useful than a percentage, pass `aria-valuetext`\n(e.g. `\"3 of 10 files\"`); it goes straight through to the element.\n\n`valueLabel` renders a readout at the end of the label row. Formatting stays\nwith the caller — the bar has no way to know how many decimals or which unit\na given quantity deserves. It does not name the bar, so pair it with a\nmatching `aria-valuetext` to have the same reading announced.",
+      "props": [
+        {
+          "name": "value",
+          "type": "number",
+          "required": true,
+          "description": "Current progress. Clamped into `0…max`."
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "required": false,
+          "defaultValue": "100",
+          "description": "Value that counts as complete."
+        },
+        {
+          "name": "size",
+          "type": "ElementSize",
+          "required": false,
+          "defaultValue": "ElementSize.Standard",
+          "description": "Bar height: standard is 8px, small is 4px."
+        },
+        {
+          "name": "labelProps",
+          "type": "LabelProps",
+          "required": false,
+          "description": "Props of the  rendered above the bar, which also names it."
+        },
+        {
+          "name": "valueLabel",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Readout rendered at the end of the label row."
+        }
+      ],
+      "examples": [
+        "<ProgressBar value={40} labelProps={{ label: 'Uploading' }} />\n<ProgressBar value={3} max={10} aria-valuetext=\"3 of 10 files\" />\n<ProgressBar value={80} size={ElementSize.Small} />\n\n<ProgressBar\n  value={3.313182}\n  max={500}\n  labelProps={{ label: 'Cost per month', caption: 'Billed monthly' }}\n  valueLabel=\"3.31 / 500\"\n  aria-valuetext=\"3.31 of 500\"\n/>"
+      ],
+      "sourceFile": "components/ProgressBar/ProgressBar.tsx"
+    },
+    {
+      "name": "Skeleton",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "Skeleton\naliases: PlaceholderUI|ShimmerLoader\nDesign system 2.0\n\nA placeholder component to show while content is loading.\nProvides various skeleton shapes and configurations.",
+      "props": [
+        {
+          "name": "active",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether to show the loading animation"
+        },
+        {
+          "name": "paragraph",
+          "type": "boolean | { rows?: number; width?: string | string[] }",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Show paragraph placeholder or configure its appearance"
+        },
+        {
+          "name": "avatar",
+          "type": "| boolean\n    | {\n        size?: number | SkeletonAvatarSize;\n        shape?: SkeletonAvatarShape;\n      }",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Show avatar placeholder or configure its appearance"
+        },
+        {
+          "name": "showTitle",
+          "type": "boolean | { width?: string }",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Show title placeholder or configure its appearance"
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Display the skeleton when true"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content to be displayed when loading is false"
+        },
+        {
+          "name": "variant",
+          "type": "SkeletonVariant",
+          "required": false,
+          "defaultValue": "SkeletonVariant.Default",
+          "description": "Skeleton variant"
+        },
+        {
+          "name": "width",
+          "type": "string | number",
+          "required": false,
+          "description": "Width of the skeleton"
+        },
+        {
+          "name": "height",
+          "type": "string | number",
+          "required": false,
+          "description": "Height of the skeleton"
+        },
+        {
+          "name": "overlay",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content to overlay on top of the skeleton (e.g., a spinner)"
+        },
+        {
+          "name": "color",
+          "type": "string",
+          "required": false,
+          "description": "Custom background color for the skeleton elements (overrides the default token)"
+        }
+      ],
+      "examples": [
+        "// Simple skeleton\n<Skeleton />\n\n// Text skeleton with custom size\n<Skeleton variant={SkeletonVariant.Text} width=\"200px\" height=\"20px\" />\n\n// Circular avatar skeleton\n<Skeleton variant={SkeletonVariant.Circular} width={40} height={40} />\n\n// Complex skeleton with avatar, showTitle and paragraph\n<Skeleton\n  avatar\n  showTitle\n  paragraph={{ rows: 3 }}\n  active\n/>\n\n// Conditional loading\n<Skeleton loading={isLoading}>\n  <div>Your content here</div>\n</Skeleton>\n\n// Custom paragraph widths\n<Skeleton\n  paragraph={{ rows: 3, width: ['100%', '80%', '60%'] }}\n/>\n\n// Avatar with size and shape\n<Skeleton\n  avatar={{\n    size: SkeletonAvatarSize.Large,\n    shape: SkeletonAvatarShape.Square\n  }}\n/>"
+      ],
+      "sourceFile": "components/Skeleton/Skeleton.tsx"
+    },
+    {
+      "name": "Notification",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A contextual feedback component for displaying important messages.\naliases: Notification\nDesign system 2.0\n\nRenders a colored container with an icon, message text, and an optional\nclose button.\n\nThe container is a live region whose politeness follows the variant: `error`\nand `warning` use `role=\"alert\"` (assertive, interrupts the screen reader),\nevery other variant uses `role=\"status\"` (polite, queues). Pass an explicit\n`role` to override — including for a notification that is static page content\nrather than an update.",
+      "props": [
+        {
+          "name": "variant",
+          "type": "NotificationVariant",
+          "required": false,
+          "defaultValue": "NotificationVariant.Info",
+          "description": "Defines the visual style and icon of the alert"
+        },
+        {
+          "name": "type",
+          "type": "NotificationType",
+          "required": false,
+          "defaultValue": "NotificationType.Toast",
+          "description": "Defines the type of notification, either a toast or a section message"
+        },
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional heading displayed above the message in semibold"
+        },
+        {
+          "name": "message",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Message text to display inside the alert"
+        },
+        {
+          "name": "closable",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the alert has a close button"
+        },
+        {
+          "name": "iconSize",
+          "type": "number",
+          "required": false,
+          "defaultValue": "24",
+          "description": "Size of the icon displayed in the alert"
+        },
+        {
+          "name": "iconStroke",
+          "type": "number",
+          "required": false,
+          "defaultValue": "2",
+          "description": "Stroke width of the icon displayed in the alert"
+        },
+        {
+          "name": "textClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to the message text"
+        },
+        {
+          "name": "onClose",
+          "type": "(e: MouseEvent<HTMLButtonElement>) => void",
+          "required": false,
+          "description": "Callback fired when the close button is clicked"
+        }
+      ],
+      "examples": [
+        "<Notification\n  variant={NotificationVariant.Info}\n  message=\"This is an info alert.\"\n/>\n\n<Notification\n  variant={NotificationVariant.Success}\n  title=\"Saved\"\n  message=\"Changes saved successfully.\"\n/>\n\n<Notification\n  variant={NotificationVariant.Error}\n  closable\n  message=\"Something went wrong.\"\n  onClose={(e) => console.log('closed', e)}\n/>\n\n<Notification\n  variant={NotificationVariant.Loading}\n  title=\"Processing\"\n  message=\"Please wait...\"\n/>"
+      ],
+      "sourceFile": "components/New/Notification/Notification.tsx"
+    },
+    {
+      "name": "Highlight",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "Renders text with the first occurrence of `query` wrapped in a highlight mark, with ellipsis truncation and a tooltip when overflowing.\nDesign system 2.0",
+      "props": [
+        {
+          "name": "text",
+          "type": "string",
+          "required": true
+        },
+        {
+          "name": "query",
+          "type": "string",
+          "required": true
+        },
+        {
+          "name": "markClassName",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "maxLines",
+          "type": "number",
+          "required": false,
+          "defaultValue": "2"
+        }
+      ],
+      "examples": [],
+      "sourceFile": "components/New/Highlight/Highlight.tsx"
+    },
+    {
+      "name": "CardShell",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A shared elevated card shell used as the base wrapper for browse-grid cards.\nDesign system 2.0\n\nRenders an `<article>` with rounded corners, padding, a resting shadow, and\na hover lift with a stronger shadow. Respects `prefers-reduced-motion` by\ndisabling the transform/shadow transition and hover lift.",
+      "props": [],
+      "examples": [],
+      "sourceFile": "components/New/CardShell/CardShell.tsx"
+    },
+    {
+      "name": "ErrorMessageNotification",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "",
+      "props": [],
+      "examples": [],
+      "sourceFile": "components/New/Notification/NotificationWrapper.tsx"
+    },
+    {
+      "name": "ErrorToastNotification",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "",
+      "props": [],
+      "examples": [],
+      "sourceFile": "components/New/Notification/NotificationWrapper.tsx"
+    },
+    {
+      "name": "InfoMessageNotification",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "",
+      "props": [],
+      "examples": [],
+      "sourceFile": "components/New/Notification/NotificationWrapper.tsx"
+    },
+    {
+      "name": "InfoToastNotification",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "",
+      "props": [],
+      "examples": [],
+      "sourceFile": "components/New/Notification/NotificationWrapper.tsx"
+    },
+    {
+      "name": "LoadingMessageNotification",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "",
+      "props": [],
+      "examples": [],
+      "sourceFile": "components/New/Notification/NotificationWrapper.tsx"
+    },
+    {
+      "name": "LoadingToastNotification",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "",
+      "props": [],
+      "examples": [],
+      "sourceFile": "components/New/Notification/NotificationWrapper.tsx"
+    },
+    {
+      "name": "SuccessMessageNotification",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "",
+      "props": [],
+      "examples": [],
+      "sourceFile": "components/New/Notification/NotificationWrapper.tsx"
+    },
+    {
+      "name": "SuccessToastNotification",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "",
+      "props": [],
+      "examples": [],
+      "sourceFile": "components/New/Notification/NotificationWrapper.tsx"
+    },
+    {
+      "name": "WarningMessageNotification",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "",
+      "props": [],
+      "examples": [],
+      "sourceFile": "components/New/Notification/NotificationWrapper.tsx"
+    },
+    {
+      "name": "WarningToastNotification",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "",
+      "props": [],
+      "examples": [],
+      "sourceFile": "components/New/Notification/NotificationWrapper.tsx"
+    },
+    {
+      "name": "Calendar",
+      "category": "Components_2_0",
+      "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": [
+        {
+          "name": "mode",
+          "type": "CalendarMode",
+          "required": false,
+          "defaultValue": "CalendarMode.Date",
+          "description": "Selection mode: date, datetime, time or weekday"
+        },
+        {
+          "name": "value",
+          "type": "CalendarValue",
+          "required": false,
+          "description": "Controlled value: a `Date` for date/datetime, an `\"HH:mm\"` string for time, an ISO weekday number (`\"1\"`=Monday…`\"7\"`=Sunday) for weekday"
+        },
+        {
+          "name": "onChange",
+          "type": "(value: CalendarValue) => void",
+          "required": false,
+          "description": "Callback fired with the next value when the selection changes"
+        },
+        {
+          "name": "labelProps",
+          "type": "LabelProps",
+          "required": false,
+          "description": "Props of the  rendered above the control, including `label`, `required` and `caption`"
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "required": false,
+          "description": "Placeholder shown when there is no value; defaults to a mode-appropriate string (\"Select date\", \"Select date and time\", \"--:--\" or \"Select day\")"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Disables the control"
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Applies error styling"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "description": "id applied to the control, linked to the label"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to the outer container"
+        },
+        {
+          "name": "minDate",
+          "type": "Date",
+          "required": false,
+          "description": "Earliest selectable date (date/datetime modes)"
+        },
+        {
+          "name": "maxDate",
+          "type": "Date",
+          "required": false,
+          "description": "Latest selectable date (date/datetime modes)"
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "required": false,
+          "defaultValue": "DEFAULT_CALENDAR_LOCALE",
+          "description": "BCP 47 locale tag used to localize month/weekday names and date formatting"
+        },
+        {
+          "name": "fieldClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes merged onto the trigger field, overriding conflicting defaults"
+        }
+      ],
+      "examples": [
+        "<Calendar mode={CalendarMode.Date} value={date} onChange={setDate} />\n<Calendar mode={CalendarMode.DateTime} value={date} onChange={setDate} />\n<Calendar mode={CalendarMode.Time} value={time} onChange={setTime} />\n<Calendar mode={CalendarMode.Weekday} value={weekday} onChange={setWeekday} />\n<Calendar mode={CalendarMode.Date} value={date} onChange={setDate} locale=\"de-DE\" />\n<Calendar labelProps={{ label: 'Start date', required: true }} value={date} onChange={setDate} />"
+      ],
+      "sourceFile": "components/New/Calendar/Calendar.tsx"
+    },
+    {
+      "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.",
+      "props": [
+        {
+          "name": "segments",
+          "type": "string[]",
+          "required": true,
+          "description": "Path segments to display, outermost first"
+        },
+        {
+          "name": "labelClassName",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'dial-small-text'",
+          "description": "Additional CSS classes applied to non-leaf segments"
+        },
+        {
+          "name": "leafClassName",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'dial-small-semi-text'",
+          "description": "Additional CSS classes applied to the last (leaf) segment"
+        },
+        {
+          "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`)."
+        },
+        {
+          "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."
+        }
+      ],
+      "examples": [
+        "<FolderPath segments={['Shared', 'Team Space', 'Reports']} />"
+      ],
+      "sourceFile": "components/New/FolderPath/FolderPath.tsx"
+    },
+    {
+      "name": "DangerButton",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A Danger Button component with predefined danger variant",
+      "props": [],
+      "examples": [
+        "<DangerButton\nlabel=\"Click me\"\nonClick={handleClick}\nclassName=\"custom-button\"\n/>"
+      ],
+      "sourceFile": "components/New/Button/ButtonWrappers.tsx"
+    },
+    {
+      "name": "GhostButton",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A Ghost Button component with predefined ghost appearance",
+      "props": [],
+      "examples": [
+        "<GhostButton\n label=\"Click me\"\n onClick={handleClick}\n className=\"custom-button\"\n/>"
+      ],
+      "sourceFile": "components/New/Button/ButtonWrappers.tsx"
+    },
+    {
+      "name": "LinkButton",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A Link Button component with predefined link appearance",
+      "props": [],
+      "examples": [
+        "<LinkButton\n label=\"Click me\"\n onClick={handleClick}\n className=\"custom-button\"\n/>",
+        "<LinkButton label=\"Read the docs\" href=\"/docs\" />\n<LinkButton label=\"Open dashboard\" href=\"https://example.com\" target=\"_blank\" />"
+      ],
+      "sourceFile": "components/New/Button/ButtonWrappers.tsx"
+    },
+    {
+      "name": "NeutralButton",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A Neutral Button component with predefined neutral variant",
+      "props": [],
+      "examples": [
+        "<NeutralButton\n label=\"Click me\"\n onClick={handleClick}\n className=\"custom-button\"\n/>"
+      ],
+      "sourceFile": "components/New/Button/ButtonWrappers.tsx"
+    },
+    {
+      "name": "OutlinedButton",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "An Outlined Button component with predefined outlined appearance",
+      "props": [],
+      "examples": [
+        "<OutlinedButton\nlabel=\"Click me\"\nonClick={handleClick}\nclassName=\"custom-button\"\n/>"
+      ],
+      "sourceFile": "components/New/Button/ButtonWrappers.tsx"
+    },
+    {
+      "name": "PrimaryButton",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A Primary Button component with predefined primary variant\nDesign system 2.0",
+      "props": [],
+      "examples": [
+        "<PrimaryButton\n label=\"Click me\"\n onClick={handleClick}\n className=\"custom-button\"\n/>"
+      ],
+      "sourceFile": "components/New/Button/ButtonWrappers.tsx"
+    },
+    {
+      "name": "DangerIconButton",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A Danger Icon Button component with predefined danger variant",
+      "props": [],
+      "examples": [
+        "<DangerIconButton\n icon={<Icon />}\n onClick={handleClick}\n className=\"custom-button\"\n/>"
+      ],
+      "sourceFile": "components/New/IconButton/IconButtonWrappers.tsx"
+    },
+    {
+      "name": "GhostIconButton",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A Ghost Icon Button component with predefined ghost appearance",
+      "props": [],
+      "examples": [
+        "<GhostIconButton\n icon={<Icon />}\n onClick={handleClick}\n className=\"custom-button\"\n/>"
+      ],
+      "sourceFile": "components/New/IconButton/IconButtonWrappers.tsx"
+    },
+    {
+      "name": "NeutralIconButton",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A Neutral Icon Button component with predefined neutral variant",
+      "props": [],
+      "examples": [
+        "<NeutralIconButton\n icon={<Icon />}\n onClick={handleClick}\n className=\"custom-button\"\n/>"
+      ],
+      "sourceFile": "components/New/IconButton/IconButtonWrappers.tsx"
+    },
+    {
+      "name": "PrimaryIconButton",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A Primary Icon Button component with predefined primary variant\nDesign system 2.0",
+      "props": [],
+      "examples": [
+        "<PrimaryIconButton\n icon={<Icon />}\n onClick={handleClick}\n className=\"custom-button\"\n/>"
+      ],
+      "sourceFile": "components/New/IconButton/IconButtonWrappers.tsx"
+    },
+    {
+      "name": "StaticIconButton",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A Outlined Icon Button component with predefined outlined appearance",
+      "props": [],
+      "examples": [
+        "<StaticIconButton\n icon={<Icon />}\n onClick={handleClick}\nclassName=\"custom-button\"\n/>"
+      ],
+      "sourceFile": "components/New/IconButton/IconButtonWrappers.tsx"
+    },
+    {
+      "name": "Button",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A Button component with flexible icon and text positioning\naliases: ActionButton|CallToAction\nDesign system 2.0",
+      "props": [
+        {
+          "name": "variant",
+          "type": "ButtonVariant",
+          "required": false,
+          "description": "Defines the visual style of the button"
+        },
+        {
+          "name": "size",
+          "type": "ElementSize",
+          "required": false,
+          "defaultValue": "ElementSize.Standard",
+          "description": "Defines the size of the button"
+        },
+        {
+          "name": "appearance",
+          "type": "ButtonAppearance",
+          "required": false,
+          "defaultValue": "ButtonAppearance.Solid",
+          "description": "Defines the type of the button"
+        },
+        {
+          "name": "textClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes to apply specifically to the button text"
+        },
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": false,
+          "description": "The content of the button. Can be any React node."
+        },
+        {
+          "name": "iconBefore",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Icon or element to display before the button text"
+        },
+        {
+          "name": "iconAfter",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Icon or element to display after the button text"
+        },
+        {
+          "name": "tooltipProps",
+          "type": "TooltipProps",
+          "required": false
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "required": false,
+          "description": "Destination to navigate to. Renders an `<a>` instead of a\n`<button>`, so the control keeps the link role, middle-click, and\n\"open in new tab\". Pair it with `ButtonAppearance.Link` (or `LinkButton`)\nunless a button-shaped link is intended."
+        },
+        {
+          "name": "target",
+          "type": "HTMLAttributeAnchorTarget",
+          "required": false,
+          "description": "Anchor target, only meaningful alongside `href`"
+        },
+        {
+          "name": "rel",
+          "type": "string",
+          "required": false,
+          "description": "Anchor `rel`. Defaults to `noopener noreferrer` when\n`target=\"_blank\"`."
+        }
+      ],
+      "examples": [
+        "<Button\n  label=\"Click me\"\n  onClick={handleClick}\n  iconBefore={<Icon />}\n  className=\"custom-button\"\n/>",
+        "<Button\n  label={<span>Custom <strong>Label</strong></span>}\n  aria-label=\"Custom Label\"\n  onClick={handleClick}\n/>"
+      ],
+      "sourceFile": "components/New/Button/Button.tsx"
+    },
+    {
+      "name": "IconButton",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A Icon Button component with flexible icon and text positioning\naliases: IconicButton|SymbolButton\nDesign system 2.0",
+      "props": [
+        {
+          "name": "variant",
+          "type": "ButtonVariant",
+          "required": false,
+          "description": "Defines the visual style of the button"
+        },
+        {
+          "name": "size",
+          "type": "ElementSize",
+          "required": false,
+          "defaultValue": "ElementSize.Standard",
+          "description": "Defines the size of the button"
+        },
+        {
+          "name": "appearance",
+          "type": "ButtonAppearance",
+          "required": false,
+          "defaultValue": "ButtonAppearance.Solid",
+          "description": "Defines the type of the button"
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Icon display"
+        },
+        {
+          "name": "tooltipProps",
+          "type": "TooltipProps",
+          "required": false
+        }
+      ],
+      "examples": [
+        "<DialIconButton\n  onClick={handleClick}\n  icon={<Icon />}\n  className=\"custom-button\"\n/>",
+        "<IconButton\n  aria-label=\"Custom Label\"\n  onClick={handleClick}\n/>"
+      ],
+      "sourceFile": "components/New/IconButton/IconButton.tsx"
+    },
+    {
+      "name": "FabButton",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A Floating Action Button (FAB) component — circular icon button for primary actions.\naliases: FloatingActionButton|FabButton|CircularButton\nDesign system 2.0",
+      "props": [
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Icon to display inside the button"
+        },
+        {
+          "name": "tooltipProps",
+          "type": "TooltipProps",
+          "required": false,
+          "description": "Optional tooltip configuration"
+        }
+      ],
+      "examples": [
+        "<FabButton\n  icon={<IconArrowNarrowDown size={24} stroke={1.5} />}\n  onClick={handleClick}\n  aria-label=\"Scroll to bottom\"\n/>"
+      ],
+      "sourceFile": "components/FabButton/FabButton.tsx"
+    },
+    {
+      "name": "ButtonDropdown",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A Button dropdown component based on the Dropdown component\naliases: SplitButton|MenuButton\nDesign system 2.0",
+      "props": [
+        {
+          "name": "items",
+          "type": "DropdownItem[]",
+          "required": true,
+          "description": "DropdownItems with actions"
+        }
+      ],
+      "examples": [
+        "<ButtonDropdown\n  title=\"Click me\"\n  variant={ButtonVariant.Neutral}\n  items={[{ key: 'profile', label: 'Profile' }, { key: 'logout', label: 'Logout' }]}\n/>"
+      ],
+      "sourceFile": "components/New/ButtonDropdown/ButtonDropdown.tsx"
+    },
+    {
+      "name": "MarkdownEditor",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "The 2.0 Markdown editor: a formatting toolbar (bold/italic/strikethrough,\nDesign system 2.0\ntext style, lists, quote/link/code, table) plus an edit/live/preview mode\nswitcher and fullscreen, built on top of `@uiw/react-md-editor`.\n\nLazy-loaded component. This component is not exported directly from the UI kit to avoid errors when using with SSR. Use `LazyMarkdownEditor` 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": "theme",
+          "type": "EditorThemes",
+          "required": false,
+          "defaultValue": "EditorThemes.light",
+          "description": "Theme for the editor ('light' or 'dark')"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the container"
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "required": false,
+          "description": "Placeholder text shown when the editor is empty"
+        },
+        {
+          "name": "defaultPreview",
+          "type": "PreviewType",
+          "required": false,
+          "defaultValue": "'edit'",
+          "description": "Initial edit/live/preview mode"
+        }
+      ],
+      "examples": [
+        "<MarkdownEditor value={value} onChange={setValue} height={400} />"
+      ],
+      "sourceFile": "components/New/MarkdownEditor/MarkdownEditor.tsx",
+      "lazy": {
+        "loaderExportName": "LazyMarkdownEditor",
+        "packageImport": "@epam/ai-dial-ui-kit",
+        "ssr": false,
+        "nextDynamicExample": "import dynamic from 'next/dynamic';\nimport { LazyMarkdownEditor } from '@epam/ai-dial-ui-kit';\n\nconst MarkdownEditor = dynamic(\n  async () => (await LazyMarkdownEditor()).MarkdownEditor,\n  { ssr: false },\n);"
+      }
+    },
+    {
+      "name": "InlineSelect",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "An inline select control combining `InlineSelectTrigger` with `Dropdown`.\nDesign system 2.0",
+      "props": [
+        {
+          "name": "items",
+          "type": "DropdownItem[]",
+          "required": true
+        },
+        {
+          "name": "selectedKey",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "defaultSelectedKey",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "onSelect",
+          "type": "(item: DropdownItem) => void",
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "ElementSize",
+          "required": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false
+        },
+        {
+          "name": "placement",
+          "type": "Placement",
+          "required": false,
+          "defaultValue": "'bottom-end'"
+        },
+        {
+          "name": "matchReferenceWidth",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false"
+        },
+        {
+          "name": "listClassName",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false
+        }
+      ],
+      "examples": [
+        "<InlineSelect\n  items={[{ key: 'a', label: 'Option A' }, { key: 'b', label: 'Option B' }]}\n  onSelect={(item) => console.log(item.key)}\n/>"
+      ],
+      "sourceFile": "components/New/InlineSelect/InlineSelect.tsx"
+    },
+    {
+      "name": "InlineSelectTrigger",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "required": true
+        },
+        {
+          "name": "size",
+          "type": "ElementSize",
+          "required": false
+        },
+        {
+          "name": "isOpen",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false"
+        }
+      ],
+      "examples": [],
+      "sourceFile": "components/New/InlineSelect/InlineSelect.tsx"
+    },
+    {
+      "name": "Select",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A versatile select supporting single and multiple selections.\naliases: OptionPicker|ChoiceSelector\nDesign system 2.0\n\nThe field is an , so it carries the 2.0 field styling, sizes,\nlabel, caption and error states, and it exposes the control as a `combobox`\nwhose popup is the option list.\n\nSingle mode:\n- The field shows the selected option's leading icon + label.\n- In the list, the selected option is indicated by a LEFT border, a tinted background\n  and a trailing check icon.\n\nMultiple mode uses checkboxes (including Select All with indeterminate state) and\nrenders the selection as removable tags inside the field.\n\nThe field itself is never typeable: `searchable` puts a search field in the overlay\nheader that filters the options.",
+      "props": [
+        {
+          "name": "options",
+          "type": "SelectOption[]",
+          "required": true,
+          "description": "Array of options to select from."
+        },
+        {
+          "name": "multiple",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether multiple selections are allowed."
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "description": "The id of the field, linked to the label."
+        },
+        {
+          "name": "size",
+          "type": "ElementSize",
+          "required": false,
+          "defaultValue": "ElementSize.Standard",
+          "description": "Field height: standard is 40px, small is 24px."
+        },
+        {
+          "name": "value",
+          "type": "string | string[]",
+          "required": false,
+          "description": "Controlled selected value(s)."
+        },
+        {
+          "name": "customSelectedValue",
+          "type": "string",
+          "required": false,
+          "description": "Custom string to render as the selected value in single mode."
+        },
+        {
+          "name": "prefix",
+          "type": "string",
+          "required": false,
+          "description": "Prefix for selected value(s)."
+        },
+        {
+          "name": "defaultValue",
+          "type": "string | string[]",
+          "required": false,
+          "description": "Uncontrolled initial selected value(s)."
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Select...'",
+          "description": "Placeholder text when no selection is made."
+        },
+        {
+          "name": "labelProps",
+          "type": "LabelProps",
+          "required": false,
+          "description": "Props of the  rendered above the field."
+        },
+        {
+          "name": "error",
+          "type": "string",
+          "required": false,
+          "description": "Error message rendered below the field (does not by itself apply error styling, pass `invalid` too)."
+        },
+        {
+          "name": "caption",
+          "type": "string",
+          "required": false,
+          "description": "Helper text rendered below the field when there is no `error`."
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible name for the field; use it when there is no visible label."
+        },
+        {
+          "name": "searchable",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Show a search field in the overlay header."
+        },
+        {
+          "name": "searchSize",
+          "type": "ElementSize",
+          "required": false,
+          "defaultValue": "ElementSize.Standard",
+          "description": "Size of the overlay search input when `searchable` is enabled."
+        },
+        {
+          "name": "searchPlaceholder",
+          "type": "string",
+          "required": false,
+          "description": "Placeholder for the overlay search input."
+        },
+        {
+          "name": "selectAll",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Show a \"Select All\" checkbox in multiple mode."
+        },
+        {
+          "name": "selectAllLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Select all'",
+          "description": "Label for the \"Select All\" checkbox."
+        },
+        {
+          "name": "emptyStateTitle",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'No options available'",
+          "description": "Title text when there are no options."
+        },
+        {
+          "name": "emptyStateDescription",
+          "type": "string",
+          "required": false,
+          "description": "Description text when there are no options."
+        },
+        {
+          "name": "emptyStateIcon",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Icon to display when there are no options."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Disable the control."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the outer container."
+        },
+        {
+          "name": "fieldClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the field itself."
+        },
+        {
+          "name": "listClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the list dropdown."
+        },
+        {
+          "name": "closable",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Show a close button in the dropdown header."
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the select is in an invalid state, affecting styling."
+        },
+        {
+          "name": "header",
+          "type": "ReactNode | (() => ReactNode)",
+          "required": false,
+          "description": "Custom node/function rendered above the options."
+        },
+        {
+          "name": "footer",
+          "type": "ReactNode | (() => ReactNode)",
+          "required": false,
+          "description": "Custom node/function rendered below the options."
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "description": "Controlled open state of the dropdown. When provided, makes the dropdown controlled."
+        },
+        {
+          "name": "onOpenChange",
+          "type": "(open: boolean) => void",
+          "required": false,
+          "description": "Called when the dropdown open state changes."
+        },
+        {
+          "name": "onSearchQueryChange",
+          "type": "(query: string) => void",
+          "required": false,
+          "description": "Called when the overlay search query changes, including the reset to `''` on close. Use it to fetch options for the query."
+        },
+        {
+          "name": "dismissRef",
+          "type": "Ref<unknown>",
+          "required": false,
+          "description": "Ref object to expose a `dismiss` method to programmatically close the select."
+        },
+        {
+          "name": "onClose",
+          "type": "(e: MouseEvent<HTMLButtonElement>) => void",
+          "required": false,
+          "description": "Called when the dropdown close button is clicked."
+        },
+        {
+          "name": "onChange",
+          "type": "(next: string | string[]) => void",
+          "required": false,
+          "description": "Called when the selection changes."
+        },
+        {
+          "name": "onFooterClick",
+          "type": "(e: MouseEvent<HTMLDivElement>) => void",
+          "required": false,
+          "description": "Called when the footer element is clicked. When provided, automatically closes the dropdown."
+        },
+        {
+          "name": "customMultiSelectTagsRenderer",
+          "type": "(\n    options: SelectOption[],\n    selectedValues: string[],\n    handleRemoveTag: (\n      event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>,\n      val: string,\n    ) => void,\n  ) => ReactNode",
+          "required": false,
+          "description": "Renders the selected tags of a multi-select in place of the default ones."
+        }
+      ],
+      "examples": [
+        "<Select options={[{ value: 'option-1', label: 'Option 1' }]} />\n<Select searchable options={[{ value: 'a', label: 'Alpha' }, { value: 'b', label: 'Beta' }]} />\n<Select multiple selectAll options={[{ value: '1', label: 'One' }, { value: '2', label: 'Two' }]} />\n<Select labelProps={{ label: 'Operator' }} caption=\"Pick a comparison\" options={options} />"
+      ],
+      "sourceFile": "components/New/Select/Select.tsx"
+    },
+    {
+      "name": "MultiSelectTags",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "The selected values of a multi-select, rendered as removable tags inside the\nDesign system 2.0\nfield.",
+      "props": [
+        {
+          "name": "options",
+          "type": "SelectOption[]",
+          "required": true,
+          "description": "All available options, used to resolve labels and icons"
+        },
+        {
+          "name": "selectedValues",
+          "type": "string[]",
+          "required": true,
+          "description": "Values currently selected"
+        },
+        {
+          "name": "handleRemoveTag",
+          "type": "(\n    event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>,\n    val: string,\n  ) => void",
+          "required": false,
+          "description": "Called with the value whose tag was removed; when omitted the tags are not removable"
+        }
+      ],
+      "examples": [],
+      "sourceFile": "components/New/Select/MultiSelectTags.tsx"
+    },
+    {
+      "name": "InfoButton",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "An Info button component with a customizable icon and accessible label.\nDesign system 2.0",
+      "props": [
+        {
+          "name": "caption",
+          "type": "string",
+          "required": false,
+          "description": "Text shown in the tooltip, and the fallback accessible name"
+        },
+        {
+          "name": "onClick",
+          "type": "() => void",
+          "required": false,
+          "description": "Click handler for the info button"
+        },
+        {
+          "name": "'aria-label'",
+          "type": "string",
+          "required": false
+        }
+      ],
+      "examples": [
+        "<InfoButton\n  caption=\"Info\"\n/>"
+      ],
+      "sourceFile": "components/New/InfoButton/InfoButton.tsx"
+    },
+    {
+      "name": "Label",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A label component\naliases: FormLabel|RequiredIndicator\nDesign system 2.0",
+      "props": [
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": false,
+          "description": "The label text to display for the label"
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the field is required. Renders a visual `*`\nplus visually hidden text so the requirement is announced too."
+        },
+        {
+          "name": "caption",
+          "type": "string",
+          "required": false,
+          "description": "Explanatory text, exposed through an info button next to the label"
+        },
+        {
+          "name": "size",
+          "type": "ElementSize",
+          "required": false,
+          "defaultValue": "ElementSize.Small",
+          "description": "The size of the label, which can be 'small', 'medium', or 'large'."
+        }
+      ],
+      "examples": [
+        "// Basic  label\n<Label htmlFor=\"email-input\" label=\"Email Address\" />"
+      ],
+      "sourceFile": "components/New/Label/Label.tsx"
+    },
+    {
+      "name": "Textarea",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A flexible textarea component with validation support and consistent styling\naliases: MultilineInput|TextBox\nDesign system 2.0",
+      "props": [
+        {
+          "name": "labelProps",
+          "type": "LabelProps",
+          "required": false,
+          "description": "Props for the field label, including `label` (label text) and `required` (whether to show required indicator)"
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the textarea has validation errors (applies error styling)"
+        },
+        {
+          "name": "containerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes to apply to the container div"
+        },
+        {
+          "name": "resize",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the textarea has possibility to resize"
+        },
+        {
+          "name": "error",
+          "type": "string",
+          "required": false,
+          "description": "Error message to display below the textarea (also adds error styling)"
+        },
+        {
+          "name": "caption",
+          "type": "string",
+          "required": false,
+          "description": "Optional caption text to display below the textarea"
+        },
+        {
+          "name": "onChange",
+          "type": "(value: string) => void",
+          "required": false,
+          "description": "Callback function called when the textarea value changes"
+        }
+      ],
+      "examples": [
+        "<DialTextarea\n  id=\"description\"\n  placeholder=\"Enter description...\"\n  value={value}\n  onChange={(value) => setValue(value)}\n/>"
+      ],
+      "sourceFile": "components/New/Textarea/Textarea.tsx"
+    },
+    {
+      "name": "Input",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A flexible input component with icon support and various styling options\naliases: TextField|FormInput\nDesign system 2.0",
+      "props": [
+        {
+          "name": "labelProps",
+          "type": "LabelProps",
+          "required": false
+        },
+        {
+          "name": "inputButtonProps",
+          "type": "InputButtonProps",
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "ElementSize",
+          "required": false,
+          "defaultValue": "ElementSize.Standard",
+          "description": "The size of the input, which can be 'small', 'standard', or 'large'."
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the input has validation errors (applies error styling)"
+        },
+        {
+          "name": "error",
+          "type": "string",
+          "required": false,
+          "description": "Error message to display below the input (also adds error styling)"
+        },
+        {
+          "name": "caption",
+          "type": "string",
+          "required": false,
+          "description": "Helper text to display below the input"
+        },
+        {
+          "name": "tooltipText",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "iconBefore",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Icon or element to display before the input"
+        },
+        {
+          "name": "iconAfter",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Icon or element to display after the input"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the field before the input, for values a plain `<input>` cannot hold (e.g. multi-select tags)"
+        },
+        {
+          "name": "prefix",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "postfix",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "inputRef",
+          "type": "Ref<HTMLInputElement>",
+          "required": false,
+          "description": "Ref to access the underlying input element"
+        },
+        {
+          "name": "wrapperRef",
+          "type": "Ref<HTMLDivElement>",
+          "required": false
+        },
+        {
+          "name": "onChange",
+          "type": "(value?: string) => void",
+          "required": false,
+          "description": "Callback function called when the input value changes"
+        },
+        {
+          "name": "containerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes to apply to the container div"
+        },
+        {
+          "name": "wrapperClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes to apply to the input wrapper div"
+        }
+      ],
+      "examples": [
+        "<Input\n  id=\"search\"\n  placeholder=\"Search...\"\n  iconBefore={<SearchIcon />}\n  iconAfter={<ClearIcon />}\n  onChange={(value) => console.log(value)}\n/>"
+      ],
+      "sourceFile": "components/New/Input/Input.tsx"
+    },
+    {
+      "name": "PasswordInput",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A password field with a reveal toggle, built on .\naliases: SecureInput|ToggleablePassword\nDesign system 2.0\n\nThe toggle is a real `<button>`, so it is reachable by keyboard and announces\nboth its purpose and its state. `type` and `iconAfter` are owned by this\ncomponent; every other  prop is passed through.",
+      "props": [
+        {
+          "name": "showPasswordLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Show password'",
+          "description": "Accessible name of the toggle while the value is masked"
+        },
+        {
+          "name": "hidePasswordLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Hide password'",
+          "description": "Accessible name of the toggle while the value is visible"
+        }
+      ],
+      "examples": [
+        "<PasswordInput\n  id=\"password\"\n  labelProps={{ label: 'Password', required: true }}\n  value={password}\n  onChange={setPassword}\n/>"
+      ],
+      "sourceFile": "components/New/PasswordInput/PasswordInput.tsx"
+    },
+    {
+      "name": "NumberInput",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A number field, built on .\naliases: NumericField|NumberField\nDesign system 2.0\n\n`type` is owned by this component; every other  prop is passed\nthrough, so it shares the 2.0 field styling, sizes, label, caption and error\nstates.",
+      "props": [
+        {
+          "name": "integer",
+          "type": "boolean",
+          "required": false,
+          "description": "When true, restricts input to integer values only — blocks decimal points, minus, plus, and scientific notation (e/E)"
+        },
+        {
+          "name": "onChange",
+          "type": "(value?: number | string) => void",
+          "required": false,
+          "description": "Callback function called when the input value changes.\n       Returns either a number (for most values) or a string (for decimal values < 1 with leading zeros)"
+        }
+      ],
+      "examples": [
+        "<NumberInput\n  id=\"age\"\n  placeholder=\"Enter your age\"\n  value={25}\n  onChange={(value) => setAge(value)}\n/>"
+      ],
+      "sourceFile": "components/New/NumberInput/NumberInput.tsx"
+    },
+    {
+      "name": "Popup",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "An accessible modal dialog using Floating UI.\naliases: Modal|Dialog\nDesign system 2.0\n\nRenders in a portal with a scrim overlay, focus management, a header with the\ntitle and close control, a scrollable body and an optional footer. Sections\nare separated by spacing rather than rules; add your own through\n`headerClassName` or the footer node if a surface needs them.\n\nA string `header` names the dialog automatically. A `header` node cannot —\npass `ariaLabel` in that case, or the dialog opens unnamed.",
+      "props": [
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Controls visibility of the popup"
+        },
+        {
+          "name": "header",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional title rendered in the header"
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible name for the dialog; needed when `header` is not a string"
+        },
+        {
+          "name": "portalId",
+          "type": "string",
+          "required": false,
+          "description": "Optional portal container id"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to the popup container"
+        },
+        {
+          "name": "overlayClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to the overlay"
+        },
+        {
+          "name": "titleClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to the title element"
+        },
+        {
+          "name": "headerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to the popup header container"
+        },
+        {
+          "name": "bodyClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to the scrollable body wrapper around `children`"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Body content"
+        },
+        {
+          "name": "footer",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Footer area for actions"
+        },
+        {
+          "name": "onClose",
+          "type": "(e?: MouseEvent<HTMLButtonElement> | null) => void",
+          "required": false,
+          "description": "Callback fired when the popup requests to close"
+        },
+        {
+          "name": "size",
+          "type": "PopupSize",
+          "required": false,
+          "defaultValue": "PopupSize.Md",
+          "description": "Sets the max-width of the popup"
+        },
+        {
+          "name": "hideClose",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the close button is hidden in the header"
+        },
+        {
+          "name": "closeAriaLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Close dialog'",
+          "description": "Accessible name of the close button"
+        },
+        {
+          "name": "closeOnOutsideClick",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether the popup closes when clicking outside"
+        },
+        {
+          "name": "preventKeyboardOnOpen",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "When true, initial focus goes to a non-input guard to avoid opening the virtual keyboard on mobile. Redundant since the default focuses the dialog container, which never raises the keyboard; kept for compatibility"
+        }
+      ],
+      "examples": [
+        "<Popup\n  open\n  header=\"Title\"\n  size={PopupSize.Md}\n  footer={\n    <div className=\"flex justify-end gap-2 px-6 py-4\">\n      <NeutralButton label=\"Cancel\" />\n      <PrimaryButton label=\"Confirm\" />\n    </div>\n  }\n  onClose={() => setOpen(false)}\n>\n  <div className=\"px-6 py-4\">Dialog content goes here…</div>\n</Popup>"
+      ],
+      "sourceFile": "components/New/Popup/Popup.tsx"
+    },
+    {
+      "name": "CloseButton",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A close button: a ghost  carrying an X icon.\naliases: DismissButton|ExitButton\nDesign system 2.0\n\nSized through  like every other 2.0 control. It defaults to\nthe small 24px box that headers and toasts want; pass `ElementSize.Standard`\nwhere the control stands alone, since only that variant carries the 44×44\npointer target. Name it after the thing it closes (\"Close dialog\", \"Close\nnotification\") — the default `\"Close\"` only keeps the control from being unnamed.",
+      "props": [
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Close'",
+          "description": "Accessible name of the button"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes to apply to the button"
+        },
+        {
+          "name": "size",
+          "type": "ElementSize",
+          "required": false,
+          "defaultValue": "ElementSize.Small",
+          "description": "Button size: small is 24px, standard is 40px"
+        },
+        {
+          "name": "onClose",
+          "type": "(e: MouseEvent<HTMLButtonElement>) => void",
+          "required": true,
+          "description": "Click event handler for the close button"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the button is disabled"
+        }
+      ],
+      "examples": [
+        "<CloseButton ariaLabel=\"Close notification\" onClose={handleClose} />\n<CloseButton ariaLabel=\"Close dialog\" size={ElementSize.Standard} onClose={handleClose} />"
+      ],
+      "sourceFile": "components/New/CloseButton/CloseButton.tsx"
+    },
+    {
+      "name": "ConfirmationPopup",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A confirmation dialog built from  and the 2.0 .\naliases: ConfirmDialog|WarningDialog\nDesign system 2.0\n\nProvides an accessible modal with a title, optional description or custom content,\nand a footer with Cancel / Confirm actions.",
+      "props": [
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Secondary text (ignored when `children` set)"
+        },
+        {
+          "name": "descriptionClassName",
+          "type": "string",
+          "required": false,
+          "description": "Custom CSS class for the description"
+        },
+        {
+          "name": "confirmLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "defaultConfirmLabel",
+          "description": "Label for the confirm button"
+        },
+        {
+          "name": "cancelLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "defaultCancelLabel",
+          "description": "Label for the cancel button"
+        },
+        {
+          "name": "isLoading",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Shows loader placeholder and hides actions"
+        },
+        {
+          "name": "disableConfirmButton",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Disables the confirm button"
+        },
+        {
+          "name": "confirmClassName",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the confirm button"
+        },
+        {
+          "name": "onConfirm",
+          "type": "() => void",
+          "required": true,
+          "description": "Fired on confirm"
+        },
+        {
+          "name": "onCancel",
+          "type": "() => void",
+          "required": false,
+          "description": "Fired on cancel (falls back to `onClose`)"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Custom body content"
+        },
+        {
+          "name": "variant",
+          "type": "ConfirmationPopupVariant",
+          "required": false,
+          "defaultValue": "ConfirmationPopupVariant.Info",
+          "description": "Visual variant for the popup"
+        }
+      ],
+      "examples": [
+        "<ConfirmationPopup\n  open\n  header=\"Delete item?\"\n  description=\"This action cannot be undone.\"\n  confirmLabel=\"Delete\"\n  variant={ConfirmationPopupVariant.Danger}\n  onClose={() => setOpen(false)}\n  onConfirm={handleDelete}\n/>"
+      ],
+      "sourceFile": "components/New/ConfirmationPopup/ConfirmationPopup.tsx"
+    },
+    {
+      "name": "Dropdown",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "Renders the given trigger (`children`) and a floating contextual menu overlay.\naliases: ContextMenu|PopupMenu\nDesign system 2.0\n\nSupports click/hover/contextMenu triggers, controlled/uncontrolled open, and an optional\nclose button inside the overlay. Placement is taken directly from Floating UI; when\n`placement` is **undefined** (default), automatic placement is handled by `autoPlacement`.",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Trigger element(s) to anchor and open the menu"
+        },
+        {
+          "name": "items",
+          "type": "DropdownItem[]",
+          "required": false,
+          "description": "Menu items to render"
+        },
+        {
+          "name": "onItemClick",
+          "type": "(info: { key: string; domEvent: MouseEvent }) => void",
+          "required": false,
+          "description": "Global handler fired when any item is clicked"
+        },
+        {
+          "name": "menuHeader",
+          "type": "ReactNode | (() => ReactNode)",
+          "required": false,
+          "description": "Content rendered above the items list"
+        },
+        {
+          "name": "menuFooter",
+          "type": "ReactNode | (() => ReactNode)",
+          "required": false,
+          "description": "Content rendered below the items list"
+        },
+        {
+          "name": "renderOverlay",
+          "type": "() => ReactNode",
+          "required": false,
+          "description": "Render function for fully custom overlay content (ignored when `items` is provided)"
+        },
+        {
+          "name": "trigger",
+          "type": "DropdownTrigger[]",
+          "required": false,
+          "defaultValue": "[DropdownTrigger.Click]",
+          "description": "Interactions that open the menu"
+        },
+        {
+          "name": "placement",
+          "type": "Placement",
+          "required": false,
+          "description": "Floating UI placement string; when omitted, auto placement is used"
+        },
+        {
+          "name": "allowedPlacements",
+          "type": "Placement[]",
+          "required": false,
+          "description": "Restricts the allowed placements"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Disables interaction and prevents opening"
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "description": "Controlled open state (when provided, `defaultOpen` is ignored)"
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Initial open state in uncontrolled mode"
+        },
+        {
+          "name": "onOpenChange",
+          "type": "(open: boolean) => void",
+          "required": false,
+          "description": "Fired whenever the open state changes"
+        },
+        {
+          "name": "closable",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the overlay shows an internal close button"
+        },
+        {
+          "name": "onClose",
+          "type": "(e: MouseEvent<HTMLButtonElement>) => void",
+          "required": false,
+          "description": "Fired when the close button inside the overlay is clicked"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to the trigger wrapper"
+        },
+        {
+          "name": "overlayContentClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to the overlay content"
+        },
+        {
+          "name": "separatorClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to the separators between items"
+        },
+        {
+          "name": "listClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to the floating overlay"
+        },
+        {
+          "name": "outsidePressIgnoreRef",
+          "type": "RefObject<HTMLElement | null>",
+          "required": false,
+          "description": "Ref to an element that should not trigger outside press behavior"
+        },
+        {
+          "name": "outsideClosable",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether clicks outside the overlay should close it"
+        },
+        {
+          "name": "anchorToMouse",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether to anchor the dropdown to the mouse position"
+        },
+        {
+          "name": "matchReferenceWidth",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether to match the reference element's width"
+        },
+        {
+          "name": "maxDropdownHeight",
+          "type": "number | null",
+          "required": false,
+          "description": "Maximum height of the dropdown menu; when omitted, no limit is applied"
+        }
+      ],
+      "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>"
+      ],
+      "sourceFile": "components/New/Dropdown/Dropdown.tsx"
+    },
+    {
+      "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",
+      "props": [
+        {
+          "name": "text",
+          "type": "string",
+          "required": false,
+          "description": "The text to display. If undefined or empty, nothing is rendered"
+        },
+        {
+          "name": "variant",
+          "type": "CaptionType",
+          "required": false,
+          "defaultValue": "CaptionType.Description",
+          "description": "The variant of the caption text, e.g., error or description."
+        }
+      ],
+      "examples": [
+        "<CaptionText text=\"This field is required\" variant={CaptionType.Error} />"
+      ],
+      "sourceFile": "components/New/CaptionText/CaptionText.tsx"
+    },
+    {
+      "name": "ErrorText",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "",
+      "props": [],
+      "examples": [],
+      "sourceFile": "components/New/CaptionText/CaptionText.tsx"
+    },
+    {
+      "name": "Accordion",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A collapsible panel that toggles its content when the header is clicked.\naliases: Collapse|Disclosure|ExpandablePanel\nDesign system 2.0\n\nWorks as a controlled component when `expanded` is provided, otherwise it manages\nits own state from `defaultExpanded`. The header shows a caret that rotates when\nexpanded, a title, and an optional description stacked beneath it.\n\nThe revealed content is a labelled `region`, so assistive tech announces it by the\nheader it belongs to. `nonCollapsible` renders the header as static text instead of\na permanently disabled button, which keeps a decorative panel out of the tab order.",
+      "props": [
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Title rendered in the header."
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional secondary text rendered under the title."
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content revealed when expanded."
+        },
+        {
+          "name": "expanded",
+          "type": "boolean",
+          "required": false,
+          "description": "Controlled expanded state."
+        },
+        {
+          "name": "defaultExpanded",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Initial expanded state when uncontrolled."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Disables toggling."
+        },
+        {
+          "name": "nonCollapsible",
+          "type": "boolean",
+          "required": false,
+          "description": "Renders the panel permanently expanded, with a static header."
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible name for the header; needed when `title` carries no text."
+        },
+        {
+          "name": "onToggle",
+          "type": "(expanded: boolean) => void",
+          "required": false,
+          "description": "Fired when the header is clicked. Receives the next expanded state."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the outer container."
+        },
+        {
+          "name": "headerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the header."
+        },
+        {
+          "name": "contentClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the content region."
+        }
+      ],
+      "examples": [
+        "<Accordion title=\"Advanced settings\" description=\"Optional configuration\">\n  <p>Panel content</p>\n</Accordion>\n\n<Accordion title=\"Always open\" nonCollapsible>\n  <p>Panel content</p>\n</Accordion>"
+      ],
+      "sourceFile": "components/New/Accordion/Accordion.tsx"
+    },
+    {
+      "name": "Switch",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A switch (toggle) control from the 2.0 design system.\naliases: ToggleSwitch|BinaryToggle|Switcher\nDesign system 2.0",
+      "props": [
+        {
+          "name": "labelProps",
+          "type": "LabelProps",
+          "required": false,
+          "description": "Props of the  rendered next to the control"
+        },
+        {
+          "name": "isOn",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "The current value of the switch"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the switch is disabled"
+        },
+        {
+          "name": "onChange",
+          "type": "(value: boolean) => void",
+          "required": false,
+          "description": "Callback fired with the new value when toggled"
+        },
+        {
+          "name": "caption",
+          "type": "string",
+          "required": false,
+          "description": "Caption text rendered below the label, and described by the switch"
+        }
+      ],
+      "examples": [
+        "<Switch\n  id=\"notifications\"\n  labelProps={{ label: 'Active' }}\n  isOn={isActive}\n  onChange={setIsActive}\n/>"
+      ],
+      "sourceFile": "components/New/Switch/Switch.tsx"
+    },
+    {
+      "name": "Tabs",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A horizontal row of tabs, underlining the active one and showing optional count badges.\naliases: TabRow|TabNavigation|TabBar\nDesign system 2.0\n\nFollows the ARIA tabs pattern with automatic activation: only the active tab is\nin the tab order, and the arrow keys move both focus and selection. `Home` and\n`End` jump to the first and last tab, and the arrows wrap around the ends.\nTabs marked `disabled` are greyed out, cannot be clicked, and are skipped by\nkeyboard navigation.\n\nThe component renders the tabs only; the panels stay with the consumer.",
+      "props": [
+        {
+          "name": "tabs",
+          "type": "TabItem[]",
+          "required": true,
+          "description": "Ordered list of tabs to render."
+        },
+        {
+          "name": "activeTabId",
+          "type": "string",
+          "required": true,
+          "description": "ID of the currently selected tab."
+        },
+        {
+          "name": "onTabChange",
+          "type": "(tabId: string) => void",
+          "required": true,
+          "description": "Fired with the tab's `id` when the user selects a tab."
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible name for the tab list."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the tab list container."
+        },
+        {
+          "name": "tabClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to every tab."
+        }
+      ],
+      "examples": [
+        "<Tabs\n  ariaLabel=\"Conversation views\"\n  tabs={[\n    { id: 'all', label: 'All', count: 12 },\n    { id: 'shared', label: 'Shared with me' },\n  ]}\n  activeTabId={activeTabId}\n  onTabChange={setActiveTabId}\n/>"
+      ],
+      "sourceFile": "components/New/Tabs/Tabs.tsx"
+    },
+    {
+      "name": "FileDropzone",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A dashed drop area that takes files by drag-and-drop or through the file picker.\naliases: LoadFileArea|FileUpload|DragDropUpload|UploadArea\nDesign system 2.0\n\nThe area is a label over a visually hidden file input, so the picker opens on\nclick and the control stays operable by keyboard and announced as a file input\nwithout any extra wiring. The border highlights while a drag hovers it.\n\n`accept` is enforced on drops as well as in the picker — the browser only\nfilters the latter — so `onChange` never receives a file the caller excluded.\nRejected files go to `onReject`; all copy stays with the caller, which keeps\nvalidation messages in the consumer's own wording and language.",
+      "props": [
+        {
+          "name": "labelProps",
+          "type": "LabelProps",
+          "required": false,
+          "description": "Props of the  naming the field, rendered above the area."
+        },
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Primary line of copy."
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Secondary line of copy."
+        },
+        {
+          "name": "onChange",
+          "type": "(files: File[]) => void",
+          "required": true,
+          "description": "Fired with the accepted files."
+        },
+        {
+          "name": "onReject",
+          "type": "(files: File[]) => void",
+          "required": false,
+          "description": "Fired with dropped files that `accept` excluded."
+        },
+        {
+          "name": "accept",
+          "type": "string",
+          "required": false,
+          "description": "Comma-separated `accept` tokens."
+        },
+        {
+          "name": "multiple",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether more than one file can be selected."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Disables picking and dropping."
+        },
+        {
+          "name": "errorText",
+          "type": "string",
+          "required": false,
+          "description": "Error message rendered below the area."
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Icon rendered above the copy."
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "description": "`id` of the underlying file input."
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible name; needed when `label` carries no text."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the drop area."
+        }
+      ],
+      "examples": [
+        "<FileDropzone\n  label=\"Drag and drop it or click here to upload\"\n  description=\"File formats .md, .zip and .skill\"\n  accept=\".md,.zip,.skill\"\n  onChange={(files) => upload(files)}\n  onReject={() => setError('Unsupported file format')}\n/>"
+      ],
+      "sourceFile": "components/New/FileDropzone/FileDropzone.tsx"
+    },
+    {
+      "name": "Tag",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A compact label element used for selections, filters, or categories.\naliases: Chip|Pill\nDesign system 2.0\n\nThe label truncates rather than wrapping, and carries a native `title` so the\nfull text stays reachable when it does.\n\nA tag with `onClick` becomes a `role=\"button\"` operable with Enter and Space.\nIts remove control is a real nested `<button>`, so keep the two roles apart in\nthe caller: a clickable tag that is also closable gives a screen reader two\nactions with no way to tell which one it landed on.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "required": true,
+          "description": "Text content displayed inside the tag."
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Icon rendered before the label."
+        },
+        {
+          "name": "size",
+          "type": "ElementSize",
+          "required": false,
+          "defaultValue": "ElementSize.Standard",
+          "description": "Tag height: standard is 24px, small is 20px."
+        },
+        {
+          "name": "selected",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Applies the accent-tinted selected styling."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Dims the tag and suppresses the remove control and click handling."
+        },
+        {
+          "name": "closable",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Renders the remove button. Needs `onRemove` to appear."
+        },
+        {
+          "name": "removeLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible name of the remove button; defaults to `Remove <label>`."
+        },
+        {
+          "name": "onRemove",
+          "type": "(event: MouseEvent<HTMLButtonElement>) => void",
+          "required": false,
+          "description": "Called when the remove button is clicked. The click does not bubble to `onClick`."
+        }
+      ],
+      "examples": [
+        "<Tag label=\"TypeScript\" />\n<Tag label=\"TypeScript\" closable onRemove={() => remove('TypeScript')} />\n<Tag label=\"Drafts\" selected onClick={() => toggle('Drafts')} />"
+      ],
+      "sourceFile": "components/New/Tag/Tag.tsx"
+    },
+    {
+      "name": "TagInput",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A tag input field: type a value and commit it with Enter or comma.\naliases: MultiTag|TagField|ChipInput\nDesign system 2.0\n\nThe field is an , so it carries the 2.0 field styling, sizes,\nlabel, caption and error states, and the tags render as s in its\ncontent slot. The field grows as tags wrap, unless `collapseTagOverflow` keeps\nthem on one line behind a `+N` chip.\n\nWorks controlled (`value` + `onChange`) or uncontrolled (`defaultValue`).\nDuplicate tags are ignored. Backspace on an empty input removes the last tag.",
+      "props": [
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "description": "The id of the text input, linked to the label."
+        },
+        {
+          "name": "value",
+          "type": "string[]",
+          "required": false,
+          "description": "Controlled tag list."
+        },
+        {
+          "name": "defaultValue",
+          "type": "string[]",
+          "required": false,
+          "description": "Initial tag list when uncontrolled."
+        },
+        {
+          "name": "size",
+          "type": "ElementSize",
+          "required": false,
+          "defaultValue": "ElementSize.Standard",
+          "description": "Field height: standard is 40px, small is 24px."
+        },
+        {
+          "name": "labelProps",
+          "type": "LabelProps",
+          "required": false,
+          "description": "Props of the  rendered above the field."
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "required": false,
+          "description": "Placeholder shown while there are no tags."
+        },
+        {
+          "name": "caption",
+          "type": "string",
+          "required": false,
+          "description": "Helper text rendered below the field when there is no `error`."
+        },
+        {
+          "name": "error",
+          "type": "string",
+          "required": false,
+          "description": "Error message rendered below the field (pass `invalid` too for error styling)."
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "required": false,
+          "description": "Applies the field's error styling."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Disables typing and tag removal."
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Shows the tags without allowing new ones or removal."
+        },
+        {
+          "name": "collapseTagOverflow",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Keep the tags on one line, replacing the ones that do not fit with a `+N` chip."
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible name for the text input; use it when there is no visible label."
+        },
+        {
+          "name": "tagListLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Tags'",
+          "description": "Accessible name of the tag list."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the outer container."
+        },
+        {
+          "name": "fieldClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the field itself."
+        },
+        {
+          "name": "tagClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to every tag."
+        },
+        {
+          "name": "onChange",
+          "type": "(tags: string[]) => void",
+          "required": false,
+          "description": "Called with the new list whenever a tag is added or removed."
+        }
+      ],
+      "examples": [
+        "const [tags, setTags] = useState<string[]>(['React']);\n\n<TagInput\n  id=\"skills\"\n  labelProps={{ label: 'Skills' }}\n  placeholder=\"Add a skill\"\n  caption=\"Press Enter or comma to add\"\n  value={tags}\n  onChange={setTags}\n/>"
+      ],
+      "sourceFile": "components/New/TagInput/TagInput.tsx"
+    },
+    {
+      "name": "Search",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A search field with a leading magnifier and a clear button, built on .\naliases: SearchField|QueryInput|SearchBox\nDesign system 2.0\n\nFully controlled: it renders exactly the `value` it is given and reports every\nedit through `onChange`, which receives `undefined` for an empty field. The\nclear button appears only while there is something to clear, and returns focus\nto the input once pressed so keyboard users are not dropped to the page body.\n\n`type` and both icon slots are owned by this component; every other\n prop is passed through.",
+      "props": [
+        {
+          "name": "withoutBorder",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Renders the field without its border and background"
+        },
+        {
+          "name": "clearLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Clear search'",
+          "description": "Accessible name of the clear button"
+        }
+      ],
+      "examples": [
+        "<Search\n  id=\"search\"\n  value={query}\n  placeholder=\"Search\"\n  onChange={setQuery}\n/>"
+      ],
+      "sourceFile": "components/New/Search/Search.tsx"
+    },
     {
       "name": "DialCaptionText",
       "category": "Elements",
-      "description": "A component for displaying error messages with consistent styling\naliases: HelperText|ValidationText",
+      "generation": "1.0",
+      "description": "A component for displaying error messages with consistent styling\naliases: HelperText|ValidationText\nDesign system 1.0",
+      "props": [
+        {
+          "name": "text",
+          "type": "string",
+          "required": false,
+          "description": "The text to display. If undefined or empty, nothing is rendered"
+        },
+        {
+          "name": "variant",
+          "type": "CaptionType",
+          "required": false,
+          "defaultValue": "CaptionType.Description",
+          "description": "The variant of the caption text, e.g., error or description."
+        }
+      ],
+      "examples": [
+        "<DialCaptionText text=\"This field is required\" variant={CaptionType.Error} />"
+      ],
+      "sourceFile": "components/CaptionText/CaptionText.tsx",
+      "supersededBy": "CaptionText"
+    },
+    {
+      "name": "DialErrorText",
+      "category": "Elements",
+      "generation": "1.0",
+      "description": "",
+      "props": [],
+      "examples": [],
+      "sourceFile": "components/CaptionText/CaptionText.tsx",
+      "supersededBy": "ErrorText"
+    },
+    {
+      "name": "DialAnalyticsCard",
+      "category": "Analytics",
+      "generation": "1.0",
+      "description": "A simple analytics summary card that displays a single metric as a title,\na prominent value, and an optional description.\naliases: MetricCard|StatCard|KpiCard\nDesign system 1.0\n\nTwo visual variants are available via the  enum:\n- `Default` — `bg-layer-3`, large `dial-display2-text` value, supports a description.\n- `Compact` — denser `bg-layer-2` card with a `dial-body-semi-text` value and no\n  description (the `description` prop is ignored in this variant).\n\n**Compare mode** — pass `compareValues` to split the value area 50/50 between two\nmetrics, each with its own sub-title. Long sub-titles truncate to a single line and\nshow the full text in a tooltip. Pair with `delta` to show a change badge next\nto the card title, and `deltaUnit` for a suffix such as `\"s\"`.",
+      "props": [
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Short label describing the metric, rendered above the value."
+        },
+        {
+          "name": "value",
+          "type": "ReactNode",
+          "required": false,
+          "description": "The primary metric value. Ignored when `compareValues` is set."
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional supporting text. Ignored when `variant` is `Compact`."
+        },
+        {
+          "name": "variant",
+          "type": "AnalyticsCardVariant",
+          "required": false,
+          "defaultValue": "AnalyticsCardVariant.Default",
+          "description": "Visual style of the card."
+        },
+        {
+          "name": "error",
+          "type": "boolean",
+          "required": false,
+          "description": "Renders an error tag in place of the value."
+        },
+        {
+          "name": "isLoading",
+          "type": "boolean",
+          "required": false,
+          "description": "Renders a loader in place of the value."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the card container."
+        },
+        {
+          "name": "delta",
+          "type": "number",
+          "required": false,
+          "description": "Numeric change shown as a badge next to the title. ≥0 = success, <0 = error."
+        },
+        {
+          "name": "deltaPositive",
+          "type": "boolean",
+          "required": false,
+          "description": "Overrides sign-based badge colour. Use for lower-is-better metrics."
+        },
+        {
+          "name": "deltaUnit",
+          "type": "string",
+          "required": false,
+          "description": "Suffix appended to the formatted delta (e.g. `\"s\"` → `+9s`)."
+        },
+        {
+          "name": "compareValues",
+          "type": "[AnalyticsCardCompareItem, AnalyticsCardCompareItem]",
+          "required": false,
+          "description": "Enables compare mode with two side-by-side metrics."
+        }
+      ],
+      "examples": [
+        "<DialAnalyticsCard\n  title=\"Total requests\"\n  value=\"12,480\"\n  description=\"+12% vs last week\"\n/>",
+        "<DialAnalyticsCard\n  title=\"Response time\"\n  delta={9}\n  deltaUnit=\"s\"\n  deltaPositive={false}\n  compareValues={[\n    { title: 'This week', value: '248ms' },\n    { title: 'Last week', value: '220ms' },\n  ]}\n/>"
+      ],
+      "sourceFile": "components/Analytics/Card/Card.tsx"
+    },
+    {
+      "name": "DialAnalyticsBar",
+      "category": "Analytics",
+      "generation": "1.0",
+      "description": "A compact analytics meter: a horizontal bar whose fill width and color reflect a\nvalue relative to `maxValue`, with an optional title on the left and value on the right.\naliases: MetricBar|Meter|ScoreBar\nDesign system 1.0\n\nThe fill color is resolved from `colorMap` based on the normalized ratio\n(`value / maxValue`), so the bar shifts hue as the value grows. An empty bar\n(value `0`) shows only the `bg-layer-1` track. A missing value (`null`) shows\nan em dash and no progress bar.",
+      "props": [
+        {
+          "name": "value",
+          "type": "number | null",
+          "required": false,
+          "description": "Current value used to size and color the bar. Pass `null` for no data (em dash, no bar). Omit when `error` is set."
+        },
+        {
+          "name": "maxValue",
+          "type": "number",
+          "required": false,
+          "defaultValue": "1",
+          "description": "Upper bound of the scale."
+        },
+        {
+          "name": "error",
+          "type": "boolean",
+          "required": false,
+          "description": "Renders the error state (error-colored bar + error tag)."
+        },
+        {
+          "name": "isLoading",
+          "type": "boolean",
+          "required": false,
+          "description": "Renders the loading state (loader + empty track)."
+        },
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional label rendered above the bar, on the left."
+        },
+        {
+          "name": "valueLabel",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Text rendered above the bar, on the right. Defaults to `value` or `—` when null."
+        },
+        {
+          "name": "colorMap",
+          "type": "AnalyticsBarColorStop[]",
+          "required": false,
+          "defaultValue": "DEFAULT_ANALYTICS_BAR_COLOR_MAP",
+          "description": "Color bands keyed by ratio."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the outer container."
+        },
+        {
+          "name": "titleClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the title label."
+        },
+        {
+          "name": "valueClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the value label."
+        },
+        {
+          "name": "inline",
+          "type": "boolean",
+          "required": false,
+          "description": "Renders the title and bar on a single row (50% / 50%)."
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible label for the bar."
+        }
+      ],
+      "examples": [
+        "<DialAnalyticsBar title=\"Relevance\" value={0.82} valueLabel=\"82%\" />",
+        "<DialAnalyticsBar\n  title=\"Score\"\n  value={640}\n  maxValue={1000}\n  colorMap={customColorMap}\n/>"
+      ],
+      "sourceFile": "components/Analytics/Bar/Bar.tsx"
+    },
+    {
+      "name": "DialAnalyticsErrorTag",
+      "category": "Analytics",
+      "generation": "1.0",
+      "description": "A non-interactive error tag used across analytics components to indicate that a\nDesign system 1.0\nmetric value could not be provided. Renders a  styled with the\nerror palette (`bg-error`, `text-error`, `border-error`).",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Error'",
+          "description": "Text shown inside the tag."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to the tag."
+        }
+      ],
+      "examples": [
+        "<DialAnalyticsErrorTag />"
+      ],
+      "sourceFile": "components/Analytics/ErrorTag/ErrorTag.tsx"
+    },
+    {
+      "name": "DialAnalyticsBarGroup",
+      "category": "Analytics",
+      "generation": "1.0",
+      "description": "A collapsible group of analytics bars built from a key/value map. Wraps\n: the `title` is shown in the header, the number of entries\nis shown as the header description, and each entry renders a \nwith the key as its title and the value as its value.\naliases: MetricBarGroup|BarList|NumericResults\nDesign system 1.0",
+      "props": [
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Title passed to the accordion header."
+        },
+        {
+          "name": "titleTooltip",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Tooltip shown when hovering the accordion header title."
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Description passed to the accordion header. Defaults to the number of entries."
+        },
+        {
+          "name": "data",
+          "type": "Record<string, number | null>",
+          "required": true,
+          "description": "Map of metric name to numeric value (or `null` when missing). Each entry renders one bar."
+        },
+        {
+          "name": "compareData",
+          "type": "Record<string, number | null>",
+          "required": false,
+          "description": "Enables compare mode: union of keys, delta badge (`compareData − data`) when both sides are numeric and the rounded delta is non-zero, em dash (no bar) when a side is missing."
+        },
+        {
+          "name": "compareLabels",
+          "type": "[ReactNode, ReactNode]",
+          "required": false,
+          "description": "Labels for the two bars in compare mode: first for `data`, second for `compareData`."
+        },
+        {
+          "name": "maxValue",
+          "type": "number",
+          "required": false,
+          "description": "Upper bound passed to every bar."
+        },
+        {
+          "name": "colorMap",
+          "type": "AnalyticsBarColorStop[]",
+          "required": false,
+          "description": "Color map passed to every bar."
+        },
+        {
+          "name": "defaultExpanded",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether the accordion is expanded initially."
+        },
+        {
+          "name": "nonCollapsible",
+          "type": "boolean",
+          "required": false,
+          "description": "Renders the group permanently expanded without a toggle or chevron."
+        },
+        {
+          "name": "isLoading",
+          "type": "boolean",
+          "required": false,
+          "description": "Renders a loader in place of the bars while the data is being fetched."
+        },
+        {
+          "name": "onBarClick",
+          "type": "(key: string, value: number | null) => void",
+          "required": false,
+          "description": "Invoked with the entry key and value when a bar (or, in compare mode, the whole entry) is clicked."
+        },
+        {
+          "name": "inline",
+          "type": "boolean",
+          "required": false,
+          "description": "Renders every bar on a single row (50% title, 50% bar + value)."
+        },
+        {
+          "name": "barTitleClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for each bar's title label."
+        },
+        {
+          "name": "barValueClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for each bar's value label."
+        },
+        {
+          "name": "barClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for each bar's outer container."
+        },
+        {
+          "name": "barDescriptions",
+          "type": "Record<string, ReactNode>",
+          "required": false,
+          "description": "Map of bar key to tooltip content. Hovering each bar shows its description."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the accordion container."
+        }
+      ],
+      "examples": [
+        "<DialAnalyticsBarGroup\n  title=\"Relevance\"\n  data={{ accuracy: 0.82, recall: 0.64, precision: 0.91 }}\n/>"
+      ],
+      "sourceFile": "components/Analytics/BarGroup/BarGroup.tsx"
+    },
+    {
+      "name": "DialAnalyticsHistogram",
+      "category": "Analytics",
+      "generation": "1.0",
+      "description": "A histogram that distributes `values` across the bands of a color map and draws a\ncolumn per band. Each column's height is relative to the Y-axis max (an even\nceiling of the dataset size — the \"out of N\" in the tooltip). Empty columns\nare outlined, populated columns are filled with their band color. A left\nY-axis (count) and horizontal grid lines provide scale; interval labels run\nalong the bottom. Hovering a column reveals a tooltip with its share of the\ntotal.\naliases: Distribution|ColumnChart|FrequencyChart\nDesign system 1.0",
       "props": [
         {
-          "name": "text",
+          "name": "title",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Title rendered above the histogram."
+        },
+        {
+          "name": "values",
+          "type": "number[]",
+          "required": true,
+          "description": "Values to distribute across the columns."
+        },
+        {
+          "name": "colorMap",
+          "type": "AnalyticsBarColorStop[]",
+          "required": false,
+          "defaultValue": "DEFAULT_ANALYTICS_BAR_COLOR_MAP",
+          "description": "Color bands defining the columns."
+        },
+        {
+          "name": "valueTitle",
           "type": "string",
           "required": false,
-          "description": "The text to display. If undefined or empty, nothing is rendered"
+          "defaultValue": "'values'",
+          "description": "Noun used in the hover tooltip."
         },
         {
-          "name": "variant",
-          "type": "CaptionType",
+          "name": "showCount",
+          "type": "boolean",
           "required": false,
-          "defaultValue": "CaptionType.Description",
-          "description": "The variant of the caption text, e.g., error or description."
+          "description": "When `true`, renders each column's count inside its bar."
+        },
+        {
+          "name": "isLoading",
+          "type": "boolean",
+          "required": false,
+          "description": "Renders a loader in place of the histogram while the data is being fetched."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the outer container."
+        },
+        {
+          "name": "compareValues",
+          "type": "number[]",
+          "required": false,
+          "description": "Second set of values; enables compare mode (primary striped, compare solid)."
+        },
+        {
+          "name": "valueSetLabel",
+          "type": "string",
+          "required": false,
+          "description": "Label for the primary values set (compare mode tooltip)."
+        },
+        {
+          "name": "compareValueSetLabel",
+          "type": "string",
+          "required": false,
+          "description": "Label for the compare values set (compare mode tooltip)."
         }
       ],
       "examples": [
-        "<DialCaptionText text=\"This field is required\" variant={CaptionType.Error} />"
+        "<DialAnalyticsHistogram\n  title=\"Score distribution\"\n  values={[0.1, 0.15, 0.4, 0.42, 0.43, 0.9, 1]}\n  valueTitle=\"responses\"\n/>"
       ],
-      "sourceFile": "components/CaptionText/CaptionText.tsx"
-    },
-    {
-      "name": "DialErrorText",
-      "category": "Elements",
-      "description": "",
-      "props": [],
-      "examples": [],
-      "sourceFile": "components/CaptionText/CaptionText.tsx"
+      "sourceFile": "components/Analytics/Histogram/Histogram.tsx"
     },
     {
       "name": "DialLabel",
       "category": "Elements",
-      "description": "A label component\naliases: FormLabel|RequiredIndicator",
+      "generation": "1.0",
+      "description": "A label component\naliases: FormLabel|RequiredIndicator\nDesign system 1.0",
       "props": [
         {
           "name": "label",
@@ -82,12 +2900,14 @@
       "examples": [
         "// Basic  label\n<DialLabel htmlFor=\"email-input\" label=\"Email Address\" />"
       ],
-      "sourceFile": "components/Label/Label.tsx"
+      "sourceFile": "components/Label/Label.tsx",
+      "supersededBy": "Label"
     },
     {
       "name": "DialAccordion",
       "category": "Layout",
-      "description": "A collapsible panel that toggles its content when the header is clicked.\naliases: Collapse|Disclosure|ExpandablePanel\n\nWorks as a controlled component when `expanded` is provided, otherwise it manages\nits own state from `defaultExpanded`. The header shows a chevron that rotates when\nexpanded, a title, and an optional description.",
+      "generation": "1.0",
+      "description": "A collapsible panel that toggles its content when the header is clicked.\naliases: Collapse|Disclosure|ExpandablePanel\nDesign system 1.0\n\nWorks as a controlled component when `expanded` is provided, otherwise it manages\nits own state from `defaultExpanded`. The header shows a chevron that rotates when\nexpanded, a title, and an optional description.",
       "props": [
         {
           "name": "title",
@@ -160,12 +2980,14 @@
       "examples": [
         "<DialAccordion title=\"Advanced settings\" description=\"Optional configuration\">\n  <p>Panel content</p>\n</DialAccordion>"
       ],
-      "sourceFile": "components/Accordion/Accordion.tsx"
+      "sourceFile": "components/Accordion/Accordion.tsx",
+      "supersededBy": "Accordion"
     },
     {
       "name": "DialIcon",
       "category": "Data Display",
-      "description": "A wrapper component for rendering icons with consistent styling\naliases: IconRenderer|SVGWrapper",
+      "generation": "1.0",
+      "description": "A wrapper component for rendering icons with consistent styling\naliases: IconRenderer|SVGWrapper\nDesign system 1.0",
       "props": [
         {
           "name": "icon",
@@ -188,7 +3010,8 @@
     {
       "name": "DialNotification",
       "category": "Elements",
-      "description": "A contextual feedback component for displaying important messages.\naliases: Notification|StatusBanner\n\nRenders a colored container with an icon, message text, and an optional\nclose button.",
+      "generation": "1.0",
+      "description": "A contextual feedback component for displaying important messages.\naliases: Notification|StatusBanner\nDesign system 1.0\n\nRenders a colored container with an icon, message text, and an optional\nclose button.",
       "props": [
         {
           "name": "variant",
@@ -247,12 +3070,14 @@
       "examples": [
         "<DialNotification\n  variant={NotificationVariant.Info}\n  message=\"This is an info alert.\"\n/>\n\n<DialNotification\n  variant={NotificationVariant.Success}\n  title=\"Saved\"\n  message=\"Changes saved successfully.\"\n/>\n\n<DialNotification\n  variant={NotificationVariant.Error}\n  closable\n  message=\"Something went wrong.\"\n  onClose={(e) => console.log('closed', e)}\n/>\n\n<DialNotification\n  variant={NotificationVariant.Loading}\n  title=\"Processing\"\n  message=\"Please wait...\"\n/>"
       ],
-      "sourceFile": "components/Notification/Notification.tsx"
+      "sourceFile": "components/Notification/Notification.tsx",
+      "supersededBy": "Notification"
     },
     {
       "name": "DialLoader",
       "category": "Feedback",
-      "description": "A simple loading spinner component.\naliases: LoadingSpinner|ProgressSpinner\n\nRenders a spinning SVG with optional full-width container.",
+      "generation": "1.0",
+      "description": "A simple loading spinner component.\naliases: LoadingSpinner|ProgressSpinner\nDesign system 1.0\n\nRenders a spinning SVG with optional full-width container.",
       "props": [
         {
           "name": "size",
@@ -293,79 +3118,11 @@
       ],
       "sourceFile": "components/Loader/Loader.tsx"
     },
-    {
-      "name": "DialSpinner",
-      "category": "Status",
-      "description": "",
-      "props": [
-        {
-          "name": "size",
-          "type": "number",
-          "required": false,
-          "defaultValue": "40"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false
-        },
-        {
-          "name": "fullWidth",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false"
-        },
-        {
-          "name": "ariaLabel",
-          "type": "string",
-          "required": false,
-          "defaultValue": "'Loading'"
-        }
-      ],
-      "examples": [],
-      "sourceFile": "components/Spinner/Spinner.tsx"
-    },
-    {
-      "name": "DialProgressBar",
-      "category": "Status",
-      "description": "",
-      "props": [
-        {
-          "name": "value",
-          "type": "number",
-          "required": true
-        },
-        {
-          "name": "max",
-          "type": "number",
-          "required": false,
-          "defaultValue": "100"
-        },
-        {
-          "name": "size",
-          "type": "DialProgressBarSize",
-          "required": false,
-          "defaultValue": "DialProgressBarSize.Medium"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false
-        },
-        {
-          "name": "ariaLabel",
-          "type": "string",
-          "required": false,
-          "defaultValue": "'Progress'"
-        }
-      ],
-      "examples": [],
-      "sourceFile": "components/ProgressBar/ProgressBar.tsx"
-    },
     {
       "name": "DialPagination",
       "category": "Navigation",
-      "description": "",
+      "generation": "1.0",
+      "description": "Design system 1.0",
       "props": [
         {
           "name": "page",
@@ -394,7 +3151,8 @@
     {
       "name": "DialCheckbox",
       "category": "Form",
-      "description": "A Checkbox component with styling options\naliases: ToggleCheckbox|MultiSelectOption",
+      "generation": "1.0",
+      "description": "A Checkbox component with styling options\naliases: ToggleCheckbox|MultiSelectOption\nDesign system 1.0",
       "props": [
         {
           "name": "id",
@@ -447,7 +3205,8 @@
     {
       "name": "DialSteps",
       "category": "Navigation",
-      "description": "Props for the DialSteps component, which renders a multi-step navigation UI.\naliases: StepWizard|ProgressSteps",
+      "generation": "1.0",
+      "description": "Props for the DialSteps component, which renders a multi-step navigation UI.\naliases: StepWizard|ProgressSteps\nDesign system 1.0",
       "props": [
         {
           "name": "steps",
@@ -476,7 +3235,8 @@
     {
       "name": "DialRadioButton",
       "category": "Free",
-      "description": "A stylized, accessible radio input with optional description.\naliases: ChoiceOption|RadioInput\n\nRenders a native `<input type=\"radio\" />` paired with a label. When `checked`\nand `description` are provided, a supporting text block appears under the control.",
+      "generation": "1.0",
+      "description": "A stylized, accessible radio input with optional description.\naliases: ChoiceOption|RadioInput\nDesign system 1.0\n\nRenders a native `<input type=\"radio\" />` paired with a label. When `checked`\nand `description` are provided, a supporting text block appears under the control.",
       "props": [
         {
           "name": "name",
@@ -573,7 +3333,8 @@
     {
       "name": "DialRadioGroup",
       "category": "Form",
-      "description": "Groups multiple `DialRadio` options and renders custom content for the active option.\naliases: SelectionGroup|OptionGroup\n\nUses `DialField` as the field label and a container with `role=\"radiogroup\"`.\nContent provided in `radioButtons[].content` is shown under the currently active radio.",
+      "generation": "1.0",
+      "description": "Groups multiple `DialRadio` options and renders custom content for the active option.\naliases: SelectionGroup|OptionGroup\nDesign system 1.0\n\nUses `DialField` as the field label and a container with `role=\"radiogroup\"`.\nContent provided in `radioButtons[].content` is shown under the currently active radio.",
       "props": [
         {
           "name": "fieldTitle",
@@ -692,7 +3453,8 @@
     {
       "name": "DialSlider",
       "category": "Form",
-      "description": "A range slider with a custom thumb showing the current value and optional labels.\naliases: RangeInput|TemperatureSlider",
+      "generation": "1.0",
+      "description": "A range slider with a custom thumb showing the current value and optional labels.\naliases: RangeInput|TemperatureSlider\nDesign system 1.0",
       "props": [
         {
           "name": "value",
@@ -785,7 +3547,8 @@
     {
       "name": "DialNoDataContent",
       "category": "Feedback",
-      "description": "A component for displaying a message and icon when there is no data to show.\naliases: EmptyState|NoResults",
+      "generation": "1.0",
+      "description": "A component for displaying a message and icon when there is no data to show.\naliases: EmptyState|NoResults\nDesign system 1.0",
       "props": [
         {
           "name": "icon",
@@ -832,7 +3595,8 @@
     {
       "name": "DialCollapsibleSidebar",
       "category": "Navigation",
-      "description": "A collapsible horizontal bar component that allows toggling between an expanded and collapsed state.\naliases: ToggleSidebar|CollapsiblePanel\n\nIt supports customizable width, title, icons, additional buttons, and flexible styling options.",
+      "generation": "1.0",
+      "description": "A collapsible horizontal bar component that allows toggling between an expanded and collapsed state.\naliases: ToggleSidebar|CollapsiblePanel\nDesign system 1.0\n\nIt supports customizable width, title, icons, additional buttons, and flexible styling options.",
       "props": [
         {
           "name": "children",
@@ -906,7 +3670,8 @@
     {
       "name": "DialLabelledText",
       "category": "Data Display",
-      "description": "A label component for form fields with optional tooltip, content, and custom elements.\naliases: LabelValue|DisplayText",
+      "generation": "1.0",
+      "description": "A label component for form fields with optional tooltip, content, and custom elements.\naliases: LabelValue|DisplayText\nDesign system 1.0",
       "props": [
         {
           "name": "label",
@@ -953,7 +3718,8 @@
     {
       "name": "DialTag",
       "category": "Tag",
-      "description": "A compact label element used for selections, filters, or categories.",
+      "generation": "1.0",
+      "description": "A compact label element used for selections, filters, or categories.\nDesign system 1.0",
       "props": [
         {
           "name": "label",
@@ -992,12 +3758,14 @@
         }
       ],
       "examples": [],
-      "sourceFile": "components/Tag/Tag.tsx"
+      "sourceFile": "components/Tag/Tag.tsx",
+      "supersededBy": "Tag"
     },
     {
       "name": "DialEllipsisTooltip",
       "category": "Overlay",
-      "description": "Single-line text with CSS ellipsis that shows a tooltip **only when actually truncated**.\naliases: TruncatedText|TruncationTooltip\n\nIf the text fits, tooltip content is empty and the popup stays hidden.\n\nImportant: width must be finite for truncation.\nConsumers can override via `className`.\n\na11y: when truncated, the full text is exposed via `aria-label` on the reference node.",
+      "generation": "1.0",
+      "description": "Single-line text with CSS ellipsis that shows a tooltip **only when actually truncated**.\naliases: TruncatedText|TruncationTooltip\nDesign system 1.0\n\nIf the text fits, tooltip content is empty and the popup stays hidden.\n\nImportant: width must be finite for truncation.\nConsumers can override via `className`.\n\na11y: when truncated, the full text is exposed via `aria-label` on the reference node.",
       "props": [
         {
           "name": "text",
@@ -1044,7 +3812,8 @@
     {
       "name": "DialDraggableItem",
       "category": "Components",
-      "description": "A lightweight wrapper that makes its children sortable via drag-and-drop.\naliases: SortableItem|DragHandle\n\nRenders a row with a grab handle (left) and the provided content (right).\nIntegrates with `react-dnd` using a simple \"column\" drag type and delegates\nreordering logic to the provided `findItem` and `moveItem` callbacks.",
+      "generation": "1.0",
+      "description": "A lightweight wrapper that makes its children sortable via drag-and-drop.\naliases: SortableItem|DragHandle\nDesign system 1.0\n\nRenders a row with a grab handle (left) and the provided content (right).\nIntegrates with `react-dnd` using a simple \"column\" drag type and delegates\nreordering logic to the provided `findItem` and `moveItem` callbacks.",
       "props": [
         {
           "name": "id",
@@ -1092,7 +3861,8 @@
     {
       "name": "DialFileIcon",
       "category": "FileManager/components",
-      "description": "Renders a file-type icon based on a file extension.\naliases: ExtensionIcon|TypeIcon\n\nUses DialIcon to provide consistent icon wrapper styling.",
+      "generation": "1.0",
+      "description": "Renders a file-type icon based on a file extension.\naliases: ExtensionIcon|TypeIcon\nDesign system 1.0\n\nUses DialIcon to provide consistent icon wrapper styling.",
       "props": [
         {
           "name": "extension",
@@ -1148,7 +3918,8 @@
     {
       "name": "DialFormItem",
       "category": "Form",
-      "description": "A layout wrapper for form controls with label, helper text and error message.\naliases: FieldWrapper|FormControl\n\nUses `DialLabel` for the label and `DialErrorText` for consistent error styling.\nWires accessibility with:\n- `role=\"group\"`\n- `aria-labelledby` (when label is present)\n- `aria-describedby` (description and/or error ids)",
+      "generation": "1.0",
+      "description": "A layout wrapper for form controls with label, helper text and error message.\naliases: FieldWrapper|FormControl\nDesign system 1.0\n\nUses `DialLabel` for the label and `DialErrorText` for consistent error styling.\nWires accessibility with:\n- `role=\"group\"`\n- `aria-labelledby` (when label is present)\n- `aria-describedby` (description and/or error ids)",
       "props": [
         {
           "name": "id",
@@ -1214,7 +3985,8 @@
     {
       "name": "DialSharedEntityIndicator",
       "category": "FileManager/components",
-      "description": "A compact icon-only indicator to denote a \"shared\" entity.\naliases: SharedIcon|AccessIndicator\n\nRenders a small arrow-up-right icon with token-based colors.",
+      "generation": "1.0",
+      "description": "A compact icon-only indicator to denote a \"shared\" entity.\naliases: SharedIcon|AccessIndicator\nDesign system 1.0\n\nRenders a small arrow-up-right icon with token-based colors.",
       "props": [
         {
           "name": "label",
@@ -1264,7 +4036,8 @@
     {
       "name": "DialFileName",
       "category": "FileManager/components",
-      "description": "Component to display a file name with a file icon and shared indicator.\naliases: FileDisplay|NameDisplay\n\nHandles long names with ellipsis and tooltip.\n\nIf `details` is provided (e.g., file size, date), the component switches to\na vertical layout and renders the extra information below the file name.",
+      "generation": "1.0",
+      "description": "Component to display a file name with a file icon and shared indicator.\naliases: FileDisplay|NameDisplay\nDesign system 1.0\n\nHandles long names with ellipsis and tooltip.\n\nIf `details` is provided (e.g., file size, date), the component switches to\na vertical layout and renders the extra information below the file name.",
       "props": [
         {
           "name": "name",
@@ -1343,7 +4116,8 @@
     {
       "name": "DialFolderName",
       "category": "FileManager/components",
-      "description": "Component to display a folder name with a folder icon and shared indicator.\naliases: FolderDisplay|DirectoryName\n\nHandles long names with ellipsis and tooltip.",
+      "generation": "1.0",
+      "description": "Component to display a folder name with a folder icon and shared indicator.\naliases: FolderDisplay|DirectoryName\nDesign system 1.0\n\nHandles long names with ellipsis and tooltip.",
       "props": [
         {
           "name": "name",
@@ -1419,7 +4193,8 @@
     {
       "name": "DialResizableContainer",
       "category": "Components",
-      "description": "DialResizableContainer — A reusable resizable container\naliases: ResizePanel|SizableContainer\n\nsupporting both **controlled** and **uncontrolled** width modes.\n\nControlled Mode\n\nProvide `width` and optionally `onResizeStop`:\n```tsx\n<DialResizableContainer\n  width={sidebarWidth}\n  onResizeStop={(w) => setSidebarWidth(w)}\n  minWidth={180}\n  maxWidth={520}\n>\n  <Sidebar />\n</DialResizableContainer>\n```\n\nUncontrolled Mode\n\nOmit `width` entirely — the component manages its own width:\n```tsx\n<DialResizableContainer\n  defaultWidth={260}\n  minWidth={180}\n  maxWidth={520}\n>\n  <Sidebar />\n</DialResizableContainer>\n```\n\nFeatures:\n- Resize from left or right\n- Fully supports controlled & uncontrolled sizing\n- Custom resize handler (icon or any ReactNode)\n- Callback when resize stops (optional)\n- Smooth hover/drag visibility transitions",
+      "generation": "1.0",
+      "description": "DialResizableContainer — A reusable resizable container\naliases: ResizePanel|SizableContainer\nDesign system 1.0\n\nsupporting both **controlled** and **uncontrolled** width modes.\n\nControlled Mode\n\nProvide `width` and optionally `onResizeStop`:\n```tsx\n<DialResizableContainer\n  width={sidebarWidth}\n  onResizeStop={(w) => setSidebarWidth(w)}\n  minWidth={180}\n  maxWidth={520}\n>\n  <Sidebar />\n</DialResizableContainer>\n```\n\nUncontrolled Mode\n\nOmit `width` entirely — the component manages its own width:\n```tsx\n<DialResizableContainer\n  defaultWidth={260}\n  minWidth={180}\n  maxWidth={520}\n>\n  <Sidebar />\n</DialResizableContainer>\n```\n\nFeatures:\n- Resize from left or right\n- Fully supports controlled & uncontrolled sizing\n- Custom resize handler (icon or any ReactNode)\n- Callback when resize stops (optional)\n- Smooth hover/drag visibility transitions",
       "props": [
         {
           "name": "children",
@@ -1489,7 +4264,8 @@
     {
       "name": "DialConditionalResizableContainer",
       "category": "Components",
-      "description": "DialConditionalResizableContainer — A conditional wrapper around `DialResizableContainer`.\naliases: OptionalResize|ConditionalPanel\n\nThis component renders its children inside a resizable container only when `enabled` is true.\nWhen `enabled` is false, children are rendered directly without any resizable behavior.\n\nAll other props are the same as `DialResizableContainer`. See the documentation for\n`DialResizableContainer` for full details on usage, controlled/uncontrolled modes, sides, and callbacks.",
+      "generation": "1.0",
+      "description": "DialConditionalResizableContainer — A conditional wrapper around `DialResizableContainer`.\naliases: OptionalResize|ConditionalPanel\nDesign system 1.0\n\nThis component renders its children inside a resizable container only when `enabled` is true.\nWhen `enabled` is false, children are rendered directly without any resizable behavior.\n\nAll other props are the same as `DialResizableContainer`. See the documentation for\n`DialResizableContainer` for full details on usage, controlled/uncontrolled modes, sides, and callbacks.",
       "props": [
         {
           "name": "enabled",
@@ -1504,93 +4280,11 @@
       ],
       "sourceFile": "components/ResizableContainer/ConditionalResizableContainer.tsx"
     },
-    {
-      "name": "DialSkeleton",
-      "category": "Feedback",
-      "description": "DialSkeleton\naliases: PlaceholderUI|ShimmerLoader\n\nA placeholder component to show while content is loading.\nProvides various skeleton shapes and configurations.",
-      "props": [
-        {
-          "name": "active",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "true",
-          "description": "Whether to show the loading animation"
-        },
-        {
-          "name": "paragraph",
-          "type": "boolean | { rows?: number; width?: string | string[] }",
-          "required": false,
-          "defaultValue": "true",
-          "description": "Show paragraph placeholder or configure its appearance"
-        },
-        {
-          "name": "avatar",
-          "type": "| boolean\n    | {\n        size?: number | DialSkeletonAvatarSize;\n        shape?: DialSkeletonAvatarShape;\n      }",
-          "required": false,
-          "defaultValue": "false",
-          "description": "Show avatar placeholder or configure its appearance"
-        },
-        {
-          "name": "showTitle",
-          "type": "boolean | { width?: string }",
-          "required": false,
-          "defaultValue": "true",
-          "description": "Show title placeholder or configure its appearance"
-        },
-        {
-          "name": "loading",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "true",
-          "description": "Display the skeleton when true"
-        },
-        {
-          "name": "children",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Content to be displayed when loading is false"
-        },
-        {
-          "name": "variant",
-          "type": "DialSkeletonVariant",
-          "required": false,
-          "defaultValue": "DialSkeletonVariant.Default",
-          "description": "Skeleton variant"
-        },
-        {
-          "name": "width",
-          "type": "string | number",
-          "required": false,
-          "description": "Width of the skeleton"
-        },
-        {
-          "name": "height",
-          "type": "string | number",
-          "required": false,
-          "description": "Height of the skeleton"
-        },
-        {
-          "name": "overlay",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Content to overlay on top of the skeleton (e.g., a spinner)"
-        },
-        {
-          "name": "color",
-          "type": "string",
-          "required": false,
-          "description": "Custom background color for the skeleton elements (overrides the default token)"
-        }
-      ],
-      "examples": [
-        "// Simple skeleton\n<DialSkeleton />\n\n// Text skeleton with custom size\n<DialSkeleton variant={DialSkeletonVariant.Text} width=\"200px\" height=\"20px\" />\n\n// Circular avatar skeleton\n<DialSkeleton variant={DialSkeletonVariant.Circular} width={40} height={40} />\n\n// Complex skeleton with avatar, showTitle and paragraph\n<DialSkeleton\n  avatar\n  showTitle\n  paragraph={{ rows: 3 }}\n  active\n/>\n\n// Conditional loading\n<DialSkeleton loading={isLoading}>\n  <div>Your content here</div>\n</DialSkeleton>\n\n// Custom paragraph widths\n<DialSkeleton\n  paragraph={{ rows: 3, width: ['100%', '80%', '60%'] }}\n/>\n\n// Avatar with size and shape\n<DialSkeleton\n  avatar={{\n    size: DialSkeletonAvatarSize.Large,\n    shape: DialSkeletonAvatarShape.Square\n  }}\n/>"
-      ],
-      "sourceFile": "components/Skeleton/Skeleton.tsx"
-    },
     {
       "name": "DialGrid",
       "category": "Grid",
-      "description": "DialGrid — A feature-rich data grid wrapper built on ag-Grid with dark theme support.\naliases: DataTable|TableGrid\n\nProvides a pre-configured grid with:\n- Dark theme styling with CSS variable integration\n- Optional row selection with checkboxes\n- Context menu integration via DialDropdown\n- Text overflow handling with tooltips via DialEllipsisTooltip\n- Controlled or uncontrolled selection modes\n- Automatic column sizing and responsive behavior\n- Full accessibility support with ARIA attributes\n- Loading state with native AG-Grid overlay",
+      "generation": "1.0",
+      "description": "DialGrid — A feature-rich data grid wrapper built on ag-Grid with dark theme support.\naliases: DataTable|TableGrid\nDesign system 1.0\n\nProvides a pre-configured grid with:\n- Dark theme styling with CSS variable integration\n- Optional row selection with checkboxes\n- Context menu integration via DialDropdown\n- Text overflow handling with tooltips via DialEllipsisTooltip\n- Controlled or uncontrolled selection modes\n- Automatic column sizing and responsive behavior\n- Full accessibility support with ARIA attributes\n- Loading state with native AG-Grid overlay",
       "props": [
         {
           "name": "columnDefs",
@@ -1741,10 +4435,60 @@
       ],
       "sourceFile": "components/Grid/Grid.tsx"
     },
+    {
+      "name": "DialDateCellRenderer",
+      "category": "Grid",
+      "generation": "1.0",
+      "description": "Minimal date cell renderer (ag-Grid compatible).\nDesign system 1.0\n\nRenders the value in the **\"MMM dd, yyyy\"** format (e.g., \"Jul 20, 2025\"),\nwrapped in `DialEllipsisTooltip` (tooltip only appears if truncated).",
+      "props": [
+        {
+          "name": "value",
+          "type": "DateValue | null",
+          "required": false
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "required": false,
+          "defaultValue": "DEFAULT_LOCALE",
+          "description": "Locale fixed to U.S. English by default to enforce \"Jul 20, 2025\"."
+        },
+        {
+          "name": "options",
+          "type": "Intl.DateTimeFormatOptions",
+          "required": false,
+          "defaultValue": "DEFAULT_DATE_FORMAT_OPTIONS",
+          "description": "Options for date formatting (e.g., timeZone)."
+        },
+        {
+          "name": "emptyPlaceholder",
+          "type": "string",
+          "required": false,
+          "description": "Placeholder when value is empty/invalid."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes merged into the wrapper."
+        },
+        {
+          "name": "hideTooltip",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false"
+        }
+      ],
+      "examples": [
+        "// ag-Grid colDef\n{ field: 'createdAt', cellRenderer: DateCellRenderer, cellRendererParams: { options: { timeZone: 'UTC' } } }\n\n// Direct usage\n<DateCellRenderer value=\"2025-07-20T00:00:00Z\" options={{ timeZone: 'UTC' }} />\n<DateCellRenderer value={1752969600000} options={{ timeZone: 'UTC' }} /> // milliseconds"
+      ],
+      "sourceFile": "components/Grid/renderers/DateCellRenderer.tsx"
+    },
     {
       "name": "DialTabs",
       "category": "Navigation",
-      "description": "A responsive and overflow-aware tabs component that automatically adapts its layout\naliases: TabNavigation|TabBar\n\nbetween a scrollable tab bar and a dropdown menu on smaller screens.\n\nWhen there are too many tabs to fit in a single line, it introduces a dropdown button\nfor accessing hidden tabs and ensures smooth horizontal scrolling. The component also\nautomatically keeps the active tab in view.\n\nSupports both horizontal and vertical orientations and dynamically adjusts layout\nbased on screen size and available space.\n\nOn larger screens, tabs are displayed according to the `orientation` prop\n(horizontal or vertical). On smaller screens (mobile or tablet), the tabs collapse\ninto a dropdown menu for better usability.",
+      "generation": "1.0",
+      "description": "A responsive and overflow-aware tabs component that automatically adapts its layout\naliases: TabNavigation|TabBar\nDesign system 1.0\n\nbetween a scrollable tab bar and a dropdown menu on smaller screens.\n\nWhen there are too many tabs to fit in a single line, it introduces a dropdown button\nfor accessing hidden tabs and ensures smooth horizontal scrolling. The component also\nautomatically keeps the active tab in view.\n\nSupports both horizontal and vertical orientations and dynamically adjusts layout\nbased on screen size and available space.\n\nOn larger screens, tabs are displayed according to the `orientation` prop\n(horizontal or vertical). On smaller screens (mobile or tablet), the tabs collapse\ninto a dropdown menu for better usability.",
       "props": [
         {
           "name": "tabs",
@@ -1828,12 +4572,14 @@
       "examples": [
         "<DialTabs\n  tabs={[\n    { id: 'overview', name: 'Overview' },\n    { id: 'details', name: 'Details' },\n    { id: 'settings', name: 'Settings', invalid: true },\n  ]}\n  activeTab=\"overview\"\n  onClick={(id) => setActiveTab(id)}\n  orientation={TabOrientation.Horizontal}\n/>"
       ],
-      "sourceFile": "components/Tabs/Tabs.tsx"
+      "sourceFile": "components/Tabs/Tabs.tsx",
+      "supersededBy": "Tabs"
     },
     {
       "name": "DialBreadcrumb",
       "category": "Navigation",
-      "description": "Breadcrumb navigation component with horizontal scroll on overflow.\naliases: NavigationPath|BreadcrumbTrail\n\nUse either the `pathItems` prop or compose with `<DialBreadcrumbItem/>` as children.\nThe last item is treated as the current page.",
+      "generation": "1.0",
+      "description": "Breadcrumb navigation component with horizontal scroll on overflow.\naliases: NavigationPath|BreadcrumbTrail\nDesign system 1.0\n\nUse either the `pathItems` prop or compose with `<DialBreadcrumbItem/>` as children.\nThe last item is treated as the current page.",
       "props": [
         {
           "name": "pathItems",
@@ -1889,7 +4635,8 @@
     {
       "name": "DialBreadcrumbItem",
       "category": "Navigation",
-      "description": "",
+      "generation": "1.0",
+      "description": "Design system 1.0",
       "props": [
         {
           "name": "label",
@@ -1949,7 +4696,8 @@
     {
       "name": "DialButton",
       "category": "Elements/Buttons",
-      "description": "A Button component with flexible icon and text positioning\naliases: ActionButton|CallToAction",
+      "generation": "1.0",
+      "description": "A Button component with flexible icon and text positioning\naliases: ActionButton|CallToAction\nDesign system 1.0",
       "props": [
         {
           "name": "variant",
@@ -2011,12 +4759,14 @@
         "<DialButton\n  label=\"Click me\"\n  onClick={handleClick}\n  iconBefore={<Icon />}\n  className=\"custom-button\"\n/>",
         "<DialButton\n  label={<span>Custom <strong>Label</strong></span>}\n  aria-label=\"Custom Label\"\n  onClick={handleClick}\n/>"
       ],
-      "sourceFile": "components/Button/Button.tsx"
+      "sourceFile": "components/Button/Button.tsx",
+      "supersededBy": "Button"
     },
     {
       "name": "DialIconButton",
       "category": "Elements/Buttons",
-      "description": "A Icon Button component with flexible icon and text positioning\naliases: IconicButton|SymbolButton",
+      "generation": "1.0",
+      "description": "A Icon Button component with flexible icon and text positioning\naliases: IconicButton|SymbolButton\nDesign system 1.0",
       "props": [
         {
           "name": "variant",
@@ -2054,118 +4804,121 @@
         "<DialIconButton\n  onClick={handleClick}\n  icon={<Icon />}\n  className=\"custom-button\"\n/>",
         "<DialIconButton\n  aria-label=\"Custom Label\"\n  onClick={handleClick}\n/>"
       ],
-      "sourceFile": "components/IconButton/IconButton.tsx"
+      "sourceFile": "components/IconButton/IconButton.tsx",
+      "supersededBy": "IconButton"
     },
     {
       "name": "DialDangerButton",
       "category": "Elements/Buttons",
+      "generation": "1.0",
       "description": "A Danger Button component with predefined danger variant",
       "props": [],
       "examples": [
         "<DialDangerButton\nlabel=\"Click me\"\nonClick={handleClick}\nclassName=\"custom-button\"\n/>"
       ],
-      "sourceFile": "components/Button/ButtonWrappers.tsx"
+      "sourceFile": "components/Button/ButtonWrappers.tsx",
+      "supersededBy": "DangerButton"
     },
     {
       "name": "DialNeutralButton",
       "category": "Elements/Buttons",
+      "generation": "1.0",
       "description": "A Neutral Button component with predefined neutral variant",
       "props": [],
       "examples": [
         "<DialNeutralButton\n label=\"Click me\"\n onClick={handleClick}\n className=\"custom-button\"\n/>"
       ],
-      "sourceFile": "components/Button/ButtonWrappers.tsx"
+      "sourceFile": "components/Button/ButtonWrappers.tsx",
+      "supersededBy": "NeutralButton"
     },
     {
       "name": "DialPrimaryButton",
       "category": "Elements/Buttons",
-      "description": "A Primary Button component with predefined primary variant",
+      "generation": "1.0",
+      "description": "A Primary Button component with predefined primary variant\nDesign system 1.0",
       "props": [],
       "examples": [
         "<DialPrimaryButton\n label=\"Click me\"\nonClick={handleClick}\nclassName=\"custom-button\"\n/>"
       ],
-      "sourceFile": "components/Button/ButtonWrappers.tsx"
+      "sourceFile": "components/Button/ButtonWrappers.tsx",
+      "supersededBy": "PrimaryButton"
     },
     {
       "name": "DialGhostButton",
       "category": "Elements/Buttons",
+      "generation": "1.0",
       "description": "A Ghost Button component with predefined ghost appearance",
       "props": [],
       "examples": [
         "<DialGhostButton\n label=\"Click me\"\n onClick={handleClick}\n className=\"custom-button\"\n/>"
       ],
-      "sourceFile": "components/Button/ButtonWrappers.tsx"
+      "sourceFile": "components/Button/ButtonWrappers.tsx",
+      "supersededBy": "GhostButton"
     },
     {
       "name": "DialLinkButton",
       "category": "Elements/Buttons",
+      "generation": "1.0",
       "description": "A Link Button component with predefined link appearance",
       "props": [],
       "examples": [
         "<DialLinkButton\n label=\"Click me\"\n onClick={handleClick}\n className=\"custom-button\"\n/>"
       ],
-      "sourceFile": "components/Button/ButtonWrappers.tsx"
-    },
-    {
-      "name": "DialRoundedButton",
-      "category": "Elements/Buttons",
-      "description": "A pill-shaped neutral button with an optional selected state.",
-      "props": [
-        {
-          "name": "selected",
-          "type": "boolean",
-          "required": false,
-          "description": "Applies accent-primary tint and border when true"
-        }
-      ],
-      "examples": [
-        "<DialRoundedButton label=\"Tag\" selected={isActive} onClick={handleClick} />"
-      ],
-      "sourceFile": "components/Button/ButtonWrappers.tsx"
+      "sourceFile": "components/Button/ButtonWrappers.tsx",
+      "supersededBy": "LinkButton"
     },
     {
       "name": "DialDangerIconButton",
       "category": "Elements/Buttons",
+      "generation": "1.0",
       "description": "A Danger Icon Button component with predefined danger variant",
       "props": [],
       "examples": [
         "<DialDangerIconButton\n icon={<Icon />}\n onClick={handleClick}\n className=\"custom-button\"\n/>"
       ],
-      "sourceFile": "components/IconButton/IconButtonWrappers.tsx"
+      "sourceFile": "components/IconButton/IconButtonWrappers.tsx",
+      "supersededBy": "DangerIconButton"
     },
     {
       "name": "DialGhostIconButton",
       "category": "Elements/Buttons",
+      "generation": "1.0",
       "description": "A Ghost Icon Button component with predefined ghost appearance",
       "props": [],
       "examples": [
         "<DialGhostIconButton\n icon={<Icon />}\n onClick={handleClick}\n className=\"custom-button\"\n/>"
       ],
-      "sourceFile": "components/IconButton/IconButtonWrappers.tsx"
+      "sourceFile": "components/IconButton/IconButtonWrappers.tsx",
+      "supersededBy": "GhostIconButton"
     },
     {
       "name": "DialNeutralIconButton",
       "category": "Elements/Buttons",
+      "generation": "1.0",
       "description": "A Neutral Icon Button component with predefined neutral variant",
       "props": [],
       "examples": [
         "<DialNeutralIconButton\n icon={<Icon />}\n onClick={handleClick}\n className=\"custom-button\"\n/>"
       ],
-      "sourceFile": "components/IconButton/IconButtonWrappers.tsx"
+      "sourceFile": "components/IconButton/IconButtonWrappers.tsx",
+      "supersededBy": "NeutralIconButton"
     },
     {
       "name": "DialPrimaryIconButton",
       "category": "Elements/Buttons",
-      "description": "A Primary Icon Button component with predefined primary variant",
+      "generation": "1.0",
+      "description": "A Primary Icon Button component with predefined primary variant\nDesign system 1.0",
       "props": [],
       "examples": [
         "<DialPrimaryIconButton\n icon={<Icon />}\n onClick={handleClick}\n className=\"custom-button\"\n/>"
       ],
-      "sourceFile": "components/IconButton/IconButtonWrappers.tsx"
+      "sourceFile": "components/IconButton/IconButtonWrappers.tsx",
+      "supersededBy": "PrimaryIconButton"
     },
     {
       "name": "DialSecondaryIconButton",
       "category": "Elements/Buttons",
+      "generation": "1.0",
       "description": "A Secondary Icon Button component with predefined secondary variant",
       "props": [],
       "examples": [
@@ -2176,6 +4929,7 @@
     {
       "name": "DialSuccessIconButton",
       "category": "Elements/Buttons",
+      "generation": "1.0",
       "description": "A Success Icon Button component with predefined success variant",
       "props": [],
       "examples": [
@@ -2186,6 +4940,7 @@
     {
       "name": "DialTertiaryIconButton",
       "category": "Elements/Buttons",
+      "generation": "1.0",
       "description": "A Tertiary Icon Button component with predefined tertiary variant",
       "props": [],
       "examples": [
@@ -2196,7 +4951,8 @@
     {
       "name": "DialCloseButton",
       "category": "Elements/Buttons",
-      "description": "A Close button component with a customizable icon and accessible label.\naliases: DismissButton|ExitButton",
+      "generation": "1.0",
+      "description": "A Close button component with a customizable icon and accessible label.\naliases: DismissButton|ExitButton\nDesign system 1.0",
       "props": [
         {
           "name": "ariaLabel",
@@ -2233,12 +4989,14 @@
       "examples": [
         "<DialCloseButton\n  ariaLabel=\"Close dialog\"\n  onClose={handleClose}\n  className=\"custom-close\"\n  size={32}\n/>"
       ],
-      "sourceFile": "components/CloseButton/CloseButton.tsx"
+      "sourceFile": "components/CloseButton/CloseButton.tsx",
+      "supersededBy": "CloseButton"
     },
     {
       "name": "DialRemoveButton",
       "category": "Elements/Buttons",
-      "description": "A specialized button component for removal or delete actions.\naliases: DeleteButton|TrashButton\n\nRenders a `DialDangerButton` with a predefined trash icon (`IconTrashX`) as the leading icon.\nAdditional props are passed directly to the underlying `DialDangerButton`.",
+      "generation": "1.0",
+      "description": "A specialized button component for removal or delete actions.\naliases: DeleteButton|TrashButton\nDesign system 1.0\n\nRenders a `DialDangerButton` with a predefined trash icon (`IconTrashX`) as the leading icon.\nAdditional props are passed directly to the underlying `DialDangerButton`.",
       "props": [
         {
           "name": "iconClassName",
@@ -2252,33 +5010,11 @@
       ],
       "sourceFile": "components/RemoveButton/RemoveButton.tsx"
     },
-    {
-      "name": "DialFabButton",
-      "category": "Elements/Buttons",
-      "description": "A Floating Action Button (FAB) component — circular icon button for primary actions.\naliases: FloatingActionButton|FabButton|CircularButton",
-      "props": [
-        {
-          "name": "icon",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Icon to display inside the button"
-        },
-        {
-          "name": "tooltipProps",
-          "type": "TooltipProps",
-          "required": false,
-          "description": "Optional tooltip configuration"
-        }
-      ],
-      "examples": [
-        "<DialFabButton\n  icon={<IconArrowNarrowDown size={24} stroke={1.5} />}\n  onClick={handleClick}\n  aria-label=\"Scroll to bottom\"\n/>"
-      ],
-      "sourceFile": "components/FabButton/FabButton.tsx"
-    },
     {
       "name": "DialTextarea",
       "category": "Elements",
-      "description": "A flexible textarea component with validation support and consistent styling\naliases: MultilineInput|TextBox",
+      "generation": "1.0",
+      "description": "A flexible textarea component with validation support and consistent styling\naliases: MultilineInput|TextBox\nDesign system 1.0",
       "props": [
         {
           "name": "labelProps",
@@ -2327,12 +5063,14 @@
       "examples": [
         "<DialTextarea\n  id=\"description\"\n  placeholder=\"Enter description...\"\n  value={value}\n  onChange={(value) => setValue(value)}\n/>"
       ],
-      "sourceFile": "components/Textarea/Textarea.tsx"
+      "sourceFile": "components/Textarea/Textarea.tsx",
+      "supersededBy": "Textarea"
     },
     {
       "name": "DialTooltip",
       "category": "Overlay",
-      "description": "A Tooltip component that displays information on hover\naliases: HoverPopover|InfoPopover",
+      "generation": "1.0",
+      "description": "A Tooltip component that displays information on hover\naliases: HoverPopover|InfoPopover\nDesign system 1.0",
       "props": [
         {
           "name": "hideTooltip",
@@ -2370,10 +5108,38 @@
       ],
       "sourceFile": "components/Tooltip/Tooltip.tsx"
     },
+    {
+      "name": "DialTooltipContainer",
+      "category": "Overlay",
+      "generation": "1.0",
+      "description": "The container component that provides tooltip context and state management\nDesign system 1.0",
+      "props": [],
+      "examples": [],
+      "sourceFile": "components/Tooltip/TooltipContainer.tsx"
+    },
+    {
+      "name": "DialTooltipContent",
+      "category": "Overlay",
+      "generation": "1.0",
+      "description": "The content area of a tooltip that displays the tooltip information\nDesign system 1.0",
+      "props": [],
+      "examples": [],
+      "sourceFile": "components/Tooltip/TooltipContent.tsx"
+    },
+    {
+      "name": "DialTooltipTrigger",
+      "category": "Overlay",
+      "generation": "1.0",
+      "description": "The trigger element for a tooltip that can be clicked or hovered\nDesign system 1.0",
+      "props": [],
+      "examples": [],
+      "sourceFile": "components/Tooltip/TooltipTrigger.tsx"
+    },
     {
       "name": "DialSwitch",
       "category": "Form",
-      "description": "A Switch component with various styling options\naliases: ToggleSwitch|BinaryToggle",
+      "generation": "1.0",
+      "description": "A Switch component with various styling options\naliases: ToggleSwitch|BinaryToggle\nDesign system 1.0",
       "props": [
         {
           "name": "label",
@@ -2415,12 +5181,14 @@
       "examples": [
         "<DialSwitch\n  switchId=\"switch\"\n  label=\"Toggle\"\n  isOn={true}\n  disabled={false}\n  onChange={(value) => console.log(value)}\n  caption=\"Caption\"\n/>"
       ],
-      "sourceFile": "components/Switch/Switch.tsx"
+      "sourceFile": "components/Switch/Switch.tsx",
+      "supersededBy": "Switch"
     },
     {
       "name": "DialSegmentedControl",
       "category": "Form",
-      "description": "A single-select control for switching between a small set of mutually exclusive,\nequally-sized options (e.g. view switchers).\naliases: SegmentedButton|ViewSwitcher\n\nRenders a horizontal group of segments where every option is always visible and\nequally sized. Supports 2 or more segments, optional per-option icons, and\nkeyboard navigation (Arrow keys, Home, End).",
+      "generation": "1.0",
+      "description": "A single-select control for switching between a small set of mutually exclusive,\nequally-sized options (e.g. view switchers).\naliases: SegmentedButton|ViewSwitcher\nDesign system 1.0\n\nRenders a horizontal group of segments where every option is always visible and\nequally sized. Supports 2 or more segments, optional per-option icons, and\nkeyboard navigation (Arrow keys, Home, End).",
       "props": [
         {
           "name": "options",
@@ -2467,7 +5235,8 @@
     {
       "name": "DialPopup",
       "category": "Overlay",
-      "description": "An accessible modal dialog component using Floating UI.\naliases: Modal|Dialog\n\nRenders in a portal with a scrim overlay, focus management, header with a title,\ncontent area, optional footer and a close control.",
+      "generation": "1.0",
+      "description": "An accessible modal dialog component using Floating UI.\naliases: Modal|Dialog\nDesign system 1.0\n\nRenders in a portal with a scrim overlay, focus management, header with a title,\ncontent area, optional footer and a close control.",
       "props": [
         {
           "name": "open",
@@ -2570,18 +5339,20 @@
           "type": "boolean",
           "required": false,
           "defaultValue": "false",
-          "description": "When true, initial focus goes to a non-input guard to avoid opening the virtual keyboard on mobile"
+          "description": "When true, initial focus goes to a non-input guard to avoid opening the virtual keyboard on mobile. Redundant since the default focuses the dialog container, which never raises the keyboard; kept for compatibility"
         }
       ],
       "examples": [
         "<DialPopup\n  open\n  title=\"Title\"\n  size={PopupSize.Md}\n  footer={\n    <div className=\"flex justify-end gap-2\">\n      <button className=\"btn-secondary px-3 py-1 rounded\">Cancel</button>\n      <button className=\"btn-primary px-3 py-1 rounded\">Confirm</button>\n    </div>\n  }\n  onClose={() => console.log('closed')}\n>\n  <div className=\"p-6\">Dialog content goes here…</div>\n</DialPopup>"
       ],
-      "sourceFile": "components/Popup/Popup.tsx"
+      "sourceFile": "components/Popup/Popup.tsx",
+      "supersededBy": "Popup"
     },
     {
       "name": "DialConfirmationPopup",
       "category": "Overlay",
-      "description": "A confirmation dialog built with DialPopup and DialButton.\naliases: ConfirmDialog|WarningDialog\n\nProvides an accessible modal with a title, optional description or custom content,\nand a footer with Cancel / Confirm actions.",
+      "generation": "1.0",
+      "description": "A confirmation dialog built with DialPopup and DialButton.\naliases: ConfirmDialog|WarningDialog\nDesign system 1.0\n\nProvides an accessible modal with a title, optional description or custom content,\nand a footer with Cancel / Confirm actions.",
       "props": [
         {
           "name": "description",
@@ -2658,12 +5429,14 @@
       "examples": [
         "<ConfirmationModal\n  open\n  header=\"Delete item?\"\n  description=\"This action cannot be undone.\"\n  confirmLabel=\"Delete\"\n  onClose={() => setOpen(false)}\n  onConfirm={handleDelete}\n/>"
       ],
-      "sourceFile": "components/ConfirmationPopup/ConfirmationPopup.tsx"
+      "sourceFile": "components/ConfirmationPopup/ConfirmationPopup.tsx",
+      "supersededBy": "ConfirmationPopup"
     },
     {
       "name": "DialRadioGroupPopupField",
       "category": "Form",
-      "description": "A composite field that opens a popup with a radio group selector.\naliases: PopupRadio|ChoicePopup\n\nRenders a labeled readout using `DialInputPopup`; when opened, a `DialPopup`\ndisplays a `DialRadioGroup` allowing the user to pick from a list of options.\nThe footer provides Cancel/Apply actions, with Apply disabled when `isValid` is false.\n\nThe value shown in the collapsed field is derived from either `customInputValue`\nor the name of the currently selected radio option identified by `selectedValue`.",
+      "generation": "1.0",
+      "description": "A composite field that opens a popup with a radio group selector.\naliases: PopupRadio|ChoicePopup\nDesign system 1.0\n\nRenders a labeled readout using `DialInputPopup`; when opened, a `DialPopup`\ndisplays a `DialRadioGroup` allowing the user to pick from a list of options.\nThe footer provides Cancel/Apply actions, with Apply disabled when `isValid` is false.\n\nThe value shown in the collapsed field is derived from either `customInputValue`\nor the name of the currently selected radio option identified by `selectedValue`.",
       "props": [],
       "examples": [
         "<DialRadioGroupPopupField\n  fieldTitle=\"Status\"\n  htmlFor=\"status\"\n  header=\"Select status\"\n  emptyValueText=\"None\"\n  radioButtons={[\n    { id: 'draft', name: 'Draft' },\n    { id: 'review', name: 'In Review' },\n    { id: 'published', name: 'Published' },\n  ]}\n  selectedValue=\"draft\"\n  selectedRadioValue=\"draft\"\n  onChangeRadioField={(id) => console.log('radio changed', id)}\n  id=\"status-group\"\n  isValid={true}\n  onApply={() => console.log('applied')}\n/>"
@@ -2673,7 +5446,8 @@
     {
       "name": "DialFormPopup",
       "category": "Overlay",
-      "description": "A form-oriented popup dialog.\naliases: FormDialog|FormModal\n\nProvides an accessible popup with a title, custom body,\nand a footer with \"Cancel\" and \"Submit\" actions.",
+      "generation": "1.0",
+      "description": "A form-oriented popup dialog.\naliases: FormDialog|FormModal\nDesign system 1.0\n\nProvides an accessible popup with a title, custom body,\nand a footer with \"Cancel\" and \"Submit\" actions.",
       "props": [
         {
           "name": "submitLabel",
@@ -2736,7 +5510,8 @@
     {
       "name": "DialInput",
       "category": "Elements/Inputs",
-      "description": "A flexible input component with icon support and various styling options\naliases: TextField|FormInput",
+      "generation": "1.0",
+      "description": "A flexible input component with icon support and various styling options\naliases: TextField|FormInput\nDesign system 1.0",
       "props": [
         {
           "name": "labelProps",
@@ -2821,12 +5596,14 @@
       "examples": [
         "<DialInput\n  id=\"search\"\n  placeholder=\"Search...\"\n  iconBefore={<SearchIcon />}\n  iconAfter={<ClearIcon />}\n  onChange={(value) => console.log(value)}\n/>"
       ],
-      "sourceFile": "components/Input/Input.tsx"
+      "sourceFile": "components/Input/Input.tsx",
+      "supersededBy": "Input"
     },
     {
       "name": "DialNumberInput",
       "category": "Elements/Inputs",
-      "description": "A number input field component\naliases: NumericField|NumberField",
+      "generation": "1.0",
+      "description": "A number input field component\naliases: NumericField|NumberField\nDesign system 1.0",
       "props": [
         {
           "name": "integer",
@@ -2844,22 +5621,26 @@
       "examples": [
         "<DialNumberInput\n  id=\"age\"\n  placeholder=\"Enter your age\"\n  value={25}\n  onChange={(value) => setAge(value)}\n/>"
       ],
-      "sourceFile": "components/NumberInput/NumberInput.tsx"
+      "sourceFile": "components/NumberInput/NumberInput.tsx",
+      "supersededBy": "NumberInput"
     },
     {
       "name": "DialPasswordInput",
       "category": "Elements/Inputs",
-      "description": "A password input component with show/hide functionality and customizable props.\naliases: SecureInput|ToggleablePassword",
+      "generation": "1.0",
+      "description": "A password input component with show/hide functionality and customizable props.\naliases: SecureInput|ToggleablePassword\nDesign system 1.0",
       "props": [],
       "examples": [
         "<DialPasswordInput\n  id=\"password\"\n  label=\"Password\"\n  value={password}\n  onChange={e => setPassword(e.target.value)}\n  disabled={false}\n/>"
       ],
-      "sourceFile": "components/PasswordInput/PasswordInput.tsx"
+      "sourceFile": "components/PasswordInput/PasswordInput.tsx",
+      "supersededBy": "PasswordInput"
     },
     {
       "name": "DialSearch",
       "category": "Elements",
-      "description": "A search input component with a customizable placeholder, icons, flexible props, and the ability\naliases: SearchField|QueryInput\n\nto clear the input value via a clear button. Supports multiple sizes for flexible layouts.",
+      "generation": "1.0",
+      "description": "A search input component with a customizable placeholder, icons, flexible props, and the ability\naliases: SearchField|QueryInput\nDesign system 1.0\n\nto clear the input value via a clear button. Supports multiple sizes for flexible layouts.",
       "props": [
         {
           "name": "withoutBorder",
@@ -2883,12 +5664,14 @@
       "examples": [
         "<DialSearch\n  id=\"search\"\n  value={query}\n  placeholder=\"Search\"\n  size={ElementSize.Small}\n  onChange={(value) => setQuery(value)}\n  onBlur={() => handleBlur()}\n  disabled={false}\n/>"
       ],
-      "sourceFile": "components/Search/Search.tsx"
+      "sourceFile": "components/Search/Search.tsx",
+      "supersededBy": "Search"
     },
     {
       "name": "DialInputPopup",
       "category": "Overlay",
-      "description": "An input field that opens a popup when clicked, displaying a selected value or a list of values.\naliases: PopupInput|ReadonlyInput\n\nIt supports read-only mode, error states, and disabled state, with customizable styling.\nThe modal content is rendered using a portal for seamless integration.",
+      "generation": "1.0",
+      "description": "An input field that opens a popup when clicked, displaying a selected value or a list of values.\naliases: PopupInput|ReadonlyInput\nDesign system 1.0\n\nIt supports read-only mode, error states, and disabled state, with customizable styling.\nThe modal content is rendered using a portal for seamless integration.",
       "props": [
         {
           "name": "open",
@@ -2997,7 +5780,8 @@
     {
       "name": "DialAutocompleteInputValue",
       "category": "Form",
-      "description": "A component that displays a list of selected items in a customizable, styled list. Each item is\naliases: SelectedList|ItemDisplay\n\nrendered as a tag wrapped in a tooltip, allowing for truncation and additional context when\nhovered. The component is flexible and supports custom CSS classes for styling the list and\nindividual list items.",
+      "generation": "1.0",
+      "description": "A component that displays a list of selected items in a customizable, styled list. Each item is\naliases: SelectedList|ItemDisplay\nDesign system 1.0\n\nrendered as a tag wrapped in a tooltip, allowing for truncation and additional context when\nhovered. The component is flexible and supports custom CSS classes for styling the list and\nindividual list items.",
       "props": [
         {
           "name": "placeholder",
@@ -3039,7 +5823,8 @@
     {
       "name": "DialTagInput",
       "category": "Form",
-      "description": "A tag input field that allows users to add multiple tags using the Enter or comma key.\naliases: MultiTag|TagField\n\nSupports removing tags, displaying field labels, optional indicators, validation states,\nand dynamic layout adjustment when tags wrap to multiple lines.",
+      "generation": "1.0",
+      "description": "A tag input field that allows users to add multiple tags using the Enter or comma key.\naliases: MultiTag|TagField\nDesign system 1.0\n\nSupports removing tags, displaying field labels, optional indicators, validation states,\nand dynamic layout adjustment when tags wrap to multiple lines.",
       "props": [
         {
           "name": "elementId",
@@ -3120,12 +5905,14 @@
       "examples": [
         "<DialTagInput\n  elementId=\"skills\"\n  fieldTitle=\"Skills\"\n  placeholder=\"Add a skill\"\n  initialTags={['React', 'TypeScript']}\n  optional\n  onChange={(tags) => console.log('Updated tags:', tags)}\n/>"
       ],
-      "sourceFile": "components/TagInput/TagInput.tsx"
+      "sourceFile": "components/TagInput/TagInput.tsx",
+      "supersededBy": "TagInput"
     },
     {
       "name": "DialSelect",
       "category": "Form",
-      "description": "A versatile select supporting single and multiple selections.\naliases: OptionPicker|ChoiceSelector\n\nSingle mode mirrors the legacy visual:\n- Trigger shows the selected option's leading icon + label.\n- In the list, the selected option is indicated by a LEFT border and tinted background\n  (no check icon).\n\nMultiple mode uses checkboxes (including Select All with indeterminate state).\n\nSearch:\n- `searchable`: shows a plain input in the overlay header that filters options.\n- `inlineSearch` (single mode only): the trigger renders a plain input; typing filters options;\n  when closed, the input shows the selected label.",
+      "generation": "1.0",
+      "description": "A versatile select supporting single and multiple selections.\naliases: OptionPicker|ChoiceSelector\nDesign system 1.0\n\nSingle mode mirrors the legacy visual:\n- Trigger shows the selected option's leading icon + label.\n- In the list, the selected option is indicated by a LEFT border and tinted background\n  (no check icon).\n\nMultiple mode uses checkboxes (including Select All with indeterminate state).\n\nSearch:\n- `searchable`: shows a plain input in the overlay header that filters options.\n- `inlineSearch` (single mode only): the trigger renders a plain input; typing filters options;\n  when closed, the input shows the selected label.",
       "props": [
         {
           "name": "options",
@@ -3346,12 +6133,14 @@
       "examples": [
         "<DialSelect options={[{ value: 'option-1', label: 'Option 1' }]} />\n<DialSelect searchable options={[{ value: 'a', label: 'Alpha' }, { value: 'b', label: 'Beta' }]} />\n<DialSelect multiple selectAll options={[{ value: '1', label: 'One' }, { value: '2', label: 'Two' }]} />\n<DialSelect inlineSearch options={[{ value: 'r', label: 'Relax-Name' }, { value: 'rep2', label: 'rep2' }]} />"
       ],
-      "sourceFile": "components/Select/Select.tsx"
+      "sourceFile": "components/Select/Select.tsx",
+      "supersededBy": "Select"
     },
     {
       "name": "DialSelectField",
       "category": "Form",
-      "description": "A Select field wrapper that composes `DialFormItem` and `DialSelect`.\naliases: SelectInput|ComboField\n\nProvides unified label, description, error rendering and a readonly view that shows\nthe selected option labels (comma-separated in single mode, list in multiple).",
+      "generation": "1.0",
+      "description": "A Select field wrapper that composes `DialFormItem` and `DialSelect`.\naliases: SelectInput|ComboField\nDesign system 1.0\n\nProvides unified label, description, error rendering and a readonly view that shows\nthe selected option labels (comma-separated in single mode, list in multiple).",
       "props": [
         {
           "name": "selectClassName",
@@ -3374,7 +6163,8 @@
     {
       "name": "DialLoadFileArea",
       "category": "Form",
-      "description": "A drag-and-drop file upload area component that allows users to upload files\naliases: FileDropZone|DragDropUpload\n\neither by dragging them into the area or by selecting them through the file picker.\nDisplays helpful text, button prompts, and validation errors for file format or count limits.",
+      "generation": "1.0",
+      "description": "A drag-and-drop file upload area component that allows users to upload files\naliases: FileDropZone|DragDropUpload\nDesign system 1.0\n\neither by dragging them into the area or by selecting them through the file picker.\nDisplays helpful text, button prompts, and validation errors for file format or count limits.",
       "props": [
         {
           "name": "files",
@@ -3415,7 +6205,8 @@
     {
       "name": "DialLoadFileAreaField",
       "category": "Form",
-      "description": "A composite file upload field that combines a label, file list management,\naliases: UploadField|FileListField\n\nand a drag-and-drop upload area. Allows users to add, remove, and validate files\nwith customizable restrictions on file types and count.\n\nThe component displays a header showing the field title and file count,\nalong with \"Add\" and \"Delete All\" buttons (when multiple uploads are enabled).\nIt integrates with `DialLoadFileArea` for drag-and-drop functionality and\nprovides file validation for both format and maximum file count.",
+      "generation": "1.0",
+      "description": "A composite file upload field that combines a label, file list management,\naliases: UploadField|FileListField\nDesign system 1.0\n\nand a drag-and-drop upload area. Allows users to add, remove, and validate files\nwith customizable restrictions on file types and count.\n\nThe component displays a header showing the field title and file count,\nalong with \"Add\" and \"Delete All\" buttons (when multiple uploads are enabled).\nIt integrates with `DialLoadFileArea` for drag-and-drop functionality and\nprovides file validation for both format and maximum file count.",
       "props": [
         {
           "name": "fieldTitle",
@@ -3451,6 +6242,7 @@
     {
       "name": "DialDropdown",
       "category": "Dropdown",
+      "generation": "1.0",
       "description": "",
       "props": [
         {
@@ -3582,12 +6374,14 @@
         }
       ],
       "examples": [],
-      "sourceFile": "components/Dropdown/Dropdown.tsx"
+      "sourceFile": "components/Dropdown/Dropdown.tsx",
+      "supersededBy": "Dropdown"
     },
     {
       "name": "DialButtonDropdown",
       "category": "Dropdown",
-      "description": "A Button dropdown component based on DialDropdown component\naliases: SplitButton|MenuButton",
+      "generation": "1.0",
+      "description": "A Button dropdown component based on DialDropdown component\naliases: SplitButton|MenuButton\nDesign system 1.0",
       "props": [
         {
           "name": "items",
@@ -3599,12 +6393,14 @@
       "examples": [
         "<DialButtonDropdown\n  title=\"Click me\"\n  variant={ButtonVariant.Neutral}\n  items={[{ key: 'profile', label: 'Profile' }, { key: 'logout', label: 'Logout' }]}\n/>"
       ],
-      "sourceFile": "components/ButtonDropdown/ButtonDropdown.tsx"
+      "sourceFile": "components/ButtonDropdown/ButtonDropdown.tsx",
+      "supersededBy": "ButtonDropdown"
     },
     {
       "name": "DialDropdownIcon",
       "category": "Dropdown",
-      "description": "A compact icon trigger with a dropdown menu.\naliases: ModelPicker|IconMenu|AvatarDropdown",
+      "generation": "1.0",
+      "description": "A compact icon trigger with a dropdown menu.\naliases: ModelPicker|IconMenu|AvatarDropdown\nDesign system 1.0",
       "props": [
         {
           "name": "icon",
@@ -3666,7 +6462,8 @@
     {
       "name": "DialFileManager",
       "category": "FileManager",
-      "description": "File Manager layout with a collapsible folders tree, breadcrumb/search header, and a data grid.\naliases: FileExplorer|FileBrowser\n\nFeatures:\n- Global `path` drives both the breadcrumb trail and the visible folder in the grid.\n- The grid shows children of the current folder. When a search query is present, it scans all nested descendants.\n- Pluggable tree, navigation panel, and grid behaviors via `treeOptions`, `navigationPanelOptions`, and `gridOptions`.\n- Optional filters toggle via `gridOptions.filterable` (default `true`).\n- Supports bulk actions toolbar when items are selected.",
+      "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",
       "props": [
         {
           "name": "path",
@@ -4148,7 +6945,8 @@
     {
       "name": "DialDestinationFolderPopup",
       "category": "FileManager/components",
-      "description": "DestinationFolderPopup\naliases: FolderSelector|PathChooser\n\nA popup dialog for selecting a destination folder when copying or moving files.\nDisplays a File Manager interface with a footer containing action buttons and\na toggle for showing hidden files.",
+      "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/>"
@@ -4158,7 +6956,8 @@
     {
       "name": "DialFoldersTree",
       "category": "Data Display",
-      "description": "DialFoldersTree — A hierarchical folder tree component with nested expand/collapse support, selection highlighting,\nand optional file display.\n\nProvides a fully interactive, recursive folder structure with:\n- Expandable and collapsible items\n- Optional file visibility\n- Loading state indicators for specific paths\n- Inline renaming support for folders or files\n- Multi-item selection highlighting\n- Context menu integration via `DialDropdown`\n- Recursive rendering with indentation and icons\n- Customizable empty state (title, description, and icon)",
+      "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",
@@ -4330,7 +7129,8 @@
     {
       "name": "DialSchemaRenderer",
       "category": "Name",
-      "description": "Renders a JSON Schema as a form UI with collapsible sections, validation, and default values.\naliases: SchemaRenderer|JsonSchemaForm",
+      "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/>"
@@ -4340,7 +7140,8 @@
     {
       "name": "DialJsonEditor",
       "category": "Data Display",
-      "description": "A JSON editor component built on top of Monaco Editor.\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.",
+      "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",
@@ -4392,6 +7193,7 @@
     {
       "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": [
         {
@@ -4449,10 +7251,26 @@
         "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",
@@ -4487,6 +7305,33 @@
       ],
       "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",
@@ -4613,6 +7458,21 @@
       "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}"
     },
+    {
+      "name": "EditorThemes",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "dark",
+          "value": "'dark'"
+        },
+        {
+          "name": "light",
+          "value": "'light'"
+        }
+      ],
+      "sourceFile": "types/editor.ts"
+    },
     {
       "name": "ButtonVariant",
       "kind": "enum",
@@ -4629,6 +7489,10 @@
           "name": "Danger",
           "value": "'danger'"
         },
+        {
+          "name": "Static",
+          "value": "'static'"
+        },
         {
           "name": "Success",
           "value": "'success'"
@@ -4788,6 +7652,21 @@
       ],
       "sourceFile": "types/size.ts"
     },
+    {
+      "name": "ScreenResolution",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Mobile",
+          "value": "'mobile'"
+        },
+        {
+          "name": "Tablet",
+          "value": "'tablet'"
+        }
+      ],
+      "sourceFile": "types/tab.ts"
+    },
     {
       "name": "TabOrientation",
       "kind": "enum",
@@ -5066,7 +7945,7 @@
       "sourceFile": "types/resizable-container.ts"
     },
     {
-      "name": "DialSkeletonVariant",
+      "name": "SkeletonVariant",
       "kind": "enum",
       "members": [
         {
@@ -5089,7 +7968,7 @@
       "sourceFile": "types/skeleton.ts"
     },
     {
-      "name": "DialSkeletonAvatarSize",
+      "name": "SkeletonAvatarSize",
       "kind": "enum",
       "members": [
         {
@@ -5108,7 +7987,7 @@
       "sourceFile": "types/skeleton.ts"
     },
     {
-      "name": "DialSkeletonAvatarShape",
+      "name": "SkeletonAvatarShape",
       "kind": "enum",
       "members": [
         {
@@ -5303,6 +8182,26 @@
         {
           "name": "children?",
           "value": "DropdownItem[]"
+        },
+        {
+          "name": "menuHeader?",
+          "value": "ReactNode | (() => ReactNode)"
+        },
+        {
+          "name": "menuFooter?",
+          "value": "ReactNode | (() => ReactNode)"
+        },
+        {
+          "name": "renderSubMenu?",
+          "value": "() => ReactNode"
+        },
+        {
+          "name": "renderItem?",
+          "value": "(item: DropdownItem) => ReactNode"
+        },
+        {
+          "name": "subMenuHoverOptions?",
+          "value": "DropdownSubMenuHoverOptions"
         }
       ],
       "sourceFile": "models/dropdown.ts"
@@ -5554,6 +8453,90 @@
       ],
       "sourceFile": "models/selection-mode.ts"
     },
+    {
+      "name": "SchemaRendererVariant",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Sections",
+          "value": "'sections'"
+        },
+        {
+          "name": "Flat",
+          "value": "'flat'"
+        },
+        {
+          "name": "FlatSections",
+          "value": "'flat-sections'"
+        }
+      ],
+      "sourceFile": "components/SchemaRenderer/types.ts"
+    },
+    {
+      "name": "SchemaDisplayMode",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Select",
+          "value": "'select'"
+        },
+        {
+          "name": "Radio",
+          "value": "'radio'"
+        }
+      ],
+      "sourceFile": "components/SchemaRenderer/types.ts"
+    },
+    {
+      "name": "SchemaOrientation",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Row",
+          "value": "'row'"
+        },
+        {
+          "name": "Column",
+          "value": "'column'"
+        }
+      ],
+      "sourceFile": "components/SchemaRenderer/types.ts"
+    },
+    {
+      "name": "JsonSchemaType",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "String",
+          "value": "'string'"
+        },
+        {
+          "name": "Number",
+          "value": "'number'"
+        },
+        {
+          "name": "Integer",
+          "value": "'integer'"
+        },
+        {
+          "name": "Boolean",
+          "value": "'boolean'"
+        },
+        {
+          "name": "Object",
+          "value": "'object'"
+        },
+        {
+          "name": "Array",
+          "value": "'array'"
+        },
+        {
+          "name": "Null",
+          "value": "'null'"
+        }
+      ],
+      "sourceFile": "components/SchemaRenderer/types.ts"
+    },
     {
       "name": "JsonSchema",
       "kind": "interface",
@@ -5641,13 +8624,17 @@
           "name": "anyOf?",
           "value": "JsonSchemaDef[]"
         },
+        {
+          "name": "allOf?",
+          "value": "JsonSchemaDef[]"
+        },
         {
           "name": "discriminator?",
           "value": "{\n    propertyName: string;\n    mapping: Record<string, string>;\n  }"
         },
         {
           "name": "'dial:meta'?",
-          "value": "Record<string, unknown>"
+          "value": "DialMeta"
         },
         {
           "name": "'dial:resource'?",
@@ -5674,122 +8661,164 @@
         }
       ],
       "sourceFile": "components/SchemaRenderer/types.ts"
-    }
-  ],
-  "hooks": [
-    {
-      "name": "AnalyticsCardVariant",
-      "sourceFile": "types/analytics.ts",
-      "signature": "enum AnalyticsCardVariant { Default = 'default', Compact = 'compact' }"
-    },
-    {
-      "name": "useDialFileManagerTabs",
-      "sourceFile": "components/FileManager/hooks/use-file-manager-tabs.tsx",
-      "signature": "(tabLabels?: Record<DialFileManagerTabs, string>, initialTab: DialFileManagerTabs = DialFileManagerTabs.MyFiles) => unknown"
-    },
-    {
-      "name": "useEditableItem",
-      "sourceFile": "hooks/use-editable-item.tsx",
-      "description": "A React hook that manages the behavior of an inline-editable text input.\nIt provides validation handling, cancel/restore logic, auto-focus behavior,\nkeyboard shortcuts, and outside-click detection.",
-      "signature": "function useEditableItem({\n  value: initialValue,\n  isEditing,\n  isCreating,\n  isLoading = false,\n  restoreOnCancel = true,\n  onValidate,\n  onSave,\n  onCancel,\n  onCreateFolderSave,\n  onCreateFolderCancel,\n}: UseEditableItemOptions): UseEditableItemResult"
-    },
-    {
-      "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": "SchemaRendererVariant",
-      "sourceFile": "components/SchemaRenderer/types.ts",
-      "signature": "enum SchemaRendererVariant { Sections = 'sections', Flat = 'flat', FlatSections = 'flat-sections' }"
+      "name": "NotificationVariant",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Info",
+          "value": "'info'"
+        },
+        {
+          "name": "Success",
+          "value": "'success'"
+        },
+        {
+          "name": "Warning",
+          "value": "'warning'"
+        },
+        {
+          "name": "Error",
+          "value": "'error'"
+        },
+        {
+          "name": "Loading",
+          "value": "'loading'"
+        }
+      ],
+      "sourceFile": "types/notification.ts"
     },
     {
-      "name": "SchemaDisplayMode",
-      "sourceFile": "components/SchemaRenderer/types.ts",
-      "signature": "enum SchemaDisplayMode { Select = 'select', Radio = 'radio' }"
+      "name": "NotificationType",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Toast",
+          "value": "'toast'"
+        },
+        {
+          "name": "SectionMessage",
+          "value": "'section-message'"
+        }
+      ],
+      "sourceFile": "types/notification.ts"
     },
     {
-      "name": "SchemaOrientation",
-      "sourceFile": "components/SchemaRenderer/types.ts",
-      "signature": "enum SchemaOrientation { Row = 'row', Column = 'column' }"
+      "name": "CalendarMode",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Date",
+          "value": "'date'"
+        },
+        {
+          "name": "DateTime",
+          "value": "'datetime'"
+        },
+        {
+          "name": "Time",
+          "value": "'time'"
+        },
+        {
+          "name": "Weekday",
+          "value": "'weekday'"
+        }
+      ],
+      "sourceFile": "types/calendar.ts"
     },
     {
-      "name": "JsonSchemaType",
-      "sourceFile": "components/SchemaRenderer/types.ts",
-      "signature": "enum JsonSchemaType { String = 'string', Number = 'number', Integer = 'integer', Boolean = 'boolean', Object = 'object', Array = 'array', Null = 'null' }"
+      "name": "CalendarValue",
+      "kind": "type",
+      "sourceFile": "components/New/Calendar/Calendar.tsx",
+      "typeBody": "Date | string | null"
     },
     {
-      "name": "NotificationVariant",
-      "sourceFile": "types/notification.ts",
-      "signature": "enum NotificationVariant { Info = 'info', Success = 'success', Warning = 'warning', Error = 'error', Loading = 'loading' }"
-    },
+      "name": "TabItem",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "id",
+          "value": "string"
+        },
+        {
+          "name": "label",
+          "value": "string"
+        },
+        {
+          "name": "count?",
+          "value": "number"
+        },
+        {
+          "name": "disabled?",
+          "value": "boolean"
+        }
+      ],
+      "sourceFile": "components/New/Tabs/Tabs.tsx",
+      "description": "A single tab entry rendered by ."
+    }
+  ],
+  "hooks": [
     {
-      "name": "NotificationType",
-      "sourceFile": "types/notification.ts",
-      "signature": "enum NotificationType { Toast = 'toast', SectionMessage = 'section-message' }"
+      "name": "DEFAULT_ANALYTICS_BAR_COLOR_MAP",
+      "sourceFile": "components/Analytics/Bar/utils.ts",
+      "description": "Default color map for , expressed as ratios (value / maxValue).\nA value of `0` leaves the bar empty (track shows through); a value at the maximum\nuses the dedicated full-bar color.",
+      "signature": "DEFAULT_ANALYTICS_BAR_COLOR_MAP: AnalyticsBarColorStop[]"
     },
     {
-      "name": "Notification",
-      "sourceFile": "components/New/Notification/Notification.tsx",
-      "description": "A contextual feedback component for displaying important messages.\naliases: Notification\n\nRenders a colored container with an icon, message text, and an optional\nclose button.",
-      "signature": "Notification: FC<NotificationProps>"
+      "name": "DEFAULT_GRID_DATE_FORMAT_OPTIONS",
+      "sourceFile": "components/Grid/renderers/constants.ts"
     },
     {
-      "name": "ErrorMessageNotification",
-      "sourceFile": "components/New/Notification/NotificationWrapper.tsx",
-      "signature": "ErrorMessageNotification = NotificationTypeCreator(\n  NotificationType.SectionMessage,\n  NotificationVariant.Error,\n)"
+      "name": "DEFAULT_GRID_DATE_LOCALE",
+      "sourceFile": "components/Grid/renderers/constants.ts"
     },
     {
-      "name": "ErrorToastNotification",
-      "sourceFile": "components/New/Notification/NotificationWrapper.tsx",
-      "signature": "ErrorToastNotification = NotificationVariantCreator(\n  NotificationVariant.Error,\n  NotificationType.Toast,\n)"
+      "name": "convertGridDateToDate",
+      "sourceFile": "components/Grid/renderers/utils.ts"
     },
     {
-      "name": "InfoMessageNotification",
-      "sourceFile": "components/New/Notification/NotificationWrapper.tsx",
-      "signature": "InfoMessageNotification = NotificationTypeCreator(\n  NotificationType.SectionMessage,\n  NotificationVariant.Info,\n)"
+      "name": "useDialFileManagerTabs",
+      "sourceFile": "components/FileManager/hooks/use-file-manager-tabs.tsx",
+      "signature": "(tabLabels?: Record<DialFileManagerTabs, string>, initialTab: DialFileManagerTabs = DialFileManagerTabs.MyFiles) => unknown"
     },
     {
-      "name": "InfoToastNotification",
-      "sourceFile": "components/New/Notification/NotificationWrapper.tsx",
-      "signature": "InfoToastNotification = NotificationVariantCreator(\n  NotificationVariant.Info,\n  NotificationType.Toast,\n)"
+      "name": "EDITABLE_CONTAINER_ATTRIBUTE",
+      "sourceFile": "hooks/use-editable-item.tsx",
+      "signature": "EDITABLE_CONTAINER_ATTRIBUTE = 'data-editable-container'"
     },
     {
-      "name": "LoadingMessageNotification",
-      "sourceFile": "components/New/Notification/NotificationWrapper.tsx",
-      "signature": "LoadingMessageNotification = NotificationTypeCreator(\n  NotificationType.SectionMessage,\n  NotificationVariant.Loading,\n)"
+      "name": "editableContainerProps",
+      "sourceFile": "hooks/use-editable-item.tsx",
+      "signature": "editableContainerProps = {\n  [EDITABLE_CONTAINER_ATTRIBUTE]: '',\n} as const"
     },
     {
-      "name": "LoadingToastNotification",
-      "sourceFile": "components/New/Notification/NotificationWrapper.tsx",
-      "signature": "LoadingToastNotification = NotificationVariantCreator(\n  NotificationVariant.Loading,\n  NotificationType.Toast,\n)"
+      "name": "useEditableItem",
+      "sourceFile": "hooks/use-editable-item.tsx",
+      "description": "A React hook that manages the behavior of an inline-editable text input.\nIt provides validation handling, cancel/restore logic, auto-focus behavior,\nkeyboard shortcuts, and outside-click detection.",
+      "signature": "function useEditableItem({\n  value: initialValue,\n  isEditing,\n  isCreating,\n  isLoading = false,\n  restoreOnCancel = true,\n  onValidate,\n  onSave,\n  onCancel,\n  onCreateFolderSave,\n  onCreateFolderCancel,\n}: UseEditableItemOptions): UseEditableItemResult"
     },
     {
-      "name": "SuccessMessageNotification",
-      "sourceFile": "components/New/Notification/NotificationWrapper.tsx",
-      "signature": "SuccessMessageNotification = NotificationTypeCreator(\n  NotificationType.SectionMessage,\n  NotificationVariant.Success,\n)"
+      "name": "UseEditableItemOptions",
+      "sourceFile": "hooks/use-editable-item.tsx"
     },
     {
-      "name": "SuccessToastNotification",
-      "sourceFile": "components/New/Notification/NotificationWrapper.tsx",
-      "signature": "SuccessToastNotification = NotificationVariantCreator(\n  NotificationVariant.Success,\n  NotificationType.Toast,\n)"
+      "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": "WarningMessageNotification",
-      "sourceFile": "components/New/Notification/NotificationWrapper.tsx",
-      "signature": "WarningMessageNotification = NotificationTypeCreator(\n  NotificationType.SectionMessage,\n  NotificationVariant.Warning,\n)"
+      "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": "WarningToastNotification",
-      "sourceFile": "components/New/Notification/NotificationWrapper.tsx",
-      "signature": "WarningToastNotification = NotificationVariantCreator(\n  NotificationVariant.Warning,\n  NotificationType.Toast,\n)"
+      "name": "matchesAccept",
+      "sourceFile": "utils/file-accept.ts",
+      "description": "Tests a file against the value of a native `accept` attribute.\n\nThe file picker filters by `accept` on its own, but a drop does not: dropping\na `.png` onto an input that accepts `.md` hands the file over regardless. Any\ndrop target therefore has to re-check what it received.\n\nSupports all three `accept` token forms — an extension (`.md`), a full MIME\ntype (`text/markdown`) and a MIME wildcard (`image/*`). An empty or missing\n`accept` accepts everything, matching the attribute's own semantics.",
+      "signature": "(file: File, accept?: string) => boolean"
     }
   ],
   "utils": [