@epam/ai-dial-ui-kit 0.16.0-dev.45 → 0.16.0-dev.46

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.45",
-  "generatedAt": "2026-10-24T22:21:11.671Z",
+  "version": "0.16.0-dev.46",
+  "generatedAt": "2026-10-26T10:18:53.241Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -8,13 +8,11 @@
     "cssImport": "import '@epam/ai-dial-ui-kit/styles.css'",
     "peerDependencies": {
       "@modelcontextprotocol/sdk": "^1.29.0",
-      "@monaco-editor/react": "^4.7.0",
       "@uiw/react-md-editor": "^4.1.0",
-      "monaco-editor": "^0.55.1",
       "react": "^19.2.5",
       "react-dom": "^19.2.5"
     },
-    "setupNotes": "## Next.js Integration\n1. Install the package. React is the only peer you have to supply — everything\n   the kit renders with, it installs itself.\n\n``` bash\nnpm install @epam/ai-dial-ui-kit\nnpm install react react-dom\n```\n\nAdd the editor packages only if you use the `@epam/ai-dial-ui-kit/editors`\nsubpath. They are optional peers, so `npm install` stays quiet without them, and\nthe kit only reaches for them when a `Lazy*` editor actually mounts:\n\n``` bash\nnpm install monaco-editor @monaco-editor/react @uiw/react-md-editor\n```\n\n2. Import style in the root layout of the project:\n\n```tsx\n// app/layout.tsx\nimport \"@epam/ai-dial-ui-kit/styles.css\";\n```\n\n3. Usage example\n\n```tsx\n// app/page.tsx\n\"use client\";\nimport { DialPrimaryButton } from \"@epam/ai-dial-ui-kit\";\n\nexport default function Home() {\n  return (\n    <div className=\"w-full h-full flex flex-col gap-3 items-center justify-center\">\n      <h1>Test library</h1>\n      <DialPrimaryButton onClick={() => alert('Hello AI DIAL!')} />\n    </div>\n  );\n}\n```\nSee \"🎨 Theming & Customization\" section in README."
+    "setupNotes": "## Next.js Integration\n1. Install the package. React is the only peer you have to supply — everything\n   the kit renders with, it installs itself.\n\n``` bash\nnpm install @epam/ai-dial-ui-kit\nnpm install react react-dom\n```\n\nAdd the editor package only if you use the Markdown editor\n(`LazyMarkdownEditor`). It is an optional peer, so `npm install` stays quiet\nwithout it, and the kit only reaches for it when the editor actually mounts:\n\n``` bash\nnpm install @uiw/react-md-editor\n```\n\n2. Import style in the root layout of the project:\n\n```tsx\n// app/layout.tsx\nimport \"@epam/ai-dial-ui-kit/styles.css\";\n```\n\n3. Usage example\n\n```tsx\n// app/page.tsx\n\"use client\";\nimport { DialPrimaryButton } from \"@epam/ai-dial-ui-kit\";\n\nexport default function Home() {\n  return (\n    <div className=\"w-full h-full flex flex-col gap-3 items-center justify-center\">\n      <h1>Test library</h1>\n      <DialPrimaryButton onClick={() => alert('Hello AI DIAL!')} />\n    </div>\n  );\n}\n```\nSee \"🎨 Theming & Customization\" section in README."
   },
   "styles": "# Typography CSS Utility Classes\n\n## Design-system-compliant classes (`dial-*-text`)\n\nUse these by default. They follow the design system type scale.\n\n| Class                             | Design name                 | Weight   | Size / Line-height                  |\n| --------------------------------- | --------------------------- | -------- | ----------------------------------- |\n| `.dial-display1-text`             | Display 1                   | semibold | 32px / 48px                         |\n| `.dial-display2-text`             | Display 2                   | semibold | 28px / 40px                         |\n| `.dial-display3-text`             | Display 3                   | semibold | 22px / 32px                         |\n| `.dial-h1-text`                   | Heading 1                   | semibold | 20px / 28px                         |\n| `.dial-h2-text`                   | Heading 2                   | semibold | 18px / 26px                         |\n| `.dial-h3-text`                   | Heading 3                   | semibold | 16px / 24px                         |\n| `.dial-body-text`                 | Body Text                   | normal   | 16px / 24px                         |\n| `.dial-body-semi-text`            | Body Text (Semi Bold)       | semibold | 16px / 24px                         |\n| `.dial-body-paragraph-text`       | Body Paragraph              | normal   | 16px / 26px                         |\n| `.dial-body-paragraph-semi-text`  | Body Paragraph (Semi Bold)  | semibold | 16px / 26px                         |\n| `.dial-small-text`                | Small Text                  | normal   | 14px / 20px                         |\n| `.dial-small-semi-text`           | Small Text (Semi Bold)      | semibold | 14px / 20px                         |\n| `.dial-small-paragraph-text`      | Small Paragraph             | normal   | 14px / 24px                         |\n| `.dial-small-paragraph-semi-text` | Small Paragraph (Semi Bold) | semibold | 14px / 24px                         |\n| `.dial-tiny-text`                 | Tiny Text                   | normal   | 12px / 16px                         |\n| `.dial-tiny-lead-text`            | Tiny Text Lead              | normal   | 12px / 16px (+0.03em, uppercase)    |\n| `.dial-tiny-semi-text`            | Tiny Text (Semi Bold)       | semibold | 12px / 16px                         |\n| `.dial-tiny-lead-semi-text`       | Tiny Text Lead (Semi Bold)  | semibold | 12px / 16px (+0.03em, uppercase)    |\n| `.dial-caption-text`              | Caption                     | normal   | 10px / 12px                         |\n| `.dial-caption-lead-semi-text`    | Caption Lead (Semi Bold)    | semibold | 10px / 12px (+0.06em, uppercase)    |\n| `.dial-code-text`                 | Code                        | normal   | 14px / 20px (Fira Code / monospace) |\n| `.dial-italic-text`               | Italic                      | normal   | 18px / 22px (serif, italic)         |\n| `.dial-small-italic-text`         | Small Italic                | normal   | 14px / 20px (serif, italic)         |\n| `.dial-tiny-italic-text`          | Tiny Italic                 | normal   | 12px / 16px (serif, italic)         |\n| `.dial-caption-italic-text`       | Caption Italic              | normal   | 10px / 12px (serif, italic)         |\n\nThe three `*-lead-*` classes apply `text-transform: uppercase` themselves — pass them the sentence-case string, not a pre-uppercased one, so the accessible name stays readable.\n\n`.dial-code-text` resolves its family through `var(--theme-font-mono, var(--font-fira-code, 'Fira Code'))` before falling back to the system monospace stack. The kit ships no font file; the host provides the face.\n\nThe `*-italic-text` classes use a serif italic face and are intended for mathematical and formula symbols. Their line-heights follow the corresponding typography size; the default 18px variant uses a fixed 22px line-height to keep standalone symbols vertically aligned without changing their container's height.\n\n## Legacy classes (avoid in new code)\n\nClasses like `dial-h1`, `dial-h2`, `dial-body`, `dial-small*`, `dial-tiny*`, `dial-caption` are legacy. They can be used in legacy projects if user explicidly specify they need legacy typography.\n\n## Raw SCSS source\n",
   "theming": "# Theming & CSS Variable Tokens\n\nAI DIAL UI Kit uses CSS custom properties (variables) for theming.\nDark and light themes are switched by setting different values for these variables on `:root` or a theme wrapper element.\n\n## Usage in Tailwind\n\nThe Tailwind config maps CSS variables to utility classes.\nUse these classes in your components:\n\n```tsx\n// Backgrounds\n<div className=\"bg-layer-0\" />   // darkest background\n<div className=\"bg-layer-1\" />   // main content area\n<div className=\"bg-layer-2\" />   // elevated panels\n\n// Text\n<span className=\"text-primary\" />    // main text color\n<span className=\"text-secondary\" />  // muted text\n<span className=\"text-error\" />      // error state\n\n// Borders\n<div className=\"border border-primary\" />  // standard border\n<div className=\"border border-error\" />    // error border\n```\n\n## Override CSS Variables\n\n```css\n:root {\n  --bg-layer-0: #000000;\n  --bg-layer-1: #0c101d;\n  --bg-layer-2: #161b2d;\n  --bg-layer-3: #1d2439;\n  --text-primary: #eef1f7;\n  --text-secondary: #9fa6bd;\n  --text-error: #f76464;\n  --stroke-primary: #696e7c;\n  --controls-bg-accent-primary: #3664e2;\n  /* ... see src/styles/theme.scss for full list */\n}\n```\n\n## Overlay stacking\n\nPortalled overlays stack on a ladder driven by one variable, `--z-overlay`\n(default `52`): `z-popup` (base — `Popup` backdrop), `z-floating` (+1 —\n`Dropdown`/`Select` overlays, submenus, `Calendar`), `z-interactive-tooltip`\n(+2 — `InteractiveTooltip`), `z-tooltip` (+3 — `Tooltip`). To lift every\noverlay above a host's own sticky header or modal, set the base once on `:root`\n(or in a `ThemeScope` class) — the steps move together, so their order is kept:\n\n```css\n:root {\n  --z-overlay: 1000;\n}\n```\n\nDo not override `[role='menu']` or hardcode `z-[53]` in a host. To move one\noverlay only, pass a `z-*` utility through its class prop (`listClassName`,\n`overlayClassName`, `contentClassName`, `panelClassName`) — `mergeClasses`\nreplaces the layer's step with it.\n\n## Token Reference\n\n\n### backgroundsColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-base` | `var(--bg-layer-base)` | `#f5f7fa` |\n| `error` | `var(--bg-error)` | `#f3d6d8` |\n| `warning` | `var(--bg-warning)` | `#faf0cf` |\n| `info` | `var(--bg-info)` | `#e1eaf9` |\n| `success` | `var(--bg-success)` | `#dbf1eb` |\n| `gradient-1` | `var(--bg-gradient-1)` | `#1d4ed8` |\n| `gradient-2` | `var(--bg-gradient-2)` | `#885df2` |\n| `blue` | `var(--bg-visual-blue)` | `#d6edf9` |\n| `green-1` | `var(--bg-visual-green-1)` | `#cde8e5` |\n| `green-2` | `var(--bg-visual-green-2)` | `#d1f0dc` |\n| `brown` | `var(--bg-visual-brown)` | `#fde8d8` |\n| `red` | `var(--bg-visual-red)` | `#fce7f3` |\n\n### borderColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `primary` | `var(--stroke-primary)` | `#57647a` |\n| `secondary` | `var(--stroke-secondary)` | `#d1dbea` |\n| `tertiary` | `var(--stroke-tertiary)` | `#e0e6f0` |\n| `error` | `var(--stroke-error)` | `#ae2f2f` |\n| `warning` | `var(--stroke-warning)` | `#eec840` |\n| `info` | `var(--stroke-info)` | `#1d4ed8` |\n| `accent` | `var(--stroke-accent)` | `#1d4ed8` |\n| `success` | `var(--stroke-success)` | `#007274` |\n| `default` | `var(--stroke-default)` | `#b2c2dd` |\n| `gradient-1` | `var(--stroke-gradient-1)` | `#5976e9` |\n| `gradient-2` | `var(--stroke-gradient-2)` | `#885df2` |\n| `focus` | `var(--stroke-focus)` | `#161b2d` |\n\n### textColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `primary` | `var(--text-primary)` | `#161b2d` |\n| `secondary` | `var(--text-secondary)` | `#57647a` |\n| `tertiary` | `var(--text-tertiary)` | `#848e9c` |\n| `accent` | `var(--text-accent)` | `#1d4ed8` |\n| `error` | `var(--text-error)` | `#ae2f2f` |\n| `warning` | `var(--text-warning)` | `#7f6300` |\n| `warning-icon` | `var(--text-warning-icon)` | `#eec840` |\n| `info` | `var(--text-info)` | `#1d4ed8` |\n| `success` | `var(--text-success)` | `#007274` |\n| `blue` | `var(--text-visual-blue)` | `#1189c8` |\n| `green-1` | `var(--text-visual-green-1)` | `#059669` |\n| `green-2` | `var(--text-visual-green-2)` | `#0d6e72` |\n| `green-3` | `var(--text-visual-green-3)` | `#065f46` |\n| `brown-1` | `var(--text-visual-brown-1)` | `#d36817` |\n| `brown-2` | `var(--text-visual-brown-2)` | `#b45309` |\n| `red` | `var(--text-visual-red)` | `#9d174d` |\n| `violet-1` | `var(--text-visual-violet-1)` | `#7c3aed` |\n| `violet-2` | `var(--text-visual-violet-2)` | `#3730b7` |\n\n### placeholderColor\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `primary` | `var(--text-primary)` | `#161b2d` |\n\n### backgroundsColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-0` | `var(--bg-layer-0)` | `#fcfcfc` |\n| `layer-1` | `var(--bg-layer-1)` | `#e0e6f0` |\n| `layer-2` | `var(--bg-layer-2)` | `#eef1f7` |\n| `layer-3` | `var(--bg-layer-3)` | `#fcfcfc` |\n| `layer-4` | `var(--bg-layer-4)` | `#d1dbea` |\n| `blackout` | `var(--bg-blackout)` | `#0c101d4d` |\n| `neutral` | `var(--bg-neutral)` | `#fcfcfc` |\n| `accent-primary` | `var(--bg-accent-primary)` | `#5c8dea` |\n| `accent-secondary` | `var(--bg-accent-secondary)` | `#37babc` |\n| `red-400` | `var(--bg-red-400)` | `#f76464` |\n| `controls-error` | `var(--controls-bg-error)` | `#ae2f2f` |\n| `controls-disable` | `var(--controls-bg-disable)` | `#d1dbea` |\n\n### borderColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--stroke-accent-primary)` | `#124ace` |\n| `accent-secondary` | `var(--stroke-accent-secondary)` | `#007274` |\n| `controls-accent` | `var(--controls-bg-accent)` | `#5c8dea` |\n| `hover` | `var(--stroke-hover)` | `#eef1f7` |\n| `red-900` | `var(--red-900)` | `#402027` |\n\n### textColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--text-accent-primary)` | `#7da4ff` |\n| `accent-secondary` | `var(--text-accent-secondary)` | `#37babc` |\n| `accent-tertiary` | `var(--text-accent-tertiary)` | `#a972ff` |\n| `controls-permanent` | `var(--controls-text-permanent)` | `#fcfcfc` |\n| `controls-neutral` | `var(--controls-text-neutral)` | `#161b2d` |\n\n### shadowColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `xs` | `var(--shadow-xs-1)` | `#2764d933` |\n| `lg` | `var(--shadow-lg)` | `#2764d914` |",
@@ -6208,72 +6206,6 @@
       ],
       "sourceFile": "components/Icon/Icon.tsx"
     },
-    {
-      "name": "DialNotification",
-      "category": "Elements",
-      "generation": "1.0",
-      "description": "A contextual feedback component for displaying important messages.\naliases: Notification|StatusBanner\nDesign system 1.0\n\nRenders a colored container with an icon, message text, and an optional\nclose button.",
-      "props": [
-        {
-          "name": "variant",
-          "type": "NotificationVariant",
-          "required": false,
-          "defaultValue": "NotificationVariant.Info",
-          "description": "Defines the visual style and icon of the alert"
-        },
-        {
-          "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,
-          "defaultValue": "'flex-col'",
-          "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": [
-        "<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",
-      "supersededBy": "Notification"
-    },
     {
       "name": "DialLoader",
       "category": "Feedback",
@@ -6320,3066 +6252,917 @@
       "sourceFile": "components/Loader/Loader.tsx"
     },
     {
-      "name": "DialPagination",
+      "name": "DialSteps",
       "category": "Navigation",
       "generation": "1.0",
-      "description": "Design system 1.0",
+      "description": "Props for the DialSteps component, which renders a multi-step navigation UI.\naliases: StepWizard|ProgressSteps\nDesign system 1.0",
       "props": [
         {
-          "name": "page",
-          "type": "number",
-          "required": true
-        },
-        {
-          "name": "totalPages",
-          "type": "number",
-          "required": true
+          "name": "steps",
+          "type": "Step[]",
+          "required": true,
+          "description": "Array of step objects to display"
         },
         {
-          "name": "onPageChange",
-          "type": "(page: number) => void",
-          "required": true
+          "name": "currentStep",
+          "type": "string",
+          "required": true,
+          "description": "The id of the currently active step"
         },
         {
-          "name": "className",
-          "type": "string",
-          "required": false
+          "name": "onChangeStep",
+          "type": "(step: string) => void",
+          "required": true,
+          "description": "Callback to set the current step by id"
         }
       ],
-      "examples": [],
-      "sourceFile": "components/Pagination/Pagination.tsx"
+      "examples": [
+        "<DialSteps\n  steps={[{ id: 'step1', label: 'Step 1', status: StepStatus.VALID }, { id: 'step2', label: 'Step 2', status: StepStatus.ERROR }]}\n  currentStep=\"step1\"\n  onChangeStep={(step) => console.log(step)}\n/>"
+      ],
+      "sourceFile": "components/Steps/Steps.tsx"
     },
     {
-      "name": "DialCheckbox",
-      "category": "Form",
+      "name": "DialNoDataContent",
+      "category": "Feedback",
       "generation": "1.0",
-      "description": "A Checkbox component with styling options\naliases: ToggleCheckbox|MultiSelectOption\nDesign system 1.0",
+      "description": "A component for displaying a message and icon when there is no data to show.\naliases: EmptyState|NoResults\nDesign system 1.0",
       "props": [
         {
-          "name": "id",
-          "type": "string",
-          "required": true,
-          "description": "Unique identifier for the checkbox element"
-        },
-        {
-          "name": "label",
+          "name": "icon",
           "type": "ReactNode",
           "required": false,
-          "description": "The label text for the field"
+          "description": "Custom icon to display (defaults to clipboard icon)"
         },
         {
-          "name": "checked",
-          "type": "boolean",
+          "name": "title",
+          "type": "string",
           "required": true,
-          "description": "The current value of the checkbox"
+          "description": "The message to display when no data is present"
         },
         {
-          "name": "disabled",
-          "type": "boolean",
+          "name": "description",
+          "type": "string",
           "required": false,
-          "description": "Whether the checkbox is disabled"
+          "description": "The description to display when no data is present"
         },
         {
-          "name": "indeterminate",
-          "type": "boolean",
+          "name": "containerClassName",
+          "type": "string",
           "required": false,
-          "description": "indeterminate state"
+          "description": "Additional CSS classes for the container"
         },
         {
-          "name": "ariaLabel",
+          "name": "titleClassName",
           "type": "string",
           "required": false,
-          "description": "Accessible label for screen readers when no title is provided"
+          "description": "Additional CSS classes for the title text"
         },
         {
-          "name": "onChange",
-          "type": "(value?: boolean, id?: string) => void",
+          "name": "descriptionClassName",
+          "type": "string",
           "required": false,
-          "description": "Callback function called when the checkbox value changes"
+          "description": "Additional CSS classes for the description text"
         }
       ],
       "examples": [
-        "<DialCheckbox\n  id=\"checkbox\"\n  label=\"Dial Checkbox\"\n  checked={true}\n  disabled={false}\n  onChange={(value) => console.log(value)}\n/>"
+        "<NoDataContent\n  emptyDataTitle=\"No results found\"\n  icon={<CustomIcon />}\n/>"
       ],
-      "sourceFile": "components/Checkbox/Checkbox.tsx",
-      "supersededBy": "Checkbox"
+      "sourceFile": "components/NoDataContent/NoDataContent.tsx",
+      "supersededBy": "NoDataContent"
     },
     {
-      "name": "DialSteps",
-      "category": "Navigation",
+      "name": "DialLabelledText",
+      "category": "Data Display",
       "generation": "1.0",
-      "description": "Props for the DialSteps component, which renders a multi-step navigation UI.\naliases: StepWizard|ProgressSteps\nDesign system 1.0",
+      "description": "A label component for form fields with optional tooltip, content, and custom elements.\naliases: LabelValue|DisplayText\nDesign system 1.0",
       "props": [
         {
-          "name": "steps",
-          "type": "Step[]",
+          "name": "label",
+          "type": "ReactNode",
           "required": true,
-          "description": "Array of step objects to display"
+          "description": "The main label text for the field"
         },
         {
-          "name": "currentStep",
+          "name": "text",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional tooltip and secondary text"
+        },
+        {
+          "name": "tooltip",
           "type": "string",
-          "required": true,
-          "description": "The id of the currently active step"
+          "required": false,
+          "description": "Optional tooltip different from main text"
         },
         {
-          "name": "onChangeStep",
-          "type": "(step: string) => void",
-          "required": true,
-          "description": "Callback to set the current step by id"
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Custom content to render instead of the default text/tooltip"
+        },
+        {
+          "name": "postfix",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Element to display after the text (e.g., an asterisk)"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the container element."
         }
       ],
       "examples": [
-        "<DialSteps\n  steps={[{ id: 'step1', label: 'Step 1', status: StepStatus.VALID }, { id: 'step2', label: 'Step 2', status: StepStatus.ERROR }]}\n  currentStep=\"step1\"\n  onChangeStep={(step) => console.log(step)}\n/>"
+        "<DialLabelledText\n  label=\"Username\"\n  text=\"Enter your username\"\n  postfix={<span>*</span>}\n/>"
       ],
-      "sourceFile": "components/Steps/Steps.tsx"
+      "sourceFile": "components/LabelledText/LabelledText.tsx"
     },
     {
-      "name": "DialRadioButton",
-      "category": "Free",
+      "name": "DialTag",
+      "category": "Tag",
       "generation": "1.0",
-      "description": "A stylized, accessible radio input with optional description.\naliases: ChoiceOption|RadioInput\nDesign system 1.0\n\nRenders a native `<input type=\"radio\" />` paired with a label. When `checked`\nand `description` are provided, a supporting text block appears under the control.",
+      "description": "A compact label element used for selections, filters, or categories.\nDesign system 1.0",
       "props": [
         {
-          "name": "name",
+          "name": "label",
           "type": "string",
-          "required": true,
-          "description": "Radio group name"
+          "required": true
         },
         {
-          "name": "value",
+          "name": "className",
           "type": "string",
-          "required": true,
-          "description": "Radio value emitted on change"
+          "required": false
         },
         {
-          "name": "label",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Visible label text"
+          "name": "selected",
+          "type": "boolean",
+          "required": false
         },
         {
-          "name": "caption",
+          "name": "icon",
           "type": "ReactNode",
-          "required": false,
-          "description": "Caption text describing label"
+          "required": false
         },
         {
-          "name": "description",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Supporting text shown when checked"
+          "name": "closable",
+          "type": "boolean",
+          "required": false
         },
         {
-          "name": "checked",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false",
-          "description": "Controlled checked state"
+          "name": "onClick",
+          "type": "(event: MouseEvent<HTMLDivElement>) => void",
+          "required": false
         },
         {
-          "name": "inputId",
-          "type": "string",
+          "name": "onRemove",
+          "type": "(event: MouseEvent<HTMLButtonElement>) => void",
+          "required": false
+        }
+      ],
+      "examples": [],
+      "sourceFile": "components/Tag/Tag.tsx",
+      "supersededBy": "Tag"
+    },
+    {
+      "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\nDesign system 1.0\n\nIf the text fits, tooltip content is empty and the popup stays hidden.\n\nImportant: width must be finite for truncation.\nConsumers can override via `className`.\n\na11y: when truncated, the full text is exposed via `aria-label` on the reference node.",
+      "props": [
+        {
+          "name": "text",
+          "type": "ReactNode",
           "required": true,
-          "description": "ID associated with the label"
+          "description": "The text or node to display (truncated with ellipsis if too long)."
         },
         {
           "name": "className",
           "type": "string",
           "required": false,
-          "description": "Additional classes applied to the input element"
+          "description": "Optional additional CSS classes for the text container (e.g. to set width)."
         },
         {
-          "name": "labelClassName",
+          "name": "contentClassName",
           "type": "string",
           "required": false,
-          "description": "Additional classes applied to the label element"
+          "description": "Optional additional CSS classes for the tooltip content."
         },
         {
-          "name": "disabled",
+          "name": "hideTooltip",
           "type": "boolean",
           "required": false,
-          "description": "Disabled state of the control"
-        },
-        {
-          "name": "onChange",
-          "type": "(value: string) => void",
-          "required": false,
-          "description": "Callback fired with `value` when the radio is changed"
-        },
-        {
-          "name": "descriptionClassName",
-          "type": "string",
-          "required": false,
-          "description": "Additional classes applied to the description block"
+          "description": "If true, disables the tooltip even if text is truncated."
         },
         {
-          "name": "containerClassName",
+          "name": "id",
           "type": "string",
           "required": false,
-          "description": "Additional classes applied to the container div"
+          "description": "Optional attribute for unique identification"
         },
         {
-          "name": "oneLineCaption",
-          "type": "boolean",
+          "name": "customTooltipContent",
+          "type": "ReactNode",
           "required": false,
-          "defaultValue": "false",
-          "description": "When true, the caption is shown on the same line to the right of the label instead of underneath it"
+          "description": "If provided, this content will be shown in the tooltip instead of the full text when truncated."
         }
       ],
       "examples": [
-        "<DialRadioButton\n  name=\"plan\"\n  value=\"pro\"\n  inputId=\"radio-pro\"\n  title=\"Pro plan\"\n  description=\"Includes all advanced features.\"\n  checked\n  onChange={(v) => console.log('changed', v)}\n/>"
+        "<DialEllipsisTooltip text=\"Very long message that will be truncated\" />\n<DialEllipsisTooltip text={<span className=\"font-medium\">Custom node</span>} className=\"max-w-[160px]\" />\n<DialEllipsisTooltip text=\"Tooltip disabled even if truncated\" hideTooltip />"
       ],
-      "sourceFile": "components/RadioButton/RadioButton.tsx"
+      "sourceFile": "components/EllipsisTooltip/EllipsisTooltip.tsx",
+      "supersededBy": "EllipsisTooltip"
     },
     {
-      "name": "DialRadioGroup",
-      "category": "Form",
+      "name": "DialTabs",
+      "category": "Navigation",
       "generation": "1.0",
-      "description": "Groups multiple `DialRadio` options and renders custom content for the active option.\naliases: SelectionGroup|OptionGroup\nDesign system 1.0\n\nUses `DialField` as the field label and a container with `role=\"radiogroup\"`.\nContent provided in `radioButtons[].content` is shown under the currently active radio.",
+      "description": "A responsive and overflow-aware tabs component that automatically adapts its layout\naliases: TabNavigation|TabBar\nDesign system 1.0\n\nbetween a scrollable tab bar and a dropdown menu on smaller screens.\n\nWhen there are too many tabs to fit in a single line, it introduces a dropdown button\nfor accessing hidden tabs and ensures smooth horizontal scrolling. The component also\nautomatically keeps the active tab in view.\n\nSupports both horizontal and vertical orientations and dynamically adjusts layout\nbased on screen size and available space.\n\nOn larger screens, tabs are displayed according to the `orientation` prop\n(horizontal or vertical). On smaller screens (mobile or tablet), the tabs collapse\ninto a dropdown menu for better usability.",
       "props": [
         {
-          "name": "fieldTitle",
-          "type": "string",
-          "required": false,
-          "description": "Optional label rendered by `DialField`"
-        },
-        {
-          "name": "elementId",
-          "type": "string",
-          "required": true,
-          "description": "Name for the underlying radio group; also used for input `name`"
-        },
-        {
-          "name": "disabled",
-          "type": "boolean",
-          "required": false,
-          "description": "Disables all child radios when set"
-        },
-        {
-          "name": "radioButtons",
-          "type": "RadioButtonWithContent[]",
+          "name": "tabs",
+          "type": "TabModel[]",
           "required": true,
-          "description": "Array of options with ids, labels, and optional content"
+          "description": "Array of tab models to render. Each tab must include an `id` and a display `name`."
         },
         {
-          "name": "activeRadioButton",
+          "name": "activeTab",
           "type": "string",
           "required": true,
-          "description": "The id of the currently selected radio"
-        },
-        {
-          "name": "orientation",
-          "type": "RadioGroupOrientation",
-          "required": true,
-          "description": "Layout direction of radios: row or column"
-        },
-        {
-          "name": "labelDescription",
-          "type": "string",
-          "required": false,
-          "description": "Optional description rendered by `DialFormItem`"
+          "description": "The identifier of the currently active tab."
         },
         {
-          "name": "onChange",
-          "type": "(radioId: string) => void",
+          "name": "onClick",
+          "type": "(id: string) => void",
           "required": true,
-          "description": "Callback fired with the selected radio id"
+          "description": "Callback fired when a tab is selected. Receives the tab's `id` as an argument."
         },
         {
-          "name": "radioClassName",
-          "type": "string",
+          "name": "orientation",
+          "type": "TabOrientation",
           "required": false,
-          "description": "Additional classes applied to each radio input"
+          "defaultValue": "TabOrientation.Horizontal",
+          "description": "Layout direction of the tabs. Uses the  enum."
         },
         {
-          "name": "groupLabelClassName",
-          "type": "string",
+          "name": "view",
+          "type": "TabView",
           "required": false,
-          "description": "Optional classes applied to the group label. If not provided, `labelClassName` will be used."
+          "defaultValue": "TabView.Default",
+          "description": "Visual style of the tabs. Uses the  enum.\n`Inline` renders a compact segmented control where the active tab is marked with a\nleading check icon. The inline view is not responsive and ignores overflow/dropdown logic."
         },
         {
-          "name": "labelClassName",
+          "name": "className",
           "type": "string",
-          "required": false,
-          "description": "Additional classes applied to each radio label"
+          "required": false
         },
         {
-          "name": "containerClassName",
-          "type": "string",
+          "name": "screenThreshold",
+          "type": "ScreenResolution",
           "required": false,
-          "description": "Additional classes applied to the outer container"
+          "defaultValue": "ScreenResolution.Tablet",
+          "description": "Defines the screen size threshold\nbelow which tabs collapse into a dropdown. Uses the  enum.\nWhen set to `Tablet`, both mobile and tablet screens will trigger dropdown mode."
         },
         {
-          "name": "formItemChildrenClassName",
+          "name": "smallScreenContainerClassName",
           "type": "string",
           "required": false,
-          "description": "Additional classes applied to the DialFormItem's children container"
+          "description": "Optional CSS class applied to the dropdown container\nin small-screen (collapsed) mode."
         },
         {
-          "name": "selectedItemClassName",
+          "name": "smallScreenDropdownItemClassName",
           "type": "string",
           "required": false,
-          "description": "Additional classes applied to the selected option's content container"
+          "description": "Optional CSS class applied to individual dropdown\nitems in small-screen mode."
         },
         {
-          "name": "selectedLabelClassName",
+          "name": "desktopDropdownClassName",
           "type": "string",
           "required": false,
-          "description": "Additional classes applied to the selected option's label"
+          "description": "Optional CSS class applied to dropdown button in non small-screen mode."
         },
         {
-          "name": "radioGroupClassName",
+          "name": "desktopTabClassName",
           "type": "string",
           "required": false,
-          "description": "Additional classes applied to the radio group container"
+          "description": "Optional CSS class applied to tab in non small-screed mode."
         },
         {
-          "name": "inputContainerClassName",
+          "name": "inlineContainerClassName",
           "type": "string",
-          "required": false,
-          "description": "Additional classes applied to each radio input's container"
+          "required": false
         },
         {
-          "name": "selectedInputContainerClassName",
+          "name": "inlineTabClassName",
           "type": "string",
-          "required": false,
-          "description": "Additional classes applied to the selected radio input's container"
+          "required": false
         }
       ],
       "examples": [
-        "<DialRadioGroup\n  fieldTitle=\"Delivery\"\n  elementId=\"delivery\"\n  orientation={RadioGroupOrientation.Column}\n  activeRadioButton=\"courier\"\n  radioButtons={[\n    { id: 'pickup', name: 'Pickup', content: <span>Free, ready today</span> },\n    { id: 'courier', name: 'Courier', content: <span>Arrives tomorrow</span> },\n  ]}\n  onChange={(id) => console.log('selected', id)}\n/>"
+        "<DialTabs\n  tabs={[\n    { id: 'overview', name: 'Overview' },\n    { id: 'details', name: 'Details' },\n    { id: 'settings', name: 'Settings', invalid: true },\n  ]}\n  activeTab=\"overview\"\n  onClick={(id) => setActiveTab(id)}\n  orientation={TabOrientation.Horizontal}\n/>"
       ],
-      "sourceFile": "components/RadioGroup/RadioGroup.tsx",
-      "supersededBy": "RadioGroup"
+      "sourceFile": "components/Tabs/Tabs.tsx",
+      "supersededBy": "Tabs"
     },
     {
-      "name": "DialSlider",
-      "category": "Form",
+      "name": "DialBreadcrumb",
+      "category": "Navigation",
       "generation": "1.0",
-      "description": "A range slider with a custom thumb showing the current value and optional labels.\naliases: RangeInput|TemperatureSlider\nDesign system 1.0",
+      "description": "Breadcrumb navigation component with horizontal scroll on overflow.\naliases: NavigationPath|BreadcrumbTrail\nDesign system 1.0\n\nUse either the `pathItems` prop or compose with `<DialBreadcrumbItem/>` as children.\nThe last item is treated as the current page.",
       "props": [
         {
-          "name": "value",
-          "type": "number",
-          "required": true,
-          "description": "Current slider value"
-        },
-        {
-          "name": "min",
-          "type": "number",
-          "required": false,
-          "defaultValue": "0",
-          "description": "Minimum value"
-        },
-        {
-          "name": "max",
-          "type": "number",
-          "required": false,
-          "defaultValue": "1",
-          "description": "Maximum value"
-        },
-        {
-          "name": "step",
-          "type": "number",
-          "required": false,
-          "defaultValue": "0.1",
-          "description": "Step increment"
-        },
-        {
-          "name": "disabled",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false",
-          "description": "Disables interaction"
-        },
-        {
-          "name": "labelProps",
-          "type": "DialLabelProps",
-          "required": false,
-          "description": "Props forwarded to DialLabel rendered above the slider"
-        },
-        {
-          "name": "labels",
-          "type": "[string, string] | [string, string, string]",
+          "name": "pathItems",
+          "type": "DialBreadcrumbPathItem[]",
           "required": false,
-          "description": "2 or 3 strings rendered below the track (start, [middle,] end)"
+          "description": "Array of breadcrumb pathItems (see `DialBreadcrumbItem`)."
         },
         {
-          "name": "formatValue",
-          "type": "(value: number) => string",
+          "name": "separator",
+          "type": "ReactNode",
           "required": false,
-          "description": "Custom value formatter for the thumb display"
+          "defaultValue": "defaultSeparator",
+          "description": "Custom separator node (default: right chevron icon)."
         },
         {
-          "name": "onChange",
-          "type": "(value: number) => void",
+          "name": "ariaLabel",
+          "type": "string",
           "required": false,
-          "description": "Callback fired with the new value on interaction"
+          "defaultValue": "'Breadcrumb'",
+          "description": "Aria label for the `<nav>` element (default: \"Breadcrumb\")."
         },
         {
-          "name": "trackClassName",
+          "name": "className",
           "type": "string",
           "required": false,
-          "description": "Additional CSS classes for the track bar"
+          "description": "Additional CSS classes for the `<nav>` container."
         },
         {
-          "name": "fillClassName",
-          "type": "string",
+          "name": "children",
+          "type": "ReactNode",
           "required": false,
-          "description": "Additional CSS classes for the fill portion of the track"
+          "description": "Alternatively, compose with `<DialBreadcrumbItem/>` as children."
         },
         {
-          "name": "thumbClassName",
+          "name": "labelClassName",
           "type": "string",
           "required": false,
-          "description": "Additional CSS classes for the thumb circle"
+          "description": "Additional CSS classes applied to each item when using `pathItems` prop."
         },
         {
-          "name": "labelsClassName",
-          "type": "string",
+          "name": "onBeforeNavigate",
+          "type": "NavigationGuard",
           "required": false,
-          "description": "Additional CSS classes for the labels row"
+          "description": "Navigation guard called before navigating to a breadcrumb item.\nGuard function called before navigating to a different breadcrumb item.\nReturn `true` to allow navigation, `false` to prevent it.\nCan return a Promise for async checks (e.g., showing a confirmation dialog)."
         }
       ],
       "examples": [
-        "<DialSlider\n  value={0.5}\n  min={0}\n  max={1}\n  step={0.1}\n  labels={['Precise', 'Neutral', 'Creative']}\n  aria-label=\"Temperature\"\n  onChange={(v) => console.log(v)}\n/>"
+        "<DialBreadcrumb\n  pathItems={[\n    { label: 'Home', href: '/' },\n    { label: 'Section', href: '/section' },\n    { label: 'Current Page' },\n  ]}\n/>\n\n<DialBreadcrumb>\n  <DialBreadcrumbItem label=\"Home\" href=\"/\" />\n  <DialBreadcrumbItem label=\"Section\" href=\"/section\" />\n  <DialBreadcrumbItem label=\"Current Page\" />\n</DialBreadcrumb>",
+        "<DialBreadcrumb\n   pathItems={items}\n   onBeforeNavigate={async () => {\n     if (hasUnsavedChanges) {\n       return await confirmLeave();\n     }\n     return true;\n   }}\n />"
       ],
-      "sourceFile": "components/Slider/Slider.tsx",
-      "supersededBy": "Slider"
+      "sourceFile": "components/Breadcrumb/Breadcrumb.tsx"
     },
     {
-      "name": "DialNoDataContent",
-      "category": "Feedback",
+      "name": "DialBreadcrumbItem",
+      "category": "Navigation",
       "generation": "1.0",
-      "description": "A component for displaying a message and icon when there is no data to show.\naliases: EmptyState|NoResults\nDesign system 1.0",
+      "description": "Design system 1.0",
       "props": [
         {
-          "name": "icon",
+          "name": "label",
           "type": "ReactNode",
-          "required": false,
-          "description": "Custom icon to display (defaults to clipboard icon)"
+          "required": true
         },
         {
-          "name": "title",
+          "name": "href",
           "type": "string",
-          "required": true,
-          "description": "The message to display when no data is present"
+          "required": false
         },
         {
-          "name": "description",
-          "type": "string",
-          "required": false,
-          "description": "The description to display when no data is present"
+          "name": "onClick",
+          "type": "MouseEventHandler<HTMLAnchorElement>",
+          "required": false
         },
         {
-          "name": "containerClassName",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes for the container"
+          "name": "disabled",
+          "type": "boolean",
+          "required": false
         },
         {
-          "name": "titleClassName",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes for the title text"
+          "name": "iconBefore",
+          "type": "ReactNode",
+          "required": false
         },
         {
-          "name": "descriptionClassName",
+          "name": "labelClassName",
           "type": "string",
+          "required": false
+        },
+        {
+          "name": "isLast",
+          "type": "boolean",
+          "required": false
+        },
+        {
+          "name": "isFirst",
+          "type": "boolean",
+          "required": false
+        },
+        {
+          "name": "separator",
+          "type": "ReactNode",
           "required": false,
-          "description": "Additional CSS classes for the description text"
+          "defaultValue": "defaultSeparator"
+        },
+        {
+          "name": "onBeforeNavigate",
+          "type": "NavigationGuard",
+          "required": false
         }
       ],
-      "examples": [
-        "<NoDataContent\n  emptyDataTitle=\"No results found\"\n  icon={<CustomIcon />}\n/>"
-      ],
-      "sourceFile": "components/NoDataContent/NoDataContent.tsx",
-      "supersededBy": "NoDataContent"
+      "examples": [],
+      "sourceFile": "components/Breadcrumb/BreadcrumbItem.tsx"
     },
     {
-      "name": "DialCollapsibleSidebar",
-      "category": "Navigation",
+      "name": "DialButton",
+      "category": "Elements/Buttons",
       "generation": "1.0",
-      "description": "A collapsible horizontal bar component that allows toggling between an expanded and collapsed state.\naliases: ToggleSidebar|CollapsiblePanel\nDesign system 1.0\n\nIt supports customizable width, title, icons, additional buttons, and flexible styling options.",
+      "description": "A Button component with flexible icon and text positioning\naliases: ActionButton|CallToAction\nDesign system 1.0",
       "props": [
         {
-          "name": "children",
-          "type": "ReactNode",
-          "required": true,
-          "description": "The content to display inside the collapsible bar when expanded"
+          "name": "variant",
+          "type": "ButtonVariant",
+          "required": false,
+          "description": "Defines the visual style of the button"
         },
         {
-          "name": "width",
-          "type": "number",
+          "name": "size",
+          "type": "ElementSize",
           "required": false,
-          "defaultValue": "280",
-          "description": "The width of the bar when expanded"
+          "defaultValue": "ElementSize.Standard",
+          "description": "Defines the size of the button"
         },
         {
-          "name": "title",
-          "type": "ReactNode",
-          "required": true,
-          "description": "The title displayed when the bar is collapsed"
+          "name": "appearance",
+          "type": "ButtonAppearance",
+          "required": false,
+          "defaultValue": "ButtonAppearance.Solid",
+          "description": "Defines the type of the button"
         },
         {
-          "name": "titleClassName",
+          "name": "textClassName",
           "type": "string",
           "required": false,
-          "description": "Additional CSS classes applied to the title element"
+          "description": "Additional CSS classes to apply specifically to the button text"
         },
         {
-          "name": "containerClassName",
-          "type": "string",
+          "name": "label",
+          "type": "ReactNode",
           "required": false,
-          "description": "Additional CSS classes applied to the container element"
+          "description": "The content of the button. Can be any React node."
         },
         {
-          "name": "iconSize",
-          "type": "number",
-          "required": false,
-          "defaultValue": "24",
-          "description": "The size of the toggle icons. Defaults to 32"
-        },
-        {
-          "name": "additionalButtons",
+          "name": "iconBefore",
           "type": "ReactNode",
           "required": false,
-          "description": "Additional buttons or elements displayed next to the toggle button when expanded"
+          "description": "Icon or element to display before the button text"
         },
         {
-          "name": "iconStroke",
-          "type": "number",
+          "name": "iconAfter",
+          "type": "ReactNode",
           "required": false,
-          "defaultValue": "1.5",
-          "description": "The stroke width of the toggle icons. Defaults to 1.5"
+          "description": "Icon or element to display after the button text"
         },
         {
-          "name": "isOpened",
+          "name": "hideTitleOnMobile",
           "type": "boolean",
           "required": false,
-          "description": "When provided, the component becomes controlled by this value"
+          "description": "Whether to hide the title text on mobile devices"
         },
         {
-          "name": "onToggle",
-          "type": "(nextOpened: boolean, e: MouseEvent<HTMLButtonElement>) => void",
-          "required": false,
-          "description": "Fired when user clicks the toggle in controlled mode, with the next state"
+          "name": "tooltipProps",
+          "type": "TooltipProps",
+          "required": false
         }
       ],
       "examples": [
-        "<DialCollapsibleSidebar\n  width={300}\n  title=\"Menu\"\n  titleClassName=\"text-primary font-bold\"\n  containerClassName=\"bg-gray-100 shadow-md\"\n  iconSize={24}\n  additionalButtons={<button>Extra</button>}\n>\n  <div>Content goes here</div>\n</DialCollapsibleSidebar>"
+        "<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/CollapsibleSidebar/CollapsibleSidebar.tsx",
-      "supersededBy": "CollapsibleSidebar"
+      "sourceFile": "components/Button/Button.tsx",
+      "supersededBy": "Button"
     },
     {
-      "name": "DialLabelledText",
-      "category": "Data Display",
+      "name": "DialIconButton",
+      "category": "Elements/Buttons",
       "generation": "1.0",
-      "description": "A label component for form fields with optional tooltip, content, and custom elements.\naliases: LabelValue|DisplayText\nDesign system 1.0",
+      "description": "A Icon Button component with flexible icon and text positioning\naliases: IconicButton|SymbolButton\nDesign system 1.0",
       "props": [
         {
-          "name": "label",
-          "type": "ReactNode",
-          "required": true,
-          "description": "The main label text for the field"
-        },
-        {
-          "name": "text",
-          "type": "ReactNode",
+          "name": "variant",
+          "type": "ButtonVariant",
           "required": false,
-          "description": "Optional tooltip and secondary text"
+          "description": "Defines the visual style of the button"
         },
         {
-          "name": "tooltip",
-          "type": "string",
+          "name": "size",
+          "type": "ElementSize",
           "required": false,
-          "description": "Optional tooltip different from main text"
+          "defaultValue": "ElementSize.Standard",
+          "description": "Defines the size of the button"
         },
         {
-          "name": "children",
-          "type": "ReactNode",
+          "name": "appearance",
+          "type": "ButtonAppearance",
           "required": false,
-          "description": "Custom content to render instead of the default text/tooltip"
+          "defaultValue": "ButtonAppearance.Solid",
+          "description": "Defines the type of the button"
         },
         {
-          "name": "postfix",
+          "name": "icon",
           "type": "ReactNode",
-          "required": false,
-          "description": "Element to display after the text (e.g., an asterisk)"
+          "required": true,
+          "description": "Icon display"
         },
         {
-          "name": "className",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes for the container element."
+          "name": "tooltipProps",
+          "type": "TooltipProps",
+          "required": false
         }
       ],
       "examples": [
-        "<DialLabelledText\n  label=\"Username\"\n  text=\"Enter your username\"\n  postfix={<span>*</span>}\n/>"
+        "<DialIconButton\n  onClick={handleClick}\n  icon={<Icon />}\n  className=\"custom-button\"\n/>",
+        "<DialIconButton\n  aria-label=\"Custom Label\"\n  onClick={handleClick}\n/>"
       ],
-      "sourceFile": "components/LabelledText/LabelledText.tsx"
+      "sourceFile": "components/IconButton/IconButton.tsx",
+      "supersededBy": "IconButton"
     },
     {
-      "name": "DialTag",
-      "category": "Tag",
+      "name": "DialDangerButton",
+      "category": "Elements/Buttons",
       "generation": "1.0",
-      "description": "A compact label element used for selections, filters, or categories.\nDesign system 1.0",
-      "props": [
-        {
-          "name": "label",
-          "type": "string",
-          "required": true
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false
-        },
-        {
-          "name": "selected",
-          "type": "boolean",
-          "required": false
-        },
-        {
-          "name": "icon",
-          "type": "ReactNode",
-          "required": false
-        },
-        {
-          "name": "closable",
-          "type": "boolean",
-          "required": false
-        },
-        {
-          "name": "onClick",
-          "type": "(event: MouseEvent<HTMLDivElement>) => void",
-          "required": false
-        },
-        {
-          "name": "onRemove",
-          "type": "(event: MouseEvent<HTMLButtonElement>) => void",
-          "required": false
-        }
+      "description": "A Danger Button component with predefined danger variant",
+      "props": [],
+      "examples": [
+        "<DialDangerButton\nlabel=\"Click me\"\nonClick={handleClick}\nclassName=\"custom-button\"\n/>"
       ],
-      "examples": [],
-      "sourceFile": "components/Tag/Tag.tsx",
-      "supersededBy": "Tag"
+      "sourceFile": "components/Button/ButtonWrappers.tsx",
+      "supersededBy": "DangerButton"
     },
     {
-      "name": "DialEllipsisTooltip",
-      "category": "Overlay",
+      "name": "DialNeutralButton",
+      "category": "Elements/Buttons",
       "generation": "1.0",
-      "description": "Single-line text with CSS ellipsis that shows a tooltip **only when actually truncated**.\naliases: TruncatedText|TruncationTooltip\nDesign system 1.0\n\nIf the text fits, tooltip content is empty and the popup stays hidden.\n\nImportant: width must be finite for truncation.\nConsumers can override via `className`.\n\na11y: when truncated, the full text is exposed via `aria-label` on the reference node.",
-      "props": [
-        {
-          "name": "text",
-          "type": "ReactNode",
-          "required": true,
-          "description": "The text or node to display (truncated with ellipsis if too long)."
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false,
-          "description": "Optional additional CSS classes for the text container (e.g. to set width)."
-        },
-        {
-          "name": "contentClassName",
-          "type": "string",
-          "required": false,
-          "description": "Optional additional CSS classes for the tooltip content."
-        },
-        {
-          "name": "hideTooltip",
-          "type": "boolean",
-          "required": false,
-          "description": "If true, disables the tooltip even if text is truncated."
-        },
-        {
-          "name": "id",
-          "type": "string",
-          "required": false,
-          "description": "Optional attribute for unique identification"
-        },
-        {
-          "name": "customTooltipContent",
-          "type": "ReactNode",
-          "required": false,
-          "description": "If provided, this content will be shown in the tooltip instead of the full text when truncated."
-        }
-      ],
+      "description": "A Neutral Button component with predefined neutral variant",
+      "props": [],
       "examples": [
-        "<DialEllipsisTooltip text=\"Very long message that will be truncated\" />\n<DialEllipsisTooltip text={<span className=\"font-medium\">Custom node</span>} className=\"max-w-[160px]\" />\n<DialEllipsisTooltip text=\"Tooltip disabled even if truncated\" hideTooltip />"
+        "<DialNeutralButton\n label=\"Click me\"\n onClick={handleClick}\n className=\"custom-button\"\n/>"
       ],
-      "sourceFile": "components/EllipsisTooltip/EllipsisTooltip.tsx",
-      "supersededBy": "EllipsisTooltip"
+      "sourceFile": "components/Button/ButtonWrappers.tsx",
+      "supersededBy": "NeutralButton"
     },
     {
-      "name": "DialDraggableItem",
-      "category": "Components",
+      "name": "DialPrimaryButton",
+      "category": "Elements/Buttons",
       "generation": "1.0",
-      "description": "A lightweight wrapper that makes its children sortable via drag-and-drop.\naliases: SortableItem|DragHandle\nDesign system 1.0\n\nRenders a row with a grab handle (left) and the provided content (right).\nIntegrates with `react-dnd` using a simple \"column\" drag type and delegates\nreordering logic to the provided `findItem` and `moveItem` callbacks.",
-      "props": [
-        {
-          "name": "id",
-          "type": "string",
-          "required": true,
-          "description": "Unique identifier of the draggable item"
-        },
-        {
-          "name": "children",
-          "type": "ReactNode",
-          "required": true,
-          "description": "Content rendered within the draggable row"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes applied to the root container"
-        },
-        {
-          "name": "ariaLabel",
-          "type": "string",
-          "required": false,
-          "defaultValue": "'Drag item'",
-          "description": "Accessible label for the handle"
-        },
-        {
-          "name": "onFind",
-          "type": "(field: string) => number",
-          "required": false,
-          "description": "Function to resolve an item's current index by id"
-        },
-        {
-          "name": "onMove",
-          "type": "(field: string, atIndex: number) => void",
-          "required": false,
-          "description": "Function to move an item (by id) to a target index"
-        }
-      ],
+      "description": "A Primary Button component with predefined primary variant\nDesign system 1.0",
+      "props": [],
       "examples": [
-        "<DialDraggableItem id=\"a\" findItem={find} moveItem={move}>\n  <span>Item A</span>\n</DialDraggableItem>"
+        "<DialPrimaryButton\n label=\"Click me\"\nonClick={handleClick}\nclassName=\"custom-button\"\n/>"
       ],
-      "sourceFile": "components/DraggableItem/DraggableItem.tsx"
+      "sourceFile": "components/Button/ButtonWrappers.tsx",
+      "supersededBy": "PrimaryButton"
     },
     {
-      "name": "DialFileIcon",
-      "category": "FileManager/components",
+      "name": "DialGhostButton",
+      "category": "Elements/Buttons",
       "generation": "1.0",
-      "description": "Renders a file-type icon based on a file extension.\naliases: ExtensionIcon|TypeIcon\nDesign system 1.0\n\nUses DialIcon to provide consistent icon wrapper styling.",
-      "props": [
-        {
-          "name": "extension",
-          "type": "string",
-          "required": false,
-          "description": "File extension string (with or without leading dot)"
-        },
-        {
-          "name": "size",
-          "type": "number",
-          "required": false,
-          "defaultValue": "BASE_ICON_PROPS.size",
-          "description": "Icon pixel size"
-        },
-        {
-          "name": "stroke",
-          "type": "number",
-          "required": false,
-          "defaultValue": "BASE_ICON_PROPS.stroke",
-          "description": "Tabler icon stroke width"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false,
-          "description": "Additional classes on the container"
-        },
-        {
-          "name": "decorative",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false",
-          "description": "Whether the icon should be hidden from assistive technologies"
-        },
-        {
-          "name": "label",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Accessible label when not decorative; defaults to \"<EXT> file icon\""
-        },
-        {
-          "name": "indicator",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Optional indicator element to display alongside the icon"
-        }
-      ],
+      "description": "A Ghost Button component with predefined ghost appearance",
+      "props": [],
       "examples": [
-        "<DialFileIcon extension=\".pdf\" />\n<DialFileIcon extension=\"tsx\" size={28} stroke={1.25} />\n<DialFileIcon extension=\"unknown\" decorative /> // decorative, hidden from AT"
+        "<DialGhostButton\n label=\"Click me\"\n onClick={handleClick}\n className=\"custom-button\"\n/>"
       ],
-      "sourceFile": "components/FileIcon/FileIcon.tsx",
-      "supersededBy": "FileIcon"
+      "sourceFile": "components/Button/ButtonWrappers.tsx",
+      "supersededBy": "GhostButton"
     },
     {
-      "name": "DialFormItem",
-      "category": "Form",
-      "generation": "1.0",
-      "description": "A layout wrapper for form controls with label, helper text and error message.\naliases: FieldWrapper|FormControl\nDesign system 1.0\n\nUses `DialLabel` for the label and `DialErrorText` for consistent error styling.\nWires accessibility with:\n- `role=\"group\"`\n- `aria-labelledby` (when label is present)\n- `aria-describedby` (description and/or error ids)",
-      "props": [
-        {
-          "name": "id",
-          "type": "string",
-          "required": false,
-          "description": "Unique identifier for the form control element (used for accessibility)"
-        },
-        {
-          "name": "labelVisuallyHidden",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false",
-          "description": "Whether to visually hide the label (still accessible to screen readers, default: false)"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes to apply to the container div"
-        },
-        {
-          "name": "childrenClassName",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes to apply to the children container div"
-        },
-        {
-          "name": "labelClassName",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes to apply to the label element"
-        },
-        {
-          "name": "errorClassName",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes to apply to the error message element"
-        },
-        {
-          "name": "children",
-          "type": "ReactNode",
-          "required": true,
-          "description": "The form control element(s) to render inside the DialFormItem"
-        },
-        {
-          "name": "value",
-          "type": "ReactNode",
-          "required": false,
-          "description": "The current value of the form control (for readonly mode)"
-        },
-        {
-          "name": "defaultEmptyText",
-          "type": "string",
-          "required": false,
-          "description": "Text to display when readonly and value is empty (default: \"None\")"
-        }
-      ],
-      "examples": [
-        "<DialFormItem elementId=\"transport\" label=\"Transport\" className=\"w-[320px]\">\n  <DialSelect\n    elementId=\"transport\"\n    value={transport}\n    options={transportOptions}\n    onChange={(val) => setTransport(val as ToolsetTransport)}\n  />\n</DialFormItem>\n\n// With description and error\n<DialFormItem\n  elementId=\"email\"\n  label=\"Email Address\"\n  description=\"We'll never share your email.\"\n  error=\"Please enter a valid email address.\"\n>\n  <DialInput\n    elementId=\"email\"\n    type=\"email\"\n    value={email}\n    onChange={(val) => setEmail(val as string)}\n    placeholder=\"name@company.com\"\n  />\n</DialFormItem>"
-      ],
-      "sourceFile": "components/FormItem/FormItem.tsx"
-    },
-    {
-      "name": "DialSharedEntityIndicator",
-      "category": "FileManager/components",
-      "generation": "1.0",
-      "description": "A compact icon-only indicator to denote a \"shared\" entity.\naliases: SharedIcon|AccessIndicator\nDesign system 1.0\n\nRenders a small arrow-up-right icon with token-based colors.",
-      "props": [
-        {
-          "name": "label",
-          "type": "ReactNode",
-          "required": false,
-          "defaultValue": "'Shared entity'",
-          "description": "Accessible label for assistive tech"
-        },
-        {
-          "name": "size",
-          "type": "number",
-          "required": false,
-          "defaultValue": "14",
-          "description": "Pixel size for the icon"
-        },
-        {
-          "name": "stroke",
-          "type": "number",
-          "required": false,
-          "defaultValue": "1.5",
-          "description": "Stroke width for the icon"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false,
-          "description": "Additional Tailwind classes applied to the icon"
-        },
-        {
-          "name": "containerClassName",
-          "type": "string",
-          "required": false,
-          "description": "Additional Tailwind classes appended to the container"
-        },
-        {
-          "name": "sharedIndicatorTooltip",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Custom tooltip content, defaults to \"Shared\""
-        }
-      ],
-      "examples": [
-        "<DialSharedEntityIndicator />\n<DialSharedEntityIndicator size={12} label=\"Opens in new window\" />"
-      ],
-      "sourceFile": "components/SharedEntityIndicator/SharedEntityIndicator.tsx",
-      "supersededBy": "SharedEntityIndicator"
-    },
-    {
-      "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\nDesign system 1.0\n\nHandles long names with ellipsis and tooltip.\n\nIf `details` is provided (e.g., file size, date), the component switches to\na vertical layout and renders the extra information below the file name.",
-      "props": [
-        {
-          "name": "name",
-          "type": "string",
-          "required": true,
-          "description": "Full file name with or without extension."
-        },
-        {
-          "name": "fileExtension",
-          "type": "string",
-          "required": false
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes for the root container."
-        },
-        {
-          "name": "shared",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false",
-          "description": "Whether the file is shared."
-        },
-        {
-          "name": "iconSize",
-          "type": "number",
-          "required": false,
-          "defaultValue": "BASE_ICON_SIZE",
-          "description": "Icon size in px. Default: BASE_ICON_SIZE."
-        },
-        {
-          "name": "details",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Optional metadata block displayed under the file name (e.g., size, modified date)."
-        },
-        {
-          "name": "sharedIndicatorClassName",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes for the shared indicator."
-        },
-        {
-          "name": "sharedIndicatorTooltip",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Custom tooltip content for the shared indicator; defaults to \"Shared\""
-        },
-        {
-          "name": "hideTooltip",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false"
-        },
-        {
-          "name": "isInvalidName",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false",
-          "description": "If true, applies disabled styling to indicate the file name has invalid characters."
-        },
-        {
-          "name": "tooltipContent",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Custom tooltip content to show when the name is truncated; defaults to showing the full name."
-        }
-      ],
-      "examples": [
-        "// Without details\n<DialFileName name=\"Document.pdf\" />\n\n// With details (file size and updated date)\n<DialFileName\n  name=\"Document.pdf\"\n  details={<span className=\"text-secondary\">24 KB · Jul 20, 2025</span>}\n/>"
-      ],
-      "sourceFile": "components/FileName/FileName.tsx",
-      "supersededBy": "FileName"
-    },
-    {
-      "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\nDesign system 1.0\n\nHandles long names with ellipsis and tooltip.",
-      "props": [
-        {
-          "name": "name",
-          "type": "string",
-          "required": true,
-          "description": "Folder name"
-        },
-        {
-          "name": "shared",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false",
-          "description": "If true, shows shared indicator. Default: false."
-        },
-        {
-          "name": "loading",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false",
-          "description": "If true, shows loading state. Default: false."
-        },
-        {
-          "name": "iconSize",
-          "type": "number",
-          "required": false,
-          "defaultValue": "BASE_ICON_SIZE",
-          "description": "Icon size in px. Default: BASE_ICON_SIZE."
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes for the root container"
-        },
-        {
-          "name": "sharedIndicatorClassName",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes for the shared indicator"
-        },
-        {
-          "name": "sharedIndicatorTooltip",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Custom tooltip content for the shared indicator; defaults to \"Shared\""
-        },
-        {
-          "name": "hideTooltip",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false",
-          "description": "If true, disables the tooltip even if the name is truncated."
-        },
-        {
-          "name": "isInvalidName",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false",
-          "description": "If true, applies disabled styling to indicate the file name has invalid characters."
-        },
-        {
-          "name": "tooltipContent",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Custom tooltip content to show when the name is truncated; defaults to showing the full name."
-        }
-      ],
-      "examples": [
-        "<DialFolderName name=\"Organization\" />"
-      ],
-      "sourceFile": "components/FolderName/FolderName.tsx",
-      "supersededBy": "FolderName"
-    },
-    {
-      "name": "DialResizableContainer",
-      "category": "Components",
-      "generation": "1.0",
-      "description": "DialResizableContainer — A reusable resizable container\naliases: ResizePanel|SizableContainer\nDesign system 1.0\n\nsupporting both **controlled** and **uncontrolled** width modes.\n\nControlled Mode\n\nProvide `width` and optionally `onResizeStop`:\n```tsx\n<DialResizableContainer\n  width={sidebarWidth}\n  onResizeStop={(w) => setSidebarWidth(w)}\n  minWidth={180}\n  maxWidth={520}\n>\n  <Sidebar />\n</DialResizableContainer>\n```\n\nUncontrolled Mode\n\nOmit `width` entirely — the component manages its own width:\n```tsx\n<DialResizableContainer\n  defaultWidth={260}\n  minWidth={180}\n  maxWidth={520}\n>\n  <Sidebar />\n</DialResizableContainer>\n```\n\nFeatures:\n- Resize from left or right\n- Fully supports controlled & uncontrolled sizing\n- Custom resize handler (icon or any ReactNode)\n- Callback when resize stops (optional)\n- Smooth hover/drag visibility transitions",
-      "props": [
-        {
-          "name": "children",
-          "type": "ReactNode",
-          "required": true,
-          "description": "Content placed inside the container."
-        },
-        {
-          "name": "minWidth",
-          "type": "number",
-          "required": true,
-          "description": "Minimum allowed width (px)."
-        },
-        {
-          "name": "maxWidth",
-          "type": "number",
-          "required": true,
-          "description": "Maximum allowed width (px)."
-        },
-        {
-          "name": "width",
-          "type": "number",
-          "required": false,
-          "description": "Controlled width. If omitted → uncontrolled mode."
-        },
-        {
-          "name": "defaultWidth",
-          "type": "number",
-          "required": true,
-          "description": "Initial width in uncontrolled mode."
-        },
-        {
-          "name": "onResizeStop",
-          "type": "(width: number) => void",
-          "required": false,
-          "description": "Optional callback fired when resize ends."
-        },
-        {
-          "name": "onResize",
-          "type": "(width: number) => void",
-          "required": false,
-          "description": "Optional callback fired continuously during resizing with current width."
-        },
-        {
-          "name": "side",
-          "type": "ResizableContainerSide",
-          "required": false,
-          "defaultValue": "ResizableContainerSide.Right",
-          "description": "Resize handle side."
-        },
-        {
-          "name": "resizeHandlerClassName",
-          "type": "string",
-          "required": false,
-          "description": "Optional additional CSS classes."
-        },
-        {
-          "name": "resizeHandler",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Optional custom handler element."
-        }
-      ],
-      "examples": [],
-      "sourceFile": "components/ResizableContainer/ResizableContainer.tsx",
-      "supersededBy": "ResizableContainer"
-    },
-    {
-      "name": "DialConditionalResizableContainer",
-      "category": "Components",
-      "generation": "1.0",
-      "description": "DialConditionalResizableContainer — A conditional wrapper around `DialResizableContainer`.\naliases: OptionalResize|ConditionalPanel\nDesign system 1.0\n\nThis component renders its children inside a resizable container only when `enabled` is true.\nWhen `enabled` is false, children are rendered directly without any resizable behavior.\n\nAll other props are the same as `DialResizableContainer`. See the documentation for\n`DialResizableContainer` for full details on usage, controlled/uncontrolled modes, sides, and callbacks.",
-      "props": [
-        {
-          "name": "enabled",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "true",
-          "description": "Whether resizing is enabled. When false, children are rendered directly."
-        }
-      ],
-      "examples": [
-        "<DialConditionalResizableContainer\n  enabled={!isCollapsed}\n  defaultWidth={260}\n  minWidth={180}\n  maxWidth={520}\n  onResize={(w) => console.log('Current width:', w)}\n  onResizeStop={(w) => setSidebarWidth(w)}\n>\n  <Sidebar />\n</DialConditionalResizableContainer>"
-      ],
-      "sourceFile": "components/ResizableContainer/ConditionalResizableContainer.tsx",
-      "supersededBy": "ConditionalResizableContainer"
-    },
-    {
-      "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\nDesign system 1.0\n\nProvides a pre-configured grid with:\n- Dark theme styling with CSS variable integration\n- Optional row selection with checkboxes\n- Context menu integration via DialDropdown\n- Text overflow handling with tooltips via DialEllipsisTooltip\n- Controlled or uncontrolled selection modes\n- Automatic column sizing and responsive behavior\n- Full accessibility support with ARIA attributes\n- Loading state with native AG-Grid overlay",
-      "props": [
-        {
-          "name": "columnDefs",
-          "type": "ColDef<T>[]",
-          "required": false,
-          "description": "Array of column definitions (ag-Grid ColDef format)"
-        },
-        {
-          "name": "rowData",
-          "type": "T[]",
-          "required": false,
-          "description": "Array of data objects to display in the grid"
-        },
-        {
-          "name": "additionalGridOptions",
-          "type": "GridOptions<T>",
-          "required": false,
-          "description": "Additional ag-Grid GridOptions to merge with defaults"
-        },
-        {
-          "name": "getContextMenuItems",
-          "type": "(row: T) => DropdownItem[]",
-          "required": false,
-          "description": "Function returning context menu items for a given row"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes to apply to the grid container"
-        },
-        {
-          "name": "ariaLabel",
-          "type": "string",
-          "required": false,
-          "defaultValue": "'Data grid'",
-          "description": "Accessible label for the grid region"
-        },
-        {
-          "name": "wrapCustomCellRenderers",
-          "type": "boolean | ((col: ColDef<T>) => boolean)",
-          "required": false,
-          "defaultValue": "true",
-          "description": "Whether to wrap custom cell renderers with context menu support"
-        },
-        {
-          "name": "disabledRowIds",
-          "type": "Set<string>",
-          "required": false,
-          "description": "Set of row IDs that should be disabled. Disabled rows are non-interactive and cannot be selected. IDs must match values from `getRowId`."
-        },
-        {
-          "name": "selectedRowIds",
-          "type": "Set<string>",
-          "required": false,
-          "description": "Controlled selection: set of row IDs that should be selected"
-        },
-        {
-          "name": "onGridApiChange",
-          "type": "(api: GridApi<T>) => void",
-          "required": false,
-          "description": "Callback invoked when the grid API becomes available"
-        },
-        {
-          "name": "onSelectionChange",
-          "type": "(selectedRowIds: Set<string>, selectedRows: T[]) => void",
-          "required": false,
-          "description": "Callback invoked when selection changes (selectedIds, selectedRows)"
-        },
-        {
-          "name": "getRowId",
-          "type": "(row: T) => string",
-          "required": false,
-          "defaultValue": "(row: T) =>\n    String((row as Record<string, unknown>).id ?? JSON.stringify(row))",
-          "description": "Function to extract unique ID from a row object (defaults to 'id' field)"
-        },
-        {
-          "name": "alternateOddRowColors",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false",
-          "description": "Whether to alternate background colors for odd/even rows"
-        },
-        {
-          "name": "filterPlaceholder",
-          "type": "string",
-          "required": false,
-          "defaultValue": "'Enter value'",
-          "description": "Placeholder text for column filter inputs"
-        },
-        {
-          "name": "emptyStateIcon",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Optional icon for empty state"
-        },
-        {
-          "name": "emptyStateTitle",
-          "type": "string",
-          "required": false,
-          "defaultValue": "'No results found'",
-          "description": "Optional title text displayed when the grid has no rows to show."
-        },
-        {
-          "name": "emptyStateDescription",
-          "type": "string",
-          "required": false,
-          "defaultValue": "\"Sorry, we couldn't find any results for your search.\"",
-          "description": "Optional description text displayed below the empty state title,\nproviding additional context or instructions (e.g., \"No data found\" or \"Try adjusting your filters\")."
-        },
-        {
-          "name": "loading",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false",
-          "description": "When true, shows AG-Grid's native loading overlay"
-        },
-        {
-          "name": "wrapperBorder",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "true",
-          "description": "Whether to apply a border around the grid container"
-        },
-        {
-          "name": "withoutHeaderBorders",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false",
-          "description": "Whether to hide the header row borders"
-        },
-        {
-          "name": "selectionMode",
-          "type": "GridSelectionMode",
-          "required": false,
-          "description": "Could be GridSelectionMode.MULTIPLE or GridSelectionMode.SINGLE to enable selection column"
-        },
-        {
-          "name": "allowDisabledContextMenu",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false",
-          "description": "Enables context menu actions even if row itself is disabled for selection"
-        }
-      ],
-      "examples": [
-        "// Basic usage with data\ninterface Product {\n  id: string;\n  name: string;\n  price: number;\n}\n\nconst columns: ColDef<Product>[] = [\n  { field: 'name', headerName: 'Product Name', flex: 1 },\n  { field: 'price', headerName: 'Price', width: 120 },\n];\n\n<DialGrid<Product>\n  columnDefs={columns}\n  rowData={products}\n/>\n\n// With loading state\n<DialGrid<Product>\n  columnDefs={columns}\n  rowData={products}\n  loading={true}\n/>\n\n// With context menu\nconst getContextMenu = (row: Product): DropdownItem[] => [\n  { key: 'edit', label: 'Edit' },\n  { key: 'delete', label: 'Delete', danger: true },\n];\n\n<DialGrid<Product>\n  columnDefs={columns}\n  rowData={products}\n  getContextMenuItems={getContextMenu}\n/>\n\n// Controlled selection\nconst [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());\n\n<DialGrid<Product>\n  columnDefs={columns}\n  rowData={products}\n  selectedRowIds={selectedIds}\n  onSelectionChange={(ids, rows) => {\n    setSelectedIds(ids);\n    console.log('Selected:', rows);\n  }}\n/>"
-      ],
-      "sourceFile": "components/Grid/Grid.tsx",
-      "supersededBy": "Grid"
-    },
-    {
-      "name": "DialDateCellRenderer",
-      "category": "Grid",
-      "generation": "1.0",
-      "description": "Minimal date cell renderer (ag-Grid compatible).\nDesign system 1.0\n\nRenders the value in the **\"MMM dd, yyyy\"** format (e.g., \"Jul 20, 2025\"),\nwrapped in `DialEllipsisTooltip` (tooltip only appears if truncated).",
-      "props": [
-        {
-          "name": "value",
-          "type": "DateValue | null",
-          "required": false
-        },
-        {
-          "name": "locale",
-          "type": "string",
-          "required": false,
-          "defaultValue": "DEFAULT_LOCALE",
-          "description": "Locale fixed to U.S. English by default to enforce \"Jul 20, 2025\"."
-        },
-        {
-          "name": "options",
-          "type": "Intl.DateTimeFormatOptions",
-          "required": false,
-          "defaultValue": "DEFAULT_DATE_FORMAT_OPTIONS",
-          "description": "Options for date formatting (e.g., timeZone)."
-        },
-        {
-          "name": "emptyPlaceholder",
-          "type": "string",
-          "required": false,
-          "description": "Placeholder when value is empty/invalid."
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false,
-          "description": "Additional classes merged into the wrapper."
-        },
-        {
-          "name": "hideTooltip",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false"
-        }
-      ],
-      "examples": [
-        "// ag-Grid colDef\n{ field: 'createdAt', cellRenderer: DateCellRenderer, cellRendererParams: { options: { timeZone: 'UTC' } } }\n\n// Direct usage\n<DateCellRenderer value=\"2025-07-20T00:00:00Z\" options={{ timeZone: 'UTC' }} />\n<DateCellRenderer value={1752969600000} options={{ timeZone: 'UTC' }} /> // milliseconds"
-      ],
-      "sourceFile": "components/Grid/renderers/DateCellRenderer.tsx",
-      "supersededBy": "DateCellRenderer"
-    },
-    {
-      "name": "DialTabs",
-      "category": "Navigation",
-      "generation": "1.0",
-      "description": "A responsive and overflow-aware tabs component that automatically adapts its layout\naliases: TabNavigation|TabBar\nDesign system 1.0\n\nbetween a scrollable tab bar and a dropdown menu on smaller screens.\n\nWhen there are too many tabs to fit in a single line, it introduces a dropdown button\nfor accessing hidden tabs and ensures smooth horizontal scrolling. The component also\nautomatically keeps the active tab in view.\n\nSupports both horizontal and vertical orientations and dynamically adjusts layout\nbased on screen size and available space.\n\nOn larger screens, tabs are displayed according to the `orientation` prop\n(horizontal or vertical). On smaller screens (mobile or tablet), the tabs collapse\ninto a dropdown menu for better usability.",
-      "props": [
-        {
-          "name": "tabs",
-          "type": "TabModel[]",
-          "required": true,
-          "description": "Array of tab models to render. Each tab must include an `id` and a display `name`."
-        },
-        {
-          "name": "activeTab",
-          "type": "string",
-          "required": true,
-          "description": "The identifier of the currently active tab."
-        },
-        {
-          "name": "onClick",
-          "type": "(id: string) => void",
-          "required": true,
-          "description": "Callback fired when a tab is selected. Receives the tab's `id` as an argument."
-        },
-        {
-          "name": "orientation",
-          "type": "TabOrientation",
-          "required": false,
-          "defaultValue": "TabOrientation.Horizontal",
-          "description": "Layout direction of the tabs. Uses the  enum."
-        },
-        {
-          "name": "view",
-          "type": "TabView",
-          "required": false,
-          "defaultValue": "TabView.Default",
-          "description": "Visual style of the tabs. Uses the  enum.\n`Inline` renders a compact segmented control where the active tab is marked with a\nleading check icon. The inline view is not responsive and ignores overflow/dropdown logic."
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false
-        },
-        {
-          "name": "screenThreshold",
-          "type": "ScreenResolution",
-          "required": false,
-          "defaultValue": "ScreenResolution.Tablet",
-          "description": "Defines the screen size threshold\nbelow which tabs collapse into a dropdown. Uses the  enum.\nWhen set to `Tablet`, both mobile and tablet screens will trigger dropdown mode."
-        },
-        {
-          "name": "smallScreenContainerClassName",
-          "type": "string",
-          "required": false,
-          "description": "Optional CSS class applied to the dropdown container\nin small-screen (collapsed) mode."
-        },
-        {
-          "name": "smallScreenDropdownItemClassName",
-          "type": "string",
-          "required": false,
-          "description": "Optional CSS class applied to individual dropdown\nitems in small-screen mode."
-        },
-        {
-          "name": "desktopDropdownClassName",
-          "type": "string",
-          "required": false,
-          "description": "Optional CSS class applied to dropdown button in non small-screen mode."
-        },
-        {
-          "name": "desktopTabClassName",
-          "type": "string",
-          "required": false,
-          "description": "Optional CSS class applied to tab in non small-screed mode."
-        },
-        {
-          "name": "inlineContainerClassName",
-          "type": "string",
-          "required": false
-        },
-        {
-          "name": "inlineTabClassName",
-          "type": "string",
-          "required": false
-        }
-      ],
-      "examples": [
-        "<DialTabs\n  tabs={[\n    { id: 'overview', name: 'Overview' },\n    { id: 'details', name: 'Details' },\n    { id: 'settings', name: 'Settings', invalid: true },\n  ]}\n  activeTab=\"overview\"\n  onClick={(id) => setActiveTab(id)}\n  orientation={TabOrientation.Horizontal}\n/>"
-      ],
-      "sourceFile": "components/Tabs/Tabs.tsx",
-      "supersededBy": "Tabs"
-    },
-    {
-      "name": "DialBreadcrumb",
-      "category": "Navigation",
-      "generation": "1.0",
-      "description": "Breadcrumb navigation component with horizontal scroll on overflow.\naliases: NavigationPath|BreadcrumbTrail\nDesign system 1.0\n\nUse either the `pathItems` prop or compose with `<DialBreadcrumbItem/>` as children.\nThe last item is treated as the current page.",
-      "props": [
-        {
-          "name": "pathItems",
-          "type": "DialBreadcrumbPathItem[]",
-          "required": false,
-          "description": "Array of breadcrumb pathItems (see `DialBreadcrumbItem`)."
-        },
-        {
-          "name": "separator",
-          "type": "ReactNode",
-          "required": false,
-          "defaultValue": "defaultSeparator",
-          "description": "Custom separator node (default: right chevron icon)."
-        },
-        {
-          "name": "ariaLabel",
-          "type": "string",
-          "required": false,
-          "defaultValue": "'Breadcrumb'",
-          "description": "Aria label for the `<nav>` element (default: \"Breadcrumb\")."
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes for the `<nav>` container."
-        },
-        {
-          "name": "children",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Alternatively, compose with `<DialBreadcrumbItem/>` as children."
-        },
-        {
-          "name": "labelClassName",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes applied to each item when using `pathItems` prop."
-        },
-        {
-          "name": "onBeforeNavigate",
-          "type": "NavigationGuard",
-          "required": false,
-          "description": "Navigation guard called before navigating to a breadcrumb item.\nGuard function called before navigating to a different breadcrumb item.\nReturn `true` to allow navigation, `false` to prevent it.\nCan return a Promise for async checks (e.g., showing a confirmation dialog)."
-        }
-      ],
-      "examples": [
-        "<DialBreadcrumb\n  pathItems={[\n    { label: 'Home', href: '/' },\n    { label: 'Section', href: '/section' },\n    { label: 'Current Page' },\n  ]}\n/>\n\n<DialBreadcrumb>\n  <DialBreadcrumbItem label=\"Home\" href=\"/\" />\n  <DialBreadcrumbItem label=\"Section\" href=\"/section\" />\n  <DialBreadcrumbItem label=\"Current Page\" />\n</DialBreadcrumb>",
-        "<DialBreadcrumb\n   pathItems={items}\n   onBeforeNavigate={async () => {\n     if (hasUnsavedChanges) {\n       return await confirmLeave();\n     }\n     return true;\n   }}\n />"
-      ],
-      "sourceFile": "components/Breadcrumb/Breadcrumb.tsx"
-    },
-    {
-      "name": "DialBreadcrumbItem",
-      "category": "Navigation",
-      "generation": "1.0",
-      "description": "Design system 1.0",
-      "props": [
-        {
-          "name": "label",
-          "type": "ReactNode",
-          "required": true
-        },
-        {
-          "name": "href",
-          "type": "string",
-          "required": false
-        },
-        {
-          "name": "onClick",
-          "type": "MouseEventHandler<HTMLAnchorElement>",
-          "required": false
-        },
-        {
-          "name": "disabled",
-          "type": "boolean",
-          "required": false
-        },
-        {
-          "name": "iconBefore",
-          "type": "ReactNode",
-          "required": false
-        },
-        {
-          "name": "labelClassName",
-          "type": "string",
-          "required": false
-        },
-        {
-          "name": "isLast",
-          "type": "boolean",
-          "required": false
-        },
-        {
-          "name": "isFirst",
-          "type": "boolean",
-          "required": false
-        },
-        {
-          "name": "separator",
-          "type": "ReactNode",
-          "required": false,
-          "defaultValue": "defaultSeparator"
-        },
-        {
-          "name": "onBeforeNavigate",
-          "type": "NavigationGuard",
-          "required": false
-        }
-      ],
-      "examples": [],
-      "sourceFile": "components/Breadcrumb/BreadcrumbItem.tsx"
-    },
-    {
-      "name": "DialButton",
-      "category": "Elements/Buttons",
-      "generation": "1.0",
-      "description": "A Button component with flexible icon and text positioning\naliases: ActionButton|CallToAction\nDesign system 1.0",
-      "props": [
-        {
-          "name": "variant",
-          "type": "ButtonVariant",
-          "required": false,
-          "description": "Defines the visual style of the button"
-        },
-        {
-          "name": "size",
-          "type": "ElementSize",
-          "required": false,
-          "defaultValue": "ElementSize.Standard",
-          "description": "Defines the size of the button"
-        },
-        {
-          "name": "appearance",
-          "type": "ButtonAppearance",
-          "required": false,
-          "defaultValue": "ButtonAppearance.Solid",
-          "description": "Defines the type of the button"
-        },
-        {
-          "name": "textClassName",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes to apply specifically to the button text"
-        },
-        {
-          "name": "label",
-          "type": "ReactNode",
-          "required": false,
-          "description": "The content of the button. Can be any React node."
-        },
-        {
-          "name": "iconBefore",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Icon or element to display before the button text"
-        },
-        {
-          "name": "iconAfter",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Icon or element to display after the button text"
-        },
-        {
-          "name": "hideTitleOnMobile",
-          "type": "boolean",
-          "required": false,
-          "description": "Whether to hide the title text on mobile devices"
-        },
-        {
-          "name": "tooltipProps",
-          "type": "TooltipProps",
-          "required": false
-        }
-      ],
-      "examples": [
-        "<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",
-      "supersededBy": "Button"
-    },
-    {
-      "name": "DialIconButton",
-      "category": "Elements/Buttons",
-      "generation": "1.0",
-      "description": "A Icon Button component with flexible icon and text positioning\naliases: IconicButton|SymbolButton\nDesign system 1.0",
-      "props": [
-        {
-          "name": "variant",
-          "type": "ButtonVariant",
-          "required": false,
-          "description": "Defines the visual style of the button"
-        },
-        {
-          "name": "size",
-          "type": "ElementSize",
-          "required": false,
-          "defaultValue": "ElementSize.Standard",
-          "description": "Defines the size of the button"
-        },
-        {
-          "name": "appearance",
-          "type": "ButtonAppearance",
-          "required": false,
-          "defaultValue": "ButtonAppearance.Solid",
-          "description": "Defines the type of the button"
-        },
-        {
-          "name": "icon",
-          "type": "ReactNode",
-          "required": true,
-          "description": "Icon display"
-        },
-        {
-          "name": "tooltipProps",
-          "type": "TooltipProps",
-          "required": false
-        }
-      ],
-      "examples": [
-        "<DialIconButton\n  onClick={handleClick}\n  icon={<Icon />}\n  className=\"custom-button\"\n/>",
-        "<DialIconButton\n  aria-label=\"Custom Label\"\n  onClick={handleClick}\n/>"
-      ],
-      "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",
-      "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",
-      "supersededBy": "NeutralButton"
-    },
-    {
-      "name": "DialPrimaryButton",
-      "category": "Elements/Buttons",
-      "generation": "1.0",
-      "description": "A Primary Button component with predefined primary variant\nDesign system 1.0",
-      "props": [],
-      "examples": [
-        "<DialPrimaryButton\n label=\"Click me\"\nonClick={handleClick}\nclassName=\"custom-button\"\n/>"
-      ],
-      "sourceFile": "components/Button/ButtonWrappers.tsx",
-      "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",
-      "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",
-      "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",
-      "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",
-      "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",
-      "supersededBy": "NeutralIconButton"
-    },
-    {
-      "name": "DialPrimaryIconButton",
-      "category": "Elements/Buttons",
-      "generation": "1.0",
-      "description": "A Primary Icon Button component with predefined primary variant\nDesign system 1.0",
-      "props": [],
-      "examples": [
-        "<DialPrimaryIconButton\n icon={<Icon />}\n onClick={handleClick}\n className=\"custom-button\"\n/>"
-      ],
-      "sourceFile": "components/IconButton/IconButtonWrappers.tsx",
-      "supersededBy": "PrimaryIconButton"
-    },
-    {
-      "name": "DialSecondaryIconButton",
-      "category": "Elements/Buttons",
-      "generation": "1.0",
-      "description": "A Secondary Icon Button component with predefined secondary variant",
-      "props": [],
-      "examples": [
-        "<DialSecondaryIconButton\n icon={<Icon />}\n onClick={handleClick}\n className=\"custom-button\"\n/>"
-      ],
-      "sourceFile": "components/IconButton/IconButtonWrappers.tsx"
-    },
-    {
-      "name": "DialSuccessIconButton",
-      "category": "Elements/Buttons",
-      "generation": "1.0",
-      "description": "A Success Icon Button component with predefined success variant",
-      "props": [],
-      "examples": [
-        "<DialSuccessIconButton\n icon={<Icon />}\n onClick={handleClick}\n className=\"custom-button\"\n/>"
-      ],
-      "sourceFile": "components/IconButton/IconButtonWrappers.tsx"
-    },
-    {
-      "name": "DialTertiaryIconButton",
-      "category": "Elements/Buttons",
-      "generation": "1.0",
-      "description": "A Tertiary Icon Button component with predefined tertiary variant",
-      "props": [],
-      "examples": [
-        "<DialTertiaryIconButton\n icon={<Icon />}\n onClick={handleClick}\n className=\"custom-button\"\n/>"
-      ],
-      "sourceFile": "components/IconButton/IconButtonWrappers.tsx"
-    },
-    {
-      "name": "DialCloseButton",
-      "category": "Elements/Buttons",
-      "generation": "1.0",
-      "description": "A Close button component with a customizable icon and accessible label.\naliases: DismissButton|ExitButton\nDesign system 1.0",
-      "props": [
-        {
-          "name": "ariaLabel",
-          "type": "string",
-          "required": false,
-          "description": "Accessible label for screen readers"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes to apply to the button"
-        },
-        {
-          "name": "size",
-          "type": "number",
-          "required": false,
-          "defaultValue": "24",
-          "description": "Size of the close icon"
-        },
-        {
-          "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": [
-        "<DialCloseButton\n  ariaLabel=\"Close dialog\"\n  onClose={handleClose}\n  className=\"custom-close\"\n  size={32}\n/>"
-      ],
-      "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\nDesign system 1.0\n\nRenders a `DialDangerButton` with a predefined trash icon (`IconTrashX`) as the leading icon.\nAdditional props are passed directly to the underlying `DialDangerButton`.",
-      "props": [
-        {
-          "name": "iconClassName",
-          "type": "string",
-          "required": false,
-          "description": "Optional CSS class applied to the trash icon for additional styling"
-        }
-      ],
-      "examples": [
-        "<DialRemoveButton\n  label=\"Delete item\"\n  onClick={handleDelete}\n  iconClassName=\"text-error\"\n/>"
-      ],
-      "sourceFile": "components/RemoveButton/RemoveButton.tsx"
-    },
-    {
-      "name": "DialTextarea",
-      "category": "Elements",
-      "generation": "1.0",
-      "description": "A flexible textarea component with validation support and consistent styling\naliases: MultilineInput|TextBox\nDesign system 1.0",
-      "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/Textarea/Textarea.tsx",
-      "supersededBy": "Textarea"
-    },
-    {
-      "name": "DialTooltip",
-      "category": "Overlay",
-      "generation": "1.0",
-      "description": "A Tooltip component that displays information on hover\naliases: HoverPopover|InfoPopover\nDesign system 1.0",
-      "props": [
-        {
-          "name": "hideTooltip",
-          "type": "boolean",
-          "required": false,
-          "description": "Whether to hide the tooltip completely"
-        },
-        {
-          "name": "tooltip",
-          "type": "ReactNode",
-          "required": false,
-          "description": "The content to display in the tooltip"
-        },
-        {
-          "name": "children",
-          "type": "ReactNode",
-          "required": true,
-          "description": "The element that triggers the tooltip"
-        },
-        {
-          "name": "triggerClassName",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes for the trigger element"
-        },
-        {
-          "name": "contentClassName",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes for the tooltip content"
-        }
-      ],
-      "examples": [
-        "<DialTooltip tooltip=\"This is helpful information\">\n  <button>Hover me</button>\n</DialTooltip>"
-      ],
-      "sourceFile": "components/Tooltip/Tooltip.tsx",
-      "supersededBy": "Tooltip"
-    },
-    {
-      "name": "DialTooltipContainer",
-      "category": "Overlay",
-      "generation": "1.0",
-      "description": "The container component that provides tooltip context and state management\nDesign system 1.0",
-      "props": [],
-      "examples": [],
-      "sourceFile": "components/Tooltip/TooltipContainer.tsx",
-      "supersededBy": "TooltipContainer"
-    },
-    {
-      "name": "DialTooltipContent",
-      "category": "Overlay",
-      "generation": "1.0",
-      "description": "The content area of a tooltip that displays the tooltip information\nDesign system 1.0\n\nRenders nothing on a touch-only device, where no pointer can hover to reveal\nit. A narrow viewport is not itself disqualifying: an embed a few hundred\npixels wide still hovers on a desktop.",
-      "props": [],
-      "examples": [],
-      "sourceFile": "components/Tooltip/TooltipContent.tsx",
-      "supersededBy": "TooltipContent"
-    },
-    {
-      "name": "DialTooltipTrigger",
-      "category": "Overlay",
-      "generation": "1.0",
-      "description": "The trigger element for a tooltip that can be clicked or hovered\nDesign system 1.0",
-      "props": [],
-      "examples": [],
-      "sourceFile": "components/Tooltip/TooltipTrigger.tsx",
-      "supersededBy": "TooltipTrigger"
-    },
-    {
-      "name": "DialSwitch",
-      "category": "Form",
-      "generation": "1.0",
-      "description": "A Switch component with various styling options\naliases: ToggleSwitch|BinaryToggle\nDesign system 1.0",
-      "props": [
-        {
-          "name": "label",
-          "type": "ReactNode",
-          "required": false
-        },
-        {
-          "name": "switchId",
-          "type": "string",
-          "required": true,
-          "description": "Unique identifier for the switch element"
-        },
-        {
-          "name": "isOn",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false",
-          "description": "The current value of the switch"
-        },
-        {
-          "name": "disabled",
-          "type": "boolean",
-          "required": false,
-          "description": "Whether the switch is disabled"
-        },
-        {
-          "name": "onChange",
-          "type": "(value: boolean) => void",
-          "required": false,
-          "description": "Callback function called when the switch value changes"
-        },
-        {
-          "name": "caption",
-          "type": "string",
-          "required": false,
-          "description": "Caption text"
-        }
-      ],
-      "examples": [
-        "<DialSwitch\n  switchId=\"switch\"\n  label=\"Toggle\"\n  isOn={true}\n  disabled={false}\n  onChange={(value) => console.log(value)}\n  caption=\"Caption\"\n/>"
-      ],
-      "sourceFile": "components/Switch/Switch.tsx",
-      "supersededBy": "Switch"
-    },
-    {
-      "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\nDesign system 1.0\n\nRenders a horizontal group of segments where every option is always visible and\nequally sized. Supports 2 or more segments, optional per-option icons, and\nkeyboard navigation (Arrow keys, Home, End).",
-      "props": [
-        {
-          "name": "options",
-          "type": "SegmentedControlOption<T>[]",
-          "required": true,
-          "description": "Segments to render. Each option needs a unique `value` and may include a `label`, `icon`, and `disabled` flag."
-        },
-        {
-          "name": "value",
-          "type": "T",
-          "required": true,
-          "description": "The currently selected option `value`."
-        },
-        {
-          "name": "onChange",
-          "type": "(value: T) => void",
-          "required": true,
-          "description": "Callback fired with the selected option `value`."
-        },
-        {
-          "name": "disabled",
-          "type": "boolean",
-          "required": false,
-          "description": "Disables the entire control when set."
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false,
-          "description": "Additional classes applied to the container."
-        },
-        {
-          "name": "ariaLabel",
-          "type": "string",
-          "required": false,
-          "description": "Accessible label for the control (applied to the `tablist`)."
-        }
-      ],
-      "examples": [
-        "<DialSegmentedControl\n  ariaLabel=\"View\"\n  value={view}\n  onChange={setView}\n  options={[\n    { value: 'list', label: 'List' },\n    { value: 'grid', label: 'Grid' },\n  ]}\n/>"
-      ],
-      "sourceFile": "components/SegmentedControl/SegmentedControl.tsx",
-      "supersededBy": "SegmentedControl"
-    },
-    {
-      "name": "DialPopup",
-      "category": "Overlay",
-      "generation": "1.0",
-      "description": "An accessible modal dialog component using Floating UI.\naliases: Modal|Dialog\nDesign system 1.0\n\nRenders in a portal with a scrim overlay, focus management, header with a title,\ncontent area, optional footer and a close control.",
-      "props": [
-        {
-          "name": "open",
-          "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": "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": "dividers",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "true",
-          "description": "Whether to render separators between sections"
-        },
-        {
-          "name": "dividerFooter",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "true",
-          "description": "Whether to render a divider above the footer when `dividers` is true"
-        },
-        {
-          "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 (default: false)"
-        },
-        {
-          "name": "closeOnOutsideClick",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "true",
-          "description": "Whether the popup closes when clicking outside (default: true)"
-        },
-        {
-          "name": "preventKeyboardOnOpen",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false",
-          "description": "When true, initial focus goes to a non-input guard to avoid opening the virtual keyboard on mobile. Redundant since the default focuses the dialog container, which never raises the keyboard; kept for compatibility"
-        }
-      ],
-      "examples": [
-        "<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",
-      "supersededBy": "Popup"
-    },
-    {
-      "name": "DialConfirmationPopup",
-      "category": "Overlay",
-      "generation": "1.0",
-      "description": "A confirmation dialog built with DialPopup and DialButton.\naliases: ConfirmDialog|WarningDialog\nDesign system 1.0\n\nProvides an accessible modal with a title, optional description or custom content,\nand a footer with Cancel / Confirm actions.",
-      "props": [
-        {
-          "name": "description",
-          "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": [
-        "<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",
-      "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\nDesign system 1.0\n\nRenders a labeled readout using `DialInputPopup`; when opened, a `DialPopup`\ndisplays a `DialRadioGroup` allowing the user to pick from a list of options.\nThe footer provides Cancel/Apply actions, with Apply disabled when `isValid` is false.\n\nThe value shown in the collapsed field is derived from either `customInputValue`\nor the name of the currently selected radio option identified by `selectedValue`.",
-      "props": [],
-      "examples": [
-        "<DialRadioGroupPopupField\n  fieldTitle=\"Status\"\n  htmlFor=\"status\"\n  header=\"Select status\"\n  emptyValueText=\"None\"\n  radioButtons={[\n    { id: 'draft', name: 'Draft' },\n    { id: 'review', name: 'In Review' },\n    { id: 'published', name: 'Published' },\n  ]}\n  selectedValue=\"draft\"\n  selectedRadioValue=\"draft\"\n  onChangeRadioField={(id) => console.log('radio changed', id)}\n  id=\"status-group\"\n  isValid={true}\n  onApply={() => console.log('applied')}\n/>"
-      ],
-      "sourceFile": "components/RadioGroupPopupField/RadioGroupPopupField.tsx",
-      "supersededBy": "RadioGroupPopupField"
-    },
-    {
-      "name": "DialFormPopup",
-      "category": "Overlay",
-      "generation": "1.0",
-      "description": "A form-oriented popup dialog.\naliases: FormDialog|FormModal\nDesign system 1.0\n\nProvides an accessible popup with a title, custom body,\nand a footer with \"Cancel\" and \"Submit\" actions.",
-      "props": [
-        {
-          "name": "submitLabel",
-          "type": "string",
-          "required": false,
-          "defaultValue": "defaultSubmitLabel",
-          "description": "Label for the primary action 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": "disableSubmitButton",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false",
-          "description": "Disables the submit button"
-        },
-        {
-          "name": "submitClassName",
-          "type": "string",
-          "required": false,
-          "description": "Extra classes merged into the submit button"
-        },
-        {
-          "name": "onSubmit",
-          "type": "() => void",
-          "required": true,
-          "description": "Fired on submit"
-        },
-        {
-          "name": "onCancel",
-          "type": "() => void",
-          "required": false,
-          "description": "Fired on cancel (falls back to `onClose`)"
-        },
-        {
-          "name": "children",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Custom body content"
-        }
-      ],
-      "examples": [
-        "<DialFormPopup\n  open\n  header=\"Create Model\"\n  onClose={() => setOpen(false)}\n  onSubmit={handleSubmit}\n/>"
-      ],
-      "sourceFile": "components/FormPopup/FormPopup.tsx"
-    },
-    {
-      "name": "DialInput",
-      "category": "Elements/Inputs",
-      "generation": "1.0",
-      "description": "A flexible input component with icon support and various styling options\naliases: TextField|FormInput\nDesign system 1.0",
-      "props": [
-        {
-          "name": "labelProps",
-          "type": "DialLabelProps",
-          "required": false
-        },
-        {
-          "name": "inputButtonProps",
-          "type": "DialInputButtonProps",
-          "required": false
-        },
-        {
-          "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": "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"
-        }
-      ],
+      "name": "DialLinkButton",
+      "category": "Elements/Buttons",
+      "generation": "1.0",
+      "description": "A Link Button component with predefined link appearance",
+      "props": [],
       "examples": [
-        "<DialInput\n  id=\"search\"\n  placeholder=\"Search...\"\n  iconBefore={<SearchIcon />}\n  iconAfter={<ClearIcon />}\n  onChange={(value) => console.log(value)}\n/>"
+        "<DialLinkButton\n label=\"Click me\"\n onClick={handleClick}\n className=\"custom-button\"\n/>"
       ],
-      "sourceFile": "components/Input/Input.tsx",
-      "supersededBy": "Input"
+      "sourceFile": "components/Button/ButtonWrappers.tsx",
+      "supersededBy": "LinkButton"
     },
     {
-      "name": "DialNumberInput",
-      "category": "Elements/Inputs",
+      "name": "DialDangerIconButton",
+      "category": "Elements/Buttons",
       "generation": "1.0",
-      "description": "A number input field component\naliases: NumericField|NumberField\nDesign system 1.0",
-      "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)"
-        }
-      ],
+      "description": "A Danger Icon Button component with predefined danger variant",
+      "props": [],
       "examples": [
-        "<DialNumberInput\n  id=\"age\"\n  placeholder=\"Enter your age\"\n  value={25}\n  onChange={(value) => setAge(value)}\n/>"
+        "<DialDangerIconButton\n icon={<Icon />}\n onClick={handleClick}\n className=\"custom-button\"\n/>"
       ],
-      "sourceFile": "components/NumberInput/NumberInput.tsx",
-      "supersededBy": "NumberInput"
+      "sourceFile": "components/IconButton/IconButtonWrappers.tsx",
+      "supersededBy": "DangerIconButton"
     },
     {
-      "name": "DialPasswordInput",
-      "category": "Elements/Inputs",
+      "name": "DialGhostIconButton",
+      "category": "Elements/Buttons",
       "generation": "1.0",
-      "description": "A password input component with show/hide functionality and customizable props.\naliases: SecureInput|ToggleablePassword\nDesign system 1.0",
+      "description": "A Ghost Icon Button component with predefined ghost appearance",
       "props": [],
       "examples": [
-        "<DialPasswordInput\n  id=\"password\"\n  label=\"Password\"\n  value={password}\n  onChange={e => setPassword(e.target.value)}\n  disabled={false}\n/>"
+        "<DialGhostIconButton\n icon={<Icon />}\n onClick={handleClick}\n className=\"custom-button\"\n/>"
       ],
-      "sourceFile": "components/PasswordInput/PasswordInput.tsx",
-      "supersededBy": "PasswordInput"
+      "sourceFile": "components/IconButton/IconButtonWrappers.tsx",
+      "supersededBy": "GhostIconButton"
     },
     {
-      "name": "DialSearch",
-      "category": "Elements",
+      "name": "DialNeutralIconButton",
+      "category": "Elements/Buttons",
       "generation": "1.0",
-      "description": "A search input component with a customizable placeholder, icons, flexible props, and the ability\naliases: SearchField|QueryInput\nDesign system 1.0\n\nto clear the input value via a clear button. Supports multiple sizes for flexible layouts.",
-      "props": [
-        {
-          "name": "withoutBorder",
-          "type": "boolean",
-          "required": false,
-          "description": "If true, the search input will be rendered without a border."
-        },
-        {
-          "name": "size",
-          "type": "ElementSize",
-          "required": false,
-          "defaultValue": "ElementSize.Standard",
-          "description": "The size of the search input. Uses the  enum."
-        },
-        {
-          "name": "onChange",
-          "type": "(value: string) => void",
-          "required": false
-        }
-      ],
+      "description": "A Neutral Icon Button component with predefined neutral variant",
+      "props": [],
       "examples": [
-        "<DialSearch\n  id=\"search\"\n  value={query}\n  placeholder=\"Search\"\n  size={ElementSize.Small}\n  onChange={(value) => setQuery(value)}\n  onBlur={() => handleBlur()}\n  disabled={false}\n/>"
+        "<DialNeutralIconButton\n icon={<Icon />}\n onClick={handleClick}\n className=\"custom-button\"\n/>"
       ],
-      "sourceFile": "components/Search/Search.tsx",
-      "supersededBy": "Search"
+      "sourceFile": "components/IconButton/IconButtonWrappers.tsx",
+      "supersededBy": "NeutralIconButton"
     },
     {
-      "name": "DialInputPopup",
-      "category": "Overlay",
+      "name": "DialPrimaryIconButton",
+      "category": "Elements/Buttons",
       "generation": "1.0",
-      "description": "An input field that opens a popup when clicked, displaying a selected value or a list of values.\naliases: PopupInput|ReadonlyInput\nDesign system 1.0\n\nIt supports read-only mode, error states, and disabled state, with customizable styling.\nThe modal content is rendered using a portal for seamless integration.",
-      "props": [
-        {
-          "name": "open",
-          "type": "boolean",
-          "required": false,
-          "description": "The current state of the modal, indicating whether it is opened or closed."
-        },
-        {
-          "name": "selectedValue",
-          "type": "string | string[]",
-          "required": false,
-          "description": "The currently selected value(s). Can be a string for a single value or an array of strings for multiple values."
-        },
-        {
-          "name": "children",
-          "type": "ReactNode",
-          "required": true,
-          "description": "The content to render inside the modal when it is opened."
-        },
-        {
-          "name": "onOpen",
-          "type": "() => void",
-          "required": true,
-          "description": "A callback function triggered when the modal open button is clicked."
-        },
-        {
-          "name": "disabled",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false",
-          "description": "Whether the input is disabled, preventing user interaction."
-        },
-        {
-          "name": "valueClassName",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes applied to the displayed value."
-        },
-        {
-          "name": "inputClassName",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes applied to the input container."
-        },
-        {
-          "name": "placeholder",
-          "type": "string",
-          "required": false,
-          "description": "Placeholder text displayed when no value is selected."
-        },
-        {
-          "name": "elementId",
-          "type": "string",
-          "required": false,
-          "description": "A unique identifier for the input element, useful for accessibility and testing."
-        },
-        {
-          "name": "errorText",
-          "type": "string",
-          "required": false,
-          "description": "An optional error message displayed below the input when an error state is present."
-        },
-        {
-          "name": "invalid",
-          "type": "boolean",
-          "required": false,
-          "description": "Whether the input is in an invalid state, affecting styling. Applied automatically if errorText is provided."
-        },
-        {
-          "name": "emptyValueText",
-          "type": "string",
-          "required": false,
-          "description": "The text displayed when no value is selected and placeholder is not provided."
-        },
-        {
-          "name": "editable",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false",
-          "description": "When true, the input area becomes an editable text field; only the icon opens the popup."
-        },
-        {
-          "name": "onValueChange",
-          "type": "(value: string) => void",
-          "required": false,
-          "description": "Callback fired when the user types in the editable input."
-        },
-        {
-          "name": "collapseTagOverflow",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false"
-        },
-        {
-          "name": "iconBefore",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Optional icon rendered at the start of the field, before the value."
-        }
+      "description": "A Primary Icon Button component with predefined primary variant\nDesign system 1.0",
+      "props": [],
+      "examples": [
+        "<DialPrimaryIconButton\n icon={<Icon />}\n onClick={handleClick}\n className=\"custom-button\"\n/>"
       ],
+      "sourceFile": "components/IconButton/IconButtonWrappers.tsx",
+      "supersededBy": "PrimaryIconButton"
+    },
+    {
+      "name": "DialSecondaryIconButton",
+      "category": "Elements/Buttons",
+      "generation": "1.0",
+      "description": "A Secondary Icon Button component with predefined secondary variant",
+      "props": [],
       "examples": [
-        "<DialInputPopup\n  open={true}\n  selectedValue=\"Selected Item\"\n  emptyValueText=\"No value selected\"\n  onOpen={() => setModalState(true)}\n  disabled={false}\n  valueClassName=\"custom-value-class\"\n  inputClassName=\"custom-input-class\"\n  elementId=\"input-modal\"\n  errorText=\"This field is required\"\n>\n  <div>Modal Content Here</div>\n</DialInputPopup>"
+        "<DialSecondaryIconButton\n icon={<Icon />}\n onClick={handleClick}\n className=\"custom-button\"\n/>"
       ],
-      "sourceFile": "components/InputPopup/InputPopup.tsx"
+      "sourceFile": "components/IconButton/IconButtonWrappers.tsx"
     },
     {
-      "name": "DialAutocompleteInputValue",
-      "category": "Form",
+      "name": "DialSuccessIconButton",
+      "category": "Elements/Buttons",
       "generation": "1.0",
-      "description": "A component that displays a list of selected items in a customizable, styled list. Each item is\naliases: SelectedList|ItemDisplay\nDesign system 1.0\n\nrendered as a tag wrapped in a tooltip, allowing for truncation and additional context when\nhovered. The component is flexible and supports custom CSS classes for styling the list and\nindividual list items.",
-      "props": [
-        {
-          "name": "placeholder",
-          "type": "string",
-          "required": false,
-          "description": "Placeholder text to display when no items are selected."
-        },
-        {
-          "name": "selectedItems",
-          "type": "string[]",
-          "required": false,
-          "description": "An array of strings representing the selected items to display. If empty or undefined, the component renders nothing."
-        },
-        {
-          "name": "listClassName",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes applied to the container element containing the list of selected items."
-        },
-        {
-          "name": "listElementClassName",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes applied to each tag element representing an individual selected item."
-        },
-        {
-          "name": "collapseTagOverflow",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false",
-          "description": "When true, keeps items on one line and shows `+N` chip with a tooltip for overflow items."
-        }
+      "description": "A Success Icon Button component with predefined success variant",
+      "props": [],
+      "examples": [
+        "<DialSuccessIconButton\n icon={<Icon />}\n onClick={handleClick}\n className=\"custom-button\"\n/>"
       ],
+      "sourceFile": "components/IconButton/IconButtonWrappers.tsx"
+    },
+    {
+      "name": "DialTertiaryIconButton",
+      "category": "Elements/Buttons",
+      "generation": "1.0",
+      "description": "A Tertiary Icon Button component with predefined tertiary variant",
+      "props": [],
       "examples": [
-        "<DialAutocompleteInputValue\n  selectedItems={['Item 1', 'Item 2', 'Item 3']}\n  listClassName=\"custom-list-class\"\n  listElementClassName=\"custom-item-class\"\n  collapseTagOverflow\n/>"
+        "<DialTertiaryIconButton\n icon={<Icon />}\n onClick={handleClick}\n className=\"custom-button\"\n/>"
       ],
-      "sourceFile": "components/AutocompleteInput/AutocompleteInputValue.tsx"
+      "sourceFile": "components/IconButton/IconButtonWrappers.tsx"
     },
     {
-      "name": "DialTagInput",
-      "category": "Form",
+      "name": "DialCloseButton",
+      "category": "Elements/Buttons",
       "generation": "1.0",
-      "description": "A tag input field that allows users to add multiple tags using the Enter or comma key.\naliases: MultiTag|TagField\nDesign system 1.0\n\nSupports removing tags, displaying field labels, optional indicators, validation states,\nand dynamic layout adjustment when tags wrap to multiple lines.",
+      "description": "A Close button component with a customizable icon and accessible label.\naliases: DismissButton|ExitButton\nDesign system 1.0",
       "props": [
         {
-          "name": "elementId",
-          "type": "string",
-          "required": false,
-          "description": "Unique identifier for the input element."
-        },
-        {
-          "name": "initialTags",
-          "type": "string[]",
-          "required": false,
-          "defaultValue": "[]",
-          "description": "Array of tags to be displayed initially."
-        },
-        {
-          "name": "placeholder",
-          "type": "string",
-          "required": false,
-          "description": "Placeholder text shown when the input is empty."
-        },
-        {
-          "name": "captionDescription",
+          "name": "ariaLabel",
           "type": "string",
           "required": false,
-          "description": "Caption text shown under the input if there is no errors."
+          "description": "Accessible label for screen readers"
         },
         {
-          "name": "errorText",
+          "name": "className",
           "type": "string",
           "required": false,
-          "description": "Error message displayed below the field when validation fails."
-        },
-        {
-          "name": "invalid",
-          "type": "boolean",
-          "required": false,
-          "description": "Whether the field should be styled as invalid."
-        },
-        {
-          "name": "disabled",
-          "type": "boolean",
-          "required": false,
-          "description": "Whether the input and remove buttons are disabled."
-        },
-        {
-          "name": "collapseTagOverflow",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false",
-          "description": "When true, keeps tags on one line and shows `+N` for overflow."
-        },
-        {
-          "name": "readOnly",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false",
-          "description": "When true, hides the text input (no new tags can be added). The outer wrapper and label/caption are also omitted so the component can be embedded inside an existing container."
+          "description": "Additional CSS classes to apply to the button"
         },
         {
-          "name": "containerClassName",
-          "type": "string",
+          "name": "size",
+          "type": "number",
           "required": false,
-          "description": "Additional CSS classes applied to the tag container (the flex row wrapping all tags)."
+          "defaultValue": "24",
+          "description": "Size of the close icon"
         },
         {
-          "name": "tagClassName",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes applied to each individual tag."
+          "name": "onClose",
+          "type": "(e: MouseEvent<HTMLButtonElement>) => void",
+          "required": true,
+          "description": "Click event handler for the close button"
         },
         {
-          "name": "onChange",
-          "type": "(tags: string[]) => void",
+          "name": "disabled",
+          "type": "boolean",
           "required": false,
-          "description": "Callback fired whenever the tag list changes (tag added or removed)."
+          "description": "Whether the button is disabled"
         }
       ],
       "examples": [
-        "<DialTagInput\n  elementId=\"skills\"\n  fieldTitle=\"Skills\"\n  placeholder=\"Add a skill\"\n  initialTags={['React', 'TypeScript']}\n  optional\n  onChange={(tags) => console.log('Updated tags:', tags)}\n/>"
+        "<DialCloseButton\n  ariaLabel=\"Close dialog\"\n  onClose={handleClose}\n  className=\"custom-close\"\n  size={32}\n/>"
       ],
-      "sourceFile": "components/TagInput/TagInput.tsx",
-      "supersededBy": "TagInput"
+      "sourceFile": "components/CloseButton/CloseButton.tsx",
+      "supersededBy": "CloseButton"
     },
     {
-      "name": "DialSelect",
-      "category": "Form",
+      "name": "DialRemoveButton",
+      "category": "Elements/Buttons",
       "generation": "1.0",
-      "description": "A versatile select supporting single and multiple selections.\naliases: OptionPicker|ChoiceSelector\nDesign system 1.0\n\nSingle mode mirrors the legacy visual:\n- Trigger shows the selected option's leading icon + label.\n- In the list, the selected option is indicated by a LEFT border and tinted background\n  (no check icon).\n\nMultiple mode uses checkboxes (including Select All with indeterminate state).\n\nSearch:\n- `searchable`: shows a plain input in the overlay header that filters options.\n- `inlineSearch` (single mode only): the trigger renders a plain input; typing filters options;\n  when closed, the input shows the selected label.",
+      "description": "A specialized button component for removal or delete actions.\naliases: DeleteButton|TrashButton\nDesign system 1.0\n\nRenders a `DialDangerButton` with a predefined trash icon (`IconTrashX`) as the leading icon.\nAdditional props are passed directly to the underlying `DialDangerButton`.",
       "props": [
         {
-          "name": "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": "elementId",
+          "name": "iconClassName",
           "type": "string",
           "required": false,
-          "description": "The id attribute for the select element."
-        },
-        {
-          "name": "size",
-          "type": "SelectSize",
-          "required": false,
-          "defaultValue": "SelectSize.Md",
-          "description": "Size of the control."
-        },
+          "description": "Optional CSS class applied to the trash icon for additional styling"
+        }
+      ],
+      "examples": [
+        "<DialRemoveButton\n  label=\"Delete item\"\n  onClick={handleDelete}\n  iconClassName=\"text-error\"\n/>"
+      ],
+      "sourceFile": "components/RemoveButton/RemoveButton.tsx"
+    },
+    {
+      "name": "DialTooltip",
+      "category": "Overlay",
+      "generation": "1.0",
+      "description": "A Tooltip component that displays information on hover\naliases: HoverPopover|InfoPopover\nDesign system 1.0",
+      "props": [
         {
-          "name": "variant",
-          "type": "SelectVariant",
+          "name": "hideTooltip",
+          "type": "boolean",
           "required": false,
-          "defaultValue": "SelectVariant.Primary",
-          "description": "Visual variant."
+          "description": "Whether to hide the tooltip completely"
         },
         {
-          "name": "value",
-          "type": "string | string[]",
+          "name": "tooltip",
+          "type": "ReactNode",
           "required": false,
-          "description": "Controlled selected value(s)."
+          "description": "The content to display in the tooltip"
         },
         {
-          "name": "customSelectedValue",
-          "type": "string",
-          "required": false,
-          "description": "Custom string to render as the selected value in single mode."
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "description": "The element that triggers the tooltip"
         },
         {
-          "name": "prefix",
+          "name": "triggerClassName",
           "type": "string",
           "required": false,
-          "description": "Prefix for selected value(s)."
-        },
-        {
-          "name": "defaultValue",
-          "type": "string | string[]",
-          "required": false,
-          "description": "Uncontrolled initial selected value(s)."
+          "description": "Additional CSS classes for the trigger element"
         },
         {
-          "name": "placeholder",
+          "name": "contentClassName",
           "type": "string",
           "required": false,
-          "defaultValue": "'Select...'",
-          "description": "Placeholder text when no selection is made."
-        },
-        {
-          "name": "searchable",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false",
-          "description": "Show a search field in the overlay header."
-        },
+          "description": "Additional CSS classes for the tooltip content"
+        }
+      ],
+      "examples": [
+        "<DialTooltip tooltip=\"This is helpful information\">\n  <button>Hover me</button>\n</DialTooltip>"
+      ],
+      "sourceFile": "components/Tooltip/Tooltip.tsx",
+      "supersededBy": "Tooltip"
+    },
+    {
+      "name": "DialTooltipContainer",
+      "category": "Overlay",
+      "generation": "1.0",
+      "description": "The container component that provides tooltip context and state management\nDesign system 1.0",
+      "props": [],
+      "examples": [],
+      "sourceFile": "components/Tooltip/TooltipContainer.tsx",
+      "supersededBy": "TooltipContainer"
+    },
+    {
+      "name": "DialTooltipContent",
+      "category": "Overlay",
+      "generation": "1.0",
+      "description": "The content area of a tooltip that displays the tooltip information\nDesign system 1.0\n\nRenders nothing on a touch-only device, where no pointer can hover to reveal\nit. A narrow viewport is not itself disqualifying: an embed a few hundred\npixels wide still hovers on a desktop.",
+      "props": [],
+      "examples": [],
+      "sourceFile": "components/Tooltip/TooltipContent.tsx",
+      "supersededBy": "TooltipContent"
+    },
+    {
+      "name": "DialTooltipTrigger",
+      "category": "Overlay",
+      "generation": "1.0",
+      "description": "The trigger element for a tooltip that can be clicked or hovered\nDesign system 1.0",
+      "props": [],
+      "examples": [],
+      "sourceFile": "components/Tooltip/TooltipTrigger.tsx",
+      "supersededBy": "TooltipTrigger"
+    },
+    {
+      "name": "DialInput",
+      "category": "Elements/Inputs",
+      "generation": "1.0",
+      "description": "A flexible input component with icon support and various styling options\naliases: TextField|FormInput\nDesign system 1.0",
+      "props": [
         {
-          "name": "searchSize",
-          "type": "ElementSize",
-          "required": false,
-          "defaultValue": "ElementSize.Standard",
-          "description": "Size of the overlay search input when `searchable` is enabled."
+          "name": "labelProps",
+          "type": "DialLabelProps",
+          "required": false
         },
         {
-          "name": "searchPlaceholder",
-          "type": "string",
-          "required": false,
-          "description": "Placeholder for the search input (overlay/inline)."
+          "name": "inputButtonProps",
+          "type": "DialInputButtonProps",
+          "required": false
         },
         {
-          "name": "selectAll",
+          "name": "invalid",
           "type": "boolean",
           "required": false,
-          "defaultValue": "false",
-          "description": "Show a \"Select All\" checkbox in multiple mode."
+          "description": "Whether the input has validation errors (applies error styling)"
         },
         {
-          "name": "selectAllLabel",
+          "name": "error",
           "type": "string",
           "required": false,
-          "defaultValue": "'Select all'",
-          "description": "Label for the \"Select All\" checkbox."
+          "description": "Error message to display below the input (also adds error styling)"
         },
         {
-          "name": "emptyStateTitle",
+          "name": "caption",
           "type": "string",
           "required": false,
-          "defaultValue": "'No options available'",
-          "description": "Title text when there are no options."
+          "description": "Helper text to display below the input"
         },
         {
-          "name": "emptyStateDescription",
+          "name": "tooltipText",
           "type": "string",
-          "required": false,
-          "description": "Description text when there are no options."
+          "required": false
         },
         {
-          "name": "emptyStateIcon",
+          "name": "iconBefore",
           "type": "ReactNode",
           "required": false,
-          "description": "Icon to display when there are no options."
+          "description": "Icon or element to display before the input"
         },
         {
-          "name": "disabled",
-          "type": "boolean",
+          "name": "iconAfter",
+          "type": "ReactNode",
           "required": false,
-          "defaultValue": "false",
-          "description": "Disable the control."
+          "description": "Icon or element to display after the input"
         },
         {
-          "name": "className",
+          "name": "prefix",
           "type": "string",
-          "required": false,
-          "description": "Additional CSS classes for the trigger."
+          "required": false
         },
         {
-          "name": "listClassName",
+          "name": "postfix",
           "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": "onInlineQueryChange",
-          "type": "(query: string) => void",
-          "required": false,
-          "description": "Called when the inline search query changes"
-        },
-        {
-          "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": "inlineSearch",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false",
-          "description": "Render a plain input inside trigger (single mode only)."
+          "required": false
         },
         {
-          "name": "onFooterClick",
-          "type": "(e: MouseEvent<HTMLDivElement>) => void",
+          "name": "inputRef",
+          "type": "Ref<HTMLInputElement>",
           "required": false,
-          "description": "Called when the footer element is clicked. When provided, automatically closes the dropdown."
+          "description": "Ref to access the underlying input element"
         },
         {
-          "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
-        }
-      ],
-      "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",
-      "supersededBy": "Select"
-    },
-    {
-      "name": "DialSelectField",
-      "category": "Form",
-      "generation": "1.0",
-      "description": "A Select field wrapper that composes `DialFormItem` and `DialSelect`.\naliases: SelectInput|ComboField\nDesign system 1.0\n\nProvides unified label, description, error rendering and a readonly view that shows\nthe selected option labels (comma-separated in single mode, list in multiple).",
-      "props": [
+          "name": "onChange",
+          "type": "(value?: string) => void",
+          "required": false,
+          "description": "Callback function called when the input value changes"
+        },
         {
-          "name": "selectClassName",
+          "name": "containerClassName",
           "type": "string",
           "required": false,
-          "description": "CSS class for the select element"
+          "description": "Additional CSS classes to apply to the container div"
         },
         {
-          "name": "containerClassName",
+          "name": "wrapperClassName",
           "type": "string",
           "required": false,
-          "description": "CSS class for the form item container"
+          "description": "Additional CSS classes to apply to the input wrapper div"
         }
       ],
       "examples": [
-        "```tsx\n<DialSelectField\n  elementId=\"transport\"\n  fieldTitle=\"Transport\"\n  options={[\n    { value: 'SSE', label: 'Server-Sent Events (SSE)' },\n    { value: 'WS', label: 'WebSocket' },\n  ]}\n  value=\"WS\"\n  onChange={(v) => setTransport(v as string)}\n/>"
+        "<DialInput\n  id=\"search\"\n  placeholder=\"Search...\"\n  iconBefore={<SearchIcon />}\n  iconAfter={<ClearIcon />}\n  onChange={(value) => console.log(value)}\n/>"
       ],
-      "sourceFile": "components/SelectField/SelectField.tsx"
+      "sourceFile": "components/Input/Input.tsx",
+      "supersededBy": "Input"
     },
     {
       "name": "DialLoadFileArea",
@@ -9597,224 +7380,6 @@
       "examples": [],
       "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\nDesign system 1.0",
-      "props": [
-        {
-          "name": "items",
-          "type": "DropdownItem[]",
-          "required": true,
-          "description": "DropdownItems with actions"
-        }
-      ],
-      "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",
-      "supersededBy": "ButtonDropdown"
-    },
-    {
-      "name": "DialDropdownIcon",
-      "category": "Dropdown",
-      "generation": "1.0",
-      "description": "A compact icon trigger with a dropdown menu.\naliases: ModelPicker|IconMenu|AvatarDropdown\nDesign system 1.0",
-      "props": [
-        {
-          "name": "icon",
-          "type": "ReactNode",
-          "required": true,
-          "description": "Primary trigger icon."
-        },
-        {
-          "name": "ariaLabel",
-          "type": "string",
-          "required": true,
-          "description": "Accessible name for the trigger button."
-        },
-        {
-          "name": "size",
-          "type": "ElementSize",
-          "required": false,
-          "defaultValue": "ElementSize.Standard",
-          "description": "Trigger size."
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes applied to the dropdown wrapper."
-        },
-        {
-          "name": "buttonClassName",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes applied to the trigger button."
-        },
-        {
-          "name": "iconClassName",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes applied to the primary icon wrapper."
-        },
-        {
-          "name": "caretIcon",
-          "type": "ReactNode",
-          "required": false,
-          "defaultValue": "<IconChevronDown size={DIAL_ICON_SIZE.SM} />",
-          "description": "Custom caret icon."
-        },
-        {
-          "name": "showCaret",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "true",
-          "description": "Whether to render the caret."
-        }
-      ],
-      "examples": [
-        "<DialDropdownIcon\n  ariaLabel=\"Select model\"\n  icon={<IconBrandOpenai size={18} />}\n  items={items}\n/>"
-      ],
-      "sourceFile": "components/DropdownIcon/DropdownIcon.tsx"
-    },
-    {
-      "name": "DialSchemaRenderer",
-      "category": "Name",
-      "generation": "1.0",
-      "description": "Renders a JSON Schema as a form UI with collapsible sections, validation, and default values.\naliases: SchemaRenderer|JsonSchemaForm\nDesign system 1.0",
-      "props": [],
-      "examples": [
-        "<DialSchemaRenderer\n  schema={mySchema}\n  onChange={(v) => console.log(v)}\n  onDefaultValues={(defaults) => console.log(defaults)}\n/>"
-      ],
-      "sourceFile": "components/SchemaRenderer/SchemaRenderer.tsx",
-      "supersededBy": "SchemaRenderer"
-    },
-    {
-      "name": "DialJsonEditor",
-      "category": "Data Display",
-      "generation": "1.0",
-      "description": "A JSON editor component built on top of Monaco Editor.\nDesign system 1.0\nProvides syntax highlighting, validation, and theme support for JSON editing.\n\nLazy-loaded component. This component is not exported directly from the UI kit to avoid errors when using with SSR. Use `LazyDialJsonEditor` and the manifest `lazy` field for dynamic import guidance.",
-      "props": [
-        {
-          "name": "value",
-          "type": "string | undefined",
-          "required": false,
-          "description": "The JSON string value to edit"
-        },
-        {
-          "name": "currentTheme",
-          "type": "string",
-          "required": true,
-          "description": "The theme to apply to the editor"
-        },
-        {
-          "name": "themesConfig",
-          "type": "Record<EditorThemes, editor.IStandaloneThemeData>",
-          "required": false,
-          "defaultValue": "EDITOR_THEMES_CONFIG",
-          "description": "Custom theme configurations"
-        },
-        {
-          "name": "onChange",
-          "type": "(value: string | undefined) => void",
-          "required": true,
-          "description": "Callback fired when the editor content changes"
-        },
-        {
-          "name": "onValidateJSON",
-          "type": "OnValidate",
-          "required": false,
-          "description": "Callback fired when JSON validation occurs"
-        },
-        {
-          "name": "options",
-          "type": "editor.IStandaloneEditorConstructionOptions",
-          "required": false,
-          "description": "Additional Monaco editor options"
-        }
-      ],
-      "examples": [],
-      "sourceFile": "components/JsonEditor/JsonEditor.tsx",
-      "lazy": {
-        "loaderExportName": "LazyDialJsonEditor",
-        "packageImport": "@epam/ai-dial-ui-kit",
-        "ssr": false,
-        "nextDynamicExample": "import dynamic from 'next/dynamic';\nimport { LazyDialJsonEditor } from '@epam/ai-dial-ui-kit';\n\nconst DialJsonEditor = dynamic(\n  async () => (await LazyDialJsonEditor()).DialJsonEditor,\n  { ssr: false },\n);"
-      }
-    },
-    {
-      "name": "DialMarkdownEditor",
-      "category": "Data Display",
-      "generation": "1.0",
-      "description": "A Markdown editor component built on top of\n\nLazy-loaded component. This component is not exported directly from the UI kit to avoid errors when using with SSR. Use `LazyDialMarkdownEditor` and the manifest `lazy` field for dynamic import guidance.",
-      "props": [
-        {
-          "name": "value",
-          "type": "string",
-          "required": false,
-          "description": "The current markdown content"
-        },
-        {
-          "name": "onChange",
-          "type": "(value: string) => void",
-          "required": false,
-          "description": "Callback fired when the editor content changes"
-        },
-        {
-          "name": "height",
-          "type": "number",
-          "required": false,
-          "defaultValue": "300",
-          "description": "Height of the editor in pixels"
-        },
-        {
-          "name": "preview",
-          "type": "PreviewType",
-          "required": false,
-          "defaultValue": "'edit'",
-          "description": "Preview mode ('edit', 'live', 'preview')"
-        },
-        {
-          "name": "theme",
-          "type": "EditorThemes",
-          "required": false,
-          "defaultValue": "EditorThemes.dark",
-          "description": "Theme for the editor ('light' or 'dark')"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes for the container"
-        },
-        {
-          "name": "placeholder",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Content to display when the editor is empty"
-        },
-        {
-          "name": "showDragbar",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "true",
-          "description": "Whether to show the bottom drag bar that resizes the editor height"
-        }
-      ],
-      "examples": [
-        "<DialMarkdownEditor\nvalue=\"# Hello World\"\nonChange={(value) => console.log(value)}\nheight={400}\ntheme=\"dark\"\n/>"
-      ],
-      "sourceFile": "components/MarkdownEditor/MarkdownEditor.tsx",
-      "lazy": {
-        "loaderExportName": "LazyDialMarkdownEditor",
-        "packageImport": "@epam/ai-dial-ui-kit",
-        "ssr": false,
-        "nextDynamicExample": "import dynamic from 'next/dynamic';\nimport { LazyDialMarkdownEditor } from '@epam/ai-dial-ui-kit';\n\nconst DialMarkdownEditor = dynamic(\n  async () => (await LazyDialMarkdownEditor()).DialMarkdownEditor,\n  { ssr: false },\n);"
-      },
-      "supersededBy": "MarkdownEditor"
     }
   ],
   "types": [
@@ -10217,52 +7782,6 @@
       ],
       "sourceFile": "models/breadcrumb.ts"
     },
-    {
-      "name": "FormItemOrientation",
-      "kind": "enum",
-      "members": [
-        {
-          "name": "Vertical",
-          "value": "'vertical'"
-        },
-        {
-          "name": "Horizontal",
-          "value": "'horizontal'"
-        }
-      ],
-      "sourceFile": "types/form-item.ts",
-      "description": "Orientation options for form item layout"
-    },
-    {
-      "name": "SelectSize",
-      "kind": "enum",
-      "members": [
-        {
-          "name": "Sm",
-          "value": "'sm'"
-        },
-        {
-          "name": "Md",
-          "value": "'md'"
-        }
-      ],
-      "sourceFile": "types/select.ts"
-    },
-    {
-      "name": "SelectVariant",
-      "kind": "enum",
-      "members": [
-        {
-          "name": "Primary",
-          "value": "'Primary'"
-        },
-        {
-          "name": "Secondary",
-          "value": "'Secondary'"
-        }
-      ],
-      "sourceFile": "types/select.ts"
-    },
     {
       "name": "FlexibleActionsDirection",
       "kind": "enum",
@@ -10465,29 +7984,6 @@
       ],
       "sourceFile": "models/select.ts"
     },
-    {
-      "name": "SegmentedControlOption",
-      "kind": "interface",
-      "members": [
-        {
-          "name": "value",
-          "value": "T"
-        },
-        {
-          "name": "label?",
-          "value": "ReactNode"
-        },
-        {
-          "name": "icon?",
-          "value": "ReactNode"
-        },
-        {
-          "name": "disabled?",
-          "value": "boolean"
-        }
-      ],
-      "sourceFile": "models/segmented-control.ts"
-    },
     {
       "name": "TabModel",
       "kind": "interface",
@@ -11894,18 +9390,6 @@
       "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",
-      "sourceFile": "components/Grid/renderers/constants.ts"
-    },
-    {
-      "name": "DEFAULT_GRID_DATE_LOCALE",
-      "sourceFile": "components/Grid/renderers/constants.ts"
-    },
-    {
-      "name": "convertGridDateToDate",
-      "sourceFile": "utils/grid-date.ts"
-    },
     {
       "name": "EDITABLE_CONTAINER_ATTRIBUTE",
       "sourceFile": "hooks/use-editable-item.tsx",
@@ -12084,7 +9568,7 @@
     {
       "name": "DIAL_KIT_CLASS",
       "sourceFile": "constants/public-class-names.ts",
-      "signature": "DIAL_KIT_CLASS = {\n  /* ── Feedback and status ───────────────────────────────────────────────── */\n  /** The `role=\"status\"` root of a `Spinner`. */\n  spinner: 'dial-kit-spinner',\n  /**\n   * The outermost element of a `ProgressBar`: the box wrapping its label,\n   * track and readout — or the track itself, which is the root when the bar\n   * has neither.\n   */\n  progressBar: 'dial-kit-progress-bar',\n  /** The root of a `Skeleton`, wrapping its avatar and text rows. */\n  skeleton: 'dial-kit-skeleton',\n  /**\n   * The `Notification` surface. Present on every wrapper too — the toast and\n   * section-message variants of error, info, success, warning, loading and\n   * general all render this component.\n   */\n  notification: 'dial-kit-notification',\n  /** The empty-state root of `NoDataContent`. */\n  noDataContent: 'dial-kit-no-data-content',\n  /** The `section` root of a `StateScreen`. */\n  stateScreen: 'dial-kit-state-screen',\n  /** The `role=\"status\"` panel of a `TransferQueue`: header, rows and aggregate bar. */\n  transferQueue: 'dial-kit-transfer-queue',\n\n  /* ── Text ──────────────────────────────────────────────────────────────── */\n  /** The text element of a `Highlight`, which renders the matched query. */\n  highlight: 'dial-kit-highlight',\n  /** The caption line under a field, rendered by `CaptionText`. */\n  captionText: 'dial-kit-caption-text',\n  /**\n   * A caption in its error variant — what `ErrorText` renders. Additive to\n   * `captionText`, since one component draws both.\n   */\n  errorText: 'dial-kit-error-text',\n  /** The `Label` root, which wraps the `label` element and its info button. */\n  label: 'dial-kit-label',\n\n  /* ── Containers ────────────────────────────────────────────────────────── */\n  /** The `article` element of a `CardShell`. */\n  cardShell: 'dial-kit-card-shell',\n  /** The `aside` element of a `CollapsibleSidebar`. */\n  collapsibleSidebar: 'dial-kit-collapsible-sidebar',\n  /** The content box inside a `ResizableContainer`'s resize frame. */\n  resizableContainer: 'dial-kit-resizable-container',\n  /** The `role=\"separator\"` element of a `ResizeHandle`. */\n  resizeHandle: 'dial-kit-resize-handle',\n  /**\n   * The `role=\"dialog\"` panel of a `Popup`. Its backdrop is reached through\n   * `overlayClassName`.\n   */\n  popup: 'dial-kit-popup',\n  /** The `role=\"dialog\"` panel of a `BottomSheet`. */\n  bottomSheet: 'dial-kit-bottom-sheet',\n  /**\n   * The backdrop of a `BottomSheet`: the portalled, scroll-locking layer on\n   * `z-popup` that holds the panel.\n   */\n  bottomSheetOverlay: 'dial-kit-bottom-sheet-overlay',\n  /** The `role=\"dialog\"` panel of a `SideDrawer`, open or closed. */\n  sideDrawer: 'dial-kit-side-drawer',\n  /** The `Popup` panel of a `ConfirmationPopup`, additive to `popup`. */\n  confirmationPopup: 'dial-kit-confirmation-popup',\n  /** The root of an `Accordion`. */\n  accordion: 'dial-kit-accordion',\n  /** The breadcrumb root of a `FolderPath`. */\n  folderPath: 'dial-kit-folder-path',\n  /** The `nav` element of a `Breadcrumbs` trail. */\n  breadcrumbs: 'dial-kit-breadcrumbs',\n  /**\n   * One segment of a `Breadcrumbs` trail: the link, button or plain span that\n   * draws the label — not the `li`, which also holds the separator after it.\n   */\n  breadcrumbsItem: 'dial-kit-breadcrumbs-item',\n\n  /* ── Menus and overlays ────────────────────────────────────────────────── */\n  /**\n   * The trigger wrapper of a `Dropdown`. Its floating panel is reached through\n   * `listClassName`.\n   */\n  dropdown: 'dial-kit-dropdown',\n  /**\n   * The `role=\"none\"` item list inside a dropdown overlay — the box that holds\n   * the rows and owns their vertical padding. Present in both generations, and\n   * on a submenu's own list. It is *not* the floating panel.\n   */\n  dropdownList: 'dial-kit-dropdown-list',\n  /** The search row above the item list of a `searchable` `Dropdown`. */\n  dropdownSearch: 'dial-kit-dropdown-search',\n  /**\n   * One row of a floating overlay: a dropdown item, a `Select` option, a\n   * submenu trigger, or a submenu child. It sits on the element that draws the\n   * row box — so on the wrapper, not the inner button, for a row that has a\n   * `rightControl` beside it.\n   */\n  menuItem: 'dial-kit-menuitem',\n  /**\n   * The trailing check of a chosen `MenuItemMark.Check` row. Decorative, like\n   * the glyph itself — the row's `aria-checked` / `aria-selected` carries the\n   * state.\n   */\n  menuItemCheck: 'dial-kit-menuitem-check',\n  /** The primary icon of a `DialDropdownIcon` trigger. */\n  dropdownIcon: 'dial-kit-dropdown-icon',\n  /**\n   * The caret badge of a `DialDropdownIcon` trigger — the round plate the\n   * chevron sits on. Absent when `showCaret` is `false`.\n   */\n  dropdownIconCaret: 'dial-kit-dropdown-icon-caret',\n  /** The bubble of a `Tooltip`, rendered by `TooltipContent` into a portal. */\n  tooltip: 'dial-kit-tooltip',\n  /** The panel of an `InteractiveTooltip` — the one whose content takes focus. */\n  interactiveTooltip: 'dial-kit-interactive-tooltip',\n  /** The text element of an `EllipsisTooltip`, which is also its trigger. */\n  ellipsisTooltip: 'dial-kit-ellipsis-tooltip',\n\n  /* ── Fields ────────────────────────────────────────────────────────────── */\n  /** The `Search` field, additive to the `dial-kit-input` its `Input` carries. */\n  search: 'dial-kit-search',\n  /** The `PasswordInput` field, additive to `dial-kit-input`. */\n  passwordInput: 'dial-kit-password-input',\n  /** The `NumberInput` field, additive to `dial-kit-input`. */\n  numberInput: 'dial-kit-number-input',\n  /** The `TagInput` field, additive to `dial-kit-input`. */\n  tagInput: 'dial-kit-tag-input',\n  /** The `AutocompleteTagInput` field, additive to `dial-kit-input`. */\n  autocompleteTagInput: 'dial-kit-autocomplete-tag-input',\n  /** The root of a `Select`, wrapping its label, field and caption. */\n  select: 'dial-kit-select',\n  /** The trigger button of an `InlineSelect`. */\n  inlineSelect: 'dial-kit-inline-select',\n  /** The root of a `Calendar`, wrapping its label and date field. */\n  calendar: 'dial-kit-calendar',\n  /** The root of a `SchemaRenderer`, wrapping its top-level sections or fields. */\n  schemaRenderer: 'dial-kit-schema-renderer',\n  /**\n   * The card of one collapsible `SchemaRenderer` section, at any depth: a\n   * top-level property, a nested object or array, an array item, or a\n   * key-value entry holding an object.\n   */\n  schemaRendererSection: 'dial-kit-schema-renderer-section',\n  /** The drop area of a `FileDropzone`. */\n  fileDropzone: 'dial-kit-file-dropzone',\n  /**\n   * The root of a `FileIcon`, wrapping the file or folder glyph (or\n   * its spinner while loading) and the shared badge.\n   */\n  fileIcon: 'dial-kit-file-icon',\n  /** The row of a `FileName`: its type icon, the name and any details. */\n  fileName: 'dial-kit-file-name',\n  /** The `FileName` row of a `FolderName`, additive to `fileName`. */\n  folderName: 'dial-kit-folder-name',\n  /**\n   * The `role=\"img\"` badge of a `SharedEntityIndicator` — standalone, or the\n   * shared badge a `FileIcon` draws over its glyph.\n   */\n  sharedEntityIndicator: 'dial-kit-shared-entity-indicator',\n  /** The root of a `Badge`: the label box, with its icon when it has one. */\n  badge: 'dial-kit-badge',\n  /** The root of an `Avatar`: the image, or the initials box that replaces it. */\n  avatar: 'dial-kit-avatar',\n  /** The root row of an `EntityIdentity`: its icon, type label, name and version. */\n  entityIdentity: 'dial-kit-entity-identity',\n  /** The bordered card of a `SelectedEntityCard`, not the wrapper that also holds its error. */\n  selectedEntityCard: 'dial-kit-selected-entity-card',\n  /** The `section` root of a `FormSection`: its heading row, description and content. */\n  formSection: 'dial-kit-form-section',\n\n  /* ── Controls ──────────────────────────────────────────────────────────── */\n  /** The row of a `Switch`: the control and its label. */\n  switch: 'dial-kit-switch',\n  /** The row of a `Checkbox`: the box and its label. */\n  checkbox: 'dial-kit-checkbox',\n  /** The decorative box a `CheckboxBox` draws, in a checkbox or a menu row. */\n  checkboxBox: 'dial-kit-checkbox-box',\n  /** The row of a `Radio`: the circle and its label. */\n  radio: 'dial-kit-radio',\n  /** The root of a `RadioGroup`, wrapping its label and its radios. */\n  radioGroup: 'dial-kit-radio-group',\n  /**\n   * The root of a `RadioGroupPopupField`, wrapping its label and the collapsed\n   * field that opens the group.\n   */\n  radioGroupPopupField: 'dial-kit-radio-group-popup-field',\n  /** The `role=\"radiogroup\"` track of a `SegmentedControl`. */\n  segmentedControl: 'dial-kit-segmented-control',\n  /** One segment of a `SegmentedControl`. */\n  segmentedControlItem: 'dial-kit-segmented-control-item',\n  /**\n   * The outermost element of a `Tabs`: the box wrapping its heading and tab\n   * list — or the `role=\"tablist\"` itself, which is the root when the tabs\n   * carry no `sectionLabel`.\n   */\n  tabs: 'dial-kit-tabs',\n  /**\n   * The `role=\"tablist\"` holding the tabs, in either orientation. Additive to\n   * `tabs` when there is no heading above it, since one element is then both.\n   */\n  tabList: 'dial-kit-tab-list',\n  /**\n   * One tab inside `Tabs`, in either orientation. The selected tab of a\n   * horizontal row keeps its own `dial-kit-tab-selected-underline`.\n   */\n  tab: 'dial-kit-tab',\n  /**\n   * The selected tab, additive to `tab`. A horizontal row draws its selection\n   * with `dial-kit-tab-selected-underline`, which carries the gradient rule;\n   * this one carries no declarations and marks the selected tab in either\n   * orientation.\n   */\n  tabSelected: 'dial-kit-tab-selected',\n  /** The `sectionLabel` heading above a `Tabs`. Absent when there is none. */\n  tabsSectionLabel: 'dial-kit-tabs-section-label',\n  /**\n   * The `role=\"group\"` row of a `FilterChips`. Its chips are `Tag` pills, so\n   * they carry `dial-kit-tag` and have no entry of their own.\n   */\n  filterChips: 'dial-kit-filter-chips',\n  /** A `Tag` pill, wherever it is rendered — including a `TagInput`'s rows. */\n  tag: 'dial-kit-tag',\n  /**\n   * A `ToggleIconButton`, additive to the `dial-kit-base-icon-button` it\n   * already carries.\n   */\n  toggleIconButton: 'dial-kit-toggle-icon-button',\n  /** A `CloseButton`, additive to `dial-kit-base-icon-button`. */\n  closeButton: 'dial-kit-close-button',\n  /** An `InfoButton`, additive to `dial-kit-base-icon-button`. */\n  infoButton: 'dial-kit-info-button',\n  /**\n   * The wrapper of a `ButtonDropdown` — its trigger carries\n   * `dial-kit-base-button`.\n   */\n  buttonDropdown: 'dial-kit-button-dropdown',\n} as const"
+      "signature": "DIAL_KIT_CLASS = {\n  /* ── Feedback and status ───────────────────────────────────────────────── */\n  /** The `role=\"status\"` root of a `Spinner`. */\n  spinner: 'dial-kit-spinner',\n  /**\n   * The outermost element of a `ProgressBar`: the box wrapping its label,\n   * track and readout — or the track itself, which is the root when the bar\n   * has neither.\n   */\n  progressBar: 'dial-kit-progress-bar',\n  /** The root of a `Skeleton`, wrapping its avatar and text rows. */\n  skeleton: 'dial-kit-skeleton',\n  /**\n   * The `Notification` surface. Present on every wrapper too — the toast and\n   * section-message variants of error, info, success, warning, loading and\n   * general all render this component.\n   */\n  notification: 'dial-kit-notification',\n  /** The empty-state root of `NoDataContent`. */\n  noDataContent: 'dial-kit-no-data-content',\n  /** The `section` root of a `StateScreen`. */\n  stateScreen: 'dial-kit-state-screen',\n  /** The `role=\"status\"` panel of a `TransferQueue`: header, rows and aggregate bar. */\n  transferQueue: 'dial-kit-transfer-queue',\n\n  /* ── Text ──────────────────────────────────────────────────────────────── */\n  /** The text element of a `Highlight`, which renders the matched query. */\n  highlight: 'dial-kit-highlight',\n  /** The caption line under a field, rendered by `CaptionText`. */\n  captionText: 'dial-kit-caption-text',\n  /**\n   * A caption in its error variant — what `ErrorText` renders. Additive to\n   * `captionText`, since one component draws both.\n   */\n  errorText: 'dial-kit-error-text',\n  /** The `Label` root, which wraps the `label` element and its info button. */\n  label: 'dial-kit-label',\n\n  /* ── Containers ────────────────────────────────────────────────────────── */\n  /** The `article` element of a `CardShell`. */\n  cardShell: 'dial-kit-card-shell',\n  /** The `aside` element of a `CollapsibleSidebar`. */\n  collapsibleSidebar: 'dial-kit-collapsible-sidebar',\n  /** The content box inside a `ResizableContainer`'s resize frame. */\n  resizableContainer: 'dial-kit-resizable-container',\n  /** The `role=\"separator\"` element of a `ResizeHandle`. */\n  resizeHandle: 'dial-kit-resize-handle',\n  /**\n   * The `role=\"dialog\"` panel of a `Popup`. Its backdrop is reached through\n   * `overlayClassName`.\n   */\n  popup: 'dial-kit-popup',\n  /** The `role=\"dialog\"` panel of a `BottomSheet`. */\n  bottomSheet: 'dial-kit-bottom-sheet',\n  /**\n   * The backdrop of a `BottomSheet`: the portalled, scroll-locking layer on\n   * `z-popup` that holds the panel.\n   */\n  bottomSheetOverlay: 'dial-kit-bottom-sheet-overlay',\n  /** The `role=\"dialog\"` panel of a `SideDrawer`, open or closed. */\n  sideDrawer: 'dial-kit-side-drawer',\n  /** The `Popup` panel of a `ConfirmationPopup`, additive to `popup`. */\n  confirmationPopup: 'dial-kit-confirmation-popup',\n  /** The root of an `Accordion`. */\n  accordion: 'dial-kit-accordion',\n  /** The breadcrumb root of a `FolderPath`. */\n  folderPath: 'dial-kit-folder-path',\n  /** The `nav` element of a `Breadcrumbs` trail. */\n  breadcrumbs: 'dial-kit-breadcrumbs',\n  /**\n   * One segment of a `Breadcrumbs` trail: the link, button or plain span that\n   * draws the label — not the `li`, which also holds the separator after it.\n   */\n  breadcrumbsItem: 'dial-kit-breadcrumbs-item',\n\n  /* ── Menus and overlays ────────────────────────────────────────────────── */\n  /**\n   * The trigger wrapper of a `Dropdown`. Its floating panel is reached through\n   * `listClassName`.\n   */\n  dropdown: 'dial-kit-dropdown',\n  /**\n   * The `role=\"none\"` item list inside a dropdown overlay — the box that holds\n   * the rows and owns their vertical padding. Present in both generations, and\n   * on a submenu's own list. It is *not* the floating panel.\n   */\n  dropdownList: 'dial-kit-dropdown-list',\n  /** The search row above the item list of a `searchable` `Dropdown`. */\n  dropdownSearch: 'dial-kit-dropdown-search',\n  /**\n   * One row of a floating overlay: a dropdown item, a `Select` option, a\n   * submenu trigger, or a submenu child. It sits on the element that draws the\n   * row box — so on the wrapper, not the inner button, for a row that has a\n   * `rightControl` beside it.\n   */\n  menuItem: 'dial-kit-menuitem',\n  /**\n   * The trailing check of a chosen `MenuItemMark.Check` row. Decorative, like\n   * the glyph itself — the row's `aria-checked` / `aria-selected` carries the\n   * state.\n   */\n  menuItemCheck: 'dial-kit-menuitem-check',\n  /** The bubble of a `Tooltip`, rendered by `TooltipContent` into a portal. */\n  tooltip: 'dial-kit-tooltip',\n  /** The panel of an `InteractiveTooltip` — the one whose content takes focus. */\n  interactiveTooltip: 'dial-kit-interactive-tooltip',\n  /** The text element of an `EllipsisTooltip`, which is also its trigger. */\n  ellipsisTooltip: 'dial-kit-ellipsis-tooltip',\n\n  /* ── Fields ────────────────────────────────────────────────────────────── */\n  /** The `Search` field, additive to the `dial-kit-input` its `Input` carries. */\n  search: 'dial-kit-search',\n  /** The `PasswordInput` field, additive to `dial-kit-input`. */\n  passwordInput: 'dial-kit-password-input',\n  /** The `NumberInput` field, additive to `dial-kit-input`. */\n  numberInput: 'dial-kit-number-input',\n  /** The `TagInput` field, additive to `dial-kit-input`. */\n  tagInput: 'dial-kit-tag-input',\n  /** The `AutocompleteTagInput` field, additive to `dial-kit-input`. */\n  autocompleteTagInput: 'dial-kit-autocomplete-tag-input',\n  /** The root of a `Select`, wrapping its label, field and caption. */\n  select: 'dial-kit-select',\n  /** The trigger button of an `InlineSelect`. */\n  inlineSelect: 'dial-kit-inline-select',\n  /** The root of a `Calendar`, wrapping its label and date field. */\n  calendar: 'dial-kit-calendar',\n  /** The root of a `SchemaRenderer`, wrapping its top-level sections or fields. */\n  schemaRenderer: 'dial-kit-schema-renderer',\n  /**\n   * The card of one collapsible `SchemaRenderer` section, at any depth: a\n   * top-level property, a nested object or array, an array item, or a\n   * key-value entry holding an object.\n   */\n  schemaRendererSection: 'dial-kit-schema-renderer-section',\n  /** The drop area of a `FileDropzone`. */\n  fileDropzone: 'dial-kit-file-dropzone',\n  /**\n   * The root of a `FileIcon`, wrapping the file or folder glyph (or\n   * its spinner while loading) and the shared badge.\n   */\n  fileIcon: 'dial-kit-file-icon',\n  /** The row of a `FileName`: its type icon, the name and any details. */\n  fileName: 'dial-kit-file-name',\n  /** The `FileName` row of a `FolderName`, additive to `fileName`. */\n  folderName: 'dial-kit-folder-name',\n  /**\n   * The `role=\"img\"` badge of a `SharedEntityIndicator` — standalone, or the\n   * shared badge a `FileIcon` draws over its glyph.\n   */\n  sharedEntityIndicator: 'dial-kit-shared-entity-indicator',\n  /** The root of a `Badge`: the label box, with its icon when it has one. */\n  badge: 'dial-kit-badge',\n  /** The root of an `Avatar`: the image, or the initials box that replaces it. */\n  avatar: 'dial-kit-avatar',\n  /** The root row of an `EntityIdentity`: its icon, type label, name and version. */\n  entityIdentity: 'dial-kit-entity-identity',\n  /** The bordered card of a `SelectedEntityCard`, not the wrapper that also holds its error. */\n  selectedEntityCard: 'dial-kit-selected-entity-card',\n  /** The `section` root of a `FormSection`: its heading row, description and content. */\n  formSection: 'dial-kit-form-section',\n\n  /* ── Controls ──────────────────────────────────────────────────────────── */\n  /** The row of a `Switch`: the control and its label. */\n  switch: 'dial-kit-switch',\n  /** The row of a `Checkbox`: the box and its label. */\n  checkbox: 'dial-kit-checkbox',\n  /** The decorative box a `CheckboxBox` draws, in a checkbox or a menu row. */\n  checkboxBox: 'dial-kit-checkbox-box',\n  /** The row of a `Radio`: the circle and its label. */\n  radio: 'dial-kit-radio',\n  /** The root of a `RadioGroup`, wrapping its label and its radios. */\n  radioGroup: 'dial-kit-radio-group',\n  /**\n   * The root of a `RadioGroupPopupField`, wrapping its label and the collapsed\n   * field that opens the group.\n   */\n  radioGroupPopupField: 'dial-kit-radio-group-popup-field',\n  /** The `role=\"radiogroup\"` track of a `SegmentedControl`. */\n  segmentedControl: 'dial-kit-segmented-control',\n  /** One segment of a `SegmentedControl`. */\n  segmentedControlItem: 'dial-kit-segmented-control-item',\n  /**\n   * The outermost element of a `Tabs`: the box wrapping its heading and tab\n   * list — or the `role=\"tablist\"` itself, which is the root when the tabs\n   * carry no `sectionLabel`.\n   */\n  tabs: 'dial-kit-tabs',\n  /**\n   * The `role=\"tablist\"` holding the tabs, in either orientation. Additive to\n   * `tabs` when there is no heading above it, since one element is then both.\n   */\n  tabList: 'dial-kit-tab-list',\n  /**\n   * One tab inside `Tabs`, in either orientation. The selected tab of a\n   * horizontal row keeps its own `dial-kit-tab-selected-underline`.\n   */\n  tab: 'dial-kit-tab',\n  /**\n   * The selected tab, additive to `tab`. A horizontal row draws its selection\n   * with `dial-kit-tab-selected-underline`, which carries the gradient rule;\n   * this one carries no declarations and marks the selected tab in either\n   * orientation.\n   */\n  tabSelected: 'dial-kit-tab-selected',\n  /** The `sectionLabel` heading above a `Tabs`. Absent when there is none. */\n  tabsSectionLabel: 'dial-kit-tabs-section-label',\n  /**\n   * The `role=\"group\"` row of a `FilterChips`. Its chips are `Tag` pills, so\n   * they carry `dial-kit-tag` and have no entry of their own.\n   */\n  filterChips: 'dial-kit-filter-chips',\n  /** A `Tag` pill, wherever it is rendered — including a `TagInput`'s rows. */\n  tag: 'dial-kit-tag',\n  /**\n   * A `ToggleIconButton`, additive to the `dial-kit-base-icon-button` it\n   * already carries.\n   */\n  toggleIconButton: 'dial-kit-toggle-icon-button',\n  /** A `CloseButton`, additive to `dial-kit-base-icon-button`. */\n  closeButton: 'dial-kit-close-button',\n  /** An `InfoButton`, additive to `dial-kit-base-icon-button`. */\n  infoButton: 'dial-kit-info-button',\n  /**\n   * The wrapper of a `ButtonDropdown` — its trigger carries\n   * `dial-kit-base-button`.\n   */\n  buttonDropdown: 'dial-kit-button-dropdown',\n} as const"
     }
   ]
 }