diff --git a/.circleci/config.yml b/.circleci/config.yml
index 72adc93ef564..ec3b5b730914 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -601,6 +601,8 @@ jobs:
           name: Install dependencies
           command: yarn install --no-immutable
           working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >>
+          environment:
+            YARN_ENABLE_IMMUTABLE_INSTALLS: false
       - run:
           name: Run Jest tests
           command: yarn jest
diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json
index af9fa6cd2fc8..1cfa025dd440 100644
--- a/code/lib/docs-tools/package.json
+++ b/code/lib/docs-tools/package.json
@@ -48,9 +48,8 @@
     "@storybook/core-events": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/types": "workspace:*",
-    "@types/doctrine": "^0.0.3",
-    "assert": "^2.1.0",
-    "doctrine": "^3.0.0",
+    "comment-parser": "^1.4.1",
+    "jsdoc-type-pratt-parser": "^4.0.0",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
diff --git a/code/lib/docs-tools/src/argTypes/jsdocParser.test.ts b/code/lib/docs-tools/src/argTypes/jsdocParser.test.ts
index 1460f70bf813..e0f83617605d 100644
--- a/code/lib/docs-tools/src/argTypes/jsdocParser.test.ts
+++ b/code/lib/docs-tools/src/argTypes/jsdocParser.test.ts
@@ -10,7 +10,7 @@ describe('parseJsDoc', () => {
     expect(extractedTags).toBeUndefined();
   });
 
-  it('should set includesJsDocto to false when the value dont contains JSDoc', () => {
+  it('should set includesJsDoc to false when the value dont contains JSDoc', () => {
     const { includesJsDoc, description, extractedTags } = parseJsDoc('Hey!');
 
     expect(includesJsDoc).toBeFalsy();
@@ -68,7 +68,7 @@ describe('parseJsDoc', () => {
       expect(extractedTags?.params).not.toBeNull();
       expect(extractedTags?.params?.[0].name).toBe('event');
       expect(extractedTags?.params?.[0].type).not.toBeNull();
-      expect(extractedTags?.params?.[0].type.name).toBe('SyntheticEvent');
+      expect(extractedTags?.params?.[0].type.value).toBe('SyntheticEvent');
       expect(extractedTags?.params?.[0].description).toBeNull();
     });
 
@@ -78,7 +78,7 @@ describe('parseJsDoc', () => {
       expect(extractedTags?.params).not.toBeNull();
       expect(extractedTags?.params?.[0].name).toBe('event');
       expect(extractedTags?.params?.[0].type).not.toBeNull();
-      expect(extractedTags?.params?.[0].type.name).toBe('SyntheticEvent');
+      expect(extractedTags?.params?.[0].type.value).toBe('SyntheticEvent');
       expect(extractedTags?.params?.[0].description).toBe('React event');
     });
 
@@ -90,7 +90,7 @@ describe('parseJsDoc', () => {
       ['event1', 'event2', 'event3'].forEach((x, i) => {
         expect(extractedTags?.params?.[i].name).toBe(x);
         expect(extractedTags?.params?.[i].type).not.toBeNull();
-        expect(extractedTags?.params?.[i].type.name).toBe('SyntheticEvent');
+        expect(extractedTags?.params?.[i].type.value).toBe('SyntheticEvent');
         expect(extractedTags?.params?.[i].description).toBe('React event');
       });
     });
@@ -129,7 +129,7 @@ describe('parseJsDoc', () => {
         expect(extractedTags?.params).not.toBeNull();
         expect(extractedTags?.params?.[0].name).toBe('event');
         expect(extractedTags?.params?.[0].type).not.toBeNull();
-        expect(extractedTags?.params?.[0].type.name).toBe('SyntheticEvent');
+        expect(extractedTags?.params?.[0].type.value).toBe('SyntheticEvent');
         expect(extractedTags?.params?.[0].description).toBe('React event');
       });
     });
@@ -251,7 +251,7 @@ describe('parseJsDoc', () => {
 
       expect(extractedTags?.returns).not.toBeNull();
       expect(extractedTags?.returns?.type).not.toBeNull();
-      expect(extractedTags?.returns?.type.name).toBe('string');
+      expect(extractedTags?.returns?.type.value).toBe('string');
     });
 
     it('should return a @returns with a type and a description', () => {
@@ -259,7 +259,7 @@ describe('parseJsDoc', () => {
 
       expect(extractedTags?.returns).not.toBeNull();
       expect(extractedTags?.returns?.type).not.toBeNull();
-      expect(extractedTags?.returns?.type.name).toBe('string');
+      expect(extractedTags?.returns?.type.value).toBe('string');
       expect(extractedTags?.returns?.description).toBe('A bar description');
     });
 
@@ -270,7 +270,7 @@ describe('parseJsDoc', () => {
 
       expect(extractedTags?.returns).not.toBeNull();
       expect(extractedTags?.returns?.type).not.toBeNull();
-      expect(extractedTags?.returns?.type.name).toBe('string');
+      expect(extractedTags?.returns?.type.value).toBe('string');
       expect(extractedTags?.returns?.description).toBe('This is\na multiline\ndescription');
     });
 
@@ -279,7 +279,7 @@ describe('parseJsDoc', () => {
 
       expect(extractedTags?.returns).not.toBeNull();
       expect(extractedTags?.returns?.type).not.toBeNull();
-      expect(extractedTags?.returns?.type.name).toBe('number');
+      expect(extractedTags?.returns?.type.value).toBe('number');
     });
 
     describe('getTypeName', () => {
@@ -353,9 +353,9 @@ describe('parseJsDoc', () => {
     expect(extractedTags?.params).not.toBeNull();
     expect(Object.keys(extractedTags?.params ?? []).length).toBe(1);
     expect(extractedTags?.params?.[0].name).toBe('event');
-    expect(extractedTags?.params?.[0].type.name).toBe('SyntheticEvent');
+    expect(extractedTags?.params?.[0].type.value).toBe('SyntheticEvent');
     expect(extractedTags?.params?.[0].description).toBe('Original event.');
     expect(extractedTags?.returns).not.toBeNull();
-    expect(extractedTags?.returns?.type.name).toBe('string');
+    expect(extractedTags?.returns?.type.value).toBe('string');
   });
 });
diff --git a/code/lib/docs-tools/src/argTypes/jsdocParser.ts b/code/lib/docs-tools/src/argTypes/jsdocParser.ts
index 5a2b6258fc64..0990865a14c4 100644
--- a/code/lib/docs-tools/src/argTypes/jsdocParser.ts
+++ b/code/lib/docs-tools/src/argTypes/jsdocParser.ts
@@ -1,5 +1,11 @@
-import type { Annotation } from 'doctrine';
-import doctrine from 'doctrine';
+import type { Block, Spec } from 'comment-parser';
+import type { RootResult as JSDocType } from 'jsdoc-type-pratt-parser';
+import { parse as parseJSDoc } from 'comment-parser';
+import {
+  parse as parseJSDocType,
+  transform as transformJSDocType,
+  stringifyRules,
+} from 'jsdoc-type-pratt-parser';
 import type { JsDocParam, JsDocReturns } from './docgen';
 
 export interface ExtractedJsDocParam extends JsDocParam {
@@ -40,21 +46,25 @@ function containsJsDoc(value?: string | null): boolean {
   return value != null && value.includes('@');
 }
 
-function parse(content: string | null, tags?: string[]): Annotation {
-  let ast;
+function parse(content: string | null): Block {
+  const contentString = content ?? '';
+  const mappedLines = contentString
+    .split('\n')
+    .map((line) => ` * ${line}`)
+    .join('\n');
+  const normalisedContent = '/**\n' + mappedLines + '\n*/';
 
-  try {
-    ast = doctrine.parse(content ?? '', {
-      tags,
-      sloppy: true,
-    });
-  } catch (e) {
-    console.error(e);
+  const ast = parseJSDoc(normalisedContent, {
+    spacing: 'preserve',
+  });
 
+  if (!ast || ast.length === 0) {
     throw new Error('Cannot parse JSDoc tags.');
   }
 
-  return ast;
+  // Return the first block, since we shouldn't ever really encounter
+  // multiple blocks of JSDoc
+  return ast[0];
 }
 
 const DEFAULT_OPTIONS = {
@@ -69,9 +79,9 @@ export const parseJsDoc: ParseJsDoc = (value, options = DEFAULT_OPTIONS) => {
     };
   }
 
-  const jsDocAst = parse(value, options.tags);
+  const jsDocAst = parse(value);
 
-  const extractedTags = extractJsDocTags(jsDocAst);
+  const extractedTags = extractJsDocTags(jsDocAst, options.tags);
 
   if (extractedTags.ignore) {
     // There is no point in doing other stuff since this prop will not be rendered.
@@ -85,12 +95,12 @@ export const parseJsDoc: ParseJsDoc = (value, options = DEFAULT_OPTIONS) => {
     includesJsDoc: true,
     ignore: false,
     // Always use the parsed description to ensure JSDoc is removed from the description.
-    description: jsDocAst.description,
+    description: jsDocAst.description.trim(),
     extractedTags,
   };
 };
 
-function extractJsDocTags(ast: doctrine.Annotation): ExtractedJsDoc {
+function extractJsDocTags(ast: Block, tags?: string[]): ExtractedJsDoc {
   const extractedTags: ExtractedJsDoc = {
     params: null,
     deprecated: null,
@@ -98,20 +108,23 @@ function extractJsDocTags(ast: doctrine.Annotation): ExtractedJsDoc {
     ignore: false,
   };
 
-  for (let i = 0; i < ast.tags.length; i += 1) {
-    const tag = ast.tags[i];
+  for (const tagSpec of ast.tags) {
+    // Skip any tags we don't care about
+    if (tags !== undefined && !tags.includes(tagSpec.tag)) {
+      continue;
+    }
 
-    if (tag.title === 'ignore') {
+    if (tagSpec.tag === 'ignore') {
       extractedTags.ignore = true;
       // Once we reach an @ignore tag, there is no point in parsing the other tags since we will not render the prop.
       break;
     } else {
-      switch (tag.title) {
+      switch (tagSpec.tag) {
         // arg & argument are aliases for param.
         case 'param':
         case 'arg':
         case 'argument': {
-          const paramTag = extractParam(tag);
+          const paramTag = extractParam(tagSpec);
           if (paramTag != null) {
             if (extractedTags.params == null) {
               extractedTags.params = [];
@@ -121,14 +134,14 @@ function extractJsDocTags(ast: doctrine.Annotation): ExtractedJsDoc {
           break;
         }
         case 'deprecated': {
-          const deprecatedTag = extractDeprecated(tag);
+          const deprecatedTag = extractDeprecated(tagSpec);
           if (deprecatedTag != null) {
             extractedTags.deprecated = deprecatedTag;
           }
           break;
         }
         case 'returns': {
-          const returnsTag = extractReturns(tag);
+          const returnsTag = extractReturns(tagSpec);
           if (returnsTag != null) {
             extractedTags.returns = returnsTag;
           }
@@ -143,49 +156,61 @@ function extractJsDocTags(ast: doctrine.Annotation): ExtractedJsDoc {
   return extractedTags;
 }
 
-function extractParam(tag: doctrine.Tag): ExtractedJsDocParam | null {
-  const paramName = tag.name;
-
-  // When the @param doesn't have a name but have a type and a description, "null-null" is returned.
-  if (paramName != null && paramName !== 'null-null') {
-    return {
-      name: tag.name,
-      type: tag.type,
-      description: tag.description,
-      getPrettyName: () => {
-        if (paramName.includes('null')) {
-          // There is a few cases in which the returned param name contains "null".
-          // - @param {SyntheticEvent} event- Original SyntheticEvent
-          // - @param {SyntheticEvent} event.\n@returns {string}
-          return paramName.replace('-null', '').replace('.null', '');
-        }
+function normaliseParamName(name: string): string {
+  return name.replace(/[\.-]$/, '');
+}
 
-        return tag.name;
-      },
-      getTypeName: () => {
-        return tag.type != null ? extractTypeName(tag.type) : null;
-      },
-    };
+function extractParam(tag: Spec): ExtractedJsDocParam | null {
+  // Ignore tags with empty names or `-`.
+  // We ignore `-` since it means a comment was likely missing a name but
+  // using separators. For example: `@param {foo} - description`
+  if (!tag.name || tag.name === '-') {
+    return null;
   }
 
-  return null;
+  const type = extractType(tag.type);
+
+  return {
+    name: tag.name,
+    type: type,
+    description: normaliseDescription(tag.description),
+    getPrettyName: () => {
+      return normaliseParamName(tag.name);
+    },
+    getTypeName: () => {
+      return type ? extractTypeName(type) : null;
+    },
+  };
 }
 
-function extractDeprecated(tag: doctrine.Tag): string | null {
-  if (tag.title != null) {
-    return tag.description;
+function extractDeprecated(tag: Spec): string | null {
+  if (tag.name) {
+    return joinNameAndDescription(tag.name, tag.description);
   }
 
   return null;
 }
 
-function extractReturns(tag: doctrine.Tag): ExtractedJsDocReturns | null {
-  if (tag.type != null) {
+function joinNameAndDescription(name: string, desc: string): string | null {
+  const joined = name === '' ? desc : `${name} ${desc}`;
+  return normaliseDescription(joined);
+}
+
+function normaliseDescription(text: string): string | null {
+  const normalised = text.replace(/^- /g, '').trim();
+
+  return normalised === '' ? null : normalised;
+}
+
+function extractReturns(tag: Spec): ExtractedJsDocReturns | null {
+  const type = extractType(tag.type);
+
+  if (type) {
     return {
-      type: tag.type,
-      description: tag.description,
+      type: type,
+      description: joinNameAndDescription(tag.name, tag.description),
       getTypeName: () => {
-        return extractTypeName(tag.type);
+        return extractTypeName(type);
       },
     };
   }
@@ -193,57 +218,25 @@ function extractReturns(tag: doctrine.Tag): ExtractedJsDocReturns | null {
   return null;
 }
 
-function extractTypeName(type?: doctrine.Type | null): string | null {
-  if (type?.type === 'NameExpression') {
-    return type.name;
-  }
-
-  if (type?.type === 'RecordType') {
-    const recordFields = type.fields.map((field: doctrine.Type) => {
-      if (field.type === 'FieldType' && field.value != null) {
-        const valueTypeName = extractTypeName(field.value);
-
-        return `${field.key}: ${valueTypeName}`;
-      }
-
-      return (field as doctrine.type.FieldType).key;
-    });
-
-    return `({${recordFields.join(', ')}})`;
-  }
-
-  if (type?.type === 'UnionType') {
-    const unionElements = type.elements.map(extractTypeName);
-
-    return `(${unionElements.join('|')})`;
-  }
-
-  // Only support untyped array: []. Might add more support later if required.
-  if (type?.type === 'ArrayType') {
-    return '[]';
-  }
-
-  if (type?.type === 'TypeApplication') {
-    if (type.expression != null) {
-      if ((type.expression as doctrine.type.NameExpression).name === 'Array') {
-        const arrayType = extractTypeName(type.applications[0]);
-
-        return `${arrayType}[]`;
-      }
-    }
-  }
-
-  if (
-    type?.type === 'NullableType' ||
-    type?.type === 'NonNullableType' ||
-    type?.type === 'OptionalType'
-  ) {
-    return extractTypeName(type.expression);
-  }
-
-  if (type?.type === 'AllLiteral') {
-    return 'any';
+const jsdocStringifyRules = stringifyRules();
+const originalJsdocStringifyObject = jsdocStringifyRules.JsdocTypeObject;
+jsdocStringifyRules.JsdocTypeAny = () => 'any';
+jsdocStringifyRules.JsdocTypeObject = (result, transform) =>
+  `(${originalJsdocStringifyObject(result, transform)})`;
+jsdocStringifyRules.JsdocTypeOptional = (result, transform) => transform(result.element);
+jsdocStringifyRules.JsdocTypeNullable = (result, transform) => transform(result.element);
+jsdocStringifyRules.JsdocTypeNotNullable = (result, transform) => transform(result.element);
+jsdocStringifyRules.JsdocTypeUnion = (result, transform) =>
+  result.elements.map(transform).join('|');
+
+function extractType(typeString: string): JSDocType | null {
+  try {
+    return parseJSDocType(typeString, 'typescript');
+  } catch (_err) {
+    return null;
   }
+}
 
-  return null;
+function extractTypeName(type: JSDocType): string {
+  return transformJSDocType(jsdocStringifyRules, type);
 }
diff --git a/code/renderers/react/template/stories/docgen-components/jsdoc/argTypes.snapshot b/code/renderers/react/template/stories/docgen-components/jsdoc/argTypes.snapshot
index 492640c6e1be..09c821398dad 100644
--- a/code/renderers/react/template/stories/docgen-components/jsdoc/argTypes.snapshot
+++ b/code/renderers/react/template/stories/docgen-components/jsdoc/argTypes.snapshot
@@ -101,20 +101,10 @@
     "name": "case13",
     "table": {
       "defaultValue": undefined,
-      "jsDocTags": {
-        "deprecated": null,
-        "ignore": false,
-        "params": [
-          {
-            "description": null,
-            "name": "SyntheticEvent",
-          },
-        ],
-        "returns": null,
-      },
+      "jsDocTags": undefined,
       "type": {
         "detail": undefined,
-        "summary": "(SyntheticEvent)",
+        "summary": "func",
       },
     },
     "type": {
@@ -208,8 +198,8 @@
           "description": null,
           "getTypeName": [Function],
           "type": {
-            "name": "string",
-            "type": "NameExpression",
+            "type": "JsdocTypeName",
+            "value": "string",
           },
         },
       },
@@ -391,8 +381,8 @@ description",
           "description": null,
           "getTypeName": [Function],
           "type": {
-            "name": "SyntheticEvent",
-            "type": "NameExpression",
+            "type": "JsdocTypeName",
+            "value": "SyntheticEvent",
           },
         },
       },
@@ -419,8 +409,8 @@ description",
           "description": "React's original event",
           "getTypeName": [Function],
           "type": {
-            "name": "SyntheticEvent",
-            "type": "NameExpression",
+            "type": "JsdocTypeName",
+            "value": "SyntheticEvent",
           },
         },
       },
@@ -452,8 +442,8 @@ description",
           "description": "React's original event",
           "getTypeName": [Function],
           "type": {
-            "name": "SyntheticEvent",
-            "type": "NameExpression",
+            "type": "JsdocTypeName",
+            "value": "SyntheticEvent",
           },
         },
       },
@@ -489,8 +479,8 @@ description",
           "description": "React's original event",
           "getTypeName": [Function],
           "type": {
-            "name": "SyntheticEvent",
-            "type": "NameExpression",
+            "type": "JsdocTypeName",
+            "value": "SyntheticEvent",
           },
         },
       },
@@ -517,8 +507,8 @@ description",
           "description": "Second returns",
           "getTypeName": [Function],
           "type": {
-            "name": "string",
-            "type": "NameExpression",
+            "type": "JsdocTypeName",
+            "value": "string",
           },
         },
       },
@@ -699,7 +689,7 @@ description",
       },
       "type": {
         "detail": undefined,
-        "summary": "(myType)",
+        "summary": "(myType: ...number)",
       },
     },
     "type": {
@@ -798,25 +788,38 @@ description",
           "description": null,
           "getTypeName": [Function],
           "type": {
-            "fields": [
+            "elements": [
               {
                 "key": "a",
-                "type": "FieldType",
-                "value": {
-                  "name": "number",
-                  "type": "NameExpression",
+                "meta": {
+                  "quote": undefined,
+                },
+                "optional": false,
+                "readonly": false,
+                "right": {
+                  "type": "JsdocTypeName",
+                  "value": "number",
                 },
+                "type": "JsdocTypeObjectField",
               },
               {
                 "key": "b",
-                "type": "FieldType",
-                "value": {
-                  "name": "string",
-                  "type": "NameExpression",
+                "meta": {
+                  "quote": undefined,
                 },
+                "optional": false,
+                "readonly": false,
+                "right": {
+                  "type": "JsdocTypeName",
+                  "value": "string",
+                },
+                "type": "JsdocTypeObjectField",
               },
             ],
-            "type": "RecordType",
+            "meta": {
+              "separator": "comma",
+            },
+            "type": "JsdocTypeObject",
           },
         },
       },
@@ -843,17 +846,21 @@ description",
           "description": null,
           "getTypeName": [Function],
           "type": {
-            "applications": [
+            "elements": [
               {
-                "name": "string",
-                "type": "NameExpression",
+                "type": "JsdocTypeName",
+                "value": "string",
               },
             ],
-            "expression": {
-              "name": "Array",
-              "type": "NameExpression",
+            "left": {
+              "type": "JsdocTypeName",
+              "value": "Array",
+            },
+            "meta": {
+              "brackets": "square",
+              "dot": false,
             },
-            "type": "TypeApplication",
+            "type": "JsdocTypeGeneric",
           },
         },
       },
@@ -909,17 +916,20 @@ description",
           "description": null,
           "getTypeName": [Function],
           "type": {
-            "elements": [
-              {
-                "name": "number",
-                "type": "NameExpression",
-              },
-              {
-                "name": "boolean",
-                "type": "NameExpression",
-              },
-            ],
-            "type": "UnionType",
+            "element": {
+              "elements": [
+                {
+                  "type": "JsdocTypeName",
+                  "value": "number",
+                },
+                {
+                  "type": "JsdocTypeName",
+                  "value": "boolean",
+                },
+              ],
+              "type": "JsdocTypeUnion",
+            },
+            "type": "JsdocTypeParenthesis",
           },
         },
       },
@@ -946,7 +956,7 @@ description",
           "description": null,
           "getTypeName": [Function],
           "type": {
-            "type": "AllLiteral",
+            "type": "JsdocTypeAny",
           },
         },
       },
@@ -973,8 +983,8 @@ description",
           "description": null,
           "getTypeName": [Function],
           "type": {
-            "name": "string",
-            "type": "NameExpression",
+            "type": "JsdocTypeName",
+            "value": "string",
           },
         },
       },
@@ -1001,8 +1011,8 @@ description",
           "description": null,
           "getTypeName": [Function],
           "type": {
-            "name": "void",
-            "type": "NameExpression",
+            "type": "JsdocTypeName",
+            "value": "void",
           },
         },
       },
diff --git a/code/renderers/react/template/stories/docgen-components/jsdoc/properties.snapshot b/code/renderers/react/template/stories/docgen-components/jsdoc/properties.snapshot
index cf7888853878..cef2829d44dc 100644
--- a/code/renderers/react/template/stories/docgen-components/jsdoc/properties.snapshot
+++ b/code/renderers/react/template/stories/docgen-components/jsdoc/properties.snapshot
@@ -227,17 +227,6 @@ description",
     {
       "defaultValue": null,
       "description": "param with type",
-      "jsDocTags": {
-        "deprecated": null,
-        "ignore": false,
-        "params": [
-          {
-            "description": null,
-            "name": "SyntheticEvent",
-          },
-        ],
-        "returns": null,
-      },
       "name": "case13",
       "required": false,
       "sbType": {
@@ -245,7 +234,7 @@ description",
       },
       "type": {
         "detail": undefined,
-        "summary": "(SyntheticEvent)",
+        "summary": "func",
       },
     },
     {
@@ -325,8 +314,8 @@ description",
           "description": null,
           "getTypeName": [Function],
           "type": {
-            "name": "string",
-            "type": "NameExpression",
+            "type": "JsdocTypeName",
+            "value": "string",
           },
         },
       },
@@ -470,8 +459,8 @@ description",
           "description": null,
           "getTypeName": [Function],
           "type": {
-            "name": "SyntheticEvent",
-            "type": "NameExpression",
+            "type": "JsdocTypeName",
+            "value": "SyntheticEvent",
           },
         },
       },
@@ -496,8 +485,8 @@ description",
           "description": "React's original event",
           "getTypeName": [Function],
           "type": {
-            "name": "SyntheticEvent",
-            "type": "NameExpression",
+            "type": "JsdocTypeName",
+            "value": "SyntheticEvent",
           },
         },
       },
@@ -527,8 +516,8 @@ description",
           "description": "React's original event",
           "getTypeName": [Function],
           "type": {
-            "name": "SyntheticEvent",
-            "type": "NameExpression",
+            "type": "JsdocTypeName",
+            "value": "SyntheticEvent",
           },
         },
       },
@@ -562,8 +551,8 @@ description",
           "description": "React's original event",
           "getTypeName": [Function],
           "type": {
-            "name": "SyntheticEvent",
-            "type": "NameExpression",
+            "type": "JsdocTypeName",
+            "value": "SyntheticEvent",
           },
         },
       },
@@ -588,8 +577,8 @@ description",
           "description": "Second returns",
           "getTypeName": [Function],
           "type": {
-            "name": "string",
-            "type": "NameExpression",
+            "type": "JsdocTypeName",
+            "value": "string",
           },
         },
       },
@@ -744,7 +733,7 @@ description",
       },
       "type": {
         "detail": undefined,
-        "summary": "(myType)",
+        "summary": "(myType: ...number)",
       },
     },
     {
@@ -830,25 +819,38 @@ description",
           "description": null,
           "getTypeName": [Function],
           "type": {
-            "fields": [
+            "elements": [
               {
                 "key": "a",
-                "type": "FieldType",
-                "value": {
-                  "name": "number",
-                  "type": "NameExpression",
+                "meta": {
+                  "quote": undefined,
+                },
+                "optional": false,
+                "readonly": false,
+                "right": {
+                  "type": "JsdocTypeName",
+                  "value": "number",
                 },
+                "type": "JsdocTypeObjectField",
               },
               {
                 "key": "b",
-                "type": "FieldType",
-                "value": {
-                  "name": "string",
-                  "type": "NameExpression",
+                "meta": {
+                  "quote": undefined,
                 },
+                "optional": false,
+                "readonly": false,
+                "right": {
+                  "type": "JsdocTypeName",
+                  "value": "string",
+                },
+                "type": "JsdocTypeObjectField",
               },
             ],
-            "type": "RecordType",
+            "meta": {
+              "separator": "comma",
+            },
+            "type": "JsdocTypeObject",
           },
         },
       },
@@ -873,17 +875,21 @@ description",
           "description": null,
           "getTypeName": [Function],
           "type": {
-            "applications": [
+            "elements": [
               {
-                "name": "string",
-                "type": "NameExpression",
+                "type": "JsdocTypeName",
+                "value": "string",
               },
             ],
-            "expression": {
-              "name": "Array",
-              "type": "NameExpression",
+            "left": {
+              "type": "JsdocTypeName",
+              "value": "Array",
+            },
+            "meta": {
+              "brackets": "square",
+              "dot": false,
             },
-            "type": "TypeApplication",
+            "type": "JsdocTypeGeneric",
           },
         },
       },
@@ -908,17 +914,20 @@ description",
           "description": null,
           "getTypeName": [Function],
           "type": {
-            "elements": [
-              {
-                "name": "number",
-                "type": "NameExpression",
-              },
-              {
-                "name": "boolean",
-                "type": "NameExpression",
-              },
-            ],
-            "type": "UnionType",
+            "element": {
+              "elements": [
+                {
+                  "type": "JsdocTypeName",
+                  "value": "number",
+                },
+                {
+                  "type": "JsdocTypeName",
+                  "value": "boolean",
+                },
+              ],
+              "type": "JsdocTypeUnion",
+            },
+            "type": "JsdocTypeParenthesis",
           },
         },
       },
@@ -943,7 +952,7 @@ description",
           "description": null,
           "getTypeName": [Function],
           "type": {
-            "type": "AllLiteral",
+            "type": "JsdocTypeAny",
           },
         },
       },
@@ -968,8 +977,8 @@ description",
           "description": null,
           "getTypeName": [Function],
           "type": {
-            "name": "string",
-            "type": "NameExpression",
+            "type": "JsdocTypeName",
+            "value": "string",
           },
         },
       },
@@ -994,8 +1003,8 @@ description",
           "description": null,
           "getTypeName": [Function],
           "type": {
-            "name": "void",
-            "type": "NameExpression",
+            "type": "JsdocTypeName",
+            "value": "void",
           },
         },
       },
diff --git a/code/yarn.lock b/code/yarn.lock
index b1ddfe6b5077..6e6ecb7b69a6 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -501,7 +501,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0, @babel/helper-create-class-features-plugin@npm:^7.24.0, @babel/helper-create-class-features-plugin@npm:^7.24.1, @babel/helper-create-class-features-plugin@npm:^7.24.4":
+"@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0, @babel/helper-create-class-features-plugin@npm:^7.24.1, @babel/helper-create-class-features-plugin@npm:^7.24.4":
   version: 7.24.4
   resolution: "@babel/helper-create-class-features-plugin@npm:7.24.4"
   dependencies:
@@ -520,6 +520,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-create-class-features-plugin@npm:^7.24.0":
+  version: 7.24.0
+  resolution: "@babel/helper-create-class-features-plugin@npm:7.24.0"
+  dependencies:
+    "@babel/helper-annotate-as-pure": "npm:^7.22.5"
+    "@babel/helper-environment-visitor": "npm:^7.22.20"
+    "@babel/helper-function-name": "npm:^7.23.0"
+    "@babel/helper-member-expression-to-functions": "npm:^7.23.0"
+    "@babel/helper-optimise-call-expression": "npm:^7.22.5"
+    "@babel/helper-replace-supers": "npm:^7.22.20"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
+    "@babel/helper-split-export-declaration": "npm:^7.22.6"
+    semver: "npm:^6.3.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10c0/341548496df202805489422a160bba75b111d994c64d788a397c35f01784632af48bf06023af8aa2fe72c2c254f8c885b4e0f7f3df5ef17a37370f2feaf80328
+  languageName: node
+  linkType: hard
+
 "@babel/helper-create-regexp-features-plugin@npm:^7.18.6, @babel/helper-create-regexp-features-plugin@npm:^7.22.15, @babel/helper-create-regexp-features-plugin@npm:^7.22.5":
   version: 7.22.15
   resolution: "@babel/helper-create-regexp-features-plugin@npm:7.22.15"
@@ -548,6 +567,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-define-polyfill-provider@npm:^0.6.0":
+  version: 0.6.0
+  resolution: "@babel/helper-define-polyfill-provider@npm:0.6.0"
+  dependencies:
+    "@babel/helper-compilation-targets": "npm:^7.22.6"
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    debug: "npm:^4.1.1"
+    lodash.debounce: "npm:^4.0.8"
+    resolve: "npm:^1.14.2"
+  peerDependencies:
+    "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
+  checksum: 10c0/bf6af52fadbbebc5bf71166b91eac4fc21431ec9b0d2a94063f3a3d900ed44aa1384ad23e920a85e7a657fcf3e80edb2eaaac9d902bd1e632f3b50c836b45c53
+  languageName: node
+  linkType: hard
+
 "@babel/helper-define-polyfill-provider@npm:^0.6.1, @babel/helper-define-polyfill-provider@npm:^0.6.2":
   version: 0.6.2
   resolution: "@babel/helper-define-polyfill-provider@npm:0.6.2"
@@ -589,7 +623,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-member-expression-to-functions@npm:^7.23.0":
+"@babel/helper-member-expression-to-functions@npm:^7.22.15, @babel/helper-member-expression-to-functions@npm:^7.23.0":
   version: 7.23.0
   resolution: "@babel/helper-member-expression-to-functions@npm:7.23.0"
   dependencies:
@@ -598,7 +632,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.22.15, @babel/helper-module-imports@npm:^7.24.1, @babel/helper-module-imports@npm:^7.24.3, @babel/helper-module-imports@npm:^7.8.3":
+"@babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.22.15, @babel/helper-module-imports@npm:^7.8.3":
+  version: 7.22.15
+  resolution: "@babel/helper-module-imports@npm:7.22.15"
+  dependencies:
+    "@babel/types": "npm:^7.22.15"
+  checksum: 10c0/4e0d7fc36d02c1b8c8b3006dfbfeedf7a367d3334a04934255de5128115ea0bafdeb3e5736a2559917f0653e4e437400d54542da0468e08d3cbc86d3bbfa8f30
+  languageName: node
+  linkType: hard
+
+"@babel/helper-module-imports@npm:^7.24.1, @babel/helper-module-imports@npm:^7.24.3":
   version: 7.24.3
   resolution: "@babel/helper-module-imports@npm:7.24.3"
   dependencies:
@@ -651,6 +694,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-replace-supers@npm:^7.22.20":
+  version: 7.22.20
+  resolution: "@babel/helper-replace-supers@npm:7.22.20"
+  dependencies:
+    "@babel/helper-environment-visitor": "npm:^7.22.20"
+    "@babel/helper-member-expression-to-functions": "npm:^7.22.15"
+    "@babel/helper-optimise-call-expression": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10c0/6b0858811ad46873817c90c805015d63300e003c5a85c147a17d9845fa2558a02047c3cc1f07767af59014b2dd0fa75b503e5bc36e917f360e9b67bb6f1e79f4
+  languageName: node
+  linkType: hard
+
 "@babel/helper-replace-supers@npm:^7.24.1":
   version: 7.24.1
   resolution: "@babel/helper-replace-supers@npm:7.24.1"
@@ -746,7 +802,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.11.5, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.21.4, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.23.5, @babel/parser@npm:^7.23.6, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.24.0, @babel/parser@npm:^7.24.1, @babel/parser@npm:^7.24.4, @babel/parser@npm:^7.4.5, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.9.6":
+"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.11.5, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.21.4, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.23.5, @babel/parser@npm:^7.23.6, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.24.0, @babel/parser@npm:^7.4.5, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.9.6":
+  version: 7.24.0
+  resolution: "@babel/parser@npm:7.24.0"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 10c0/77593d0b9de9906823c4d653bb6cda1c7593837598516330f655f70cba6224a37def7dbe5b4dad0038482d407d8d209eb8be5f48ca9a13357d769f829c5adb8e
+  languageName: node
+  linkType: hard
+
+"@babel/parser@npm:^7.24.1, @babel/parser@npm:^7.24.4":
   version: 7.24.4
   resolution: "@babel/parser@npm:7.24.4"
   bin:
@@ -1218,7 +1283,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-block-scoping@npm:^7.23.4, @babel/plugin-transform-block-scoping@npm:^7.24.4, @babel/plugin-transform-block-scoping@npm:^7.8.3":
+"@babel/plugin-transform-block-scoping@npm:^7.23.4, @babel/plugin-transform-block-scoping@npm:^7.8.3":
+  version: 7.23.4
+  resolution: "@babel/plugin-transform-block-scoping@npm:7.23.4"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/83006804dddf980ab1bcd6d67bc381e24b58c776507c34f990468f820d0da71dba3697355ca4856532fa2eeb2a1e3e73c780f03760b5507a511cbedb0308e276
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-block-scoping@npm:^7.24.4":
   version: 7.24.4
   resolution: "@babel/plugin-transform-block-scoping@npm:7.24.4"
   dependencies:
@@ -6090,10 +6166,9 @@ __metadata:
     "@storybook/core-events": "workspace:*"
     "@storybook/preview-api": "workspace:*"
     "@storybook/types": "workspace:*"
-    "@types/doctrine": "npm:^0.0.3"
-    assert: "npm:^2.1.0"
     babel-plugin-react-docgen: "npm:4.2.1"
-    doctrine: "npm:^3.0.0"
+    comment-parser: "npm:^1.4.1"
+    jsdoc-type-pratt-parser: "npm:^4.0.0"
     lodash: "npm:^4.17.21"
     require-from-string: "npm:^2.0.2"
     typescript: "npm:^5.3.2"
@@ -7762,13 +7837,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/doctrine@npm:^0.0.3":
-  version: 0.0.3
-  resolution: "@types/doctrine@npm:0.0.3"
-  checksum: 10c0/566dcdc988c97ff01d14493ceb2223643347f07cf0a88c86cd7cb7c2821cfc837fd39295e6809a29614fdfdc6c4e981408155ca909b2e5da5d947af939b6c966
-  languageName: node
-  linkType: hard
-
 "@types/doctrine@npm:^0.0.9":
   version: 0.0.9
   resolution: "@types/doctrine@npm:0.0.9"
@@ -10242,7 +10310,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"assert@npm:^2.0.0, assert@npm:^2.1.0":
+"assert@npm:^2.0.0":
   version: 2.1.0
   resolution: "assert@npm:2.1.0"
   dependencies:
@@ -10577,7 +10645,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-corejs2@npm:^0.4.10, babel-plugin-polyfill-corejs2@npm:^0.4.8":
+"babel-plugin-polyfill-corejs2@npm:^0.4.10":
   version: 0.4.11
   resolution: "babel-plugin-polyfill-corejs2@npm:0.4.11"
   dependencies:
@@ -10590,6 +10658,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-plugin-polyfill-corejs2@npm:^0.4.8":
+  version: 0.4.9
+  resolution: "babel-plugin-polyfill-corejs2@npm:0.4.9"
+  dependencies:
+    "@babel/compat-data": "npm:^7.22.6"
+    "@babel/helper-define-polyfill-provider": "npm:^0.6.0"
+    semver: "npm:^6.3.1"
+  peerDependencies:
+    "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
+  checksum: 10c0/2cd47af763eb40aa41f1d6d9cbf1bdd217ff6c28f614b057c0328ee42a4d82cbcdcbc7d081d93e2a2d80446c899f25c3ebec048a63d260ef65a0a364134f71cd
+  languageName: node
+  linkType: hard
+
 "babel-plugin-polyfill-corejs3@npm:^0.10.1, babel-plugin-polyfill-corejs3@npm:^0.10.4":
   version: 0.10.4
   resolution: "babel-plugin-polyfill-corejs3@npm:0.10.4"
@@ -12185,6 +12266,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"comment-parser@npm:^1.4.1":
+  version: 1.4.1
+  resolution: "comment-parser@npm:1.4.1"
+  checksum: 10c0/d6c4be3f5be058f98b24f2d557f745d8fe1cc9eb75bebbdccabd404a0e1ed41563171b16285f593011f8b6a5ec81f564fb1f2121418ac5cbf0f49255bf0840dd
+  languageName: node
+  linkType: hard
+
 "common-path-prefix@npm:^3.0.0":
   version: 3.0.0
   resolution: "common-path-prefix@npm:3.0.0"
@@ -18507,6 +18595,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jsdoc-type-pratt-parser@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "jsdoc-type-pratt-parser@npm:4.0.0"
+  checksum: 10c0/b23ef7bbbe2f56d72630d1c5a233dc9fecaff399063d373c57bef136908c1b05e723dac107177303c03ccf8d75aa51507510b282aa567600477479c5ea0c36d1
+  languageName: node
+  linkType: hard
+
 "jsdom@npm:^23.0.1":
   version: 23.0.1
   resolution: "jsdom@npm:23.0.1"
@@ -27899,23 +27994,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:^5.0.3, typescript@npm:^5.3.2, typescript@npm:^5.4.3":
-  version: 5.4.3
-  resolution: "typescript@npm:5.4.3"
+"typescript@npm:^5.0.3, typescript@npm:^5.3.2, typescript@npm:~5.3.2":
+  version: 5.3.3
+  resolution: "typescript@npm:5.3.3"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/22443a8760c3668e256c0b34b6b45c359ef6cecc10c42558806177a7d500ab1a7d7aac1f976d712e26989ddf6731d2fbdd3212b7c73290a45127c1c43ba2005a
+  checksum: 10c0/e33cef99d82573624fc0f854a2980322714986bc35b9cb4d1ce736ed182aeab78e2cb32b385efa493b2a976ef52c53e20d6c6918312353a91850e2b76f1ea44f
   languageName: node
   linkType: hard
 
-"typescript@npm:~5.3.2":
-  version: 5.3.3
-  resolution: "typescript@npm:5.3.3"
+"typescript@npm:^5.4.3":
+  version: 5.4.3
+  resolution: "typescript@npm:5.4.3"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/e33cef99d82573624fc0f854a2980322714986bc35b9cb4d1ce736ed182aeab78e2cb32b385efa493b2a976ef52c53e20d6c6918312353a91850e2b76f1ea44f
+  checksum: 10c0/22443a8760c3668e256c0b34b6b45c359ef6cecc10c42558806177a7d500ab1a7d7aac1f976d712e26989ddf6731d2fbdd3212b7c73290a45127c1c43ba2005a
   languageName: node
   linkType: hard
 
@@ -27929,23 +28024,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A^5.0.3#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.3.2#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.4.3#optional!builtin<compat/typescript>":
-  version: 5.4.3
-  resolution: "typescript@patch:typescript@npm%3A5.4.3#optional!builtin<compat/typescript>::version=5.4.3&hash=5adc0c"
+"typescript@patch:typescript@npm%3A^5.0.3#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.3.2#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A~5.3.2#optional!builtin<compat/typescript>":
+  version: 5.3.3
+  resolution: "typescript@patch:typescript@npm%3A5.3.3#optional!builtin<compat/typescript>::version=5.3.3&hash=e012d7"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/6e51f8b7e6ec55b897b9e56b67e864fe8f44e30f4a14357aad5dc0f7432db2f01efc0522df0b6c36d361c51f2dc3dcac5c832efd96a404cfabf884e915d38828
+  checksum: 10c0/1d0a5f4ce496c42caa9a30e659c467c5686eae15d54b027ee7866744952547f1be1262f2d40de911618c242b510029d51d43ff605dba8fb740ec85ca2d3f9500
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A~5.3.2#optional!builtin<compat/typescript>":
-  version: 5.3.3
-  resolution: "typescript@patch:typescript@npm%3A5.3.3#optional!builtin<compat/typescript>::version=5.3.3&hash=e012d7"
+"typescript@patch:typescript@npm%3A^5.4.3#optional!builtin<compat/typescript>":
+  version: 5.4.3
+  resolution: "typescript@patch:typescript@npm%3A5.4.3#optional!builtin<compat/typescript>::version=5.4.3&hash=5adc0c"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/1d0a5f4ce496c42caa9a30e659c467c5686eae15d54b027ee7866744952547f1be1262f2d40de911618c242b510029d51d43ff605dba8fb740ec85ca2d3f9500
+  checksum: 10c0/6e51f8b7e6ec55b897b9e56b67e864fe8f44e30f4a14357aad5dc0f7432db2f01efc0522df0b6c36d361c51f2dc3dcac5c832efd96a404cfabf884e915d38828
   languageName: node
   linkType: hard