diff --git a/README.md b/README.md
index 4c391645..7181fdb7 100644
--- a/README.md
+++ b/README.md
@@ -537,26 +537,26 @@ import { ComboBox } from "carbon-components-svelte";
 
 **API**
 
-| Prop name        | Type                                                        | Default                         |
-| :--------------- | :---------------------------------------------------------- | :------------------------------ |
-| items            | <code>ComboBoxItem[]</code>                                 | []                              |
-| itemToString     | <code>(item: ComboBoxItem) => string;</code>                | (item: ComboBoxItem) => string; |
-| selectedIndex    | <code>number</code>                                         | -1                              |
-| value            | <code>string</code>                                         | ""                              |
-| size             | <code>"sm" &#124; "xl"</code>                               | -                               |
-| disabled         | <code>boolean</code>                                        | false                           |
-| titleText        | <code>string</code>                                         | ""                              |
-| placeholder      | <code>string</code>                                         | ""                              |
-| helperText       | <code>string</code>                                         | ""                              |
-| invalidText      | <code>string</code>                                         | ""                              |
-| invalid          | <code>boolean</code>                                        | false                           |
-| light            | <code>boolean</code>                                        | false                           |
-| open             | <code>boolean</code>                                        | false                           |
-| shouldFilterItem | <code>(item: ComboBoxItem, value: string) => boolean</code> | () => true                      |
-| translateWithId  | <code>(id: any) => string;</code>                           | -                               |
-| id               | <code>string</code>                                         | -                               |
-| name             | <code>string</code>                                         | -                               |
-| ref              | <code>null &#124; HTMLInputElement</code>                   | null                            |
+| Prop name        | Type                                                        | Default                        |
+| :--------------- | :---------------------------------------------------------- | :----------------------------- |
+| items            | <code>ComboBoxItem[]</code>                                 | []                             |
+| itemToString     | <code>(item: ComboBoxItem) => string</code>                 | (item: ComboBoxItem) => string |
+| selectedIndex    | <code>number</code>                                         | -1                             |
+| value            | <code>string</code>                                         | ""                             |
+| size             | <code>"sm" &#124; "xl"</code>                               | -                              |
+| disabled         | <code>boolean</code>                                        | false                          |
+| titleText        | <code>string</code>                                         | ""                             |
+| placeholder      | <code>string</code>                                         | ""                             |
+| helperText       | <code>string</code>                                         | ""                             |
+| invalidText      | <code>string</code>                                         | ""                             |
+| invalid          | <code>boolean</code>                                        | false                          |
+| light            | <code>boolean</code>                                        | false                          |
+| open             | <code>boolean</code>                                        | false                          |
+| shouldFilterItem | <code>(item: ComboBoxItem, value: string) => boolean</code> | () => true                     |
+| translateWithId  | <code>(id: any) => string</code>                            | -                              |
+| id               | <code>string</code>                                         | -                              |
+| name             | <code>string</code>                                         | -                              |
+| ref              | <code>null &#124; HTMLInputElement</code>                   | null                           |
 
 </details>
 
@@ -916,11 +916,11 @@ import { TableHeader } from "carbon-components-svelte";
 
 **API**
 
-| Prop name       | Type                       | Default   |
-| :-------------- | :------------------------- | :-------- |
-| scope           | <code>string</code>        | "col"     |
-| translateWithId | <code>() => string;</code> | () => ""; |
-| id              | <code>string</code>        | -         |
+| Prop name       | Type                      | Default  |
+| :-------------- | :------------------------ | :------- |
+| scope           | <code>string</code>       | "col"    |
+| translateWithId | <code>() => string</code> | () => "" |
+| id              | <code>string</code>       | -        |
 
 </details>
 
@@ -1093,26 +1093,26 @@ import { Dropdown } from "carbon-components-svelte";
 
 **API**
 
-| Prop name       | Type                                         | Default                                  |
-| :-------------- | :------------------------------------------- | :--------------------------------------- |
-| items           | <code>DropdownItem[]</code>                  | []                                       |
-| itemToString    | <code>(item: DropdownItem) => string;</code> | (item: DropdownItem) => DropdownItemText | DropdownItemId; |
-| selectedIndex   | <code>number</code>                          | -1                                       |
-| type            | <code>"default" &#124; "inline"</code>       | "default"                                |
-| size            | <code>"sm" &#124; "lg" &#124; "xl"</code>    | -                                        |
-| open            | <code>boolean</code>                         | false                                    |
-| inline          | <code>boolean</code>                         | false                                    |
-| light           | <code>boolean</code>                         | false                                    |
-| disabled        | <code>boolean</code>                         | false                                    |
-| titleText       | <code>string</code>                          | ""                                       |
-| invalid         | <code>boolean</code>                         | false                                    |
-| invalidText     | <code>string</code>                          | ""                                       |
-| helperText      | <code>string</code>                          | ""                                       |
-| label           | <code>string</code>                          | -                                        |
-| translateWithId | <code>(id: any) => string;</code>            | -                                        |
-| id              | <code>string</code>                          | -                                        |
-| name            | <code>string</code>                          | -                                        |
-| ref             | <code>null &#124; HTMLButtonElement</code>   | null                                     |
+| Prop name       | Type                                        | Default                                  |
+| :-------------- | :------------------------------------------ | :--------------------------------------- |
+| items           | <code>DropdownItem[]</code>                 | []                                       |
+| itemToString    | <code>(item: DropdownItem) => string</code> | (item: DropdownItem) => DropdownItemText | DropdownItemId |
+| selectedIndex   | <code>number</code>                         | -1                                       |
+| type            | <code>"default" &#124; "inline"</code>      | "default"                                |
+| size            | <code>"sm" &#124; "lg" &#124; "xl"</code>   | -                                        |
+| open            | <code>boolean</code>                        | false                                    |
+| inline          | <code>boolean</code>                        | false                                    |
+| light           | <code>boolean</code>                        | false                                    |
+| disabled        | <code>boolean</code>                        | false                                    |
+| titleText       | <code>string</code>                         | ""                                       |
+| invalid         | <code>boolean</code>                        | false                                    |
+| invalidText     | <code>string</code>                         | ""                                       |
+| helperText      | <code>string</code>                         | ""                                       |
+| label           | <code>string</code>                         | -                                        |
+| translateWithId | <code>(id: any) => string</code>            | -                                        |
+| id              | <code>string</code>                         | -                                        |
+| name            | <code>string</code>                         | -                                        |
+| ref             | <code>null &#124; HTMLButtonElement</code>  | null                                     |
 
 </details>
 
@@ -1158,7 +1158,7 @@ import { FileUploader } from "carbon-components-svelte";
 | accept           | <code>string[]</code>                                                                      | []          |
 | files            | <code>string[]</code>                                                                      | []          |
 | multiple         | <code>boolean</code>                                                                       | false       |
-| clearFiles       | <code>() => any;</code>                                                                    | () => void; |
+| clearFiles       | <code>() => any</code>                                                                     | () => void  |
 | labelDescription | <code>string</code>                                                                        | ""          |
 | labelTitle       | <code>string</code>                                                                        | ""          |
 | kind             | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger"</code> | "primary"   |
@@ -1216,18 +1216,18 @@ import { FileUploaderDropContainer } from "carbon-components-svelte";
 
 **API**
 
-| Prop name     | Type                                      | Default                  |
-| :------------ | :---------------------------------------- | :----------------------- |
-| accept        | <code>string[]</code>                     | []                       |
-| multiple      | <code>boolean</code>                      | false                    |
-| validateFiles | <code>(files: Files) => Files</code>      | (files: Files) => Files; |
-| labelText     | <code>string</code>                       | "Add file"               |
-| role          | <code>string</code>                       | "button"                 |
-| disabled      | <code>boolean</code>                      | false                    |
-| tabindex      | <code>string</code>                       | "0"                      |
-| id            | <code>string</code>                       | -                        |
-| name          | <code>string</code>                       | ""                       |
-| ref           | <code>null &#124; HTMLInputElement</code> | null                     |
+| Prop name     | Type                                      | Default                 |
+| :------------ | :---------------------------------------- | :---------------------- |
+| accept        | <code>string[]</code>                     | []                      |
+| multiple      | <code>boolean</code>                      | false                   |
+| validateFiles | <code>(files: Files) => Files</code>      | (files: Files) => Files |
+| labelText     | <code>string</code>                       | "Add file"              |
+| role          | <code>string</code>                       | "button"                |
+| disabled      | <code>boolean</code>                      | false                   |
+| tabindex      | <code>string</code>                       | "0"                     |
+| id            | <code>string</code>                       | -                       |
+| name          | <code>string</code>                       | ""                      |
+| ref           | <code>null &#124; HTMLInputElement</code> | null                    |
 
 </details>
 
@@ -1395,7 +1395,6 @@ import { Column } from "carbon-components-svelte";
 | lg            | <code>ColumnBreakpoint</code>                                                                      | -       |
 | xlg           | <code>ColumnBreakpoint</code>                                                                      | -       |
 | max           | <code>ColumnBreakpoint</code>                                                                      | -       |
-|               | <code>string[]</code>                                                                              | -       |
 
 </details>
 
@@ -1592,15 +1591,14 @@ import { ListBoxField } from "carbon-components-svelte";
 
 **API**
 
-| Prop name       | Type                                                    | Default         |
-| :-------------- | :------------------------------------------------------ | :-------------- |
-| disabled        | <code>boolean</code>                                    | false           |
-| role            | <code>string</code>                                     | "combobox"      |
-| tabindex        | <code>string</code>                                     | "-1"            |
-|                 | <code>{ close: "close"; open: "open"; }</code>          | -               |
-| translateWithId | <code>(id: ListBoxFieldTranslationId) => string;</code> | (id) => string; |
-| id              | <code>string</code>                                     | -               |
-| ref             | <code>null &#124; HTMLElement</code>                    | null            |
+| Prop name       | Type                                                    | Default        |
+| :-------------- | :------------------------------------------------------ | :------------- |
+| disabled        | <code>boolean</code>                                    | false          |
+| role            | <code>string</code>                                     | "combobox"     |
+| tabindex        | <code>string</code>                                     | "-1"           |
+| translateWithId | <code>(id: ListBoxFieldTranslationId) => string;</code> | (id) => string |
+| id              | <code>string</code>                                     | -              |
+| ref             | <code>null &#124; HTMLElement</code>                    | null           |
 
 </details>
 
@@ -1642,11 +1640,10 @@ import { ListBoxMenuIcon } from "carbon-components-svelte";
 
 **API**
 
-| Prop name       | Type                                                       | Default         |
-| :-------------- | :--------------------------------------------------------- | :-------------- |
-| open            | <code>boolean</code>                                       | false           |
-|                 | <code>{ close: "close"; open: "open" }</code>              | -               |
-| translateWithId | <code>(id: ListBoxMenuIconTranslationId) => string;</code> | (id) => string; |
+| Prop name       | Type                                                      | Default        |
+| :-------------- | :-------------------------------------------------------- | :------------- |
+| open            | <code>boolean</code>                                      | false          |
+| translateWithId | <code>(id: ListBoxMenuIconTranslationId) => string</code> | (id) => string |
 
 </details>
 
@@ -1689,13 +1686,12 @@ import { ListBoxSelection } from "carbon-components-svelte";
 
 **API**
 
-| Prop name       | Type                                                                    | Default         |
-| :-------------- | :---------------------------------------------------------------------- | :-------------- |
-| selectionCount  | <code>\*</code>                                                         | -               |
-| disabled        | <code>boolean</code>                                                    | false           |
-|                 | <code>{ clearAll: "clearAll"; clearSelection: "clearSelection" }</code> | -               |
-| translateWithId | <code>(id: ListBoxSelectionTranslationId) => string;</code>             | (id) => string; |
-| ref             | <code>null &#124; HTMLElement</code>                                    | null            |
+| Prop name       | Type                                                       | Default        |
+| :-------------- | :--------------------------------------------------------- | :------------- |
+| selectionCount  | <code>\*</code>                                            | -              |
+| disabled        | <code>boolean</code>                                       | false          |
+| translateWithId | <code>(id: ListBoxSelectionTranslationId) => string</code> | (id) => string |
+| ref             | <code>null &#124; HTMLElement</code>                       | null           |
 
 </details>
 
@@ -1802,7 +1798,7 @@ import { MultiSelect } from "carbon-components-svelte";
 | Prop name         | Type                                                                      | Default                                                     |
 | :---------------- | :------------------------------------------------------------------------ | :---------------------------------------------------------- |
 | items             | <code>MultiSelectItem[]</code>                                            | []                                                          |
-| itemToString      | <code>(item: MultiSelectItem) => string;</code>                           | (item: MultiSelectItem) => MultiSelectItemText              | MultiSelectItemId; |
+| itemToString      | <code>(item: MultiSelectItem) => string</code>                            | (item: MultiSelectItem) => MultiSelectItemText              | MultiSelectItemId |
 | selectedIds       | <code>MultiSelectItemId[]</code>                                          | []                                                          |
 | value             | <code>string</code>                                                       | ""                                                          |
 | size              | <code>"sm" &#124; "lg" &#124; "xl"</code>                                 | -                                                           |
@@ -1816,7 +1812,7 @@ import { MultiSelect } from "carbon-components-svelte";
 | locale            | <code>string</code>                                                       | "en"                                                        |
 | placeholder       | <code>string</code>                                                       | ""                                                          |
 | sortItem          | <code>(a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem;</code> | (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem |
-| translateWithId   | <code>(id: any) => string;</code>                                         | -                                                           |
+| translateWithId   | <code>(id: any) => string</code>                                          | -                                                           |
 | titleText         | <code>string</code>                                                       | ""                                                          |
 | useTitleInItem    | <code>boolean</code>                                                      | false                                                       |
 | invalid           | <code>boolean</code>                                                      | false                                                       |
@@ -2019,29 +2015,28 @@ import { NumberInput } from "carbon-components-svelte";
 
 **API**
 
-| Prop name       | Type                                                            | Default                                   |
-| :-------------- | :-------------------------------------------------------------- | :---------------------------------------- |
-| size            | <code>"sm" &#124; "xl"</code>                                   | -                                         |
-| value           | <code>string</code>                                             | ""                                        |
-| step            | <code>number</code>                                             | 1                                         |
-| max             | <code>number</code>                                             | -                                         |
-| min             | <code>number</code>                                             | -                                         |
-| light           | <code>boolean</code>                                            | false                                     |
-| readonly        | <code>boolean</code>                                            | false                                     |
-| mobile          | <code>boolean</code>                                            | false                                     |
-| allowEmpty      | <code>boolean</code>                                            | false                                     |
-| disabled        | <code>boolean</code>                                            | false                                     |
-| iconDescription | <code>string</code>                                             | ""                                        |
-| invalid         | <code>boolean</code>                                            | false                                     |
-| invalidText     | <code>string</code>                                             | "Provide invalidText"                     |
-| helperText      | <code>string</code>                                             | ""                                        |
-| label           | <code>string</code>                                             | ""                                        |
-| hideLabel       | <code>boolean</code>                                            | false                                     |
-| translateWithId | <code>(id: NumberInputTranslationId) => string;</code>          | (id: NumberInputTranslationId) => string; |
-|                 | <code>{ increment: "increment"; decrement: "decrement" }</code> | -                                         |
-| id              | <code>string</code>                                             | -                                         |
-| name            | <code>string</code>                                             | -                                         |
-| ref             | <code>null &#124; HTMLInputElement</code>                       | null                                      |
+| Prop name       | Type                                                  | Default                                  |
+| :-------------- | :---------------------------------------------------- | :--------------------------------------- |
+| size            | <code>"sm" &#124; "xl"</code>                         | -                                        |
+| value           | <code>string</code>                                   | ""                                       |
+| step            | <code>number</code>                                   | 1                                        |
+| max             | <code>number</code>                                   | -                                        |
+| min             | <code>number</code>                                   | -                                        |
+| light           | <code>boolean</code>                                  | false                                    |
+| readonly        | <code>boolean</code>                                  | false                                    |
+| mobile          | <code>boolean</code>                                  | false                                    |
+| allowEmpty      | <code>boolean</code>                                  | false                                    |
+| disabled        | <code>boolean</code>                                  | false                                    |
+| iconDescription | <code>string</code>                                   | ""                                       |
+| invalid         | <code>boolean</code>                                  | false                                    |
+| invalidText     | <code>string</code>                                   | "Provide invalidText"                    |
+| helperText      | <code>string</code>                                   | ""                                       |
+| label           | <code>string</code>                                   | ""                                       |
+| hideLabel       | <code>boolean</code>                                  | false                                    |
+| translateWithId | <code>(id: NumberInputTranslationId) => string</code> | (id: NumberInputTranslationId) => string |
+| id              | <code>string</code>                                   | -                                        |
+| name            | <code>string</code>                                   | -                                        |
+| ref             | <code>null &#124; HTMLInputElement</code>             | null                                     |
 
 </details>
 
@@ -2163,23 +2158,23 @@ import { Pagination } from "carbon-components-svelte";
 
 **API**
 
-| Prop name         | Type                                                              | Default                                              |
-| :---------------- | :---------------------------------------------------------------- | :--------------------------------------------------- |
-| page              | <code>number</code>                                               | 1                                                    |
-| total             | <code>number</code>                                               | 0                                                    |
-| disabled          | <code>boolean</code>                                              | false                                                |
-| forwardText       | <code>string</code>                                               | "Next page"                                          |
-| backwardText      | <code>string</code>                                               | "Previous page"                                      |
-| itemsPerPageText  | <code>string</code>                                               | "Items per page:"                                    |
-| itemText          | <code>(min: number, max: number) => string;</code>                | (min: number, max: number) => string;                |
-| itemRangeText     | <code>(min: number, max: number, total: number) => string;</code> | (min: number, max: number, total: number) => string; |
-| pageInputDisabled | <code>boolean</code>                                              | false                                                |
-| pageSize          | <code>number</code>                                               | 10                                                   |
-| pageSizes         | <code>number[]</code>                                             | [10]                                                 |
-| pagesUnknown      | <code>boolean</code>                                              | false                                                |
-| pageText          | <code>(page: number) => string;</code>                            | (current: number) => string;                         |
-| pageRangeText     | <code>(current: number, total: number) => string;</code>          | (current: number, total: number) => string;          |
-| id                | <code>string</code>                                               | -                                                    |
+| Prop name         | Type                                                             | Default                                             |
+| :---------------- | :--------------------------------------------------------------- | :-------------------------------------------------- |
+| page              | <code>number</code>                                              | 1                                                   |
+| total             | <code>number</code>                                              | 0                                                   |
+| disabled          | <code>boolean</code>                                             | false                                               |
+| forwardText       | <code>string</code>                                              | "Next page"                                         |
+| backwardText      | <code>string</code>                                              | "Previous page"                                     |
+| itemsPerPageText  | <code>string</code>                                              | "Items per page:"                                   |
+| itemText          | <code>(min: number, max: number) => string</code>                | (min: number, max: number) => string                |
+| itemRangeText     | <code>(min: number, max: number, total: number) => string</code> | (min: number, max: number, total: number) => string |
+| pageInputDisabled | <code>boolean</code>                                             | false                                               |
+| pageSize          | <code>number</code>                                              | 10                                                  |
+| pageSizes         | <code>number[]</code>                                            | [10]                                                |
+| pagesUnknown      | <code>boolean</code>                                             | false                                               |
+| pageText          | <code>(page: number) => string</code>                            | (current: number) => string                         |
+| pageRangeText     | <code>(current: number, total: number) => string</code>          | (current: number, total: number) => string          |
+| id                | <code>string</code>                                              | -                                                   |
 
 </details>
 
@@ -2230,7 +2225,6 @@ import { PaginationNav } from "carbon-components-svelte";
 | loop         | <code>boolean</code> | false       |
 | forwardText  | <code>string</code>  | "Next page" |
 | backwardText | <code>string</code>  | "Next page" |
-|              | <code>4</code>       | -           |
 
 </details>
 
@@ -2595,13 +2589,12 @@ import { SkeletonText } from "carbon-components-svelte";
 
 **API**
 
-| Prop name | Type                  | Default |
-| :-------- | :-------------------- | :------ |
-| lines     | <code>number</code>   | 3       |
-| heading   | <code>boolean</code>  | false   |
-| paragraph | <code>boolean</code>  | false   |
-| width     | <code>string</code>   | "100%"  |
-|           | <code>number[]</code> | -       |
+| Prop name | Type                 | Default |
+| :-------- | :------------------- | :------ |
+| lines     | <code>number</code>  | 3       |
+| heading   | <code>boolean</code> | false   |
+| paragraph | <code>boolean</code> | false   |
+| width     | <code>string</code>  | "100%"  |
 
 </details>
 
diff --git a/package.json b/package.json
index 329116f9..e2c8e3a7 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "svelte": "./src/index.js",
   "main": "./lib/index.js",
   "module": "./lib/index.mjs",
+  "types": "./types/index.d.ts",
   "scripts": {
     "start": "start-storybook -p 9090",
     "build": "build-storybook",
diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte
index 3ebc33fc..70170f40 100644
--- a/src/ComboBox/ComboBox.svelte
+++ b/src/ComboBox/ComboBox.svelte
@@ -11,7 +11,7 @@
 
   /**
    * Override the display of a combobox item
-   * @type {(item: ComboBoxItem) => string;} [itemToString = (item: ComboBoxItem) => string;]
+   * @type {(item: ComboBoxItem) => string} [itemToString = (item: ComboBoxItem) => string]
    */
   export let itemToString = (item) => item.text || item.id;
 
@@ -89,7 +89,7 @@
 
   /**
    * Override the default translation ids
-   * @type {(id: any) => string;} [translateWithId]
+   * @type {(id: any) => string} [translateWithId]
    */
   export let translateWithId = undefined;
 
diff --git a/src/DataTable/TableHeader.svelte b/src/DataTable/TableHeader.svelte
index dc5d216c..0c52e1e9 100644
--- a/src/DataTable/TableHeader.svelte
+++ b/src/DataTable/TableHeader.svelte
@@ -7,7 +7,7 @@
 
   /**
    * Override the default id translations
-   * @type {() => string;} [translateWithId = () => "";]
+   * @type {() => string} [translateWithId = () => ""]
    */
   export let translateWithId = () => "";
 
diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte
index 4082a39f..9cc881ba 100644
--- a/src/Dropdown/Dropdown.svelte
+++ b/src/Dropdown/Dropdown.svelte
@@ -13,7 +13,7 @@
 
   /**
    * Override the display of a dropdown item
-   * @type {(item: DropdownItem) => string;} [itemToString = (item: DropdownItem) => DropdownItemText | DropdownItemId;]
+   * @type {(item: DropdownItem) => string} [itemToString = (item: DropdownItem) => DropdownItemText | DropdownItemId]
    */
   export let itemToString = (item) => item.text || item.id;
 
@@ -91,7 +91,7 @@
 
   /**
    * Override the default translation ids
-   * @type {(id: any) => string;} [translateWithId]
+   * @type {(id: any) => string} [translateWithId]
    */
   export let translateWithId = undefined;
 
diff --git a/src/FileUploader/FileUploader.svelte b/src/FileUploader/FileUploader.svelte
index c1223a34..f9e67a2a 100644
--- a/src/FileUploader/FileUploader.svelte
+++ b/src/FileUploader/FileUploader.svelte
@@ -25,7 +25,7 @@
 
   /**
    * Override the default behavior of clearing the array of uploaded files
-   * @type {() => any;} [clearFiles = () => void;]
+   * @type {() => any} [clearFiles = () => void]
    */
   export const clearFiles = () => {
     files = [];
diff --git a/src/FileUploader/FileUploaderDropContainer.svelte b/src/FileUploader/FileUploaderDropContainer.svelte
index 9a21738b..e5ad31dc 100644
--- a/src/FileUploader/FileUploaderDropContainer.svelte
+++ b/src/FileUploader/FileUploaderDropContainer.svelte
@@ -18,7 +18,7 @@
   /**
    * Override the default behavior of validating uploaded files
    * The default behavior does not validate files
-   * @type {(files: Files) => Files} [validateFiles = (files: Files) => Files;]
+   * @type {(files: Files) => Files} [validateFiles = (files: Files) => Files]
    */
   export let validateFiles = (files) => files;
 
diff --git a/src/Grid/Column.svelte b/src/Grid/Column.svelte
index 1c476c16..d1fffb87 100644
--- a/src/Grid/Column.svelte
+++ b/src/Grid/Column.svelte
@@ -32,7 +32,7 @@
 
   /**
    * @typedef {boolean | number} ColumnSize
-   * @typedef {{span?: ColumnSize: offset: number;}} ColumnSizeDescriptor
+   * @typedef {{span?: ColumnSize; offset: number;}} ColumnSizeDescriptor
    * @typedef {ColumnSize | ColumnSizeDescriptor} ColumnBreakpoint
    */
 
diff --git a/src/ListBox/ListBoxField.svelte b/src/ListBox/ListBoxField.svelte
index 81d71033..d97397ce 100644
--- a/src/ListBox/ListBoxField.svelte
+++ b/src/ListBox/ListBoxField.svelte
@@ -30,7 +30,7 @@
 
   /**
    * Override the default translation ids
-   * @type {(id: ListBoxFieldTranslationId) => string;} [translateWithId = (id) => string;]
+   * @type {(id: ListBoxFieldTranslationId) => string} [translateWithId = (id) => string]
    */
   export let translateWithId = (id) => defaultTranslations[id];
 
diff --git a/src/ListBox/ListBoxMenuIcon.svelte b/src/ListBox/ListBoxMenuIcon.svelte
index 5ccd3fc4..82d9437b 100644
--- a/src/ListBox/ListBoxMenuIcon.svelte
+++ b/src/ListBox/ListBoxMenuIcon.svelte
@@ -18,7 +18,7 @@
 
   /**
    * Override the default translation ids
-   * @type {(id: ListBoxMenuIconTranslationId) => string;} [translateWithId = (id) => string;]
+   * @type {(id: ListBoxMenuIconTranslationId) => string} [translateWithId = (id) => string]
    */
   export let translateWithId = (id) => defaultTranslations[id];
 
diff --git a/src/ListBox/ListBoxSelection.svelte b/src/ListBox/ListBoxSelection.svelte
index 05961442..9afe68dc 100644
--- a/src/ListBox/ListBoxSelection.svelte
+++ b/src/ListBox/ListBoxSelection.svelte
@@ -1,7 +1,7 @@
 <script>
   /**
    * Specify the number of selected items
-   * @type {*} [selectionCount]
+   * @type {any} [selectionCount]
    */
   export let selectionCount = undefined;
 
@@ -27,7 +27,7 @@
 
   /**
    * Override the default translation ids
-   * @type {(id: ListBoxSelectionTranslationId) => string;} [translateWithId = (id) => string;]
+   * @type {(id: ListBoxSelectionTranslationId) => string} [translateWithId = (id) => string]
    */
   export let translateWithId = (id) => defaultTranslations[id];
 
diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte
index 1e3a0993..7d0e7e25 100644
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@@ -13,7 +13,7 @@
 
   /**
    * Override the display of a multiselect item
-   * @type {(item: MultiSelectItem) => string;} [itemToString = (item: MultiSelectItem) =>  MultiSelectItemText | MultiSelectItemId;]
+   * @type {(item: MultiSelectItem) => string} [itemToString = (item: MultiSelectItem) =>  MultiSelectItemText | MultiSelectItemId]
    */
   export let itemToString = (item) => item.text || item.id;
 
@@ -62,7 +62,7 @@
   /**
    * Override the filtering logic
    * The default filtering is an exact string comparison
-   * @type {(item: MultiSelectItem, value: string) => string;} [filterItem = ((item: MultiSelectItem, value: string) => string;)]
+   * @type {(item: MultiSelectItem, value: string) => string} [filterItem = (item: MultiSelectItem, value: string) => string]
    */
   export let filterItem = (item, value) =>
     item.text.toLowerCase().includes(value.toLowerCase());
@@ -94,14 +94,14 @@
   /**
    * Override the sorting logic
    * The default sorting compare the item text value
-   * @type {(a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem;} [sortItem = (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem]
+   * @type {(a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem} [sortItem = (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem]
    */
   export let sortItem = (a, b) =>
     a.text.localeCompare(b.text, locale, { numeric: true });
 
   /**
    * Override the default translation ids
-   * @type {(id: any) => string;} [translateWithId]
+   * @type {(id: any) => string} [translateWithId]
    */
   export let translateWithId = undefined;
 
diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte
index 7fb7cb42..414837e6 100644
--- a/src/NumberInput/NumberInput.svelte
+++ b/src/NumberInput/NumberInput.svelte
@@ -1,6 +1,4 @@
 <script>
-  
-
   /**
    * Set the size of the input
    * @type {"sm" | "xl"} [size]
@@ -100,10 +98,10 @@
   /**
    * @typedef {"increment" | "decrement"} NumberInputTranslationId
    */
-  
+
   /**
    * Override the default translation ids
-   * @type {(id: NumberInputTranslationId) => string;} [translateWithId = (id: NumberInputTranslationId) => string;]
+   * @type {(id: NumberInputTranslationId) => string} [translateWithId = (id: NumberInputTranslationId) => string]
    */
   export let translateWithId = (id) => defaultTranslations[id];
 
diff --git a/src/Pagination/Pagination.svelte b/src/Pagination/Pagination.svelte
index 7de4cca2..2c5222dc 100644
--- a/src/Pagination/Pagination.svelte
+++ b/src/Pagination/Pagination.svelte
@@ -37,13 +37,13 @@
 
   /**
    * Override the item text
-   * @type {(min: number, max: number) => string;} [itemText = (min: number, max: number) => string;]
+   * @type {(min: number, max: number) => string} [itemText = (min: number, max: number) => string]
    */
   export let itemText = (min, max) => `${min}–${max} items`;
 
   /**
    * Override the item range text
-   * @type {(min: number, max: number, total: number) => string;} [itemRangeText = (min: number, max: number, total: number) => string;]
+   * @type {(min: number, max: number, total: number) => string} [itemRangeText = (min: number, max: number, total: number) => string]
    */
   export let itemRangeText = (min, max, total) =>
     `${min}–${max} of ${total} items`;
@@ -74,13 +74,13 @@
 
   /**
    * Override the page text
-   * @type {(page: number) => string;} [pageText = (current: number) => string;]
+   * @type {(page: number) => string} [pageText = (current: number) => string]
    */
   export let pageText = (page) => `page ${page}`;
 
   /**
    * Override the page range text
-   * @type {(current: number, total: number) => string;} [pageRangeText = (current: number, total: number) => string;]
+   * @type {(current: number, total: number) => string} [pageRangeText = (current: number, total: number) => string]
    */
   export let pageRangeText = (current, total) => `of ${total} pages`;
 
diff --git a/types/index.d.ts b/types/index.d.ts
new file mode 100644
index 00000000..6a16fcf0
--- /dev/null
+++ b/types/index.d.ts
@@ -0,0 +1,1474 @@
+// Type definitions for carbon-components-svelte 0.8
+// https://github.com/IBM/carbon-components-svelte
+
+// Carbon Icon type from carbon-icons-svelte 10.14
+// https://github.com/IBM/carbon-icons-svelte
+declare class CarbonIcon {
+  $$prop_def: {
+    id?: string;
+    class?: string;
+    tabindex?: string;
+    focusable?: boolean;
+    title?: string;
+    style?: string;
+    fill?: string;
+    stroke?: string;
+    width?: string;
+    height?: string;
+  };
+  $$slot_def: {
+    default?: {};
+  };
+}
+
+export class AccordionSkeleton {
+  $$prop_def: {
+    count?: number; // default: 4
+    open?: boolean; // default: true
+  };
+}
+
+export class Accordion {
+  $$prop_def: {
+    align?: "start" | "end"; // default: "end"
+    skeleton?: boolean; // default: false
+  };
+}
+
+export class AccordionItem {
+  $$prop_def: {
+    title?: string; // default: "title"
+    open?: boolean; // default: false
+    iconDescription?: string; // default: "Expand/Collapse"
+  };
+}
+
+export class BreadcrumbSkeleton {
+  $$prop_def: {
+    noTrailingSlash?: boolean; // default: false
+    count?: number; // default: 3
+  };
+}
+
+export class Breadcrumb {
+  $$prop_def: {
+    noTrailingSlash?: boolean; // default: false
+    skeleton?: boolean; // default: false
+  };
+}
+
+export class BreadcrumbItem {
+  $$prop_def: {
+    href?: string;
+    isCurrentPage?: boolean; // default: false
+  };
+}
+
+export class ButtonSkeleton {
+  $$prop_def: {
+    href?: string;
+    small?: boolean; // default: false
+  };
+}
+
+export class Button {
+  $$prop_def: {
+    kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger"; // default: "primary"
+    size?: "default" | "field" | "small"; // default: "default"
+    hasIconOnly?: boolean; // default: false
+    icon?: CarbonIcon;
+    iconDescription?: string;
+    tooltipAlignment?: "start" | "center" | "end";
+    tooltipPosition?: "top" | "right" | "bottom" | "left";
+    as?: boolean; // default: false
+    skeleton?: boolean; // default: false
+    disabled?: boolean; // default: false
+    href?: string;
+    tabindex?: string; // default: "0"
+    type?: string; // default: "button"
+    ref?: null | HTMLAnchorElement | HTMLButtonElement; // default: null
+  };
+}
+
+export class CheckboxSkeleton {
+  $$prop_def: {};
+}
+
+export class Checkbox {
+  $$prop_def: {
+    checked?: boolean; // default: false
+    indeterminate?: boolean; // default: false
+    skeleton?: boolean; // default: false
+    readonly?: boolean; // default: false
+    disabled?: boolean; // default: false
+    labelText?: string; // default: ""
+    hideLabel?: boolean; // default: false
+    name?: string; // default: ""
+    title?: string;
+    id?: string;
+    ref?: null | HTMLInputElement; // default: null
+  };
+}
+
+export class CodeSnippetSkeleton {
+  $$prop_def: {
+    type?: "single" | "inline" | "multi"; // default: "single"
+  };
+}
+
+export class CodeSnippet {
+  $$prop_def: {
+    type?: "single" | "inline" | "multi"; // default: "single"
+    code?: string;
+    expanded?: boolean; // default: false
+    light?: boolean; // default: false
+    skeleton?: boolean; // default: false
+    copyButtonDescription?: string;
+    copyLabel?: string;
+    feedback?: string; // default: "Copied!"
+    feedbackTimeout?: number; // default: 2000
+    showLessText?: string; // default: "Show more"
+    showMoreLess?: boolean; // default: false
+    id?: string;
+    ref?: null | HTMLPreElement; // default: null
+  };
+}
+
+interface ComboBoxItem {
+  id: string;
+  text: string;
+}
+
+export class ComboBox {
+  $$prop_def: {
+    items?: ComboBoxItem[]; // default: []
+    itemToString?: (item: ComboBoxItem) => string; // default: (item: ComboBoxItem) => string
+    selectedIndex?: number; // default: -1
+    value?: string; // default: ""
+    size?: "sm" | "xl";
+    disabled?: boolean; // default: false
+    titleText?: string; // default: ""
+    placeholder?: string; // default: ""
+    helperText?: string; // default: ""
+    invalidText?: string; // default: ""
+    invalid?: boolean; // default: false
+    light?: boolean; // default: false
+    open?: boolean; // default: false
+    shouldFilterItem?: (item: ComboBoxItem, value: string) => boolean; // default: () => true
+    translateWithId?: (id: any) => string;
+    id?: string;
+    name?: string;
+    ref?: null | HTMLInputElement; // default: null
+  };
+}
+
+export class ComposedModal {
+  $$prop_def: {
+    size?: "xs" | "sm" | "lg";
+    open?: boolean; // default: false
+    danger?: boolean; // default: false
+    containerClass?: string; // default: ""
+    selectorPrimaryFocus?: string; // default: "[data-modal-primary-focus]"
+    ref?: null | HTMLElement; // default: null
+  };
+}
+
+export class ModalBody {
+  $$prop_def: {
+    hasForm?: boolean; // default: false
+    hasScrollingContent?: boolean; // default: false
+  };
+}
+
+export class ModalFooter {
+  $$prop_def: {
+    primaryButtonText?: string; // default: ""
+    primaryButtonDisabled?: boolean; // default: false
+    primaryClass?: string;
+    secondaryButtonText?: string; // default: ""
+    secondaryClass?: string;
+    danger?: boolean; // default: false
+  };
+}
+
+export class ModalHeader {
+  $$prop_def: {
+    title?: string; // default: ""
+    label?: string; // default: ""
+    labelClass?: string; // default: ""
+    titleClass?: string; // default: ""
+    closeClass?: string; // default: ""
+    closeIconClass?: string; // default: ""
+    iconDescription?: string; // default: "Close"
+  };
+}
+
+export class ContentSwitcher {
+  $$prop_def: {
+    selectedIndex?: number; // default: 0
+    light?: boolean; // default: false
+  };
+}
+
+export class Switch {
+  $$prop_def: {
+    text?: string; // default: "Provide text"
+    selected?: boolean; // default: false
+    disabled?: boolean; // default: false
+    id?: string;
+    ref?: null | HTMLButtonElement; // default: null
+  };
+}
+
+export class Copy {
+  $$prop_def: {
+    feedback?: string; // default: "Copied!"
+    feedbackTimeout?: number; // default: 2000
+    ref?: null | HTMLButtonElement; // default: null
+  };
+}
+
+export class CopyButton {
+  $$prop_def: {
+    iconDescription?: string; // default: "Copy to clipboard"
+  };
+}
+
+export class DataTable {
+  $$prop_def: {
+    headers?: { key: string; value: string }; // default: []
+    rows?: Object[]; // default: []
+    size?: "compact" | "short" | "tall";
+    title?: string; // default: ""
+    description?: string; // default: ""
+    zebra?: boolean; // default: false
+    sortable?: boolean; // default: false
+    stickyHeader?: boolean; // default: false
+  };
+}
+
+export class Table {
+  $$prop_def: {
+    size?: "compact" | "short" | "tall";
+    zebra?: boolean; // default: false
+    useStaticWidth?: boolean; // default: false
+    shouldShowBorder?: boolean; // default: false
+    sortable?: boolean; // default: false
+    stickyHeader?: boolean; // default: false
+  };
+}
+
+export class TableBody {
+  $$prop_def: {};
+}
+
+export class TableCell {
+  $$prop_def: {};
+}
+
+export class TableContainer {
+  $$prop_def: {
+    title?: string; // default: ""
+    description?: string; // default: ""
+    stickyHeader?: boolean; // default: false
+  };
+}
+
+export class TableHead {
+  $$prop_def: {};
+}
+
+export class TableHeader {
+  $$prop_def: {
+    scope?: string; // default: "col"
+    translateWithId?: () => string; // default: () => ""
+    id?: string;
+  };
+}
+
+export class TableRow {
+  $$prop_def: {
+    isSelected?: boolean; // default: false
+  };
+}
+
+export class DataTableSkeleton {
+  $$prop_def: {
+    columns?: number; // default: 5
+    rows?: number; // default: 5
+    compact?: boolean; // default: false
+    zebra?: boolean; // default: false
+    headers?: string[]; // default: []
+  };
+}
+
+export class DatePickerSkeleton {
+  $$prop_def: {
+    range?: boolean; // default: false
+    id?: string;
+  };
+}
+
+export class DatePicker {
+  $$prop_def: {
+    datePickerType?: "simple" | "single" | "range"; // default: "simple"
+    value?: string; // default: ""
+    appendTo?: HTMLElement; // default: document.body
+    dateFormat?: string; // default: "m/d/Y"
+    maxDate?: null | string | Date; // default: null
+    minDate?: null | string | Date; // default: null
+    locale?: string; // default: "en"
+    short?: boolean; // default: false
+    light?: boolean; // default: false
+    id?: string;
+  };
+}
+
+export class DatePickerInput {
+  $$prop_def: {
+    size?: "sm" | "xl";
+    type?: string; // default: "text"
+    placeholder?: string; // default: ""
+    iconDescription?: string; // default: ""
+    id?: string;
+    invalid?: boolean; // default: false
+    invalidText?: string; // default: ""
+    ref?: null | HTMLInputElement; // default: null
+  };
+}
+
+export class DropdownSkeleton {
+  $$prop_def: {
+    inline?: boolean; // default: false
+  };
+}
+
+type DropdownItemId = string;
+
+type DropdownItemText = string;
+
+interface DropdownItem {
+  id: DropdownItemId;
+  text: DropdownItemText;
+}
+
+export class Dropdown {
+  $$prop_def: {
+    items?: DropdownItem[]; // default: []
+    itemToString?: (item: DropdownItem) => string; // default: (item: DropdownItem) => DropdownItemText | DropdownItemId
+    selectedIndex?: number; // default: -1
+    type?: "default" | "inline"; // default: "default"
+    size?: "sm" | "lg" | "xl";
+    open?: boolean; // default: false
+    inline?: boolean; // default: false
+    light?: boolean; // default: false
+    disabled?: boolean; // default: false
+    titleText?: string; // default: ""
+    invalid?: boolean; // default: false
+    invalidText?: string; // default: ""
+    helperText?: string; // default: ""
+    label?: string;
+    translateWithId?: (id: any) => string;
+    id?: string;
+    name?: string;
+    ref?: null | HTMLButtonElement; // default: null
+  };
+}
+
+export class FileUploaderSkeleton {
+  $$prop_def: {};
+}
+
+export class FileUploader {
+  $$prop_def: {
+    status?: "uploading" | "edit" | "complete"; // default: "uploading"
+    accept?: string[]; // default: []
+    files?: string[]; // default: []
+    multiple?: boolean; // default: false
+    clearFiles?: () => any; // default: () => void
+    labelDescription?: string; // default: ""
+    labelTitle?: string; // default: ""
+    kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger"; // default: "primary"
+    buttonLabel?: string; // default: ""
+    iconDescription?: string; // default: ""
+    name?: string;
+  };
+}
+
+export class FileUploaderButton {
+  $$prop_def: {
+    accept?: string[]; // default: []
+    multiple?: boolean; // default: false
+    disabled?: boolean; // default: false
+    disableLabelChanges?: boolean; // default: false
+    kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger"; // default: "primary"
+    labelText?: string; // default: "Add file"
+    role?: string; // default: "button"
+    tabindex?: string; // default: "0"
+    id?: string;
+    name?: string;
+    ref?: null | HTMLInputElement; // default: null
+  };
+}
+
+type Files = string[];
+
+export class FileUploaderDropContainer {
+  $$prop_def: {
+    accept?: string[]; // default: []
+    multiple?: boolean; // default: false
+    validateFiles?: (files: Files) => Files; // default: (files: Files) => Files
+    labelText?: string; // default: "Add file"
+    role?: string; // default: "button"
+    disabled?: boolean; // default: false
+    tabindex?: string; // default: "0"
+    id?: string;
+    name?: string; // default: ""
+    ref?: null | HTMLInputElement; // default: null
+  };
+}
+
+export class FileUploaderItem {
+  $$prop_def: {
+    status?: "uploading" | "edit" | "complete"; // default: "uploading"
+    iconDescription?: string; // default: ""
+    invalid?: boolean; // default: false
+    errorSubject?: string; // default: ""
+    errorBody?: string; // default: ""
+    id?: string;
+    name?: string; // default: ""
+  };
+}
+
+export class Filename {
+  $$prop_def: {
+    status?: "uploading" | "edit" | "complete"; // default: "uploading"
+    iconDescription?: string; // default: ""
+    invalid?: boolean; // default: false
+  };
+}
+
+export class Form {
+  $$prop_def: {};
+}
+
+export class FormGroup {
+  $$prop_def: {
+    invalid?: boolean; // default: false
+  };
+}
+
+export class FormItem {
+  $$prop_def: {};
+}
+
+export class FormLabel {
+  $$prop_def: {
+    id?: string;
+  };
+}
+
+type ColumnSize = boolean | number;
+
+interface ColumnSizeDescriptor {
+  span?: ColumnSize;
+  offset: number;
+}
+
+type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
+
+export class Column {
+  $$prop_def: {
+    as?: boolean; // default: false
+    noGutter?: boolean; // default: false
+    noGutterLeft?: boolean; // default: false
+    noGutterRight?: boolean; // default: false
+    aspectRatio?: "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1";
+    sm?: ColumnBreakpoint;
+    md?: ColumnBreakpoint;
+    lg?: ColumnBreakpoint;
+    xlg?: ColumnBreakpoint;
+    max?: ColumnBreakpoint;
+  };
+}
+
+export class Grid {
+  $$prop_def: {
+    as?: boolean; // default: false
+    condensed?: boolean; // default: false
+    narrow?: boolean; // default: false
+    fullWidth?: boolean; // default: false
+    noGutter?: boolean; // default: false
+    noGutterLeft?: boolean; // default: false
+    noGutterRight?: boolean; // default: false
+  };
+}
+
+export class Row {
+  $$prop_def: {
+    as?: boolean; // default: false
+    condensed?: boolean; // default: false
+    narrow?: boolean; // default: false
+    noGutter?: boolean; // default: false
+    noGutterLeft?: boolean; // default: false
+    noGutterRight?: boolean; // default: false
+  };
+}
+
+export class IconSkeleton {
+  $$prop_def: {
+    size?: number; // default: 16
+  };
+}
+
+export class Icon {
+  $$prop_def: {
+    render?: CarbonIcon;
+    skeleton?: boolean; // default: false
+  };
+}
+
+export class InlineLoading {
+  $$prop_def: {
+    status?: "active" | "inactive" | "finished" | "error"; // default: "active"
+    description?: string;
+    iconDescription?: string; // default: "Expand/Collapse"
+    successDelay?: number; // default: 1500
+  };
+}
+
+export class Link {
+  $$prop_def: {
+    inline?: boolean; // default: false
+    disabled?: boolean; // default: false
+    ref?: null | HTMLAnchorElement | HTMLParagraphElement; // default: null
+  };
+}
+
+export class ListBox {
+  $$prop_def: {
+    size?: "sm" | "xl";
+    type?: "default" | "inline"; // default: "default"
+    open?: boolean; // default: false
+    light?: boolean; // default: false
+    disable?: boolean; // default: false
+    invalid?: boolean; // default: false
+    invalidText?: string; // default: ""
+  };
+}
+
+type ListBoxFieldTranslationId = "close" | "open";
+
+export class ListBoxField {
+  $$prop_def: {
+    disabled?: boolean; // default: false
+    role?: string; // default: "combobox"
+    tabindex?: string; // default: "-1"
+    translateWithId?: (id: ListBoxFieldTranslationId) => string; // default: (id) => string
+    id?: string;
+    ref?: null | HTMLElement; // default: null
+  };
+}
+
+export class ListBoxMenu {
+  $$prop_def: {
+    id?: string;
+  };
+}
+
+type ListBoxMenuIconTranslationId = "close" | "open";
+
+export class ListBoxMenuIcon {
+  $$prop_def: {
+    open?: boolean; // default: false
+    translateWithId?: (id: ListBoxMenuIconTranslationId) => string; // default: (id) => string
+  };
+}
+
+export class ListBoxMenuItem {
+  $$prop_def: {
+    active?: boolean; // default: false
+    highlighted?: boolean; // default: false
+  };
+}
+
+type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
+
+export class ListBoxSelection {
+  $$prop_def: {
+    selectionCount?: any;
+    disabled?: boolean; // default: false
+    translateWithId?: (id: ListBoxSelectionTranslationId) => string; // default: (id) => string
+    ref?: null | HTMLElement; // default: null
+  };
+}
+
+export class ListItem {
+  $$prop_def: {};
+}
+
+export class Loading {
+  $$prop_def: {
+    small?: boolean; // default: false
+    active?: boolean; // default: true
+    withOverlay?: boolean; // default: false
+    description?: string; // default: "Active loading indicator"
+    id?: string;
+  };
+}
+
+export class Modal {
+  $$prop_def: {
+    size?: "xs" | "sm" | "lg";
+    open?: boolean; // default: false
+    danger?: boolean; // default: false
+    passiveModal?: boolean; // default: false
+    modalHeading?: string;
+    modalLabel?: string;
+    modalAriaLabel?: string;
+    iconDescription?: string; // default: "Close the modal"
+    hasForm?: boolean; // default: false
+    hasScrollingContent?: boolean; // default: false
+    primaryButtonText?: string; // default: ""
+    primaryButtonDisabled?: boolean; // default: false
+    shouldSubmitOnEnter?: boolean; // default: true
+    secondaryButtonText?: string; // default: ""
+    selectorPrimaryFocus?: string; // default: "[data-modal-primary-focus]"
+    id?: string;
+    ref?: null | HTMLElement; // default: null
+  };
+}
+
+type MultiSelectItemId = string;
+
+type MultiSelectItemText = string;
+
+interface MultiSelectItem {
+  id: MultiSelectItemId;
+  text: MultiSelectItemText;
+}
+
+export class MultiSelect {
+  $$prop_def: {
+    items?: MultiSelectItem[]; // default: []
+    itemToString?: (item: MultiSelectItem) => string; // default: (item: MultiSelectItem) =>  MultiSelectItemText | MultiSelectItemId
+    selectedIds?: MultiSelectItemId[]; // default: []
+    value?: string; // default: ""
+    size?: "sm" | "lg" | "xl";
+    type?: "default" | "inline"; // default: "default"
+    selectionFeedback?: "top" | "fixed" | "top-after-reopen"; // default: "top-after-reopen"
+    disabled?: boolean; // default: false
+    filterable?: boolean; // default: false
+    filterItem?: (item: MultiSelectItem, value: string) => string; // default: (item: MultiSelectItem, value: string) => string
+    open?: boolean; // default: false
+    light?: boolean; // default: false
+    locale?: string; // default: "en"
+    placeholder?: string; // default: ""
+    sortItem?: (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem; // default: (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem
+    translateWithId?: (id: any) => string;
+    titleText?: string; // default: ""
+    useTitleInItem?: boolean; // default: false
+    invalid?: boolean; // default: false
+    invalidText?: string; // default: ""
+    helperText?: string; // default: ""
+    label?: string;
+    id?: string;
+    name?: string;
+  };
+}
+
+export class InlineNotification {
+  $$prop_def: {
+    notificationType?: "toast" | "inline"; // default: "toast"
+    kind?:
+      | "error"
+      | "info"
+      | "info-square"
+      | "success"
+      | "warning"
+      | "warning-alt"; // default: "error"
+    lowContrast?: boolean; // default: false
+    role?: string; // default: "alert"
+    title?: string; // default: "Title"
+    subtitle?: string; // default: ""
+    hideCloseButton?: boolean; // default: false
+    iconDescription?: string; // default: "Closes notification"
+  };
+}
+
+export class NotificationActionButton {
+  $$prop_def: {};
+}
+
+export class NotificationButton {
+  $$prop_def: {
+    notificationType?: "toast" | "inline"; // default: "toast"
+    renderIcon?: CarbonIcon;
+    iconDescription?: string; // default: "Close icon"
+  };
+}
+
+export class NotificationIcon {
+  $$prop_def: {
+    kind?:
+      | "error"
+      | "info"
+      | "info-square"
+      | "success"
+      | "warning"
+      | "warning-alt"; // default: "error"
+    notificationType?: "toast" | "inline"; // default: "toast"
+    iconDescription?: string; // default: "Closes notification"
+  };
+}
+
+export class NotificationTextDetails {
+  $$prop_def: {
+    notificationType?: "toast" | "inline"; // default: "toast"
+    title?: string; // default: "Title"
+    subtitle?: string; // default: ""
+    caption?: string; // default: "Caption"
+  };
+}
+
+export class ToastNotification {
+  $$prop_def: {
+    notificationType?: "toast" | "inline"; // default: "toast"
+    kind?:
+      | "error"
+      | "info"
+      | "info-square"
+      | "success"
+      | "warning"
+      | "warning-alt"; // default: "error"
+    lowContrast?: boolean; // default: false
+    timeout?: number; // default: 0
+    role?: string; // default: "alert"
+    title?: string; // default: "Title"
+    subtitle?: string; // default: ""
+    caption?: string; // default: "Caption"
+    iconDescription?: string; // default: "Closes notification"
+    hideCloseButton?: boolean; // default: false
+  };
+}
+
+export class NumberInputSkeleton {
+  $$prop_def: {
+    hideLabel?: boolean; // default: false
+  };
+}
+
+type NumberInputTranslationId = "increment" | "decrement";
+
+export class NumberInput {
+  $$prop_def: {
+    size?: "sm" | "xl";
+    value?: string; // default: ""
+    step?: number; // default: 1
+    max?: number;
+    min?: number;
+    light?: boolean; // default: false
+    readonly?: boolean; // default: false
+    mobile?: boolean; // default: false
+    allowEmpty?: boolean; // default: false
+    disabled?: boolean; // default: false
+    iconDescription?: string; // default: ""
+    invalid?: boolean; // default: false
+    invalidText?: string; // default: "Provide invalidText"
+    helperText?: string; // default: ""
+    label?: string; // default: ""
+    hideLabel?: boolean; // default: false
+    translateWithId?: (id: NumberInputTranslationId) => string; // default: (id: NumberInputTranslationId) => string
+    id?: string;
+    name?: string;
+    ref?: null | HTMLInputElement; // default: null
+  };
+}
+
+export class OrderedList {
+  $$prop_def: {
+    nested?: boolean; // default: false
+  };
+}
+
+export class OverflowMenu {
+  $$prop_def: {
+    direction?: "top" | "bottom"; // default: "bottom"
+    open?: boolean; // default: false
+    light?: boolean; // default: false
+    flipped?: boolean; // default: false
+    menuOptionsClass?: string;
+    icon?: CarbonIcon;
+    iconClass?: string;
+    iconDescription?: string; // default: "Open and close list of options"
+    id?: string;
+  };
+}
+
+export class OverflowMenuItem {
+  $$prop_def: {
+    text?: string; // default: "Provide text"
+    href?: string; // default: ""
+    primaryFocus?: boolean; // default: false
+    disabled?: boolean; // default: false
+    hasDivider?: boolean; // default: false
+    danger?: boolean; // default: false
+    requireTitle?: boolean; // default: false
+    id?: string;
+    ref?: null | HTMLAnchorElement | HTMLButtonElement; // default: null
+  };
+}
+
+export class PaginationSkeleton {
+  $$prop_def: {};
+}
+
+export class Pagination {
+  $$prop_def: {
+    page?: number; // default: 1
+    total?: number; // default: 0
+    disabled?: boolean; // default: false
+    forwardText?: string; // default: "Next page"
+    backwardText?: string; // default: "Previous page"
+    itemsPerPageText?: string; // default: "Items per page:"
+    itemText?: (min: number, max: number) => string; // default: (min: number, max: number) => string
+    itemRangeText?: (min: number, max: number, total: number) => string; // default: (min: number, max: number, total: number) => string
+    pageInputDisabled?: boolean; // default: false
+    pageSize?: number; // default: 10
+    pageSizes?: number[]; // default: [10]
+    pagesUnknown?: boolean; // default: false
+    pageText?: (page: number) => string; // default: (current: number) => string
+    pageRangeText?: (current: number, total: number) => string; // default: (current: number, total: number) => string
+    id?: string;
+  };
+}
+
+export class PaginationItem {
+  $$prop_def: {
+    page?: number; // default: 0
+    active?: boolean; // default: false
+  };
+}
+
+export class PaginationNav {
+  $$prop_def: {
+    page?: number; // default: 0
+    total?: number; // default: 10
+    shown?: number; // default: 10
+    loop?: boolean; // default: false
+    forwardText?: string; // default: "Next page"
+    backwardText?: string; // default: "Next page"
+  };
+}
+
+export class PaginationOverflow {
+  $$prop_def: {
+    fromIndex?: number; // default: 0
+    count?: number; // default: 0
+  };
+}
+
+export class ProgressIndicatorSkeleton {
+  $$prop_def: {};
+}
+
+export class ProgressIndicator {
+  $$prop_def: {
+    currentIndex?: number; // default: 0
+  };
+}
+
+export class ProgressStep {
+  $$prop_def: {
+    complete?: boolean; // default: false
+    current?: boolean; // default: false
+    disabled?: boolean; // default: false
+    invalid?: boolean; // default: false
+    descripton?: string; // default: ""
+    label?: string; // default: ""
+    secondaryLabel?: string; // default: ""
+    id?: string;
+  };
+}
+
+export class RadioButtonSkeleton {
+  $$prop_def: {};
+}
+
+export class RadioButton {
+  $$prop_def: {
+    value?: string; // default: ""
+    checked?: boolean; // default: false
+    disabled?: boolean; // default: false
+    labelPosition?: "right" | "left"; // default: "right"
+    labelText?: string; // default: ""
+    hideLabel?: boolean; // default: false
+    id?: string;
+    name?: string; // default: ""
+    ref?: null | HTMLInputElement; // default: null
+  };
+}
+
+export class RadioButtonGroup {
+  $$prop_def: {
+    selected?: string;
+    disabled?: boolean; // default: false
+    labelPosition?: "right" | "left"; // default: "right"
+    orientation?: "horizontal" | "vertical"; // default: "horizontal"
+  };
+}
+
+export class SearchSkeleton {
+  $$prop_def: {
+    small?: boolean; // default: false
+  };
+}
+
+export class Search {
+  $$prop_def: {
+    small?: boolean; // default: false
+    size?: "sm" | "lg";
+    skeleton?: boolean; // default: false
+    light?: boolean; // default: false
+    value?: string; // default: "text"
+    type?: string; // default: "text"
+    placeholder?: string; // default: "Search..."
+    autocomplete?: "on" | "off"; // default: "off"
+    autofocus?: boolean; // default: false
+    closeButtonLabelText?: string; // default: "Clear search input"
+    labelText?: string; // default: ""
+    id?: string;
+    ref?: null | HTMLInputElement; // default: null
+  };
+}
+
+export class SelectSkeleton {
+  $$prop_def: {
+    hideLabel?: boolean; // default: false
+  };
+}
+
+export class Select {
+  $$prop_def: {
+    selected?: string;
+    size?: "sm" | "xl";
+    inline?: boolean; // default: false
+    light?: boolean; // default: false
+    disabled?: boolean; // default: false
+    id?: string;
+    name?: string;
+    invalid?: boolean; // default: false
+    invalidText?: string; // default: ""
+    helperText?: string; // default: ""
+    noLabel?: boolean; // default: false
+    labelText?: string; // default: ""
+    hideLabel?: boolean; // default: false
+    ref?: null | HTMLSelectElement; // default: null
+  };
+}
+
+export class SelectItem {
+  $$prop_def: {};
+}
+
+export class SelectItemGroup {
+  $$prop_def: {
+    disabled?: boolean; // default: false
+    label?: string; // default: "Provide label"
+  };
+}
+
+export class SkeletonPlaceholder {
+  $$prop_def: {};
+}
+
+export class SkeletonText {
+  $$prop_def: {
+    lines?: number; // default: 3
+    heading?: boolean; // default: false
+    paragraph?: boolean; // default: false
+    width?: string; // default: "100%"
+  };
+}
+
+export class SliderSkeleton {
+  $$prop_def: {
+    hideLabel?: boolean; // default: false
+  };
+}
+
+export class Slider {
+  $$prop_def: {
+    id?: string;
+    invalid?: boolean; // default: false
+    labelText?: string; // default: ""
+    light?: boolean; // default: false
+    name?: string; // default: ""
+    ref?: null | HTMLElement; // default: null
+  };
+}
+
+export class StructuredListSkeleton {
+  $$prop_def: {
+    rows?: number; // default: 5
+    border?: boolean; // default: false
+  };
+}
+
+export class StructuredList {
+  $$prop_def: {
+    selected?: string;
+    border?: boolean; // default: false
+    selection?: boolean; // default: false
+  };
+}
+
+export class StructuredListBody {
+  $$prop_def: {};
+}
+
+export class StructuredListCell {
+  $$prop_def: {
+    head?: boolean; // default: false
+    noWrap?: boolean; // default: false
+  };
+}
+
+export class StructuredListHead {
+  $$prop_def: {};
+}
+
+export class StructuredListInput {
+  $$prop_def: {
+    checked?: boolean; // default: false
+    title?: string; // default: "title"
+    value?: string; // default: "value"
+    id?: string;
+    name?: string; // default: ""
+    ref?: null | HTMLInputElement; // default: null
+  };
+}
+
+export class StructuredListRow {
+  $$prop_def: {
+    head?: boolean; // default: false
+    label?: boolean; // default: false
+    tabindex?: string; // default: "0"
+  };
+}
+
+export class Tab {
+  $$prop_def: {
+    id?: string;
+  };
+}
+
+export class TabContent {
+  $$prop_def: {
+    id?: string;
+  };
+}
+
+export class Tabs {
+  $$prop_def: {};
+}
+
+export class TabsSkeleton {
+  $$prop_def: {};
+}
+
+export class TagSkeleton {
+  $$prop_def: {};
+}
+
+export class Tag {
+  $$prop_def: {
+    type?:
+      | "red"
+      | "magenta"
+      | "purple"
+      | "blue"
+      | "cyan"
+      | "teal"
+      | "green"
+      | "gray"
+      | "cool-gray"
+      | "warm-gray"
+      | "high-contrast";
+    filter?: boolean; // default: false
+    disabled?: boolean; // default: false
+    skeleton?: boolean; // default: false
+    title?: string; // default: "Clear filter"
+    id?: string;
+  };
+}
+
+export class TextAreaSkeleton {
+  $$prop_def: {
+    hideLabel?: boolean; // default: false
+  };
+}
+
+export class TextArea {
+  $$prop_def: {
+    value?: string; // default: ""
+    placeholder?: string; // default: ""
+    cols?: number; // default: 50
+    rows?: number; // default: 4
+    light?: boolean; // default: false
+    disabled?: boolean; // default: false
+    helperText?: string; // default: ""
+    labelText?: string; // default: ""
+    hideLabel?: boolean; // default: false
+    invalid?: boolean; // default: false
+    invalidText?: string; // default: ""
+    id?: string;
+    name?: string;
+    ref?: null | HTMLTextAreaElement; // default: null
+  };
+}
+
+export class PasswordInput {
+  $$prop_def: {
+    size?: "sm" | "xl";
+    value?: string; // default: ""
+    type?: string; // default: "password"
+    placeholder?: string; // default: ""
+    hidePasswordLabel?: string; // default: "Hide password"
+    showPasswordLabel?: string; // default: "Show password"
+    tooltipAlignment?: "start" | "center" | "end"; // default: "center"
+    tooltipPosition?: "top" | "right" | "bottom" | "left"; // default: "bottom"
+    light?: boolean; // default: false
+    disabled?: boolean; // default: false
+    helperText?: string; // default: ""
+    labelText?: string; // default: ""
+    hideLabel?: boolean; // default: false
+    invalid?: boolean; // default: false
+    invalidText?: string; // default: ""
+    id?: string;
+    name?: string;
+    ref?: null | HTMLInputElement; // default: null
+  };
+}
+
+export class TextInputSkeleton {
+  $$prop_def: {
+    hideLabel?: boolean; // default: false
+  };
+}
+
+export class TextInput {
+  $$prop_def: {
+    size?: "sm" | "xl";
+    value?: string; // default: ""
+    type?: string; // default: ""
+    placeholder?: string; // default: ""
+    light?: boolean; // default: false
+    disabled?: boolean; // default: false
+    helperText?: string; // default: ""
+    id?: string;
+    name?: string;
+    labelText?: string; // default: ""
+    hideLabel?: boolean; // default: false
+    invalid?: boolean; // default: false
+    invalidText?: string; // default: ""
+    ref?: null | HTMLInputElement; // default: null
+  };
+}
+
+export class ClickableTile {
+  $$prop_def: {
+    clicked?: boolean; // default: false
+    light?: boolean; // default: false
+  };
+}
+
+export class ExpandableTile {
+  $$prop_def: {
+    expanded?: boolean; // default: false
+    light?: boolean; // default: false
+    tileMaxHeight?: number; // default: 0
+    tilePadding?: number; // default: 0
+    tileCollapsedIconText?: string; // default: "Interact to expand Tile"
+    tileExpandedIconText?: string; // default: "Interact to collapse Tile"
+    tabindex?: string; // default: "0"
+    id?: string;
+    ref?: null | HTMLElement; // default: null
+  };
+}
+
+export class RadioTile {
+  $$prop_def: {
+    checked?: boolean; // default: false
+    light?: boolean; // default: false
+    value?: string; // default: ""
+    tabindex?: string; // default: "0"
+    iconDescription?: string; // default: "Tile checkmark"
+    id?: string;
+    name?: string; // default: ""
+  };
+}
+
+export class SelectableTile {
+  $$prop_def: {
+    selected?: boolean; // default: false
+    light?: boolean; // default: false
+    title?: string; // default: "title"
+    value?: string; // default: "value"
+    tabindex?: string; // default: "0"
+    iconDescription?: string; // default: "Tile checkmark"
+    id?: string;
+    name?: string; // default: ""
+    ref?: null | HTMLInputElement; // default: null
+  };
+}
+
+export class Tile {
+  $$prop_def: {
+    light?: boolean; // default: false
+  };
+}
+
+export class TileGroup {
+  $$prop_def: {
+    selected?: string;
+    disabled?: boolean; // default: false
+    legend?: string;
+  };
+}
+
+export class TimePicker {
+  $$prop_def: {
+    value?: string; // default: ""
+    type?: string; // default: "text"
+    placeholder?: string; // default: "hh=mm"
+    pattern?: string; // default: "(1[012]|[1-9]):[0-5][0-9](\\s)?"
+    maxLength?: number; // default: 5
+    light?: boolean; // default: false
+    disabled?: boolean; // default: false
+    labelText?: string; // default: ""
+    hideLabel?: boolean; // default: false
+    invalid?: boolean; // default: false
+    invalidText?: string; // default: "Invalid time format."
+    id?: string;
+    name?: string;
+    ref?: null | HTMLInputElement; // default: null
+  };
+}
+
+export class TimePickerSelect {
+  $$prop_def: {
+    value?: string; // default: ""
+    disabled?: boolean; // default: false
+    iconDescription?: string; // default: "Expand/Collapse"
+    labelText?: string; // default: ""
+    hideLabel?: boolean; // default: false
+    id?: string;
+    name?: string;
+    ref?: null | HTMLSelectElement; // default: null
+  };
+}
+
+export class ToggleSkeleton {
+  $$prop_def: {
+    labelText?: string; // default: ""
+    id?: string;
+  };
+}
+
+export class Toggle {
+  $$prop_def: {
+    toggled?: boolean; // default: false
+    disabled?: boolean; // default: false
+    labelA?: string; // default: "Off"
+    labelB?: string; // default: "On"
+    labelText?: string; // default: ""
+    id?: string;
+    name?: string;
+  };
+}
+
+export class ToggleSmallSkeleton {
+  $$prop_def: {
+    labelText?: string; // default: ""
+    id?: string;
+  };
+}
+
+export class ToggleSmall {
+  $$prop_def: {
+    toggled?: boolean; // default: false
+    disabled?: boolean; // default: false
+    labelA?: string; // default: "Off"
+    labelB?: string; // default: "On"
+    labelText?: string; // default: ""
+    id?: string;
+    name?: string;
+  };
+}
+
+export class Tooltip {
+  $$prop_def: {
+    direction?: "top" | "right" | "bottom" | "left"; // default: "bottom"
+    open?: boolean; // default: false
+    hideIcon?: boolean; // default: false
+    icon?: CarbonIcon; // default: Information16
+    iconDescription?: string; // default: ""
+    iconName?: string; // default: ""
+    tabindex?: string; // default: "0"
+    tooltipId?: string;
+    triggerId?: string;
+    triggerText?: string; // default: ""
+    ref?: null | HTMLElement; // default: null
+  };
+}
+
+export class TooltipDefinition {
+  $$prop_def: {
+    tooltipText?: string; // default: ""
+    align?: "start" | "center" | "end"; // default: "center"
+    direction?: "top" | "bottom"; // default: "bottom"
+    id?: string;
+    ref?: null | HTMLButtonElement; // default: null
+  };
+}
+
+export class TooltipIcon {
+  $$prop_def: {
+    tooltipText?: string; // default: ""
+    align?: "start" | "center" | "end"; // default: "center"
+    direction?: "top" | "right" | "bottom" | "left"; // default: "bottom"
+    id?: string;
+    ref?: null | HTMLButtonElement; // default: null
+  };
+}
+
+export class Content {
+  $$prop_def: {
+    id?: string; // default: "main-content"
+  };
+}
+
+export class SkipToContent {
+  $$prop_def: {
+    href?: string; // default: "#main-content"
+    tabindex?: string; // default: "0"
+  };
+}
+
+export class UnorderedList {
+  $$prop_def: {
+    nested?: boolean; // default: false
+  };
+}
+
+export class Header {
+  $$prop_def: {
+    isSideNavOpen?: boolean; // default: false
+    uiShellAriaLabel?: string;
+    href?: string;
+    company?: string;
+    platformName?: string;
+  };
+}
+
+export class HeaderAction {
+  $$prop_def: {
+    isOpen?: boolean; // default: false
+    icon?: { render: CarbonIcon; skeleton: boolean };
+    text?: string;
+  };
+}
+
+export class HeaderActionLink {
+  $$prop_def: {
+    linkIsActive?: boolean; // default: false
+    href?: string;
+    icon?: { render: CarbonIcon; skeleton: boolean };
+  };
+}
+
+export class HeaderActionSearch {
+  $$prop_def: {
+    searchIsActive?: boolean; // default: false
+  };
+}
+
+export class HeaderNav {
+  $$prop_def: {
+    ariaLabel?: string;
+  };
+}
+
+export class HeaderNavItem {
+  $$prop_def: {
+    href?: string;
+    text?: string;
+  };
+}
+
+export class HeaderNavMenu {
+  $$prop_def: {
+    expanded?: boolean; // default: false
+    href?: string; // default: "/"
+    text?: string;
+    iconDescription?: string; // default: "Expand/Collapse"
+  };
+}
+
+export class HeaderPanelDivider {
+  $$prop_def: {};
+}
+
+export class HeaderPanelLink {
+  $$prop_def: {
+    href?: string;
+  };
+}
+
+export class HeaderPanelLinks {
+  $$prop_def: {};
+}
+
+export class HeaderUtilities {
+  $$prop_def: {};
+}
+
+export class HamburgerMenu {
+  $$prop_def: {
+    ariaLabel?: string;
+    isOpen?: boolean; // default: false
+  };
+}
+
+export class SideNav {
+  $$prop_def: {
+    ariaLabel?: string;
+    isOpen?: boolean; // default: false
+  };
+}
+
+export class SideNavItems {
+  $$prop_def: {};
+}
+
+export class SideNavLink {
+  $$prop_def: {
+    isSelected?: boolean; // default: false
+    href?: string;
+    text?: string;
+    icon?: { render: CarbonIcon; skeleton: boolean };
+  };
+}
+
+export class SideNavMenu {
+  $$prop_def: {
+    expanded?: boolean;
+    text?: string;
+    icon?: { render: CarbonIcon; skeleton: boolean };
+  };
+}
+
+export class SideNavMenuItem {
+  $$prop_def: {};
+}