@epam/ai-dial-ui-kit 0.13.0-dev.42 → 0.13.0-dev.44

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.13.0-dev.42",
-  "generatedAt": "2026-08-07T19:38:57.656Z",
+  "version": "0.13.0-dev.44",
+  "generatedAt": "2026-08-08T15:57:28.698Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -23,41 +23,2295 @@
   "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-lead-text`            | normal   | 12px / 16px (+0.03em)   |\n| `.dial-tiny-semi-text`            | semibold | 12px / 16px             |\n| `.dial-caption-text`              | normal   | 10px / 12px             |\n| `.dial-caption-semi-text`         | semibold | 10px / 12px (+0.06em)   |\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-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)` | `#848E9C` |\n\n### borderColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `hover-alpha` | `var(--stroke-hover-alpha)` | `#2764D933` |\n| `focus-black` | `var(--stroke-focus-black)` | `#161B2D` |\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\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)` | `#DCE0E8` |\n| `control-disable-beta` | `var(--text-control-disable-beta)` | `#848E9C` |\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": "",
+      "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": "Skeleton",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "Skeleton\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 | 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\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.",
+      "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.\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\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": "label",
+          "type": "string",
+          "required": false,
+          "description": "Optional label rendered above the control"
+        },
+        {
+          "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\" />"
+      ],
+      "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\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/>"
+      ],
+      "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",
+      "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",
+      "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",
+      "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
+        }
+      ],
+      "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",
+      "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",
+      "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 DialDropdown component\naliases: SplitButton|MenuButton",
+      "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,\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 `DialDropdown`.",
+      "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\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\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.",
+      "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",
+      "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",
+      "props": [
+        {
+          "name": "labelProps",
+          "type": "DialLabelProps",
+          "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",
+      "props": [
+        {
+          "name": "labelProps",
+          "type": "DialLabelProps",
+          "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": "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\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\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\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": "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"
+        }
+      ],
+      "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\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\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\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",
+      "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": "DialCaptionText",
       "category": "Elements",
+      "generation": "1.0",
       "description": "A component for displaying error messages with consistent styling\naliases: HelperText|ValidationText",
       "props": [
         {
-          "name": "text",
+          "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\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. Pair with `delta` to show a change badge next\nto the card title.",
+      "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
+        },
+        {
+          "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={12}\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\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.",
+      "props": [
+        {
+          "name": "value",
+          "type": "number",
+          "required": false,
+          "description": "Current value used to size and color the bar. Omit it 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`."
+        },
+        {
+          "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\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,
-          "description": "The text to display. If undefined or empty, nothing is rendered"
+          "defaultValue": "'Error'",
+          "description": "Text shown inside the tag."
         },
         {
-          "name": "variant",
-          "type": "CaptionType",
+          "name": "className",
+          "type": "string",
           "required": false,
-          "defaultValue": "CaptionType.Description",
-          "description": "The variant of the caption text, e.g., error or description."
+          "description": "Additional CSS classes applied to the tag."
         }
       ],
       "examples": [
-        "<DialCaptionText text=\"This field is required\" variant={CaptionType.Error} />"
+        "<DialAnalyticsErrorTag />"
       ],
-      "sourceFile": "components/CaptionText/CaptionText.tsx"
+      "sourceFile": "components/Analytics/ErrorTag/ErrorTag.tsx"
     },
     {
-      "name": "DialErrorText",
-      "category": "Elements",
-      "description": "",
-      "props": [],
-      "examples": [],
-      "sourceFile": "components/CaptionText/CaptionText.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",
+      "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>",
+          "required": true,
+          "description": "Map of metric name to numeric value. Each entry renders one bar."
+        },
+        {
+          "name": "compareData",
+          "type": "Record<string, number>",
+          "required": false,
+          "description": "Enables compare mode: each entry shows a delta badge and two bars."
+        },
+        {
+          "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) => void",
+          "required": false,
+          "description": "Invoked with the entry key and value when a bar 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. Not applied in compare mode."
+        },
+        {
+          "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 most populated band; empty\ncolumns are outlined, populated columns are filled with their band color. A baseline\nseparates the columns from the interval labels, and hovering a column reveals a\ntooltip with its share of the total.\naliases: Distribution|ColumnChart|FrequencyChart",
+      "props": [
+        {
+          "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,
+          "defaultValue": "'values'",
+          "description": "Noun used in the hover tooltip."
+        },
+        {
+          "name": "showCount",
+          "type": "boolean",
+          "required": false,
+          "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": [
+        "<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/Analytics/Histogram/Histogram.tsx"
     },
     {
       "name": "DialLabel",
       "category": "Elements",
+      "generation": "1.0",
       "description": "A label component\naliases: FormLabel|RequiredIndicator",
       "props": [
         {
@@ -82,11 +2336,13 @@
       "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",
+      "generation": "1.0",
       "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.",
       "props": [
         {
@@ -165,6 +2421,7 @@
     {
       "name": "DialIcon",
       "category": "Data Display",
+      "generation": "1.0",
       "description": "A wrapper component for rendering icons with consistent styling\naliases: IconRenderer|SVGWrapper",
       "props": [
         {
@@ -188,6 +2445,7 @@
     {
       "name": "DialNotification",
       "category": "Elements",
+      "generation": "1.0",
       "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.",
       "props": [
         {
@@ -247,11 +2505,13 @@
       "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",
+      "generation": "1.0",
       "description": "A simple loading spinner component.\naliases: LoadingSpinner|ProgressSpinner\n\nRenders a spinning SVG with optional full-width container.",
       "props": [
         {
@@ -296,6 +2556,7 @@
     {
       "name": "DialProgressBar",
       "category": "Status",
+      "generation": "1.0",
       "description": "",
       "props": [
         {
@@ -333,6 +2594,7 @@
     {
       "name": "DialPagination",
       "category": "Navigation",
+      "generation": "1.0",
       "description": "",
       "props": [
         {
@@ -362,6 +2624,7 @@
     {
       "name": "DialCheckbox",
       "category": "Form",
+      "generation": "1.0",
       "description": "A Checkbox component with styling options\naliases: ToggleCheckbox|MultiSelectOption",
       "props": [
         {
@@ -415,6 +2678,7 @@
     {
       "name": "DialSteps",
       "category": "Navigation",
+      "generation": "1.0",
       "description": "Props for the DialSteps component, which renders a multi-step navigation UI.\naliases: StepWizard|ProgressSteps",
       "props": [
         {
@@ -444,6 +2708,7 @@
     {
       "name": "DialRadioButton",
       "category": "Free",
+      "generation": "1.0",
       "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.",
       "props": [
         {
@@ -541,6 +2806,7 @@
     {
       "name": "DialRadioGroup",
       "category": "Form",
+      "generation": "1.0",
       "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.",
       "props": [
         {
@@ -660,6 +2926,7 @@
     {
       "name": "DialSlider",
       "category": "Form",
+      "generation": "1.0",
       "description": "A range slider with a custom thumb showing the current value and optional labels.\naliases: RangeInput|TemperatureSlider",
       "props": [
         {
@@ -753,6 +3020,7 @@
     {
       "name": "DialNoDataContent",
       "category": "Feedback",
+      "generation": "1.0",
       "description": "A component for displaying a message and icon when there is no data to show.\naliases: EmptyState|NoResults",
       "props": [
         {
@@ -800,6 +3068,7 @@
     {
       "name": "DialCollapsibleSidebar",
       "category": "Navigation",
+      "generation": "1.0",
       "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.",
       "props": [
         {
@@ -874,6 +3143,7 @@
     {
       "name": "DialLabelledText",
       "category": "Data Display",
+      "generation": "1.0",
       "description": "A label component for form fields with optional tooltip, content, and custom elements.\naliases: LabelValue|DisplayText",
       "props": [
         {
@@ -921,6 +3191,7 @@
     {
       "name": "DialTag",
       "category": "Tag",
+      "generation": "1.0",
       "description": "A compact label element used for selections, filters, or categories.",
       "props": [
         {
@@ -965,6 +3236,7 @@
     {
       "name": "DialEllipsisTooltip",
       "category": "Overlay",
+      "generation": "1.0",
       "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.",
       "props": [
         {
@@ -1012,6 +3284,7 @@
     {
       "name": "DialDraggableItem",
       "category": "Components",
+      "generation": "1.0",
       "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.",
       "props": [
         {
@@ -1060,6 +3333,7 @@
     {
       "name": "DialFileIcon",
       "category": "FileManager/components",
+      "generation": "1.0",
       "description": "Renders a file-type icon based on a file extension.\naliases: ExtensionIcon|TypeIcon\n\nUses DialIcon to provide consistent icon wrapper styling.",
       "props": [
         {
@@ -1116,6 +3390,7 @@
     {
       "name": "DialFormItem",
       "category": "Form",
+      "generation": "1.0",
       "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)",
       "props": [
         {
@@ -1182,6 +3457,7 @@
     {
       "name": "DialSharedEntityIndicator",
       "category": "FileManager/components",
+      "generation": "1.0",
       "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.",
       "props": [
         {
@@ -1232,6 +3508,7 @@
     {
       "name": "DialFileName",
       "category": "FileManager/components",
+      "generation": "1.0",
       "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.",
       "props": [
         {
@@ -1311,6 +3588,7 @@
     {
       "name": "DialFolderName",
       "category": "FileManager/components",
+      "generation": "1.0",
       "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.",
       "props": [
         {
@@ -1387,6 +3665,7 @@
     {
       "name": "DialResizableContainer",
       "category": "Components",
+      "generation": "1.0",
       "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",
       "props": [
         {
@@ -1457,6 +3736,7 @@
     {
       "name": "DialConditionalResizableContainer",
       "category": "Components",
+      "generation": "1.0",
       "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.",
       "props": [
         {
@@ -1475,6 +3755,7 @@
     {
       "name": "DialGrid",
       "category": "Grid",
+      "generation": "1.0",
       "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",
       "props": [
         {
@@ -1629,6 +3910,7 @@
     {
       "name": "DialDateCellRenderer",
       "category": "Grid",
+      "generation": "1.0",
       "description": "Minimal date cell renderer (ag-Grid compatible).\n\nRenders the value in the **\"MMM dd, yyyy\"** format (e.g., \"Jul 20, 2025\"),\nwrapped in `DialEllipsisTooltip` (tooltip only appears if truncated).",
       "props": [
         {
@@ -1677,6 +3959,7 @@
     {
       "name": "DialTabs",
       "category": "Navigation",
+      "generation": "1.0",
       "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.",
       "props": [
         {
@@ -1766,6 +4049,7 @@
     {
       "name": "DialBreadcrumb",
       "category": "Navigation",
+      "generation": "1.0",
       "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.",
       "props": [
         {
@@ -1822,6 +4106,7 @@
     {
       "name": "DialBreadcrumbItem",
       "category": "Navigation",
+      "generation": "1.0",
       "description": "",
       "props": [
         {
@@ -1882,6 +4167,7 @@
     {
       "name": "DialButton",
       "category": "Elements/Buttons",
+      "generation": "1.0",
       "description": "A Button component with flexible icon and text positioning\naliases: ActionButton|CallToAction",
       "props": [
         {
@@ -1944,11 +4230,13 @@
         "<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",
+      "generation": "1.0",
       "description": "A Icon Button component with flexible icon and text positioning\naliases: IconicButton|SymbolButton",
       "props": [
         {
@@ -1987,101 +4275,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",
+      "generation": "1.0",
       "description": "A Primary Button component with predefined primary variant",
       "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"
+      "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",
+      "generation": "1.0",
       "description": "A Primary Icon Button component with predefined primary variant",
       "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": [
@@ -2092,6 +4400,7 @@
     {
       "name": "DialSuccessIconButton",
       "category": "Elements/Buttons",
+      "generation": "1.0",
       "description": "A Success Icon Button component with predefined success variant",
       "props": [],
       "examples": [
@@ -2102,6 +4411,7 @@
     {
       "name": "DialTertiaryIconButton",
       "category": "Elements/Buttons",
+      "generation": "1.0",
       "description": "A Tertiary Icon Button component with predefined tertiary variant",
       "props": [],
       "examples": [
@@ -2112,6 +4422,7 @@
     {
       "name": "DialCloseButton",
       "category": "Elements/Buttons",
+      "generation": "1.0",
       "description": "A Close button component with a customizable icon and accessible label.\naliases: DismissButton|ExitButton",
       "props": [
         {
@@ -2149,11 +4460,13 @@
       "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",
+      "generation": "1.0",
       "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`.",
       "props": [
         {
@@ -2171,6 +4484,7 @@
     {
       "name": "DialTextarea",
       "category": "Elements",
+      "generation": "1.0",
       "description": "A flexible textarea component with validation support and consistent styling\naliases: MultilineInput|TextBox",
       "props": [
         {
@@ -2220,11 +4534,13 @@
       "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",
+      "generation": "1.0",
       "description": "A Tooltip component that displays information on hover\naliases: HoverPopover|InfoPopover",
       "props": [
         {
@@ -2266,6 +4582,7 @@
     {
       "name": "DialTooltipContainer",
       "category": "Overlay",
+      "generation": "1.0",
       "description": "The container component that provides tooltip context and state management",
       "props": [],
       "examples": [],
@@ -2274,6 +4591,7 @@
     {
       "name": "DialTooltipContent",
       "category": "Overlay",
+      "generation": "1.0",
       "description": "The content area of a tooltip that displays the tooltip information",
       "props": [],
       "examples": [],
@@ -2282,6 +4600,7 @@
     {
       "name": "DialTooltipTrigger",
       "category": "Overlay",
+      "generation": "1.0",
       "description": "The trigger element for a tooltip that can be clicked or hovered",
       "props": [],
       "examples": [],
@@ -2290,6 +4609,7 @@
     {
       "name": "DialSwitch",
       "category": "Form",
+      "generation": "1.0",
       "description": "A Switch component with various styling options\naliases: ToggleSwitch|BinaryToggle",
       "props": [
         {
@@ -2337,6 +4657,7 @@
     {
       "name": "DialSegmentedControl",
       "category": "Form",
+      "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\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": [
         {
@@ -2384,6 +4705,7 @@
     {
       "name": "DialPopup",
       "category": "Overlay",
+      "generation": "1.0",
       "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.",
       "props": [
         {
@@ -2493,11 +4815,13 @@
       "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",
+      "generation": "1.0",
       "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.",
       "props": [
         {
@@ -2575,11 +4899,13 @@
       "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",
+      "generation": "1.0",
       "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`.",
       "props": [],
       "examples": [
@@ -2590,6 +4916,7 @@
     {
       "name": "DialFormPopup",
       "category": "Overlay",
+      "generation": "1.0",
       "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.",
       "props": [
         {
@@ -2653,6 +4980,7 @@
     {
       "name": "DialInput",
       "category": "Elements/Inputs",
+      "generation": "1.0",
       "description": "A flexible input component with icon support and various styling options\naliases: TextField|FormInput",
       "props": [
         {
@@ -2738,11 +5066,13 @@
       "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",
+      "generation": "1.0",
       "description": "A number input field component\naliases: NumericField|NumberField",
       "props": [
         {
@@ -2761,21 +5091,25 @@
       "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",
+      "generation": "1.0",
       "description": "A password input component with show/hide functionality and customizable props.\naliases: SecureInput|ToggleablePassword",
       "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",
+      "generation": "1.0",
       "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.",
       "props": [
         {
@@ -2805,6 +5139,7 @@
     {
       "name": "DialInputPopup",
       "category": "Overlay",
+      "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\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": [
         {
@@ -2914,6 +5249,7 @@
     {
       "name": "DialAutocompleteInputValue",
       "category": "Form",
+      "generation": "1.0",
       "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.",
       "props": [
         {
@@ -2956,6 +5292,7 @@
     {
       "name": "DialTagInput",
       "category": "Form",
+      "generation": "1.0",
       "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.",
       "props": [
         {
@@ -3042,6 +5379,7 @@
     {
       "name": "DialSelect",
       "category": "Form",
+      "generation": "1.0",
       "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.",
       "props": [
         {
@@ -3263,11 +5601,13 @@
       "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",
+      "generation": "1.0",
       "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).",
       "props": [
         {
@@ -3291,6 +5631,7 @@
     {
       "name": "DialLoadFileArea",
       "category": "Form",
+      "generation": "1.0",
       "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.",
       "props": [
         {
@@ -3332,6 +5673,7 @@
     {
       "name": "DialLoadFileAreaField",
       "category": "Form",
+      "generation": "1.0",
       "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.",
       "props": [
         {
@@ -3368,6 +5710,7 @@
     {
       "name": "DialDropdown",
       "category": "Dropdown",
+      "generation": "1.0",
       "description": "",
       "props": [
         {
@@ -3499,11 +5842,13 @@
         }
       ],
       "examples": [],
-      "sourceFile": "components/Dropdown/Dropdown.tsx"
+      "sourceFile": "components/Dropdown/Dropdown.tsx",
+      "supersededBy": "Dropdown"
     },
     {
       "name": "DialButtonDropdown",
       "category": "Dropdown",
+      "generation": "1.0",
       "description": "A Button dropdown component based on DialDropdown component\naliases: SplitButton|MenuButton",
       "props": [
         {
@@ -3516,11 +5861,13 @@
       "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",
+      "generation": "1.0",
       "description": "A compact icon trigger with a dropdown menu.\naliases: ModelPicker|IconMenu|AvatarDropdown",
       "props": [
         {
@@ -3583,6 +5930,7 @@
     {
       "name": "DialFileManager",
       "category": "FileManager",
+      "generation": "1.0",
       "description": "File Manager layout with a collapsible folders tree, breadcrumb/search header, and a data grid.\naliases: FileExplorer|FileBrowser",
       "props": [
         {
@@ -4065,6 +6413,7 @@
     {
       "name": "DialDestinationFolderPopup",
       "category": "FileManager/components",
+      "generation": "1.0",
       "description": "DestinationFolderPopup\naliases: FolderSelector|PathChooser",
       "props": [],
       "examples": [
@@ -4075,6 +6424,7 @@
     {
       "name": "DialFoldersTree",
       "category": "Data Display",
+      "generation": "1.0",
       "description": "DialFoldersTree — A hierarchical folder tree component with nested expand/collapse support, selection highlighting,\nand optional file display.",
       "props": [
         {
@@ -4247,6 +6597,7 @@
     {
       "name": "DialSchemaRenderer",
       "category": "Name",
+      "generation": "1.0",
       "description": "Renders a JSON Schema as a form UI with collapsible sections, validation, and default values.\naliases: SchemaRenderer|JsonSchemaForm",
       "props": [],
       "examples": [
@@ -4257,6 +6608,7 @@
     {
       "name": "DialJsonEditor",
       "category": "Data Display",
+      "generation": "1.0",
       "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.",
       "props": [
         {
@@ -4309,6 +6661,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": [
         {
@@ -4366,10 +6719,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",
@@ -4404,6 +6773,21 @@
       ],
       "sourceFile": "models/analytics.ts"
     },
+    {
+      "name": "DialProgressBarSize",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Small",
+          "value": "'sm'"
+        },
+        {
+          "name": "Medium",
+          "value": "'md'"
+        }
+      ],
+      "sourceFile": "components/ProgressBar/ProgressBar.tsx"
+    },
     {
       "name": "DialTooltipContainerOptions",
       "kind": "interface",
@@ -5526,11 +7910,95 @@
           "value": "'MULTIPLE'"
         },
         {
-          "name": "SINGLE",
-          "value": "'SINGLE'"
+          "name": "SINGLE",
+          "value": "'SINGLE'"
+        }
+      ],
+      "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": "models/selection-mode.ts"
+      "sourceFile": "components/SchemaRenderer/types.ts"
     },
     {
       "name": "JsonSchema",
@@ -5657,6 +8125,71 @@
       ],
       "sourceFile": "components/SchemaRenderer/types.ts"
     },
+    {
+      "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": "NotificationType",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Toast",
+          "value": "'toast'"
+        },
+        {
+          "name": "SectionMessage",
+          "value": "'section-message'"
+        }
+      ],
+      "sourceFile": "types/notification.ts"
+    },
+    {
+      "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": "CalendarValue",
       "kind": "type",
@@ -5666,20 +8199,10 @@
   ],
   "hooks": [
     {
-      "name": "AnalyticsCardVariant",
-      "sourceFile": "types/analytics.ts",
-      "signature": "enum AnalyticsCardVariant { Default = 'default', Compact = 'compact' }"
-    },
-    {
-      "name": "Spinner",
-      "sourceFile": "components/Spinner/Spinner.tsx",
-      "signature": "Spinner: FC<SpinnerProps>"
-    },
-    {
-      "name": "Skeleton",
-      "sourceFile": "components/Skeleton/Skeleton.tsx",
-      "description": "Skeleton\naliases: PlaceholderUI|ShimmerLoader\n\nA placeholder component to show while content is loading.\nProvides various skeleton shapes and configurations.",
-      "signature": "Skeleton: FC<SkeletonProps>"
+      "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": "DEFAULT_GRID_DATE_FORMAT_OPTIONS",
@@ -5729,311 +8252,6 @@
       "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": "SchemaDisplayMode",
-      "sourceFile": "components/SchemaRenderer/types.ts",
-      "signature": "enum SchemaDisplayMode { Select = 'select', Radio = 'radio' }"
-    },
-    {
-      "name": "SchemaOrientation",
-      "sourceFile": "components/SchemaRenderer/types.ts",
-      "signature": "enum SchemaOrientation { Row = 'row', Column = 'column' }"
-    },
-    {
-      "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": "NotificationVariant",
-      "sourceFile": "types/notification.ts",
-      "signature": "enum NotificationVariant { Info = 'info', Success = 'success', Warning = 'warning', Error = 'error', Loading = 'loading' }"
-    },
-    {
-      "name": "NotificationType",
-      "sourceFile": "types/notification.ts",
-      "signature": "enum NotificationType { Toast = 'toast', SectionMessage = 'section-message' }"
-    },
-    {
-      "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.\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.",
-      "signature": "Notification: FC<NotificationProps>"
-    },
-    {
-      "name": "Highlight",
-      "sourceFile": "components/New/Highlight/Highlight.tsx",
-      "description": "Renders text with the first occurrence of `query` wrapped in a highlight mark, with ellipsis truncation and a tooltip when overflowing.",
-      "signature": "Highlight: FC<HighlightProps>"
-    },
-    {
-      "name": "CardShell",
-      "sourceFile": "components/New/CardShell/CardShell.tsx",
-      "description": "A shared elevated card shell used as the base wrapper for browse-grid cards.\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.",
-      "signature": "CardShell: FC<CardShellProps>"
-    },
-    {
-      "name": "ErrorMessageNotification",
-      "sourceFile": "components/New/Notification/NotificationWrapper.tsx",
-      "signature": "ErrorMessageNotification = NotificationTypeCreator(\n  NotificationType.SectionMessage,\n  NotificationVariant.Error,\n)"
-    },
-    {
-      "name": "ErrorToastNotification",
-      "sourceFile": "components/New/Notification/NotificationWrapper.tsx",
-      "signature": "ErrorToastNotification = NotificationVariantCreator(\n  NotificationVariant.Error,\n  NotificationType.Toast,\n)"
-    },
-    {
-      "name": "InfoMessageNotification",
-      "sourceFile": "components/New/Notification/NotificationWrapper.tsx",
-      "signature": "InfoMessageNotification = NotificationTypeCreator(\n  NotificationType.SectionMessage,\n  NotificationVariant.Info,\n)"
-    },
-    {
-      "name": "InfoToastNotification",
-      "sourceFile": "components/New/Notification/NotificationWrapper.tsx",
-      "signature": "InfoToastNotification = NotificationVariantCreator(\n  NotificationVariant.Info,\n  NotificationType.Toast,\n)"
-    },
-    {
-      "name": "LoadingMessageNotification",
-      "sourceFile": "components/New/Notification/NotificationWrapper.tsx",
-      "signature": "LoadingMessageNotification = NotificationTypeCreator(\n  NotificationType.SectionMessage,\n  NotificationVariant.Loading,\n)"
-    },
-    {
-      "name": "LoadingToastNotification",
-      "sourceFile": "components/New/Notification/NotificationWrapper.tsx",
-      "signature": "LoadingToastNotification = NotificationVariantCreator(\n  NotificationVariant.Loading,\n  NotificationType.Toast,\n)"
-    },
-    {
-      "name": "SuccessMessageNotification",
-      "sourceFile": "components/New/Notification/NotificationWrapper.tsx",
-      "signature": "SuccessMessageNotification = NotificationTypeCreator(\n  NotificationType.SectionMessage,\n  NotificationVariant.Success,\n)"
-    },
-    {
-      "name": "SuccessToastNotification",
-      "sourceFile": "components/New/Notification/NotificationWrapper.tsx",
-      "signature": "SuccessToastNotification = NotificationVariantCreator(\n  NotificationVariant.Success,\n  NotificationType.Toast,\n)"
-    },
-    {
-      "name": "WarningMessageNotification",
-      "sourceFile": "components/New/Notification/NotificationWrapper.tsx",
-      "signature": "WarningMessageNotification = NotificationTypeCreator(\n  NotificationType.SectionMessage,\n  NotificationVariant.Warning,\n)"
-    },
-    {
-      "name": "WarningToastNotification",
-      "sourceFile": "components/New/Notification/NotificationWrapper.tsx",
-      "signature": "WarningToastNotification = NotificationVariantCreator(\n  NotificationVariant.Warning,\n  NotificationType.Toast,\n)"
-    },
-    {
-      "name": "CalendarMode",
-      "sourceFile": "types/calendar.ts",
-      "signature": "enum CalendarMode { Date = 'date', DateTime = 'datetime', Time = 'time', Weekday = 'weekday' }"
-    },
-    {
-      "name": "Calendar",
-      "sourceFile": "components/New/Calendar/Calendar.tsx",
-      "description": "A date/time picker supporting four selection modes.\naliases: DatePicker|DateTimePicker\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.",
-      "signature": "Calendar: FC<CalendarProps>"
-    },
-    {
-      "name": "FolderPath",
-      "sourceFile": "components/New/FolderPath/FolderPath.tsx",
-      "description": "A read-only, non-clickable folder/location path built on top of `DialBreadcrumb`.\naliases: FolderBreadcrumb|LocationPath\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.",
-      "signature": "FolderPath: FC<FolderPathProps>"
-    },
-    {
-      "name": "DangerButton",
-      "sourceFile": "components/New/Button/ButtonWrappers.tsx",
-      "description": "A Danger Button component with predefined danger variant",
-      "signature": "DangerButton = ButtonVariantCreator(\n  ButtonVariant.Danger,\n  ButtonAppearance.Solid,\n)"
-    },
-    {
-      "name": "GhostButton",
-      "sourceFile": "components/New/Button/ButtonWrappers.tsx",
-      "description": "A Ghost Button component with predefined ghost appearance",
-      "signature": "GhostButton = ButtonAppearanceCreator(\n  ButtonAppearance.Ghost,\n  ButtonVariant.Primary,\n)"
-    },
-    {
-      "name": "LinkButton",
-      "sourceFile": "components/New/Button/ButtonWrappers.tsx",
-      "description": "A Link Button component with predefined link appearance",
-      "signature": "LinkButton = ButtonAppearanceCreator(\n  ButtonAppearance.Link,\n  ButtonVariant.Primary,\n)"
-    },
-    {
-      "name": "NeutralButton",
-      "sourceFile": "components/New/Button/ButtonWrappers.tsx",
-      "description": "A Neutral Button component with predefined neutral variant",
-      "signature": "NeutralButton = ButtonVariantCreator(\n  ButtonVariant.Neutral,\n  ButtonAppearance.Solid,\n)"
-    },
-    {
-      "name": "OutlinedButton",
-      "sourceFile": "components/New/Button/ButtonWrappers.tsx",
-      "description": "An Outlined Button component with predefined outlined appearance",
-      "signature": "OutlinedButton = ButtonAppearanceCreator(\n  ButtonAppearance.Outlined,\n  ButtonVariant.Neutral,\n)"
-    },
-    {
-      "name": "PrimaryButton",
-      "sourceFile": "components/New/Button/ButtonWrappers.tsx",
-      "description": "A Primary Button component with predefined primary variant",
-      "signature": "PrimaryButton = ButtonVariantCreator(\n  ButtonVariant.Primary,\n  ButtonAppearance.Solid,\n)"
-    },
-    {
-      "name": "DangerIconButton",
-      "sourceFile": "components/New/IconButton/IconButtonWrappers.tsx",
-      "description": "A Danger Icon Button component with predefined danger variant",
-      "signature": "DangerIconButton = IconButtonVariantCreator(\n  ButtonVariant.Danger,\n  ButtonAppearance.Ghost,\n)"
-    },
-    {
-      "name": "GhostIconButton",
-      "sourceFile": "components/New/IconButton/IconButtonWrappers.tsx",
-      "description": "A Ghost Icon Button component with predefined ghost appearance",
-      "signature": "GhostIconButton = IconButtonAppearanceCreator(\n  ButtonAppearance.Ghost,\n  ButtonVariant.Primary,\n)"
-    },
-    {
-      "name": "NeutralIconButton",
-      "sourceFile": "components/New/IconButton/IconButtonWrappers.tsx",
-      "description": "A Neutral Icon Button component with predefined neutral variant",
-      "signature": "NeutralIconButton = IconButtonVariantCreator(\n  ButtonVariant.Neutral,\n  ButtonAppearance.Solid,\n)"
-    },
-    {
-      "name": "PrimaryIconButton",
-      "sourceFile": "components/New/IconButton/IconButtonWrappers.tsx",
-      "description": "A Primary Icon Button component with predefined primary variant",
-      "signature": "PrimaryIconButton = IconButtonVariantCreator(\n  ButtonVariant.Primary,\n  ButtonAppearance.Solid,\n)"
-    },
-    {
-      "name": "StaticIconButton",
-      "sourceFile": "components/New/IconButton/IconButtonWrappers.tsx",
-      "description": "A Outlined Icon Button component with predefined outlined appearance",
-      "signature": "StaticIconButton = IconButtonAppearanceCreator(\n  ButtonAppearance.Solid,\n  ButtonVariant.Static,\n)"
-    },
-    {
-      "name": "Button",
-      "sourceFile": "components/New/Button/Button.tsx",
-      "description": "A Button component with flexible icon and text positioning\naliases: ActionButton|CallToAction",
-      "signature": "Button: FC<ButtonProps>"
-    },
-    {
-      "name": "IconButton",
-      "sourceFile": "components/New/IconButton/IconButton.tsx",
-      "description": "A Icon Button component with flexible icon and text positioning\naliases: IconicButton|SymbolButton",
-      "signature": "IconButton: FC<IconButtonProps>"
-    },
-    {
-      "name": "FabButton",
-      "sourceFile": "components/FabButton/FabButton.tsx",
-      "description": "A Floating Action Button (FAB) component — circular icon button for primary actions.\naliases: FloatingActionButton|FabButton|CircularButton",
-      "signature": "FabButton: FC<FabButtonProps>"
-    },
-    {
-      "name": "ButtonDropdown",
-      "sourceFile": "components/New/ButtonDropdown/ButtonDropdown.tsx",
-      "description": "A Button dropdown component based on DialDropdown component\naliases: SplitButton|MenuButton",
-      "signature": "ButtonDropdown: FC<ButtonDropdownProps>"
-    },
-    {
-      "name": "MarkdownEditor",
-      "sourceFile": "components/New/MarkdownEditor/MarkdownEditor.tsx",
-      "description": "The 2.0 Markdown editor: a formatting toolbar (bold/italic/strikethrough,\ntext style, lists, quote/link/code, table) plus an edit/live/preview mode\nswitcher and fullscreen, built on top of `@uiw/react-md-editor`.",
-      "signature": "MarkdownEditor: FC<MarkdownEditorProps>"
-    },
-    {
-      "name": "InlineSelect",
-      "sourceFile": "components/New/InlineSelect/InlineSelect.tsx",
-      "description": "An inline select control combining `InlineSelectTrigger` with `DialDropdown`.",
-      "signature": "InlineSelect: FC<InlineSelectProps>"
-    },
-    {
-      "name": "InlineSelectTrigger",
-      "sourceFile": "components/New/InlineSelect/InlineSelect.tsx",
-      "signature": "InlineSelectTrigger: FC<InlineSelectTriggerProps>"
-    },
-    {
-      "name": "Select",
-      "sourceFile": "components/New/Select/Select.tsx",
-      "description": "A versatile select supporting single and multiple selections.\naliases: OptionPicker|ChoiceSelector\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.",
-      "signature": "Select: FC<SelectProps>"
-    },
-    {
-      "name": "MultiSelectTags",
-      "sourceFile": "components/New/Select/MultiSelectTags.tsx",
-      "description": "The selected values of a multi-select, rendered as removable tags inside the\nfield.",
-      "signature": "MultiSelectTags: FC<MultiSelectTagsProps>"
-    },
-    {
-      "name": "InfoButton",
-      "sourceFile": "components/New/InfoButton/InfoButton.tsx",
-      "description": "An Info button component with a customizable icon and accessible label.",
-      "signature": "InfoButton: FC<InfoButtonProps>"
-    },
-    {
-      "name": "Label",
-      "sourceFile": "components/New/Label/Label.tsx",
-      "description": "A label component\naliases: FormLabel|RequiredIndicator",
-      "signature": "Label: FC<LabelProps>"
-    },
-    {
-      "name": "Textarea",
-      "sourceFile": "components/New/Textarea/Textarea.tsx",
-      "description": "A flexible textarea component with validation support and consistent styling\naliases: MultilineInput|TextBox",
-      "signature": "Textarea: FC<TextareaProps>"
-    },
-    {
-      "name": "Input",
-      "sourceFile": "components/New/Input/Input.tsx",
-      "description": "A flexible input component with icon support and various styling options\naliases: TextField|FormInput",
-      "signature": "Input: FC<InputProps>"
-    },
-    {
-      "name": "PasswordInput",
-      "sourceFile": "components/New/PasswordInput/PasswordInput.tsx",
-      "description": "A password field with a reveal toggle, built on .\naliases: SecureInput|ToggleablePassword\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.",
-      "signature": "PasswordInput: FC<PasswordInputProps>"
-    },
-    {
-      "name": "NumberInput",
-      "sourceFile": "components/New/NumberInput/NumberInput.tsx",
-      "description": "A number field, built on .\naliases: NumericField|NumberField\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.",
-      "signature": "NumberInput: FC<NumberInputProps>"
-    },
-    {
-      "name": "Popup",
-      "sourceFile": "components/New/Popup/Popup.tsx",
-      "description": "An accessible modal dialog using Floating UI.\naliases: Modal|Dialog\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.",
-      "signature": "Popup: FC<PopupProps>"
-    },
-    {
-      "name": "CloseButton",
-      "sourceFile": "components/New/CloseButton/CloseButton.tsx",
-      "description": "A close button: a ghost  carrying an X icon.\naliases: DismissButton|ExitButton\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.",
-      "signature": "CloseButton: FC<CloseButtonProps>"
-    },
-    {
-      "name": "ConfirmationPopup",
-      "sourceFile": "components/New/ConfirmationPopup/ConfirmationPopup.tsx",
-      "description": "A confirmation dialog built from  and the 2.0 .\naliases: ConfirmDialog|WarningDialog\n\nProvides an accessible modal with a title, optional description or custom content,\nand a footer with Cancel / Confirm actions.",
-      "signature": "ConfirmationPopup: FC<ConfirmationPopupProps>"
-    },
-    {
-      "name": "Dropdown",
-      "sourceFile": "components/New/Dropdown/Dropdown.tsx",
-      "description": "Renders the given trigger (`children`) and a floating contextual menu overlay.\naliases: ContextMenu|PopupMenu\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`.",
-      "signature": "Dropdown: FC<DropdownProps>"
-    },
-    {
-      "name": "CaptionText",
-      "sourceFile": "components/New/CaptionText/CaptionText.tsx",
-      "description": "A component for displaying caption text with consistent styling\naliases: HelperText|ValidationText",
-      "signature": "CaptionText: FC<CaptionTextProps>"
-    },
-    {
-      "name": "ErrorText",
-      "sourceFile": "components/New/CaptionText/CaptionText.tsx",
-      "signature": "ErrorText: FC<Omit<CaptionTextProps, 'variant'>>"
     }
   ],
   "utils": [