diff --git a/.changeset/proud-months-melt.md b/.changeset/proud-months-melt.md
new file mode 100644
index 0000000000..dc0760b5ad
--- /dev/null
+++ b/.changeset/proud-months-melt.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/timeline": patch
+"@twilio-paste/core": patch
+---
+
+[Timeline]: Fix alignment issue on large text
diff --git a/cypress/integration/sitemap-vrt/constants.ts b/cypress/integration/sitemap-vrt/constants.ts
index 633c9458bf..afe7d5f85a 100644
--- a/cypress/integration/sitemap-vrt/constants.ts
+++ b/cypress/integration/sitemap-vrt/constants.ts
@@ -236,6 +236,9 @@ export const SITEMAP = [
   "/components/time-picker/",
   "/components/time-picker/api",
   "/components/time-picker/changelog",
+  "/components/timeline/",
+  "/components/timeline/api",
+  "/components/timeline/changelog",
   "/components/truncate/",
   "/components/truncate/api",
   "/components/truncate/changelog",
diff --git a/packages/paste-core/components/timeline/src/TimelineItem.tsx b/packages/paste-core/components/timeline/src/TimelineItem.tsx
index 3b81767fbb..564e10cffb 100644
--- a/packages/paste-core/components/timeline/src/TimelineItem.tsx
+++ b/packages/paste-core/components/timeline/src/TimelineItem.tsx
@@ -45,6 +45,7 @@ const TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(
             width="sizeBase50"
             flexDirection="column"
             alignItems="center"
+            flexShrink={0}
           >
             <TimelineItemIcon icon={icon} element={`${element}_ICON`} />
           </Box>
diff --git a/packages/paste-core/components/timeline/type-docs.json b/packages/paste-core/components/timeline/type-docs.json
new file mode 100644
index 0000000000..8cb2d981ed
--- /dev/null
+++ b/packages/paste-core/components/timeline/type-docs.json
@@ -0,0 +1,4832 @@
+{
+  "Timeline": {
+    "about": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "accessKey": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "aria-activedescendant": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application."
+    },
+    "aria-atomic": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute."
+    },
+    "aria-autocomplete": {
+      "type": "\"list\" | \"none\" | \"inline\" | \"both\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made."
+    },
+    "aria-busy": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user."
+    },
+    "aria-checked": {
+      "type": "boolean | \"true\" | \"false\" | \"mixed\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets."
+    },
+    "aria-colcount": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the total number of columns in a table, grid, or treegrid."
+    },
+    "aria-colindex": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid."
+    },
+    "aria-colspan": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid."
+    },
+    "aria-controls": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies the element (or elements) whose contents or presence are controlled by the current element."
+    },
+    "aria-current": {
+      "type": "| boolean\n  | \"time\"\n  | \"true\"\n  | \"false\"\n  | \"page\"\n  | \"step\"\n  | \"location\"\n  | \"date\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates the element that represents the current item within a container or set of related elements."
+    },
+    "aria-describedby": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies the element (or elements) that describes the object."
+    },
+    "aria-details": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies the element that provides a detailed, extended description for the object."
+    },
+    "aria-disabled": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable."
+    },
+    "aria-dropeffect": {
+      "type": "\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates what functions can be performed when a dragged object is released on the drop target."
+    },
+    "aria-errormessage": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies the element that provides an error message for the object."
+    },
+    "aria-expanded": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed."
+    },
+    "aria-flowto": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order."
+    },
+    "aria-grabbed": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation."
+    },
+    "aria-haspopup": {
+      "type": "| boolean\n  | \"dialog\"\n  | \"menu\"\n  | \"true\"\n  | \"false\"\n  | \"grid\"\n  | \"listbox\"\n  | \"tree\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element."
+    },
+    "aria-hidden": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates whether the element is exposed to an accessibility API."
+    },
+    "aria-invalid": {
+      "type": "boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates the entered value does not conform to the format expected by the application."
+    },
+    "aria-keyshortcuts": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element."
+    },
+    "aria-label": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines a string value that labels the current element."
+    },
+    "aria-labelledby": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies the element (or elements) that labels the current element."
+    },
+    "aria-level": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the hierarchical level of an element within a structure."
+    },
+    "aria-live": {
+      "type": "\"off\" | \"assertive\" | \"polite\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region."
+    },
+    "aria-modal": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates whether an element is modal when displayed."
+    },
+    "aria-multiline": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates whether a text box accepts multiple lines of input or only a single line."
+    },
+    "aria-multiselectable": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates that the user may select more than one item from the current selectable descendants."
+    },
+    "aria-orientation": {
+      "type": "\"horizontal\" | \"vertical\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous."
+    },
+    "aria-owns": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship."
+    },
+    "aria-placeholder": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format."
+    },
+    "aria-posinset": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM."
+    },
+    "aria-pressed": {
+      "type": "boolean | \"true\" | \"false\" | \"mixed\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates the current \"pressed\" state of toggle buttons."
+    },
+    "aria-readonly": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates that the element is not editable, but is otherwise operable."
+    },
+    "aria-relevant": {
+      "type": "| \"text\"\n  | \"additions\"\n  | \"additions removals\"\n  | \"additions text\"\n  | \"all\"\n  | \"removals\"\n  | \"removals additions\"\n  | \"removals text\"\n  | \"text additions\"\n  | \"text removals\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified."
+    },
+    "aria-required": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates that user input is required on the element before a form may be submitted."
+    },
+    "aria-roledescription": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines a human-readable, author-localized description for the role of an element."
+    },
+    "aria-rowcount": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the total number of rows in a table, grid, or treegrid."
+    },
+    "aria-rowindex": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid."
+    },
+    "aria-rowspan": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid."
+    },
+    "aria-selected": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates the current \"selected\" state of various widgets."
+    },
+    "aria-setsize": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM."
+    },
+    "aria-sort": {
+      "type": "\"none\" | \"ascending\" | \"descending\" | \"other\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates if items in a table or grid are sorted in ascending or descending order."
+    },
+    "aria-valuemax": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the maximum allowed value for a range widget."
+    },
+    "aria-valuemin": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the minimum allowed value for a range widget."
+    },
+    "aria-valuenow": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the current value for a range widget."
+    },
+    "aria-valuetext": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the human readable text alternative of aria-valuenow for a range widget."
+    },
+    "autoCapitalize": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "autoCorrect": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "autoSave": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "contentEditable": {
+      "type": "Booleanish | \"inherit\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "contextMenu": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "dangerouslySetInnerHTML": {
+      "type": "{ __html: string }",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "datatype": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "defaultChecked": {
+      "type": "boolean",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "defaultValue": {
+      "type": "string | number | readonly string[]",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "dir": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "draggable": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "element": {
+      "type": "string",
+      "defaultValue": "TIMELINE",
+      "required": false,
+      "externalProp": false,
+      "description": "Overrides the default element name to apply unique styles with the Customization Provider."
+    },
+    "hidden": {
+      "type": "boolean",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "id": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "inlist": {
+      "type": "any",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "inputMode": {
+      "type": "| \"text\"\n  | \"none\"\n  | \"search\"\n  | \"tel\"\n  | \"url\"\n  | \"email\"\n  | \"numeric\"\n  | \"decimal\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
+    },
+    "is": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Specify that a standard HTML element should behave like a defined custom built-in element"
+    },
+    "itemID": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "itemProp": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "itemRef": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "itemScope": {
+      "type": "boolean",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "itemType": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "key": {
+      "type": "Key",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "lang": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "nonce": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAbort": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAbortCapture": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAnimationEnd": {
+      "type": "AnimationEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAnimationEndCapture": {
+      "type": "AnimationEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAnimationIteration": {
+      "type": "AnimationEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAnimationIterationCapture": {
+      "type": "AnimationEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAnimationStart": {
+      "type": "AnimationEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAnimationStartCapture": {
+      "type": "AnimationEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAuxClick": {
+      "type": "MouseEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAuxClickCapture": {
+      "type": "MouseEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onBeforeInput": {
+      "type": "FormEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onBeforeInputCapture": {
+      "type": "FormEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onBlur": {
+      "type": "FocusEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onBlurCapture": {
+      "type": "FocusEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCanPlay": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCanPlayCapture": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCanPlayThrough": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCanPlayThroughCapture": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onChange": {
+      "type": "FormEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onChangeCapture": {
+      "type": "FormEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onClick": {
+      "type": "MouseEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onClickCapture": {
+      "type": "MouseEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCompositionEnd": {
+      "type": "CompositionEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCompositionEndCapture": {
+      "type": "CompositionEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCompositionStart": {
+      "type": "CompositionEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCompositionStartCapture": {
+      "type": "CompositionEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCompositionUpdate": {
+      "type": "CompositionEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCompositionUpdateCapture": {
+      "type": "CompositionEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onContextMenu": {
+      "type": "MouseEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onContextMenuCapture": {
+      "type": "MouseEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCopy": {
+      "type": "ClipboardEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCopyCapture": {
+      "type": "ClipboardEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCut": {
+      "type": "ClipboardEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCutCapture": {
+      "type": "ClipboardEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDoubleClick": {
+      "type": "MouseEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDoubleClickCapture": {
+      "type": "MouseEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDrag": {
+      "type": "DragEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragCapture": {
+      "type": "DragEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragEnd": {
+      "type": "DragEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragEndCapture": {
+      "type": "DragEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragEnter": {
+      "type": "DragEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragEnterCapture": {
+      "type": "DragEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragExit": {
+      "type": "DragEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragExitCapture": {
+      "type": "DragEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragLeave": {
+      "type": "DragEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragLeaveCapture": {
+      "type": "DragEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragOver": {
+      "type": "DragEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragOverCapture": {
+      "type": "DragEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragStart": {
+      "type": "DragEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragStartCapture": {
+      "type": "DragEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDrop": {
+      "type": "DragEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDropCapture": {
+      "type": "DragEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDurationChange": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDurationChangeCapture": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onEmptied": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onEmptiedCapture": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onEncrypted": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onEncryptedCapture": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onEnded": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onEndedCapture": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onError": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onErrorCapture": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onFocus": {
+      "type": "FocusEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onFocusCapture": {
+      "type": "FocusEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onGotPointerCapture": {
+      "type": "PointerEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onGotPointerCaptureCapture": {
+      "type": "PointerEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onInput": {
+      "type": "FormEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onInputCapture": {
+      "type": "FormEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onInvalid": {
+      "type": "FormEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onInvalidCapture": {
+      "type": "FormEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onKeyDown": {
+      "type": "KeyboardEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onKeyDownCapture": {
+      "type": "KeyboardEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onKeyPress": {
+      "type": "KeyboardEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onKeyPressCapture": {
+      "type": "KeyboardEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onKeyUp": {
+      "type": "KeyboardEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onKeyUpCapture": {
+      "type": "KeyboardEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoad": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoadCapture": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoadedData": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoadedDataCapture": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoadedMetadata": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoadedMetadataCapture": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoadStart": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoadStartCapture": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLostPointerCapture": {
+      "type": "PointerEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLostPointerCaptureCapture": {
+      "type": "PointerEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseDown": {
+      "type": "MouseEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseDownCapture": {
+      "type": "MouseEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseEnter": {
+      "type": "MouseEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseLeave": {
+      "type": "MouseEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseMove": {
+      "type": "MouseEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseMoveCapture": {
+      "type": "MouseEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseOut": {
+      "type": "MouseEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseOutCapture": {
+      "type": "MouseEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseOver": {
+      "type": "MouseEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseOverCapture": {
+      "type": "MouseEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseUp": {
+      "type": "MouseEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseUpCapture": {
+      "type": "MouseEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPaste": {
+      "type": "ClipboardEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPasteCapture": {
+      "type": "ClipboardEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPause": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPauseCapture": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPlay": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPlayCapture": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPlaying": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPlayingCapture": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerCancel": {
+      "type": "PointerEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerCancelCapture": {
+      "type": "PointerEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerDown": {
+      "type": "PointerEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerDownCapture": {
+      "type": "PointerEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerEnter": {
+      "type": "PointerEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerEnterCapture": {
+      "type": "PointerEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerLeave": {
+      "type": "PointerEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerLeaveCapture": {
+      "type": "PointerEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerMove": {
+      "type": "PointerEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerMoveCapture": {
+      "type": "PointerEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerOut": {
+      "type": "PointerEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerOutCapture": {
+      "type": "PointerEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerOver": {
+      "type": "PointerEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerOverCapture": {
+      "type": "PointerEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerUp": {
+      "type": "PointerEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerUpCapture": {
+      "type": "PointerEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onProgress": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onProgressCapture": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onRateChange": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onRateChangeCapture": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onReset": {
+      "type": "FormEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onResetCapture": {
+      "type": "FormEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onResize": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onResizeCapture": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onScroll": {
+      "type": "UIEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onScrollCapture": {
+      "type": "UIEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSeeked": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSeekedCapture": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSeeking": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSeekingCapture": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSelect": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSelectCapture": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onStalled": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onStalledCapture": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSubmit": {
+      "type": "FormEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSubmitCapture": {
+      "type": "FormEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSuspend": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSuspendCapture": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTimeUpdate": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTimeUpdateCapture": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchCancel": {
+      "type": "TouchEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchCancelCapture": {
+      "type": "TouchEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchEnd": {
+      "type": "TouchEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchEndCapture": {
+      "type": "TouchEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchMove": {
+      "type": "TouchEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchMoveCapture": {
+      "type": "TouchEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchStart": {
+      "type": "TouchEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchStartCapture": {
+      "type": "TouchEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTransitionEnd": {
+      "type": "TransitionEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTransitionEndCapture": {
+      "type": "TransitionEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onVolumeChange": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onVolumeChangeCapture": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onWaiting": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onWaitingCapture": {
+      "type": "ReactEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onWheel": {
+      "type": "WheelEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onWheelCapture": {
+      "type": "WheelEventHandler<HTMLOListElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "placeholder": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "prefix": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "property": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "radioGroup": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "resource": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "results": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "reversed": {
+      "type": "boolean",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "role": {
+      "type": "AriaRole",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "security": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "slot": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "spellCheck": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "start": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "suppressContentEditableWarning": {
+      "type": "boolean",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "suppressHydrationWarning": {
+      "type": "boolean",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "tabIndex": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "title": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "translate": {
+      "type": "\"yes\" | \"no\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "type": {
+      "type": "\"a\" | \"i\" | \"1\" | \"A\" | \"I\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "typeof": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "unselectable": {
+      "type": "\"on\" | \"off\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "vocab": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    }
+  },
+  "TimelineItem": {
+    "title": {
+      "type": "string",
+      "defaultValue": null,
+      "required": true,
+      "externalProp": false,
+      "description": "Title to display in the timeline item"
+    },
+    "about": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "accessKey": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "aria-activedescendant": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application."
+    },
+    "aria-atomic": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute."
+    },
+    "aria-autocomplete": {
+      "type": "\"list\" | \"none\" | \"inline\" | \"both\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made."
+    },
+    "aria-busy": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user."
+    },
+    "aria-checked": {
+      "type": "boolean | \"true\" | \"false\" | \"mixed\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets."
+    },
+    "aria-colcount": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the total number of columns in a table, grid, or treegrid."
+    },
+    "aria-colindex": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid."
+    },
+    "aria-colspan": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid."
+    },
+    "aria-controls": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies the element (or elements) whose contents or presence are controlled by the current element."
+    },
+    "aria-current": {
+      "type": "| boolean\n  | \"time\"\n  | \"true\"\n  | \"false\"\n  | \"page\"\n  | \"step\"\n  | \"location\"\n  | \"date\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates the element that represents the current item within a container or set of related elements."
+    },
+    "aria-describedby": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies the element (or elements) that describes the object."
+    },
+    "aria-details": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies the element that provides a detailed, extended description for the object."
+    },
+    "aria-disabled": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable."
+    },
+    "aria-dropeffect": {
+      "type": "\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates what functions can be performed when a dragged object is released on the drop target."
+    },
+    "aria-errormessage": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies the element that provides an error message for the object."
+    },
+    "aria-expanded": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed."
+    },
+    "aria-flowto": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order."
+    },
+    "aria-grabbed": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation."
+    },
+    "aria-haspopup": {
+      "type": "| boolean\n  | \"dialog\"\n  | \"menu\"\n  | \"true\"\n  | \"false\"\n  | \"grid\"\n  | \"listbox\"\n  | \"tree\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element."
+    },
+    "aria-hidden": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates whether the element is exposed to an accessibility API."
+    },
+    "aria-invalid": {
+      "type": "boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates the entered value does not conform to the format expected by the application."
+    },
+    "aria-keyshortcuts": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element."
+    },
+    "aria-label": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines a string value that labels the current element."
+    },
+    "aria-labelledby": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies the element (or elements) that labels the current element."
+    },
+    "aria-level": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the hierarchical level of an element within a structure."
+    },
+    "aria-live": {
+      "type": "\"off\" | \"assertive\" | \"polite\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region."
+    },
+    "aria-modal": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates whether an element is modal when displayed."
+    },
+    "aria-multiline": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates whether a text box accepts multiple lines of input or only a single line."
+    },
+    "aria-multiselectable": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates that the user may select more than one item from the current selectable descendants."
+    },
+    "aria-orientation": {
+      "type": "\"horizontal\" | \"vertical\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous."
+    },
+    "aria-owns": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship."
+    },
+    "aria-placeholder": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format."
+    },
+    "aria-posinset": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM."
+    },
+    "aria-pressed": {
+      "type": "boolean | \"true\" | \"false\" | \"mixed\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates the current \"pressed\" state of toggle buttons."
+    },
+    "aria-readonly": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates that the element is not editable, but is otherwise operable."
+    },
+    "aria-relevant": {
+      "type": "| \"text\"\n  | \"additions\"\n  | \"additions removals\"\n  | \"additions text\"\n  | \"all\"\n  | \"removals\"\n  | \"removals additions\"\n  | \"removals text\"\n  | \"text additions\"\n  | \"text removals\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified."
+    },
+    "aria-required": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates that user input is required on the element before a form may be submitted."
+    },
+    "aria-roledescription": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines a human-readable, author-localized description for the role of an element."
+    },
+    "aria-rowcount": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the total number of rows in a table, grid, or treegrid."
+    },
+    "aria-rowindex": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid."
+    },
+    "aria-rowspan": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid."
+    },
+    "aria-selected": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates the current \"selected\" state of various widgets."
+    },
+    "aria-setsize": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM."
+    },
+    "aria-sort": {
+      "type": "\"none\" | \"ascending\" | \"descending\" | \"other\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates if items in a table or grid are sorted in ascending or descending order."
+    },
+    "aria-valuemax": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the maximum allowed value for a range widget."
+    },
+    "aria-valuemin": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the minimum allowed value for a range widget."
+    },
+    "aria-valuenow": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the current value for a range widget."
+    },
+    "aria-valuetext": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the human readable text alternative of aria-valuenow for a range widget."
+    },
+    "autoCapitalize": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "autoCorrect": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "autoSave": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "collapsible": {
+      "type": "boolean",
+      "defaultValue": false,
+      "required": false,
+      "externalProp": false,
+      "description": "If true, the timeline item will be collapsible"
+    },
+    "collapsibleHeading": {
+      "type": "string",
+      "defaultValue": "undefined",
+      "required": false,
+      "externalProp": false,
+      "description": "In case of collapsible timeline item and no timestamp, this will be used as the heading"
+    },
+    "contentEditable": {
+      "type": "Booleanish | \"inherit\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "contextMenu": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "dangerouslySetInnerHTML": {
+      "type": "{ __html: string }",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "datatype": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "defaultChecked": {
+      "type": "boolean",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "defaultValue": {
+      "type": "string | number | readonly string[]",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "dir": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "draggable": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "element": {
+      "type": "string",
+      "defaultValue": "TIMELINE_ITEM",
+      "required": false,
+      "externalProp": false,
+      "description": "Overrides the default element name to apply unique styles with the Customization Provider."
+    },
+    "hidden": {
+      "type": "boolean",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "icon": {
+      "type": "FC<PropsWithChildren<GenericIconProps>>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": false,
+      "description": "Pass a Paste Icon to display in place of dot"
+    },
+    "id": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "inlist": {
+      "type": "any",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "inputMode": {
+      "type": "| \"text\"\n  | \"none\"\n  | \"search\"\n  | \"tel\"\n  | \"url\"\n  | \"email\"\n  | \"numeric\"\n  | \"decimal\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
+    },
+    "is": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Specify that a standard HTML element should behave like a defined custom built-in element"
+    },
+    "itemID": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "itemProp": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "itemRef": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "itemScope": {
+      "type": "boolean",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "itemType": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "key": {
+      "type": "Key",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "lang": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "nonce": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAbort": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAbortCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAnimationEnd": {
+      "type": "AnimationEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAnimationEndCapture": {
+      "type": "AnimationEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAnimationIteration": {
+      "type": "AnimationEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAnimationIterationCapture": {
+      "type": "AnimationEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAnimationStart": {
+      "type": "AnimationEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAnimationStartCapture": {
+      "type": "AnimationEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAuxClick": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAuxClickCapture": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onBeforeInput": {
+      "type": "FormEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onBeforeInputCapture": {
+      "type": "FormEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onBlur": {
+      "type": "FocusEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onBlurCapture": {
+      "type": "FocusEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCanPlay": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCanPlayCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCanPlayThrough": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCanPlayThroughCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onChange": {
+      "type": "FormEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onChangeCapture": {
+      "type": "FormEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onClick": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onClickCapture": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCompositionEnd": {
+      "type": "CompositionEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCompositionEndCapture": {
+      "type": "CompositionEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCompositionStart": {
+      "type": "CompositionEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCompositionStartCapture": {
+      "type": "CompositionEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCompositionUpdate": {
+      "type": "CompositionEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCompositionUpdateCapture": {
+      "type": "CompositionEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onContextMenu": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onContextMenuCapture": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCopy": {
+      "type": "ClipboardEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCopyCapture": {
+      "type": "ClipboardEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCut": {
+      "type": "ClipboardEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCutCapture": {
+      "type": "ClipboardEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDoubleClick": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDoubleClickCapture": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDrag": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragCapture": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragEnd": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragEndCapture": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragEnter": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragEnterCapture": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragExit": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragExitCapture": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragLeave": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragLeaveCapture": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragOver": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragOverCapture": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragStart": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragStartCapture": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDrop": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDropCapture": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDurationChange": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDurationChangeCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onEmptied": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onEmptiedCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onEncrypted": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onEncryptedCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onEnded": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onEndedCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onError": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onErrorCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onFocus": {
+      "type": "FocusEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onFocusCapture": {
+      "type": "FocusEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onGotPointerCapture": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onGotPointerCaptureCapture": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onInput": {
+      "type": "FormEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onInputCapture": {
+      "type": "FormEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onInvalid": {
+      "type": "FormEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onInvalidCapture": {
+      "type": "FormEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onKeyDown": {
+      "type": "KeyboardEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onKeyDownCapture": {
+      "type": "KeyboardEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onKeyPress": {
+      "type": "KeyboardEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onKeyPressCapture": {
+      "type": "KeyboardEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onKeyUp": {
+      "type": "KeyboardEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onKeyUpCapture": {
+      "type": "KeyboardEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoad": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoadCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoadedData": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoadedDataCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoadedMetadata": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoadedMetadataCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoadStart": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoadStartCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLostPointerCapture": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLostPointerCaptureCapture": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseDown": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseDownCapture": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseEnter": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseLeave": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseMove": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseMoveCapture": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseOut": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseOutCapture": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseOver": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseOverCapture": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseUp": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseUpCapture": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPaste": {
+      "type": "ClipboardEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPasteCapture": {
+      "type": "ClipboardEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPause": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPauseCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPlay": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPlayCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPlaying": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPlayingCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerCancel": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerCancelCapture": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerDown": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerDownCapture": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerEnter": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerEnterCapture": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerLeave": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerLeaveCapture": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerMove": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerMoveCapture": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerOut": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerOutCapture": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerOver": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerOverCapture": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerUp": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerUpCapture": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onProgress": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onProgressCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onRateChange": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onRateChangeCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onReset": {
+      "type": "FormEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onResetCapture": {
+      "type": "FormEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onResize": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onResizeCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onScroll": {
+      "type": "UIEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onScrollCapture": {
+      "type": "UIEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSeeked": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSeekedCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSeeking": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSeekingCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSelect": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSelectCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onStalled": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onStalledCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSubmit": {
+      "type": "FormEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSubmitCapture": {
+      "type": "FormEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSuspend": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSuspendCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTimeUpdate": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTimeUpdateCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchCancel": {
+      "type": "TouchEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchCancelCapture": {
+      "type": "TouchEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchEnd": {
+      "type": "TouchEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchEndCapture": {
+      "type": "TouchEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchMove": {
+      "type": "TouchEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchMoveCapture": {
+      "type": "TouchEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchStart": {
+      "type": "TouchEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchStartCapture": {
+      "type": "TouchEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTransitionEnd": {
+      "type": "TransitionEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTransitionEndCapture": {
+      "type": "TransitionEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onVolumeChange": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onVolumeChangeCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onWaiting": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onWaitingCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onWheel": {
+      "type": "WheelEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onWheelCapture": {
+      "type": "WheelEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "placeholder": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "prefix": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "property": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "radioGroup": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "resource": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "results": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "role": {
+      "type": "AriaRole",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "security": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "slot": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "spellCheck": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "suppressContentEditableWarning": {
+      "type": "boolean",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "suppressHydrationWarning": {
+      "type": "boolean",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "tabIndex": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "timestamp": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": false,
+      "description": "Timestamp to display in the timeline item"
+    },
+    "translate": {
+      "type": "\"yes\" | \"no\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "typeof": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "unselectable": {
+      "type": "\"on\" | \"off\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "value": {
+      "type": "string | number | readonly string[]",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "vocab": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    }
+  },
+  "TimelineItemGroup": {
+    "about": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "accessKey": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "aria-activedescendant": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application."
+    },
+    "aria-atomic": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute."
+    },
+    "aria-autocomplete": {
+      "type": "\"list\" | \"none\" | \"inline\" | \"both\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made."
+    },
+    "aria-busy": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user."
+    },
+    "aria-checked": {
+      "type": "boolean | \"true\" | \"false\" | \"mixed\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets."
+    },
+    "aria-colcount": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the total number of columns in a table, grid, or treegrid."
+    },
+    "aria-colindex": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid."
+    },
+    "aria-colspan": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid."
+    },
+    "aria-controls": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies the element (or elements) whose contents or presence are controlled by the current element."
+    },
+    "aria-current": {
+      "type": "| boolean\n  | \"time\"\n  | \"true\"\n  | \"false\"\n  | \"page\"\n  | \"step\"\n  | \"location\"\n  | \"date\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates the element that represents the current item within a container or set of related elements."
+    },
+    "aria-describedby": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies the element (or elements) that describes the object."
+    },
+    "aria-details": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies the element that provides a detailed, extended description for the object."
+    },
+    "aria-disabled": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable."
+    },
+    "aria-dropeffect": {
+      "type": "\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates what functions can be performed when a dragged object is released on the drop target."
+    },
+    "aria-errormessage": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies the element that provides an error message for the object."
+    },
+    "aria-expanded": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed."
+    },
+    "aria-flowto": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order."
+    },
+    "aria-grabbed": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation."
+    },
+    "aria-haspopup": {
+      "type": "| boolean\n  | \"dialog\"\n  | \"menu\"\n  | \"true\"\n  | \"false\"\n  | \"grid\"\n  | \"listbox\"\n  | \"tree\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element."
+    },
+    "aria-hidden": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates whether the element is exposed to an accessibility API."
+    },
+    "aria-invalid": {
+      "type": "boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates the entered value does not conform to the format expected by the application."
+    },
+    "aria-keyshortcuts": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element."
+    },
+    "aria-label": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines a string value that labels the current element."
+    },
+    "aria-labelledby": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies the element (or elements) that labels the current element."
+    },
+    "aria-level": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the hierarchical level of an element within a structure."
+    },
+    "aria-live": {
+      "type": "\"off\" | \"assertive\" | \"polite\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region."
+    },
+    "aria-modal": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates whether an element is modal when displayed."
+    },
+    "aria-multiline": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates whether a text box accepts multiple lines of input or only a single line."
+    },
+    "aria-multiselectable": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates that the user may select more than one item from the current selectable descendants."
+    },
+    "aria-orientation": {
+      "type": "\"horizontal\" | \"vertical\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous."
+    },
+    "aria-owns": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship."
+    },
+    "aria-placeholder": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format."
+    },
+    "aria-posinset": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM."
+    },
+    "aria-pressed": {
+      "type": "boolean | \"true\" | \"false\" | \"mixed\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates the current \"pressed\" state of toggle buttons."
+    },
+    "aria-readonly": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates that the element is not editable, but is otherwise operable."
+    },
+    "aria-relevant": {
+      "type": "| \"text\"\n  | \"additions\"\n  | \"additions removals\"\n  | \"additions text\"\n  | \"all\"\n  | \"removals\"\n  | \"removals additions\"\n  | \"removals text\"\n  | \"text additions\"\n  | \"text removals\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified."
+    },
+    "aria-required": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates that user input is required on the element before a form may be submitted."
+    },
+    "aria-roledescription": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines a human-readable, author-localized description for the role of an element."
+    },
+    "aria-rowcount": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the total number of rows in a table, grid, or treegrid."
+    },
+    "aria-rowindex": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid."
+    },
+    "aria-rowspan": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid."
+    },
+    "aria-selected": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates the current \"selected\" state of various widgets."
+    },
+    "aria-setsize": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM."
+    },
+    "aria-sort": {
+      "type": "\"none\" | \"ascending\" | \"descending\" | \"other\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates if items in a table or grid are sorted in ascending or descending order."
+    },
+    "aria-valuemax": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the maximum allowed value for a range widget."
+    },
+    "aria-valuemin": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the minimum allowed value for a range widget."
+    },
+    "aria-valuenow": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the current value for a range widget."
+    },
+    "aria-valuetext": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the human readable text alternative of aria-valuenow for a range widget."
+    },
+    "autoCapitalize": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "autoCorrect": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "autoSave": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "collapsible": {
+      "type": "boolean",
+      "defaultValue": false,
+      "required": false,
+      "externalProp": false,
+      "description": "If true, the timeline item will be collapsible"
+    },
+    "collapsibleHeading": {
+      "type": "string",
+      "defaultValue": "undefined",
+      "required": false,
+      "externalProp": false,
+      "description": "In case of collapsible timeline item and no timestamp, this will be used as the heading"
+    },
+    "contentEditable": {
+      "type": "Booleanish | \"inherit\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "contextMenu": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "dangerouslySetInnerHTML": {
+      "type": "{ __html: string }",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "datatype": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "defaultChecked": {
+      "type": "boolean",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "defaultValue": {
+      "type": "string | number | readonly string[]",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "dir": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "draggable": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "element": {
+      "type": "string",
+      "defaultValue": "TIMELINE_ITEM_GROUP",
+      "required": false,
+      "externalProp": false,
+      "description": "Overrides the default element name to apply unique styles with the Customization Provider."
+    },
+    "hidden": {
+      "type": "boolean",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "icon": {
+      "type": "FC<PropsWithChildren<GenericIconProps>>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": false,
+      "description": "Pass a Paste Icon to display in place of dot"
+    },
+    "id": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "inlist": {
+      "type": "any",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "inputMode": {
+      "type": "| \"text\"\n  | \"none\"\n  | \"search\"\n  | \"tel\"\n  | \"url\"\n  | \"email\"\n  | \"numeric\"\n  | \"decimal\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
+    },
+    "is": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Specify that a standard HTML element should behave like a defined custom built-in element"
+    },
+    "itemID": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "itemProp": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "itemRef": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "itemScope": {
+      "type": "boolean",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "itemType": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "key": {
+      "type": "Key",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "lang": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "nonce": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAbort": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAbortCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAnimationEnd": {
+      "type": "AnimationEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAnimationEndCapture": {
+      "type": "AnimationEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAnimationIteration": {
+      "type": "AnimationEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAnimationIterationCapture": {
+      "type": "AnimationEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAnimationStart": {
+      "type": "AnimationEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAnimationStartCapture": {
+      "type": "AnimationEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAuxClick": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAuxClickCapture": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onBeforeInput": {
+      "type": "FormEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onBeforeInputCapture": {
+      "type": "FormEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onBlur": {
+      "type": "FocusEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onBlurCapture": {
+      "type": "FocusEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCanPlay": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCanPlayCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCanPlayThrough": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCanPlayThroughCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onChange": {
+      "type": "FormEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onChangeCapture": {
+      "type": "FormEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onClick": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onClickCapture": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCompositionEnd": {
+      "type": "CompositionEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCompositionEndCapture": {
+      "type": "CompositionEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCompositionStart": {
+      "type": "CompositionEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCompositionStartCapture": {
+      "type": "CompositionEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCompositionUpdate": {
+      "type": "CompositionEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCompositionUpdateCapture": {
+      "type": "CompositionEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onContextMenu": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onContextMenuCapture": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCopy": {
+      "type": "ClipboardEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCopyCapture": {
+      "type": "ClipboardEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCut": {
+      "type": "ClipboardEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCutCapture": {
+      "type": "ClipboardEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDoubleClick": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDoubleClickCapture": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDrag": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragCapture": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragEnd": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragEndCapture": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragEnter": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragEnterCapture": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragExit": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragExitCapture": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragLeave": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragLeaveCapture": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragOver": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragOverCapture": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragStart": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragStartCapture": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDrop": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDropCapture": {
+      "type": "DragEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDurationChange": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDurationChangeCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onEmptied": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onEmptiedCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onEncrypted": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onEncryptedCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onEnded": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onEndedCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onError": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onErrorCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onFocus": {
+      "type": "FocusEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onFocusCapture": {
+      "type": "FocusEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onGotPointerCapture": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onGotPointerCaptureCapture": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onInput": {
+      "type": "FormEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onInputCapture": {
+      "type": "FormEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onInvalid": {
+      "type": "FormEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onInvalidCapture": {
+      "type": "FormEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onKeyDown": {
+      "type": "KeyboardEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onKeyDownCapture": {
+      "type": "KeyboardEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onKeyPress": {
+      "type": "KeyboardEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onKeyPressCapture": {
+      "type": "KeyboardEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onKeyUp": {
+      "type": "KeyboardEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onKeyUpCapture": {
+      "type": "KeyboardEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoad": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoadCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoadedData": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoadedDataCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoadedMetadata": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoadedMetadataCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoadStart": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoadStartCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLostPointerCapture": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLostPointerCaptureCapture": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseDown": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseDownCapture": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseEnter": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseLeave": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseMove": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseMoveCapture": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseOut": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseOutCapture": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseOver": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseOverCapture": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseUp": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseUpCapture": {
+      "type": "MouseEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPaste": {
+      "type": "ClipboardEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPasteCapture": {
+      "type": "ClipboardEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPause": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPauseCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPlay": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPlayCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPlaying": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPlayingCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerCancel": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerCancelCapture": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerDown": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerDownCapture": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerEnter": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerEnterCapture": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerLeave": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerLeaveCapture": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerMove": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerMoveCapture": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerOut": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerOutCapture": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerOver": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerOverCapture": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerUp": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerUpCapture": {
+      "type": "PointerEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onProgress": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onProgressCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onRateChange": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onRateChangeCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onReset": {
+      "type": "FormEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onResetCapture": {
+      "type": "FormEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onResize": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onResizeCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onScroll": {
+      "type": "UIEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onScrollCapture": {
+      "type": "UIEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSeeked": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSeekedCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSeeking": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSeekingCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSelect": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSelectCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onStalled": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onStalledCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSubmit": {
+      "type": "FormEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSubmitCapture": {
+      "type": "FormEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSuspend": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSuspendCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTimeUpdate": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTimeUpdateCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchCancel": {
+      "type": "TouchEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchCancelCapture": {
+      "type": "TouchEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchEnd": {
+      "type": "TouchEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchEndCapture": {
+      "type": "TouchEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchMove": {
+      "type": "TouchEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchMoveCapture": {
+      "type": "TouchEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchStart": {
+      "type": "TouchEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchStartCapture": {
+      "type": "TouchEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTransitionEnd": {
+      "type": "TransitionEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTransitionEndCapture": {
+      "type": "TransitionEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onVolumeChange": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onVolumeChangeCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onWaiting": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onWaitingCapture": {
+      "type": "ReactEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onWheel": {
+      "type": "WheelEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onWheelCapture": {
+      "type": "WheelEventHandler<HTMLLIElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "placeholder": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "prefix": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "property": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "radioGroup": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "resource": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "results": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "role": {
+      "type": "AriaRole",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "security": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "slot": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "spellCheck": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "suppressContentEditableWarning": {
+      "type": "boolean",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "suppressHydrationWarning": {
+      "type": "boolean",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "tabIndex": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "timestamp": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": false,
+      "description": "Timestamp to display in the timeline item"
+    },
+    "translate": {
+      "type": "\"yes\" | \"no\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "typeof": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "unselectable": {
+      "type": "\"on\" | \"off\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "value": {
+      "type": "string | number | readonly string[]",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "vocab": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    }
+  }
+}
diff --git a/packages/paste-website/package.json b/packages/paste-website/package.json
index 8921789925..fdd8f2ab51 100644
--- a/packages/paste-website/package.json
+++ b/packages/paste-website/package.json
@@ -130,6 +130,7 @@
     "@twilio-paste/textarea": "^10.1.1",
     "@twilio-paste/theme": "^11.1.0",
     "@twilio-paste/time-picker": "^6.1.1",
+    "@twilio-paste/timeline": "^0.0.0",
     "@twilio-paste/toast": "^12.1.1",
     "@twilio-paste/tooltip": "^11.1.1",
     "@twilio-paste/tooltip-primitive": "^2.0.1",
diff --git a/packages/paste-website/src/assets/images/timeline-infinite.png b/packages/paste-website/src/assets/images/timeline-infinite.png
new file mode 100644
index 0000000000..e1ff69516c
Binary files /dev/null and b/packages/paste-website/src/assets/images/timeline-infinite.png differ
diff --git a/packages/paste-website/src/component-examples/TimelineExamples.ts b/packages/paste-website/src/component-examples/TimelineExamples.ts
new file mode 100644
index 0000000000..0be64e6b96
--- /dev/null
+++ b/packages/paste-website/src/component-examples/TimelineExamples.ts
@@ -0,0 +1,300 @@
+export const TimelineStart = `
+const TimelineStart = () => {
+  return (
+    <Timeline>
+      <TimelineItem title="Event title" timestamp="August 24, 2024">
+        Event details
+      </TimelineItem>
+      <TimelineItem title="Event title" timestamp="August 29, 2024">
+        Event details
+      </TimelineItem>
+      <TimelineItem title="Event title" timestamp="August 30, 2024">
+        Event details
+      </TimelineItem>
+    </Timeline>
+  );
+};
+render(<TimelineStart/>)
+`.trim();
+
+export const TimelineBasic = `
+const TimelineBasic = () => {
+  return (
+    <Timeline>
+      <TimelineItem title="$0" timestamp="From March 6 - April 6, 2024">
+      </TimelineItem>
+      <TimelineItem title="$80" timestamp="From April 6 - April 30, 2024">
+      </TimelineItem>
+      <TimelineItem title="$199" timestamp="From April 6 - April 30, 2024">
+        <Box display="flex" flexDirection="column" rowGap="space30" marginTop="space20">
+          <StatusBadge as="span" variant="ProcessInProgress">
+            In-progress
+          </StatusBadge>
+          <Paragraph marginBottom="space0">Auto renew every month until cancelled</Paragraph>
+        </Box>
+      </TimelineItem>
+    </Timeline>
+  );
+};
+render(<TimelineBasic/>)
+`.trim();
+
+export const TimelineIcon = `
+const TimelineIcon = () => {
+  return (
+    <Timeline>
+      <TimelineItem title="Message created" timestamp="August 10, 2024 | 12:38 pm | 0 s" icon={SMSCapableIcon}>
+        Twilio Platform
+      </TimelineItem>
+      <TimelineItem title="Enqueued" timestamp="August 10, 2024 | 12:38 pm | 0.04 s">
+        Twilio Platform
+      </TimelineItem>
+      <TimelineItem title="Dequeued" timestamp="August 10, 2024 | 12:38 pm | 0.09 s">
+        Twilio Platform
+      </TimelineItem>
+      <TimelineItem title="Sent" timestamp="August 10, 2024 | 12:38 pm | 0.20 s" icon={SentIcon}>
+        Twilio Platform
+      </TimelineItem>
+      <TimelineItem title="Undelivered" timestamp="August 10, 2024 | 12:38 pm | 0.24 s" icon={DisableIcon}>
+        Twilio Platform
+      </TimelineItem>
+    </Timeline>
+  );
+};
+render(<TimelineIcon/>)
+`.trim();
+
+export const TimelineCollapsible = `
+const TimelineCollapsible = () => {
+  return (
+    <Timeline>
+      <TimelineItem title="Inbound call" timestamp="Yesterday | 9:11am | 5m 6s" icon={CallIcon} collapsible>
+        Twilio Platform
+      </TimelineItem>
+      <TimelineItem title="Inbound SMS" timestamp="August 10, 2024 | 12:38 pm | 15m 34s" icon={SMSIcon} collapsible>
+        <Box
+          display="flex"
+          rowGap="space30"
+          columnGap="space30"
+          flexWrap="wrap"
+          color="colorTextWeak"
+          fontWeight="fontWeightMedium"
+          lineHeight="lineHeight20"
+          fontSize="fontSize20">
+          <Box display="flex" columnGap="space30">
+            <AgentIcon decorative={true} />
+            <Box>
+              <Box as="span" fontWeight="fontWeightSemibold">
+                Agent:{" "}
+              </Box>
+              Lizbeth Sarvati
+            </Box>
+          </Box>
+          <Box display="flex" columnGap="space30">
+            <NotesIcon decorative={true} />
+            <Box>
+              <Box as="span" fontWeight="fontWeightSemibold">
+                Queue:{" "}
+              </Box>
+              Promo inbounds
+            </Box>
+          </Box>
+          <Box display="flex" columnGap="space30">
+            <Box display="flex" columnGap="space30">
+              <SentimentPositiveIcon decorative={true} />
+              <Box>
+                <Box as="span" fontWeight="fontWeightSemibold">
+                  Sentiment:{" "}
+                </Box>
+                Lizbeth Sarvati
+              </Box>
+            </Box>
+            <Box display="flex" columnGap="space30">
+              <SupportIcon decorative={true} />
+              <Box>
+                <Box as="span" fontWeight="fontWeightSemibold">
+                  Disposition code:{" "}
+                </Box>
+                Promo inquiry
+              </Box>
+            </Box>
+          </Box>
+          <Box display="flex" columnGap="space30">
+            <DocumentationIcon decorative={true} />
+            <Box>
+              <Box as="span" fontWeight="fontWeightSemibold">
+                Agent:{" "}
+              </Box>
+              Ana received a $555 promotion on her phone and was interested in learning more about it.
+              She was curious if she would be eligible for the promotion by increasing her deposits by $5,000 over the next two months.
+              The agent explained that this was possible and suggested that she accept the offer through her app.
+            </Box>
+          </Box>
+        </Box>
+      </TimelineItem>
+      <TimelineItem title="Campaign card viewed" timestamp="August 10, 2024 | 12:34 pm" icon={StarIcon} collapsible>
+        <Box
+          display="flex"
+          flexDirection="column"
+          rowGap="space30"
+          as="span"
+          color="colorTextWeak"
+          fontWeight="fontWeightMedium"
+          lineHeight="lineHeight20"
+          fontSize="fontSize20">
+          <Box>
+            <Box as="span" fontWeight="fontWeightSemibold">
+              Campaign:{" "}
+            </Box>
+            Earn $555 promotion
+          </Box>
+           <Box>
+            <Box as="span" fontWeight="fontWeightSemibold">
+              ID:{" "}
+            </Box>
+            WB-W-555-PROMO
+          </Box>
+        </Box>
+      </TimelineItem>
+      <TimelineItem title="Registered Visa Debit Card" timestamp="July 20, 2024 | 10:38 pm" icon={PaymentIcon} collapsible>
+        Twilio Platform
+      </TimelineItem>
+    </Timeline>
+  );
+};
+render(<TimelineCollapsible/>)
+`.trim();
+
+export const TimelineGrouped = `
+const TimelineGrouped = () => {
+  return (
+    <Timeline>
+      <TimelineItemGroup timestamp="September 17, 2024" icon={CalendarIcon}>
+        <TimelineItem title="Filter Pattern">
+          <Box display="flex" flexDirection="column" rowGap="space30" marginTop="space20">
+            <StatusBadge as="span" variant="ProcessInProgress">
+              In-progress
+            </StatusBadge>
+            <Paragraph marginBottom="space0">Filters enable users to narrow down and refine results across various types of content pages,
+            including rich content pages, data tables, lists, data insights, and more.</Paragraph>
+          </Box>
+        </TimelineItem>
+        <TimelineItem title="Timeline component">
+          <Box display="flex" flexDirection="column" rowGap="space30" marginTop="space20">
+            <StatusBadge as="span" variant="ProcessInProgress">
+              In-progress
+            </StatusBadge>
+            <Paragraph marginBottom="space0">A component used to display a list of events that occurred in chronological order.</Paragraph>
+          </Box>
+        </TimelineItem>
+      </TimelineItemGroup>
+      <TimelineItemGroup timestamp="November 17, 2024" icon={CalendarIcon}>
+        <TimelineItem title="Callout component, refined">
+          <Box marginTop="space20">
+            <StatusBadge as="span" variant="ProcessDraft">
+              To do
+            </StatusBadge>
+          </Box>
+        </TimelineItem>
+      </TimelineItemGroup>
+      <TimelineItem title="Pricing cards" icon={CalendarIcon} collapsible collapsibleHeading="More details">
+        <Paragraph marginBottom="space0">The delivery timeline for the Pricing Pattern is pending approval from the broader team.</Paragraph>
+      </TimelineItem>
+    </Timeline>
+  );
+};
+render(<TimelineGrouped/>)
+`.trim();
+
+export const TimelineComposition = `
+const TimelineComposition = () => {
+  return (
+    <Timeline>
+      <TimelineItem title="Message sent" timestamp="August 24, 2024">
+       <Box marginTop="space20">
+          <Paragraph marginBottom="space0">The message was successfully sent through the following diffusion channels:</Paragraph>
+          <Box marginTop="space30">
+            <Table>
+              <THead>
+                <Tr>
+                  <Th>Channel Name</Th>
+                  <Th>Status</Th>
+                </Tr>
+              </THead>
+              <TBody>
+                <Tr>
+                  <Td>
+                    Customer Updates
+                  </Td>
+                  <Td>
+                    <StatusBadge as="span" variant="ProcessSuccess">
+                      Sent
+                    </StatusBadge>
+                  </Td>
+                </Tr>
+                <Tr>
+                  <Td>
+                   Special Promotions
+                  </Td>
+                  <Td>
+                    <StatusBadge as="span" variant="ProcessSuccess">
+                      Sent
+                    </StatusBadge>
+                  </Td>
+                </Tr>
+              </TBody>
+            </Table>
+          </Box>
+        </Box>
+      </TimelineItem>
+      <TimelineItem title="Message scheduled" timestamp="August 22, 2024">
+        <Box marginTop="space10">
+          <Paragraph marginBottom="space0">The message has been scheduled for delivery.</Paragraph>
+          <Anchor href="#" display="block" marginTop="space50">
+            View Scheduled Message
+          </Anchor>
+        </Box>
+      </TimelineItem>
+      <TimelineItem title="Message created" timestamp="August 20, 2024">
+        <Box marginTop="space20">
+          <StatusBadge as="span" variant="ProcessSuccess">
+            Completed
+          </StatusBadge>
+        </Box>
+      </TimelineItem>
+    </Timeline>
+  );
+};
+render(<TimelineComposition/>)
+`.trim();
+
+export const TimelineTimestamp = `
+const TimelineTimestamp = () => {
+  return (
+    <Timeline>
+      <TimelineItem title="Flagged on Verizon" timestamp="August 10, 2024 | 12:38:00 pm">
+       <Box marginTop="space20">
+          <StatusBadge as="span" variant="ProcessWarning">
+            Warning
+          </StatusBadge>
+        </Box>
+      </TimelineItem>
+      <TimelineItem title="Unflagged on AT&T" timestamp="August 10, 2024 | 12:38:02 pm">
+        <Box marginTop="space20">
+          <StatusBadge as="span" variant="ProcessSuccess">
+            Success
+          </StatusBadge>
+        </Box>
+      </TimelineItem>
+      <TimelineItem title="Flagged on AT&T" timestamp="August 10, 2024 | 12:38:03 pm">
+        <Box marginTop="space20">
+          <StatusBadge as="span" variant="ProcessWarning">
+            Warning
+          </StatusBadge>
+        </Box>
+      </TimelineItem>
+    </Timeline>
+  );
+};
+render(<TimelineTimestamp/>)
+`.trim();
diff --git a/packages/paste-website/src/pages/components/timeline/api.mdx b/packages/paste-website/src/pages/components/timeline/api.mdx
new file mode 100644
index 0000000000..57ecc916c2
--- /dev/null
+++ b/packages/paste-website/src/pages/components/timeline/api.mdx
@@ -0,0 +1,70 @@
+export const meta = {
+  title: 'Timeline - API - Components',
+  package: '@twilio-paste/timeline',
+  description: 'A Timeline is a visual representation of events displayed in chronological order.',
+  slug: '/components/timeline/api',
+};
+
+import Changelog from "@twilio-paste/timeline/CHANGELOG.md";
+import packageJson from "@twilio-paste/timeline/package.json";
+import {SidebarCategoryRoutes} from '../../../constants';
+import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
+import {getFeature, getNavigationData, getComponentApi} from '../../../utils/api';
+
+export default ComponentPageLayout;
+
+export const getStaticProps = async () => {
+  const navigationData = await getNavigationData();
+  const feature = await getFeature('Timeline');
+  const {componentApi, componentApiTocData} = getComponentApi('@twilio-paste/timeline');
+  return {
+    props: {
+      data: {
+        ...packageJson,
+        ...feature,
+      },
+      componentApi,
+      mdxHeadings: [...mdxHeadings, ...componentApiTocData],
+      navigationData,
+      pageHeaderData: {
+        categoryRoute: SidebarCategoryRoutes.COMPONENTS,
+        githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/timeline',
+        storybookUrl: '/?path=/story/components-timeline--default-timeline',
+      },
+    },
+  };
+};
+
+## Installation
+
+```bash
+yarn add @twilio-paste/timeline - or - yarn add @twilio-paste/core
+```
+
+## Usage
+
+```jsx
+import {Timeline, TimelineItem} from '@twilio-paste/core/timeline';
+
+const TimePickerExample = () => {
+  return (
+    <Timeline>
+      <TimelineItem title="Event title" timestamp="August 24, 2024">
+        Event details
+      </TimelineItem>
+
+      <TimelineItem title="Event title" timestamp="August 29, 2024">
+        Event details
+      </TimelineItem>
+
+      <TimelineItem title="Event title" timestamp="August 30, 2024">
+        Event details
+      </TimelineItem>
+    </Timeline>
+  );
+};
+```
+
+## Props
+
+<PropsTable componentApi={props.componentApi} />
diff --git a/packages/paste-website/src/pages/components/timeline/changelog.mdx b/packages/paste-website/src/pages/components/timeline/changelog.mdx
new file mode 100644
index 0000000000..b89cb30038
--- /dev/null
+++ b/packages/paste-website/src/pages/components/timeline/changelog.mdx
@@ -0,0 +1,37 @@
+export const meta = {
+  title: 'Timeline - Changelog - Components',
+  package: '@twilio-paste/timeline',
+  description: 'A Timeline is a visual representation of events displayed in chronological order.',
+  slug: '/components/timeline/changelog',
+};
+
+import Changelog from '@twilio-paste/timeline/CHANGELOG.md';
+import packageJson from '@twilio-paste/timeline/package.json';
+
+import {SidebarCategoryRoutes} from '../../../constants';
+import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
+import {getFeature, getNavigationData} from '../../../utils/api';
+
+export default ComponentPageLayout;
+
+export const getStaticProps = async () => {
+  const navigationData = await getNavigationData();
+  const feature = await getFeature('Timeline');
+  return {
+    props: {
+      data: {
+        ...packageJson,
+        ...feature,
+      },
+      navigationData,
+      mdxHeadings,
+      pageHeaderData: {
+        categoryRoute: SidebarCategoryRoutes.COMPONENTS,
+        githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/timeline',
+        storybookUrl: '/?path=/story/components-timeline--default-timeline',
+      },
+    },
+  };
+};
+
+<Changelog />
diff --git a/packages/paste-website/src/pages/components/timeline/index.mdx b/packages/paste-website/src/pages/components/timeline/index.mdx
new file mode 100644
index 0000000000..f7100077ee
--- /dev/null
+++ b/packages/paste-website/src/pages/components/timeline/index.mdx
@@ -0,0 +1,337 @@
+export const meta = {
+  title: "Timeline - Components",
+  package: "@twilio-paste/timeline",
+  description: "A Timeline is a visual representation of events displayed in chronological order.",
+  slug: "/components/timeline/",
+};
+
+import { DatePicker } from "@twilio-paste/date-picker";
+import { HelpText } from "@twilio-paste/help-text";
+import { formatReturnTime, TimePicker } from "@twilio-paste/time-picker";
+
+import { Anchor } from "@twilio-paste/anchor";
+import { Callout, CalloutText } from "@twilio-paste/callout";
+import { ListItem, OrderedList, UnorderedList } from "@twilio-paste/list";
+import { Do, DoDont, Dont } from "../../../components/DoDont";
+
+import { Box } from "@twilio-paste/box";
+import { AgentIcon } from "@twilio-paste/icons/esm/AgentIcon";
+import { CalendarIcon } from "@twilio-paste/icons/esm/CalendarIcon";
+import { CallIcon } from "@twilio-paste/icons/esm/CallIcon";
+import { DisableIcon } from "@twilio-paste/icons/esm/DisableIcon";
+import { DocumentationIcon } from "@twilio-paste/icons/esm/DocumentationIcon";
+import { NotesIcon } from "@twilio-paste/icons/esm/NotesIcon";
+import { PaymentIcon } from "@twilio-paste/icons/esm/PaymentIcon";
+import { ProcessInProgressIcon } from "@twilio-paste/icons/esm/ProcessInProgressIcon";
+import { SMSCapableIcon } from "@twilio-paste/icons/esm/SMSCapableIcon";
+import { SMSIcon } from "@twilio-paste/icons/esm/SMSIcon";
+import { SentIcon } from "@twilio-paste/icons/esm/SentIcon";
+import { SentimentPositiveIcon } from "@twilio-paste/icons/esm/SentimentPositiveIcon";
+import { StarIcon } from "@twilio-paste/icons/esm/StarIcon";
+import { SupportRequestIcon } from "@twilio-paste/icons/esm/SupportRequestIcon";
+import { WarningIcon } from "@twilio-paste/icons/esm/WarningIcon";
+import { Paragraph } from "@twilio-paste/paragraph";
+import { StatusBadge } from "@twilio-paste/status";
+import { Table, TBody, Td, Th, THead, Tr } from '@twilio-paste/table';
+import { Timeline, TimelineItem, TimelineItemGroup } from "@twilio-paste/timeline";
+import {
+  TimelineBasic,
+  TimelineCollapsible,
+  TimelineComposition,
+  TimelineGrouped,
+  TimelineIcon,
+  TimelineStart,
+  TimelineTimestamp,
+} from "../../../component-examples/TimelineExamples.ts";
+import { ResponsiveImage } from '../../../components/ResponsiveImage';
+
+import { SupportIcon } from "@twilio-paste/icons/esm/SupportIcon";
+import Changelog from "@twilio-paste/timeline/CHANGELOG.md";
+import packageJson from "@twilio-paste/timeline/package.json";
+import InfiniteTimeline from '../../../assets/images/timeline-infinite.png';
+import { SidebarCategoryRoutes } from "../../../constants";
+import ComponentPageLayout from "../../../layouts/ComponentPageLayout";
+import { getFeature, getNavigationData } from "../../../utils/api";
+export default ComponentPageLayout;
+
+export const getStaticProps = async () => {
+  const navigationData = await getNavigationData();
+  const feature = await getFeature("Timeline");
+  return {
+    props: {
+      data: {
+        ...packageJson,
+        ...feature,
+      },
+      navigationData,
+      mdxHeadings,
+      pageHeaderData: {
+        categoryRoute: SidebarCategoryRoutes.COMPONENTS,
+        githubUrl: "https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/timeline",
+        storybookUrl: "/?path=/story/components-timeline--default-timeline",
+      },
+    },
+  };
+};
+
+<LivePreview scope={{ Timeline, TimelineItem }} noInline>
+  {TimelineStart}
+</LivePreview>
+
+## Guidelines
+
+### About Timeline
+
+A Timeline can be used to display historical, current or future events or information in chronological order based on when they happened or are scheduled to happen.
+
+Timelines can be used in different use cases, such as tracking milestones, monitoring system logs, or visualizing user activity.
+
+### Accessibility
+
+<UnorderedList>
+  <ListItem>
+    Timeline is an ordered list (&lt;ol&gt;) and TimelineItem is a list item (&lt;li&gt;).
+  </ListItem>
+
+  <ListItem>
+    The only tabbable and interactive part of a Timeline is the toggle button when using the <inlineCode>collapsible</inlineCode> prop
+    <UnorderedList marginBottom="space0">
+      <ListItem>
+        <inlineCode>collapsible</inlineCode> TimelineItems use the <Anchor href="/components/summary-detail">Summary Detail</Anchor> component. The toggle button is labeled by the value of the <inlineCode>timestamp</inlineCode> prop.
+        If the value is too verbose for a screen reader or not a clear label for the collapsed content, provide a helpful label for the button using the <inlineCode>collapsibleLabelText</inlineCode> prop on TimelineItem
+      </ListItem>
+    </UnorderedList>
+  </ListItem>
+  <ListItem>
+    Don’t use icons in TimelineItem markers to represent status like warning, error, or success. Since the marker is non-interactive, relying on icons for semantic meaning can cause accessibility challenges, particularly for people using screen readers.
+  </ListItem>
+</UnorderedList>
+
+### Timeline vs. Progress Steps
+
+Use Timeline:
+
+<UnorderedList>
+  <ListItem>To display the history or sequence of events, focusing on what has happened over time.</ListItem>
+  <ListItem>
+    When user interaction is secondary, and progress does not depend on user actions, ensuring the process continues
+    even without direct user input.
+  </ListItem>
+</UnorderedList>
+
+Use Progress Steps:
+
+<UnorderedList>
+  <ListItem>To guide users through a sequence of steps necessary to complete a task.</ListItem>
+  <ListItem>
+    When user interaction is required at certain points in a process and actions are necessary to complete a goal.
+  </ListItem>
+</UnorderedList>
+
+## Examples
+
+### Timeline
+
+Use a basic Timeline as the default option to display a series of events that need to be ordered by time.
+
+<LivePreview scope={{ Timeline, TimelineItem, StatusBadge, Box, Paragraph }} noInline>
+  {TimelineBasic}
+</LivePreview>
+
+### Timeline with icons
+
+Use a Timeline with icons to highlight events that would benefit from a visual cue to make the event more noticeable.
+Timeline icons are decorative, so they should not convey any information that is not clear from the text alone.
+Do not use icons to convey status or state.
+
+Provide the TimelineItem with an `icon` prop to display an icon instead of the default dot. You must import the icon before passing it to the icon prop.
+The icon must be a [Paste Icon](/components/icon). Icons passed to TimelineItems within a TimelineItemGroup will be ignored, as only direct children of the Timeline component should have visual markers.
+
+<Callout variant="neutral" marginY="space70">
+  <CalloutText>Tip: Combine icons with dots to visually emphasize specific events within the Timeline.</CalloutText>
+</Callout>
+
+<LivePreview scope={{ Timeline, TimelineItem, SMSCapableIcon, SentIcon, DisableIcon }} noInline>
+  {TimelineIcon}
+</LivePreview>
+
+### Collapsible Timeline content
+
+Use the `collapsible` prop when your Timeline includes additional information that doesn't need to be visible at all times.
+
+<LivePreview
+  scope={{
+    Timeline,
+    TimelineItem,
+    Box,
+    CallIcon,
+    SMSIcon,
+    StarIcon,
+    PaymentIcon,
+    AgentIcon,
+    NotesIcon,
+    SentimentPositiveIcon,
+    SupportIcon,
+    DocumentationIcon,
+  }}
+  noInline
+>
+  {TimelineCollapsible}
+</LivePreview>
+
+### Grouped Timeline
+
+Use when multiple events happen at the same time or can be grouped under a common category to make the Timeline clearer.
+
+<Callout variant="neutral" marginY="space70">
+  <CalloutText>
+    It is not required to group all events that occur with the same timestamp. Grouping should be used when it enhances
+    clarity, particularly when the events are part of the same logical sequence or related set of actions that match the
+    user's mental model.
+  </CalloutText>
+</Callout>
+
+In a grouped Timeline, the timestamp is optional for individual Timeline items since they share a common timestamp.
+However, for collapsible Timeline items, if no timestamp is provided, a heading must be included as the collapsible header.
+
+<LivePreview
+  scope={{
+    Timeline,
+    TimelineItem,
+    TimelineItemGroup,
+    StatusBadge,
+    Box,
+    Paragraph,
+    CalendarIcon
+  }}
+  noInline
+>
+  {TimelineGrouped}
+</LivePreview>
+
+## Timeline event loading
+
+### Load more
+
+Use a “Load more” Button in the Timeline when the screen viewport is limited.
+The events should load in batches of the same number of events that were initially displayed, once all the events have been displayed, remove the “Load more” Button.
+
+### Infinite scroll
+
+Use infinite scroll only when the Timeline is the last item on the page or surface, and there are no footers or other elements below it that the user needs to interact with.
+Use [Skeleton Loader](/components/skeleton-loader) for results that might take a while to load.
+
+<Callout variant="neutral" marginY="space70">
+  <CalloutText>
+    Tip: For very long Timelines, where pressing "Load more" Buttons might become cumbersome, consider using a{" "}
+    <Anchor href="/components/side-modal">Side Modal</Anchor> with infinite scroll to display the complete list of
+    events.
+  </CalloutText>
+</Callout>
+
+<ResponsiveImage src={InfiniteTimeline} alt="a demo page with filter pattern" />
+
+
+## Composition notes
+
+A Timeline should be presented in chronological order. The order can either be descending (most recent event at the top the list) or ascending (oldest event at the top of the list)
+
+**Use descending order on a Timeline when the current event is the most relevant information for the user.**
+
+<UnorderedList>
+  <ListItem>
+    Time sensitive information, for example an <strong>SMS sending tracker</strong> where the final status (sent or failed) is
+    crucial for the user to track in real time.
+  </ListItem>
+  <ListItem>
+    Long lists of events that are constantly updated, for example in <strong>customer call logs</strong> where the most recent
+    interaction is displayed first so agents can access the information in a timely manner.
+  </ListItem>
+</UnorderedList>
+
+**Use ascending order on a Timeline when understanding the progression from the oldest event to the most recent is essential.**
+
+<UnorderedList>
+  <ListItem>
+    Diagnosing an issue, for example in <strong>platform issue reporting</strong>, where understanding the sequence of reported
+    issues is necessary to understand the problem.
+  </ListItem>
+  <ListItem>
+    Events that evolve through time, for example in <strong>payment history</strong> where the price has changed over time.
+  </ListItem>
+</UnorderedList>
+
+Any content and other components can be placed within the Timeline item detail.
+
+<LivePreview scope={{ Timeline, TimelineItem, StatusBadge, Box, Paragraph, Anchor, Table, THead, TBody, Td, Th, Tr }} noInline>
+  {TimelineComposition}
+</LivePreview>
+
+### Timestamp
+
+Follow Paste's [date guidelines](/foundations/content/product-style-guide#dates) and [time guidelines](/foundations/content/product-style-guide#time) to format the timestamp for each Timeline item.
+In use cases where more than one timestamp per Timeline item is required, use separators in between timestamps for clarity. Order multiple timestamps by starting with the largest time unit and ending with the smallest:
+
+<OrderedList>
+  <ListItem>Month and Day, Year (ex: "August 10, 2024")</ListItem>
+  <ListItem>Hour, Minute, Second (ex: "12:38 pm")</ListItem>
+  <ListItem>Additional Details (ex: "0.2 s" for duration)</ListItem>
+</OrderedList>
+
+<LivePreview scope={{ Timeline, TimelineItem, StatusBadge, Box, Paragraph }} noInline>
+  {TimelineTimestamp}
+</LivePreview>
+
+## Dos and don'ts
+
+<DoDont>
+  <Do title="Do" body="Always include a timestamp on Timeline events." center>
+    <Box>
+      <Timeline>
+        <TimelineItem title="Event title" timestamp="August 30, 2024" />
+        <TimelineItem title="Event title" timestamp="August 29, 2024" />
+        <TimelineItem title="Event title" timestamp="August 21, 2024" />
+      </Timeline>
+    </Box>
+  </Do>
+
+  <Dont title="Don't" body="Don’t use Timeline as a way of navigating tasks." center>
+    <Timeline>
+      <TimelineItem title="Sign up" timestamp="August 30, 2024" />
+      <TimelineItem title="Validate email" timestamp="August 29, 2024" />
+      <TimelineItem title="Complete profile" timestamp="August 21, 2024" />
+    </Timeline>
+  </Dont>
+  <Do
+    title="Do"
+    body="For use cases where displaying status is beneficial to the user, you can incorporate Status Badges or other status components within the Timeline item content."
+    center
+  >
+    <Timeline>
+      <TimelineItem title="Flagged" timestamp="August 30, 2024">
+        <Box marginTop="space10">
+          <StatusBadge as="span" variant="ProcessWarning">
+            Warning
+          </StatusBadge>
+        </Box>
+      </TimelineItem>
+      <TimelineItem title="Sent" timestamp="August 29, 2024">
+        <Box marginTop="space10">
+          <StatusBadge as="span" variant="ProcessSuccess">
+            Success
+          </StatusBadge>
+        </Box>
+      </TimelineItem>
+    </Timeline>
+  </Do>
+  <Dont
+    title="Don't"
+    body="Don’t use icons as Timeline item markers to represent status like warning, error, or success."
+    center
+  >
+    <Timeline>
+      <TimelineItem title="Sending" timestamp="August 30, 2024" icon={ProcessInProgressIcon} />
+      <TimelineItem title="Undelivered" timestamp="August 29, 2024" icon={WarningIcon} />
+    </Timeline>
+  </Dont>
+</DoDont>
diff --git a/yarn.lock b/yarn.lock
index cc96fd8dd2..3454e53f96 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16078,6 +16078,7 @@ __metadata:
     "@twilio-paste/textarea": ^10.1.1
     "@twilio-paste/theme": ^11.1.0
     "@twilio-paste/time-picker": ^6.1.1
+    "@twilio-paste/timeline": ^0.0.0
     "@twilio-paste/toast": ^12.1.1
     "@twilio-paste/tooltip": ^11.1.1
     "@twilio-paste/tooltip-primitive": ^2.0.1