diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index aaf27ef9..bff81593 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -926,31 +926,33 @@ None.
 ### Types
 
 ```ts
-export type DataTableKey = string;
+export type DataTableKey<Row = DataTableRow> = Exclude<keyof Row, "id">;
 
 export type DataTableValue = any;
 
-export interface DataTableEmptyHeader {
-  key: DataTableKey;
+export interface DataTableEmptyHeader<Row = DataTableRow> {
+  key: DataTableKey<Row>;
   empty: boolean;
-  display?: (item: Value, row: DataTableRow) => DataTableValue;
+  display?: (item: Value, row: Row) => DataTableValue;
   sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
   columnMenu?: boolean;
   width?: string;
   minWidth?: string;
 }
 
-export interface DataTableNonEmptyHeader {
-  key: DataTableKey;
+export interface DataTableNonEmptyHeader<Row = DataTableRow> {
+  key: DataTableKey<Row>;
   value: DataTableValue;
-  display?: (item: Value, row: DataTableRow) => DataTableValue;
+  display?: (item: Value, row: Row) => DataTableValue;
   sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
   columnMenu?: boolean;
   width?: string;
   minWidth?: string;
 }
 
-export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader;
+export type DataTableHeader<Row = DataTableRow> =
+  | DataTableNonEmptyHeader<Row>
+  | DataTableEmptyHeader<Row>;
 
 export interface DataTableRow {
   id: any;
@@ -959,8 +961,8 @@ export interface DataTableRow {
 
 export type DataTableRowId = any;
 
-export interface DataTableCell {
-  key: DataTableKey;
+export interface DataTableCell<Row = DataTableRow> {
+  key: DataTableKey<Row>;
   value: DataTableValue;
   display?: (item: Value, row: DataTableRow) => DataTableValue;
 }
@@ -975,9 +977,9 @@ export interface DataTableCell {
 | expandedRowIds      | No       | <code>let</code> | Yes      | <code>ReadonlyArray<DataTableRowId></code>                          | <code>[]</code>        | Specify the row ids to be expanded                                                                                  |
 | expandable          | No       | <code>let</code> | Yes      | <code>boolean</code>                                                | <code>false</code>     | Set to `true` for the expandable variant<br />Automatically set to `true` if `batchExpansion` is `true`             |
 | sortDirection       | No       | <code>let</code> | Yes      | <code>"none" &#124; "ascending" &#124; "descending"</code>          | <code>"none"</code>    | Specify the sort direction                                                                                          |
-| sortKey             | No       | <code>let</code> | Yes      | <code>DataTableKey</code>                                           | <code>null</code>      | Specify the header key to sort by                                                                                   |
-| headers             | No       | <code>let</code> | No       | <code>ReadonlyArray<DataTableHeader></code>                         | <code>[]</code>        | Specify the data table headers                                                                                      |
-| rows                | No       | <code>let</code> | No       | <code>ReadonlyArray<DataTableRow></code>                            | <code>[]</code>        | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids               |
+| sortKey             | No       | <code>let</code> | Yes      | <code>DataTableKey<Row></code>                                      | <code>null</code>      | Specify the header key to sort by                                                                                   |
+| headers             | No       | <code>let</code> | No       | <code>ReadonlyArray<DataTableHeader<Row>></code>                    | <code>[]</code>        | Specify the data table headers                                                                                      |
+| rows                | No       | <code>let</code> | No       | <code>ReadonlyArray<Row></code>                                     | <code>[]</code>        | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids               |
 | size                | No       | <code>let</code> | No       | <code>"compact" &#124; "short" &#124; "medium" &#124; "tall"</code> | <code>undefined</code> | Set the size of the data table                                                                                      |
 | title               | No       | <code>let</code> | No       | <code>string</code>                                                 | <code>""</code>        | Specify the title of the data table                                                                                 |
 | description         | No       | <code>let</code> | No       | <code>string</code>                                                 | <code>""</code>        | Specify the description of the data table                                                                           |
@@ -995,29 +997,29 @@ export interface DataTableCell {
 
 ### Slots
 
-| Slot name    | Default | Props                                                                                          | Fallback                                                                 |
-| :----------- | :------ | :--------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------- |
-| --           | Yes     | --                                                                                             | --                                                                       |
-| cell         | No      | <code>{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; } </code> | <code>{cell.display ? cell.display(cell.value, row) : cell.value}</code> |
-| cell-header  | No      | <code>{ header: DataTableNonEmptyHeader; } </code>                                             | <code>{header.value}</code>                                              |
-| description  | No      | --                                                                                             | <code>{description}</code>                                               |
-| expanded-row | No      | <code>{ row: DataTableRow; } </code>                                                           | --                                                                       |
-| title        | No      | --                                                                                             | <code>{title}</code>                                                     |
+| Slot name    | Default | Props                                                                                      | Fallback                                                                 |
+| :----------- | :------ | :----------------------------------------------------------------------------------------- | :----------------------------------------------------------------------- |
+| --           | Yes     | --                                                                                         | --                                                                       |
+| cell         | No      | <code>{ row: Row; cell: DataTableCell<Row>; rowIndex: number; cellIndex: number; } </code> | <code>{cell.display ? cell.display(cell.value, row) : cell.value}</code> |
+| cell-header  | No      | <code>{ header: DataTableNonEmptyHeader; } </code>                                         | <code>{header.value}</code>                                              |
+| description  | No      | --                                                                                         | <code>{description}</code>                                               |
+| expanded-row | No      | <code>{ row: Row; } </code>                                                                | --                                                                       |
+| title        | No      | --                                                                                         | <code>{title}</code>                                                     |
 
 ### Events
 
-| Event name           | Type       | Detail                                                                                                  |
-| :------------------- | :--------- | :------------------------------------------------------------------------------------------------------ |
-| click                | dispatched | <code>{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }</code>                    |
-| click:header--expand | dispatched | <code>{ expanded: boolean; }</code>                                                                     |
-| click:header         | dispatched | <code>{ header: DataTableHeader; sortDirection?: "ascending" &#124; "descending" &#124; "none" }</code> |
-| click:header--select | dispatched | <code>{ indeterminate: boolean; selected: boolean; }</code>                                             |
-| click:row            | dispatched | <code>DataTableRow</code>                                                                               |
-| mouseenter:row       | dispatched | <code>DataTableRow</code>                                                                               |
-| mouseleave:row       | dispatched | <code>DataTableRow</code>                                                                               |
-| click:row--expand    | dispatched | <code>{ expanded: boolean; row: DataTableRow; }</code>                                                  |
-| click:row--select    | dispatched | <code>{ selected: boolean; row: DataTableRow; }</code>                                                  |
-| click:cell           | dispatched | <code>DataTableCell</code>                                                                              |
+| Event name           | Type       | Detail                                                                                                       |
+| :------------------- | :--------- | :----------------------------------------------------------------------------------------------------------- |
+| click                | dispatched | <code>{ header?: DataTableHeader<Row>; row?: Row; cell?: DataTableCell<Row>; }</code>                        |
+| click:header--expand | dispatched | <code>{ expanded: boolean; }</code>                                                                          |
+| click:header         | dispatched | <code>{ header: DataTableHeader<Row>; sortDirection?: "ascending" &#124; "descending" &#124; "none" }</code> |
+| click:header--select | dispatched | <code>{ indeterminate: boolean; selected: boolean; }</code>                                                  |
+| click:row            | dispatched | <code>Row</code>                                                                                             |
+| mouseenter:row       | dispatched | <code>Row</code>                                                                                             |
+| mouseleave:row       | dispatched | <code>Row</code>                                                                                             |
+| click:row--expand    | dispatched | <code>{ expanded: boolean; row: Row; }</code>                                                                |
+| click:row--select    | dispatched | <code>{ selected: boolean; row: Row; }</code>                                                                |
+| click:cell           | dispatched | <code>DataTableCell<Row></code>                                                                              |
 
 ## `DataTableSkeleton`
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 49caf480..560fd509 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -78,6 +78,7 @@
         }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "InlineComponent", "name": "AccordionSkeleton" },
       "extends": {
         "interface": "AccordionSkeletonProps",
@@ -156,6 +157,7 @@
         { "type": "forwarded", "name": "keydown", "element": "button" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "li" }
     },
     {
@@ -219,6 +221,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "ul" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "ul" }
     },
     {
@@ -242,6 +245,7 @@
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -298,6 +302,7 @@
         }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "InlineComponent", "name": "BreadcrumbSkeleton" },
       "extends": {
         "interface": "BreadcrumbSkeletonProps",
@@ -347,6 +352,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "li" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "li" }
     },
     {
@@ -387,6 +393,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -443,7 +450,8 @@
           "name": "BreakpointValue",
           "ts": "type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584"
         }
-      ]
+      ],
+      "generics": null
     },
     {
       "moduleName": "Button",
@@ -657,6 +665,7 @@
         }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "button | a | div" },
       "extends": {
         "interface": "ButtonSkeletonProps",
@@ -684,6 +693,7 @@
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -725,6 +735,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "a" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "a" }
     },
     {
@@ -930,6 +941,7 @@
         { "type": "forwarded", "name": "blur", "element": "input" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -945,6 +957,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -1009,6 +1022,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "Link" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "a | p" }
     },
     {
@@ -1265,6 +1279,7 @@
         { "type": "forwarded", "name": "animationend", "element": "CopyButton" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "InlineComponent", "name": "CodeSnippetSkeleton" }
     },
     {
@@ -1293,6 +1308,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -1452,6 +1468,7 @@
           "ts": "type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor"
         }
       ],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -1783,6 +1800,7 @@
           "ts": "interface ComboBoxItem { id: ComboBoxItemId; text: string; disabled?: boolean; }"
         }
       ],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "input" }
     },
     {
@@ -1896,6 +1914,7 @@
         { "type": "dispatched", "name": "open", "detail": "null" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -1919,6 +1938,7 @@
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "main" }
     },
     {
@@ -1959,6 +1979,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -2035,6 +2056,7 @@
         { "type": "dispatched", "name": "close", "detail": "null" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "ul" }
     },
     {
@@ -2044,7 +2066,8 @@
       "moduleExports": [],
       "slots": [],
       "events": [],
-      "typedefs": []
+      "typedefs": [],
+      "generics": null
     },
     {
       "moduleName": "ContextMenuGroup",
@@ -2077,7 +2100,8 @@
       "moduleExports": [],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [],
-      "typedefs": []
+      "typedefs": [],
+      "generics": null
     },
     {
       "moduleName": "ContextMenuOption",
@@ -2232,6 +2256,7 @@
         { "type": "dispatched", "name": "click", "detail": "null" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "li" }
     },
     {
@@ -2266,7 +2291,8 @@
       "moduleExports": [],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [],
-      "typedefs": []
+      "typedefs": [],
+      "generics": null
     },
     {
       "moduleName": "CopyButton",
@@ -2340,6 +2366,7 @@
         { "type": "dispatched", "name": "copy", "detail": "null" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "button" }
     },
     {
@@ -2350,7 +2377,7 @@
           "name": "headers",
           "kind": "let",
           "description": "Specify the data table headers",
-          "type": "ReadonlyArray<DataTableHeader>",
+          "type": "ReadonlyArray<DataTableHeader<Row>>",
           "value": "[]",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -2362,7 +2389,7 @@
           "name": "rows",
           "kind": "let",
           "description": "Specify the rows the data table should render\nkeys defined in `headers` are used for the row ids",
-          "type": "ReadonlyArray<DataTableRow>",
+          "type": "ReadonlyArray<Row>",
           "value": "[]",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -2433,7 +2460,7 @@
           "name": "sortKey",
           "kind": "let",
           "description": "Specify the header key to sort by",
-          "type": "DataTableKey",
+          "type": "DataTableKey<Row>",
           "value": "null",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -2617,7 +2644,7 @@
           "name": "cell",
           "default": false,
           "fallback": "{cell.display ? cell.display(cell.value, row) : cell.value}",
-          "slot_props": "{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; }"
+          "slot_props": "{ row: Row; cell: DataTableCell<Row>; rowIndex: number; cellIndex: number; }"
         },
         {
           "name": "cell-header",
@@ -2634,7 +2661,7 @@
         {
           "name": "expanded-row",
           "default": false,
-          "slot_props": "{ row: DataTableRow; }"
+          "slot_props": "{ row: Row; }"
         },
         {
           "name": "title",
@@ -2647,7 +2674,7 @@
         {
           "type": "dispatched",
           "name": "click",
-          "detail": "{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }"
+          "detail": "{ header?: DataTableHeader<Row>; row?: Row; cell?: DataTableCell<Row>; }"
         },
         {
           "type": "dispatched",
@@ -2657,45 +2684,37 @@
         {
           "type": "dispatched",
           "name": "click:header",
-          "detail": "{ header: DataTableHeader; sortDirection?: \"ascending\" | \"descending\" | \"none\" }"
+          "detail": "{ header: DataTableHeader<Row>; sortDirection?: \"ascending\" | \"descending\" | \"none\" }"
         },
         {
           "type": "dispatched",
           "name": "click:header--select",
           "detail": "{ indeterminate: boolean; selected: boolean; }"
         },
-        { "type": "dispatched", "name": "click:row", "detail": "DataTableRow" },
-        {
-          "type": "dispatched",
-          "name": "mouseenter:row",
-          "detail": "DataTableRow"
-        },
-        {
-          "type": "dispatched",
-          "name": "mouseleave:row",
-          "detail": "DataTableRow"
-        },
+        { "type": "dispatched", "name": "click:row", "detail": "Row" },
+        { "type": "dispatched", "name": "mouseenter:row", "detail": "Row" },
+        { "type": "dispatched", "name": "mouseleave:row", "detail": "Row" },
         {
           "type": "dispatched",
           "name": "click:row--expand",
-          "detail": "{ expanded: boolean; row: DataTableRow; }"
+          "detail": "{ expanded: boolean; row: Row; }"
         },
         {
           "type": "dispatched",
           "name": "click:row--select",
-          "detail": "{ selected: boolean; row: DataTableRow; }"
+          "detail": "{ selected: boolean; row: Row; }"
         },
         {
           "type": "dispatched",
           "name": "click:cell",
-          "detail": "DataTableCell"
+          "detail": "DataTableCell<Row>"
         }
       ],
       "typedefs": [
         {
-          "type": "string",
-          "name": "DataTableKey",
-          "ts": "type DataTableKey = string"
+          "type": "Exclude<keyof Row, \"id\">",
+          "name": "DataTableKey<Row=DataTableRow>",
+          "ts": "type DataTableKey<Row=DataTableRow> = Exclude<keyof Row, \"id\">"
         },
         {
           "type": "any",
@@ -2703,19 +2722,19 @@
           "ts": "type DataTableValue = any"
         },
         {
-          "type": "{ key: DataTableKey; empty: boolean; display?: (item: Value, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }",
-          "name": "DataTableEmptyHeader",
-          "ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: Value, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }"
+          "type": "{ key: DataTableKey<Row>; empty: boolean; display?: (item: Value, row: Row) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }",
+          "name": "DataTableEmptyHeader<Row=DataTableRow>",
+          "ts": "interface DataTableEmptyHeader<Row=DataTableRow> { key: DataTableKey<Row>; empty: boolean; display?: (item: Value, row: Row) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }"
         },
         {
-          "type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }",
-          "name": "DataTableNonEmptyHeader",
-          "ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }"
+          "type": "{ key: DataTableKey<Row>; value: DataTableValue; display?: (item: Value, row: Row) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }",
+          "name": "DataTableNonEmptyHeader<Row=DataTableRow>",
+          "ts": "interface DataTableNonEmptyHeader<Row=DataTableRow> { key: DataTableKey<Row>; value: DataTableValue; display?: (item: Value, row: Row) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }"
         },
         {
-          "type": "DataTableNonEmptyHeader | DataTableEmptyHeader",
-          "name": "DataTableHeader",
-          "ts": "type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader"
+          "type": "DataTableNonEmptyHeader<Row> | DataTableEmptyHeader<Row>",
+          "name": "DataTableHeader<Row=DataTableRow>",
+          "ts": "type DataTableHeader<Row=DataTableRow> = DataTableNonEmptyHeader<Row> | DataTableEmptyHeader<Row>"
         },
         {
           "type": "{ id: any; [key: string]: DataTableValue; }",
@@ -2728,11 +2747,12 @@
           "ts": "type DataTableRowId = any"
         },
         {
-          "type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; }",
-          "name": "DataTableCell",
-          "ts": "interface DataTableCell { key: DataTableKey; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; }"
+          "type": "{ key: DataTableKey<Row>; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; }",
+          "name": "DataTableCell<Row=DataTableRow>",
+          "ts": "interface DataTableCell<Row=DataTableRow> { key: DataTableKey<Row>; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; }"
         }
       ],
+      "generics": ["Row", "Row extends DataTableRow = DataTableRow"],
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -2832,6 +2852,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "table" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" },
       "extends": {
         "interface": "DataTableHeader",
@@ -3001,6 +3022,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -3215,6 +3237,7 @@
         { "type": "forwarded", "name": "paste", "element": "input" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "input" }
     },
     {
@@ -3255,6 +3278,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -3542,6 +3566,7 @@
           "ts": "interface DropdownItem { id: DropdownItemId; text: DropdownItemText; disabled?: boolean; }"
         }
       ],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -3570,6 +3595,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -3722,6 +3748,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "button" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "button" }
     },
     {
@@ -3923,6 +3950,7 @@
         { "type": "forwarded", "name": "keydown", "element": "Filename" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -4105,6 +4133,7 @@
         { "type": "forwarded", "name": "click", "element": "input" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "input" }
     },
     {
@@ -4271,6 +4300,7 @@
         { "type": "forwarded", "name": "click", "element": "input" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -4383,6 +4413,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "span" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "span" }
     },
     {
@@ -4398,6 +4429,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -4448,6 +4480,7 @@
         { "type": "forwarded", "name": "keydown", "element": "button" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div | button | svg" }
     },
     {
@@ -4465,6 +4498,7 @@
         { "type": "forwarded", "name": "submit", "element": "Form" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "form" }
     },
     {
@@ -4495,6 +4529,7 @@
         { "type": "forwarded", "name": "submit", "element": "form" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "form" }
     },
     {
@@ -4583,6 +4618,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "fieldset" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "fieldset" }
     },
     {
@@ -4598,6 +4634,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -4626,6 +4663,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "label" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "label" }
     },
     {
@@ -4739,6 +4777,7 @@
       ],
       "events": [],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -4892,6 +4931,7 @@
       ],
       "events": [{ "type": "forwarded", "name": "click", "element": "a" }],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "a" }
     },
     {
@@ -5008,6 +5048,7 @@
         { "type": "forwarded", "name": "click", "element": "button" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "button" }
     },
     {
@@ -5072,6 +5113,7 @@
       ],
       "events": [{ "type": "forwarded", "name": "click", "element": "a" }],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "a" }
     },
     {
@@ -5118,6 +5160,7 @@
       "slots": [],
       "events": [{ "type": "forwarded", "name": "click", "element": "Button" }],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "InlineComponent", "name": "Button" },
       "extends": {
         "interface": "ButtonProps",
@@ -5132,6 +5175,7 @@
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "nav" }
     },
     {
@@ -5205,6 +5249,7 @@
         { "type": "forwarded", "name": "blur", "element": "a" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "a" }
     },
     {
@@ -5272,6 +5317,7 @@
         { "type": "forwarded", "name": "blur", "element": "a" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "a" }
     },
     {
@@ -5281,7 +5327,8 @@
       "moduleExports": [],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [],
-      "typedefs": []
+      "typedefs": [],
+      "generics": null
     },
     {
       "moduleName": "HeaderPanelLink",
@@ -5315,6 +5362,7 @@
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [{ "type": "forwarded", "name": "click", "element": "a" }],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "a" }
     },
     {
@@ -5324,7 +5372,8 @@
       "moduleExports": [],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [],
-      "typedefs": []
+      "typedefs": [],
+      "generics": null
     },
     {
       "moduleName": "HeaderSearch",
@@ -5423,6 +5472,7 @@
           "ts": "interface HeaderSearchResult { href: string; text: string; description?: string; }"
         }
       ],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "input" }
     },
     {
@@ -5432,7 +5482,8 @@
       "moduleExports": [],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [],
-      "typedefs": []
+      "typedefs": [],
+      "generics": null
     },
     {
       "moduleName": "ImageLoader",
@@ -5544,6 +5595,7 @@
         { "type": "dispatched", "name": "error", "detail": "null" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "img" }
     },
     {
@@ -5607,6 +5659,7 @@
         { "type": "dispatched", "name": "success", "detail": "null" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -5751,6 +5804,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -5856,6 +5910,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "a" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "a" }
     },
     {
@@ -5977,6 +6032,7 @@
         { "type": "forwarded", "name": "click", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -6086,6 +6142,7 @@
           "ts": "type ListBoxFieldTranslationId = \"close\" | \"open\""
         }
       ],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -6121,6 +6178,7 @@
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [{ "type": "forwarded", "name": "scroll", "element": "div" }],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -6174,6 +6232,7 @@
           "ts": "type ListBoxMenuIconTranslationId = \"close\" | \"open\""
         }
       ],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -6225,6 +6284,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -6307,6 +6367,7 @@
           "ts": "type ListBoxSelectionTranslationId = \"clearAll\" | \"clearSelection\""
         }
       ],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -6322,6 +6383,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "li" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "li" }
     },
     {
@@ -6381,6 +6443,7 @@
       "slots": [],
       "events": [],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -6446,7 +6509,8 @@
           "detail": "{ prevValue: any; value: any; }"
         }
       ],
-      "typedefs": []
+      "typedefs": [],
+      "generics": null
     },
     {
       "moduleName": "Modal",
@@ -6742,6 +6806,7 @@
         { "type": "dispatched", "name": "open", "detail": "null" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -6777,6 +6842,7 @@
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -6887,6 +6953,7 @@
         }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -6982,6 +7049,7 @@
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [{ "type": "forwarded", "name": "click", "element": "button" }],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -7454,6 +7522,7 @@
           "ts": "interface MultiSelectItem { id: MultiSelectItemId; text: MultiSelectItemText; disabled?: boolean; }"
         }
       ],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "input" }
     },
     {
@@ -7469,6 +7538,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "Button" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "InlineComponent", "name": "Button" },
       "extends": {
         "interface": "ButtonProps",
@@ -7535,6 +7605,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "button" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "button" }
     },
     {
@@ -7579,7 +7650,8 @@
       "moduleExports": [],
       "slots": [],
       "events": [],
-      "typedefs": []
+      "typedefs": [],
+      "generics": null
     },
     {
       "moduleName": "NumberInput",
@@ -7887,6 +7959,7 @@
           "ts": "type NumberInputTranslationId = \"increment\" | \"decrement\""
         }
       ],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "input" }
     },
     {
@@ -7915,6 +7988,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -7967,6 +8041,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "ol" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "ol" }
     },
     {
@@ -7982,6 +8057,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "Link" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "InlineComponent", "name": "Link" },
       "extends": { "interface": "LinkProps", "import": "\"./Link.svelte\"" }
     },
@@ -8153,6 +8229,7 @@
         { "type": "forwarded", "name": "keydown", "element": "button" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "button" }
     },
     {
@@ -8282,6 +8359,7 @@
         { "type": "forwarded", "name": "keydown", "element": "a" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "li" }
     },
     {
@@ -8507,6 +8585,7 @@
         }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -8619,6 +8698,7 @@
         }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "nav" }
     },
     {
@@ -8634,6 +8714,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -8914,6 +8995,7 @@
         { "type": "forwarded", "name": "paste", "element": "input" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "input" }
     },
     {
@@ -9015,6 +9097,7 @@
         }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -9140,6 +9223,7 @@
       ],
       "events": [],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -9205,6 +9289,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "ul" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "ul" }
     },
     {
@@ -9245,6 +9330,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "ul" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "ul" }
     },
     {
@@ -9365,6 +9451,7 @@
         { "type": "forwarded", "name": "keydown", "element": "button" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "li" }
     },
     {
@@ -9502,6 +9589,7 @@
       ],
       "events": [{ "type": "forwarded", "name": "change", "element": "input" }],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -9631,6 +9719,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -9646,6 +9735,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -9771,6 +9861,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "label" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "label" }
     },
     {
@@ -9812,6 +9903,7 @@
           "ts": "interface RecursiveListNode { text?: string; href?: string; html?: string; }"
         }
       ],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "ul | ol" }
     },
     {
@@ -9913,6 +10005,7 @@
       ],
       "events": [],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -10149,6 +10242,7 @@
         { "type": "dispatched", "name": "clear", "detail": "null" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "input" }
     },
     {
@@ -10177,6 +10271,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -10408,6 +10503,7 @@
         { "type": "forwarded", "name": "blur", "element": "select" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -10488,7 +10584,8 @@
       "moduleExports": [],
       "slots": [],
       "events": [],
-      "typedefs": []
+      "typedefs": [],
+      "generics": null
     },
     {
       "moduleName": "SelectItemGroup",
@@ -10523,6 +10620,7 @@
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "optgroup" }
     },
     {
@@ -10551,6 +10649,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -10690,6 +10789,7 @@
         { "type": "forwarded", "name": "keydown", "element": "label" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "label" }
     },
     {
@@ -10764,6 +10864,7 @@
         { "type": "dispatched", "name": "click:overlay", "detail": "null" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "nav" }
     },
     {
@@ -10774,6 +10875,7 @@
       "slots": [],
       "events": [],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "li" }
     },
     {
@@ -10783,7 +10885,8 @@
       "moduleExports": [],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [],
-      "typedefs": []
+      "typedefs": [],
+      "generics": null
     },
     {
       "moduleName": "SideNavLink",
@@ -10864,6 +10967,7 @@
       ],
       "events": [{ "type": "forwarded", "name": "click", "element": "a" }],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "a" }
     },
     {
@@ -10929,6 +11033,7 @@
       ],
       "events": [{ "type": "forwarded", "name": "click", "element": "button" }],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "button" }
     },
     {
@@ -10993,6 +11098,7 @@
       ],
       "events": [{ "type": "forwarded", "name": "click", "element": "a" }],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "a" }
     },
     {
@@ -11008,6 +11114,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -11072,6 +11179,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -11114,6 +11222,7 @@
       ],
       "events": [{ "type": "forwarded", "name": "click", "element": "a" }],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "a" }
     },
     {
@@ -11367,6 +11476,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -11395,6 +11505,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -11459,6 +11570,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -11474,6 +11586,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -11514,6 +11627,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -11529,6 +11643,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -11612,6 +11727,7 @@
       "slots": [],
       "events": [],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "input" }
     },
     {
@@ -11665,6 +11781,7 @@
         { "type": "forwarded", "name": "keydown", "element": "label" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "label" }
     },
     {
@@ -11693,6 +11810,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -11777,6 +11895,7 @@
         { "type": "forwarded", "name": "keydown", "element": "button" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "button" }
     },
     {
@@ -11872,6 +11991,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "li" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "li" }
     },
     {
@@ -11895,6 +12015,7 @@
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -11976,6 +12097,7 @@
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "section" }
     },
     {
@@ -11986,6 +12108,7 @@
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "tbody" }
     },
     {
@@ -12001,6 +12124,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "td" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "td" }
     },
     {
@@ -12060,6 +12184,7 @@
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -12075,6 +12200,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "thead" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "thead" }
     },
     {
@@ -12163,6 +12289,7 @@
         { "type": "forwarded", "name": "click", "element": "button" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "th" }
     },
     {
@@ -12178,6 +12305,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "tr" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "tr" }
     },
     {
@@ -12256,6 +12384,7 @@
         { "type": "forwarded", "name": "click", "element": "a" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -12296,6 +12425,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -12430,6 +12560,7 @@
         { "type": "dispatched", "name": "close", "detail": "null" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div | span" }
     },
     {
@@ -12457,6 +12588,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "span" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "span" }
     },
     {
@@ -12677,6 +12809,7 @@
         { "type": "forwarded", "name": "paste", "element": "textarea" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "textarea" }
     },
     {
@@ -12705,6 +12838,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -12957,6 +13091,7 @@
         { "type": "forwarded", "name": "paste", "element": "input" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "input" }
     },
     {
@@ -12985,6 +13120,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -13096,7 +13232,8 @@
           "name": "CarbonTheme",
           "ts": "type CarbonTheme = \"white\" | \"g10\" | \"g80\" | \"g90\" | \"g100\""
         }
-      ]
+      ],
+      "generics": null
     },
     {
       "moduleName": "Tile",
@@ -13124,6 +13261,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -13194,6 +13332,7 @@
         { "type": "dispatched", "name": "select", "detail": "string" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "fieldset" }
     },
     {
@@ -13391,6 +13530,7 @@
         { "type": "forwarded", "name": "paste", "element": "input" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "input" }
     },
     {
@@ -13498,6 +13638,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -13671,6 +13812,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -13822,6 +13964,7 @@
         { "type": "forwarded", "name": "blur", "element": "input" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -13881,6 +14024,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -13904,6 +14048,7 @@
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "section" }
     },
     {
@@ -13946,6 +14091,7 @@
       ],
       "events": [{ "type": "dispatched", "name": "cancel", "detail": "null" }],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -13955,7 +14101,8 @@
       "moduleExports": [],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [],
-      "typedefs": []
+      "typedefs": [],
+      "generics": null
     },
     {
       "moduleName": "ToolbarMenu",
@@ -13965,6 +14112,7 @@
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "InlineComponent", "name": "OverflowMenu" },
       "extends": {
         "interface": "OverflowMenuProps",
@@ -13986,6 +14134,7 @@
         }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "InlineComponent", "name": "OverflowMenuItem" },
       "extends": {
         "interface": "OverflowMenuItemProps",
@@ -14106,6 +14255,7 @@
         { "type": "forwarded", "name": "paste", "element": "Search" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "input" }
     },
     {
@@ -14303,6 +14453,7 @@
         { "type": "forwarded", "name": "mousedown", "element": "div" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "div" }
     },
     {
@@ -14402,6 +14553,7 @@
         { "type": "forwarded", "name": "focus", "element": "button" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "span" }
     },
     {
@@ -14424,7 +14576,8 @@
       "moduleExports": [],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [],
-      "typedefs": []
+      "typedefs": [],
+      "generics": null
     },
     {
       "moduleName": "TooltipIcon",
@@ -14537,6 +14690,7 @@
         { "type": "forwarded", "name": "focus", "element": "button" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "button" }
     },
     {
@@ -14680,7 +14834,7 @@
           "kind": "function",
           "description": "Programmatically show a node by `id`.\nThe matching node will be expanded, selected, and focused",
           "type": "(id: TreeNodeId) => void",
-          "value": "() => {     for (const child of children) {       const nodes = findNodeById(child, id);        if (nodes) {         const ids = nodes.map((node) => node.id);         const nodeIds = new Set(ids);          expandNodes((node) => nodeIds.has(node.id));          const lastId = ids[ids.length - 1];          activeId = lastId;         selectedIds = [lastId];          tick().then(() => {           ref?.querySelector(`[id=\"${lastId}\"]`)?.focus();         });          // Break out of the loop if the node is found.         break;       }     }   }",
+          "value": "() => {     for (const child of children) {       const nodes = findNodeById(child, id);       if (nodes) {         const ids = nodes.map((node) => node.id);         const nodeIds = new Set(ids);         expandNodes((node) => nodeIds.has(node.id));         const lastId = ids[ids.length - 1];         activeId = lastId;         selectedIds = [lastId];         tick().then(() => {           ref?.querySelector(`[id=\"${lastId}\"]`)?.focus();         });         // Break out of the loop if the node is found.         break;       }     }   }",
           "isFunction": true,
           "isFunctionDeclaration": true,
           "isRequired": false,
@@ -14733,6 +14887,7 @@
           "ts": "interface TreeNode { id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent<any>; disabled?: boolean; children?: TreeNode[]; }"
         }
       ],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "ul" }
     },
     {
@@ -14755,6 +14910,7 @@
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "p" }
     },
     {
@@ -14795,6 +14951,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "ul" }
       ],
       "typedefs": [],
+      "generics": null,
       "rest_props": { "type": "Element", "name": "ul" }
     }
   ]
diff --git a/types/DataTable/DataTable.svelte.d.ts b/types/DataTable/DataTable.svelte.d.ts
index 9090abdc..1013ac1f 100644
--- a/types/DataTable/DataTable.svelte.d.ts
+++ b/types/DataTable/DataTable.svelte.d.ts
@@ -1,33 +1,31 @@
 import type { SvelteComponentTyped } from "svelte";
 import type { SvelteHTMLElements } from "svelte/elements";
 
-export type DataTableKey = string;
+export type DataTableKey<Row = DataTableRow> = Exclude<keyof Row, "id">;
 
 export type DataTableValue = any;
 
-export interface DataTableEmptyHeader<Row extends DataTableRow = DataTableRow> {
-  key: keyof Row;
+export interface DataTableEmptyHeader<Row = DataTableRow> {
+  key: DataTableKey<Row>;
   empty: boolean;
-  display?: (item: Value, row: DataTableRow) => DataTableValue;
+  display?: (item: Value, row: Row) => DataTableValue;
   sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
   columnMenu?: boolean;
   width?: string;
   minWidth?: string;
 }
 
-export interface DataTableNonEmptyHeader<
-  Row extends DataTableRow = DataTableRow
-> {
-  key: keyof Row;
+export interface DataTableNonEmptyHeader<Row = DataTableRow> {
+  key: DataTableKey<Row>;
   value: DataTableValue;
-  display?: (item: Value, row: DataTableRow) => DataTableValue;
+  display?: (item: Value, row: Row) => DataTableValue;
   sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
   columnMenu?: boolean;
   width?: string;
   minWidth?: string;
 }
 
-export type DataTableHeader<Row extends DataTableRow = DataTableRow> =
+export type DataTableHeader<Row = DataTableRow> =
   | DataTableNonEmptyHeader<Row>
   | DataTableEmptyHeader<Row>;
 
@@ -38,15 +36,15 @@ export interface DataTableRow {
 
 export type DataTableRowId = any;
 
-export interface DataTableCell<Row extends DataTableRow = DataTableRow> {
-  key: keyof Row;
+export interface DataTableCell<Row = DataTableRow> {
+  key: DataTableKey<Row>;
   value: DataTableValue;
   display?: (item: Value, row: DataTableRow) => DataTableValue;
 }
 
 type RestProps = SvelteHTMLElements["div"];
 
-export interface DataTableProps extends RestProps {
+export interface DataTableProps<Row> extends RestProps {
   /**
    * Specify the data table headers
    * @default []
@@ -94,7 +92,7 @@ export interface DataTableProps extends RestProps {
    * Specify the header key to sort by
    * @default null
    */
-  sortKey?: DataTableKey;
+  sortKey?: DataTableKey<Row>;
 
   /**
    * Specify the sort direction
@@ -207,21 +205,15 @@ export default class DataTable<
     ["click:row"]: CustomEvent<Row>;
     ["mouseenter:row"]: CustomEvent<Row>;
     ["mouseleave:row"]: CustomEvent<Row>;
-    ["click:row--expand"]: CustomEvent<{
-      expanded: boolean;
-      row: Row;
-    }>;
-    ["click:row--select"]: CustomEvent<{
-      selected: boolean;
-      row: Row;
-    }>;
-    ["click:cell"]: CustomEvent<DataTableCell>;
+    ["click:row--expand"]: CustomEvent<{ expanded: boolean; row: Row }>;
+    ["click:row--select"]: CustomEvent<{ selected: boolean; row: Row }>;
+    ["click:cell"]: CustomEvent<DataTableCell<Row>>;
   },
   {
     default: {};
     cell: {
-      row: DataTableRow;
-      cell: DataTableCell;
+      row: Row;
+      cell: DataTableCell<Row>;
       rowIndex: number;
       cellIndex: number;
     };