@epam/ai-dial-ui-kit 0.9.0-rc.8 → 0.9.0

package/dist/components-manifest.json

@@ -0,0 +1,4732 @@
+{
+  "version": "0.9.0",
+  "generatedAt": "2026-04-29T08:28:44.352Z",
+  "kit": {
+    "name": "@epam/ai-dial-ui-kit",
+    "description": "A modern UI kit for building AI DIAL interfaces with React",
+    "installation": "npm install @epam/ai-dial-ui-kit",
+    "cssImport": "import '@epam/ai-dial-ui-kit/styles.css'",
+    "peerDependencies": {
+      "@floating-ui/react": "^0.27.16",
+      "@modelcontextprotocol/sdk": "^1.12.0",
+      "@monaco-editor/react": "^4.7.0",
+      "@tabler/icons-react": "^3.36.1",
+      "@uiw/react-markdown-preview": "^5.1.5",
+      "@uiw/react-md-editor": "^4.0.11",
+      "classnames": "^2.5.1",
+      "monaco-editor": "^0.52.2",
+      "react": "^19.1.0",
+      "react-dom": "^19.1.0"
+    },
+    "setupNotes": "## Next.js Integration\n1. Install the package and peer dependencies that are not currently in your project\n``` bash\nnpm install @epam/ai-dial-ui-kit\nnpm install react react-dom  @tabler/icons-react classnames\nnpm install @floating-ui/react monaco-editor @monaco-editor/react\n```\n\n2. Import style in the root layout of the project:\n\n```tsx\n// app/layout.tsx\nimport \"@epam/ai-dial-ui-kit/styles.css\";\n```\n\n3. Usage example\n\n```tsx\n// app/page.tsx\n\"use client\";\nimport { DialPrimaryButton } from \"@epam/ai-dial-ui-kit\";\n\nexport default function Home() {\n  return (\n    <div className=\"w-full h-full flex flex-col gap-3 items-center justify-center\">\n      <h1>Test library</h1>\n      <DialPrimaryButton onClick={() => alert('Hello AI DIAL!')} />\n    </div>\n  );\n}\n```\nSee \"🎨 Theming & Customization\" section in README."
+  },
+  "styles": "# Typography CSS Utility Classes\n\n## Design-system-compliant classes (`dial-*-text`)\n\nUse these by default. They follow the design system type scale.\n\n| Class                   | Weight   | Size / Line-height      |\n| ----------------------- | -------- | ----------------------- |\n| `.dial-display1-text`   | semibold | 32px / 48px             |\n| `.dial-display2-text`   | semibold | 28px / 40px             |\n| `.dial-h1-text`         | semibold | 22px / 32px             |\n| `.dial-h2-text`         | semibold | 20px / 28px             |\n| `.dial-h3-text`         | semibold | 18px / 26px             |\n| `.dial-body-text`       | normal   | 16px / 24px             |\n| `.dial-body-semi-text`  | semibold | 16px / 24px             |\n| `.dial-small-text`      | normal   | 14px / 20px             |\n| `.dial-small-semi-text` | semibold | 14px / 20px             |\n| `.dial-tiny-text`       | normal   | 12px / 16px             |\n| `.dial-tiny-semi-text`  | semibold | 12px / 16px             |\n| `.dial-caption-text`    | normal   | 10px / 12px             |\n| `.dial-code-text`       | normal   | 14px / 20px (monospace) |\n\n## Legacy classes (avoid in new code)\n\nClasses like `dial-h1`, `dial-h2`, `dial-body`, `dial-small*`, `dial-tiny*`, `dial-caption` are legacy. They can be used in legacy projects if user explicidly specify they need legacy typography.\n\n## Raw SCSS source\n",
+  "theming": "# Theming & CSS Variable Tokens\n\nAI DIAL UI Kit uses CSS custom properties (variables) for theming.\nDark and light themes are switched by setting different values for these variables on `:root` or a theme wrapper element.\n\n## Usage in Tailwind\n\nThe Tailwind config maps CSS variables to utility classes.\nUse these classes in your components:\n\n```tsx\n// Backgrounds\n<div className=\"bg-layer-0\" />   // darkest background\n<div className=\"bg-layer-1\" />   // main content area\n<div className=\"bg-layer-2\" />   // elevated panels\n\n// Text\n<span className=\"text-primary\" />    // main text color\n<span className=\"text-secondary\" />  // muted text\n<span className=\"text-error\" />      // error state\n\n// Borders\n<div className=\"border border-primary\" />  // standard border\n<div className=\"border border-error\" />    // error border\n```\n\n## Override CSS Variables\n\n```css\n:root {\n  --bg-layer-0: #000000;\n  --bg-layer-1: #0c101d;\n  --bg-layer-2: #161b2d;\n  --bg-layer-3: #1d2439;\n  --text-primary: #eef1f7;\n  --text-secondary: #9fa6bd;\n  --text-error: #f76464;\n  --stroke-primary: #696e7c;\n  --controls-bg-accent-primary: #3664e2;\n  /* ... see tailwind.config.js for full list */\n}\n```\n\n## Token Reference\n\n\n### backgroundsColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-0` | `var(--bg-layer-0)` | `#000000` |\n| `layer-1` | `var(--bg-layer-1)` | `#0C101D` |\n| `layer-2` | `var(--bg-layer-2)` | `#161B2D` |\n| `layer-3` | `var(--bg-layer-3)` | `#1D2439` |\n| `layer-4` | `var(--bg-layer-4)` | `#242C42` |\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| `model-icon` | `var(--bg-model-icon)` | `#FFFFFF` |\n| `accent-primary` | `var(--bg-accent-primary)` | `#5C8DEA` |\n| `accent-secondary` | `var(--bg-accent-secondary)` | `#37BABC` |\n| `accent-tertiary` | `var(--bg-accent-tertiary)` | `#A972FF` |\n| `red-400` | `var(--bg-red-400)` | `#F76464` |\n| `orange-400` | `var(--bg-orange-400)` | `#D97C27` |\n| `orange-800` | `var(--bg-orange-800)` | `#B25500` |\n\n### controlsBgColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `controls-accent-primary` | `var(--controls-bg-accent-primary)` | `#3664E2` |\n| `controls-accent-primary-hover` | `var(--controls-bg-accent-primary-hover)` | `#2656D9` |\n| `controls-accent-primary-active` | `var(--controls-bg-accent-primary-active)` | `#124ACE` |\n| `controls-accent-primary-alpha-active` | `var(--controls-bg-accent-primary-alpha-active)` | `#7DA4FF4D` |\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)` | `#CC4545` |\n| `controls-error-hover` | `var(--controls-bg-error-hover)` | `#BF3939` |\n| `controls-error-active` | `var(--controls-bg-error-active)` | `#AE2F2F` |\n| `controls-error-alpha-hover` | `var(--controls-bg-alpha-hover)` | `#F764642E` |\n| `controls-error-alpha-active` | `var(--controls-bg-error-alpha-active)` | `#F764645C` |\n| `controls-disable-accent` | `var(--controls-bg-disable-accent)` | `#696E7C` |\n| `controls-disable` | `var(--controls-bg-disable)` | `#242C42` |\n| `controls-neutral-hover` | `var(--controls-bg-neutral-hover)` | `#242C42` |\n| `controls-neutral-active` | `var(--controls-bg-neutral-active)` | `#575F73` |\n| `controls-accent-success-alpha-hover` | `var(--controls-bg-accent-success-alpha-hover)` | `#37BABC2E` |\n| `controls-accent-success-alpha-active` | `var(--controls-bg-accent-success-alpha-active)` | `#37BABC5C` |\n| `controls-accent` | `var(--controls-bg-accent)` | `#5C8DEA` |\n| `controls-accent-hover` | `var(--controls-bg-accent-hover)` | `#4878D2` |\n| `controls-accent-alpha` | `var(--controls-bg-accent-alpha)` | `#5C8DEA2B` |\n| `controls-enable-primary` | `var(--controls-enable-primary)` | `#FCFCFC` |\n\n### borderColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--stroke-accent-primary)` | `#7DA4FF` |\n| `accent-secondary` | `var(--stroke-accent-secondary)` | `#37BABC` |\n| `accent-tertiary` | `var(--stroke-accent-tertiary)` | `#A972FF` |\n| `controls-accent` | `var(--controls-bg-accent)` | `#5C8DEA` |\n| `accent-primary-hover` | `var(--stroke-accent-primary-hover)` | `#4878d2` |\n| `red-900` | `var(--red-900)` | `#402027` |\n\n### textColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `warning-icon` | `var(--text-warning-icon)` | `#EEC840` |\n| `accent-primary` | `var(--text-accent-primary)` | `#7DA4FF` |\n| `accent-secondary` | `var(--text-accent-secondary)` | `#37BABC` |\n| `accent-tertiary` | `var(--text-accent-tertiary)` | `#A972FF` |\n| `controls-disable` | `var(--controls-text-disable)` | `#0C101D` |\n\n### controlsTextColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `controls-permanent` | `var(--controls-text-permanent)` | `#FCFCFC` |\n| `controls-accent-disable` | `var(--controls-text-accent-disable)` | `#242C42` |\n| `controls-primary-disable` | `var(--controls-text-primary-disable)` | `#7C8293` |\n| `controls-secondary-disable` | `var(--controls-text-secondary-disable)` | `#575F73` |\n| `controls-neutral` | `var(--controls-text-neutral)` | `#FCFCFC` |\n| `controls-accent-primary-hover` | `var(--controls-text-accent-primary-hover)` | `#3664E2` |\n| `controls-accent-primary-active` | `var(--controls-text-accent-primary-active)` | `#124ACE` |\n| `controls-primary` | `var(--controls-primary)` | `#FCFCFC` |\n| `controls-disable` | `var(--controls-text-disable)` | `#575F73` |",
+  "components": [
+    {
+      "name": "DialCaptionText",
+      "category": "Elements",
+      "description": "A component for displaying error messages with consistent styling\naliases: HelperText|ValidationText",
+      "props": [
+        {
+          "name": "text",
+          "type": "string",
+          "required": false,
+          "description": "The text to display. If undefined or empty, nothing is rendered"
+        },
+        {
+          "name": "variant",
+          "type": "CaptionType",
+          "required": false,
+          "defaultValue": "CaptionType.Description",
+          "description": "The variant of the caption text, e.g., error or description."
+        }
+      ],
+      "examples": [
+        "<DialCaptionText text=\"This field is required\" variant={CaptionType.Error} />"
+      ],
+      "sourceFile": "components/CaptionText/CaptionText.tsx"
+    },
+    {
+      "name": "DialErrorText",
+      "category": "Elements",
+      "description": "",
+      "props": [],
+      "examples": [],
+      "sourceFile": "components/CaptionText/CaptionText.tsx"
+    },
+    {
+      "name": "DialLabel",
+      "category": "Elements",
+      "description": "A label component\naliases: FormLabel|RequiredIndicator",
+      "props": [
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": false,
+          "description": "The label text to display for the label"
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the field is required"
+        },
+        {
+          "name": "caption",
+          "type": "string",
+          "required": false,
+          "description": "Additional caption text, displayed below the label."
+        }
+      ],
+      "examples": [
+        "// Basic  label\n<DialLabel htmlFor=\"email-input\" label=\"Email Address\" />"
+      ],
+      "sourceFile": "components/Label/Label.tsx"
+    },
+    {
+      "name": "DialIcon",
+      "category": "Data Display",
+      "description": "A wrapper component for rendering icons with consistent styling\naliases: IconRenderer|SVGWrapper",
+      "props": [
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": false,
+          "description": "The icon element to render"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes to apply to the icon wrapper"
+        }
+      ],
+      "examples": [
+        "<DialIcon icon={<SearchIcon />} />\n<DialIcon icon={<CloseIcon />} className=\"text-primary\" />"
+      ],
+      "sourceFile": "components/Icon/Icon.tsx"
+    },
+    {
+      "name": "DialAlert",
+      "category": "Feedback",
+      "description": "A contextual feedback component for displaying important messages.\naliases: Notification|StatusBanner\n\nRenders a colored container with an icon, message text, and an optional\nclose button.",
+      "props": [
+        {
+          "name": "variant",
+          "type": "AlertVariant",
+          "required": false,
+          "defaultValue": "AlertVariant.Info",
+          "description": "Defines the visual style and icon of the alert"
+        },
+        {
+          "name": "message",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Message text to display inside the alert"
+        },
+        {
+          "name": "closable",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the alert has a close button"
+        },
+        {
+          "name": "iconSize",
+          "type": "number",
+          "required": false,
+          "defaultValue": "24",
+          "description": "Size of the icon displayed in the alert"
+        },
+        {
+          "name": "iconStroke",
+          "type": "number",
+          "required": false,
+          "defaultValue": "2",
+          "description": "Stroke width of the icon displayed in the alert"
+        },
+        {
+          "name": "onClose",
+          "type": "(e: MouseEvent<HTMLButtonElement>) => void",
+          "required": false,
+          "description": "Callback fired when the close button is clicked"
+        }
+      ],
+      "examples": [
+        "<DialAlert\n  variant={AlertVariant.Info}\n  message=\"This is an info alert.\"\n/>\n\n<DialAlert\n  variant={AlertVariant.Success}\n  message=\"Changes saved successfully.\"\n/>\n\n<DialAlert\n  variant={AlertVariant.Error}\n  closable\n  message=\"Something went wrong.\"\n  onClose={(e) => console.log('closed', e)}\n/>\n\n<DialAlert\n  variant={AlertVariant.Warning}\n  message=\"Custom alert\"\n  aria-live=\"polite\"\n  id=\"warning-alert\"\n/>"
+      ],
+      "sourceFile": "components/Alert/Alert.tsx"
+    },
+    {
+      "name": "DialLoader",
+      "category": "Feedback",
+      "description": "A simple loading spinner component.\naliases: LoadingSpinner|ProgressSpinner\n\nRenders a spinning SVG with optional full-width container.",
+      "props": [
+        {
+          "name": "size",
+          "type": "number",
+          "required": false,
+          "defaultValue": "18",
+          "description": "Icon size in px"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for the container"
+        },
+        {
+          "name": "iconClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for the SVG icon"
+        },
+        {
+          "name": "fullWidth",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Stretch to full width/height of container"
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Loading'",
+          "description": "Accessible label for screen readers"
+        }
+      ],
+      "examples": [
+        "// Full width (default)\n<DialLoader />\n\n// Inline (content width)\n<DialLoader fullWidth={false} />\n\n// Custom size and classes\n<DialLoader size={24} iconClassName=\"text-accent-primary\" />"
+      ],
+      "sourceFile": "components/Loader/Loader.tsx"
+    },
+    {
+      "name": "DialCheckbox",
+      "category": "Form",
+      "description": "A Checkbox component with styling options\naliases: ToggleCheckbox|MultiSelectOption",
+      "props": [
+        {
+          "name": "id",
+          "type": "string",
+          "required": true,
+          "description": "Unique identifier for the checkbox element"
+        },
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": false,
+          "description": "The label text for the field"
+        },
+        {
+          "name": "checked",
+          "type": "boolean",
+          "required": true,
+          "description": "The current value of the checkbox"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the checkbox is disabled"
+        },
+        {
+          "name": "indeterminate",
+          "type": "boolean",
+          "required": false,
+          "description": "indeterminate state"
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible label for screen readers when no title is provided"
+        },
+        {
+          "name": "onChange",
+          "type": "(value?: boolean, id?: string) => void",
+          "required": false,
+          "description": "Callback function called when the checkbox value changes"
+        }
+      ],
+      "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"
+    },
+    {
+      "name": "DialSteps",
+      "category": "Navigation",
+      "description": "Props for the DialSteps component, which renders a multi-step navigation UI.\naliases: StepWizard|ProgressSteps",
+      "props": [
+        {
+          "name": "steps",
+          "type": "Step[]",
+          "required": true,
+          "description": "Array of step objects to display"
+        },
+        {
+          "name": "currentStep",
+          "type": "string",
+          "required": true,
+          "description": "The id of the currently active step"
+        },
+        {
+          "name": "onChangeStep",
+          "type": "(step: string) => void",
+          "required": true,
+          "description": "Callback to set the current step by id"
+        }
+      ],
+      "examples": [
+        "<DialSteps\n  steps={[{ id: 'step1', label: 'Step 1', status: StepStatus.VALID }, { id: 'step2', label: 'Step 2', status: StepStatus.ERROR }]}\n  currentStep=\"step1\"\n  onChangeStep={(step) => console.log(step)}\n/>"
+      ],
+      "sourceFile": "components/Steps/Steps.tsx"
+    },
+    {
+      "name": "DialRadioButton",
+      "category": "Free",
+      "description": "A stylized, accessible radio input with optional description.\naliases: ChoiceOption|RadioInput\n\nRenders a native `<input type=\"radio\" />` paired with a label. When `checked`\nand `description` are provided, a supporting text block appears under the control.",
+      "props": [
+        {
+          "name": "name",
+          "type": "string",
+          "required": true,
+          "description": "Radio group name"
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "required": true,
+          "description": "Radio value emitted on change"
+        },
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Visible label text"
+        },
+        {
+          "name": "caption",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Caption text describing label"
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Supporting text shown when checked"
+        },
+        {
+          "name": "checked",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Controlled checked state"
+        },
+        {
+          "name": "inputId",
+          "type": "string",
+          "required": true,
+          "description": "ID associated with the label"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes applied to the input element"
+        },
+        {
+          "name": "labelClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes applied to the label element"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Disabled state of the control"
+        },
+        {
+          "name": "onChange",
+          "type": "(value: string) => void",
+          "required": false,
+          "description": "Callback fired with `value` when the radio is changed"
+        },
+        {
+          "name": "descriptionClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes applied to the description block"
+        }
+      ],
+      "examples": [
+        "<DialRadioButton\n  name=\"plan\"\n  value=\"pro\"\n  inputId=\"radio-pro\"\n  title=\"Pro plan\"\n  description=\"Includes all advanced features.\"\n  checked\n  onChange={(v) => console.log('changed', v)}\n/>"
+      ],
+      "sourceFile": "components/RadioButton/RadioButton.tsx"
+    },
+    {
+      "name": "DialRadioGroup",
+      "category": "Form",
+      "description": "Groups multiple `DialRadio` options and renders custom content for the active option.\naliases: SelectionGroup|OptionGroup\n\nUses `DialField` as the field label and a container with `role=\"radiogroup\"`.\nContent provided in `radioButtons[].content` is shown under the currently active radio.",
+      "props": [
+        {
+          "name": "fieldTitle",
+          "type": "string",
+          "required": false,
+          "description": "Optional label rendered by `DialField`"
+        },
+        {
+          "name": "elementId",
+          "type": "string",
+          "required": true,
+          "description": "Name for the underlying radio group; also used for input `name`"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Disables all child radios when set"
+        },
+        {
+          "name": "radioButtons",
+          "type": "RadioButtonWithContent[]",
+          "required": true,
+          "description": "Array of options with ids, labels, and optional content"
+        },
+        {
+          "name": "activeRadioButton",
+          "type": "string",
+          "required": true,
+          "description": "The id of the currently selected radio"
+        },
+        {
+          "name": "orientation",
+          "type": "RadioGroupOrientation",
+          "required": true,
+          "description": "Layout direction of radios: row or column"
+        },
+        {
+          "name": "onChange",
+          "type": "(radioId: string) => void",
+          "required": true,
+          "description": "Callback fired with the selected radio id"
+        },
+        {
+          "name": "radioClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes applied to each radio input"
+        },
+        {
+          "name": "groupLabelClassName",
+          "type": "string",
+          "required": false,
+          "description": "Optional classes applied to the group label. If not provided, `labelClassName` will be used."
+        },
+        {
+          "name": "labelClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes applied to each radio label"
+        },
+        {
+          "name": "containerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes applied to the outer container"
+        },
+        {
+          "name": "formItemChildrenClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes applied to the DialFormItem's children container"
+        },
+        {
+          "name": "selectedItemClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes applied to the selected option's content container"
+        },
+        {
+          "name": "selectedLabelClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes applied to the selected option's label"
+        },
+        {
+          "name": "radioGroupClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes applied to the radio group container"
+        },
+        {
+          "name": "inputContainerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes applied to each radio input's container"
+        },
+        {
+          "name": "selectedInputContainerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes applied to the selected radio input's container"
+        }
+      ],
+      "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"
+    },
+    {
+      "name": "DialNoDataContent",
+      "category": "Feedback",
+      "description": "A component for displaying a message and icon when there is no data to show.\naliases: EmptyState|NoResults",
+      "props": [
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Custom icon to display (defaults to clipboard icon)"
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "required": true,
+          "description": "The message to display when no data is present"
+        },
+        {
+          "name": "description",
+          "type": "string",
+          "required": false,
+          "description": "The description to display when no data is present"
+        },
+        {
+          "name": "containerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the container"
+        },
+        {
+          "name": "titleClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the title text"
+        },
+        {
+          "name": "descriptionClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the description text"
+        }
+      ],
+      "examples": [
+        "<NoDataContent\n  emptyDataTitle=\"No results found\"\n  icon={<CustomIcon />}\n/>"
+      ],
+      "sourceFile": "components/NoDataContent/NoDataContent.tsx"
+    },
+    {
+      "name": "DialCollapsibleSidebar",
+      "category": "Navigation",
+      "description": "A collapsible horizontal bar component that allows toggling between an expanded and collapsed state.\naliases: ToggleSidebar|CollapsiblePanel\n\nIt supports customizable width, title, icons, additional buttons, and flexible styling options.",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "description": "The content to display inside the collapsible bar when expanded"
+        },
+        {
+          "name": "width",
+          "type": "number",
+          "required": false,
+          "defaultValue": "280",
+          "description": "The width of the bar when expanded"
+        },
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "required": true,
+          "description": "The title displayed when the bar is collapsed"
+        },
+        {
+          "name": "titleClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to the title element"
+        },
+        {
+          "name": "containerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to the container element"
+        },
+        {
+          "name": "iconSize",
+          "type": "number",
+          "required": false,
+          "defaultValue": "24",
+          "description": "The size of the toggle icons. Defaults to 32"
+        },
+        {
+          "name": "additionalButtons",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Additional buttons or elements displayed next to the toggle button when expanded"
+        },
+        {
+          "name": "iconStroke",
+          "type": "number",
+          "required": false,
+          "defaultValue": "1.5",
+          "description": "The stroke width of the toggle icons. Defaults to 1.5"
+        },
+        {
+          "name": "isOpened",
+          "type": "boolean",
+          "required": false,
+          "description": "When provided, the component becomes controlled by this value"
+        },
+        {
+          "name": "onToggle",
+          "type": "(nextOpened: boolean, e: MouseEvent<HTMLButtonElement>) => void",
+          "required": false,
+          "description": "Fired when user clicks the toggle in controlled mode, with the next state"
+        }
+      ],
+      "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"
+    },
+    {
+      "name": "DialLabelledText",
+      "category": "Data Display",
+      "description": "A label component for form fields with optional tooltip, content, and custom elements.\naliases: LabelValue|DisplayText",
+      "props": [
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": true,
+          "description": "The main label text for the field"
+        },
+        {
+          "name": "text",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional tooltip and secondary text"
+        },
+        {
+          "name": "tooltip",
+          "type": "string",
+          "required": false,
+          "description": "Optional tooltip different from main text"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Custom content to render instead of the default text/tooltip"
+        },
+        {
+          "name": "postfix",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Element to display after the text (e.g., an asterisk)"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the container element."
+        }
+      ],
+      "examples": [
+        "<DialLabelledText\n  label=\"Username\"\n  text=\"Enter your username\"\n  postfix={<span>*</span>}\n/>"
+      ],
+      "sourceFile": "components/LabelledText/LabelledText.tsx"
+    },
+    {
+      "name": "DialTag",
+      "category": "Data Display",
+      "description": "A small tag component used to display labeled items such as categories, filters, or selections.\naliases: Badge|Chip\n\nOptionally supports removal via a close button and multiple colors variants defined by .",
+      "props": [
+        {
+          "name": "tag",
+          "type": "string",
+          "required": true,
+          "description": "The text label displayed inside the tag."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Optional additional CSS classes applied to the tag container."
+        },
+        {
+          "name": "remove",
+          "type": "(event: MouseEvent<HTMLButtonElement>) => void",
+          "required": false,
+          "description": "Optional callback invoked when the remove button is clicked.\n   If not provided, the remove button will not be rendered."
+        },
+        {
+          "name": "variant",
+          "type": "TagVariant",
+          "required": false,
+          "defaultValue": "TagVariant.Default",
+          "description": "Visual style of the tag. Uses the  enum."
+        },
+        {
+          "name": "iconBefore",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional icon or element to display before the tag text."
+        },
+        {
+          "name": "bordered",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "When true, adds a border to the tag for better visibility on light backgrounds."
+        }
+      ],
+      "examples": [
+        "<DialTag\n  tag=\"React\"\n  variant={TagVariant.Default}\n  remove={() => console.log('Tag removed')}\n/>"
+      ],
+      "sourceFile": "components/Tag/Tag.tsx"
+    },
+    {
+      "name": "DialEllipsisTooltip",
+      "category": "Overlay",
+      "description": "Single-line text with CSS ellipsis that shows a tooltip **only when actually truncated**.\naliases: TruncatedText|TruncationTooltip\n\nIf the text fits, tooltip content is empty and the popup stays hidden.\n\nImportant: width must be finite for truncation.\nConsumers can override via `className`.\n\na11y: when truncated, the full text is exposed via `aria-label` on the reference node.",
+      "props": [
+        {
+          "name": "text",
+          "type": "ReactNode",
+          "required": true,
+          "description": "The text or node to display (truncated with ellipsis if too long)."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Optional additional CSS classes for the text container (e.g. to set width)."
+        },
+        {
+          "name": "contentClassName",
+          "type": "string",
+          "required": false,
+          "description": "Optional additional CSS classes for the tooltip content."
+        },
+        {
+          "name": "hideTooltip",
+          "type": "boolean",
+          "required": false,
+          "description": "If true, disables the tooltip even if text is truncated."
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "description": "Optional attribute for unique identification"
+        },
+        {
+          "name": "customTooltipContent",
+          "type": "ReactNode",
+          "required": false,
+          "description": "If provided, this content will be shown in the tooltip instead of the full text when truncated."
+        }
+      ],
+      "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"
+    },
+    {
+      "name": "DialDraggableItem",
+      "category": "Components",
+      "description": "A lightweight wrapper that makes its children sortable via drag-and-drop.\naliases: SortableItem|DragHandle\n\nRenders a row with a grab handle (left) and the provided content (right).\nIntegrates with `react-dnd` using a simple \"column\" drag type and delegates\nreordering logic to the provided `findItem` and `moveItem` callbacks.",
+      "props": [
+        {
+          "name": "id",
+          "type": "string",
+          "required": true,
+          "description": "Unique identifier of the draggable item"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Content rendered within the draggable row"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to the root container"
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Drag item'",
+          "description": "Accessible label for the handle"
+        },
+        {
+          "name": "onFind",
+          "type": "(field: string) => number",
+          "required": false,
+          "description": "Function to resolve an item's current index by id"
+        },
+        {
+          "name": "onMove",
+          "type": "(field: string, atIndex: number) => void",
+          "required": false,
+          "description": "Function to move an item (by id) to a target index"
+        }
+      ],
+      "examples": [
+        "<DialDraggableItem id=\"a\" findItem={find} moveItem={move}>\n  <span>Item A</span>\n</DialDraggableItem>"
+      ],
+      "sourceFile": "components/DraggableItem/DraggableItem.tsx"
+    },
+    {
+      "name": "DialFileIcon",
+      "category": "FileManager/components",
+      "description": "Renders a file-type icon based on a file extension.\naliases: ExtensionIcon|TypeIcon\n\nUses DialIcon to provide consistent icon wrapper styling.",
+      "props": [
+        {
+          "name": "extension",
+          "type": "string",
+          "required": false,
+          "description": "File extension string (with or without leading dot)"
+        },
+        {
+          "name": "size",
+          "type": "number",
+          "required": false,
+          "defaultValue": "BASE_ICON_PROPS.size",
+          "description": "Icon pixel size"
+        },
+        {
+          "name": "stroke",
+          "type": "number",
+          "required": false,
+          "defaultValue": "BASE_ICON_PROPS.stroke",
+          "description": "Tabler icon stroke width"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes on the container"
+        },
+        {
+          "name": "decorative",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the icon should be hidden from assistive technologies"
+        },
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Accessible label when not decorative; defaults to \"<EXT> file icon\""
+        },
+        {
+          "name": "indicator",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional indicator element to display alongside the icon"
+        }
+      ],
+      "examples": [
+        "<DialFileIcon extension=\".pdf\" />\n<DialFileIcon extension=\"tsx\" size={28} stroke={1.25} />\n<DialFileIcon extension=\"unknown\" decorative /> // decorative, hidden from AT"
+      ],
+      "sourceFile": "components/FileIcon/FileIcon.tsx"
+    },
+    {
+      "name": "DialFormItem",
+      "category": "Form",
+      "description": "A layout wrapper for form controls with label, helper text and error message.\naliases: FieldWrapper|FormControl\n\nUses `DialLabel` for the label and `DialErrorText` for consistent error styling.\nWires accessibility with:\n- `role=\"group\"`\n- `aria-labelledby` (when label is present)\n- `aria-describedby` (description and/or error ids)",
+      "props": [
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "description": "Unique identifier for the form control element (used for accessibility)"
+        },
+        {
+          "name": "labelVisuallyHidden",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether to visually hide the label (still accessible to screen readers, default: false)"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes to apply to the container div"
+        },
+        {
+          "name": "childrenClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes to apply to the children container div"
+        },
+        {
+          "name": "labelClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes to apply to the label element"
+        },
+        {
+          "name": "errorClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes to apply to the error message element"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "description": "The form control element(s) to render inside the DialFormItem"
+        },
+        {
+          "name": "value",
+          "type": "ReactNode",
+          "required": false,
+          "description": "The current value of the form control (for readonly mode)"
+        },
+        {
+          "name": "defaultEmptyText",
+          "type": "string",
+          "required": false,
+          "description": "Text to display when readonly and value is empty (default: \"None\")"
+        }
+      ],
+      "examples": [
+        "<DialFormItem elementId=\"transport\" label=\"Transport\" className=\"w-[320px]\">\n  <DialSelect\n    elementId=\"transport\"\n    value={transport}\n    options={transportOptions}\n    onChange={(val) => setTransport(val as ToolsetTransport)}\n  />\n</DialFormItem>\n\n// With description and error\n<DialFormItem\n  elementId=\"email\"\n  label=\"Email Address\"\n  description=\"We'll never share your email.\"\n  error=\"Please enter a valid email address.\"\n>\n  <DialInput\n    elementId=\"email\"\n    type=\"email\"\n    value={email}\n    onChange={(val) => setEmail(val as string)}\n    placeholder=\"name@company.com\"\n  />\n</DialFormItem>"
+      ],
+      "sourceFile": "components/FormItem/FormItem.tsx"
+    },
+    {
+      "name": "DialSharedEntityIndicator",
+      "category": "FileManager/components",
+      "description": "A compact icon-only indicator to denote a \"shared\" entity.\naliases: SharedIcon|AccessIndicator\n\nRenders a small arrow-up-right icon with token-based colors.",
+      "props": [
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": false,
+          "defaultValue": "'Shared entity'",
+          "description": "Accessible label for assistive tech"
+        },
+        {
+          "name": "size",
+          "type": "number",
+          "required": false,
+          "defaultValue": "14",
+          "description": "Pixel size for the icon"
+        },
+        {
+          "name": "stroke",
+          "type": "number",
+          "required": false,
+          "defaultValue": "1.5",
+          "description": "Stroke width for the icon"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional Tailwind classes applied to the icon"
+        },
+        {
+          "name": "containerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional Tailwind classes appended to the container"
+        },
+        {
+          "name": "sharedIndicatorTooltip",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Custom tooltip content, defaults to \"Shared\""
+        }
+      ],
+      "examples": [
+        "<DialSharedEntityIndicator />\n<DialSharedEntityIndicator size={12} label=\"Opens in new window\" />"
+      ],
+      "sourceFile": "components/SharedEntityIndicator/SharedEntityIndicator.tsx"
+    },
+    {
+      "name": "DialFileName",
+      "category": "FileManager/components",
+      "description": "Component to display a file name with a file icon and shared indicator.\naliases: FileDisplay|NameDisplay\n\nHandles long names with ellipsis and tooltip.\n\nIf `details` is provided (e.g., file size, date), the component switches to\na vertical layout and renders the extra information below the file name.",
+      "props": [
+        {
+          "name": "name",
+          "type": "string",
+          "required": true,
+          "description": "Full file name with or without extension."
+        },
+        {
+          "name": "fileExtension",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the root container."
+        },
+        {
+          "name": "shared",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the file is shared."
+        },
+        {
+          "name": "iconSize",
+          "type": "number",
+          "required": false,
+          "defaultValue": "BASE_ICON_SIZE",
+          "description": "Icon size in px. Default: BASE_ICON_SIZE."
+        },
+        {
+          "name": "details",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional metadata block displayed under the file name (e.g., size, modified date)."
+        },
+        {
+          "name": "sharedIndicatorClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the shared indicator."
+        },
+        {
+          "name": "sharedIndicatorTooltip",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Custom tooltip content for the shared indicator; defaults to \"Shared\""
+        },
+        {
+          "name": "hideTooltip",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false"
+        },
+        {
+          "name": "isInvalidName",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "If true, applies disabled styling to indicate the file name has invalid characters."
+        },
+        {
+          "name": "tooltipContent",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Custom tooltip content to show when the name is truncated; defaults to showing the full name."
+        }
+      ],
+      "examples": [
+        "// Without details\n<DialFileName name=\"Document.pdf\" />\n\n// With details (file size and updated date)\n<DialFileName\n  name=\"Document.pdf\"\n  details={<span className=\"text-secondary\">24 KB · Jul 20, 2025</span>}\n/>"
+      ],
+      "sourceFile": "components/FileName/FileName.tsx"
+    },
+    {
+      "name": "DialFolderName",
+      "category": "FileManager/components",
+      "description": "Component to display a folder name with a folder icon and shared indicator.\naliases: FolderDisplay|DirectoryName\n\nHandles long names with ellipsis and tooltip.",
+      "props": [
+        {
+          "name": "name",
+          "type": "string",
+          "required": true,
+          "description": "Folder name"
+        },
+        {
+          "name": "shared",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "If true, shows shared indicator. Default: false."
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "If true, shows loading state. Default: false."
+        },
+        {
+          "name": "iconSize",
+          "type": "number",
+          "required": false,
+          "defaultValue": "BASE_ICON_SIZE",
+          "description": "Icon size in px. Default: BASE_ICON_SIZE."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the root container"
+        },
+        {
+          "name": "sharedIndicatorClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the shared indicator"
+        },
+        {
+          "name": "sharedIndicatorTooltip",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Custom tooltip content for the shared indicator; defaults to \"Shared\""
+        },
+        {
+          "name": "hideTooltip",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "If true, disables the tooltip even if the name is truncated."
+        },
+        {
+          "name": "isInvalidName",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "If true, applies disabled styling to indicate the file name has invalid characters."
+        },
+        {
+          "name": "tooltipContent",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Custom tooltip content to show when the name is truncated; defaults to showing the full name."
+        }
+      ],
+      "examples": [
+        "<DialFolderName name=\"Organization\" />"
+      ],
+      "sourceFile": "components/FolderName/FolderName.tsx"
+    },
+    {
+      "name": "DialResizableContainer",
+      "category": "Components",
+      "description": "DialResizableContainer — A reusable resizable container\naliases: ResizePanel|SizableContainer\n\nsupporting both **controlled** and **uncontrolled** width modes.\n\nControlled Mode\n\nProvide `width` and optionally `onResizeStop`:\n```tsx\n<DialResizableContainer\n  width={sidebarWidth}\n  onResizeStop={(w) => setSidebarWidth(w)}\n  minWidth={180}\n  maxWidth={520}\n>\n  <Sidebar />\n</DialResizableContainer>\n```\n\nUncontrolled Mode\n\nOmit `width` entirely — the component manages its own width:\n```tsx\n<DialResizableContainer\n  defaultWidth={260}\n  minWidth={180}\n  maxWidth={520}\n>\n  <Sidebar />\n</DialResizableContainer>\n```\n\nFeatures:\n- Resize from left or right\n- Fully supports controlled & uncontrolled sizing\n- Custom resize handler (icon or any ReactNode)\n- Callback when resize stops (optional)\n- Smooth hover/drag visibility transitions",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Content placed inside the container."
+        },
+        {
+          "name": "minWidth",
+          "type": "number",
+          "required": true,
+          "description": "Minimum allowed width (px)."
+        },
+        {
+          "name": "maxWidth",
+          "type": "number",
+          "required": true,
+          "description": "Maximum allowed width (px)."
+        },
+        {
+          "name": "width",
+          "type": "number",
+          "required": false,
+          "description": "Controlled width. If omitted → uncontrolled mode."
+        },
+        {
+          "name": "defaultWidth",
+          "type": "number",
+          "required": true,
+          "description": "Initial width in uncontrolled mode."
+        },
+        {
+          "name": "onResizeStop",
+          "type": "(width: number) => void",
+          "required": false,
+          "description": "Optional callback fired when resize ends."
+        },
+        {
+          "name": "onResize",
+          "type": "(width: number) => void",
+          "required": false,
+          "description": "Optional callback fired continuously during resizing with current width."
+        },
+        {
+          "name": "side",
+          "type": "ResizableContainerSide",
+          "required": false,
+          "defaultValue": "ResizableContainerSide.Right",
+          "description": "Resize handle side."
+        },
+        {
+          "name": "resizeHandlerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Optional additional CSS classes."
+        },
+        {
+          "name": "resizeHandler",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional custom handler element."
+        }
+      ],
+      "examples": [],
+      "sourceFile": "components/ResizableContainer/ResizableContainer.tsx"
+    },
+    {
+      "name": "DialConditionalResizableContainer",
+      "category": "Components",
+      "description": "DialConditionalResizableContainer — A conditional wrapper around `DialResizableContainer`.\naliases: OptionalResize|ConditionalPanel\n\nThis component renders its children inside a resizable container only when `enabled` is true.\nWhen `enabled` is false, children are rendered directly without any resizable behavior.\n\nAll other props are the same as `DialResizableContainer`. See the documentation for\n`DialResizableContainer` for full details on usage, controlled/uncontrolled modes, sides, and callbacks.",
+      "props": [
+        {
+          "name": "enabled",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether resizing is enabled. When false, children are rendered directly."
+        }
+      ],
+      "examples": [
+        "<DialConditionalResizableContainer\n  enabled={!isCollapsed}\n  defaultWidth={260}\n  minWidth={180}\n  maxWidth={520}\n  onResize={(w) => console.log('Current width:', w)}\n  onResizeStop={(w) => setSidebarWidth(w)}\n>\n  <Sidebar />\n</DialConditionalResizableContainer>"
+      ],
+      "sourceFile": "components/ResizableContainer/ConditionalResizableContainer.tsx"
+    },
+    {
+      "name": "DialSkeleton",
+      "category": "Feedback",
+      "description": "DialSkeleton\naliases: PlaceholderUI|ShimmerLoader\n\nA placeholder component to show while content is loading.\nProvides various skeleton shapes and configurations.",
+      "props": [
+        {
+          "name": "active",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether to show the loading animation"
+        },
+        {
+          "name": "paragraph",
+          "type": "boolean | { rows?: number; width?: string | string[] }",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Show paragraph placeholder or configure its appearance"
+        },
+        {
+          "name": "avatar",
+          "type": "| boolean\n    | {\n        size?: number | DialSkeletonAvatarSize;\n        shape?: DialSkeletonAvatarShape;\n      }",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Show avatar placeholder or configure its appearance"
+        },
+        {
+          "name": "showTitle",
+          "type": "boolean | { width?: string }",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Show title placeholder or configure its appearance"
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Display the skeleton when true"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content to be displayed when loading is false"
+        },
+        {
+          "name": "variant",
+          "type": "DialSkeletonVariant",
+          "required": false,
+          "defaultValue": "DialSkeletonVariant.Default",
+          "description": "Skeleton variant"
+        },
+        {
+          "name": "width",
+          "type": "string | number",
+          "required": false,
+          "description": "Width of the skeleton"
+        },
+        {
+          "name": "height",
+          "type": "string | number",
+          "required": false,
+          "description": "Height of the skeleton"
+        }
+      ],
+      "examples": [
+        "// Simple skeleton\n<DialSkeleton />\n\n// Text skeleton with custom size\n<DialSkeleton variant={DialSkeletonVariant.Text} width=\"200px\" height=\"20px\" />\n\n// Circular avatar skeleton\n<DialSkeleton variant={DialSkeletonVariant.Circular} width={40} height={40} />\n\n// Complex skeleton with avatar, showTitle and paragraph\n<DialSkeleton\n  avatar\n  showTitle\n  paragraph={{ rows: 3 }}\n  active\n/>\n\n// Conditional loading\n<DialSkeleton loading={isLoading}>\n  <div>Your content here</div>\n</DialSkeleton>\n\n// Custom paragraph widths\n<DialSkeleton\n  paragraph={{ rows: 3, width: ['100%', '80%', '60%'] }}\n/>\n\n// Avatar with size and shape\n<DialSkeleton\n  avatar={{\n    size: DialSkeletonAvatarSize.Large,\n    shape: DialSkeletonAvatarShape.Square\n  }}\n/>"
+      ],
+      "sourceFile": "components/Skeleton/Skeleton.tsx"
+    },
+    {
+      "name": "DialGrid",
+      "category": "Grid",
+      "description": "DialGrid — A feature-rich data grid wrapper built on ag-Grid with dark theme support.\naliases: DataTable|TableGrid\n\nProvides a pre-configured grid with:\n- Dark theme styling with CSS variable integration\n- Optional row selection with checkboxes\n- Context menu integration via DialDropdown\n- Text overflow handling with tooltips via DialEllipsisTooltip\n- Controlled or uncontrolled selection modes\n- Automatic column sizing and responsive behavior\n- Full accessibility support with ARIA attributes\n- Loading state with native AG-Grid overlay",
+      "props": [
+        {
+          "name": "columnDefs",
+          "type": "ColDef<T>[]",
+          "required": false,
+          "description": "Array of column definitions (ag-Grid ColDef format)"
+        },
+        {
+          "name": "rowData",
+          "type": "T[]",
+          "required": false,
+          "description": "Array of data objects to display in the grid"
+        },
+        {
+          "name": "additionalGridOptions",
+          "type": "GridOptions<T>",
+          "required": false,
+          "description": "Additional ag-Grid GridOptions to merge with defaults"
+        },
+        {
+          "name": "getContextMenuItems",
+          "type": "(row: T) => DropdownItem[]",
+          "required": false,
+          "description": "Function returning context menu items for a given row"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes to apply to the grid container"
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Data grid'",
+          "description": "Accessible label for the grid region"
+        },
+        {
+          "name": "wrapCustomCellRenderers",
+          "type": "boolean | ((col: ColDef<T>) => boolean)",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether to wrap custom cell renderers with context menu support"
+        },
+        {
+          "name": "disabledRowIds",
+          "type": "Set<string>",
+          "required": false,
+          "description": "Set of row IDs that should be disabled. Disabled rows are non-interactive and cannot be selected. IDs must match values from `getRowId`."
+        },
+        {
+          "name": "selectedRowIds",
+          "type": "Set<string>",
+          "required": false,
+          "description": "Controlled selection: set of row IDs that should be selected"
+        },
+        {
+          "name": "onGridApiChange",
+          "type": "(api: GridApi<T>) => void",
+          "required": false,
+          "description": "Callback invoked when the grid API becomes available"
+        },
+        {
+          "name": "onSelectionChange",
+          "type": "(selectedRowIds: Set<string>, selectedRows: T[]) => void",
+          "required": false,
+          "description": "Callback invoked when selection changes (selectedIds, selectedRows)"
+        },
+        {
+          "name": "getRowId",
+          "type": "(row: T) => string",
+          "required": false,
+          "defaultValue": "(row: T) =>\n    String((row as Record<string, unknown>).id ?? JSON.stringify(row))",
+          "description": "Function to extract unique ID from a row object (defaults to 'id' field)"
+        },
+        {
+          "name": "alternateOddRowColors",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether to alternate background colors for odd/even rows"
+        },
+        {
+          "name": "filterPlaceholder",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Enter value'",
+          "description": "Placeholder text for column filter inputs"
+        },
+        {
+          "name": "emptyStateIcon",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional icon for empty state"
+        },
+        {
+          "name": "emptyStateTitle",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'No results found'",
+          "description": "Optional title text displayed when the grid has no rows to show."
+        },
+        {
+          "name": "emptyStateDescription",
+          "type": "string",
+          "required": false,
+          "defaultValue": "\"Sorry, we couldn't find any results for your search.\"",
+          "description": "Optional description text displayed below the empty state title,\nproviding additional context or instructions (e.g., \"No data found\" or \"Try adjusting your filters\")."
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "When true, shows AG-Grid's native loading overlay"
+        },
+        {
+          "name": "wrapperBorder",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether to apply a border around the grid container"
+        },
+        {
+          "name": "withoutHeaderBorders",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether to hide the header row borders"
+        },
+        {
+          "name": "selectionMode",
+          "type": "GridSelectionMode",
+          "required": false,
+          "description": "Could be GridSelectionMode.MULTIPLE or GridSelectionMode.SINGLE to enable selection column"
+        },
+        {
+          "name": "allowDisabledContextMenu",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Enables context menu actions even if row itself is disabled for selection"
+        }
+      ],
+      "examples": [
+        "// Basic usage with data\ninterface Product {\n  id: string;\n  name: string;\n  price: number;\n}\n\nconst columns: ColDef<Product>[] = [\n  { field: 'name', headerName: 'Product Name', flex: 1 },\n  { field: 'price', headerName: 'Price', width: 120 },\n];\n\n<DialGrid<Product>\n  columnDefs={columns}\n  rowData={products}\n/>\n\n// With loading state\n<DialGrid<Product>\n  columnDefs={columns}\n  rowData={products}\n  loading={true}\n/>\n\n// With context menu\nconst getContextMenu = (row: Product): DropdownItem[] => [\n  { key: 'edit', label: 'Edit' },\n  { key: 'delete', label: 'Delete', danger: true },\n];\n\n<DialGrid<Product>\n  columnDefs={columns}\n  rowData={products}\n  getContextMenuItems={getContextMenu}\n/>\n\n// Controlled selection\nconst [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());\n\n<DialGrid<Product>\n  columnDefs={columns}\n  rowData={products}\n  selectedRowIds={selectedIds}\n  onSelectionChange={(ids, rows) => {\n    setSelectedIds(ids);\n    console.log('Selected:', rows);\n  }}\n/>"
+      ],
+      "sourceFile": "components/Grid/Grid.tsx"
+    },
+    {
+      "name": "DialTabs",
+      "category": "Navigation",
+      "description": "A responsive and overflow-aware tabs component that automatically adapts its layout\naliases: TabNavigation|TabBar\n\nbetween a scrollable tab bar and a dropdown menu on smaller screens.\n\nWhen there are too many tabs to fit in a single line, it introduces a dropdown button\nfor accessing hidden tabs and ensures smooth horizontal scrolling. The component also\nautomatically keeps the active tab in view.\n\nSupports both horizontal and vertical orientations and dynamically adjusts layout\nbased on screen size and available space.\n\nOn larger screens, tabs are displayed according to the `orientation` prop\n(horizontal or vertical). On smaller screens (mobile or tablet), the tabs collapse\ninto a dropdown menu for better usability.",
+      "props": [
+        {
+          "name": "tabs",
+          "type": "TabModel[]",
+          "required": true,
+          "description": "Array of tab models to render. Each tab must include an `id` and a display `name`."
+        },
+        {
+          "name": "activeTab",
+          "type": "string",
+          "required": true,
+          "description": "The identifier of the currently active tab."
+        },
+        {
+          "name": "onClick",
+          "type": "(id: string) => void",
+          "required": true,
+          "description": "Callback fired when a tab is selected. Receives the tab's `id` as an argument."
+        },
+        {
+          "name": "orientation",
+          "type": "TabOrientation",
+          "required": false,
+          "defaultValue": "TabOrientation.Horizontal",
+          "description": "Layout direction of the tabs. Uses the  enum."
+        },
+        {
+          "name": "screenThreshold",
+          "type": "ScreenResolution",
+          "required": false,
+          "defaultValue": "ScreenResolution.Tablet",
+          "description": "Defines the screen size threshold\nbelow which tabs collapse into a dropdown. Uses the  enum.\nWhen set to `Tablet`, both mobile and tablet screens will trigger dropdown mode."
+        },
+        {
+          "name": "smallScreenContainerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Optional CSS class applied to the dropdown container\nin small-screen (collapsed) mode."
+        },
+        {
+          "name": "smallScreenDropdownItemClassName",
+          "type": "string",
+          "required": false,
+          "description": "Optional CSS class applied to individual dropdown\nitems in small-screen mode."
+        },
+        {
+          "name": "desktopDropdownClassName",
+          "type": "string",
+          "required": false,
+          "description": "Optional CSS class applied to dropdown button in non small-screen mode."
+        },
+        {
+          "name": "desktopTabClassName",
+          "type": "string",
+          "required": false,
+          "description": "Optional CSS class applied to tab in non small-screed mode."
+        }
+      ],
+      "examples": [
+        "<DialTabs\n  tabs={[\n    { id: 'overview', name: 'Overview' },\n    { id: 'details', name: 'Details' },\n    { id: 'settings', name: 'Settings', invalid: true },\n  ]}\n  activeTab=\"overview\"\n  onClick={(id) => setActiveTab(id)}\n  orientation={TabOrientation.Horizontal}\n/>"
+      ],
+      "sourceFile": "components/Tabs/Tabs.tsx"
+    },
+    {
+      "name": "DialBreadcrumb",
+      "category": "Navigation",
+      "description": "Breadcrumb navigation component with horizontal scroll on overflow.\naliases: NavigationPath|BreadcrumbTrail\n\nUse either the `pathItems` prop or compose with `<DialBreadcrumbItem/>` as children.\nThe last item is treated as the current page.",
+      "props": [
+        {
+          "name": "pathItems",
+          "type": "DialBreadcrumbPathItem[]",
+          "required": false,
+          "description": "Array of breadcrumb pathItems (see `DialBreadcrumbItem`)."
+        },
+        {
+          "name": "separator",
+          "type": "ReactNode",
+          "required": false,
+          "defaultValue": "defaultSeparator",
+          "description": "Custom separator node (default: right chevron icon)."
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Breadcrumb'",
+          "description": "Aria label for the `<nav>` element (default: \"Breadcrumb\")."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the `<nav>` container."
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Alternatively, compose with `<DialBreadcrumbItem/>` as children."
+        },
+        {
+          "name": "labelClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to each item when using `pathItems` prop."
+        },
+        {
+          "name": "onBeforeNavigate",
+          "type": "NavigationGuard",
+          "required": false,
+          "description": "Navigation guard called before navigating to a breadcrumb item.\nGuard function called before navigating to a different breadcrumb item.\nReturn `true` to allow navigation, `false` to prevent it.\nCan return a Promise for async checks (e.g., showing a confirmation dialog)."
+        }
+      ],
+      "examples": [
+        "<DialBreadcrumb\n  pathItems={[\n    { label: 'Home', href: '/' },\n    { label: 'Section', href: '/section' },\n    { label: 'Current Page' },\n  ]}\n/>\n\n<DialBreadcrumb>\n  <DialBreadcrumbItem label=\"Home\" href=\"/\" />\n  <DialBreadcrumbItem label=\"Section\" href=\"/section\" />\n  <DialBreadcrumbItem label=\"Current Page\" />\n</DialBreadcrumb>",
+        "<DialBreadcrumb\n   pathItems={items}\n   onBeforeNavigate={async () => {\n     if (hasUnsavedChanges) {\n       return await confirmLeave();\n     }\n     return true;\n   }}\n />"
+      ],
+      "sourceFile": "components/Breadcrumb/Breadcrumb.tsx"
+    },
+    {
+      "name": "DialBreadcrumbItem",
+      "category": "Navigation",
+      "description": "",
+      "props": [
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": true
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "onClick",
+          "type": "MouseEventHandler<HTMLAnchorElement>",
+          "required": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false
+        },
+        {
+          "name": "iconBefore",
+          "type": "ReactNode",
+          "required": false
+        },
+        {
+          "name": "labelClassName",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "isLast",
+          "type": "boolean",
+          "required": false
+        },
+        {
+          "name": "separator",
+          "type": "ReactNode",
+          "required": false,
+          "defaultValue": "defaultSeparator"
+        },
+        {
+          "name": "onBeforeNavigate",
+          "type": "NavigationGuard",
+          "required": false
+        }
+      ],
+      "examples": [],
+      "sourceFile": "components/Breadcrumb/BreadcrumbItem.tsx"
+    },
+    {
+      "name": "DialButton",
+      "category": "Elements/Buttons",
+      "description": "A Button component with flexible icon and text positioning\naliases: ActionButton|CallToAction",
+      "props": [
+        {
+          "name": "variant",
+          "type": "ButtonVariant",
+          "required": false,
+          "description": "Defines the visual style of the button"
+        },
+        {
+          "name": "size",
+          "type": "ElementSize",
+          "required": false,
+          "defaultValue": "ElementSize.Standard",
+          "description": "Defines the size of the button"
+        },
+        {
+          "name": "appearance",
+          "type": "ButtonAppearance",
+          "required": false,
+          "defaultValue": "ButtonAppearance.Solid",
+          "description": "Defines the type of the button"
+        },
+        {
+          "name": "textClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes to apply specifically to the button text"
+        },
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": false,
+          "description": "The content of the button. Can be any React node."
+        },
+        {
+          "name": "iconBefore",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Icon or element to display before the button text"
+        },
+        {
+          "name": "iconAfter",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Icon or element to display after the button text"
+        },
+        {
+          "name": "hideTitleOnMobile",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether to hide the title text on mobile devices"
+        },
+        {
+          "name": "tooltipProps",
+          "type": "TooltipProps",
+          "required": false
+        }
+      ],
+      "examples": [
+        "<DialButton\n  label=\"Click me\"\n  onClick={handleClick}\n  iconBefore={<Icon />}\n  className=\"custom-button\"\n/>",
+        "<DialButton\n  label={<span>Custom <strong>Label</strong></span>}\n  aria-label=\"Custom Label\"\n  onClick={handleClick}\n/>"
+      ],
+      "sourceFile": "components/Button/Button.tsx"
+    },
+    {
+      "name": "DialIconButton",
+      "category": "Elements/Buttons",
+      "description": "A Icon Button component with flexible icon and text positioning\naliases: IconicButton|SymbolButton",
+      "props": [
+        {
+          "name": "variant",
+          "type": "ButtonVariant",
+          "required": false,
+          "description": "Defines the visual style of the button"
+        },
+        {
+          "name": "size",
+          "type": "ElementSize",
+          "required": false,
+          "defaultValue": "ElementSize.Standard",
+          "description": "Defines the size of the button"
+        },
+        {
+          "name": "appearance",
+          "type": "ButtonAppearance",
+          "required": false,
+          "defaultValue": "ButtonAppearance.Solid",
+          "description": "Defines the type of the button"
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Icon display"
+        },
+        {
+          "name": "tooltipProps",
+          "type": "TooltipProps",
+          "required": false
+        }
+      ],
+      "examples": [
+        "<DialIconButton\n  onClick={handleClick}\n  icon={<Icon />}\n  className=\"custom-button\"\n/>",
+        "<DialIconButton\n  aria-label=\"Custom Label\"\n  onClick={handleClick}\n/>"
+      ],
+      "sourceFile": "components/IconButton/IconButton.tsx"
+    },
+    {
+      "name": "DialErrorButton",
+      "category": "Elements/Buttons",
+      "description": "A Error Button component with predefined error variant",
+      "props": [],
+      "examples": [
+        "<DialErrorButton\nlabel=\"Click me\"\nonClick={handleClick}\nclassName=\"custom-button\"\n/>"
+      ],
+      "sourceFile": "components/Button/ButtonWrappers.tsx"
+    },
+    {
+      "name": "DialNeutralButton",
+      "category": "Elements/Buttons",
+      "description": "A Neutral Button component with predefined neutral variant",
+      "props": [],
+      "examples": [
+        "<DialNeutralButton\n label=\"Click me\"\n onClick={handleClick}\n className=\"custom-button\"\n/>"
+      ],
+      "sourceFile": "components/Button/ButtonWrappers.tsx"
+    },
+    {
+      "name": "DialPrimaryButton",
+      "category": "Elements/Buttons",
+      "description": "A Primary Button component with predefined primary variant",
+      "props": [],
+      "examples": [
+        "<DialPrimaryButton\n label=\"Click me\"\nonClick={handleClick}\nclassName=\"custom-button\"\n/>"
+      ],
+      "sourceFile": "components/Button/ButtonWrappers.tsx"
+    },
+    {
+      "name": "DialGhostButton",
+      "category": "Elements/Buttons",
+      "description": "A Ghost Button component with predefined ghost appearance",
+      "props": [],
+      "examples": [
+        "<DialGhostButton\n label=\"Click me\"\n onClick={handleClick}\n className=\"custom-button\"\n/>"
+      ],
+      "sourceFile": "components/Button/ButtonWrappers.tsx"
+    },
+    {
+      "name": "DialLinkButton",
+      "category": "Elements/Buttons",
+      "description": "A Link Button component with predefined link appearance",
+      "props": [],
+      "examples": [
+        "<DialLinkButton\n label=\"Click me\"\n onClick={handleClick}\n className=\"custom-button\"\n/>"
+      ],
+      "sourceFile": "components/Button/ButtonWrappers.tsx"
+    },
+    {
+      "name": "DialErrorIconButton",
+      "category": "Elements/Buttons",
+      "description": "A Error Icon Button component with predefined error variant",
+      "props": [],
+      "examples": [
+        "<DialErrorIconButton\n icon={<Icon />}\n onClick={handleClick}\n className=\"custom-button\"\n/>"
+      ],
+      "sourceFile": "components/IconButton/IconButtonWrappers.tsx"
+    },
+    {
+      "name": "DialGhostIconButton",
+      "category": "Elements/Buttons",
+      "description": "A Ghost Icon Button component with predefined ghost appearance",
+      "props": [],
+      "examples": [
+        "<DialGhostIconButton\n icon={<Icon />}\n onClick={handleClick}\n className=\"custom-button\"\n/>"
+      ],
+      "sourceFile": "components/IconButton/IconButtonWrappers.tsx"
+    },
+    {
+      "name": "DialNeutralIconButton",
+      "category": "Elements/Buttons",
+      "description": "A Neutral Icon Button component with predefined neutral variant",
+      "props": [],
+      "examples": [
+        "<DialNeutralIconButton\n icon={<Icon />}\n onClick={handleClick}\n className=\"custom-button\"\n/>"
+      ],
+      "sourceFile": "components/IconButton/IconButtonWrappers.tsx"
+    },
+    {
+      "name": "DialPrimaryIconButton",
+      "category": "Elements/Buttons",
+      "description": "A Primary Icon Button component with predefined primary variant",
+      "props": [],
+      "examples": [
+        "<DialPrimaryIconButton\n icon={<Icon />}\n onClick={handleClick}\n className=\"custom-button\"\n/>"
+      ],
+      "sourceFile": "components/IconButton/IconButtonWrappers.tsx"
+    },
+    {
+      "name": "DialSecondaryIconButton",
+      "category": "Elements/Buttons",
+      "description": "A Secondary Icon Button component with predefined error variant",
+      "props": [],
+      "examples": [
+        "<DialSecondaryIconButton\n icon={<Icon />}\n onClick={handleClick}\n className=\"custom-button\"\n/>"
+      ],
+      "sourceFile": "components/IconButton/IconButtonWrappers.tsx"
+    },
+    {
+      "name": "DialSuccessIconButton",
+      "category": "Elements/Buttons",
+      "description": "A Success Icon Button component with predefined error variant",
+      "props": [],
+      "examples": [
+        "<DialSuccessIconButton\n icon={<Icon />}\n onClick={handleClick}\n className=\"custom-button\"\n/>"
+      ],
+      "sourceFile": "components/IconButton/IconButtonWrappers.tsx"
+    },
+    {
+      "name": "DialTertiaryIconButton",
+      "category": "Elements/Buttons",
+      "description": "A Tertiary Icon Button component with predefined error variant",
+      "props": [],
+      "examples": [
+        "<DialTertiaryIconButton\n icon={<Icon />}\n onClick={handleClick}\n className=\"custom-button\"\n/>"
+      ],
+      "sourceFile": "components/IconButton/IconButtonWrappers.tsx"
+    },
+    {
+      "name": "DialCloseButton",
+      "category": "Elements/Buttons",
+      "description": "A Close button component with a customizable icon and accessible label.\naliases: DismissButton|ExitButton",
+      "props": [
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible label for screen readers"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes to apply to the button"
+        },
+        {
+          "name": "size",
+          "type": "number",
+          "required": false,
+          "defaultValue": "24",
+          "description": "Size of the close icon"
+        },
+        {
+          "name": "onClose",
+          "type": "(e: MouseEvent<HTMLButtonElement>) => void",
+          "required": true,
+          "description": "Click event handler for the close button"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the button is disabled"
+        }
+      ],
+      "examples": [
+        "<DialCloseButton\n  ariaLabel=\"Close dialog\"\n  onClose={handleClose}\n  className=\"custom-close\"\n  size={32}\n/>"
+      ],
+      "sourceFile": "components/CloseButton/CloseButton.tsx"
+    },
+    {
+      "name": "DialRemoveButton",
+      "category": "Elements/Buttons",
+      "description": "A specialized button component for removal or delete actions.\naliases: DeleteButton|TrashButton\n\nRenders a `DialErrorButton` with a predefined trash icon (`IconTrashX`) as the leading icon.\nAdditional props are passed directly to the underlying `DialErrorButton`.",
+      "props": [
+        {
+          "name": "iconClassName",
+          "type": "string",
+          "required": false,
+          "description": "Optional CSS class applied to the trash icon for additional styling"
+        }
+      ],
+      "examples": [
+        "<DialRemoveButton\n  label=\"Delete item\"\n  onClick={handleDelete}\n  iconClassName=\"text-error\"\n/>"
+      ],
+      "sourceFile": "components/RemoveButton/RemoveButton.tsx"
+    },
+    {
+      "name": "DialTextarea",
+      "category": "Elements",
+      "description": "A flexible textarea component with validation support and consistent styling\naliases: MultilineInput|TextBox",
+      "props": [
+        {
+          "name": "labelProps",
+          "type": "DialLabelProps",
+          "required": false,
+          "description": "Props for the field label, including `label` (label text) and `required` (whether to show required indicator)"
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the textarea has validation errors (applies error styling)"
+        },
+        {
+          "name": "containerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes to apply to the container div"
+        },
+        {
+          "name": "resize",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the textarea has possibility to resize"
+        },
+        {
+          "name": "error",
+          "type": "string",
+          "required": false,
+          "description": "Error message to display below the textarea (also adds error styling)"
+        },
+        {
+          "name": "caption",
+          "type": "string",
+          "required": false,
+          "description": "Optional caption text to display below the textarea"
+        },
+        {
+          "name": "onChange",
+          "type": "(value: string) => void",
+          "required": false,
+          "description": "Callback function called when the textarea value changes"
+        }
+      ],
+      "examples": [
+        "<DialTextarea\n  id=\"description\"\n  placeholder=\"Enter description...\"\n  value={value}\n  onChange={(value) => setValue(value)}\n/>"
+      ],
+      "sourceFile": "components/Textarea/Textarea.tsx"
+    },
+    {
+      "name": "DialTooltip",
+      "category": "Overlay",
+      "description": "A Tooltip component that displays information on hover\naliases: HoverPopover|InfoPopover",
+      "props": [
+        {
+          "name": "hideTooltip",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether to hide the tooltip completely"
+        },
+        {
+          "name": "tooltip",
+          "type": "ReactNode",
+          "required": false,
+          "description": "The content to display in the tooltip"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "description": "The element that triggers the tooltip"
+        },
+        {
+          "name": "triggerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the trigger element"
+        },
+        {
+          "name": "contentClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the tooltip content"
+        }
+      ],
+      "examples": [
+        "<DialTooltip tooltip=\"This is helpful information\">\n  <button>Hover me</button>\n</DialTooltip>"
+      ],
+      "sourceFile": "components/Tooltip/Tooltip.tsx"
+    },
+    {
+      "name": "DialSwitch",
+      "category": "Form",
+      "description": "A Switch component with various styling options\naliases: ToggleSwitch|BinaryToggle",
+      "props": [
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": false
+        },
+        {
+          "name": "switchId",
+          "type": "string",
+          "required": true,
+          "description": "Unique identifier for the switch element"
+        },
+        {
+          "name": "isOn",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "The current value of the switch"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the switch is disabled"
+        },
+        {
+          "name": "onChange",
+          "type": "(value: boolean) => void",
+          "required": false,
+          "description": "Callback function called when the switch value changes"
+        },
+        {
+          "name": "caption",
+          "type": "string",
+          "required": false,
+          "description": "Caption text"
+        }
+      ],
+      "examples": [
+        "<DialSwitch\n  switchId=\"switch\"\n  label=\"Toggle\"\n  isOn={true}\n  disabled={false}\n  onChange={(value) => console.log(value)}\n  caption=\"Caption\"\n/>"
+      ],
+      "sourceFile": "components/Switch/Switch.tsx"
+    },
+    {
+      "name": "DialPopup",
+      "category": "Overlay",
+      "description": "An accessible modal dialog component using Floating UI.\naliases: Modal|Dialog\n\nRenders in a portal with a scrim overlay, focus management, header with a title,\ncontent area, optional footer and a close control.",
+      "props": [
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Controls visibility of the popup"
+        },
+        {
+          "name": "header",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional title rendered in the header"
+        },
+        {
+          "name": "portalId",
+          "type": "string",
+          "required": false,
+          "description": "Optional portal container id"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to the popup container"
+        },
+        {
+          "name": "overlayClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to the overlay"
+        },
+        {
+          "name": "titleClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to the title element"
+        },
+        {
+          "name": "headerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to the popup header container"
+        },
+        {
+          "name": "dividers",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether to render separators between sections"
+        },
+        {
+          "name": "dividerFooter",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether to render a divider above the footer when `dividers` is true"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Body content"
+        },
+        {
+          "name": "footer",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Footer area for actions"
+        },
+        {
+          "name": "onClose",
+          "type": "(e?: MouseEvent<HTMLButtonElement> | null) => void",
+          "required": false,
+          "description": "Callback fired when the popup requests to close"
+        },
+        {
+          "name": "size",
+          "type": "PopupSize",
+          "required": false,
+          "defaultValue": "PopupSize.Md",
+          "description": "Sets the max-width of the popup"
+        },
+        {
+          "name": "hideClose",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the close button is hidden in the header (default: false)"
+        },
+        {
+          "name": "closeOnOutsideClick",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether the popup closes when clicking outside (default: true)"
+        },
+        {
+          "name": "preventKeyboardOnOpen",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "When true, initial focus goes to a non-input guard to avoid opening the virtual keyboard on mobile"
+        }
+      ],
+      "examples": [
+        "<DialPopup\n  open\n  title=\"Title\"\n  size={PopupSize.Md}\n  footer={\n    <div className=\"flex justify-end gap-2\">\n      <button className=\"btn-secondary px-3 py-1 rounded\">Cancel</button>\n      <button className=\"btn-primary px-3 py-1 rounded\">Confirm</button>\n    </div>\n  }\n  onClose={() => console.log('closed')}\n>\n  <div className=\"p-6\">Dialog content goes here…</div>\n</DialPopup>"
+      ],
+      "sourceFile": "components/Popup/Popup.tsx"
+    },
+    {
+      "name": "DialConfirmationPopup",
+      "category": "Overlay",
+      "description": "A confirmation dialog built with DialPopup and DialButton.\naliases: ConfirmDialog|WarningDialog\n\nProvides an accessible modal with a title, optional description or custom content,\nand a footer with Cancel / Confirm actions.",
+      "props": [
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Secondary text (ignored when `children` set)"
+        },
+        {
+          "name": "descriptionClassName",
+          "type": "string",
+          "required": false,
+          "description": "Custom CSS class for the description"
+        },
+        {
+          "name": "confirmLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "defaultConfirmLabel",
+          "description": "Label for the confirm button"
+        },
+        {
+          "name": "cancelLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "defaultCancelLabel",
+          "description": "Label for the cancel button"
+        },
+        {
+          "name": "isLoading",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Shows loader placeholder and hides actions"
+        },
+        {
+          "name": "disableConfirmButton",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Disables the confirm button"
+        },
+        {
+          "name": "confirmClassName",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the confirm button"
+        },
+        {
+          "name": "onConfirm",
+          "type": "() => void",
+          "required": true,
+          "description": "Fired on confirm"
+        },
+        {
+          "name": "onCancel",
+          "type": "() => void",
+          "required": false,
+          "description": "Fired on cancel (falls back to `onClose`)"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Custom body content"
+        },
+        {
+          "name": "variant",
+          "type": "ConfirmationPopupVariant",
+          "required": false,
+          "defaultValue": "ConfirmationPopupVariant.Info",
+          "description": "Visual variant for the popup"
+        }
+      ],
+      "examples": [
+        "<ConfirmationModal\n  open\n  header=\"Delete item?\"\n  description=\"This action cannot be undone.\"\n  confirmLabel=\"Delete\"\n  onClose={() => setOpen(false)}\n  onConfirm={handleDelete}\n/>"
+      ],
+      "sourceFile": "components/ConfirmationPopup/ConfirmationPopup.tsx"
+    },
+    {
+      "name": "DialRadioGroupPopupField",
+      "category": "Form",
+      "description": "A composite field that opens a popup with a radio group selector.\naliases: PopupRadio|ChoicePopup\n\nRenders a labeled readout using `DialInputPopup`; when opened, a `DialPopup`\ndisplays a `DialRadioGroup` allowing the user to pick from a list of options.\nThe footer provides Cancel/Apply actions, with Apply disabled when `isValid` is false.\n\nThe value shown in the collapsed field is derived from either `customInputValue`\nor the name of the currently selected radio option identified by `selectedValue`.",
+      "props": [],
+      "examples": [
+        "<DialRadioGroupPopupField\n  fieldTitle=\"Status\"\n  htmlFor=\"status\"\n  header=\"Select status\"\n  emptyValueText=\"None\"\n  radioButtons={[\n    { id: 'draft', name: 'Draft' },\n    { id: 'review', name: 'In Review' },\n    { id: 'published', name: 'Published' },\n  ]}\n  selectedValue=\"draft\"\n  selectedRadioValue=\"draft\"\n  onChangeRadioField={(id) => console.log('radio changed', id)}\n  id=\"status-group\"\n  isValid={true}\n  onApply={() => console.log('applied')}\n/>"
+      ],
+      "sourceFile": "components/RadioGroupPopupField/RadioGroupPopupField.tsx"
+    },
+    {
+      "name": "DialFormPopup",
+      "category": "Overlay",
+      "description": "A form-oriented popup dialog.\naliases: FormDialog|FormModal\n\nProvides an accessible popup with a title, custom body,\nand a footer with \"Cancel\" and \"Submit\" actions.",
+      "props": [
+        {
+          "name": "submitLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "defaultSubmitLabel",
+          "description": "Label for the primary action button"
+        },
+        {
+          "name": "cancelLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "defaultCancelLabel",
+          "description": "Label for the cancel button"
+        },
+        {
+          "name": "isLoading",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Shows loader placeholder and hides actions"
+        },
+        {
+          "name": "disableSubmitButton",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Disables the submit button"
+        },
+        {
+          "name": "submitClassName",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the submit button"
+        },
+        {
+          "name": "onSubmit",
+          "type": "() => void",
+          "required": true,
+          "description": "Fired on submit"
+        },
+        {
+          "name": "onCancel",
+          "type": "() => void",
+          "required": false,
+          "description": "Fired on cancel (falls back to `onClose`)"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Custom body content"
+        }
+      ],
+      "examples": [
+        "<DialFormPopup\n  open\n  header=\"Create Model\"\n  onClose={() => setOpen(false)}\n  onSubmit={handleSubmit}\n/>"
+      ],
+      "sourceFile": "components/FormPopup/FormPopup.tsx"
+    },
+    {
+      "name": "DialInput",
+      "category": "Elements/Inputs",
+      "description": "A flexible input component with icon support and various styling options\naliases: TextField|FormInput",
+      "props": [
+        {
+          "name": "labelProps",
+          "type": "DialLabelProps",
+          "required": false
+        },
+        {
+          "name": "inputButtonProps",
+          "type": "DialInputButtonProps",
+          "required": false
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the input has validation errors (applies error styling)"
+        },
+        {
+          "name": "error",
+          "type": "string",
+          "required": false,
+          "description": "Error message to display below the input (also adds error styling)"
+        },
+        {
+          "name": "caption",
+          "type": "string",
+          "required": false,
+          "description": "Helper text to display below the input"
+        },
+        {
+          "name": "tooltipText",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "iconBefore",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Icon or element to display before the input"
+        },
+        {
+          "name": "iconAfter",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Icon or element to display after the input"
+        },
+        {
+          "name": "prefix",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "postfix",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "inputRef",
+          "type": "Ref<HTMLInputElement>",
+          "required": false,
+          "description": "Ref to access the underlying input element"
+        },
+        {
+          "name": "onChange",
+          "type": "(value?: string) => void",
+          "required": false,
+          "description": "Callback function called when the input value changes"
+        },
+        {
+          "name": "containerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes to apply to the container div"
+        },
+        {
+          "name": "wrapperClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes to apply to the input wrapper div"
+        }
+      ],
+      "examples": [
+        "<DialInput\n  id=\"search\"\n  placeholder=\"Search...\"\n  iconBefore={<SearchIcon />}\n  iconAfter={<ClearIcon />}\n  onChange={(value) => console.log(value)}\n/>"
+      ],
+      "sourceFile": "components/Input/Input.tsx"
+    },
+    {
+      "name": "DialNumberInput",
+      "category": "Elements/Inputs",
+      "description": "A number input field component\naliases: NumericField|NumberField",
+      "props": [
+        {
+          "name": "integer",
+          "type": "boolean",
+          "required": false,
+          "description": "When true, restricts input to integer values only — blocks decimal points, minus, plus, and scientific notation (e/E)"
+        },
+        {
+          "name": "onChange",
+          "type": "(value?: number | string) => void",
+          "required": false,
+          "description": "Callback function called when the input value changes.\n       Returns either a number (for most values) or a string (for decimal values < 1 with leading zeros)"
+        }
+      ],
+      "examples": [
+        "<DialNumberInput\n  id=\"age\"\n  placeholder=\"Enter your age\"\n  value={25}\n  onChange={(value) => setAge(value)}\n/>"
+      ],
+      "sourceFile": "components/NumberInput/NumberInput.tsx"
+    },
+    {
+      "name": "DialPasswordInput",
+      "category": "Elements/Inputs",
+      "description": "A password input component with show/hide functionality and customizable props.\naliases: SecureInput|ToggleablePassword",
+      "props": [],
+      "examples": [
+        "<DialPasswordInput\n  id=\"password\"\n  label=\"Password\"\n  value={password}\n  onChange={e => setPassword(e.target.value)}\n  disabled={false}\n/>"
+      ],
+      "sourceFile": "components/PasswordInput/PasswordInput.tsx"
+    },
+    {
+      "name": "DialSearch",
+      "category": "Elements",
+      "description": "A search input component with a customizable placeholder, icons, flexible props, and the ability\naliases: SearchField|QueryInput\n\nto clear the input value via a clear button. Supports multiple sizes for flexible layouts.",
+      "props": [
+        {
+          "name": "size",
+          "type": "ElementSize",
+          "required": false,
+          "defaultValue": "ElementSize.Standard",
+          "description": "The size of the search input. Uses the  enum."
+        },
+        {
+          "name": "onChange",
+          "type": "(value: string) => void",
+          "required": false
+        }
+      ],
+      "examples": [
+        "<DialSearch\n  id=\"search\"\n  value={query}\n  placeholder=\"Search\"\n  size={ElementSize.Small}\n  onChange={(value) => setQuery(value)}\n  onBlur={() => handleBlur()}\n  disabled={false}\n/>"
+      ],
+      "sourceFile": "components/Search/Search.tsx"
+    },
+    {
+      "name": "DialInputPopup",
+      "category": "Overlay",
+      "description": "An input field that opens a popup when clicked, displaying a selected value or a list of values.\naliases: PopupInput|ReadonlyInput\n\nIt supports read-only mode, error states, and disabled state, with customizable styling.\nThe modal content is rendered using a portal for seamless integration.",
+      "props": [
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "description": "The current state of the modal, indicating whether it is opened or closed."
+        },
+        {
+          "name": "selectedValue",
+          "type": "string | string[]",
+          "required": false,
+          "description": "The currently selected value(s). Can be a string for a single value or an array of strings for multiple values."
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "description": "The content to render inside the modal when it is opened."
+        },
+        {
+          "name": "onOpen",
+          "type": "() => void",
+          "required": true,
+          "description": "A callback function triggered when the modal open button is clicked."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the input is disabled, preventing user interaction."
+        },
+        {
+          "name": "valueClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to the displayed value."
+        },
+        {
+          "name": "inputClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to the input container."
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "required": false,
+          "description": "Placeholder text displayed when no value is selected."
+        },
+        {
+          "name": "elementId",
+          "type": "string",
+          "required": false,
+          "description": "A unique identifier for the input element, useful for accessibility and testing."
+        },
+        {
+          "name": "errorText",
+          "type": "string",
+          "required": false,
+          "description": "An optional error message displayed below the input when an error state is present."
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the input is in an invalid state, affecting styling. Applied automatically if errorText is provided."
+        },
+        {
+          "name": "emptyValueText",
+          "type": "string",
+          "required": false,
+          "description": "The text displayed when no value is selected and placeholder is not provided."
+        },
+        {
+          "name": "editable",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "When true, the input area becomes an editable text field; only the icon opens the popup."
+        },
+        {
+          "name": "onValueChange",
+          "type": "(value: string) => void",
+          "required": false,
+          "description": "Callback fired when the user types in the editable input."
+        },
+        {
+          "name": "collapseTagOverflow",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false"
+        },
+        {
+          "name": "iconBefore",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional icon rendered at the start of the field, before the value."
+        }
+      ],
+      "examples": [
+        "<DialInputPopup\n  open={true}\n  selectedValue=\"Selected Item\"\n  emptyValueText=\"No value selected\"\n  onOpen={() => setModalState(true)}\n  disabled={false}\n  valueClassName=\"custom-value-class\"\n  inputClassName=\"custom-input-class\"\n  elementId=\"input-modal\"\n  errorText=\"This field is required\"\n>\n  <div>Modal Content Here</div>\n</DialInputPopup>"
+      ],
+      "sourceFile": "components/InputPopup/InputPopup.tsx"
+    },
+    {
+      "name": "DialAutocompleteInputValue",
+      "category": "Form",
+      "description": "A component that displays a list of selected items in a customizable, styled list. Each item is\naliases: SelectedList|ItemDisplay\n\nrendered as a tag wrapped in a tooltip, allowing for truncation and additional context when\nhovered. The component is flexible and supports custom CSS classes for styling the list and\nindividual list items.",
+      "props": [
+        {
+          "name": "placeholder",
+          "type": "string",
+          "required": false,
+          "description": "Placeholder text to display when no items are selected."
+        },
+        {
+          "name": "selectedItems",
+          "type": "string[]",
+          "required": false,
+          "description": "An array of strings representing the selected items to display. If empty or undefined, the component renders nothing."
+        },
+        {
+          "name": "listClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to the container element containing the list of selected items."
+        },
+        {
+          "name": "listElementClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to each tag element representing an individual selected item."
+        },
+        {
+          "name": "collapseTagOverflow",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "When true, keeps items on one line and shows `+N` chip with a tooltip for overflow items."
+        }
+      ],
+      "examples": [
+        "<DialAutocompleteInputValue\n  selectedItems={['Item 1', 'Item 2', 'Item 3']}\n  listClassName=\"custom-list-class\"\n  listElementClassName=\"custom-item-class\"\n  collapseTagOverflow\n/>"
+      ],
+      "sourceFile": "components/AutocompleteInput/AutocompleteInputValue.tsx"
+    },
+    {
+      "name": "DialTagInput",
+      "category": "Form",
+      "description": "A tag input field that allows users to add multiple tags using the Enter or comma key.\naliases: MultiTag|TagField\n\nSupports removing tags, displaying field labels, optional indicators, validation states,\nand dynamic layout adjustment when tags wrap to multiple lines.",
+      "props": [
+        {
+          "name": "elementId",
+          "type": "string",
+          "required": false,
+          "description": "Unique identifier for the input element."
+        },
+        {
+          "name": "initialTags",
+          "type": "string[]",
+          "required": false,
+          "defaultValue": "[]",
+          "description": "Array of tags to be displayed initially."
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "required": false,
+          "description": "Placeholder text shown when the input is empty."
+        },
+        {
+          "name": "captionDescription",
+          "type": "string",
+          "required": false,
+          "description": "Caption text shown under the input if there is no errors."
+        },
+        {
+          "name": "errorText",
+          "type": "string",
+          "required": false,
+          "description": "Error message displayed below the field when validation fails."
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the field should be styled as invalid."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the input and remove buttons are disabled."
+        },
+        {
+          "name": "collapseTagOverflow",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "When true, keeps tags on one line and shows `+N` for overflow."
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "When true, hides the text input (no new tags can be added). The outer wrapper and label/caption are also omitted so the component can be embedded inside an existing container."
+        },
+        {
+          "name": "containerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to the tag container (the flex row wrapping all tags)."
+        },
+        {
+          "name": "tagClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to each individual tag."
+        },
+        {
+          "name": "onChange",
+          "type": "(tags: string[]) => void",
+          "required": false,
+          "description": "Callback fired whenever the tag list changes (tag added or removed)."
+        }
+      ],
+      "examples": [
+        "<DialTagInput\n  elementId=\"skills\"\n  fieldTitle=\"Skills\"\n  placeholder=\"Add a skill\"\n  initialTags={['React', 'TypeScript']}\n  optional\n  onChange={(tags) => console.log('Updated tags:', tags)}\n/>"
+      ],
+      "sourceFile": "components/TagInput/TagInput.tsx"
+    },
+    {
+      "name": "DialSelect",
+      "category": "Form",
+      "description": "A versatile select supporting single and multiple selections.\naliases: OptionPicker|ChoiceSelector\n\nSingle mode mirrors the legacy visual:\n- Trigger shows the selected option's leading icon + label.\n- In the list, the selected option is indicated by a LEFT border and tinted background\n  (no check icon).\n\nMultiple mode uses checkboxes (including Select All with indeterminate state).\n\nSearch:\n- `searchable`: shows a plain input in the overlay header that filters options.\n- `inlineSearch` (single mode only): the trigger renders a plain input; typing filters options;\n  when closed, the input shows the selected label.",
+      "props": [
+        {
+          "name": "options",
+          "type": "SelectOption[]",
+          "required": true,
+          "description": "Array of options to select from."
+        },
+        {
+          "name": "multiple",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether multiple selections are allowed."
+        },
+        {
+          "name": "elementId",
+          "type": "string",
+          "required": false,
+          "description": "The id attribute for the select element."
+        },
+        {
+          "name": "size",
+          "type": "SelectSize",
+          "required": false,
+          "defaultValue": "SelectSize.Md",
+          "description": "Size of the control."
+        },
+        {
+          "name": "variant",
+          "type": "SelectVariant",
+          "required": false,
+          "defaultValue": "SelectVariant.Primary",
+          "description": "Visual variant."
+        },
+        {
+          "name": "value",
+          "type": "string | string[]",
+          "required": false,
+          "description": "Controlled selected value(s)."
+        },
+        {
+          "name": "customSelectedValue",
+          "type": "string",
+          "required": false,
+          "description": "Custom string to render as the selected value in single mode."
+        },
+        {
+          "name": "prefix",
+          "type": "string",
+          "required": false,
+          "description": "Prefix for selected value(s)."
+        },
+        {
+          "name": "defaultValue",
+          "type": "string | string[]",
+          "required": false,
+          "description": "Uncontrolled initial selected value(s)."
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Select...'",
+          "description": "Placeholder text when no selection is made."
+        },
+        {
+          "name": "searchable",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Show a search field in the overlay header."
+        },
+        {
+          "name": "searchPlaceholder",
+          "type": "string",
+          "required": false,
+          "description": "Placeholder for the search input (overlay/inline)."
+        },
+        {
+          "name": "selectAll",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Show a \"Select All\" checkbox in multiple mode."
+        },
+        {
+          "name": "selectAllLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Select all'",
+          "description": "Label for the \"Select All\" checkbox."
+        },
+        {
+          "name": "emptyStateTitle",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'No options available'",
+          "description": "Title text when there are no options."
+        },
+        {
+          "name": "emptyStateDescription",
+          "type": "string",
+          "required": false,
+          "description": "Description text when there are no options."
+        },
+        {
+          "name": "emptyStateIcon",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Icon to display when there are no options."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Disable the control."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the trigger."
+        },
+        {
+          "name": "listClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the list dropdown."
+        },
+        {
+          "name": "closable",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Show a close button in the dropdown header."
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the select is in an invalid state, affecting styling."
+        },
+        {
+          "name": "header",
+          "type": "ReactNode | (() => ReactNode)",
+          "required": false,
+          "description": "Custom node/function rendered above the options."
+        },
+        {
+          "name": "footer",
+          "type": "ReactNode | (() => ReactNode)",
+          "required": false,
+          "description": "Custom node/function rendered below the options."
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "description": "Controlled open state of the dropdown. When provided, makes the dropdown controlled."
+        },
+        {
+          "name": "onOpenChange",
+          "type": "(open: boolean) => void",
+          "required": false,
+          "description": "Called when the dropdown open state changes."
+        },
+        {
+          "name": "onInlineQueryChange",
+          "type": "(query: string) => void",
+          "required": false,
+          "description": "Called when the inline search query changes"
+        },
+        {
+          "name": "dismissRef",
+          "type": "Ref<unknown>",
+          "required": false,
+          "description": "Ref object to expose a `dismiss` method to programmatically close the select."
+        },
+        {
+          "name": "onClose",
+          "type": "(e: MouseEvent<HTMLButtonElement>) => void",
+          "required": false,
+          "description": "Called when the dropdown close button is clicked."
+        },
+        {
+          "name": "onChange",
+          "type": "(next: string | string[]) => void",
+          "required": false,
+          "description": "Called when the selection changes."
+        },
+        {
+          "name": "inlineSearch",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Render a plain input inside trigger (single mode only)."
+        },
+        {
+          "name": "onFooterClick",
+          "type": "(e: MouseEvent<HTMLDivElement>) => void",
+          "required": false,
+          "description": "Called when the footer element is clicked. When provided, automatically closes the dropdown."
+        },
+        {
+          "name": "customMultiSelectTagsRenderer",
+          "type": "(\n    options: SelectOption[],\n    selectedValues: string[],\n    handleRemoveTag: (\n      event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>,\n      val: string,\n    ) => void,\n  ) => ReactNode",
+          "required": false
+        }
+      ],
+      "examples": [
+        "<DialSelect options={[{ value: 'option-1', label: 'Option 1' }]} />\n<DialSelect searchable options={[{ value: 'a', label: 'Alpha' }, { value: 'b', label: 'Beta' }]} />\n<DialSelect multiple selectAll options={[{ value: '1', label: 'One' }, { value: '2', label: 'Two' }]} />\n<DialSelect inlineSearch options={[{ value: 'r', label: 'Relax-Name' }, { value: 'rep2', label: 'rep2' }]} />"
+      ],
+      "sourceFile": "components/Select/Select.tsx"
+    },
+    {
+      "name": "DialSelectField",
+      "category": "Form",
+      "description": "A Select field wrapper that composes `DialFormItem` and `DialSelect`.\naliases: SelectInput|ComboField\n\nProvides unified label, description, error rendering and a readonly view that shows\nthe selected option labels (comma-separated in single mode, list in multiple).",
+      "props": [
+        {
+          "name": "selectClassName",
+          "type": "string",
+          "required": false,
+          "description": "CSS class for the select element"
+        },
+        {
+          "name": "containerClassName",
+          "type": "string",
+          "required": false,
+          "description": "CSS class for the form item container"
+        }
+      ],
+      "examples": [
+        "```tsx\n<DialSelectField\n  elementId=\"transport\"\n  fieldTitle=\"Transport\"\n  options={[\n    { value: 'SSE', label: 'Server-Sent Events (SSE)' },\n    { value: 'WS', label: 'WebSocket' },\n  ]}\n  value=\"WS\"\n  onChange={(v) => setTransport(v as string)}\n/>"
+      ],
+      "sourceFile": "components/SelectField/SelectField.tsx"
+    },
+    {
+      "name": "DialLoadFileArea",
+      "category": "Form",
+      "description": "A drag-and-drop file upload area component that allows users to upload files\naliases: FileDropZone|DragDropUpload\n\neither by dragging them into the area or by selecting them through the file picker.\nDisplays helpful text, button prompts, and validation errors for file format or count limits.",
+      "props": [
+        {
+          "name": "files",
+          "type": "File[]",
+          "required": false
+        },
+        {
+          "name": "dynamicIcon",
+          "type": "(name: string) => ReactNode",
+          "required": false
+        },
+        {
+          "name": "iconBeforeInput",
+          "type": "ReactNode",
+          "required": false
+        },
+        {
+          "name": "isInvalid",
+          "type": "(file: File) => boolean",
+          "required": false
+        },
+        {
+          "name": "errorText",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "removeButtonAriaLabel",
+          "type": "string",
+          "required": false
+        }
+      ],
+      "examples": [
+        "<DialEmptyFileArea\n  onChange={(files) => console.log(files)}\n  emptyTextFirstLine=\"Drag & drop your files here\"\n  emptyTextSecondLine=\"or click the button below to upload\"\n  emptyButtonLabel=\"Upload files\"\n  acceptTypes=\"application/pdf, application/txt, image/svg+xml\"\n  maxFilesCount={5}\n  isMultiple\n  fileFormatError=\"Unsupported file format\"\n  fileCountError=\"You can upload up to 5 files only\"\n  getIsFileFormatError={(files) => files.some(file => !file.name.endsWith('.jpg') && !file.name.endsWith('.png'))}\n/>"
+      ],
+      "sourceFile": "components/LoadFileArea/LoadFileArea.tsx"
+    },
+    {
+      "name": "DialLoadFileAreaField",
+      "category": "Form",
+      "description": "A composite file upload field that combines a label, file list management,\naliases: UploadField|FileListField\n\nand a drag-and-drop upload area. Allows users to add, remove, and validate files\nwith customizable restrictions on file types and count.\n\nThe component displays a header showing the field title and file count,\nalong with \"Add\" and \"Delete All\" buttons (when multiple uploads are enabled).\nIt integrates with `DialLoadFileArea` for drag-and-drop functionality and\nprovides file validation for both format and maximum file count.",
+      "props": [
+        {
+          "name": "fieldTitle",
+          "type": "string",
+          "required": true
+        },
+        {
+          "name": "elementId",
+          "type": "string",
+          "required": true
+        },
+        {
+          "name": "deleteAllButtonLabel",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "addButtonLabel",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "additionalActionButtons",
+          "type": "ReactNode",
+          "required": false
+        }
+      ],
+      "examples": [
+        "<DialLoadFileAreaField\n  fieldTitle=\"Attachments\"\n  elementId=\"attachments\"\n  files={uploadedFiles}\n  onChange={setUploadedFiles}\n  maxFilesCount={5}\n  acceptTypes=\"image/png,image/jpeg\"\n  fileFormatError=\"Only PNG and JPEG images are allowed\"\n  fileCountError=\"You can upload up to 5 files\"\n  deleteAllButtonLabel=\"Remove all\"\n  addButtonLabel=\"Add more\"\n/>"
+      ],
+      "sourceFile": "components/LoadFileArea/LoadFileAreaField.tsx"
+    },
+    {
+      "name": "DialDropdown",
+      "category": "Dropdown",
+      "description": "Renders the given trigger (`children`) and a floating contextual menu overlay.\naliases: ContextMenu|PopupMenu\n\nSupports click/hover/contextMenu triggers, controlled/uncontrolled open, and an optional\nclose button inside the overlay. Placement is taken directly from Floating UI; when\n`placement` is **undefined** (default), automatic placement is handled by `autoPlacement`.",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Trigger element(s) to anchor and open the menu"
+        },
+        {
+          "name": "menu",
+          "type": "DropdownMenuProps",
+          "required": false,
+          "description": "Items-based menu definition"
+        },
+        {
+          "name": "renderOverlay",
+          "type": "() => ReactNode",
+          "required": false,
+          "description": "Render function for fully custom overlay content (ignored when `menu` is provided)"
+        },
+        {
+          "name": "trigger",
+          "type": "DropdownTrigger[]",
+          "required": false,
+          "defaultValue": "[DropdownTrigger.Click]",
+          "description": "Interactions that open the menu"
+        },
+        {
+          "name": "placement",
+          "type": "Placement",
+          "required": false,
+          "description": "Floating UI placement string; when omitted, auto placement is used"
+        },
+        {
+          "name": "allowedPlacements",
+          "type": "Placement[]",
+          "required": false,
+          "description": "Restricts the allowed placements"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Disables interaction and prevents opening"
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "description": "Controlled open state (when provided, `defaultOpen` is ignored)"
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Initial open state in uncontrolled mode"
+        },
+        {
+          "name": "onOpenChange",
+          "type": "(open: boolean) => void",
+          "required": false,
+          "description": "Fired whenever the open state changes"
+        },
+        {
+          "name": "closable",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the overlay shows an internal close button"
+        },
+        {
+          "name": "onClose",
+          "type": "(e: MouseEvent<HTMLButtonElement>) => void",
+          "required": false,
+          "description": "Fired when the close button inside the overlay is clicked"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to the trigger wrapper"
+        },
+        {
+          "name": "listClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to the floating overlay"
+        },
+        {
+          "name": "outsidePressIgnoreRef",
+          "type": "RefObject<HTMLElement | null>",
+          "required": false,
+          "description": "Ref to an element that should not trigger outside press behavior"
+        },
+        {
+          "name": "outsideClosable",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether clicks outside the overlay should close it"
+        },
+        {
+          "name": "anchorToMouse",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether to anchor the dropdown to the mouse position"
+        },
+        {
+          "name": "matchReferenceWidth",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether to match the reference element's width"
+        },
+        {
+          "name": "maxDropdownHeight",
+          "type": "number | null",
+          "required": false,
+          "description": "Maximum height of the dropdown menu; when omitted, no limit is applied"
+        }
+      ],
+      "examples": [
+        "// Simple items menu\n<DialDropdown menu={{ items: [{ key: 'profile', label: 'Profile' }, { key: 'logout', label: 'Logout' }] }}>\n  <button type=\"button\" className=\"px-3 py-2 rounded border\">Open</button>\n</DialDropdown>\n\n// Hover trigger\n<DialDropdown trigger={[DropdownTrigger.Hover]} placement=\"bottom-end\" menu={{ items }}>\n  <button type=\"button\" className=\"px-3 py-2 rounded border\">Hover me</button>\n</DialDropdown>\n\n// Custom overlay content\n<DialDropdown closable renderOverlay={() => <div className=\"p-3\">Custom content</div>}>\n  <button type=\"button\" className=\"px-3 py-2 rounded border\">Custom</button>\n</DialDropdown>"
+      ],
+      "sourceFile": "components/Dropdown/Dropdown.tsx"
+    },
+    {
+      "name": "DialButtonDropdown",
+      "category": "Dropdown",
+      "description": "A Button dropdown component based on DialDropdown component\naliases: SplitButton|MenuButton",
+      "props": [
+        {
+          "name": "items",
+          "type": "DropdownItem[]",
+          "required": true,
+          "description": "DropdownItems with actions"
+        }
+      ],
+      "examples": [
+        "<DialButtonDropdown\n  title=\"Click me\"\n  variant={ButtonVariant.Neutral}\n  items={[{ key: 'profile', label: 'Profile' }, { key: 'logout', label: 'Logout' }]}\n/>"
+      ],
+      "sourceFile": "components/ButtonDropdown/ButtonDropdown.tsx"
+    },
+    {
+      "name": "DialFileManager",
+      "category": "FileManager",
+      "description": "File Manager layout with a collapsible folders tree, breadcrumb/search header, and a data grid.\naliases: FileExplorer|FileBrowser\n\nFeatures:\n- Global `path` drives both the breadcrumb trail and the visible folder in the grid.\n- The grid shows children of the current folder. When a search query is present, it scans all nested descendants.\n- Pluggable tree, navigation panel, and grid behaviors via `treeOptions`, `navigationPanelOptions`, and `gridOptions`.\n- Optional filters toggle via `gridOptions.filterable` (default `true`).\n- Supports bulk actions toolbar when items are selected.",
+      "props": [
+        {
+          "name": "path",
+          "type": "string",
+          "required": false,
+          "description": "Absolute path of the current location (e.g. \"/All files/Design/Icons\")"
+        },
+        {
+          "name": "defaultPath",
+          "type": "string",
+          "required": false,
+          "description": "Initial path used in uncontrolled mode (applied only on first render)"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for the root container"
+        },
+        {
+          "name": "managerLabel",
+          "type": "ReactNode",
+          "required": false
+        },
+        {
+          "name": "gridClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for the grid container"
+        },
+        {
+          "name": "allowedFileTypes",
+          "type": "DialFileAcceptType[]",
+          "required": false,
+          "description": "Allowed file types (same format as the HTML `<input accept>` attribute). Controls upload filtering and which items are disabled in the File Manager UI. Supports MIME types, wildcards (e.g. `image/*`), and extensions (e.g. `.svg`)."
+        },
+        {
+          "name": "items",
+          "type": "DialFile[]",
+          "required": false,
+          "description": "Full hierarchical list of files and folders used by both tree and grid"
+        },
+        {
+          "name": "rootItem",
+          "type": "DialRootFolder",
+          "required": false,
+          "description": "Optional root folder item to represent the top-level container in the tree"
+        },
+        {
+          "name": "filesLoading",
+          "type": "boolean",
+          "required": false,
+          "description": "When true, shows skeleton loading state in the grid"
+        },
+        {
+          "name": "sharedByMePaths",
+          "type": "Set<string>",
+          "required": false,
+          "description": "Set of items paths that the user has shared with others. Enables UI indicators (icons/badges) in the tree and grid."
+        },
+        {
+          "name": "maxSelectableFileSize",
+          "type": "number",
+          "required": false,
+          "description": "Maximum allowed file size for selection in bytes"
+        },
+        {
+          "name": "selectedPaths",
+          "type": "Set<string>",
+          "required": false,
+          "description": "Controlled set of selected item paths"
+        },
+        {
+          "name": "defaultSelectedPaths",
+          "type": "Set<string>",
+          "required": false,
+          "description": "Initial selected paths used in uncontrolled mode"
+        },
+        {
+          "name": "onSelectedPathsChange",
+          "type": "(paths: Set<string>) => void",
+          "required": false,
+          "description": "Callback fired when the selected paths change"
+        },
+        {
+          "name": "showHiddenFiles",
+          "type": "boolean",
+          "required": false
+        },
+        {
+          "name": "onShowHiddenFilesChange",
+          "type": "(value: boolean) => void",
+          "required": false
+        },
+        {
+          "name": "treeOptions",
+          "type": "FileTreeOptions",
+          "required": false,
+          "description": "Options that configure the collapsible sidebar and folders tree"
+        },
+        {
+          "name": "toolbarOptions",
+          "type": "ToolbarOptions",
+          "required": false,
+          "description": "Options for the file manager toolbar"
+        },
+        {
+          "name": "showNavigationPanel",
+          "type": "boolean",
+          "required": false,
+          "description": "Determines whether to display the navigation panel."
+        },
+        {
+          "name": "navigationPanelOptions",
+          "type": "NavigationPanelOptions",
+          "required": false,
+          "description": "Options for the breadcrumb and search panel (value/onSearchChange for controlled search)"
+        },
+        {
+          "name": "gridOptions",
+          "type": "GridOptions",
+          "required": false,
+          "description": "Options forwarded to `DialGrid`; supports `columnDefs` override and `filterable` flag and date locale/options"
+        },
+        {
+          "name": "bulkActionsToolbarOptions",
+          "type": "BulkActionsToolbarOptions",
+          "required": false,
+          "description": "Options for the bulk actions toolbar shown when items are selected"
+        },
+        {
+          "name": "deleteConfirmationOptions",
+          "type": "DeleteConfirmationOptions",
+          "required": false,
+          "description": "Options for the delete confirmation popup"
+        },
+        {
+          "name": "destinationFolderPopupOptions",
+          "type": "DialFileManagerDestinationFolderPopupOptions",
+          "required": false
+        },
+        {
+          "name": "conflictResolutionPopupOptions",
+          "type": "DialFileManagerConflictResolutionPopupOptions",
+          "required": false
+        },
+        {
+          "name": "compactViewWidthBreakpoint",
+          "type": "number",
+          "required": false,
+          "description": "Width (px) below which the component switches to compact view."
+        },
+        {
+          "name": "customBreakpointRef",
+          "type": "RefObject<HTMLElement | null>",
+          "required": false
+        },
+        {
+          "name": "onPathChange",
+          "type": "(nextPath?: string) => void",
+          "required": false,
+          "description": "Callback fired when user navigates via tree or breadcrumb"
+        },
+        {
+          "name": "onTableFileClick",
+          "type": "(file: GridRow) => void",
+          "required": false,
+          "description": "Callback fired when a file row is clicked in the grid"
+        },
+        {
+          "name": "handleSelectionClick",
+          "type": "(file: GridRow[]) => void",
+          "required": false
+        },
+        {
+          "name": "onGridApiChange",
+          "type": "(api: GridApi) => void",
+          "required": false
+        },
+        {
+          "name": "onCopyFiles",
+          "type": "(items: DialCopiedItem[], destinationFolder: string) => void",
+          "required": false,
+          "description": "Callback fired when files copy-paste"
+        },
+        {
+          "name": "onMoveToFiles",
+          "type": "(\n    items: DialCopiedItem[],\n    sourceFolder: string,\n    destinationFolder: string,\n  ) => void",
+          "required": false,
+          "description": "Callback fired when files cut-paste or rename"
+        },
+        {
+          "name": "onDeleteFiles",
+          "type": "(items: DialDeletedItem[], sourceFolder: string) => void",
+          "required": false,
+          "description": "Callback fired when files are deleted"
+        },
+        {
+          "name": "onDownloadFiles",
+          "type": "(items: DialFile[]) => void",
+          "required": false,
+          "description": "Callback fired when files are downloaded"
+        },
+        {
+          "name": "onAddSibling",
+          "type": "(items: DialFile[]) => void",
+          "required": false,
+          "description": "Callback fired when when a new folder is added as a sibling to the selected folder"
+        },
+        {
+          "name": "onAddChild",
+          "type": "(items: DialFile[]) => void",
+          "required": false,
+          "description": "Callback fired when when a new folder is added as a child to the selected folder"
+        },
+        {
+          "name": "onRenameValidate",
+          "type": "(value: string, item: DialFile) => string | null",
+          "required": false,
+          "description": "Optional callback to validate a file or folder name during renaming. Should return an error message string if the name is invalid, or null if it's valid."
+        },
+        {
+          "name": "renameValidationMessages",
+          "type": "RenameValidationMessages",
+          "required": false,
+          "description": "Optional custom validation messages for renaming files and folders. Note that you need to add `${AlertVariant.Warning}__` prefix to the `hiddenItemWarning` message to display it as a warning with the warning icon."
+        },
+        {
+          "name": "forbiddenSymbolsRegExp",
+          "type": "RegExp",
+          "required": false,
+          "description": "Optional RegExp will be used in the validation for the files and folders names. The \"g\" and \"y\" flags are not allowed in this RegExp and will be ignored."
+        },
+        {
+          "name": "forbiddenSymbolsTooltip",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional tooltip displayed when a file or folder name contains forbidden characters"
+        },
+        {
+          "name": "onCreateFolder",
+          "type": "(\n    file: DialUploadFileItem,\n    folderPath: string,\n    fileId: string,\n  ) => void | Promise<void>",
+          "required": false
+        },
+        {
+          "name": "onCreateFolderValidate",
+          "type": "(\n    name: string,\n    parentFolder: DialFile,\n  ) => string | null",
+          "required": false
+        },
+        {
+          "name": "folderCreationValidationMessages",
+          "type": "CreateFolderValidationMessages",
+          "required": false
+        },
+        {
+          "name": "getDisabledTooltip",
+          "type": "(row: FileManagerGridRow) => string | undefined",
+          "required": false
+        },
+        {
+          "name": "fileTooLargeTooltip",
+          "type": "string",
+          "required": false,
+          "description": "Optional tooltip text displayed when a file is too large."
+        },
+        {
+          "name": "unsupportedFileTypeTooltip",
+          "type": "string",
+          "required": false,
+          "description": "Optional tooltip text displayed when an unsupported file type is selected."
+        },
+        {
+          "name": "onUploadFiles",
+          "type": "(\n    files: DialUploadFileItem[],\n    destinationFolder: string,\n  ) => void",
+          "required": false,
+          "description": "Callback fired when files are uploaded"
+        },
+        {
+          "name": "onValidateUpload",
+          "type": "(\n    files: DialUploadFileItem[],\n    existingFiles: DialFile[],\n    destinationFolder: string,\n  ) => FileUploadValidationResult | Promise<FileUploadValidationResult>",
+          "required": false,
+          "description": "Callback to validate files before upload"
+        },
+        {
+          "name": "maxFileSize",
+          "type": "number",
+          "required": false,
+          "description": "Maximum allowed file size for uploads in bytes"
+        },
+        {
+          "name": "uploadValidationMessages",
+          "type": "FileUploadValidationMessages",
+          "required": false,
+          "description": "Custom validation messages for file uploads. Consumers can customize these strings for a11y and copy consistency."
+        },
+        {
+          "name": "onUploadArchive",
+          "type": "(\n    file: File,\n    name: string,\n    destinationFolder: string,\n  ) => void",
+          "required": false,
+          "description": "Callback fired when archive files are uploaded"
+        },
+        {
+          "name": "uploadEnabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether files uploads are enabled"
+        },
+        {
+          "name": "fileMetadataPopupOptions",
+          "type": "FileMetadataPopupOptions",
+          "required": false
+        },
+        {
+          "name": "onGetInfo",
+          "type": "(file: DialFile) => void | Promise<void>",
+          "required": false
+        },
+        {
+          "name": "onUnshareFiles",
+          "type": "(files: DialFile[]) => void | Promise<void>",
+          "required": false
+        },
+        {
+          "name": "onRemoveFilesAccess",
+          "type": "(files: DialFile[]) => void | Promise<void>",
+          "required": false
+        },
+        {
+          "name": "actionsRef",
+          "type": "Ref<DialFileManagerActionsRef>",
+          "required": false,
+          "description": "Ref exposing a limited set of imperative File Manager actions (e.g., creating a folder). Allows parent components to trigger internal behaviors programmatically. This ref is not a DOM ref and should be used only for invoking the component’s public actions API."
+        },
+        {
+          "name": "onSearchFiles",
+          "type": "(folder: string, query: string) => void",
+          "required": false
+        },
+        {
+          "name": "searchInProgress",
+          "type": "boolean",
+          "required": false
+        },
+        {
+          "name": "searchResults",
+          "type": "DialFile[]",
+          "required": false
+        },
+        {
+          "name": "clearSearchResults",
+          "type": "() => void",
+          "required": false
+        },
+        {
+          "name": "emptyStateIcon",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional icon for empty state"
+        },
+        {
+          "name": "emptyStateTitle",
+          "type": "string",
+          "required": false,
+          "description": "Optional title text displayed when there are no files."
+        },
+        {
+          "name": "emptyStateDescription",
+          "type": "string",
+          "required": false,
+          "description": "Optional description text displayed below the empty state title."
+        },
+        {
+          "name": "sharedWithMeIds",
+          "type": "string[]",
+          "required": false,
+          "description": "Optional list of file IDs that are shared with the current user."
+        },
+        {
+          "name": "onFolderPopupPathChange",
+          "type": "(newPath?: string) => void",
+          "required": false
+        },
+        {
+          "name": "onManagePermissions",
+          "type": "(path?: string) => void",
+          "required": false
+        },
+        {
+          "name": "onPreview",
+          "type": "(path?: string) => void",
+          "required": false
+        },
+        {
+          "name": "onOpenInNewTab",
+          "type": "(file: DialFile) => void",
+          "required": false
+        },
+        {
+          "name": "previewExtensions",
+          "type": "string[]",
+          "required": false
+        },
+        {
+          "name": "isRenameFileAvailable",
+          "type": "boolean",
+          "required": false
+        },
+        {
+          "name": "isDuplicateFolderAvailable",
+          "type": "boolean",
+          "required": false
+        },
+        {
+          "name": "customUploadFileAction",
+          "type": "(\n    currentPath?: string,\n    currentFolder?: DialFile,\n  ) => void",
+          "required": false
+        },
+        {
+          "name": "customCreateNewItemAction",
+          "type": "(\n    currentPath?: string,\n    currentFolder?: DialFile,\n  ) => void",
+          "required": false
+        },
+        {
+          "name": "customDuplicateAction",
+          "type": "(items?: DialFile[]) => void",
+          "required": false
+        },
+        {
+          "name": "customDeleteItemsAction",
+          "type": "(\n    items: DialFile[],\n    parentFolderPath: string,\n  ) => void",
+          "required": false
+        },
+        {
+          "name": "customDownloadItemsAction",
+          "type": "(items?: DialFile[]) => void",
+          "required": false
+        },
+        {
+          "name": "nonClickableTableColumns",
+          "type": "FileManagerColumnKey[]",
+          "required": false
+        },
+        {
+          "name": "hideSearchPathItemName",
+          "type": "boolean",
+          "required": false
+        },
+        {
+          "name": "showHiddenFileSwitcherInDestinationPopup",
+          "type": "boolean",
+          "required": false
+        },
+        {
+          "name": "autoSelectUploadedItems",
+          "type": "boolean",
+          "required": false,
+          "description": "When true, automatically selects newly uploaded or created items (files, archives, folders) after they appear in the current directory. Useful in attach flows where the user expects immediate selection feedback."
+        }
+      ],
+      "examples": [
+        "// Minimal usage\n<DialFileManager items={files} path=\"/All files\" />\n\n// With loading state\n<DialFileManager items={files} path=\"/All files\" filesLoading={true} />\n\n// With controlled search and disabled grid filters\nconst [query, setQuery] = useState('');\n<DialFileManager\n  items={files}\n  path=\"/All files/Design\"\n  navigationPanelOptions={{\n    searchable: true,\n    value: query,\n    onSearchChange: setQuery,\n  }}\n  gridOptions={{ filterable: false }}\n/>\n\n// With custom tree width and title\n<DialFileManager\n  items={files}\n  treeOptions={{ width: 300, title: 'Explorer', showFiles: true }}\n/>\n\n// With explicit provider (advanced apps)\n<FileManagerProvider items={files} path=\"/All files\">\n  <MyCustomHeader />\n  <DialFileManagerView />  // internal view\n  <MyCustomFooter />\n</FileManagerProvider>"
+      ],
+      "sourceFile": "components/FileManager/FileManager.tsx"
+    },
+    {
+      "name": "DialDestinationFolderPopup",
+      "category": "FileManager/components",
+      "description": "DestinationFolderPopup\naliases: FolderSelector|PathChooser\n\nA popup dialog for selecting a destination folder when copying or moving files.\nDisplays a File Manager interface with a footer containing action buttons and\na toggle for showing hidden files.",
+      "props": [],
+      "examples": [
+        "<DestinationFolderPopup\n  open={isOpen}\n  onClose={handleClose}\n  onConfirm={handleConfirm}\n  mode=\"copy\"\n  title=\"Copy 3 files\"\n  items={files}\n  rootItem={rootFolder}\n  path={currentPath}\n  onPathChange={setCurrentPath}\n/>"
+      ],
+      "sourceFile": "components/FileManager/components/DestinationFolderPopup/DestinationFolderPopup.tsx"
+    }
+  ],
+  "types": [
+    {
+      "name": "GridOptions",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "columnDefs?",
+          "value": "(\n    | ColDef<GridRow>\n    | ((\n        dateLocale: Intl.LocalesArgument,\n        dateOptions: Intl.DateTimeFormatOptions | undefined,\n        isCompactView: boolean,\n      ) => ColDef<GridRow, unknown>)\n  )[]"
+        },
+        {
+          "name": "filterable?",
+          "value": "boolean"
+        },
+        {
+          "name": "dateLocale?",
+          "value": "Intl.LocalesArgument"
+        },
+        {
+          "name": "dateOptions?",
+          "value": "Intl.DateTimeFormatOptions"
+        },
+        {
+          "name": "showFiles?",
+          "value": "boolean"
+        },
+        {
+          "name": "showFolders?",
+          "value": "boolean"
+        },
+        {
+          "name": "visibleColumns?",
+          "value": "FileManagerColumnKey[]"
+        },
+        {
+          "name": "selectionMode?",
+          "value": "GridSelectionMode"
+        },
+        {
+          "name": "wrapCustomCellRenderers?",
+          "value": "boolean"
+        },
+        {
+          "name": "allowDisabledContextMenu?",
+          "value": "boolean"
+        },
+        {
+          "name": "actionLabels?",
+          "value": "{\n    [DialFileManagerActions.AddSibling]?: string;\n    [DialFileManagerActions.AddChild]?: string;\n    [DialFileManagerActions.Duplicate]?: string;\n    [DialFileManagerActions.Copy]?: string;\n    [DialFileManagerActions.Rename]?: string;\n    [DialFileManagerActions.Download]?: string;\n    [DialFileManagerActions.Delete]?: string;\n    [DialFileManagerActions.Move]?: string;\n    [DialFileManagerActions.Info]?: string;\n    [DialFileManagerActions.Unshare]?: string;\n    [DialFileManagerActions.ManagePermissions]?: string;\n    [DialFileManagerActions.Preview]?: string;\n    [DialFileManagerActions.RemoveAccess]?: string;\n  }"
+        }
+      ],
+      "sourceFile": "components/FileManager/FileManager.tsx"
+    },
+    {
+      "name": "ToolbarOptions",
+      "kind": "type",
+      "sourceFile": "components/FileManager/FileManager.tsx",
+      "typeBody": "Omit<\n  DialFileManagerToolbarProps,\n  'areHiddenFilesVisible' | 'onToggleHiddenFiles'\n> & {\n  newActions?: {\n    uploadFiles?: NewAction;\n    newFolder?: NewAction;\n    uploadArchive?: NewAction;\n    newItem?: NewAction;\n  };\n  showHiddenFilesToggle?: boolean;\n}"
+    },
+    {
+      "name": "BulkActionsToolbarOptions",
+      "kind": "type",
+      "sourceFile": "components/FileManager/FileManager.tsx",
+      "typeBody": "Omit<\n  DialFileManagerBulkActionsToolbarProps,\n  'onClearSelection' | 'actions' | 'selectedCount'\n> & {\n  actionLabels?: {\n    [DialFileManagerActions.Duplicate]?: string;\n    [DialFileManagerActions.Copy]?: string;\n    [DialFileManagerActions.Download]?: string;\n    [DialFileManagerActions.Delete]?: string;\n    [DialFileManagerActions.Move]?: string;\n    [DialFileManagerActions.Unshare]?: string;\n    [DialFileManagerActions.RemoveAccess]?: string;\n  };\n}"
+    },
+    {
+      "name": "AlertVariant",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Info",
+          "value": "'info'"
+        },
+        {
+          "name": "Success",
+          "value": "'success'"
+        },
+        {
+          "name": "Warning",
+          "value": "'warning'"
+        },
+        {
+          "name": "Error",
+          "value": "'error'"
+        }
+      ],
+      "sourceFile": "types/alert.ts"
+    },
+    {
+      "name": "ButtonVariant",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Primary",
+          "value": "'primary'"
+        },
+        {
+          "name": "Neutral",
+          "value": "'neutral'"
+        },
+        {
+          "name": "Error",
+          "value": "'error'"
+        },
+        {
+          "name": "Success",
+          "value": "'Success'"
+        },
+        {
+          "name": "Secondary",
+          "value": "'secondary'"
+        },
+        {
+          "name": "Tertiary",
+          "value": "'tertiary'"
+        }
+      ],
+      "sourceFile": "types/button.ts"
+    },
+    {
+      "name": "ButtonAppearance",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Solid",
+          "value": "'solid'"
+        },
+        {
+          "name": "Outlined",
+          "value": "'outlined'"
+        },
+        {
+          "name": "Ghost",
+          "value": "'ghost'"
+        },
+        {
+          "name": "Link",
+          "value": "'link'"
+        }
+      ],
+      "sourceFile": "types/button.ts"
+    },
+    {
+      "name": "RadioGroupOrientation",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Row",
+          "value": "'Row'"
+        },
+        {
+          "name": "Column",
+          "value": "'Column'"
+        }
+      ],
+      "sourceFile": "types/radio-group.ts"
+    },
+    {
+      "name": "PopupSize",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Sm",
+          "value": "'sm'"
+        },
+        {
+          "name": "Md",
+          "value": "'md'"
+        },
+        {
+          "name": "Lg",
+          "value": "'lg'"
+        }
+      ],
+      "sourceFile": "types/popup.ts"
+    },
+    {
+      "name": "ConfirmationPopupVariant",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Info",
+          "value": "'info'"
+        },
+        {
+          "name": "Danger",
+          "value": "'danger'"
+        }
+      ],
+      "sourceFile": "types/confirmation-popup.ts"
+    },
+    {
+      "name": "DropdownType",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Dropdown",
+          "value": "'dropdown'"
+        },
+        {
+          "name": "Menu",
+          "value": "'menu'"
+        }
+      ],
+      "sourceFile": "types/dropdown.ts"
+    },
+    {
+      "name": "DropdownTrigger",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Click",
+          "value": "'click'"
+        },
+        {
+          "name": "Hover",
+          "value": "'hover'"
+        },
+        {
+          "name": "ContextMenu",
+          "value": "'contextMenu'"
+        }
+      ],
+      "sourceFile": "types/dropdown.ts"
+    },
+    {
+      "name": "DropdownItemType",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Item",
+          "value": "'item'"
+        },
+        {
+          "name": "Divider",
+          "value": "'divider'"
+        },
+        {
+          "name": "PlainText",
+          "value": "'plainText'"
+        }
+      ],
+      "sourceFile": "types/dropdown.ts"
+    },
+    {
+      "name": "ElementSize",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Small",
+          "value": "'small'"
+        },
+        {
+          "name": "Standard",
+          "value": "'standard'"
+        }
+      ],
+      "sourceFile": "types/size.ts"
+    },
+    {
+      "name": "TagVariant",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Default",
+          "value": "'default'"
+        }
+      ],
+      "sourceFile": "types/tag.ts"
+    },
+    {
+      "name": "TabOrientation",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Horizontal",
+          "value": "'horizontal'"
+        },
+        {
+          "name": "Vertical",
+          "value": "'vertical'"
+        }
+      ],
+      "sourceFile": "types/tab.ts"
+    },
+    {
+      "name": "DialBreadcrumbPathItem",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "label",
+          "value": "ReactNode"
+        },
+        {
+          "name": "href?",
+          "value": "string"
+        },
+        {
+          "name": "onClick?",
+          "value": "(e: MouseEvent<HTMLAnchorElement>) => void"
+        },
+        {
+          "name": "disabled?",
+          "value": "boolean"
+        },
+        {
+          "name": "className?",
+          "value": "string"
+        },
+        {
+          "name": "iconBefore?",
+          "value": "ReactNode"
+        }
+      ],
+      "sourceFile": "models/breadcrumb.ts"
+    },
+    {
+      "name": "FormItemOrientation",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Vertical",
+          "value": "'vertical'"
+        },
+        {
+          "name": "Horizontal",
+          "value": "'horizontal'"
+        }
+      ],
+      "sourceFile": "types/form-item.ts",
+      "description": "Orientation options for form item layout"
+    },
+    {
+      "name": "SelectSize",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Sm",
+          "value": "'sm'"
+        },
+        {
+          "name": "Md",
+          "value": "'md'"
+        }
+      ],
+      "sourceFile": "types/select.ts"
+    },
+    {
+      "name": "SelectVariant",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Primary",
+          "value": "'Primary'"
+        },
+        {
+          "name": "Secondary",
+          "value": "'Secondary'"
+        }
+      ],
+      "sourceFile": "types/select.ts"
+    },
+    {
+      "name": "DialFileManagerTabs",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "MyFiles",
+          "value": "'my_files'"
+        },
+        {
+          "name": "Shared",
+          "value": "'shared'"
+        },
+        {
+          "name": "Organization",
+          "value": "'organization'"
+        },
+        {
+          "name": "Review",
+          "value": "'review'"
+        }
+      ],
+      "sourceFile": "types/file-manager.ts"
+    },
+    {
+      "name": "DialFileManagerActions",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "AddSibling",
+          "value": "'addSibling'"
+        },
+        {
+          "name": "AddChild",
+          "value": "'addChild'"
+        },
+        {
+          "name": "Duplicate",
+          "value": "'duplicate'"
+        },
+        {
+          "name": "Copy",
+          "value": "'copy'"
+        },
+        {
+          "name": "Move",
+          "value": "'move'"
+        },
+        {
+          "name": "Download",
+          "value": "'download'"
+        },
+        {
+          "name": "Delete",
+          "value": "'delete'"
+        },
+        {
+          "name": "Rename",
+          "value": "'rename'"
+        },
+        {
+          "name": "Info",
+          "value": "'info'"
+        },
+        {
+          "name": "Unshare",
+          "value": "'unshare'"
+        },
+        {
+          "name": "RemoveAccess",
+          "value": "'removeAccess'"
+        },
+        {
+          "name": "ManagePermissions",
+          "value": "'managePermissions'"
+        },
+        {
+          "name": "Preview",
+          "value": "'preview'"
+        },
+        {
+          "name": "OpenInNewTab",
+          "value": "'openInNewTab'"
+        }
+      ],
+      "sourceFile": "types/file-manager.ts"
+    },
+    {
+      "name": "FileManagerColumnKey",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Name",
+          "value": "'name'"
+        },
+        {
+          "name": "UpdatedAt",
+          "value": "'updatedAt'"
+        },
+        {
+          "name": "Size",
+          "value": "'size'"
+        },
+        {
+          "name": "Author",
+          "value": "'author'"
+        },
+        {
+          "name": "Owner",
+          "value": "'owner'"
+        },
+        {
+          "name": "Path",
+          "value": "'path'"
+        },
+        {
+          "name": "Actions",
+          "value": "'__actions'"
+        },
+        {
+          "name": "Version",
+          "value": "'version'"
+        }
+      ],
+      "sourceFile": "types/file-manager.ts"
+    },
+    {
+      "name": "FlexibleActionsDirection",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Normal",
+          "value": "'normal'"
+        },
+        {
+          "name": "Reverse",
+          "value": "'reverse'"
+        }
+      ],
+      "sourceFile": "types/flexible-actions.ts"
+    },
+    {
+      "name": "DialItemType",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "File",
+          "value": "'file'"
+        },
+        {
+          "name": "Folder",
+          "value": "'folder'"
+        }
+      ],
+      "sourceFile": "types/item.ts"
+    },
+    {
+      "name": "ResizableContainerSide",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Left",
+          "value": "'left'"
+        },
+        {
+          "name": "Right",
+          "value": "'right'"
+        }
+      ],
+      "sourceFile": "types/resizable-container.ts"
+    },
+    {
+      "name": "DialSkeletonVariant",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Default",
+          "value": "'default'"
+        },
+        {
+          "name": "Text",
+          "value": "'text'"
+        },
+        {
+          "name": "Circular",
+          "value": "'circular'"
+        },
+        {
+          "name": "Rectangular",
+          "value": "'rectangular'"
+        }
+      ],
+      "sourceFile": "types/skeleton.ts"
+    },
+    {
+      "name": "DialSkeletonAvatarSize",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Small",
+          "value": "'small'"
+        },
+        {
+          "name": "Default",
+          "value": "'default'"
+        },
+        {
+          "name": "Large",
+          "value": "'large'"
+        }
+      ],
+      "sourceFile": "types/skeleton.ts"
+    },
+    {
+      "name": "DialSkeletonAvatarShape",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Circle",
+          "value": "'circle'"
+        },
+        {
+          "name": "Square",
+          "value": "'square'"
+        }
+      ],
+      "sourceFile": "types/skeleton.ts"
+    },
+    {
+      "name": "StepStatus",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "VALID",
+          "value": "'valid'"
+        },
+        {
+          "name": "ERROR",
+          "value": "'error'"
+        }
+      ],
+      "sourceFile": "models/step.ts"
+    },
+    {
+      "name": "Step",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "id",
+          "value": "string"
+        },
+        {
+          "name": "name",
+          "value": "string"
+        },
+        {
+          "name": "status?",
+          "value": "StepStatus"
+        }
+      ],
+      "sourceFile": "models/step.ts"
+    },
+    {
+      "name": "RadioButtonWithContent",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "id",
+          "value": "string"
+        },
+        {
+          "name": "name",
+          "value": "string"
+        },
+        {
+          "name": "content?",
+          "value": "ReactNode"
+        },
+        {
+          "name": "caption?",
+          "value": "ReactNode"
+        }
+      ],
+      "sourceFile": "models/radio.ts"
+    },
+    {
+      "name": "SelectOption",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "value",
+          "value": "string"
+        },
+        {
+          "name": "label",
+          "value": "string"
+        },
+        {
+          "name": "description?",
+          "value": "string"
+        },
+        {
+          "name": "disabled?",
+          "value": "boolean"
+        },
+        {
+          "name": "icon?",
+          "value": "ReactNode"
+        }
+      ],
+      "sourceFile": "models/select.ts"
+    },
+    {
+      "name": "TabModel",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "id",
+          "value": "string"
+        },
+        {
+          "name": "label",
+          "value": "ReactNode"
+        },
+        {
+          "name": "invalid?",
+          "value": "boolean"
+        },
+        {
+          "name": "warning?",
+          "value": "boolean"
+        },
+        {
+          "name": "disabled?",
+          "value": "boolean"
+        }
+      ],
+      "sourceFile": "models/tab.ts"
+    },
+    {
+      "name": "DropdownItem",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "key",
+          "value": "string"
+        },
+        {
+          "name": "label?",
+          "value": "ReactNode"
+        },
+        {
+          "name": "icon?",
+          "value": "ReactNode"
+        },
+        {
+          "name": "disabled?",
+          "value": "boolean"
+        },
+        {
+          "name": "danger?",
+          "value": "boolean"
+        },
+        {
+          "name": "type?",
+          "value": "DropdownItemType"
+        },
+        {
+          "name": "className?",
+          "value": "string"
+        },
+        {
+          "name": "onClick?",
+          "value": "(info: { key: string; domEvent: MouseEvent }) => void"
+        }
+      ],
+      "sourceFile": "models/dropdown.ts"
+    },
+    {
+      "name": "DialModifiedEntity",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "createdAt?",
+          "value": "string"
+        },
+        {
+          "name": "updatedAt?",
+          "value": "string"
+        }
+      ],
+      "sourceFile": "models/base-entity.ts"
+    },
+    {
+      "name": "DialFile",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "bucket?",
+          "value": "string"
+        },
+        {
+          "name": "contentLength?",
+          "value": "number"
+        },
+        {
+          "name": "contentType?",
+          "value": "string"
+        },
+        {
+          "name": "nodeType",
+          "value": "DialFileNodeType"
+        },
+        {
+          "name": "parentPath?",
+          "value": "string | null"
+        },
+        {
+          "name": "resourceType?",
+          "value": "DialFileResourceType"
+        },
+        {
+          "name": "url?",
+          "value": "string"
+        },
+        {
+          "name": "items?",
+          "value": "DialFile[]"
+        },
+        {
+          "name": "path",
+          "value": "string"
+        },
+        {
+          "name": "name",
+          "value": "string"
+        },
+        {
+          "name": "folderId",
+          "value": "string"
+        },
+        {
+          "name": "owner?",
+          "value": "string"
+        },
+        {
+          "name": "author?",
+          "value": "string"
+        },
+        {
+          "name": "nextToken?",
+          "value": "string"
+        },
+        {
+          "name": "extension?",
+          "value": "string"
+        },
+        {
+          "name": "id?",
+          "value": "string"
+        },
+        {
+          "name": "permissions?",
+          "value": "DialFilePermission[]"
+        }
+      ],
+      "sourceFile": "models/file.ts"
+    },
+    {
+      "name": "DialFileNodeType",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "ITEM",
+          "value": "'item'"
+        },
+        {
+          "name": "FOLDER",
+          "value": "'folder'"
+        }
+      ],
+      "sourceFile": "models/file.ts"
+    },
+    {
+      "name": "DialFilePermission",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "READ",
+          "value": "'READ'"
+        },
+        {
+          "name": "WRITE",
+          "value": "'WRITE'"
+        },
+        {
+          "name": "SHARE",
+          "value": "'SHARE'"
+        }
+      ],
+      "sourceFile": "models/file.ts"
+    },
+    {
+      "name": "DialFileResourceType",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "FILE",
+          "value": "'FILE'"
+        },
+        {
+          "name": "PROMPT",
+          "value": "'PROMPT'"
+        },
+        {
+          "name": "CONVERSATION",
+          "value": "'CONVERSATION'"
+        },
+        {
+          "name": "APPLICATION",
+          "value": "'APPLICATION'"
+        },
+        {
+          "name": "TOOLSET",
+          "value": "'TOOL_SET'"
+        }
+      ],
+      "sourceFile": "models/file.ts"
+    },
+    {
+      "name": "DialCopiedItem",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "sourceUrl",
+          "value": "string"
+        },
+        {
+          "name": "destinationUrl",
+          "value": "string"
+        },
+        {
+          "name": "overwrite?",
+          "value": "boolean"
+        },
+        {
+          "name": "nodeType",
+          "value": "DialFileNodeType"
+        }
+      ],
+      "sourceFile": "models/file-manager.ts"
+    },
+    {
+      "name": "DialDeletedItem",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "sourceUrl",
+          "value": "string"
+        },
+        {
+          "name": "nodeType",
+          "value": "DialFileNodeType"
+        }
+      ],
+      "sourceFile": "models/file-manager.ts"
+    },
+    {
+      "name": "DialUploadFileItem",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "fileContent",
+          "value": "File"
+        },
+        {
+          "name": "name",
+          "value": "string"
+        }
+      ],
+      "sourceFile": "models/file-manager.ts"
+    },
+    {
+      "name": "DialFileManagerActionsRef",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "createFolder",
+          "value": "() => void"
+        }
+      ],
+      "sourceFile": "models/file-manager.ts"
+    },
+    {
+      "name": "DialFileAcceptType",
+      "kind": "type",
+      "sourceFile": "models/file-manager.ts",
+      "typeBody": "| `${string}/${string}` // MIME (wildcard)\n  | `.${string}`"
+    },
+    {
+      "name": "GridSelectionMode",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "MULTIPLE",
+          "value": "'MULTIPLE'"
+        },
+        {
+          "name": "SINGLE",
+          "value": "'SINGLE'"
+        }
+      ],
+      "sourceFile": "models/selection-mode.ts"
+    }
+  ],
+  "hooks": [
+    {
+      "name": "useDialFileManagerTabs",
+      "sourceFile": "components/FileManager/hooks/use-file-manager-tabs.tsx",
+      "signature": "(tabLabels?: Record<DialFileManagerTabs, string>, initialTab: DialFileManagerTabs = DialFileManagerTabs.MyFiles) => unknown"
+    },
+    {
+      "name": "useEditableItem",
+      "sourceFile": "hooks/use-editable-item.tsx",
+      "description": "A React hook that manages the behavior of an inline-editable text input.\nIt provides validation handling, cancel/restore logic, auto-focus behavior,\nkeyboard shortcuts, and outside-click detection.",
+      "signature": "function useEditableItem({\n  value: initialValue,\n  isEditing,\n  restoreOnCancel = true,\n  onValidate,\n  onSave,\n  onCancel,\n}: UseEditableItemOptions): UseEditableItemResult"
+    },
+    {
+      "name": "FileManagerProvider",
+      "sourceFile": "components/FileManager/FileManagerProvider.tsx",
+      "description": "Provider that encapsulates all File Manager business logic:\n- path & navigation\n- search (controlled + uncontrolled)\n- hidden files toggle\n- tree collapsed state\n- selection\n- clipboard (copy / cut / paste)\n- delete confirmation state\n- computed grid rows\n- new actions",
+      "signature": "FileManagerProvider: FC<FileManagerProviderProps>"
+    },
+    {
+      "name": "useFileManagerContext",
+      "sourceFile": "components/FileManager/hooks/use-file-manager-context.ts",
+      "description": "Hook to read the File Manager context.\nThrows if used outside of the provider.",
+      "signature": "() => unknown"
+    }
+  ],
+  "utils": [
+    {
+      "name": "mergeClasses",
+      "sourceFile": "utils/merge-classes.ts",
+      "description": "Merge class names (classnames → tailwind-merge).",
+      "signature": "function mergeClasses(...inputs: Parameters<typeof classNames>): string"
+    },
+    {
+      "name": "wrapInRootFolder",
+      "sourceFile": "utils/flat-to-hierarchy-convertor.ts",
+      "description": "Helper to create a root folder wrapping flat items.\nUseful when you want the entire tree to be nested under a single root.",
+      "signature": "function wrapInRootFolder(flatItems: FlatFileItem[], rootName = 'Prompts', rootPath = 'prompts/public/', rootFolderId = 'root'): DialFile[]"
+    }
+  ],
+  "constants": [
+    {
+      "name": "NAME_COLUMN",
+      "sourceFile": "constants/file-grid-columns.tsx",
+      "signature": "(headerName: string) => unknown"
+    },
+    {
+      "name": "SIZE_COLUMN",
+      "sourceFile": "constants/file-grid-columns.tsx",
+      "signature": "(headerName: string) => ColDef"
+    },
+    {
+      "name": "UPDATED_AT_COLUMN",
+      "sourceFile": "constants/file-grid-columns.tsx",
+      "signature": "(headerName: string) => unknown"
+    },
+    {
+      "name": "DIAL_ICON_SIZE",
+      "sourceFile": "constants/icon.ts",
+      "signature": "enum DIAL_ICON_SIZE { LG = 24, MD = 20, SM = 16 }"
+    },
+    {
+      "name": "BASE_ICON_PROPS",
+      "sourceFile": "constants/icon.ts",
+      "signature": "BASE_ICON_PROPS = {\n  size: BASE_ICON_SIZE,\n  stroke: 2,\n}"
+    },
+    {
+      "name": "BASE_ICON_SIZE",
+      "sourceFile": "constants/icon.ts",
+      "signature": "BASE_ICON_SIZE = 18"
+    },
+    {
+      "name": "NOT_ALLOWED_SYMBOLS",
+      "sourceFile": "constants/validation.ts",
+      "signature": "NOT_ALLOWED_SYMBOLS = ':;,=/{}%&\\\\\"'"
+    },
+    {
+      "name": "NOT_ALLOWED_SPACES",
+      "sourceFile": "constants/validation.ts",
+      "signature": "NOT_ALLOWED_SPACES = '(\\r\\n|\\n|\\r|\\t)|[\\x00-\\x1F]'"
+    },
+    {
+      "name": "NOT_ALLOWED_SYMBOLS_REGEXP",
+      "sourceFile": "constants/validation.ts",
+      "signature": "NOT_ALLOWED_SYMBOLS_REGEXP = new RegExp(\n  `${NOT_ALLOWED_SYMBOLS_CHARACTER_CLASS}|${NOT_ALLOWED_SPACES}`,\n)"
+    },
+    {
+      "name": "NOT_ALLOWED_SPACES_REGEXP",
+      "sourceFile": "constants/validation.ts",
+      "signature": "NOT_ALLOWED_SPACES_REGEXP = new RegExp(NOT_ALLOWED_SPACES)"
+    },
+    {
+      "name": "DialSchemeRenderer",
+      "sourceFile": "components/SchemeRenderer/SchemeRenderer.tsx",
+      "description": "Renders a JSON Schema as a form UI with collapsible sections, validation, and default values.\naliases: SchemaRenderer|JsonSchemaForm",
+      "signature": "DialSchemeRenderer: FC<DialSchemeRendererProps>"
+    },
+    {
+      "name": "DialSchemeRendererProps",
+      "sourceFile": "components/SchemeRenderer/types.ts"
+    },
+    {
+      "name": "JsonSchema",
+      "sourceFile": "components/SchemeRenderer/types.ts"
+    },
+    {
+      "name": "JsonSchemaDef",
+      "sourceFile": "components/SchemeRenderer/types.ts"
+    },
+    {
+      "name": "ValidationError",
+      "sourceFile": "components/SchemeRenderer/types.ts"
+    }
+  ]
+}