datocms-react-ui 0.3.8 → 0.3.12

package/types.json

@@ -2581,7 +2581,7 @@
 					"sources": [
 						{
 							"fileName": "src/SwitchInput/index.tsx",
-							"line": 13,
+							"line": 15,
 							"character": 2
 						}
 					],
@@ -2950,7 +2950,7 @@
 					"sources": [
 						{
 							"fileName": "src/SwitchInput/index.tsx",
-							"line": 12,
+							"line": 14,
 							"character": 2
 						}
 					],
@@ -3522,11 +3522,13 @@
 					"name": "onChange",
 					"kind": 1024,
 					"kindString": "Property",
-					"flags": {},
+					"flags": {
+						"isOptional": true
+					},
 					"sources": [
 						{
 							"fileName": "src/SwitchInput/index.tsx",
-							"line": 14,
+							"line": 16,
 							"character": 2
 						}
 					],
@@ -5128,7 +5130,7 @@
 					"sources": [
 						{
 							"fileName": "src/SwitchInput/index.tsx",
-							"line": 15,
+							"line": 17,
 							"character": 2
 						}
 					],
@@ -8383,7 +8385,7 @@
 					"sources": [
 						{
 							"fileName": "src/SwitchInput/index.tsx",
-							"line": 16,
+							"line": 18,
 							"character": 2
 						}
 					],
@@ -8686,7 +8688,7 @@
 			"sources": [
 				{
 					"fileName": "src/SwitchInput/index.tsx",
-					"line": 10,
+					"line": 12,
 					"character": 17
 				}
 			],
@@ -8713,6 +8715,208 @@
 				}
 			]
 		},
+		{
+			"id": 412,
+			"name": "AsyncCreatableSelectInputProps",
+			"kind": 4194304,
+			"kindString": "Type alias",
+			"flags": {},
+			"sources": [
+				{
+					"fileName": "src/SelectInput/index.tsx",
+					"line": 205,
+					"character": 12
+				}
+			],
+			"typeParameter": [
+				{
+					"id": 413,
+					"name": "Option",
+					"kind": 131072,
+					"kindString": "Type parameter",
+					"flags": {}
+				},
+				{
+					"id": 414,
+					"name": "IsMulti",
+					"kind": 131072,
+					"kindString": "Type parameter",
+					"flags": {},
+					"type": {
+						"type": "intrinsic",
+						"name": "boolean"
+					}
+				},
+				{
+					"id": 415,
+					"name": "Group",
+					"kind": 131072,
+					"kindString": "Type parameter",
+					"flags": {},
+					"type": {
+						"type": "reference",
+						"typeArguments": [
+							{
+								"type": "reference",
+								"id": 413,
+								"name": "Option"
+							}
+						],
+						"name": "GroupBase"
+					}
+				}
+			],
+			"type": {
+				"type": "intersection",
+				"types": [
+					{
+						"type": "reference",
+						"typeArguments": [
+							{
+								"type": "reference",
+								"typeArguments": [
+									{
+										"type": "reference",
+										"id": 413,
+										"name": "Option"
+									},
+									{
+										"type": "reference",
+										"id": 414,
+										"name": "IsMulti"
+									},
+									{
+										"type": "reference",
+										"id": 415,
+										"name": "Group"
+									}
+								],
+								"name": "AsyncCreatableProps"
+							},
+							{
+								"type": "union",
+								"types": [
+									{
+										"type": "literal",
+										"value": "theme"
+									},
+									{
+										"type": "literal",
+										"value": "styles"
+									}
+								]
+							}
+						],
+						"name": "Omit"
+					},
+					{
+						"type": "reference",
+						"name": "ErrorProp"
+					}
+				]
+			}
+		},
+		{
+			"id": 404,
+			"name": "AsyncSelectInputProps",
+			"kind": 4194304,
+			"kindString": "Type alias",
+			"flags": {},
+			"sources": [
+				{
+					"fileName": "src/SelectInput/index.tsx",
+					"line": 148,
+					"character": 12
+				}
+			],
+			"typeParameter": [
+				{
+					"id": 405,
+					"name": "Option",
+					"kind": 131072,
+					"kindString": "Type parameter",
+					"flags": {}
+				},
+				{
+					"id": 406,
+					"name": "IsMulti",
+					"kind": 131072,
+					"kindString": "Type parameter",
+					"flags": {},
+					"type": {
+						"type": "intrinsic",
+						"name": "boolean"
+					}
+				},
+				{
+					"id": 407,
+					"name": "Group",
+					"kind": 131072,
+					"kindString": "Type parameter",
+					"flags": {},
+					"type": {
+						"type": "reference",
+						"typeArguments": [
+							{
+								"type": "reference",
+								"id": 405,
+								"name": "Option"
+							}
+						],
+						"name": "GroupBase"
+					}
+				}
+			],
+			"type": {
+				"type": "intersection",
+				"types": [
+					{
+						"type": "reference",
+						"typeArguments": [
+							{
+								"type": "reference",
+								"typeArguments": [
+									{
+										"type": "reference",
+										"id": 405,
+										"name": "Option"
+									},
+									{
+										"type": "reference",
+										"id": 406,
+										"name": "IsMulti"
+									},
+									{
+										"type": "reference",
+										"id": 407,
+										"name": "Group"
+									}
+								],
+								"name": "AsyncProps"
+							},
+							{
+								"type": "union",
+								"types": [
+									{
+										"type": "literal",
+										"value": "theme"
+									},
+									{
+										"type": "literal",
+										"value": "styles"
+									}
+								]
+							}
+						],
+						"name": "Omit"
+					},
+					{
+						"type": "reference",
+						"name": "ErrorProp"
+					}
+				]
+			}
+		},
 		{
 			"id": 20,
 			"name": "ButtonLinkProps",
@@ -8722,7 +8926,7 @@
 			"sources": [
 				{
 					"fileName": "src/Button/index.tsx",
-					"line": 56,
+					"line": 121,
 					"character": 12
 				}
 			],
@@ -8746,7 +8950,7 @@
 							"sources": [
 								{
 									"fileName": "src/Button/index.tsx",
-									"line": 63,
+									"line": 128,
 									"character": 2
 								}
 							],
@@ -8791,7 +8995,7 @@
 							"sources": [
 								{
 									"fileName": "src/Button/index.tsx",
-									"line": 62,
+									"line": 127,
 									"character": 2
 								}
 							],
@@ -8824,7 +9028,7 @@
 							"sources": [
 								{
 									"fileName": "src/Button/index.tsx",
-									"line": 57,
+									"line": 122,
 									"character": 2
 								}
 							],
@@ -8844,7 +9048,7 @@
 							"sources": [
 								{
 									"fileName": "src/Button/index.tsx",
-									"line": 60,
+									"line": 125,
 									"character": 2
 								}
 							],
@@ -8864,7 +9068,7 @@
 							"sources": [
 								{
 									"fileName": "src/Button/index.tsx",
-									"line": 64,
+									"line": 129,
 									"character": 2
 								}
 							],
@@ -8882,7 +9086,7 @@
 							"sources": [
 								{
 									"fileName": "src/Button/index.tsx",
-									"line": 58,
+									"line": 123,
 									"character": 2
 								}
 							],
@@ -8902,7 +9106,7 @@
 							"sources": [
 								{
 									"fileName": "src/Button/index.tsx",
-									"line": 66,
+									"line": 131,
 									"character": 2
 								}
 							],
@@ -8922,7 +9126,7 @@
 							"sources": [
 								{
 									"fileName": "src/Button/index.tsx",
-									"line": 61,
+									"line": 126,
 									"character": 2
 								}
 							],
@@ -8942,7 +9146,7 @@
 							"sources": [
 								{
 									"fileName": "src/Button/index.tsx",
-									"line": 67,
+									"line": 132,
 									"character": 2
 								}
 							],
@@ -8962,7 +9166,7 @@
 							"sources": [
 								{
 									"fileName": "src/Button/index.tsx",
-									"line": 65,
+									"line": 130,
 									"character": 2
 								}
 							],
@@ -8982,7 +9186,7 @@
 							"sources": [
 								{
 									"fileName": "src/Button/index.tsx",
-									"line": 59,
+									"line": 124,
 									"character": 2
 								}
 							],
@@ -9027,7 +9231,7 @@
 					"sources": [
 						{
 							"fileName": "src/Button/index.tsx",
-							"line": 56,
+							"line": 121,
 							"character": 30
 						}
 					]
@@ -9299,7 +9503,9 @@
 							"name": "type",
 							"kind": 1024,
 							"kindString": "Property",
-							"flags": {},
+							"flags": {
+								"isOptional": true
+							},
 							"sources": [
 								{
 									"fileName": "src/Button/index.tsx",
@@ -9456,101 +9662,303 @@
 			}
 		},
 		{
-			"id": 79,
-			"name": "SwitchInputChangeEventHandler",
+			"id": 408,
+			"name": "CreatableSelectInputProps",
 			"kind": 4194304,
 			"kindString": "Type alias",
 			"flags": {},
 			"sources": [
 				{
-					"fileName": "src/SwitchInput/index.tsx",
-					"line": 5,
+					"fileName": "src/SelectInput/index.tsx",
+					"line": 176,
 					"character": 12
 				}
 			],
-			"type": {
-				"type": "reflection",
-				"declaration": {
-					"id": 80,
-					"name": "__type",
-					"kind": 65536,
-					"kindString": "Type literal",
+			"typeParameter": [
+				{
+					"id": 409,
+					"name": "Option",
+					"kind": 131072,
+					"kindString": "Type parameter",
+					"flags": {}
+				},
+				{
+					"id": 410,
+					"name": "IsMulti",
+					"kind": 131072,
+					"kindString": "Type parameter",
 					"flags": {},
-					"sources": [
-						{
-							"fileName": "src/SwitchInput/index.tsx",
-							"line": 5,
-							"character": 44
-						}
-					],
-					"signatures": [
-						{
-							"id": 81,
-							"name": "__type",
-							"kind": 4096,
-							"kindString": "Call signature",
-							"flags": {},
-							"parameters": [
-								{
-									"id": 82,
-									"name": "newValue",
-									"kind": 32768,
-									"kindString": "Parameter",
-									"flags": {},
-									"type": {
-										"type": "intrinsic",
-										"name": "boolean"
-									}
-								},
-								{
-									"id": 83,
-									"name": "event",
-									"kind": 32768,
-									"kindString": "Parameter",
-									"flags": {},
-									"type": {
-										"type": "union",
-										"types": [
-											{
-												"type": "reference",
-												"typeArguments": [
-													{
-														"type": "reference",
-														"name": "HTMLButtonElement"
-													}
-												],
-												"name": "React.MouseEvent"
-											},
-											{
-												"type": "reference",
-												"typeArguments": [
-													{
-														"type": "reference",
-														"name": "HTMLButtonElement"
-													}
-												],
-												"name": "React.KeyboardEvent"
-											}
-										]
-									}
-								}
-							],
-							"type": {
-								"type": "intrinsic",
-								"name": "void"
+					"type": {
+						"type": "intrinsic",
+						"name": "boolean"
+					}
+				},
+				{
+					"id": 411,
+					"name": "Group",
+					"kind": 131072,
+					"kindString": "Type parameter",
+					"flags": {},
+					"type": {
+						"type": "reference",
+						"typeArguments": [
+							{
+								"type": "reference",
+								"id": 409,
+								"name": "Option"
 							}
-						}
-					]
+						],
+						"name": "GroupBase"
+					}
 				}
-			}
-		},
-		{
-			"id": 347,
-			"name": "TextInputChangeEventHandler",
-			"kind": 4194304,
-			"kindString": "Type alias",
-			"flags": {},
-			"sources": [
+			],
+			"type": {
+				"type": "intersection",
+				"types": [
+					{
+						"type": "reference",
+						"typeArguments": [
+							{
+								"type": "reference",
+								"typeArguments": [
+									{
+										"type": "reference",
+										"id": 409,
+										"name": "Option"
+									},
+									{
+										"type": "reference",
+										"id": 410,
+										"name": "IsMulti"
+									},
+									{
+										"type": "reference",
+										"id": 411,
+										"name": "Group"
+									}
+								],
+								"name": "CreatableProps"
+							},
+							{
+								"type": "union",
+								"types": [
+									{
+										"type": "literal",
+										"value": "theme"
+									},
+									{
+										"type": "literal",
+										"value": "styles"
+									}
+								]
+							}
+						],
+						"name": "Omit"
+					},
+					{
+						"type": "reference",
+						"name": "ErrorProp"
+					}
+				]
+			}
+		},
+		{
+			"id": 400,
+			"name": "SelectInputProps",
+			"kind": 4194304,
+			"kindString": "Type alias",
+			"flags": {},
+			"sources": [
+				{
+					"fileName": "src/SelectInput/index.tsx",
+					"line": 119,
+					"character": 12
+				}
+			],
+			"typeParameter": [
+				{
+					"id": 401,
+					"name": "Option",
+					"kind": 131072,
+					"kindString": "Type parameter",
+					"flags": {}
+				},
+				{
+					"id": 402,
+					"name": "IsMulti",
+					"kind": 131072,
+					"kindString": "Type parameter",
+					"flags": {},
+					"type": {
+						"type": "intrinsic",
+						"name": "boolean"
+					}
+				},
+				{
+					"id": 403,
+					"name": "Group",
+					"kind": 131072,
+					"kindString": "Type parameter",
+					"flags": {},
+					"type": {
+						"type": "reference",
+						"typeArguments": [
+							{
+								"type": "reference",
+								"id": 401,
+								"name": "Option"
+							}
+						],
+						"name": "GroupBase"
+					}
+				}
+			],
+			"type": {
+				"type": "intersection",
+				"types": [
+					{
+						"type": "reference",
+						"typeArguments": [
+							{
+								"type": "reference",
+								"typeArguments": [
+									{
+										"type": "reference",
+										"id": 401,
+										"name": "Option"
+									},
+									{
+										"type": "reference",
+										"id": 402,
+										"name": "IsMulti"
+									},
+									{
+										"type": "reference",
+										"id": 403,
+										"name": "Group"
+									}
+								],
+								"name": "RawSelectProps"
+							},
+							{
+								"type": "union",
+								"types": [
+									{
+										"type": "literal",
+										"value": "theme"
+									},
+									{
+										"type": "literal",
+										"value": "styles"
+									}
+								]
+							}
+						],
+						"name": "Omit"
+					},
+					{
+						"type": "reference",
+						"name": "ErrorProp"
+					}
+				]
+			}
+		},
+		{
+			"id": 79,
+			"name": "SwitchInputChangeEventHandler",
+			"kind": 4194304,
+			"kindString": "Type alias",
+			"flags": {},
+			"sources": [
+				{
+					"fileName": "src/SwitchInput/index.tsx",
+					"line": 5,
+					"character": 12
+				}
+			],
+			"type": {
+				"type": "reflection",
+				"declaration": {
+					"id": 80,
+					"name": "__type",
+					"kind": 65536,
+					"kindString": "Type literal",
+					"flags": {},
+					"sources": [
+						{
+							"fileName": "src/SwitchInput/index.tsx",
+							"line": 5,
+							"character": 44
+						}
+					],
+					"signatures": [
+						{
+							"id": 81,
+							"name": "__type",
+							"kind": 4096,
+							"kindString": "Call signature",
+							"flags": {},
+							"parameters": [
+								{
+									"id": 82,
+									"name": "newValue",
+									"kind": 32768,
+									"kindString": "Parameter",
+									"flags": {},
+									"type": {
+										"type": "intrinsic",
+										"name": "boolean"
+									}
+								},
+								{
+									"id": 83,
+									"name": "event",
+									"kind": 32768,
+									"kindString": "Parameter",
+									"flags": {},
+									"type": {
+										"type": "union",
+										"types": [
+											{
+												"type": "reference",
+												"typeArguments": [
+													{
+														"type": "reference",
+														"name": "HTMLButtonElement"
+													}
+												],
+												"name": "React.MouseEvent"
+											},
+											{
+												"type": "reference",
+												"typeArguments": [
+													{
+														"type": "reference",
+														"name": "HTMLButtonElement"
+													}
+												],
+												"name": "React.KeyboardEvent"
+											}
+										]
+									}
+								}
+							],
+							"type": {
+								"type": "intrinsic",
+								"name": "void"
+							}
+						}
+					]
+				}
+			}
+		},
+		{
+			"id": 347,
+			"name": "TextInputChangeEventHandler",
+			"kind": 4194304,
+			"kindString": "Type alias",
+			"flags": {},
+			"sources": [
 				{
 					"fileName": "src/TextInput/index.tsx",
 					"line": 5,
@@ -9915,36 +10323,95 @@
 			}
 		},
 		{
-			"id": 1,
-			"name": "Button",
+			"id": 434,
+			"name": "AsyncCreatableSelectField",
 			"kind": 64,
 			"kindString": "Function",
 			"flags": {},
 			"sources": [
 				{
-					"fileName": "src/Button/index.tsx",
-					"line": 19,
+					"fileName": "src/SelectField/index.tsx",
+					"line": 207,
 					"character": 16
 				}
 			],
 			"signatures": [
 				{
-					"id": 2,
-					"name": "Button",
+					"id": 435,
+					"name": "AsyncCreatableSelectField",
 					"kind": 4096,
 					"kindString": "Call signature",
 					"flags": {},
+					"typeParameter": [
+						{
+							"id": 436,
+							"name": "Option",
+							"kind": 131072,
+							"kindString": "Type parameter",
+							"flags": {}
+						},
+						{
+							"id": 437,
+							"name": "IsMulti",
+							"kind": 131072,
+							"kindString": "Type parameter",
+							"flags": {},
+							"type": {
+								"type": "intrinsic",
+								"name": "boolean"
+							}
+						},
+						{
+							"id": 438,
+							"name": "Group",
+							"kind": 131072,
+							"kindString": "Type parameter",
+							"flags": {},
+							"type": {
+								"type": "reference",
+								"typeArguments": [
+									{
+										"type": "reference",
+										"id": 436,
+										"name": "Option"
+									},
+									{
+										"type": "reference",
+										"id": 438,
+										"name": "Group"
+									}
+								],
+								"name": "GroupBase"
+							}
+						}
+					],
 					"parameters": [
 						{
-							"id": 3,
+							"id": 439,
 							"name": "__namedParameters",
 							"kind": 32768,
 							"kindString": "Parameter",
 							"flags": {},
 							"type": {
 								"type": "reference",
-								"id": 7,
-								"name": "ButtonProps"
+								"typeArguments": [
+									{
+										"type": "reference",
+										"id": 436,
+										"name": "Option"
+									},
+									{
+										"type": "reference",
+										"id": 437,
+										"name": "IsMulti"
+									},
+									{
+										"type": "reference",
+										"id": 438,
+										"name": "Group"
+									}
+								],
+								"name": "AsyncCreatableSelectFieldProps"
 							}
 						}
 					],
@@ -9956,36 +10423,437 @@
 			]
 		},
 		{
-			"id": 4,
-			"name": "ButtonLink",
+			"id": 394,
+			"name": "AsyncCreatableSelectInput",
 			"kind": 64,
 			"kindString": "Function",
 			"flags": {},
 			"sources": [
 				{
-					"fileName": "src/Button/index.tsx",
-					"line": 70,
+					"fileName": "src/SelectInput/index.tsx",
+					"line": 212,
 					"character": 16
 				}
 			],
 			"signatures": [
 				{
-					"id": 5,
-					"name": "ButtonLink",
+					"id": 395,
+					"name": "AsyncCreatableSelectInput",
 					"kind": 4096,
 					"kindString": "Call signature",
 					"flags": {},
-					"parameters": [
+					"typeParameter": [
 						{
-							"id": 6,
-							"name": "__namedParameters",
-							"kind": 32768,
-							"kindString": "Parameter",
+							"id": 396,
+							"name": "Option",
+							"kind": 131072,
+							"kindString": "Type parameter",
 							"flags": {},
-							"type": {
-								"type": "reference",
-								"id": 20,
-								"name": "ButtonLinkProps"
+							"default": {
+								"type": "intrinsic",
+								"name": "unknown"
+							}
+						},
+						{
+							"id": 397,
+							"name": "IsMulti",
+							"kind": 131072,
+							"kindString": "Type parameter",
+							"flags": {},
+							"type": {
+								"type": "intrinsic",
+								"name": "boolean"
+							},
+							"default": {
+								"type": "literal",
+								"value": false
+							}
+						},
+						{
+							"id": 398,
+							"name": "Group",
+							"kind": 131072,
+							"kindString": "Type parameter",
+							"flags": {},
+							"type": {
+								"type": "reference",
+								"typeArguments": [
+									{
+										"type": "reference",
+										"id": 396,
+										"name": "Option"
+									},
+									{
+										"type": "reference",
+										"id": 398,
+										"name": "Group"
+									}
+								],
+								"name": "GroupBase"
+							},
+							"default": {
+								"type": "reference",
+								"typeArguments": [
+									{
+										"type": "reference",
+										"id": 396,
+										"name": "Option"
+									}
+								],
+								"name": "GroupBase"
+							}
+						}
+					],
+					"parameters": [
+						{
+							"id": 399,
+							"name": "__namedParameters",
+							"kind": 32768,
+							"kindString": "Parameter",
+							"flags": {},
+							"type": {
+								"type": "reference",
+								"id": 412,
+								"typeArguments": [
+									{
+										"type": "reference",
+										"id": 396,
+										"name": "Option"
+									},
+									{
+										"type": "reference",
+										"id": 397,
+										"name": "IsMulti"
+									},
+									{
+										"type": "reference",
+										"id": 398,
+										"name": "Group"
+									}
+								],
+								"name": "AsyncCreatableSelectInputProps"
+							}
+						}
+					],
+					"type": {
+						"type": "reference",
+						"name": "JSX.Element"
+					}
+				}
+			]
+		},
+		{
+			"id": 422,
+			"name": "AsyncSelectField",
+			"kind": 64,
+			"kindString": "Function",
+			"flags": {},
+			"sources": [
+				{
+					"fileName": "src/SelectField/index.tsx",
+					"line": 93,
+					"character": 16
+				}
+			],
+			"signatures": [
+				{
+					"id": 423,
+					"name": "AsyncSelectField",
+					"kind": 4096,
+					"kindString": "Call signature",
+					"flags": {},
+					"typeParameter": [
+						{
+							"id": 424,
+							"name": "Option",
+							"kind": 131072,
+							"kindString": "Type parameter",
+							"flags": {}
+						},
+						{
+							"id": 425,
+							"name": "IsMulti",
+							"kind": 131072,
+							"kindString": "Type parameter",
+							"flags": {},
+							"type": {
+								"type": "intrinsic",
+								"name": "boolean"
+							}
+						},
+						{
+							"id": 426,
+							"name": "Group",
+							"kind": 131072,
+							"kindString": "Type parameter",
+							"flags": {},
+							"type": {
+								"type": "reference",
+								"typeArguments": [
+									{
+										"type": "reference",
+										"id": 424,
+										"name": "Option"
+									},
+									{
+										"type": "reference",
+										"id": 426,
+										"name": "Group"
+									}
+								],
+								"name": "GroupBase"
+							}
+						}
+					],
+					"parameters": [
+						{
+							"id": 427,
+							"name": "__namedParameters",
+							"kind": 32768,
+							"kindString": "Parameter",
+							"flags": {},
+							"type": {
+								"type": "reference",
+								"typeArguments": [
+									{
+										"type": "reference",
+										"id": 424,
+										"name": "Option"
+									},
+									{
+										"type": "reference",
+										"id": 425,
+										"name": "IsMulti"
+									},
+									{
+										"type": "reference",
+										"id": 426,
+										"name": "Group"
+									}
+								],
+								"name": "AsyncSelectFieldProps"
+							}
+						}
+					],
+					"type": {
+						"type": "reference",
+						"name": "JSX.Element"
+					}
+				}
+			]
+		},
+		{
+			"id": 382,
+			"name": "AsyncSelectInput",
+			"kind": 64,
+			"kindString": "Function",
+			"flags": {},
+			"sources": [
+				{
+					"fileName": "src/SelectInput/index.tsx",
+					"line": 154,
+					"character": 16
+				}
+			],
+			"signatures": [
+				{
+					"id": 383,
+					"name": "AsyncSelectInput",
+					"kind": 4096,
+					"kindString": "Call signature",
+					"flags": {},
+					"typeParameter": [
+						{
+							"id": 384,
+							"name": "Option",
+							"kind": 131072,
+							"kindString": "Type parameter",
+							"flags": {},
+							"default": {
+								"type": "intrinsic",
+								"name": "unknown"
+							}
+						},
+						{
+							"id": 385,
+							"name": "IsMulti",
+							"kind": 131072,
+							"kindString": "Type parameter",
+							"flags": {},
+							"type": {
+								"type": "intrinsic",
+								"name": "boolean"
+							},
+							"default": {
+								"type": "literal",
+								"value": false
+							}
+						},
+						{
+							"id": 386,
+							"name": "Group",
+							"kind": 131072,
+							"kindString": "Type parameter",
+							"flags": {},
+							"type": {
+								"type": "reference",
+								"typeArguments": [
+									{
+										"type": "reference",
+										"id": 384,
+										"name": "Option"
+									},
+									{
+										"type": "reference",
+										"id": 386,
+										"name": "Group"
+									}
+								],
+								"name": "GroupBase"
+							},
+							"default": {
+								"type": "reference",
+								"typeArguments": [
+									{
+										"type": "reference",
+										"id": 384,
+										"name": "Option"
+									}
+								],
+								"name": "GroupBase"
+							}
+						}
+					],
+					"parameters": [
+						{
+							"id": 387,
+							"name": "__namedParameters",
+							"kind": 32768,
+							"kindString": "Parameter",
+							"flags": {},
+							"type": {
+								"type": "reference",
+								"id": 404,
+								"typeArguments": [
+									{
+										"type": "reference",
+										"id": 384,
+										"name": "Option"
+									},
+									{
+										"type": "reference",
+										"id": 385,
+										"name": "IsMulti"
+									},
+									{
+										"type": "reference",
+										"id": 386,
+										"name": "Group"
+									}
+								],
+								"name": "AsyncSelectInputProps"
+							}
+						}
+					],
+					"type": {
+						"type": "reference",
+						"name": "JSX.Element"
+					}
+				}
+			]
+		},
+		{
+			"id": 1,
+			"name": "Button",
+			"kind": 64,
+			"kindString": "Function",
+			"flags": {},
+			"sources": [
+				{
+					"fileName": "src/Button/index.tsx",
+					"line": 80,
+					"character": 16
+				}
+			],
+			"signatures": [
+				{
+					"id": 2,
+					"name": "Button",
+					"kind": 4096,
+					"kindString": "Call signature",
+					"flags": {},
+					"comment": {
+						"tags": [
+							{
+								"tag": "example",
+								"text": "Button types\n\n```js\n<Canvas ctx={ctx}>\n  <div style={{ marginBottom: 'var(--spacing-m)' }}>\n    <Button buttonType=\"muted\">Submit</Button>{' '}\n    <Button buttonType=\"primary\">Submit</Button>{' '}\n    <Button buttonType=\"negative\">Submit</Button>\n  </div>\n  <div>\n    <Button buttonType=\"muted\" disabled>\n      Submit\n    </Button>{' '}\n    <Button buttonType=\"primary\" disabled>\n      Submit\n    </Button>{' '}\n    <Button buttonType=\"negative\" disabled>\n      Submit\n    </Button>\n  </div>\n</Canvas>;\n```\n"
+							},
+							{
+								"tag": "example",
+								"text": "Full-width\n\n```js\n<Canvas ctx={ctx}>\n  <Button fullWidth>Submit</Button>\n</Canvas>;\n```\n"
+							},
+							{
+								"tag": "example",
+								"text": "Sizing\n\n```js\n<Canvas ctx={ctx}>\n  <Button buttonSize=\"xxs\">Submit</Button>{' '}\n  <Button buttonSize=\"xs\">Submit</Button>{' '}\n  <Button buttonSize=\"s\">Submit</Button>{' '}\n  <Button buttonSize=\"m\">Submit</Button>{' '}\n  <Button buttonSize=\"l\">Submit</Button>{' '}\n  <Button buttonSize=\"xl\">Submit</Button>{' '}\n</Canvas>;\n```\n"
+							},
+							{
+								"tag": "example",
+								"text": "Icons\n\n```js\n<Canvas ctx={ctx}>\n  <div style={{ marginBottom: 'var(--spacing-m)' }}>\n    <Button leftIcon={<PlusIcon />}>Submit</Button>\n  </div>\n  <div style={{ marginBottom: 'var(--spacing-m)' }}>\n    <Button rightIcon={<ChevronDownIcon />}>Options</Button>\n  </div>\n  <div>\n    <Button leftIcon={<PlusIcon />} />\n  </div>\n</Canvas>;\n```\n"
+							}
+						]
+					},
+					"parameters": [
+						{
+							"id": 3,
+							"name": "__namedParameters",
+							"kind": 32768,
+							"kindString": "Parameter",
+							"flags": {},
+							"type": {
+								"type": "reference",
+								"id": 7,
+								"name": "ButtonProps"
+							}
+						}
+					],
+					"type": {
+						"type": "reference",
+						"name": "JSX.Element"
+					}
+				}
+			]
+		},
+		{
+			"id": 4,
+			"name": "ButtonLink",
+			"kind": 64,
+			"kindString": "Function",
+			"flags": {},
+			"sources": [
+				{
+					"fileName": "src/Button/index.tsx",
+					"line": 135,
+					"character": 16
+				}
+			],
+			"signatures": [
+				{
+					"id": 5,
+					"name": "ButtonLink",
+					"kind": 4096,
+					"kindString": "Call signature",
+					"flags": {},
+					"parameters": [
+						{
+							"id": 6,
+							"name": "__namedParameters",
+							"kind": 32768,
+							"kindString": "Parameter",
+							"flags": {},
+							"type": {
+								"type": "reference",
+								"id": 20,
+								"name": "ButtonLinkProps"
 							}
 						}
 					],
@@ -10005,7 +10873,7 @@
 			"sources": [
 				{
 					"fileName": "src/Canvas/index.tsx",
-					"line": 18,
+					"line": 497,
 					"character": 16
 				}
 			],
@@ -10016,6 +10884,22 @@
 					"kind": 4096,
 					"kindString": "Call signature",
 					"flags": {},
+					"comment": {
+						"tags": [
+							{
+								"tag": "example",
+								"text": "Color variables\n\n```js\n<Canvas ctx={ctx}>\n  <Section title=\"Text colors\">\n    <table>\n      <tbody>\n        <tr>\n          <td>\n            <code>--base-body-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--base-body-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--light-body-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--light-body-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--placeholder-body-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--placeholder-body-color)',\n              }}\n            />\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </Section>\n  <Section title=\"UI colors\">\n    <table>\n      <tbody>\n        <tr>\n          <td>\n            <code>--light-bg-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--light-bg-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--lighter-bg-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--lighter-bg-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--disabled-bg-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--disabled-bg-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--border-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--border-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--darker-border-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--darker-border-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--alert-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--alert-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--warning-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--warning-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--notice-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--notice-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--warning-bg-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--warning-bg-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--add-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--add-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--remove-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--remove-color)',\n              }}\n            />\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </Section>\n  <Section title=\"Project-specific colors\">\n    <table>\n      <tbody>\n        <tr>\n          <td>\n            <code>--accent-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--accent-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--primary-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--primary-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--light-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--light-color)',\n              }}\n            />\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>--dark-color</code>\n          </td>\n          <td width=\"30%\">\n            <div\n              style={{\n                width: '30px',\n                height: '30px',\n                background: 'var(--dark-color)',\n              }}\n            />\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </Section>\n</Canvas>;\n```\n"
+							},
+							{
+								"tag": "example",
+								"text": "Typography variables\n\n```js\n<Canvas ctx={ctx}>\n  <table>\n    <tbody>\n      <tr>\n        <td>\n          <code>--font-size-xxs</code>\n        </td>\n        <td>\n          <div style={{ fontSize: 'var(--font-size-xxs)' }}>\n            Size XXS\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <td>\n          <code>--font-size-xs</code>\n        </td>\n        <td>\n          <div style={{ fontSize: 'var(--font-size-xs)' }}>Size XS</div>\n        </td>\n      </tr>\n      <tr>\n        <td>\n          <code>--font-size-s</code>\n        </td>\n        <td>\n          <div style={{ fontSize: 'var(--font-size-s)' }}>Size S</div>\n        </td>\n      </tr>\n      <tr>\n        <td>\n          <code>--font-size-m</code>\n        </td>\n        <td>\n          <div style={{ fontSize: 'var(--font-size-m)' }}>Size M</div>\n        </td>\n      </tr>\n      <tr>\n        <td>\n          <code>--font-size-l</code>\n        </td>\n        <td>\n          <div\n            style={{\n              fontSize: 'var(--font-size-l)',\n              fontWeight: 'var(--font-weight-bold)',\n            }}\n          >\n            Size L\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <td>\n          <code>--font-size-xl</code>\n        </td>\n        <td>\n          <div\n            style={{\n              fontSize: 'var(--font-size-xl)',\n              fontWeight: 'var(--font-weight-bold)',\n            }}\n          >\n            Size XL\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <td>\n          <code>--font-size-xxl</code>\n        </td>\n        <td>\n          <div\n            style={{\n              fontSize: 'var(--font-size-xxl)',\n              fontWeight: 'var(--font-weight-bold)',\n            }}\n          >\n            Size XXL\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <td>\n          <code>--font-size-xxxl</code>\n        </td>\n        <td>\n          <div\n            style={{\n              fontSize: 'var(--font-size-xxxl)',\n              fontWeight: 'var(--font-weight-bold)',\n            }}\n          >\n            Size XXXL\n          </div>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</Canvas>;\n```\n"
+							},
+							{
+								"tag": "example",
+								"text": "Spacing variables\n\n```js\n<Canvas ctx={ctx}>\n  <table>\n    <tbody>\n      <tr>\n        <td>\n          <code>--spacing-s</code>\n        </td>\n        <td>\n          <div\n            style={{\n              background: 'var(--accent-color)',\n              width: 'var(--spacing-s)',\n              height: 'var(--spacing-s)',\n            }}\n          />\n        </td>\n      </tr>\n      <tr>\n        <td>\n          <code>--spacing-m</code>\n        </td>\n        <td>\n          <div\n            style={{\n              background: 'var(--accent-color)',\n              width: 'var(--spacing-m)',\n              height: 'var(--spacing-m)',\n            }}\n          />\n        </td>\n      </tr>\n      <tr>\n        <td>\n          <code>--spacing-l</code>\n        </td>\n        <td>\n          <div\n            style={{\n              background: 'var(--accent-color)',\n              width: 'var(--spacing-l)',\n              height: 'var(--spacing-l)',\n            }}\n          />\n        </td>\n      </tr>\n      <tr>\n        <td>\n          <code>--spacing-xl</code>\n        </td>\n        <td>\n          <div\n            style={{\n              background: 'var(--accent-color)',\n              width: 'var(--spacing-xl)',\n              height: 'var(--spacing-xl)',\n            }}\n          />\n        </td>\n      </tr>\n      <tr>\n        <td>\n          <code>--spacing-xxl</code>\n        </td>\n        <td>\n          <div\n            style={{\n              background: 'var(--accent-color)',\n              width: 'var(--spacing-xxl)',\n              height: 'var(--spacing-xxl)',\n            }}\n          />\n        </td>\n      </tr>\n      <tr>\n        <td>\n          <code>--spacing-xxxl</code>\n        </td>\n        <td>\n          <div\n            style={{\n              background: 'var(--accent-color)',\n              width: 'var(--spacing-xxxl)',\n              height: 'var(--spacing-xxxl)',\n            }}\n          />\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</Canvas>;\n```\n"
+							}
+						]
+					},
 					"parameters": [
 						{
 							"id": 35,
@@ -10046,7 +10930,7 @@
 			"sources": [
 				{
 					"fileName": "src/ContextInspector/index.tsx",
-					"line": 161,
+					"line": 179,
 					"character": 16
 				}
 			],
@@ -10082,8 +10966,8 @@
 											"sources": [
 												{
 													"fileName": "src/ContextInspector/index.tsx",
-													"line": 161,
-													"character": 44
+													"line": 182,
+													"character": 2
 												}
 											],
 											"type": {
@@ -10104,8 +10988,8 @@
 															"sources": [
 																{
 																	"fileName": "src/ContextInspector/index.tsx",
-																	"line": 161,
-																	"character": 51
+																	"line": 182,
+																	"character": 9
 																}
 															],
 															"type": {
@@ -10147,6 +11031,226 @@
 				}
 			]
 		},
+		{
+			"id": 428,
+			"name": "CreatableSelectField",
+			"kind": 64,
+			"kindString": "Function",
+			"flags": {},
+			"sources": [
+				{
+					"fileName": "src/SelectField/index.tsx",
+					"line": 150,
+					"character": 16
+				}
+			],
+			"signatures": [
+				{
+					"id": 429,
+					"name": "CreatableSelectField",
+					"kind": 4096,
+					"kindString": "Call signature",
+					"flags": {},
+					"typeParameter": [
+						{
+							"id": 430,
+							"name": "Option",
+							"kind": 131072,
+							"kindString": "Type parameter",
+							"flags": {}
+						},
+						{
+							"id": 431,
+							"name": "IsMulti",
+							"kind": 131072,
+							"kindString": "Type parameter",
+							"flags": {},
+							"type": {
+								"type": "intrinsic",
+								"name": "boolean"
+							}
+						},
+						{
+							"id": 432,
+							"name": "Group",
+							"kind": 131072,
+							"kindString": "Type parameter",
+							"flags": {},
+							"type": {
+								"type": "reference",
+								"typeArguments": [
+									{
+										"type": "reference",
+										"id": 430,
+										"name": "Option"
+									},
+									{
+										"type": "reference",
+										"id": 432,
+										"name": "Group"
+									}
+								],
+								"name": "GroupBase"
+							}
+						}
+					],
+					"parameters": [
+						{
+							"id": 433,
+							"name": "__namedParameters",
+							"kind": 32768,
+							"kindString": "Parameter",
+							"flags": {},
+							"type": {
+								"type": "reference",
+								"typeArguments": [
+									{
+										"type": "reference",
+										"id": 430,
+										"name": "Option"
+									},
+									{
+										"type": "reference",
+										"id": 431,
+										"name": "IsMulti"
+									},
+									{
+										"type": "reference",
+										"id": 432,
+										"name": "Group"
+									}
+								],
+								"name": "CreatableSelectFieldProps"
+							}
+						}
+					],
+					"type": {
+						"type": "reference",
+						"name": "JSX.Element"
+					}
+				}
+			]
+		},
+		{
+			"id": 388,
+			"name": "CreatableSelectInput",
+			"kind": 64,
+			"kindString": "Function",
+			"flags": {},
+			"sources": [
+				{
+					"fileName": "src/SelectInput/index.tsx",
+					"line": 183,
+					"character": 16
+				}
+			],
+			"signatures": [
+				{
+					"id": 389,
+					"name": "CreatableSelectInput",
+					"kind": 4096,
+					"kindString": "Call signature",
+					"flags": {},
+					"typeParameter": [
+						{
+							"id": 390,
+							"name": "Option",
+							"kind": 131072,
+							"kindString": "Type parameter",
+							"flags": {},
+							"default": {
+								"type": "intrinsic",
+								"name": "unknown"
+							}
+						},
+						{
+							"id": 391,
+							"name": "IsMulti",
+							"kind": 131072,
+							"kindString": "Type parameter",
+							"flags": {},
+							"type": {
+								"type": "intrinsic",
+								"name": "boolean"
+							},
+							"default": {
+								"type": "literal",
+								"value": false
+							}
+						},
+						{
+							"id": 392,
+							"name": "Group",
+							"kind": 131072,
+							"kindString": "Type parameter",
+							"flags": {},
+							"type": {
+								"type": "reference",
+								"typeArguments": [
+									{
+										"type": "reference",
+										"id": 390,
+										"name": "Option"
+									},
+									{
+										"type": "reference",
+										"id": 392,
+										"name": "Group"
+									}
+								],
+								"name": "GroupBase"
+							},
+							"default": {
+								"type": "reference",
+								"typeArguments": [
+									{
+										"type": "reference",
+										"id": 390,
+										"name": "Option"
+									}
+								],
+								"name": "GroupBase"
+							}
+						}
+					],
+					"parameters": [
+						{
+							"id": 393,
+							"name": "__namedParameters",
+							"kind": 32768,
+							"kindString": "Parameter",
+							"flags": {},
+							"type": {
+								"type": "reference",
+								"id": 408,
+								"typeArguments": [
+									{
+										"type": "reference",
+										"id": 390,
+										"name": "Option"
+									},
+									{
+										"type": "reference",
+										"id": 391,
+										"name": "IsMulti"
+									},
+									{
+										"type": "reference",
+										"id": 392,
+										"name": "Group"
+									}
+								],
+								"name": "CreatableSelectInputProps"
+							}
+						}
+					],
+					"type": {
+						"type": "reference",
+						"name": "JSX.Element"
+					}
+				}
+			]
+		},
 		{
 			"id": 41,
 			"name": "FieldError",
@@ -10279,7 +11383,7 @@
 			"sources": [
 				{
 					"fileName": "src/Form/index.tsx",
-					"line": 20,
+					"line": 92,
 					"character": 13
 				}
 			],
@@ -10290,6 +11394,14 @@
 					"kind": 4096,
 					"kindString": "Call signature",
 					"flags": {},
+					"comment": {
+						"tags": [
+							{
+								"tag": "example",
+								"text": "Full example\n\n```js\n<Canvas ctx={ctx}>\n  <Form onSubmit={() => console.log('onSubmit')}>\n    <FieldGroup>\n      <TextField\n        required\n        name=\"name\"\n        id=\"name\"\n        label=\"Name\"\n        value=\"Mark Smith\"\n        placeholder=\"Enter full name\"\n        hint=\"Provide a full name\"\n        onChange={(newValue) => console.log(newValue)}\n      />\n      <TextField\n        required\n        name=\"email\"\n        id=\"email\"\n        label=\"Email\"\n        type=\"email\"\n        value=\"\"\n        placeholder=\"your@email.com\"\n        error=\"Please enter an email!\"\n        hint=\"Enter email address\"\n        onChange={(newValue) => console.log(newValue)}\n      />\n      <TextField\n        required\n        name=\"apiToken\"\n        id=\"apiToken\"\n        label=\"API Token\"\n        value=\"XXXYYY123\"\n        hint=\"Enter a valid API token\"\n        textInputProps={{ monospaced: true }}\n        onChange={(newValue) => console.log(newValue)}\n      />\n      <SelectField\n        name=\"option\"\n        id=\"option\"\n        label=\"Option\"\n        hint=\"Select one of the options\"\n        value={{ label: 'Option 1', value: 'option1' }}\n        selectInputProps={{\n          options: [\n            { label: 'Option 1', value: 'option1' },\n            { label: 'Option 2', value: 'option2' },\n            { label: 'Option 3', value: 'option3' },\n          ],\n        }}\n        onChange={(newValue) => console.log(newValue)}\n      />\n      <SwitchField\n        name=\"debugMode\"\n        id=\"debugMode\"\n        label=\"Debug mode active?\"\n        hint=\"Logs messages to console\"\n        value={true}\n        onChange={(newValue) => console.log(newValue)}\n      />\n    </FieldGroup>\n    <FieldGroup>\n      <Button fullWidth buttonType=\"primary\">\n        Submit\n      </Button>\n    </FieldGroup>\n  </Form>\n</Canvas>;\n```\n"
+							}
+						]
+					},
 					"parameters": [
 						{
 							"id": 62,
@@ -10354,6 +11466,282 @@
 				}
 			]
 		},
+		{
+			"id": 373,
+			"name": "Section",
+			"kind": 64,
+			"kindString": "Function",
+			"flags": {},
+			"sources": [
+				{
+					"fileName": "src/Section/index.tsx",
+					"line": 63,
+					"character": 16
+				}
+			],
+			"signatures": [
+				{
+					"id": 374,
+					"name": "Section",
+					"kind": 4096,
+					"kindString": "Call signature",
+					"flags": {},
+					"comment": {
+						"tags": [
+							{
+								"tag": "example",
+								"text": "Basic usage\n\n```jsx\n<Canvas ctx={ctx}>\n  <Section title=\"Section title\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n    ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n    aliquip ex ea commodo consequat.\n  </Section>\n</Canvas>;\n```\n"
+							},
+							{
+								"tag": "example",
+								"text": "Highlighted\n\n```jsx\n<Canvas ctx={ctx}>\n  <Section title=\"Section title\" highlighted>\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n    ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n    aliquip ex ea commodo consequat.\n  </Section>\n</Canvas>;\n```\n"
+							},
+							{
+								"tag": "example",
+								"text": "Collapsible\n\n```jsx\n<Canvas ctx={ctx}>\n  <StateManager initial={true}>\n    {(isOpen, setOpen) => (\n      <Section\n        title=\"Section title\"\n        collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}\n      >\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n        enim ad minim veniam, quis nostrud exercitation ullamco laboris\n        nisi ut aliquip ex ea commodo consequat.\n      </Section>\n    )}\n  </StateManager>\n</Canvas>;\n```\n"
+							}
+						]
+					},
+					"parameters": [
+						{
+							"id": 375,
+							"name": "__namedParameters",
+							"kind": 32768,
+							"kindString": "Parameter",
+							"flags": {},
+							"type": {
+								"type": "reference",
+								"name": "SectionProps"
+							}
+						}
+					],
+					"type": {
+						"type": "reference",
+						"name": "JSX.Element"
+					}
+				}
+			]
+		},
+		{
+			"id": 416,
+			"name": "SelectField",
+			"kind": 64,
+			"kindString": "Function",
+			"flags": {},
+			"sources": [
+				{
+					"fileName": "src/SelectField/index.tsx",
+					"line": 36,
+					"character": 16
+				}
+			],
+			"signatures": [
+				{
+					"id": 417,
+					"name": "SelectField",
+					"kind": 4096,
+					"kindString": "Call signature",
+					"flags": {},
+					"typeParameter": [
+						{
+							"id": 418,
+							"name": "Option",
+							"kind": 131072,
+							"kindString": "Type parameter",
+							"flags": {}
+						},
+						{
+							"id": 419,
+							"name": "IsMulti",
+							"kind": 131072,
+							"kindString": "Type parameter",
+							"flags": {},
+							"type": {
+								"type": "intrinsic",
+								"name": "boolean"
+							}
+						},
+						{
+							"id": 420,
+							"name": "Group",
+							"kind": 131072,
+							"kindString": "Type parameter",
+							"flags": {},
+							"type": {
+								"type": "reference",
+								"typeArguments": [
+									{
+										"type": "reference",
+										"id": 418,
+										"name": "Option"
+									},
+									{
+										"type": "reference",
+										"id": 420,
+										"name": "Group"
+									}
+								],
+								"name": "GroupBase"
+							}
+						}
+					],
+					"parameters": [
+						{
+							"id": 421,
+							"name": "__namedParameters",
+							"kind": 32768,
+							"kindString": "Parameter",
+							"flags": {},
+							"type": {
+								"type": "reference",
+								"typeArguments": [
+									{
+										"type": "reference",
+										"id": 418,
+										"name": "Option"
+									},
+									{
+										"type": "reference",
+										"id": 419,
+										"name": "IsMulti"
+									},
+									{
+										"type": "reference",
+										"id": 420,
+										"name": "Group"
+									}
+								],
+								"name": "SelectFieldProps"
+							}
+						}
+					],
+					"type": {
+						"type": "reference",
+						"name": "JSX.Element"
+					}
+				}
+			]
+		},
+		{
+			"id": 376,
+			"name": "SelectInput",
+			"kind": 64,
+			"kindString": "Function",
+			"flags": {},
+			"sources": [
+				{
+					"fileName": "src/SelectInput/index.tsx",
+					"line": 126,
+					"character": 16
+				}
+			],
+			"signatures": [
+				{
+					"id": 377,
+					"name": "SelectInput",
+					"kind": 4096,
+					"kindString": "Call signature",
+					"flags": {},
+					"typeParameter": [
+						{
+							"id": 378,
+							"name": "Option",
+							"kind": 131072,
+							"kindString": "Type parameter",
+							"flags": {},
+							"default": {
+								"type": "intrinsic",
+								"name": "unknown"
+							}
+						},
+						{
+							"id": 379,
+							"name": "IsMulti",
+							"kind": 131072,
+							"kindString": "Type parameter",
+							"flags": {},
+							"type": {
+								"type": "intrinsic",
+								"name": "boolean"
+							},
+							"default": {
+								"type": "literal",
+								"value": false
+							}
+						},
+						{
+							"id": 380,
+							"name": "Group",
+							"kind": 131072,
+							"kindString": "Type parameter",
+							"flags": {},
+							"type": {
+								"type": "reference",
+								"typeArguments": [
+									{
+										"type": "reference",
+										"id": 378,
+										"name": "Option"
+									},
+									{
+										"type": "reference",
+										"id": 380,
+										"name": "Group"
+									}
+								],
+								"name": "GroupBase"
+							},
+							"default": {
+								"type": "reference",
+								"typeArguments": [
+									{
+										"type": "reference",
+										"id": 378,
+										"name": "Option"
+									}
+								],
+								"name": "GroupBase"
+							}
+						}
+					],
+					"parameters": [
+						{
+							"id": 381,
+							"name": "__namedParameters",
+							"kind": 32768,
+							"kindString": "Parameter",
+							"flags": {},
+							"type": {
+								"type": "reference",
+								"id": 400,
+								"typeArguments": [
+									{
+										"type": "reference",
+										"id": 378,
+										"name": "Option"
+									},
+									{
+										"type": "reference",
+										"id": 379,
+										"name": "IsMulti"
+									},
+									{
+										"type": "reference",
+										"id": 380,
+										"name": "Group"
+									}
+								],
+								"name": "SelectInputProps"
+							}
+						}
+					],
+					"type": {
+						"type": "reference",
+						"name": "JSX.Element"
+					}
+				}
+			]
+		},
 		{
 			"id": 73,
 			"name": "SwitchField",
@@ -10403,7 +11791,7 @@
 			"sources": [
 				{
 					"fileName": "src/SwitchInput/index.tsx",
-					"line": 19,
+					"line": 21,
 					"character": 16
 				}
 			],
@@ -10534,9 +11922,13 @@
 			"title": "Type aliases",
 			"kind": 4194304,
 			"children": [
+				412,
+				404,
 				20,
 				7,
 				36,
+				408,
+				400,
 				79,
 				347,
 				352
@@ -10546,15 +11938,24 @@
 			"title": "Functions",
 			"kind": 64,
 			"children": [
+				434,
+				394,
+				422,
+				382,
 				1,
 				4,
 				33,
 				366,
+				428,
+				388,
 				41,
 				44,
 				51,
 				60,
 				70,
+				373,
+				416,
+				376,
 				73,
 				76,
 				344,