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

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.13.0",
-  "generatedAt": "2026-08-19T07:43:00.834Z",
+  "version": "0.14.0-dev.11",
+  "generatedAt": "2026-08-27T13:05:00.350Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -21,7 +21,7 @@
     "setupNotes": "## Next.js Integration\n1. Install the package and peer dependencies that are not currently in your project\n``` bash\nnpm install @epam/ai-dial-ui-kit\nnpm install react react-dom  @tabler/icons-react classnames\nnpm install @floating-ui/react monaco-editor @monaco-editor/react\n```\n\n2. Import style in the root layout of the project:\n\n```tsx\n// app/layout.tsx\nimport \"@epam/ai-dial-ui-kit/styles.css\";\n```\n\n3. Usage example\n\n```tsx\n// app/page.tsx\n\"use client\";\nimport { DialPrimaryButton } from \"@epam/ai-dial-ui-kit\";\n\nexport default function Home() {\n  return (\n    <div className=\"w-full h-full flex flex-col gap-3 items-center justify-center\">\n      <h1>Test library</h1>\n      <DialPrimaryButton onClick={() => alert('Hello AI DIAL!')} />\n    </div>\n  );\n}\n```\nSee \"🎨 Theming & Customization\" section in README."
   },
   "styles": "# Typography CSS Utility Classes\n\n## Design-system-compliant classes (`dial-*-text`)\n\nUse these by default. They follow the design system type scale.\n\n| Class                             | Design name                 | Weight   | Size / Line-height                  |\n| --------------------------------- | --------------------------- | -------- | ----------------------------------- |\n| `.dial-display1-text`             | Display 1                   | semibold | 32px / 48px                         |\n| `.dial-display2-text`             | Display 2                   | semibold | 28px / 40px                         |\n| `.dial-display3-text`             | Display 3                   | semibold | 22px / 32px                         |\n| `.dial-h1-text`                   | Heading 1                   | semibold | 20px / 28px                         |\n| `.dial-h2-text`                   | Heading 2                   | semibold | 18px / 26px                         |\n| `.dial-h3-text`                   | Heading 3                   | semibold | 16px / 24px                         |\n| `.dial-body-text`                 | Body Text                   | normal   | 16px / 24px                         |\n| `.dial-body-semi-text`            | Body Text (Semi Bold)       | semibold | 16px / 24px                         |\n| `.dial-body-paragraph-text`       | Body Paragraph              | normal   | 16px / 26px                         |\n| `.dial-body-paragraph-semi-text`  | Body Paragraph (Semi Bold)  | semibold | 16px / 26px                         |\n| `.dial-small-text`                | Small Text                  | normal   | 14px / 20px                         |\n| `.dial-small-semi-text`           | Small Text (Semi Bold)      | semibold | 14px / 20px                         |\n| `.dial-small-paragraph-text`      | Small Paragraph             | normal   | 14px / 24px                         |\n| `.dial-small-paragraph-semi-text` | Small Paragraph (Semi Bold) | semibold | 14px / 24px                         |\n| `.dial-tiny-text`                 | Tiny Text                   | normal   | 12px / 16px                         |\n| `.dial-tiny-lead-text`            | Tiny Text Lead              | normal   | 12px / 16px (+0.03em, uppercase)    |\n| `.dial-tiny-semi-text`            | Tiny Text (Semi Bold)       | semibold | 12px / 16px                         |\n| `.dial-tiny-lead-semi-text`       | Tiny Text Lead (Semi Bold)  | semibold | 12px / 16px (+0.03em, uppercase)    |\n| `.dial-caption-text`              | Caption                     | normal   | 10px / 12px                         |\n| `.dial-caption-lead-semi-text`    | Caption Lead (Semi Bold)    | semibold | 10px / 12px (+0.06em, uppercase)    |\n| `.dial-code-text`                 | Code                        | normal   | 14px / 20px (Fira Code / monospace) |\n\nThe three `*-lead-*` classes apply `text-transform: uppercase` themselves — pass them the sentence-case string, not a pre-uppercased one, so the accessible name stays readable.\n\n`.dial-code-text` resolves its family through `var(--theme-font-mono, var(--font-fira-code, 'Fira Code'))` before falling back to the system monospace stack. The kit ships no font file; the host provides the face.\n\n## Legacy classes (avoid in new code)\n\nClasses like `dial-h1`, `dial-h2`, `dial-body`, `dial-small*`, `dial-tiny*`, `dial-caption` are legacy. They can be used in legacy projects if user explicidly specify they need legacy typography.\n\n## Raw SCSS source\n",
-  "theming": "# Theming & CSS Variable Tokens\n\nAI DIAL UI Kit uses CSS custom properties (variables) for theming.\nDark and light themes are switched by setting different values for these variables on `:root` or a theme wrapper element.\n\n## Usage in Tailwind\n\nThe Tailwind config maps CSS variables to utility classes.\nUse these classes in your components:\n\n```tsx\n// Backgrounds\n<div className=\"bg-layer-0\" />   // darkest background\n<div className=\"bg-layer-1\" />   // main content area\n<div className=\"bg-layer-2\" />   // elevated panels\n\n// Text\n<span className=\"text-primary\" />    // main text color\n<span className=\"text-secondary\" />  // muted text\n<span className=\"text-error\" />      // error state\n\n// Borders\n<div className=\"border border-primary\" />  // standard border\n<div className=\"border border-error\" />    // error border\n```\n\n## Override CSS Variables\n\n```css\n:root {\n  --bg-layer-0: #000000;\n  --bg-layer-1: #0c101d;\n  --bg-layer-2: #161b2d;\n  --bg-layer-3: #1d2439;\n  --text-primary: #eef1f7;\n  --text-secondary: #9fa6bd;\n  --text-error: #f76464;\n  --stroke-primary: #696e7c;\n  --controls-bg-accent-primary: #3664e2;\n  /* ... see tailwind.config.js for full list */\n}\n```\n\n## Token Reference\n\n\n### backgroundsColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-sunken` | `var(--bg-layer-sunken)` | `#EEF1F7` |\n| `layer-base` | `var(--bg-layer-base)` | `#F5F7FA` |\n| `layer-raised` | `var(--bg-layer-raised)` | `#FCFCFC` |\n\n### controlsBgColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `control-accent-alpha` | `var(--bg-control-accent-alpha)` | `#2764D90F` |\n| `control-accent-alpha-hover` | `var(--bg-control-accent-alpha-hover)` | `#2764D924` |\n| `control-accent-alpha-active` | `var(--bg-control-accent-alpha-active)` | `#2764D933` |\n| `control-accent` | `var(--bg-control-accent)` | `#124ACE` |\n| `control-neutral` | `var(--bg-control-neutral)` | `#FCFCFC` |\n| `control-neutral-hover` | `var(--bg-control-neutral-hover)` | `#E0E6F0` |\n| `control-neutral-active` | `var(--bg-control-neutral-active)` | `#D1DBEA` |\n| `control-error` | `var(--bg-control-error)` | `#AE2F2F` |\n| `control-error-hover` | `var(--bg-control-error-hover)` | `#BF3939` |\n| `control-error-active` | `var(--bg-control-error-active)` | `#CC4545` |\n| `control-error-alpha-hover` | `var(--bg-control-error-alpha-hover)` | `#F764641A` |\n| `control-error-alpha-active` | `var(--bg-control-error-alpha-active)` | `#F7646433` |\n| `control-disable` | `var(--bg-control-disable)` | `#DCE0E8` |\n\n### borderColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `hover-alpha` | `var(--stroke-hover-alpha)` | `#2764D933` |\n| `focus-blue` | `var(--stroke-focus-blue)` | `#6785FB` |\n| `accent-alpha` | `var(--stroke-accent-alpha)` | `#2764D933` |\n| `error-alpha` | `var(--stroke-error-alpha)` | `#AE2F2F73` |\n| `control-disable-alpha` | `var(--text-control-disable-alpha)` | `#848E9C` |\n\n### visualBgColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `green-1` | `var(--bg-visual-green-1)` | `#CDE8E5` |\n| `green-2` | `var(--bg-visual-green-2)` | `#D1F0DC` |\n| `violet-1` | `var(--bg-visual-violet-1)` | `#DDE3F9` |\n| `violet-2` | `var(--bg-visual-violet-2)` | `#F1E9FF` |\n\n### visualTextColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `green-1` | `var(--text-visual-green-1)` | `#059669` |\n| `green-2` | `var(--text-visual-green-2)` | `#0D6E72` |\n| `green-3` | `var(--text-visual-green-3)` | `#065F46` |\n| `brown-1` | `var(--text-visual-brown-1)` | `#D36817` |\n| `brown-2` | `var(--text-visual-brown-2)` | `#B45309` |\n| `violet-1` | `var(--text-visual-violet-1)` | `#7C3AED` |\n| `violet-2` | `var(--text-visual-violet-2)` | `#3730B7` |\n\n### textColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `warning-icon` | `var(--text-warning-icon)` | `#EEC840` |\n\n### controlsTextColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `control-permanent` | `var(--text-control-permanent)` | `#FCFCFC` |\n| `control-disable-alpha` | `var(--text-control-disable-alpha)` | `#848E9C` |\n| `control-disable-beta` | `var(--text-control-disable-beta)` | `#DCE0E8` |\n| `control-blue-hover` | `var(--text-control-blue-hover)` | `#5976E9` |\n| `control-blue-active` | `var(--text-control-blue-active)` | `#6785FB` |\n\n### backgroundsColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-0` | `var(--bg-layer-0)` | `#FCFCFC` |\n| `layer-1` | `var(--bg-layer-1)` | `#E0E6F0` |\n| `layer-2` | `var(--bg-layer-2)` | `#EEF1F7` |\n| `layer-3` | `var(--bg-layer-3)` | `#FCFCFC` |\n| `layer-4` | `var(--bg-layer-4)` | `#D1DBEA` |\n| `accent-primary-alpha` | `var(--bg-accent-primary-alpha)` | `#7DA4FF26` |\n| `accent-secondary-alpha` | `var(--bg-accent-secondary-alpha)` | `#37BABC2E` |\n| `accent-tertiary-alpha` | `var(--bg-accent-tertiary-alpha)` | `#A972FF2E` |\n| `accent-primary` | `var(--bg-accent-primary)` | `#5C8DEA` |\n| `accent-secondary` | `var(--bg-accent-secondary)` | `#37BABC` |\n| `red-400` | `var(--bg-red-400)` | `#F76464` |\n| `controls-accent-primary` | `var(--controls-bg-accent-primary)` | `#124ACE` |\n| `controls-accent-primary-hover` | `var(--controls-bg-accent-primary-hover)` | `#2656D9` |\n| `controls-accent-primary-active` | `var(--controls-bg-accent-primary-active)` | `#3664E2` |\n| `controls-accent-primary-alpha-active` | `var(--controls-bg-accent-primary-alpha-active)` | `#7DA4FF5C` |\n| `controls-accent-secondary-alpha-active` | `var(--controls-bg-accent-secondary-alpha-active)` | `#37BABC5C` |\n| `controls-accent-tertiary-alpha-active` | `var(--controls-bg-accent-tertiary-alpha-active)` | `#A972FF5C` |\n| `controls-error` | `var(--controls-bg-error)` | `#AE2F2F` |\n| `controls-error-hover` | `var(--controls-bg-error-hover)` | `#BF3939` |\n| `controls-error-active` | `var(--controls-bg-error-active)` | `#CC4545` |\n| `controls-error-alpha-active` | `var(--controls-bg-error-alpha-active)` | `#F764645C` |\n| `controls-disable-accent` | `var(--controls-bg-disable-accent)` | `#7C8293` |\n| `controls-disable` | `var(--controls-bg-disable)` | `#D1DBEA` |\n| `controls-neutral-hover` | `var(--controls-bg-neutral-hover)` | `#D1DBEA` |\n| `controls-neutral-active` | `var(--controls-bg-neutral-active)` | `#9FA6BD` |\n| `controls-accent-success-alpha-hover` | `var(--controls-bg-accent-success-alpha-hover)` | `#37BABC2E` |\n| `controls-accent-success-alpha-active` | `var(--controls-bg-accent-success-alpha-active)` | `#37BABC5C` |\n| `controls-enable-primary` | `var(--controls-enable-primary)` | `#FCFCFC` |\n\n### borderColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--stroke-accent-primary)` | `#124ACE` |\n| `accent-secondary` | `var(--stroke-accent-secondary)` | `#007274` |\n| `controls-accent` | `var(--controls-bg-accent)` | `#5C8DEA` |\n| `red-900` | `var(--red-900)` | `#402027` |\n\n### textColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--text-accent-primary)` | `#7DA4FF` |\n| `accent-secondary` | `var(--text-accent-secondary)` | `#37BABC` |\n| `accent-tertiary` | `var(--text-accent-tertiary)` | `#A972FF` |\n| `controls-permanent` | `var(--controls-text-permanent)` | `#FCFCFC` |\n| `controls-accent-disable` | `var(--controls-text-accent-disable)` | `#D1DBEA` |\n| `controls-primary-disable` | `var(--controls-text-primary-disable)` | `#696E7C` |\n| `controls-secondary-disable` | `var(--controls-text-secondary-disable)` | `#9FA6BD` |\n| `controls-neutral` | `var(--controls-text-neutral)` | `#161B2D` |\n| `controls-accent-primary-hover` | `var(--controls-text-accent-primary-hover)` | `#3664E2` |\n| `controls-accent-primary-active` | `var(--controls-text-accent-primary-active)` | `#7DA4FF` |",
+  "theming": "# Theming & CSS Variable Tokens\n\nAI DIAL UI Kit uses CSS custom properties (variables) for theming.\nDark and light themes are switched by setting different values for these variables on `:root` or a theme wrapper element.\n\n## Usage in Tailwind\n\nThe Tailwind config maps CSS variables to utility classes.\nUse these classes in your components:\n\n```tsx\n// Backgrounds\n<div className=\"bg-layer-0\" />   // darkest background\n<div className=\"bg-layer-1\" />   // main content area\n<div className=\"bg-layer-2\" />   // elevated panels\n\n// Text\n<span className=\"text-primary\" />    // main text color\n<span className=\"text-secondary\" />  // muted text\n<span className=\"text-error\" />      // error state\n\n// Borders\n<div className=\"border border-primary\" />  // standard border\n<div className=\"border border-error\" />    // error border\n```\n\n## Override CSS Variables\n\n```css\n:root {\n  --bg-layer-0: #000000;\n  --bg-layer-1: #0c101d;\n  --bg-layer-2: #161b2d;\n  --bg-layer-3: #1d2439;\n  --text-primary: #eef1f7;\n  --text-secondary: #9fa6bd;\n  --text-error: #f76464;\n  --stroke-primary: #696e7c;\n  --controls-bg-accent-primary: #3664e2;\n  /* ... see tailwind.config.js for full list */\n}\n```\n\n## Token Reference\n\n\n### backgroundsColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-sunken` | `var(--bg-layer-sunken)` | `#EEF1F7` |\n| `layer-base` | `var(--bg-layer-base)` | `#F5F7FA` |\n| `layer-raised` | `var(--bg-layer-raised)` | `#FCFCFC` |\n| `gradient-1` | `var(--bg-gradient-1)` | `#1D4ED8` |\n| `gradient-1-hover` | `var(--bg-gradient-1-hover)` | `#6785FB` |\n| `gradient-1-active` | `var(--bg-gradient-1-active)` | `#1D4ED8` |\n| `gradient-2` | `var(--bg-gradient-2)` | `#885DF2` |\n| `gradient-2-hover` | `var(--bg-gradient-2-hover)` | `#885DF2` |\n| `gradient-2-active` | `var(--bg-gradient-2-active)` | `#7C3AED` |\n| `control-accent-alpha` | `var(--bg-control-accent-alpha)` | `#2764D90F` |\n| `control-accent-alpha-hover` | `var(--bg-control-accent-alpha-hover)` | `#2764D924` |\n| `control-accent-alpha-active` | `var(--bg-control-accent-alpha-active)` | `#2764D933` |\n| `control-accent` | `var(--bg-control-accent)` | `#1D4ED8` |\n| `control-accent-hover` | `var(--bg-control-accent-hover)` | `#5976E9` |\n| `control-neutral` | `var(--bg-control-neutral)` | `#FCFCFC` |\n| `control-neutral-hover-strong` | `var(--bg-control-neutral-hover-strong)` | `#848E9C` |\n| `control-neutral-active` | `var(--bg-control-neutral-active)` | `#D1DBEA` |\n| `control-neutral-default` | `var(--bg-control-neutral-default)` | `#ACB3C3` |\n| `control-inverted` | `var(--bg-control-inverted)` | `#57647A` |\n| `control-error` | `var(--bg-control-error)` | `#AE2F2F` |\n| `control-error-hover` | `var(--bg-control-error-hover)` | `#BF3939` |\n| `control-error-active` | `var(--bg-control-error-active)` | `#CC4545` |\n| `control-error-alpha-hover` | `var(--bg-control-error-alpha-hover)` | `#F764641A` |\n| `control-error-alpha-active` | `var(--bg-control-error-alpha-active)` | `#F7646433` |\n| `control-disable-primary` | `var(--bg-control-disable-primary)` | `#DCE0E8` |\n| `control-disable-secondary` | `var(--bg-control-disable-secondary)` | `#ACB3C3` |\n| `green-1` | `var(--bg-visual-green-1)` | `#CDE8E5` |\n| `green-2` | `var(--bg-visual-green-2)` | `#D1F0DC` |\n| `violet-1` | `var(--bg-visual-violet-1)` | `#DDE3F9` |\n| `violet-2` | `var(--bg-visual-violet-2)` | `#F1E9FF` |\n\n### shadowColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `xs-sm-1` | `var(--shadow-xs-sm-1)` | `#2764D933` |\n| `xs-sm-2` | `var(--shadow-xs-sm-2)` | `#161B2D08` |\n\n### borderColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-alpha` | `var(--stroke-accent-alpha)` | `#2764D933` |\n| `gradient-1` | `var(--stroke-gradient-1)` | `#5976E9` |\n| `gradient-2` | `var(--stroke-gradient-2)` | `#885DF2` |\n| `accent-focus` | `var(--stroke-accent-focus)` | `#6785FB` |\n| `error-alpha` | `var(--stroke-error-alpha)` | `#AE2F2F73` |\n| `control-disable-primary` | `var(--stroke-control-disable-primary)` | `#848E9C` |\n\n### textColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `warning-icon` | `var(--text-warning-icon)` | `#EEC840` |\n| `green-1` | `var(--text-visual-green-1)` | `#059669` |\n| `green-2` | `var(--text-visual-green-2)` | `#0D6E72` |\n| `green-3` | `var(--text-visual-green-3)` | `#065F46` |\n| `brown-1` | `var(--text-visual-brown-1)` | `#D36817` |\n| `brown-2` | `var(--text-visual-brown-2)` | `#B45309` |\n| `violet-1` | `var(--text-visual-violet-1)` | `#7C3AED` |\n| `violet-2` | `var(--text-visual-violet-2)` | `#3730B7` |\n| `control-permanent` | `var(--text-control-permanent)` | `#FCFCFC` |\n| `control-inverted` | `var(--text-control-inverted)` | `#FCFCFC` |\n| `control-disable-primary` | `var(--text-control-disable-primary)` | `#848E9C` |\n| `control-disable-secondary` | `var(--text-control-disable-secondary)` | `#DCE0E8` |\n| `control-accent-hover` | `var(--text-control-accent-hover)` | `#5976E9` |\n| `control-accent-active` | `var(--text-control-accent-active)` | `#6785FB` |\n\n### backgroundsColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-0` | `var(--bg-layer-0)` | `#FCFCFC` |\n| `layer-1` | `var(--bg-layer-1)` | `#E0E6F0` |\n| `layer-2` | `var(--bg-layer-2)` | `#EEF1F7` |\n| `layer-3` | `var(--bg-layer-3)` | `#FCFCFC` |\n| `layer-4` | `var(--bg-layer-4)` | `#D1DBEA` |\n| `accent-primary-alpha` | `var(--bg-accent-primary-alpha)` | `#7DA4FF26` |\n| `accent-secondary-alpha` | `var(--bg-accent-secondary-alpha)` | `#37BABC2E` |\n| `accent-tertiary-alpha` | `var(--bg-accent-tertiary-alpha)` | `#A972FF2E` |\n| `accent-primary` | `var(--bg-accent-primary)` | `#5C8DEA` |\n| `accent-secondary` | `var(--bg-accent-secondary)` | `#37BABC` |\n| `red-400` | `var(--bg-red-400)` | `#F76464` |\n| `controls-accent-primary` | `var(--controls-bg-accent-primary)` | `#124ACE` |\n| `controls-accent-primary-hover` | `var(--controls-bg-accent-primary-hover)` | `#2656D9` |\n| `controls-accent-primary-active` | `var(--controls-bg-accent-primary-active)` | `#3664E2` |\n| `controls-accent-primary-alpha-active` | `var(--controls-bg-accent-primary-alpha-active)` | `#7DA4FF5C` |\n| `controls-accent-secondary-alpha-active` | `var(--controls-bg-accent-secondary-alpha-active)` | `#37BABC5C` |\n| `controls-accent-tertiary-alpha-active` | `var(--controls-bg-accent-tertiary-alpha-active)` | `#A972FF5C` |\n| `controls-error` | `var(--controls-bg-error)` | `#AE2F2F` |\n| `controls-error-hover` | `var(--controls-bg-error-hover)` | `#BF3939` |\n| `controls-error-active` | `var(--controls-bg-error-active)` | `#CC4545` |\n| `controls-error-alpha-active` | `var(--controls-bg-error-alpha-active)` | `#F764645C` |\n| `controls-disable-accent` | `var(--controls-bg-disable-accent)` | `#7C8293` |\n| `controls-disable` | `var(--controls-bg-disable)` | `#D1DBEA` |\n| `controls-neutral-hover` | `var(--controls-bg-neutral-hover)` | `#D1DBEA` |\n| `controls-neutral-active` | `var(--controls-bg-neutral-active)` | `#9FA6BD` |\n| `controls-accent-success-alpha-hover` | `var(--controls-bg-accent-success-alpha-hover)` | `#37BABC2E` |\n| `controls-accent-success-alpha-active` | `var(--controls-bg-accent-success-alpha-active)` | `#37BABC5C` |\n| `controls-enable-primary` | `var(--controls-enable-primary)` | `#FCFCFC` |\n\n### borderColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--stroke-accent-primary)` | `#124ACE` |\n| `accent-secondary` | `var(--stroke-accent-secondary)` | `#007274` |\n| `controls-accent` | `var(--controls-bg-accent)` | `#5C8DEA` |\n| `red-900` | `var(--red-900)` | `#402027` |\n\n### textColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--text-accent-primary)` | `#7DA4FF` |\n| `accent-secondary` | `var(--text-accent-secondary)` | `#37BABC` |\n| `accent-tertiary` | `var(--text-accent-tertiary)` | `#A972FF` |\n| `controls-permanent` | `var(--controls-text-permanent)` | `#FCFCFC` |\n| `controls-accent-disable` | `var(--controls-text-accent-disable)` | `#D1DBEA` |\n| `controls-primary-disable` | `var(--controls-text-primary-disable)` | `#696E7C` |\n| `controls-secondary-disable` | `var(--controls-text-secondary-disable)` | `#9FA6BD` |\n| `controls-neutral` | `var(--controls-text-neutral)` | `#161B2D` |\n| `controls-accent-primary-hover` | `var(--controls-text-accent-primary-hover)` | `#3664E2` |\n| `controls-accent-primary-active` | `var(--controls-text-accent-primary-active)` | `#7DA4FF` |",
   "components": [
     {
       "name": "Spinner",
@@ -251,7 +251,7 @@
         }
       ],
       "examples": [
-        "<Notification\n  variant={NotificationVariant.Info}\n  message=\"This is an info alert.\"\n/>\n\n<Notification\n  variant={NotificationVariant.Success}\n  title=\"Saved\"\n  message=\"Changes saved successfully.\"\n/>\n\n<Notification\n  variant={NotificationVariant.Error}\n  closable\n  message=\"Something went wrong.\"\n  onClose={(e) => console.log('closed', e)}\n/>\n\n<Notification\n  variant={NotificationVariant.Loading}\n  title=\"Processing\"\n  message=\"Please wait...\"\n/>"
+        "<Notification\n  variant={NotificationVariant.Info}\n  message=\"This is an info alert.\"\n/>\n\n<Notification\n  variant={NotificationVariant.Success}\n  title=\"Saved\"\n  message=\"Changes saved successfully.\"\n/>\n\n<Notification\n  variant={NotificationVariant.Error}\n  closable\n  message=\"Something went wrong.\"\n  onClose={(e) => console.log('closed', e)}\n/>\n\n<Notification\n  variant={NotificationVariant.Loading}\n  title=\"Processing\"\n  message=\"Please wait...\"\n/>\n\n<Notification\n  variant={NotificationVariant.General}\n  type={NotificationType.SectionMessage}\n  title=\"Title\"\n  message=\"Description text example\"\n/>"
       ],
       "sourceFile": "components/New/Notification/Notification.tsx"
     },
@@ -318,6 +318,24 @@
       "examples": [],
       "sourceFile": "components/New/Notification/NotificationWrapper.tsx"
     },
+    {
+      "name": "GeneralMessageNotification",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "",
+      "props": [],
+      "examples": [],
+      "sourceFile": "components/New/Notification/NotificationWrapper.tsx"
+    },
+    {
+      "name": "GeneralToastNotification",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "",
+      "props": [],
+      "examples": [],
+      "sourceFile": "components/New/Notification/NotificationWrapper.tsx"
+    },
     {
       "name": "InfoMessageNotification",
       "category": "Components_2_0",
@@ -703,8 +721,9 @@
         },
         {
           "name": "tooltipProps",
-          "type": "TooltipProps",
-          "required": false
+          "type": "ButtonTooltipProps",
+          "required": false,
+          "description": "Props of the 2.0  wrapping the button"
         },
         {
           "name": "href",
@@ -765,8 +784,9 @@
         },
         {
           "name": "tooltipProps",
-          "type": "TooltipProps",
-          "required": false
+          "type": "IconButtonTooltipProps",
+          "required": false,
+          "description": "Props of the 2.0  wrapping the button"
         }
       ],
       "examples": [
@@ -1301,6 +1321,12 @@
           "required": false,
           "defaultValue": "ElementSize.Small",
           "description": "The size of the label, which can be 'small', 'medium', or 'large'."
+        },
+        {
+          "name": "containerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for the wrapper holding the\n`<label>` and its info button. Needed when the label is a flex item that has\nto shrink: a wrapper left at `min-width: auto` cannot, so its text overflows\ninstead of truncating."
         }
       ],
       "examples": [
@@ -1526,7 +1552,7 @@
       "name": "Popup",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "An accessible modal dialog using Floating UI.\naliases: Modal|Dialog\nDesign system 2.0\n\nRenders in a portal with a scrim overlay, focus management, a header with the\ntitle and close control, a scrollable body and an optional footer. Sections\nare separated by spacing rather than rules; add your own through\n`headerClassName` or the footer node if a surface needs them.\n\nA string `header` names the dialog automatically. A `header` node cannot —\npass `ariaLabel` in that case, or the dialog opens unnamed.",
+      "description": "An accessible modal dialog using Floating UI.\naliases: Modal|Dialog\nDesign system 2.0\n\nRenders in a portal with a scrim overlay, focus management, a header with the\ntitle and close control, a scrollable body and an optional footer. Sections\nare separated by spacing rather than rules; opt into a rule with\n`headerDivider` / `footerDivider`.\n\nThe header grows from the title alone: `onBack` prepends a back control,\n`headerActions` sits between the title and the close button.\n\nThe footer is declared as data, not markup: `mainButtons` and\n`additionalButtons` take  and the popup renders the\ns itself, so spacing, order and the neutral default are the\nsame on every dialog. `additionalButtonsOnLeft` moves the secondary group to\nthe opposite edge. A `footer` node still wins over both, for the rare surface\nthat needs something other than a row of buttons.\n\nA string `header` names the dialog automatically. A `header` node cannot —\npass `ariaLabel` in that case, or the dialog opens unnamed.",
       "props": [
         {
           "name": "open",
@@ -1593,7 +1619,13 @@
           "name": "footer",
           "type": "ReactNode",
           "required": false,
-          "description": "Footer area for actions"
+          "description": "Custom footer node; overrides `mainButtons` and `additionalButtons`"
+        },
+        {
+          "name": "footerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to the built-in footer container"
         },
         {
           "name": "onClose",
@@ -1601,6 +1633,58 @@
           "required": false,
           "description": "Callback fired when the popup requests to close"
         },
+        {
+          "name": "onBack",
+          "type": "(e: MouseEvent<HTMLButtonElement>) => void",
+          "required": false,
+          "description": "Callback for the header back button; the button renders only when set"
+        },
+        {
+          "name": "backAriaLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Back'",
+          "description": "Accessible name of the back button"
+        },
+        {
+          "name": "headerActions",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Controls rendered between the title and the close button"
+        },
+        {
+          "name": "headerDivider",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether a rule is drawn under the header"
+        },
+        {
+          "name": "mainButtons",
+          "type": "ButtonProps[]",
+          "required": false,
+          "description": "Primary footer buttons, aligned to the trailing edge; each defaults to `ButtonVariant.Neutral`"
+        },
+        {
+          "name": "additionalButtons",
+          "type": "ButtonProps[]",
+          "required": false,
+          "description": "Secondary footer buttons, next to `mainButtons` unless moved left"
+        },
+        {
+          "name": "additionalButtonsOnLeft",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether `additionalButtons` sit on the leading edge"
+        },
+        {
+          "name": "footerDivider",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether a rule is drawn above the footer"
+        },
         {
           "name": "size",
           "type": "PopupSize",
@@ -1638,7 +1722,7 @@
         }
       ],
       "examples": [
-        "<Popup\n  open\n  header=\"Title\"\n  size={PopupSize.Md}\n  footer={\n    <div className=\"flex justify-end gap-2 px-6 py-4\">\n      <NeutralButton label=\"Cancel\" />\n      <PrimaryButton label=\"Confirm\" />\n    </div>\n  }\n  onClose={() => setOpen(false)}\n>\n  <div className=\"px-6 py-4\">Dialog content goes here…</div>\n</Popup>"
+        "<Popup\n  open\n  header=\"Title\"\n  size={PopupSize.Md}\n  onBack={() => setStep(step - 1)}\n  headerActions={<InfoButton caption=\"What is this?\" />}\n  additionalButtonsOnLeft\n  additionalButtons={[\n    {\n      label: 'Back',\n      variant: ButtonVariant.Primary,\n      appearance: ButtonAppearance.Link,\n      iconBefore: <IconArrowLeft />,\n      onClick: goBack,\n    },\n  ]}\n  mainButtons={[\n    { label: 'Cancel', onClick: () => setOpen(false) },\n    { label: 'Confirm', variant: ButtonVariant.Primary, onClick: submit },\n  ]}\n  onClose={() => setOpen(false)}\n>\n  <div className=\"px-6 py-4\">Dialog content goes here…</div>\n</Popup>"
       ],
       "sourceFile": "components/New/Popup/Popup.tsx"
     },
@@ -2095,359 +2179,1355 @@
       "sourceFile": "components/New/Switch/Switch.tsx"
     },
     {
-      "name": "Tabs",
+      "name": "Radio",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A horizontal row of tabs, underlining the active one and showing optional count badges.\naliases: TabRow|TabNavigation|TabBar\nDesign system 2.0\n\nFollows the ARIA tabs pattern with automatic activation: only the active tab is\nin the tab order, and the arrow keys move both focus and selection. `Home` and\n`End` jump to the first and last tab, and the arrows wrap around the ends.\nTabs marked `disabled` are greyed out, cannot be clicked, and are skipped by\nkeyboard navigation.\n\nThe component renders the tabs only; the panels stay with the consumer.",
+      "description": "A radio button from the 2.0 design system.\naliases: RadioButton|ChoiceOption|RadioInput\nDesign system 2.0",
       "props": [
         {
-          "name": "tabs",
-          "type": "TabItem[]",
+          "name": "name",
+          "type": "string",
           "required": true,
-          "description": "Ordered list of tabs to render."
+          "description": "The group this radio belongs to; radios sharing it are mutually exclusive"
         },
         {
-          "name": "activeTabId",
+          "name": "value",
           "type": "string",
           "required": true,
-          "description": "ID of the currently selected tab."
+          "description": "The value reported to `onChange` when this radio is selected"
         },
         {
-          "name": "onTabChange",
-          "type": "(tabId: string) => void",
-          "required": true,
-          "description": "Fired with the tab's `id` when the user selects a tab."
+          "name": "labelProps",
+          "type": "LabelProps",
+          "required": false,
+          "description": "Props of the  rendered next to the control"
         },
         {
-          "name": "ariaLabel",
-          "type": "string",
+          "name": "isSelected",
+          "type": "boolean",
           "required": false,
-          "description": "Accessible name for the tab list."
+          "defaultValue": "false",
+          "description": "Whether this radio is the selected one of its group"
         },
         {
-          "name": "className",
-          "type": "string",
+          "name": "disabled",
+          "type": "boolean",
           "required": false,
-          "description": "Additional CSS classes for the tab list container."
+          "description": "Whether the radio is disabled"
         },
         {
-          "name": "tabClassName",
+          "name": "onChange",
+          "type": "(value: string) => void",
+          "required": false,
+          "description": "Callback fired with `value` when this radio becomes selected"
+        },
+        {
+          "name": "caption",
           "type": "string",
           "required": false,
-          "description": "Additional CSS classes applied to every tab."
+          "description": "Caption text rendered below the label, and described by the radio"
         }
       ],
       "examples": [
-        "<Tabs\n  ariaLabel=\"Conversation views\"\n  tabs={[\n    { id: 'all', label: 'All', count: 12 },\n    { id: 'shared', label: 'Shared with me' },\n  ]}\n  activeTabId={activeTabId}\n  onTabChange={setActiveTabId}\n/>"
+        "<Radio\n  name=\"plan\"\n  value=\"pro\"\n  labelProps={{ label: 'Pro' }}\n  isSelected={plan === 'pro'}\n  onChange={setPlan}\n/>"
       ],
-      "sourceFile": "components/New/Tabs/Tabs.tsx"
+      "sourceFile": "components/New/Radio/Radio.tsx"
     },
     {
-      "name": "FileDropzone",
+      "name": "RadioGroup",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A dashed drop area that takes files by drag-and-drop or through the file picker.\naliases: LoadFileArea|FileUpload|DragDropUpload|UploadArea\nDesign system 2.0\n\nThe area is a label over a visually hidden file input, so the picker opens on\nclick and the control stays operable by keyboard and announced as a file input\nwithout any extra wiring. The border highlights while a drag hovers it.\n\n`accept` is enforced on drops as well as in the picker — the browser only\nfilters the latter — so `onChange` never receives a file the caller excluded.\nRejected files go to `onReject`; all copy stays with the caller, which keeps\nvalidation messages in the consumer's own wording and language.",
+      "description": "A set of mutually exclusive  options with one group label.\naliases: SelectionGroup|OptionGroup|RadioList\nDesign system 2.0",
       "props": [
         {
-          "name": "labelProps",
-          "type": "LabelProps",
-          "required": false,
-          "description": "Props of the  naming the field, rendered above the area."
-        },
-        {
-          "name": "label",
-          "type": "ReactNode",
+          "name": "items",
+          "type": "RadioGroupItem[]",
           "required": true,
-          "description": "Primary line of copy."
+          "description": "Options to render; each needs a unique `value` and may carry a `label`, `caption`, `content` and `disabled` flag"
         },
         {
-          "name": "description",
-          "type": "ReactNode",
+          "name": "value",
+          "type": "string",
           "required": false,
-          "description": "Secondary line of copy."
+          "description": "The `value` of the selected option"
         },
         {
           "name": "onChange",
-          "type": "(files: File[]) => void",
+          "type": "(value: string) => void",
           "required": true,
-          "description": "Fired with the accepted files."
+          "description": "Callback fired with the newly selected `value`"
         },
         {
-          "name": "onReject",
-          "type": "(files: File[]) => void",
+          "name": "name",
+          "type": "string",
           "required": false,
-          "description": "Fired with dropped files that `accept` excluded."
+          "description": "The `name` shared by the underlying radios; defaults to the group id"
         },
         {
-          "name": "accept",
+          "name": "id",
           "type": "string",
           "required": false,
-          "description": "Comma-separated `accept` tokens."
+          "description": "Base id for the group; option ids are derived from it"
         },
         {
-          "name": "multiple",
-          "type": "boolean",
+          "name": "orientation",
+          "type": "RadioGroupOrientation",
           "required": false,
-          "defaultValue": "false",
-          "description": "Whether more than one file can be selected."
+          "defaultValue": "RadioGroupOrientation.Column",
+          "description": "Whether the options stack or sit in a row"
+        },
+        {
+          "name": "labelProps",
+          "type": "LabelProps",
+          "required": false,
+          "description": "Props of the  rendered above the options"
         },
         {
           "name": "disabled",
           "type": "boolean",
           "required": false,
-          "defaultValue": "false",
-          "description": "Disables picking and dropping."
+          "description": "Disables every option"
         },
         {
-          "name": "errorText",
+          "name": "error",
           "type": "string",
           "required": false,
-          "description": "Error message rendered below the area."
+          "description": "Error message rendered below the options"
         },
         {
-          "name": "icon",
-          "type": "ReactNode",
+          "name": "caption",
+          "type": "string",
           "required": false,
-          "description": "Icon rendered above the copy."
+          "description": "Helper text rendered below the options when there is no `error`"
         },
         {
-          "name": "id",
+          "name": "ariaLabel",
           "type": "string",
           "required": false,
-          "description": "`id` of the underlying file input."
+          "description": "Names the group when there is no string `labelProps.label`"
         },
         {
-          "name": "ariaLabel",
+          "name": "className",
           "type": "string",
           "required": false,
-          "description": "Accessible name; needed when `label` carries no text."
+          "description": "Additional classes for the outer container"
         },
         {
-          "name": "className",
+          "name": "optionsClassName",
           "type": "string",
           "required": false,
-          "description": "Additional CSS classes for the drop area."
+          "description": "Additional classes for the options wrapper"
+        },
+        {
+          "name": "radioClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for every option's control row"
+        },
+        {
+          "name": "contentClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for the selected option's content"
         }
       ],
       "examples": [
-        "<FileDropzone\n  label=\"Drag and drop it or click here to upload\"\n  description=\"File formats .md, .zip and .skill\"\n  accept=\".md,.zip,.skill\"\n  onChange={(files) => upload(files)}\n  onReject={() => setError('Unsupported file format')}\n/>"
+        "<RadioGroup\n  labelProps={{ label: 'Delivery' }}\n  value={delivery}\n  onChange={setDelivery}\n  items={[\n    { value: 'pickup', label: 'Pickup', caption: 'Free, ready today' },\n    { value: 'courier', label: 'Courier', content: <AddressForm /> },\n  ]}\n/>"
       ],
-      "sourceFile": "components/New/FileDropzone/FileDropzone.tsx"
+      "sourceFile": "components/New/RadioGroup/RadioGroup.tsx"
     },
     {
-      "name": "Tag",
+      "name": "RadioGroupPopupField",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A compact label element used for selections, filters, or categories.\naliases: Chip|Pill\nDesign system 2.0\n\nThe label truncates rather than wrapping, and carries a native `title` so the\nfull text stays reachable when it does.\n\nA tag with `onClick` becomes a `role=\"button\"` operable with Enter and Space.\nIts remove control is a real nested `<button>`, so keep the two roles apart in\nthe caller: a clickable tag that is also closable gives a screen reader two\nactions with no way to tell which one it landed on.",
+      "description": "A field whose value is picked from a  inside a .\naliases: PopupRadio|ChoicePopup|RadioPopupField\nDesign system 2.0",
       "props": [
         {
-          "name": "label",
-          "type": "string",
+          "name": "items",
+          "type": "RadioGroupItem[]",
           "required": true,
-          "description": "Text content displayed inside the tag."
+          "description": "Options offered inside the popup"
         },
         {
-          "name": "icon",
+          "name": "value",
+          "type": "string",
+          "required": false,
+          "description": "The committed value, shown in the collapsed field"
+        },
+        {
+          "name": "customValue",
+          "type": "string",
+          "required": false,
+          "description": "Text shown in the field in place of the selected option's label"
+        },
+        {
+          "name": "header",
           "type": "ReactNode",
+          "required": true,
+          "description": "Title of the popup"
+        },
+        {
+          "name": "onApply",
+          "type": "(value?: string) => void",
+          "required": true,
+          "description": "Callback fired with the selected value when Apply is clicked"
+        },
+        {
+          "name": "id",
+          "type": "string",
           "required": false,
-          "description": "Icon rendered before the label."
+          "description": "Base id for the field; the label and the options derive theirs from it"
+        },
+        {
+          "name": "labelProps",
+          "type": "LabelProps",
+          "required": false,
+          "description": "Props of the  rendered above the field"
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "required": false,
+          "description": "Text shown in the field while no value is selected"
+        },
+        {
+          "name": "selectedValue",
+          "type": "string",
+          "required": false,
+          "description": "Controlled draft selection inside the popup"
+        },
+        {
+          "name": "onSelectionChange",
+          "type": "(value: string) => void",
+          "required": false,
+          "description": "Callback fired when the draft selection changes"
+        },
+        {
+          "name": "onCancel",
+          "type": "() => void",
+          "required": false,
+          "description": "Callback fired when Cancel is clicked, before the popup closes"
+        },
+        {
+          "name": "onClose",
+          "type": "() => void",
+          "required": false,
+          "description": "Callback fired whenever the popup closes"
+        },
+        {
+          "name": "isValid",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether Apply is enabled"
+        },
+        {
+          "name": "applyButtonLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "defaultApplyLabel",
+          "description": "Label of the Apply button"
+        },
+        {
+          "name": "cancelButtonLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "defaultCancelLabel",
+          "description": "Label of the Cancel button"
         },
         {
           "name": "size",
-          "type": "ElementSize",
+          "type": "PopupSize",
+          "required": false,
+          "defaultValue": "PopupSize.Md",
+          "description": "Size of the popup"
+        },
+        {
+          "name": "portalId",
+          "type": "string",
+          "required": false,
+          "description": "Portal container id for the popup"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Disables the field, so the popup cannot be opened"
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "required": false,
+          "description": "Paints the field with the error border"
+        },
+        {
+          "name": "error",
+          "type": "string",
+          "required": false,
+          "description": "Error message rendered below the field"
+        },
+        {
+          "name": "caption",
+          "type": "string",
+          "required": false,
+          "description": "Helper text rendered below the field when there is no `error`"
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "description": "Names the field when there is no string `labelProps.label`"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for the outer container"
+        },
+        {
+          "name": "fieldClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for the collapsed field"
+        }
+      ],
+      "examples": [
+        "<RadioGroupPopupField\n  labelProps={{ label: 'Status' }}\n  header=\"Select status\"\n  placeholder=\"None\"\n  items={[\n    { value: 'draft', label: 'Draft' },\n    { value: 'published', label: 'Published' },\n  ]}\n  value={status}\n  onApply={(next) => setStatus(next)}\n/>"
+      ],
+      "sourceFile": "components/New/RadioGroupPopupField/RadioGroupPopupField.tsx"
+    },
+    {
+      "name": "Checkbox",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A checkbox from the 2.0 design system.\naliases: ToggleCheckbox|MultiSelectOption|TriStateCheckbox\nDesign system 2.0",
+      "props": [
+        {
+          "name": "labelProps",
+          "type": "LabelProps",
+          "required": false,
+          "description": "Props of the  rendered next to the control"
+        },
+        {
+          "name": "isSelected",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "The current value of the checkbox"
+        },
+        {
+          "name": "isIndeterminate",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the checkbox is in the mixed state"
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the checkbox failed validation (applies error styling)"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the checkbox is disabled"
+        },
+        {
+          "name": "onChange",
+          "type": "(value: boolean) => void",
+          "required": false,
+          "description": "Callback fired with the new value when toggled"
+        },
+        {
+          "name": "caption",
+          "type": "string",
+          "required": false,
+          "description": "Caption text rendered below the label, and described by the checkbox"
+        },
+        {
+          "name": "boxClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for the box itself. Use it to drop\nthe box's own focus ring where the container already draws one, as a\nmultiselect row does."
+        }
+      ],
+      "examples": [
+        "<Checkbox\n  labelProps={{ label: 'Accept terms' }}\n  isSelected={accepted}\n  onChange={setAccepted}\n/>"
+      ],
+      "sourceFile": "components/New/Checkbox/Checkbox.tsx"
+    },
+    {
+      "name": "CheckboxBox",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "The 20px box a checkbox draws — the square, its border, its fill and the\ncheck or dash inside.\nDesign system 2.0\n\nTwo things render it: , where it is the `<label for>` that\ntoggles the input next to it, and rows that only *look* like a checkbox —\na `menuitemcheckbox` in a dropdown, whose state lives on `aria-checked` and\nwhose whole row is the control. Passing `htmlFor` picks the first: the box\nbecomes a label with a pointer target of its own. Without it the box is a\ndecorative `<span>`, hidden from assistive technology, and the row around it\ncarries both the state and the pointer target.",
+      "props": [
+        {
+          "name": "isSelected",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the box is filled with a check"
+        },
+        {
+          "name": "isIndeterminate",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the box is filled with a dash; takes precedence over `isSelected`"
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Paints the box with the error colour"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Greys the box out"
+        },
+        {
+          "name": "htmlFor",
+          "type": "string",
+          "required": false,
+          "description": "Id of the input this box labels; omit for a decorative box"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for the box"
+        }
+      ],
+      "examples": [],
+      "sourceFile": "components/New/Checkbox/CheckboxBox.tsx"
+    },
+    {
+      "name": "ToggleIconButton",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "An icon button that stays pressed, for a setting the icon itself represents.\naliases: IconToggle|ToggleButton|BookmarkButton\nDesign system 2.0",
+      "props": [
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Icon shown while unselected; rendered at 16px"
+        },
+        {
+          "name": "selectedIcon",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Icon shown while selected; falls back to `icon`"
+        },
+        {
+          "name": "isSelected",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the toggle is on"
+        },
+        {
+          "name": "onToggle",
+          "type": "(isSelected: boolean) => void",
+          "required": false,
+          "description": "Callback fired with the next value when clicked"
+        },
+        {
+          "name": "tooltipProps",
+          "type": "ToggleTooltipProps",
+          "required": false,
+          "description": "Props of the 2.0  wrapping the button"
+        }
+      ],
+      "examples": [
+        "<ToggleIconButton\n  icon={<IconBookmark />}\n  selectedIcon={<IconBookmarkFilled />}\n  isSelected={isBookmarked}\n  onToggle={setIsBookmarked}\n  tooltipProps={{ tooltip: 'Bookmark' }}\n/>"
+      ],
+      "sourceFile": "components/New/ToggleIconButton/ToggleIconButton.tsx"
+    },
+    {
+      "name": "SegmentedControl",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A single-select switch between a few mutually exclusive, equally sized options.\naliases: SegmentedButton|ViewSwitcher|ButtonGroup\nDesign system 2.0",
+      "props": [
+        {
+          "name": "items",
+          "type": "SegmentedControlItem<T>[]",
+          "required": true,
+          "description": "Segments to render; each needs a unique `value` and may carry a `label`, `icon` and `disabled` flag"
+        },
+        {
+          "name": "value",
+          "type": "T",
+          "required": true,
+          "description": "The currently selected `value`"
+        },
+        {
+          "name": "onChange",
+          "type": "(value: T) => void",
+          "required": true,
+          "description": "Callback fired with the newly selected `value`"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Disables every segment"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for the track"
+        },
+        {
+          "name": "segmentClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for every segment"
+        },
+        {
+          "name": "'aria-label'",
+          "type": "string",
+          "required": false
+        }
+      ],
+      "examples": [
+        "<SegmentedControl\n  aria-label=\"View\"\n  value={view}\n  onChange={setView}\n  items={[\n    { value: 'list', icon: <IconList />, 'aria-label': 'List' },\n    { value: 'grid', icon: <IconGrid />, 'aria-label': 'Grid' },\n  ]}\n/>"
+      ],
+      "sourceFile": "components/New/SegmentedControl/SegmentedControl.tsx"
+    },
+    {
+      "name": "Tabs",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A horizontal row of tabs, underlining the active one and showing optional count badges.\naliases: TabRow|TabNavigation|TabBar\nDesign system 2.0\n\nFollows the ARIA tabs pattern with automatic activation: only the active tab is\nin the tab order, and the arrow keys move both focus and selection. `Home` and\n`End` jump to the first and last tab, and the arrows wrap around the ends.\nTabs marked `disabled` are greyed out, cannot be clicked, and are skipped by\nkeyboard navigation.\n\nThe component renders the tabs only; the panels stay with the consumer.",
+      "props": [
+        {
+          "name": "tabs",
+          "type": "TabItem[]",
+          "required": true,
+          "description": "Ordered list of tabs to render."
+        },
+        {
+          "name": "activeTabId",
+          "type": "string",
+          "required": true,
+          "description": "ID of the currently selected tab."
+        },
+        {
+          "name": "onTabChange",
+          "type": "(tabId: string) => void",
+          "required": true,
+          "description": "Fired with the tab's `id` when the user selects a tab."
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible name for the tab list."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the tab list container."
+        },
+        {
+          "name": "tabClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to every tab."
+        }
+      ],
+      "examples": [
+        "<Tabs\n  ariaLabel=\"Conversation views\"\n  tabs={[\n    { id: 'all', label: 'All', count: 12 },\n    { id: 'shared', label: 'Shared with me' },\n  ]}\n  activeTabId={activeTabId}\n  onTabChange={setActiveTabId}\n/>"
+      ],
+      "sourceFile": "components/New/Tabs/Tabs.tsx"
+    },
+    {
+      "name": "FileDropzone",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A dashed drop area that takes files by drag-and-drop or through the file picker.\naliases: LoadFileArea|FileUpload|DragDropUpload|UploadArea\nDesign system 2.0\n\nThe area is a label over a visually hidden file input, so the picker opens on\nclick and the control stays operable by keyboard and announced as a file input\nwithout any extra wiring. The border highlights while a drag hovers it.\n\n`accept` is enforced on drops as well as in the picker — the browser only\nfilters the latter — so `onChange` never receives a file the caller excluded.\nRejected files go to `onReject`; all copy stays with the caller, which keeps\nvalidation messages in the consumer's own wording and language.",
+      "props": [
+        {
+          "name": "labelProps",
+          "type": "LabelProps",
+          "required": false,
+          "description": "Props of the  naming the field, rendered above the area."
+        },
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Primary line of copy."
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Secondary line of copy."
+        },
+        {
+          "name": "onChange",
+          "type": "(files: File[]) => void",
+          "required": true,
+          "description": "Fired with the accepted files."
+        },
+        {
+          "name": "onReject",
+          "type": "(files: File[]) => void",
+          "required": false,
+          "description": "Fired with dropped files that `accept` excluded."
+        },
+        {
+          "name": "accept",
+          "type": "string",
+          "required": false,
+          "description": "Comma-separated `accept` tokens."
+        },
+        {
+          "name": "multiple",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether more than one file can be selected."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Disables picking and dropping."
+        },
+        {
+          "name": "errorText",
+          "type": "string",
+          "required": false,
+          "description": "Error message rendered below the area."
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Icon rendered above the copy."
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "description": "`id` of the underlying file input."
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible name; needed when `label` carries no text."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the drop area."
+        }
+      ],
+      "examples": [
+        "<FileDropzone\n  label=\"Drag and drop it or click here to upload\"\n  description=\"File formats .md, .zip and .skill\"\n  accept=\".md,.zip,.skill\"\n  onChange={(files) => upload(files)}\n  onReject={() => setError('Unsupported file format')}\n/>"
+      ],
+      "sourceFile": "components/New/FileDropzone/FileDropzone.tsx"
+    },
+    {
+      "name": "Tag",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A compact label element used for selections, filters, or categories.\naliases: Chip|Pill\nDesign system 2.0\n\nThe tag has one height — the 32px pill of the 2.0 design. There is no `size`\nprop: a tag sizes itself, and a caller that needs a different height is\nusually reaching for a button.\n\nThe label truncates rather than wrapping, and carries a native `title` so the\nfull text stays reachable when it does.\n\nA tag with `onClick` becomes a `role=\"button\"` operable with Enter and Space.\nIts remove control is a real nested `<button>`, so keep the two roles apart in\nthe caller: a clickable tag that is also closable gives a screen reader two\nactions with no way to tell which one it landed on.\n\nNo tag draws a rim; the two appearances are told apart by their fill.\n`TagAppearance.Selectable` is the filter chip of the 2.0 design: no fill\nat all until it is selected, one hover tint shared by both states, a semibold\nlabel once selected, and the state carried on `aria-pressed` rather than by\nthe tint alone. Give it an `onClick` — a selectable tag that cannot be\nactivated is a colour and nothing else.\n\nSelecting one therefore changes its width by the difference between the\nregular and semibold label. In a wrapping filter row that is what the design\nasks for; if a fixed width matters, give the chip one.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "required": true,
+          "description": "Text content displayed inside the tag."
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Icon rendered before the label."
+        },
+        {
+          "name": "appearance",
+          "type": "TagAppearance",
+          "required": false,
+          "defaultValue": "TagAppearance.Outlined",
+          "description": "`outlined` is the filled chip on the raised\nlayer; `selectable` is the unfilled filter chip that tints and turns semibold when selected."
+        },
+        {
+          "name": "selected",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Applies the accent-tinted selected styling."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Stops the tag responding: no click handling, no remove control. The design defines no disabled tag, so the colours stay put."
+        },
+        {
+          "name": "closable",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Renders the remove button. Needs `onRemove` to appear."
+        },
+        {
+          "name": "removeLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible name of the remove button; defaults to `Remove <label>`."
+        },
+        {
+          "name": "onRemove",
+          "type": "(event: MouseEvent<HTMLButtonElement>) => void",
+          "required": false,
+          "description": "Called when the remove button is clicked. The click does not bubble to `onClick`."
+        }
+      ],
+      "examples": [
+        "<Tag label=\"TypeScript\" />\n<Tag label=\"TypeScript\" closable onRemove={() => remove('TypeScript')} />\n<Tag label=\"Drafts\" selected onClick={() => toggle('Drafts')} />\n<Tag\n  label=\"Drafts\"\n  appearance={TagAppearance.Selectable}\n  selected={isSelected}\n  onClick={() => toggle('Drafts')}\n/>"
+      ],
+      "sourceFile": "components/New/Tag/Tag.tsx"
+    },
+    {
+      "name": "TagInput",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A tag input field: type a value and commit it with Enter or comma.\naliases: MultiTag|TagField|ChipInput\nDesign system 2.0\n\nThe field is an , so it carries the 2.0 field styling, sizes,\nlabel, caption and error states, and the tags render as s in its\ncontent slot. The field grows as tags wrap, unless `collapseTagOverflow` keeps\nthem on one line behind a `+N` chip.\n\nWorks controlled (`value` + `onChange`) or uncontrolled (`defaultValue`).\nDuplicate tags are ignored. Backspace on an empty input removes the last tag.",
+      "props": [
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "description": "The id of the text input, linked to the label."
+        },
+        {
+          "name": "value",
+          "type": "string[]",
+          "required": false,
+          "description": "Controlled tag list."
+        },
+        {
+          "name": "defaultValue",
+          "type": "string[]",
+          "required": false,
+          "description": "Initial tag list when uncontrolled."
+        },
+        {
+          "name": "size",
+          "type": "ElementSize",
+          "required": false,
+          "defaultValue": "ElementSize.Standard",
+          "description": "Field height: standard is 40px, small is 24px."
+        },
+        {
+          "name": "labelProps",
+          "type": "LabelProps",
+          "required": false,
+          "description": "Props of the  rendered above the field."
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "required": false,
+          "description": "Placeholder shown while there are no tags."
+        },
+        {
+          "name": "caption",
+          "type": "string",
+          "required": false,
+          "description": "Helper text rendered below the field when there is no `error`."
+        },
+        {
+          "name": "error",
+          "type": "string",
+          "required": false,
+          "description": "Error message rendered below the field (pass `invalid` too for error styling)."
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "required": false,
+          "description": "Applies the field's error styling."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Disables typing and tag removal."
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Shows the tags without allowing new ones or removal."
+        },
+        {
+          "name": "collapseTagOverflow",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Keep the tags on one line, replacing the ones that do not fit with a `+N` chip."
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible name for the text input; use it when there is no visible label."
+        },
+        {
+          "name": "tagListLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Tags'",
+          "description": "Accessible name of the tag list."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the outer container."
+        },
+        {
+          "name": "fieldClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the field itself."
+        },
+        {
+          "name": "tagClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to every tag."
+        },
+        {
+          "name": "onChange",
+          "type": "(tags: string[]) => void",
+          "required": false,
+          "description": "Called with the new list whenever a tag is added or removed."
+        }
+      ],
+      "examples": [
+        "const [tags, setTags] = useState<string[]>(['React']);\n\n<TagInput\n  id=\"skills\"\n  labelProps={{ label: 'Skills' }}\n  placeholder=\"Add a skill\"\n  caption=\"Press Enter or comma to add\"\n  value={tags}\n  onChange={setTags}\n/>"
+      ],
+      "sourceFile": "components/New/TagInput/TagInput.tsx"
+    },
+    {
+      "name": "Search",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A search field with a leading magnifier and a clear button, built on .\naliases: SearchField|QueryInput|SearchBox\nDesign system 2.0\n\nFully controlled: it renders exactly the `value` it is given and reports every\nedit through `onChange`, which receives `undefined` for an empty field. The\nclear button appears only while there is something to clear, and returns focus\nto the input once pressed so keyboard users are not dropped to the page body.\n\n`type` and both icon slots are owned by this component; every other\n prop is passed through.",
+      "props": [
+        {
+          "name": "withoutBorder",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Renders the field without its border and background"
+        },
+        {
+          "name": "clearLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Clear search'",
+          "description": "Accessible name of the clear button"
+        }
+      ],
+      "examples": [
+        "<Search\n  id=\"search\"\n  value={query}\n  placeholder=\"Search\"\n  onChange={setQuery}\n/>"
+      ],
+      "sourceFile": "components/New/Search/Search.tsx"
+    },
+    {
+      "name": "Slider",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A range slider from the 2.0 design system.\naliases: RangeInput|TemperatureSlider|RangeSlider\nDesign system 2.0",
+      "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,
+          "description": "Whether the slider is disabled"
+        },
+        {
+          "name": "labelProps",
+          "type": "LabelProps",
+          "required": false,
+          "description": "Props of the  rendered above the track"
+        },
+        {
+          "name": "labels",
+          "type": "[string, string] | [string, string, string]",
+          "required": false,
+          "description": "2 or 3 strings rendered below the track (start, [middle,] end)"
+        },
+        {
+          "name": "formatValue",
+          "type": "(value: number) => string",
+          "required": false,
+          "description": "Custom formatter for the displayed value; also becomes the announced `aria-valuetext`"
+        },
+        {
+          "name": "showValue",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Renders the current value at the end of the label row"
+        },
+        {
+          "name": "caption",
+          "type": "string",
+          "required": false,
+          "description": "Helper text rendered below the track, and described by the slider"
+        },
+        {
+          "name": "error",
+          "type": "string",
+          "required": false,
+          "description": "Error message rendered below the track; replaces the caption"
+        },
+        {
+          "name": "onChange",
+          "type": "(value: number) => void",
+          "required": false,
+          "description": "Callback fired with the new value"
+        },
+        {
+          "name": "containerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for the outer container"
+        },
+        {
+          "name": "trackClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for the unfilled track"
+        },
+        {
+          "name": "fillClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for the filled portion of the track"
+        }
+      ],
+      "examples": [
+        "<Slider\n  id=\"temperature\"\n  labelProps={{ label: 'Temperature' }}\n  value={temperature}\n  labels={['Precise', 'Neutral', 'Creative']}\n  onChange={setTemperature}\n/>"
+      ],
+      "sourceFile": "components/New/Slider/Slider.tsx"
+    },
+    {
+      "name": "Tooltip",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "Shows a short explanation next to an element while it is hovered or focused.\naliases: HoverPopover|InfoPopover\nDesign system 2.0\n\nThe tooltip is placed on one of the four sides of the trigger and follows it\non scroll, flipping to the opposite side when it would not fit.\n\nTooltip text does not reach assistive technology unless the trigger itself\ncarries it: pass `asChild` so the `aria-describedby` lands on the control\nrather than on a wrapper `<span>`, and never let a tooltip be the only\naccessible name of a control — it renders nothing on mobile screens.",
+      "props": [
+        {
+          "name": "hideTooltip",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Suppress the tooltip while keeping the trigger rendered"
+        },
+        {
+          "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": "asChild",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Use the child as the trigger instead of wrapping it in a `<span>`"
+        },
+        {
+          "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 bubble"
+        }
+      ],
+      "examples": [
+        "<Tooltip tooltip=\"Tooltip text\" placement={TooltipPlacement.Top} asChild>\n  <button>Hover me</button>\n</Tooltip>"
+      ],
+      "sourceFile": "components/New/Tooltip/Tooltip.tsx"
+    },
+    {
+      "name": "TooltipContainer",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "Provides tooltip positioning and open state to a trigger and a content pair.\naliases: TooltipProvider|TooltipRoot\nDesign system 2.0\n\nUse it directly only when the trigger and the content cannot be rendered by\n`Tooltip` itself — for example when the content needs custom markup.",
+      "props": [],
+      "examples": [
+        "<TooltipContainer placement={TooltipPlacement.Top}>\n  <TooltipTrigger asChild>\n    <button>Hover me</button>\n  </TooltipTrigger>\n  <TooltipContent>Tooltip text</TooltipContent>\n</TooltipContainer>"
+      ],
+      "sourceFile": "components/New/Tooltip/TooltipContainer.tsx"
+    },
+    {
+      "name": "TooltipContent",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "The floating bubble that carries the tooltip text.\nDesign system 2.0\n\nRendered in a portal, above popups and dropdowns, with an arrow pointing back\nat the trigger. Renders nothing on a mobile screen, where there is no hover\nto reveal it — so a control must never depend on a tooltip alone to be\nunderstood, or to have an accessible name.",
+      "props": [
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Additional inline styles for the tooltip bubble"
+        }
+      ],
+      "examples": [],
+      "sourceFile": "components/New/Tooltip/TooltipContent.tsx"
+    },
+    {
+      "name": "TooltipTrigger",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "The element a tooltip is anchored to and opened from.\nDesign system 2.0\n\nPrefer `asChild` whenever the trigger is a single element: it puts the\n`aria-describedby` that names the tooltip on the control itself instead of on\na wrapper `<span>`, which is the only way the tooltip text reaches assistive\ntechnology.",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Render the child as the trigger instead of wrapping it in a `<span>`"
+        }
+      ],
+      "examples": [],
+      "sourceFile": "components/New/Tooltip/TooltipTrigger.tsx"
+    },
+    {
+      "name": "EllipsisTooltip",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "Single-line text with a CSS ellipsis that reveals the full string in a\ntooltip **only when it is actually clipped**.\naliases: TruncatedText|TruncationTooltip\nDesign system 2.0\n\nText that fits gets no tooltip at all, so a row of labels does not sprout\ntooltips that repeat what is already on screen.\n\nThe width has to be finite for anything to truncate: the element is a\n`min-w-0`, `flex-1` block, and `className` sets the width it should fit into.\n\na11y: while truncated, the full string is exposed as the element's\n`aria-label`, so a screen reader reads the whole label even though the\ntooltip itself renders nothing on mobile screens.",
+      "props": [
+        {
+          "name": "text",
+          "type": "ReactNode",
+          "required": true,
+          "description": "The text or node to display, truncated with an ellipsis when it does not fit"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the text element, typically its width"
+        },
+        {
+          "name": "contentClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the tooltip bubble"
+        },
+        {
+          "name": "hideTooltip",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Suppress the tooltip even while the text is truncated"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "description": "`id` of the text element"
+        },
+        {
+          "name": "customTooltipContent",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Shown instead of the full text while truncated"
+        }
+      ],
+      "examples": [
+        "<EllipsisTooltip text=\"Very long message that will be truncated\" />\n\n<EllipsisTooltip\n  text={<span className=\"dial-small-semi-text\">Custom node</span>}\n  className=\"max-w-[160px]\"\n/>\n\n<EllipsisTooltip text=\"Tooltip suppressed even when clipped\" hideTooltip />"
+      ],
+      "sourceFile": "components/New/EllipsisTooltip/EllipsisTooltip.tsx"
+    },
+    {
+      "name": "CollapsibleSidebar",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A side panel that collapses to a narrow rail carrying its title vertically.\naliases: ToggleSidebar|CollapsiblePanel|SidePanel\nDesign system 2.0\n\nWorks as a controlled component when `isOpened` is provided, otherwise it keeps\nits own state from `defaultOpened`. The width is derived from the open state, so\nchanging `width` on an open sidebar takes effect immediately.\n\nThe panel is an `aside` named by `ariaLabel`, and the toggle is a real\n`aria-expanded` control pointing at the content region. Content stays mounted\nwhile collapsed — hidden with `display: none` — so scroll position and any\nform state inside it survive a collapse.\n\nThe container paints no background and no radius: it is meant to sit on the\nsurface it belongs to. Pass `className` for either.",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Content shown while the sidebar is expanded."
+        },
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Name of the panel, rendered as vertical text while collapsed."
+        },
+        {
+          "name": "width",
+          "type": "number",
+          "required": false,
+          "defaultValue": "280",
+          "description": "Width in px while expanded."
+        },
+        {
+          "name": "collapsedWidth",
+          "type": "number",
+          "required": false,
+          "defaultValue": "COLLAPSED_WIDTH",
+          "description": "Width in px while collapsed."
+        },
+        {
+          "name": "isOpened",
+          "type": "boolean",
+          "required": false,
+          "description": "Controlled open state."
+        },
+        {
+          "name": "defaultOpened",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Initial open state when uncontrolled."
+        },
+        {
+          "name": "onToggle",
+          "type": "(nextOpened: boolean, e: MouseEvent<HTMLButtonElement>) => void",
+          "required": false,
+          "description": "Fired when the toggle is clicked. Receives the next open state."
+        },
+        {
+          "name": "additionalButtons",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Extra footer controls, rendered while expanded."
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Sidebar'",
+          "description": "Accessible name of the sidebar region."
+        },
+        {
+          "name": "collapseLabel",
+          "type": "string",
           "required": false,
-          "defaultValue": "ElementSize.Standard",
-          "description": "Tag height: standard is 24px, small is 20px."
+          "defaultValue": "'Collapse sidebar'",
+          "description": "Name and tooltip of the toggle while expanded."
         },
         {
-          "name": "selected",
-          "type": "boolean",
+          "name": "expandLabel",
+          "type": "string",
           "required": false,
-          "defaultValue": "false",
-          "description": "Applies the accent-tinted selected styling."
+          "defaultValue": "'Expand sidebar'",
+          "description": "Name and tooltip of the toggle while collapsed."
         },
         {
-          "name": "disabled",
-          "type": "boolean",
+          "name": "className",
+          "type": "string",
           "required": false,
-          "defaultValue": "false",
-          "description": "Dims the tag and suppresses the remove control and click handling."
+          "description": "Additional CSS classes for the outer container."
         },
         {
-          "name": "closable",
-          "type": "boolean",
+          "name": "titleClassName",
+          "type": "string",
           "required": false,
-          "defaultValue": "false",
-          "description": "Renders the remove button. Needs `onRemove` to appear."
+          "description": "Additional CSS classes for the vertical title."
         },
         {
-          "name": "removeLabel",
+          "name": "contentClassName",
           "type": "string",
           "required": false,
-          "description": "Accessible name of the remove button; defaults to `Remove <label>`."
+          "description": "Additional CSS classes for the content region."
         },
         {
-          "name": "onRemove",
-          "type": "(event: MouseEvent<HTMLButtonElement>) => void",
+          "name": "footerClassName",
+          "type": "string",
           "required": false,
-          "description": "Called when the remove button is clicked. The click does not bubble to `onClick`."
+          "description": "Additional CSS classes for the footer."
         }
       ],
       "examples": [
-        "<Tag label=\"TypeScript\" />\n<Tag label=\"TypeScript\" closable onRemove={() => remove('TypeScript')} />\n<Tag label=\"Drafts\" selected onClick={() => toggle('Drafts')} />"
+        "<CollapsibleSidebar title=\"Filters\" width={320}>\n  <FilterForm />\n</CollapsibleSidebar>\n\n<CollapsibleSidebar\n  title=\"Filters\"\n  isOpened={opened}\n  onToggle={setOpened}\n>\n  <FilterForm />\n</CollapsibleSidebar>"
       ],
-      "sourceFile": "components/New/Tag/Tag.tsx"
+      "sourceFile": "components/New/CollapsibleSidebar/CollapsibleSidebar.tsx"
     },
     {
-      "name": "TagInput",
+      "name": "ResizableContainer",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A tag input field: type a value and commit it with Enter or comma.\naliases: MultiTag|TagField|ChipInput\nDesign system 2.0\n\nThe field is an , so it carries the 2.0 field styling, sizes,\nlabel, caption and error states, and the tags render as s in its\ncontent slot. The field grows as tags wrap, unless `collapseTagOverflow` keeps\nthem on one line behind a `+N` chip.\n\nWorks controlled (`value` + `onChange`) or uncontrolled (`defaultValue`).\nDuplicate tags are ignored. Backspace on an empty input removes the last tag.",
+      "description": "A panel the user can widen or narrow by dragging its edge.\naliases: ResizePanel|SizableContainer|Splitter\nDesign system 2.0\n\nWorks as a controlled component when `width` is provided, otherwise it keeps\nits own width from `defaultWidth`. The handle appears on hover and while\ndragging, and stays within `minWidth`–`maxWidth` in both modes.\n\nThe handle is a focusable `separator`, so the panel resizes with the arrow\nkeys — `Home` and `End` jump to the bounds — and each press reports through\n`onResize` and `onResizeStop`. Unlike the 1.0 container this one draws no\ndividers between its children; pass `divide-y divide-tertiary` through\n`className` if you want them.",
       "props": [
         {
-          "name": "id",
-          "type": "string",
-          "required": false,
-          "description": "The id of the text input, linked to the label."
-        },
-        {
-          "name": "value",
-          "type": "string[]",
-          "required": false,
-          "description": "Controlled tag list."
-        },
-        {
-          "name": "defaultValue",
-          "type": "string[]",
-          "required": false,
-          "description": "Initial tag list when uncontrolled."
-        },
-        {
-          "name": "size",
-          "type": "ElementSize",
-          "required": false,
-          "defaultValue": "ElementSize.Standard",
-          "description": "Field height: standard is 40px, small is 24px."
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Content placed inside the container."
         },
         {
-          "name": "labelProps",
-          "type": "LabelProps",
-          "required": false,
-          "description": "Props of the  rendered above the field."
+          "name": "minWidth",
+          "type": "number",
+          "required": true,
+          "description": "Minimum allowed width in px."
         },
         {
-          "name": "placeholder",
-          "type": "string",
-          "required": false,
-          "description": "Placeholder shown while there are no tags."
+          "name": "maxWidth",
+          "type": "number",
+          "required": true,
+          "description": "Maximum allowed width in px."
         },
         {
-          "name": "caption",
-          "type": "string",
+          "name": "width",
+          "type": "number",
           "required": false,
-          "description": "Helper text rendered below the field when there is no `error`."
+          "description": "Controlled width. If omitted the container is uncontrolled."
         },
         {
-          "name": "error",
-          "type": "string",
+          "name": "defaultWidth",
+          "type": "number",
           "required": false,
-          "description": "Error message rendered below the field (pass `invalid` too for error styling)."
+          "description": "Initial width when uncontrolled. Defaults to `minWidth`."
         },
         {
-          "name": "invalid",
-          "type": "boolean",
+          "name": "onResizeStop",
+          "type": "(width: number) => void",
           "required": false,
-          "description": "Applies the field's error styling."
+          "description": "Fired when a resize ends, and once per arrow key press."
         },
         {
-          "name": "disabled",
-          "type": "boolean",
+          "name": "onResize",
+          "type": "(width: number) => void",
           "required": false,
-          "defaultValue": "false",
-          "description": "Disables typing and tag removal."
+          "description": "Fired continuously while dragging."
         },
         {
-          "name": "readOnly",
-          "type": "boolean",
+          "name": "side",
+          "type": "ResizableContainerSide",
           "required": false,
-          "defaultValue": "false",
-          "description": "Shows the tags without allowing new ones or removal."
+          "defaultValue": "ResizableContainerSide.Right",
+          "description": "Edge carrying the resize handle."
         },
         {
-          "name": "collapseTagOverflow",
-          "type": "boolean",
+          "name": "keyboardStep",
+          "type": "number",
           "required": false,
-          "defaultValue": "false",
-          "description": "Keep the tags on one line, replacing the ones that do not fit with a `+N` chip."
+          "defaultValue": "DEFAULT_KEYBOARD_STEP",
+          "description": "Width change per arrow key press."
         },
         {
           "name": "ariaLabel",
           "type": "string",
           "required": false,
-          "description": "Accessible name for the text input; use it when there is no visible label."
-        },
-        {
-          "name": "tagListLabel",
-          "type": "string",
-          "required": false,
-          "defaultValue": "'Tags'",
-          "description": "Accessible name of the tag list."
+          "defaultValue": "'Resize panel'",
+          "description": "Accessible name of the handle."
         },
         {
           "name": "className",
           "type": "string",
           "required": false,
-          "description": "Additional CSS classes for the outer container."
-        },
-        {
-          "name": "fieldClassName",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes for the field itself."
+          "description": "Additional CSS classes for the inner content wrapper."
         },
         {
-          "name": "tagClassName",
+          "name": "resizeHandlerClassName",
           "type": "string",
           "required": false,
-          "description": "Additional CSS classes applied to every tag."
+          "description": "Additional CSS classes for the resize handle."
         },
         {
-          "name": "onChange",
-          "type": "(tags: string[]) => void",
+          "name": "resizeHandler",
+          "type": "ReactNode",
           "required": false,
-          "description": "Called with the new list whenever a tag is added or removed."
+          "description": "Custom node rendered inside the handle."
         }
       ],
       "examples": [
-        "const [tags, setTags] = useState<string[]>(['React']);\n\n<TagInput\n  id=\"skills\"\n  labelProps={{ label: 'Skills' }}\n  placeholder=\"Add a skill\"\n  caption=\"Press Enter or comma to add\"\n  value={tags}\n  onChange={setTags}\n/>"
+        "<ResizableContainer minWidth={180} maxWidth={520} defaultWidth={260}>\n  <Sidebar />\n</ResizableContainer>\n\n<ResizableContainer\n  minWidth={180}\n  maxWidth={520}\n  width={sidebarWidth}\n  onResizeStop={setSidebarWidth}\n>\n  <Sidebar />\n</ResizableContainer>"
       ],
-      "sourceFile": "components/New/TagInput/TagInput.tsx"
+      "sourceFile": "components/New/ResizableContainer/ResizableContainer.tsx"
     },
     {
-      "name": "Search",
+      "name": "ConditionalResizableContainer",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A search field with a leading magnifier and a clear button, built on .\naliases: SearchField|QueryInput|SearchBox\nDesign system 2.0\n\nFully controlled: it renders exactly the `value` it is given and reports every\nedit through `onChange`, which receives `undefined` for an empty field. The\nclear button appears only while there is something to clear, and returns focus\nto the input once pressed so keyboard users are not dropped to the page body.\n\n`type` and both icon slots are owned by this component; every other\n prop is passed through.",
+      "description": "Renders its children inside a  only while `enabled`.\naliases: OptionalResize|ConditionalPanel\nDesign system 2.0\n\nWhen `enabled` is false the children are rendered on their own, with no\nwrapper element and no resize behaviour — useful for a panel that is only\nresizable while it is expanded. Every other prop is passed straight through;\nsee  for controlled and uncontrolled sizing, sides\nand callbacks.",
       "props": [
         {
-          "name": "withoutBorder",
+          "name": "enabled",
           "type": "boolean",
           "required": false,
-          "defaultValue": "false",
-          "description": "Renders the field without its border and background"
-        },
-        {
-          "name": "clearLabel",
-          "type": "string",
-          "required": false,
-          "defaultValue": "'Clear search'",
-          "description": "Accessible name of the clear button"
+          "defaultValue": "true",
+          "description": "Whether resizing is enabled."
         }
       ],
       "examples": [
-        "<Search\n  id=\"search\"\n  value={query}\n  placeholder=\"Search\"\n  onChange={setQuery}\n/>"
+        "<ConditionalResizableContainer\n  enabled={isExpanded}\n  minWidth={180}\n  maxWidth={520}\n  defaultWidth={260}\n>\n  <Sidebar />\n</ConditionalResizableContainer>"
       ],
-      "sourceFile": "components/New/Search/Search.tsx"
+      "sourceFile": "components/New/ResizableContainer/ConditionalResizableContainer.tsx"
     },
     {
       "name": "DialCaptionText",
@@ -2489,7 +3569,7 @@
       "name": "DialAnalyticsCard",
       "category": "Analytics",
       "generation": "1.0",
-      "description": "A simple analytics summary card that displays a single metric as a title,\na prominent value, and an optional description.\naliases: MetricCard|StatCard|KpiCard\nDesign system 1.0\n\nTwo visual variants are available via the  enum:\n- `Default` — `bg-layer-3`, large `dial-display2-text` value, supports a description.\n- `Compact` — denser `bg-layer-2` card with a `dial-body-semi-text` value and no\n  description (the `description` prop is ignored in this variant).\n\n**Compare mode** — pass `compareValues` to split the value area 50/50 between two\nmetrics, each with its own sub-title. Pair with `delta` to show a change badge next\nto the card title, and `deltaUnit` for a suffix such as `\"s\"`.",
+      "description": "A simple analytics summary card that displays a single metric as a title,\na prominent value, and an optional description.\naliases: MetricCard|StatCard|KpiCard\nDesign system 1.0\n\nTwo visual variants are available via the  enum:\n- `Default` — `bg-layer-3`, large `dial-display2-text` value, supports a description.\n- `Compact` — denser `bg-layer-2` card with a `dial-body-semi-text` value and no\n  description (the `description` prop is ignored in this variant).\n\n**Compare mode** — pass `compareValues` to split the value area 50/50 between two\nmetrics, each with its own sub-title. Long sub-titles truncate to a single line and\nshow the full text in a tooltip. Pair with `delta` to show a change badge next\nto the card title, and `deltaUnit` for a suffix such as `\"s\"`.",
       "props": [
         {
           "name": "title",
@@ -2802,7 +3882,7 @@
       "name": "DialAnalyticsHistogram",
       "category": "Analytics",
       "generation": "1.0",
-      "description": "A histogram that distributes `values` across the bands of a color map and draws a\ncolumn per band. Each column's height is relative to the most populated band; empty\ncolumns are outlined, populated columns are filled with their band color. A baseline\nseparates the columns from the interval labels, and hovering a column reveals a\ntooltip with its share of the total.\naliases: Distribution|ColumnChart|FrequencyChart\nDesign system 1.0",
+      "description": "A histogram that distributes `values` across the bands of a color map and draws a\ncolumn per band. Each column's height is relative to the Y-axis max (an even\nceiling of the dataset size — the \"out of N\" in the tooltip). Empty columns\nare outlined, populated columns are filled with their band color. A left\nY-axis (count) and horizontal grid lines provide scale; interval labels run\nalong the bottom. Hovering a column reveals a tooltip with its share of the\ntotal.\naliases: Distribution|ColumnChart|FrequencyChart\nDesign system 1.0",
       "props": [
         {
           "name": "title",
@@ -3200,7 +4280,8 @@
       "examples": [
         "<DialCheckbox\n  id=\"checkbox\"\n  label=\"Dial Checkbox\"\n  checked={true}\n  disabled={false}\n  onChange={(value) => console.log(value)}\n/>"
       ],
-      "sourceFile": "components/Checkbox/Checkbox.tsx"
+      "sourceFile": "components/Checkbox/Checkbox.tsx",
+      "supersededBy": "Checkbox"
     },
     {
       "name": "DialSteps",
@@ -3448,7 +4529,8 @@
       "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/>"
       ],
-      "sourceFile": "components/RadioGroup/RadioGroup.tsx"
+      "sourceFile": "components/RadioGroup/RadioGroup.tsx",
+      "supersededBy": "RadioGroup"
     },
     {
       "name": "DialSlider",
@@ -3542,7 +4624,8 @@
       "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/>"
       ],
-      "sourceFile": "components/Slider/Slider.tsx"
+      "sourceFile": "components/Slider/Slider.tsx",
+      "supersededBy": "Slider"
     },
     {
       "name": "DialNoDataContent",
@@ -3665,7 +4748,8 @@
       "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>"
       ],
-      "sourceFile": "components/CollapsibleSidebar/CollapsibleSidebar.tsx"
+      "sourceFile": "components/CollapsibleSidebar/CollapsibleSidebar.tsx",
+      "supersededBy": "CollapsibleSidebar"
     },
     {
       "name": "DialLabelledText",
@@ -3807,7 +4891,8 @@
       "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 />"
       ],
-      "sourceFile": "components/EllipsisTooltip/EllipsisTooltip.tsx"
+      "sourceFile": "components/EllipsisTooltip/EllipsisTooltip.tsx",
+      "supersededBy": "EllipsisTooltip"
     },
     {
       "name": "DialDraggableItem",
@@ -4259,7 +5344,8 @@
         }
       ],
       "examples": [],
-      "sourceFile": "components/ResizableContainer/ResizableContainer.tsx"
+      "sourceFile": "components/ResizableContainer/ResizableContainer.tsx",
+      "supersededBy": "ResizableContainer"
     },
     {
       "name": "DialConditionalResizableContainer",
@@ -4278,7 +5364,8 @@
       "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"
+      "sourceFile": "components/ResizableContainer/ConditionalResizableContainer.tsx",
+      "supersededBy": "ConditionalResizableContainer"
     },
     {
       "name": "DialGrid",
@@ -5106,7 +6193,8 @@
       "examples": [
         "<DialTooltip tooltip=\"This is helpful information\">\n  <button>Hover me</button>\n</DialTooltip>"
       ],
-      "sourceFile": "components/Tooltip/Tooltip.tsx"
+      "sourceFile": "components/Tooltip/Tooltip.tsx",
+      "supersededBy": "Tooltip"
     },
     {
       "name": "DialTooltipContainer",
@@ -5115,7 +6203,8 @@
       "description": "The container component that provides tooltip context and state management\nDesign system 1.0",
       "props": [],
       "examples": [],
-      "sourceFile": "components/Tooltip/TooltipContainer.tsx"
+      "sourceFile": "components/Tooltip/TooltipContainer.tsx",
+      "supersededBy": "TooltipContainer"
     },
     {
       "name": "DialTooltipContent",
@@ -5124,7 +6213,8 @@
       "description": "The content area of a tooltip that displays the tooltip information\nDesign system 1.0",
       "props": [],
       "examples": [],
-      "sourceFile": "components/Tooltip/TooltipContent.tsx"
+      "sourceFile": "components/Tooltip/TooltipContent.tsx",
+      "supersededBy": "TooltipContent"
     },
     {
       "name": "DialTooltipTrigger",
@@ -5133,7 +6223,8 @@
       "description": "The trigger element for a tooltip that can be clicked or hovered\nDesign system 1.0",
       "props": [],
       "examples": [],
-      "sourceFile": "components/Tooltip/TooltipTrigger.tsx"
+      "sourceFile": "components/Tooltip/TooltipTrigger.tsx",
+      "supersededBy": "TooltipTrigger"
     },
     {
       "name": "DialSwitch",
@@ -5230,7 +6321,8 @@
       "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"
+      "sourceFile": "components/SegmentedControl/SegmentedControl.tsx",
+      "supersededBy": "SegmentedControl"
     },
     {
       "name": "DialPopup",
@@ -5441,7 +6533,8 @@
       "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"
+      "sourceFile": "components/RadioGroupPopupField/RadioGroupPopupField.tsx",
+      "supersededBy": "RadioGroupPopupField"
     },
     {
       "name": "DialFormPopup",
@@ -8167,6 +9260,14 @@
           "name": "danger?",
           "value": "boolean"
         },
+        {
+          "name": "selectable?",
+          "value": "boolean"
+        },
+        {
+          "name": "checked?",
+          "value": "boolean"
+        },
         {
           "name": "type?",
           "value": "DropdownItemType"
@@ -8685,6 +9786,10 @@
         {
           "name": "Loading",
           "value": "'loading'"
+        },
+        {
+          "name": "General",
+          "value": "'general'"
         }
       ],
       "sourceFile": "types/notification.ts"
@@ -8733,6 +9838,64 @@
       "sourceFile": "components/New/Calendar/Calendar.tsx",
       "typeBody": "Date | string | null"
     },
+    {
+      "name": "RadioGroupItem",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "value",
+          "value": "string"
+        },
+        {
+          "name": "label?",
+          "value": "ReactNode"
+        },
+        {
+          "name": "caption?",
+          "value": "string"
+        },
+        {
+          "name": "content?",
+          "value": "ReactNode"
+        },
+        {
+          "name": "disabled?",
+          "value": "boolean"
+        },
+        {
+          "name": "'aria-label'?",
+          "value": "string"
+        }
+      ],
+      "sourceFile": "components/New/RadioGroup/RadioGroup.tsx"
+    },
+    {
+      "name": "SegmentedControlItem",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "value",
+          "value": "T"
+        },
+        {
+          "name": "label?",
+          "value": "ReactNode"
+        },
+        {
+          "name": "icon?",
+          "value": "ReactNode"
+        },
+        {
+          "name": "disabled?",
+          "value": "boolean"
+        },
+        {
+          "name": "'aria-label'?",
+          "value": "string"
+        }
+      ],
+      "sourceFile": "components/New/SegmentedControl/SegmentedControl.tsx"
+    },
     {
       "name": "TabItem",
       "kind": "interface",
@@ -8756,6 +9919,71 @@
       ],
       "sourceFile": "components/New/Tabs/Tabs.tsx",
       "description": "A single tab entry rendered by ."
+    },
+    {
+      "name": "TagAppearance",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Outlined",
+          "value": "'outlined'"
+        },
+        {
+          "name": "Selectable",
+          "value": "'selectable'"
+        }
+      ],
+      "sourceFile": "types/tag.ts"
+    },
+    {
+      "name": "TooltipContainerOptions",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "initialOpen?",
+          "value": "boolean"
+        },
+        {
+          "name": "placement?",
+          "value": "TooltipPlacement"
+        },
+        {
+          "name": "isTriggerClickable?",
+          "value": "boolean"
+        },
+        {
+          "name": "open?",
+          "value": "boolean"
+        },
+        {
+          "name": "onOpenChange?",
+          "value": "(open: boolean) => void"
+        }
+      ],
+      "sourceFile": "components/New/Tooltip/TooltipContext.tsx"
+    },
+    {
+      "name": "TooltipPlacement",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Top",
+          "value": "'top'"
+        },
+        {
+          "name": "Right",
+          "value": "'right'"
+        },
+        {
+          "name": "Bottom",
+          "value": "'bottom'"
+        },
+        {
+          "name": "Left",
+          "value": "'left'"
+        }
+      ],
+      "sourceFile": "types/tooltip.ts"
     }
   ],
   "hooks": [