datocms-react-ui 0.3.6 → 0.3.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/dist/cjs/Button/index.js +65 -4
  2. package/dist/cjs/Button/index.js.map +1 -1
  3. package/dist/cjs/Button/styles.module.css.json +1 -1
  4. package/dist/cjs/Canvas/index.js +487 -7
  5. package/dist/cjs/Canvas/index.js.map +1 -1
  6. package/dist/cjs/Canvas/styles.module.css.json +1 -1
  7. package/dist/cjs/ContextInspector/styles.module.css.json +1 -1
  8. package/dist/cjs/Form/index.js +72 -0
  9. package/dist/cjs/Form/index.js.map +1 -1
  10. package/dist/cjs/Section/index.js +70 -0
  11. package/dist/cjs/Section/index.js.map +1 -0
  12. package/dist/cjs/Section/styles.module.css.json +1 -0
  13. package/dist/cjs/SelectField/index.js +56 -0
  14. package/dist/cjs/SelectField/index.js.map +1 -0
  15. package/dist/cjs/SelectInput/index.js +135 -0
  16. package/dist/cjs/SelectInput/index.js.map +1 -0
  17. package/dist/cjs/SwitchInput/index.js +1 -1
  18. package/dist/cjs/SwitchInput/index.js.map +1 -1
  19. package/dist/cjs/TextInput/styles.module.css.json +1 -1
  20. package/dist/cjs/index.js +3 -0
  21. package/dist/cjs/index.js.map +1 -1
  22. package/dist/esm/Button/index.d.ts +62 -1
  23. package/dist/esm/Button/index.js +65 -4
  24. package/dist/esm/Button/index.js.map +1 -1
  25. package/dist/esm/Button/styles.module.css.json +1 -1
  26. package/dist/esm/Canvas/index.d.ts +479 -1
  27. package/dist/esm/Canvas/index.js +487 -7
  28. package/dist/esm/Canvas/index.js.map +1 -1
  29. package/dist/esm/Canvas/styles.module.css.json +1 -1
  30. package/dist/esm/ContextInspector/styles.module.css.json +1 -1
  31. package/dist/esm/Form/index.d.ts +72 -0
  32. package/dist/esm/Form/index.js +72 -0
  33. package/dist/esm/Form/index.js.map +1 -1
  34. package/dist/esm/Section/index.d.ts +63 -0
  35. package/dist/esm/Section/index.js +63 -0
  36. package/dist/esm/Section/index.js.map +1 -0
  37. package/dist/esm/Section/styles.module.css.json +1 -0
  38. package/dist/esm/SelectField/index.d.ts +60 -0
  39. package/dist/esm/SelectField/index.js +46 -0
  40. package/dist/esm/SelectField/index.js.map +1 -0
  41. package/dist/esm/SelectInput/index.d.ts +17 -0
  42. package/dist/esm/SelectInput/index.js +106 -0
  43. package/dist/esm/SelectInput/index.js.map +1 -0
  44. package/dist/esm/SwitchInput/index.d.ts +1 -1
  45. package/dist/esm/SwitchInput/index.js +1 -1
  46. package/dist/esm/SwitchInput/index.js.map +1 -1
  47. package/dist/esm/TextInput/styles.module.css.json +1 -1
  48. package/dist/esm/index.d.ts +3 -0
  49. package/dist/esm/index.js +3 -0
  50. package/dist/esm/index.js.map +1 -1
  51. package/dist/types/Button/index.d.ts +62 -1
  52. package/dist/types/Canvas/index.d.ts +479 -1
  53. package/dist/types/Form/index.d.ts +72 -0
  54. package/dist/types/Section/index.d.ts +63 -0
  55. package/dist/types/SelectField/index.d.ts +60 -0
  56. package/dist/types/SelectInput/index.d.ts +17 -0
  57. package/dist/types/SwitchInput/index.d.ts +1 -1
  58. package/dist/types/index.d.ts +3 -0
  59. package/package.json +4 -6
  60. package/styles.css +1 -1
  61. package/types.json +1533 -132
package/types.json CHANGED
@@ -2581,7 +2581,7 @@
2581
2581
  "sources": [
2582
2582
  {
2583
2583
  "fileName": "src/SwitchInput/index.tsx",
2584
- "line": 13,
2584
+ "line": 15,
2585
2585
  "character": 2
2586
2586
  }
2587
2587
  ],
@@ -2950,7 +2950,7 @@
2950
2950
  "sources": [
2951
2951
  {
2952
2952
  "fileName": "src/SwitchInput/index.tsx",
2953
- "line": 12,
2953
+ "line": 14,
2954
2954
  "character": 2
2955
2955
  }
2956
2956
  ],
@@ -3522,11 +3522,13 @@
3522
3522
  "name": "onChange",
3523
3523
  "kind": 1024,
3524
3524
  "kindString": "Property",
3525
- "flags": {},
3525
+ "flags": {
3526
+ "isOptional": true
3527
+ },
3526
3528
  "sources": [
3527
3529
  {
3528
3530
  "fileName": "src/SwitchInput/index.tsx",
3529
- "line": 14,
3531
+ "line": 16,
3530
3532
  "character": 2
3531
3533
  }
3532
3534
  ],
@@ -5128,7 +5130,7 @@
5128
5130
  "sources": [
5129
5131
  {
5130
5132
  "fileName": "src/SwitchInput/index.tsx",
5131
- "line": 15,
5133
+ "line": 17,
5132
5134
  "character": 2
5133
5135
  }
5134
5136
  ],
@@ -8383,7 +8385,7 @@
8383
8385
  "sources": [
8384
8386
  {
8385
8387
  "fileName": "src/SwitchInput/index.tsx",
8386
- "line": 16,
8388
+ "line": 18,
8387
8389
  "character": 2
8388
8390
  }
8389
8391
  ],
@@ -8686,7 +8688,7 @@
8686
8688
  "sources": [
8687
8689
  {
8688
8690
  "fileName": "src/SwitchInput/index.tsx",
8689
- "line": 10,
8691
+ "line": 12,
8690
8692
  "character": 17
8691
8693
  }
8692
8694
  ],
@@ -8713,6 +8715,208 @@
8713
8715
  }
8714
8716
  ]
8715
8717
  },
8718
+ {
8719
+ "id": 412,
8720
+ "name": "AsyncCreatableSelectInputProps",
8721
+ "kind": 4194304,
8722
+ "kindString": "Type alias",
8723
+ "flags": {},
8724
+ "sources": [
8725
+ {
8726
+ "fileName": "src/SelectInput/index.tsx",
8727
+ "line": 205,
8728
+ "character": 12
8729
+ }
8730
+ ],
8731
+ "typeParameter": [
8732
+ {
8733
+ "id": 413,
8734
+ "name": "Option",
8735
+ "kind": 131072,
8736
+ "kindString": "Type parameter",
8737
+ "flags": {}
8738
+ },
8739
+ {
8740
+ "id": 414,
8741
+ "name": "IsMulti",
8742
+ "kind": 131072,
8743
+ "kindString": "Type parameter",
8744
+ "flags": {},
8745
+ "type": {
8746
+ "type": "intrinsic",
8747
+ "name": "boolean"
8748
+ }
8749
+ },
8750
+ {
8751
+ "id": 415,
8752
+ "name": "Group",
8753
+ "kind": 131072,
8754
+ "kindString": "Type parameter",
8755
+ "flags": {},
8756
+ "type": {
8757
+ "type": "reference",
8758
+ "typeArguments": [
8759
+ {
8760
+ "type": "reference",
8761
+ "id": 413,
8762
+ "name": "Option"
8763
+ }
8764
+ ],
8765
+ "name": "GroupBase"
8766
+ }
8767
+ }
8768
+ ],
8769
+ "type": {
8770
+ "type": "intersection",
8771
+ "types": [
8772
+ {
8773
+ "type": "reference",
8774
+ "typeArguments": [
8775
+ {
8776
+ "type": "reference",
8777
+ "typeArguments": [
8778
+ {
8779
+ "type": "reference",
8780
+ "id": 413,
8781
+ "name": "Option"
8782
+ },
8783
+ {
8784
+ "type": "reference",
8785
+ "id": 414,
8786
+ "name": "IsMulti"
8787
+ },
8788
+ {
8789
+ "type": "reference",
8790
+ "id": 415,
8791
+ "name": "Group"
8792
+ }
8793
+ ],
8794
+ "name": "AsyncCreatableProps"
8795
+ },
8796
+ {
8797
+ "type": "union",
8798
+ "types": [
8799
+ {
8800
+ "type": "literal",
8801
+ "value": "theme"
8802
+ },
8803
+ {
8804
+ "type": "literal",
8805
+ "value": "styles"
8806
+ }
8807
+ ]
8808
+ }
8809
+ ],
8810
+ "name": "Omit"
8811
+ },
8812
+ {
8813
+ "type": "reference",
8814
+ "name": "ErrorProp"
8815
+ }
8816
+ ]
8817
+ }
8818
+ },
8819
+ {
8820
+ "id": 404,
8821
+ "name": "AsyncSelectInputProps",
8822
+ "kind": 4194304,
8823
+ "kindString": "Type alias",
8824
+ "flags": {},
8825
+ "sources": [
8826
+ {
8827
+ "fileName": "src/SelectInput/index.tsx",
8828
+ "line": 148,
8829
+ "character": 12
8830
+ }
8831
+ ],
8832
+ "typeParameter": [
8833
+ {
8834
+ "id": 405,
8835
+ "name": "Option",
8836
+ "kind": 131072,
8837
+ "kindString": "Type parameter",
8838
+ "flags": {}
8839
+ },
8840
+ {
8841
+ "id": 406,
8842
+ "name": "IsMulti",
8843
+ "kind": 131072,
8844
+ "kindString": "Type parameter",
8845
+ "flags": {},
8846
+ "type": {
8847
+ "type": "intrinsic",
8848
+ "name": "boolean"
8849
+ }
8850
+ },
8851
+ {
8852
+ "id": 407,
8853
+ "name": "Group",
8854
+ "kind": 131072,
8855
+ "kindString": "Type parameter",
8856
+ "flags": {},
8857
+ "type": {
8858
+ "type": "reference",
8859
+ "typeArguments": [
8860
+ {
8861
+ "type": "reference",
8862
+ "id": 405,
8863
+ "name": "Option"
8864
+ }
8865
+ ],
8866
+ "name": "GroupBase"
8867
+ }
8868
+ }
8869
+ ],
8870
+ "type": {
8871
+ "type": "intersection",
8872
+ "types": [
8873
+ {
8874
+ "type": "reference",
8875
+ "typeArguments": [
8876
+ {
8877
+ "type": "reference",
8878
+ "typeArguments": [
8879
+ {
8880
+ "type": "reference",
8881
+ "id": 405,
8882
+ "name": "Option"
8883
+ },
8884
+ {
8885
+ "type": "reference",
8886
+ "id": 406,
8887
+ "name": "IsMulti"
8888
+ },
8889
+ {
8890
+ "type": "reference",
8891
+ "id": 407,
8892
+ "name": "Group"
8893
+ }
8894
+ ],
8895
+ "name": "AsyncProps"
8896
+ },
8897
+ {
8898
+ "type": "union",
8899
+ "types": [
8900
+ {
8901
+ "type": "literal",
8902
+ "value": "theme"
8903
+ },
8904
+ {
8905
+ "type": "literal",
8906
+ "value": "styles"
8907
+ }
8908
+ ]
8909
+ }
8910
+ ],
8911
+ "name": "Omit"
8912
+ },
8913
+ {
8914
+ "type": "reference",
8915
+ "name": "ErrorProp"
8916
+ }
8917
+ ]
8918
+ }
8919
+ },
8716
8920
  {
8717
8921
  "id": 20,
8718
8922
  "name": "ButtonLinkProps",
@@ -8722,7 +8926,7 @@
8722
8926
  "sources": [
8723
8927
  {
8724
8928
  "fileName": "src/Button/index.tsx",
8725
- "line": 56,
8929
+ "line": 121,
8726
8930
  "character": 12
8727
8931
  }
8728
8932
  ],
@@ -8746,7 +8950,7 @@
8746
8950
  "sources": [
8747
8951
  {
8748
8952
  "fileName": "src/Button/index.tsx",
8749
- "line": 63,
8953
+ "line": 128,
8750
8954
  "character": 2
8751
8955
  }
8752
8956
  ],
@@ -8791,7 +8995,7 @@
8791
8995
  "sources": [
8792
8996
  {
8793
8997
  "fileName": "src/Button/index.tsx",
8794
- "line": 62,
8998
+ "line": 127,
8795
8999
  "character": 2
8796
9000
  }
8797
9001
  ],
@@ -8824,7 +9028,7 @@
8824
9028
  "sources": [
8825
9029
  {
8826
9030
  "fileName": "src/Button/index.tsx",
8827
- "line": 57,
9031
+ "line": 122,
8828
9032
  "character": 2
8829
9033
  }
8830
9034
  ],
@@ -8844,7 +9048,7 @@
8844
9048
  "sources": [
8845
9049
  {
8846
9050
  "fileName": "src/Button/index.tsx",
8847
- "line": 60,
9051
+ "line": 125,
8848
9052
  "character": 2
8849
9053
  }
8850
9054
  ],
@@ -8864,7 +9068,7 @@
8864
9068
  "sources": [
8865
9069
  {
8866
9070
  "fileName": "src/Button/index.tsx",
8867
- "line": 64,
9071
+ "line": 129,
8868
9072
  "character": 2
8869
9073
  }
8870
9074
  ],
@@ -8882,7 +9086,7 @@
8882
9086
  "sources": [
8883
9087
  {
8884
9088
  "fileName": "src/Button/index.tsx",
8885
- "line": 58,
9089
+ "line": 123,
8886
9090
  "character": 2
8887
9091
  }
8888
9092
  ],
@@ -8902,7 +9106,7 @@
8902
9106
  "sources": [
8903
9107
  {
8904
9108
  "fileName": "src/Button/index.tsx",
8905
- "line": 66,
9109
+ "line": 131,
8906
9110
  "character": 2
8907
9111
  }
8908
9112
  ],
@@ -8922,7 +9126,7 @@
8922
9126
  "sources": [
8923
9127
  {
8924
9128
  "fileName": "src/Button/index.tsx",
8925
- "line": 61,
9129
+ "line": 126,
8926
9130
  "character": 2
8927
9131
  }
8928
9132
  ],
@@ -8942,7 +9146,7 @@
8942
9146
  "sources": [
8943
9147
  {
8944
9148
  "fileName": "src/Button/index.tsx",
8945
- "line": 67,
9149
+ "line": 132,
8946
9150
  "character": 2
8947
9151
  }
8948
9152
  ],
@@ -8962,7 +9166,7 @@
8962
9166
  "sources": [
8963
9167
  {
8964
9168
  "fileName": "src/Button/index.tsx",
8965
- "line": 65,
9169
+ "line": 130,
8966
9170
  "character": 2
8967
9171
  }
8968
9172
  ],
@@ -8982,7 +9186,7 @@
8982
9186
  "sources": [
8983
9187
  {
8984
9188
  "fileName": "src/Button/index.tsx",
8985
- "line": 59,
9189
+ "line": 124,
8986
9190
  "character": 2
8987
9191
  }
8988
9192
  ],
@@ -9027,7 +9231,7 @@
9027
9231
  "sources": [
9028
9232
  {
9029
9233
  "fileName": "src/Button/index.tsx",
9030
- "line": 56,
9234
+ "line": 121,
9031
9235
  "character": 30
9032
9236
  }
9033
9237
  ]
@@ -9299,7 +9503,9 @@
9299
9503
  "name": "type",
9300
9504
  "kind": 1024,
9301
9505
  "kindString": "Property",
9302
- "flags": {},
9506
+ "flags": {
9507
+ "isOptional": true
9508
+ },
9303
9509
  "sources": [
9304
9510
  {
9305
9511
  "fileName": "src/Button/index.tsx",
@@ -9456,101 +9662,303 @@
9456
9662
  }
9457
9663
  },
9458
9664
  {
9459
- "id": 79,
9460
- "name": "SwitchInputChangeEventHandler",
9665
+ "id": 408,
9666
+ "name": "CreatableSelectInputProps",
9461
9667
  "kind": 4194304,
9462
9668
  "kindString": "Type alias",
9463
9669
  "flags": {},
9464
9670
  "sources": [
9465
9671
  {
9466
- "fileName": "src/SwitchInput/index.tsx",
9467
- "line": 5,
9672
+ "fileName": "src/SelectInput/index.tsx",
9673
+ "line": 176,
9468
9674
  "character": 12
9469
9675
  }
9470
9676
  ],
9471
- "type": {
9472
- "type": "reflection",
9473
- "declaration": {
9474
- "id": 80,
9475
- "name": "__type",
9476
- "kind": 65536,
9477
- "kindString": "Type literal",
9677
+ "typeParameter": [
9678
+ {
9679
+ "id": 409,
9680
+ "name": "Option",
9681
+ "kind": 131072,
9682
+ "kindString": "Type parameter",
9683
+ "flags": {}
9684
+ },
9685
+ {
9686
+ "id": 410,
9687
+ "name": "IsMulti",
9688
+ "kind": 131072,
9689
+ "kindString": "Type parameter",
9478
9690
  "flags": {},
9479
- "sources": [
9480
- {
9481
- "fileName": "src/SwitchInput/index.tsx",
9482
- "line": 5,
9483
- "character": 44
9484
- }
9485
- ],
9486
- "signatures": [
9487
- {
9488
- "id": 81,
9489
- "name": "__type",
9490
- "kind": 4096,
9491
- "kindString": "Call signature",
9492
- "flags": {},
9493
- "parameters": [
9494
- {
9495
- "id": 82,
9496
- "name": "newValue",
9497
- "kind": 32768,
9498
- "kindString": "Parameter",
9499
- "flags": {},
9500
- "type": {
9501
- "type": "intrinsic",
9502
- "name": "boolean"
9503
- }
9504
- },
9505
- {
9506
- "id": 83,
9507
- "name": "event",
9508
- "kind": 32768,
9509
- "kindString": "Parameter",
9510
- "flags": {},
9511
- "type": {
9512
- "type": "union",
9513
- "types": [
9514
- {
9515
- "type": "reference",
9516
- "typeArguments": [
9517
- {
9518
- "type": "reference",
9519
- "name": "HTMLButtonElement"
9520
- }
9521
- ],
9522
- "name": "React.MouseEvent"
9523
- },
9524
- {
9525
- "type": "reference",
9526
- "typeArguments": [
9527
- {
9528
- "type": "reference",
9529
- "name": "HTMLButtonElement"
9530
- }
9531
- ],
9532
- "name": "React.KeyboardEvent"
9533
- }
9534
- ]
9535
- }
9536
- }
9537
- ],
9538
- "type": {
9539
- "type": "intrinsic",
9540
- "name": "void"
9691
+ "type": {
9692
+ "type": "intrinsic",
9693
+ "name": "boolean"
9694
+ }
9695
+ },
9696
+ {
9697
+ "id": 411,
9698
+ "name": "Group",
9699
+ "kind": 131072,
9700
+ "kindString": "Type parameter",
9701
+ "flags": {},
9702
+ "type": {
9703
+ "type": "reference",
9704
+ "typeArguments": [
9705
+ {
9706
+ "type": "reference",
9707
+ "id": 409,
9708
+ "name": "Option"
9541
9709
  }
9542
- }
9543
- ]
9710
+ ],
9711
+ "name": "GroupBase"
9712
+ }
9544
9713
  }
9545
- }
9546
- },
9547
- {
9548
- "id": 347,
9549
- "name": "TextInputChangeEventHandler",
9550
- "kind": 4194304,
9551
- "kindString": "Type alias",
9552
- "flags": {},
9553
- "sources": [
9714
+ ],
9715
+ "type": {
9716
+ "type": "intersection",
9717
+ "types": [
9718
+ {
9719
+ "type": "reference",
9720
+ "typeArguments": [
9721
+ {
9722
+ "type": "reference",
9723
+ "typeArguments": [
9724
+ {
9725
+ "type": "reference",
9726
+ "id": 409,
9727
+ "name": "Option"
9728
+ },
9729
+ {
9730
+ "type": "reference",
9731
+ "id": 410,
9732
+ "name": "IsMulti"
9733
+ },
9734
+ {
9735
+ "type": "reference",
9736
+ "id": 411,
9737
+ "name": "Group"
9738
+ }
9739
+ ],
9740
+ "name": "CreatableProps"
9741
+ },
9742
+ {
9743
+ "type": "union",
9744
+ "types": [
9745
+ {
9746
+ "type": "literal",
9747
+ "value": "theme"
9748
+ },
9749
+ {
9750
+ "type": "literal",
9751
+ "value": "styles"
9752
+ }
9753
+ ]
9754
+ }
9755
+ ],
9756
+ "name": "Omit"
9757
+ },
9758
+ {
9759
+ "type": "reference",
9760
+ "name": "ErrorProp"
9761
+ }
9762
+ ]
9763
+ }
9764
+ },
9765
+ {
9766
+ "id": 400,
9767
+ "name": "SelectInputProps",
9768
+ "kind": 4194304,
9769
+ "kindString": "Type alias",
9770
+ "flags": {},
9771
+ "sources": [
9772
+ {
9773
+ "fileName": "src/SelectInput/index.tsx",
9774
+ "line": 119,
9775
+ "character": 12
9776
+ }
9777
+ ],
9778
+ "typeParameter": [
9779
+ {
9780
+ "id": 401,
9781
+ "name": "Option",
9782
+ "kind": 131072,
9783
+ "kindString": "Type parameter",
9784
+ "flags": {}
9785
+ },
9786
+ {
9787
+ "id": 402,
9788
+ "name": "IsMulti",
9789
+ "kind": 131072,
9790
+ "kindString": "Type parameter",
9791
+ "flags": {},
9792
+ "type": {
9793
+ "type": "intrinsic",
9794
+ "name": "boolean"
9795
+ }
9796
+ },
9797
+ {
9798
+ "id": 403,
9799
+ "name": "Group",
9800
+ "kind": 131072,
9801
+ "kindString": "Type parameter",
9802
+ "flags": {},
9803
+ "type": {
9804
+ "type": "reference",
9805
+ "typeArguments": [
9806
+ {
9807
+ "type": "reference",
9808
+ "id": 401,
9809
+ "name": "Option"
9810
+ }
9811
+ ],
9812
+ "name": "GroupBase"
9813
+ }
9814
+ }
9815
+ ],
9816
+ "type": {
9817
+ "type": "intersection",
9818
+ "types": [
9819
+ {
9820
+ "type": "reference",
9821
+ "typeArguments": [
9822
+ {
9823
+ "type": "reference",
9824
+ "typeArguments": [
9825
+ {
9826
+ "type": "reference",
9827
+ "id": 401,
9828
+ "name": "Option"
9829
+ },
9830
+ {
9831
+ "type": "reference",
9832
+ "id": 402,
9833
+ "name": "IsMulti"
9834
+ },
9835
+ {
9836
+ "type": "reference",
9837
+ "id": 403,
9838
+ "name": "Group"
9839
+ }
9840
+ ],
9841
+ "name": "RawSelectProps"
9842
+ },
9843
+ {
9844
+ "type": "union",
9845
+ "types": [
9846
+ {
9847
+ "type": "literal",
9848
+ "value": "theme"
9849
+ },
9850
+ {
9851
+ "type": "literal",
9852
+ "value": "styles"
9853
+ }
9854
+ ]
9855
+ }
9856
+ ],
9857
+ "name": "Omit"
9858
+ },
9859
+ {
9860
+ "type": "reference",
9861
+ "name": "ErrorProp"
9862
+ }
9863
+ ]
9864
+ }
9865
+ },
9866
+ {
9867
+ "id": 79,
9868
+ "name": "SwitchInputChangeEventHandler",
9869
+ "kind": 4194304,
9870
+ "kindString": "Type alias",
9871
+ "flags": {},
9872
+ "sources": [
9873
+ {
9874
+ "fileName": "src/SwitchInput/index.tsx",
9875
+ "line": 5,
9876
+ "character": 12
9877
+ }
9878
+ ],
9879
+ "type": {
9880
+ "type": "reflection",
9881
+ "declaration": {
9882
+ "id": 80,
9883
+ "name": "__type",
9884
+ "kind": 65536,
9885
+ "kindString": "Type literal",
9886
+ "flags": {},
9887
+ "sources": [
9888
+ {
9889
+ "fileName": "src/SwitchInput/index.tsx",
9890
+ "line": 5,
9891
+ "character": 44
9892
+ }
9893
+ ],
9894
+ "signatures": [
9895
+ {
9896
+ "id": 81,
9897
+ "name": "__type",
9898
+ "kind": 4096,
9899
+ "kindString": "Call signature",
9900
+ "flags": {},
9901
+ "parameters": [
9902
+ {
9903
+ "id": 82,
9904
+ "name": "newValue",
9905
+ "kind": 32768,
9906
+ "kindString": "Parameter",
9907
+ "flags": {},
9908
+ "type": {
9909
+ "type": "intrinsic",
9910
+ "name": "boolean"
9911
+ }
9912
+ },
9913
+ {
9914
+ "id": 83,
9915
+ "name": "event",
9916
+ "kind": 32768,
9917
+ "kindString": "Parameter",
9918
+ "flags": {},
9919
+ "type": {
9920
+ "type": "union",
9921
+ "types": [
9922
+ {
9923
+ "type": "reference",
9924
+ "typeArguments": [
9925
+ {
9926
+ "type": "reference",
9927
+ "name": "HTMLButtonElement"
9928
+ }
9929
+ ],
9930
+ "name": "React.MouseEvent"
9931
+ },
9932
+ {
9933
+ "type": "reference",
9934
+ "typeArguments": [
9935
+ {
9936
+ "type": "reference",
9937
+ "name": "HTMLButtonElement"
9938
+ }
9939
+ ],
9940
+ "name": "React.KeyboardEvent"
9941
+ }
9942
+ ]
9943
+ }
9944
+ }
9945
+ ],
9946
+ "type": {
9947
+ "type": "intrinsic",
9948
+ "name": "void"
9949
+ }
9950
+ }
9951
+ ]
9952
+ }
9953
+ }
9954
+ },
9955
+ {
9956
+ "id": 347,
9957
+ "name": "TextInputChangeEventHandler",
9958
+ "kind": 4194304,
9959
+ "kindString": "Type alias",
9960
+ "flags": {},
9961
+ "sources": [
9554
9962
  {
9555
9963
  "fileName": "src/TextInput/index.tsx",
9556
9964
  "line": 5,
@@ -9915,36 +10323,95 @@
9915
10323
  }
9916
10324
  },
9917
10325
  {
9918
- "id": 1,
9919
- "name": "Button",
10326
+ "id": 434,
10327
+ "name": "AsyncCreatableSelectField",
9920
10328
  "kind": 64,
9921
10329
  "kindString": "Function",
9922
10330
  "flags": {},
9923
10331
  "sources": [
9924
10332
  {
9925
- "fileName": "src/Button/index.tsx",
9926
- "line": 19,
10333
+ "fileName": "src/SelectField/index.tsx",
10334
+ "line": 207,
9927
10335
  "character": 16
9928
10336
  }
9929
10337
  ],
9930
10338
  "signatures": [
9931
10339
  {
9932
- "id": 2,
9933
- "name": "Button",
10340
+ "id": 435,
10341
+ "name": "AsyncCreatableSelectField",
9934
10342
  "kind": 4096,
9935
10343
  "kindString": "Call signature",
9936
10344
  "flags": {},
10345
+ "typeParameter": [
10346
+ {
10347
+ "id": 436,
10348
+ "name": "Option",
10349
+ "kind": 131072,
10350
+ "kindString": "Type parameter",
10351
+ "flags": {}
10352
+ },
10353
+ {
10354
+ "id": 437,
10355
+ "name": "IsMulti",
10356
+ "kind": 131072,
10357
+ "kindString": "Type parameter",
10358
+ "flags": {},
10359
+ "type": {
10360
+ "type": "intrinsic",
10361
+ "name": "boolean"
10362
+ }
10363
+ },
10364
+ {
10365
+ "id": 438,
10366
+ "name": "Group",
10367
+ "kind": 131072,
10368
+ "kindString": "Type parameter",
10369
+ "flags": {},
10370
+ "type": {
10371
+ "type": "reference",
10372
+ "typeArguments": [
10373
+ {
10374
+ "type": "reference",
10375
+ "id": 436,
10376
+ "name": "Option"
10377
+ },
10378
+ {
10379
+ "type": "reference",
10380
+ "id": 438,
10381
+ "name": "Group"
10382
+ }
10383
+ ],
10384
+ "name": "GroupBase"
10385
+ }
10386
+ }
10387
+ ],
9937
10388
  "parameters": [
9938
10389
  {
9939
- "id": 3,
10390
+ "id": 439,
9940
10391
  "name": "__namedParameters",
9941
10392
  "kind": 32768,
9942
10393
  "kindString": "Parameter",
9943
10394
  "flags": {},
9944
10395
  "type": {
9945
10396
  "type": "reference",
9946
- "id": 7,
9947
- "name": "ButtonProps"
10397
+ "typeArguments": [
10398
+ {
10399
+ "type": "reference",
10400
+ "id": 436,
10401
+ "name": "Option"
10402
+ },
10403
+ {
10404
+ "type": "reference",
10405
+ "id": 437,
10406
+ "name": "IsMulti"
10407
+ },
10408
+ {
10409
+ "type": "reference",
10410
+ "id": 438,
10411
+ "name": "Group"
10412
+ }
10413
+ ],
10414
+ "name": "AsyncCreatableSelectFieldProps"
9948
10415
  }
9949
10416
  }
9950
10417
  ],
@@ -9956,36 +10423,437 @@
9956
10423
  ]
9957
10424
  },
9958
10425
  {
9959
- "id": 4,
9960
- "name": "ButtonLink",
10426
+ "id": 394,
10427
+ "name": "AsyncCreatableSelectInput",
9961
10428
  "kind": 64,
9962
10429
  "kindString": "Function",
9963
10430
  "flags": {},
9964
10431
  "sources": [
9965
10432
  {
9966
- "fileName": "src/Button/index.tsx",
9967
- "line": 70,
10433
+ "fileName": "src/SelectInput/index.tsx",
10434
+ "line": 212,
9968
10435
  "character": 16
9969
10436
  }
9970
10437
  ],
9971
10438
  "signatures": [
9972
10439
  {
9973
- "id": 5,
9974
- "name": "ButtonLink",
10440
+ "id": 395,
10441
+ "name": "AsyncCreatableSelectInput",
9975
10442
  "kind": 4096,
9976
10443
  "kindString": "Call signature",
9977
10444
  "flags": {},
9978
- "parameters": [
10445
+ "typeParameter": [
9979
10446
  {
9980
- "id": 6,
9981
- "name": "__namedParameters",
9982
- "kind": 32768,
9983
- "kindString": "Parameter",
10447
+ "id": 396,
10448
+ "name": "Option",
10449
+ "kind": 131072,
10450
+ "kindString": "Type parameter",
9984
10451
  "flags": {},
9985
- "type": {
9986
- "type": "reference",
9987
- "id": 20,
9988
- "name": "ButtonLinkProps"
10452
+ "default": {
10453
+ "type": "intrinsic",
10454
+ "name": "unknown"
10455
+ }
10456
+ },
10457
+ {
10458
+ "id": 397,
10459
+ "name": "IsMulti",
10460
+ "kind": 131072,
10461
+ "kindString": "Type parameter",
10462
+ "flags": {},
10463
+ "type": {
10464
+ "type": "intrinsic",
10465
+ "name": "boolean"
10466
+ },
10467
+ "default": {
10468
+ "type": "literal",
10469
+ "value": false
10470
+ }
10471
+ },
10472
+ {
10473
+ "id": 398,
10474
+ "name": "Group",
10475
+ "kind": 131072,
10476
+ "kindString": "Type parameter",
10477
+ "flags": {},
10478
+ "type": {
10479
+ "type": "reference",
10480
+ "typeArguments": [
10481
+ {
10482
+ "type": "reference",
10483
+ "id": 396,
10484
+ "name": "Option"
10485
+ },
10486
+ {
10487
+ "type": "reference",
10488
+ "id": 398,
10489
+ "name": "Group"
10490
+ }
10491
+ ],
10492
+ "name": "GroupBase"
10493
+ },
10494
+ "default": {
10495
+ "type": "reference",
10496
+ "typeArguments": [
10497
+ {
10498
+ "type": "reference",
10499
+ "id": 396,
10500
+ "name": "Option"
10501
+ }
10502
+ ],
10503
+ "name": "GroupBase"
10504
+ }
10505
+ }
10506
+ ],
10507
+ "parameters": [
10508
+ {
10509
+ "id": 399,
10510
+ "name": "__namedParameters",
10511
+ "kind": 32768,
10512
+ "kindString": "Parameter",
10513
+ "flags": {},
10514
+ "type": {
10515
+ "type": "reference",
10516
+ "id": 412,
10517
+ "typeArguments": [
10518
+ {
10519
+ "type": "reference",
10520
+ "id": 396,
10521
+ "name": "Option"
10522
+ },
10523
+ {
10524
+ "type": "reference",
10525
+ "id": 397,
10526
+ "name": "IsMulti"
10527
+ },
10528
+ {
10529
+ "type": "reference",
10530
+ "id": 398,
10531
+ "name": "Group"
10532
+ }
10533
+ ],
10534
+ "name": "AsyncCreatableSelectInputProps"
10535
+ }
10536
+ }
10537
+ ],
10538
+ "type": {
10539
+ "type": "reference",
10540
+ "name": "JSX.Element"
10541
+ }
10542
+ }
10543
+ ]
10544
+ },
10545
+ {
10546
+ "id": 422,
10547
+ "name": "AsyncSelectField",
10548
+ "kind": 64,
10549
+ "kindString": "Function",
10550
+ "flags": {},
10551
+ "sources": [
10552
+ {
10553
+ "fileName": "src/SelectField/index.tsx",
10554
+ "line": 93,
10555
+ "character": 16
10556
+ }
10557
+ ],
10558
+ "signatures": [
10559
+ {
10560
+ "id": 423,
10561
+ "name": "AsyncSelectField",
10562
+ "kind": 4096,
10563
+ "kindString": "Call signature",
10564
+ "flags": {},
10565
+ "typeParameter": [
10566
+ {
10567
+ "id": 424,
10568
+ "name": "Option",
10569
+ "kind": 131072,
10570
+ "kindString": "Type parameter",
10571
+ "flags": {}
10572
+ },
10573
+ {
10574
+ "id": 425,
10575
+ "name": "IsMulti",
10576
+ "kind": 131072,
10577
+ "kindString": "Type parameter",
10578
+ "flags": {},
10579
+ "type": {
10580
+ "type": "intrinsic",
10581
+ "name": "boolean"
10582
+ }
10583
+ },
10584
+ {
10585
+ "id": 426,
10586
+ "name": "Group",
10587
+ "kind": 131072,
10588
+ "kindString": "Type parameter",
10589
+ "flags": {},
10590
+ "type": {
10591
+ "type": "reference",
10592
+ "typeArguments": [
10593
+ {
10594
+ "type": "reference",
10595
+ "id": 424,
10596
+ "name": "Option"
10597
+ },
10598
+ {
10599
+ "type": "reference",
10600
+ "id": 426,
10601
+ "name": "Group"
10602
+ }
10603
+ ],
10604
+ "name": "GroupBase"
10605
+ }
10606
+ }
10607
+ ],
10608
+ "parameters": [
10609
+ {
10610
+ "id": 427,
10611
+ "name": "__namedParameters",
10612
+ "kind": 32768,
10613
+ "kindString": "Parameter",
10614
+ "flags": {},
10615
+ "type": {
10616
+ "type": "reference",
10617
+ "typeArguments": [
10618
+ {
10619
+ "type": "reference",
10620
+ "id": 424,
10621
+ "name": "Option"
10622
+ },
10623
+ {
10624
+ "type": "reference",
10625
+ "id": 425,
10626
+ "name": "IsMulti"
10627
+ },
10628
+ {
10629
+ "type": "reference",
10630
+ "id": 426,
10631
+ "name": "Group"
10632
+ }
10633
+ ],
10634
+ "name": "AsyncSelectFieldProps"
10635
+ }
10636
+ }
10637
+ ],
10638
+ "type": {
10639
+ "type": "reference",
10640
+ "name": "JSX.Element"
10641
+ }
10642
+ }
10643
+ ]
10644
+ },
10645
+ {
10646
+ "id": 382,
10647
+ "name": "AsyncSelectInput",
10648
+ "kind": 64,
10649
+ "kindString": "Function",
10650
+ "flags": {},
10651
+ "sources": [
10652
+ {
10653
+ "fileName": "src/SelectInput/index.tsx",
10654
+ "line": 154,
10655
+ "character": 16
10656
+ }
10657
+ ],
10658
+ "signatures": [
10659
+ {
10660
+ "id": 383,
10661
+ "name": "AsyncSelectInput",
10662
+ "kind": 4096,
10663
+ "kindString": "Call signature",
10664
+ "flags": {},
10665
+ "typeParameter": [
10666
+ {
10667
+ "id": 384,
10668
+ "name": "Option",
10669
+ "kind": 131072,
10670
+ "kindString": "Type parameter",
10671
+ "flags": {},
10672
+ "default": {
10673
+ "type": "intrinsic",
10674
+ "name": "unknown"
10675
+ }
10676
+ },
10677
+ {
10678
+ "id": 385,
10679
+ "name": "IsMulti",
10680
+ "kind": 131072,
10681
+ "kindString": "Type parameter",
10682
+ "flags": {},
10683
+ "type": {
10684
+ "type": "intrinsic",
10685
+ "name": "boolean"
10686
+ },
10687
+ "default": {
10688
+ "type": "literal",
10689
+ "value": false
10690
+ }
10691
+ },
10692
+ {
10693
+ "id": 386,
10694
+ "name": "Group",
10695
+ "kind": 131072,
10696
+ "kindString": "Type parameter",
10697
+ "flags": {},
10698
+ "type": {
10699
+ "type": "reference",
10700
+ "typeArguments": [
10701
+ {
10702
+ "type": "reference",
10703
+ "id": 384,
10704
+ "name": "Option"
10705
+ },
10706
+ {
10707
+ "type": "reference",
10708
+ "id": 386,
10709
+ "name": "Group"
10710
+ }
10711
+ ],
10712
+ "name": "GroupBase"
10713
+ },
10714
+ "default": {
10715
+ "type": "reference",
10716
+ "typeArguments": [
10717
+ {
10718
+ "type": "reference",
10719
+ "id": 384,
10720
+ "name": "Option"
10721
+ }
10722
+ ],
10723
+ "name": "GroupBase"
10724
+ }
10725
+ }
10726
+ ],
10727
+ "parameters": [
10728
+ {
10729
+ "id": 387,
10730
+ "name": "__namedParameters",
10731
+ "kind": 32768,
10732
+ "kindString": "Parameter",
10733
+ "flags": {},
10734
+ "type": {
10735
+ "type": "reference",
10736
+ "id": 404,
10737
+ "typeArguments": [
10738
+ {
10739
+ "type": "reference",
10740
+ "id": 384,
10741
+ "name": "Option"
10742
+ },
10743
+ {
10744
+ "type": "reference",
10745
+ "id": 385,
10746
+ "name": "IsMulti"
10747
+ },
10748
+ {
10749
+ "type": "reference",
10750
+ "id": 386,
10751
+ "name": "Group"
10752
+ }
10753
+ ],
10754
+ "name": "AsyncSelectInputProps"
10755
+ }
10756
+ }
10757
+ ],
10758
+ "type": {
10759
+ "type": "reference",
10760
+ "name": "JSX.Element"
10761
+ }
10762
+ }
10763
+ ]
10764
+ },
10765
+ {
10766
+ "id": 1,
10767
+ "name": "Button",
10768
+ "kind": 64,
10769
+ "kindString": "Function",
10770
+ "flags": {},
10771
+ "sources": [
10772
+ {
10773
+ "fileName": "src/Button/index.tsx",
10774
+ "line": 80,
10775
+ "character": 16
10776
+ }
10777
+ ],
10778
+ "signatures": [
10779
+ {
10780
+ "id": 2,
10781
+ "name": "Button",
10782
+ "kind": 4096,
10783
+ "kindString": "Call signature",
10784
+ "flags": {},
10785
+ "comment": {
10786
+ "tags": [
10787
+ {
10788
+ "tag": "example",
10789
+ "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"
10790
+ },
10791
+ {
10792
+ "tag": "example",
10793
+ "text": "Full-width\n\n```js\n<Canvas ctx={ctx}>\n <Button fullWidth>Submit</Button>\n</Canvas>;\n```\n"
10794
+ },
10795
+ {
10796
+ "tag": "example",
10797
+ "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"
10798
+ },
10799
+ {
10800
+ "tag": "example",
10801
+ "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"
10802
+ }
10803
+ ]
10804
+ },
10805
+ "parameters": [
10806
+ {
10807
+ "id": 3,
10808
+ "name": "__namedParameters",
10809
+ "kind": 32768,
10810
+ "kindString": "Parameter",
10811
+ "flags": {},
10812
+ "type": {
10813
+ "type": "reference",
10814
+ "id": 7,
10815
+ "name": "ButtonProps"
10816
+ }
10817
+ }
10818
+ ],
10819
+ "type": {
10820
+ "type": "reference",
10821
+ "name": "JSX.Element"
10822
+ }
10823
+ }
10824
+ ]
10825
+ },
10826
+ {
10827
+ "id": 4,
10828
+ "name": "ButtonLink",
10829
+ "kind": 64,
10830
+ "kindString": "Function",
10831
+ "flags": {},
10832
+ "sources": [
10833
+ {
10834
+ "fileName": "src/Button/index.tsx",
10835
+ "line": 135,
10836
+ "character": 16
10837
+ }
10838
+ ],
10839
+ "signatures": [
10840
+ {
10841
+ "id": 5,
10842
+ "name": "ButtonLink",
10843
+ "kind": 4096,
10844
+ "kindString": "Call signature",
10845
+ "flags": {},
10846
+ "parameters": [
10847
+ {
10848
+ "id": 6,
10849
+ "name": "__namedParameters",
10850
+ "kind": 32768,
10851
+ "kindString": "Parameter",
10852
+ "flags": {},
10853
+ "type": {
10854
+ "type": "reference",
10855
+ "id": 20,
10856
+ "name": "ButtonLinkProps"
9989
10857
  }
9990
10858
  }
9991
10859
  ],
@@ -10005,7 +10873,7 @@
10005
10873
  "sources": [
10006
10874
  {
10007
10875
  "fileName": "src/Canvas/index.tsx",
10008
- "line": 18,
10876
+ "line": 497,
10009
10877
  "character": 16
10010
10878
  }
10011
10879
  ],
@@ -10016,6 +10884,22 @@
10016
10884
  "kind": 4096,
10017
10885
  "kindString": "Call signature",
10018
10886
  "flags": {},
10887
+ "comment": {
10888
+ "tags": [
10889
+ {
10890
+ "tag": "example",
10891
+ "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"
10892
+ },
10893
+ {
10894
+ "tag": "example",
10895
+ "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"
10896
+ },
10897
+ {
10898
+ "tag": "example",
10899
+ "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"
10900
+ }
10901
+ ]
10902
+ },
10019
10903
  "parameters": [
10020
10904
  {
10021
10905
  "id": 35,
@@ -10147,6 +11031,226 @@
10147
11031
  }
10148
11032
  ]
10149
11033
  },
11034
+ {
11035
+ "id": 428,
11036
+ "name": "CreatableSelectField",
11037
+ "kind": 64,
11038
+ "kindString": "Function",
11039
+ "flags": {},
11040
+ "sources": [
11041
+ {
11042
+ "fileName": "src/SelectField/index.tsx",
11043
+ "line": 150,
11044
+ "character": 16
11045
+ }
11046
+ ],
11047
+ "signatures": [
11048
+ {
11049
+ "id": 429,
11050
+ "name": "CreatableSelectField",
11051
+ "kind": 4096,
11052
+ "kindString": "Call signature",
11053
+ "flags": {},
11054
+ "typeParameter": [
11055
+ {
11056
+ "id": 430,
11057
+ "name": "Option",
11058
+ "kind": 131072,
11059
+ "kindString": "Type parameter",
11060
+ "flags": {}
11061
+ },
11062
+ {
11063
+ "id": 431,
11064
+ "name": "IsMulti",
11065
+ "kind": 131072,
11066
+ "kindString": "Type parameter",
11067
+ "flags": {},
11068
+ "type": {
11069
+ "type": "intrinsic",
11070
+ "name": "boolean"
11071
+ }
11072
+ },
11073
+ {
11074
+ "id": 432,
11075
+ "name": "Group",
11076
+ "kind": 131072,
11077
+ "kindString": "Type parameter",
11078
+ "flags": {},
11079
+ "type": {
11080
+ "type": "reference",
11081
+ "typeArguments": [
11082
+ {
11083
+ "type": "reference",
11084
+ "id": 430,
11085
+ "name": "Option"
11086
+ },
11087
+ {
11088
+ "type": "reference",
11089
+ "id": 432,
11090
+ "name": "Group"
11091
+ }
11092
+ ],
11093
+ "name": "GroupBase"
11094
+ }
11095
+ }
11096
+ ],
11097
+ "parameters": [
11098
+ {
11099
+ "id": 433,
11100
+ "name": "__namedParameters",
11101
+ "kind": 32768,
11102
+ "kindString": "Parameter",
11103
+ "flags": {},
11104
+ "type": {
11105
+ "type": "reference",
11106
+ "typeArguments": [
11107
+ {
11108
+ "type": "reference",
11109
+ "id": 430,
11110
+ "name": "Option"
11111
+ },
11112
+ {
11113
+ "type": "reference",
11114
+ "id": 431,
11115
+ "name": "IsMulti"
11116
+ },
11117
+ {
11118
+ "type": "reference",
11119
+ "id": 432,
11120
+ "name": "Group"
11121
+ }
11122
+ ],
11123
+ "name": "CreatableSelectFieldProps"
11124
+ }
11125
+ }
11126
+ ],
11127
+ "type": {
11128
+ "type": "reference",
11129
+ "name": "JSX.Element"
11130
+ }
11131
+ }
11132
+ ]
11133
+ },
11134
+ {
11135
+ "id": 388,
11136
+ "name": "CreatableSelectInput",
11137
+ "kind": 64,
11138
+ "kindString": "Function",
11139
+ "flags": {},
11140
+ "sources": [
11141
+ {
11142
+ "fileName": "src/SelectInput/index.tsx",
11143
+ "line": 183,
11144
+ "character": 16
11145
+ }
11146
+ ],
11147
+ "signatures": [
11148
+ {
11149
+ "id": 389,
11150
+ "name": "CreatableSelectInput",
11151
+ "kind": 4096,
11152
+ "kindString": "Call signature",
11153
+ "flags": {},
11154
+ "typeParameter": [
11155
+ {
11156
+ "id": 390,
11157
+ "name": "Option",
11158
+ "kind": 131072,
11159
+ "kindString": "Type parameter",
11160
+ "flags": {},
11161
+ "default": {
11162
+ "type": "intrinsic",
11163
+ "name": "unknown"
11164
+ }
11165
+ },
11166
+ {
11167
+ "id": 391,
11168
+ "name": "IsMulti",
11169
+ "kind": 131072,
11170
+ "kindString": "Type parameter",
11171
+ "flags": {},
11172
+ "type": {
11173
+ "type": "intrinsic",
11174
+ "name": "boolean"
11175
+ },
11176
+ "default": {
11177
+ "type": "literal",
11178
+ "value": false
11179
+ }
11180
+ },
11181
+ {
11182
+ "id": 392,
11183
+ "name": "Group",
11184
+ "kind": 131072,
11185
+ "kindString": "Type parameter",
11186
+ "flags": {},
11187
+ "type": {
11188
+ "type": "reference",
11189
+ "typeArguments": [
11190
+ {
11191
+ "type": "reference",
11192
+ "id": 390,
11193
+ "name": "Option"
11194
+ },
11195
+ {
11196
+ "type": "reference",
11197
+ "id": 392,
11198
+ "name": "Group"
11199
+ }
11200
+ ],
11201
+ "name": "GroupBase"
11202
+ },
11203
+ "default": {
11204
+ "type": "reference",
11205
+ "typeArguments": [
11206
+ {
11207
+ "type": "reference",
11208
+ "id": 390,
11209
+ "name": "Option"
11210
+ }
11211
+ ],
11212
+ "name": "GroupBase"
11213
+ }
11214
+ }
11215
+ ],
11216
+ "parameters": [
11217
+ {
11218
+ "id": 393,
11219
+ "name": "__namedParameters",
11220
+ "kind": 32768,
11221
+ "kindString": "Parameter",
11222
+ "flags": {},
11223
+ "type": {
11224
+ "type": "reference",
11225
+ "id": 408,
11226
+ "typeArguments": [
11227
+ {
11228
+ "type": "reference",
11229
+ "id": 390,
11230
+ "name": "Option"
11231
+ },
11232
+ {
11233
+ "type": "reference",
11234
+ "id": 391,
11235
+ "name": "IsMulti"
11236
+ },
11237
+ {
11238
+ "type": "reference",
11239
+ "id": 392,
11240
+ "name": "Group"
11241
+ }
11242
+ ],
11243
+ "name": "CreatableSelectInputProps"
11244
+ }
11245
+ }
11246
+ ],
11247
+ "type": {
11248
+ "type": "reference",
11249
+ "name": "JSX.Element"
11250
+ }
11251
+ }
11252
+ ]
11253
+ },
10150
11254
  {
10151
11255
  "id": 41,
10152
11256
  "name": "FieldError",
@@ -10279,7 +11383,7 @@
10279
11383
  "sources": [
10280
11384
  {
10281
11385
  "fileName": "src/Form/index.tsx",
10282
- "line": 20,
11386
+ "line": 92,
10283
11387
  "character": 13
10284
11388
  }
10285
11389
  ],
@@ -10290,6 +11394,14 @@
10290
11394
  "kind": 4096,
10291
11395
  "kindString": "Call signature",
10292
11396
  "flags": {},
11397
+ "comment": {
11398
+ "tags": [
11399
+ {
11400
+ "tag": "example",
11401
+ "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"
11402
+ }
11403
+ ]
11404
+ },
10293
11405
  "parameters": [
10294
11406
  {
10295
11407
  "id": 62,
@@ -10354,6 +11466,282 @@
10354
11466
  }
10355
11467
  ]
10356
11468
  },
11469
+ {
11470
+ "id": 373,
11471
+ "name": "Section",
11472
+ "kind": 64,
11473
+ "kindString": "Function",
11474
+ "flags": {},
11475
+ "sources": [
11476
+ {
11477
+ "fileName": "src/Section/index.tsx",
11478
+ "line": 63,
11479
+ "character": 16
11480
+ }
11481
+ ],
11482
+ "signatures": [
11483
+ {
11484
+ "id": 374,
11485
+ "name": "Section",
11486
+ "kind": 4096,
11487
+ "kindString": "Call signature",
11488
+ "flags": {},
11489
+ "comment": {
11490
+ "tags": [
11491
+ {
11492
+ "tag": "example",
11493
+ "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"
11494
+ },
11495
+ {
11496
+ "tag": "example",
11497
+ "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"
11498
+ },
11499
+ {
11500
+ "tag": "example",
11501
+ "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"
11502
+ }
11503
+ ]
11504
+ },
11505
+ "parameters": [
11506
+ {
11507
+ "id": 375,
11508
+ "name": "__namedParameters",
11509
+ "kind": 32768,
11510
+ "kindString": "Parameter",
11511
+ "flags": {},
11512
+ "type": {
11513
+ "type": "reference",
11514
+ "name": "SectionProps"
11515
+ }
11516
+ }
11517
+ ],
11518
+ "type": {
11519
+ "type": "reference",
11520
+ "name": "JSX.Element"
11521
+ }
11522
+ }
11523
+ ]
11524
+ },
11525
+ {
11526
+ "id": 416,
11527
+ "name": "SelectField",
11528
+ "kind": 64,
11529
+ "kindString": "Function",
11530
+ "flags": {},
11531
+ "sources": [
11532
+ {
11533
+ "fileName": "src/SelectField/index.tsx",
11534
+ "line": 36,
11535
+ "character": 16
11536
+ }
11537
+ ],
11538
+ "signatures": [
11539
+ {
11540
+ "id": 417,
11541
+ "name": "SelectField",
11542
+ "kind": 4096,
11543
+ "kindString": "Call signature",
11544
+ "flags": {},
11545
+ "typeParameter": [
11546
+ {
11547
+ "id": 418,
11548
+ "name": "Option",
11549
+ "kind": 131072,
11550
+ "kindString": "Type parameter",
11551
+ "flags": {}
11552
+ },
11553
+ {
11554
+ "id": 419,
11555
+ "name": "IsMulti",
11556
+ "kind": 131072,
11557
+ "kindString": "Type parameter",
11558
+ "flags": {},
11559
+ "type": {
11560
+ "type": "intrinsic",
11561
+ "name": "boolean"
11562
+ }
11563
+ },
11564
+ {
11565
+ "id": 420,
11566
+ "name": "Group",
11567
+ "kind": 131072,
11568
+ "kindString": "Type parameter",
11569
+ "flags": {},
11570
+ "type": {
11571
+ "type": "reference",
11572
+ "typeArguments": [
11573
+ {
11574
+ "type": "reference",
11575
+ "id": 418,
11576
+ "name": "Option"
11577
+ },
11578
+ {
11579
+ "type": "reference",
11580
+ "id": 420,
11581
+ "name": "Group"
11582
+ }
11583
+ ],
11584
+ "name": "GroupBase"
11585
+ }
11586
+ }
11587
+ ],
11588
+ "parameters": [
11589
+ {
11590
+ "id": 421,
11591
+ "name": "__namedParameters",
11592
+ "kind": 32768,
11593
+ "kindString": "Parameter",
11594
+ "flags": {},
11595
+ "type": {
11596
+ "type": "reference",
11597
+ "typeArguments": [
11598
+ {
11599
+ "type": "reference",
11600
+ "id": 418,
11601
+ "name": "Option"
11602
+ },
11603
+ {
11604
+ "type": "reference",
11605
+ "id": 419,
11606
+ "name": "IsMulti"
11607
+ },
11608
+ {
11609
+ "type": "reference",
11610
+ "id": 420,
11611
+ "name": "Group"
11612
+ }
11613
+ ],
11614
+ "name": "SelectFieldProps"
11615
+ }
11616
+ }
11617
+ ],
11618
+ "type": {
11619
+ "type": "reference",
11620
+ "name": "JSX.Element"
11621
+ }
11622
+ }
11623
+ ]
11624
+ },
11625
+ {
11626
+ "id": 376,
11627
+ "name": "SelectInput",
11628
+ "kind": 64,
11629
+ "kindString": "Function",
11630
+ "flags": {},
11631
+ "sources": [
11632
+ {
11633
+ "fileName": "src/SelectInput/index.tsx",
11634
+ "line": 126,
11635
+ "character": 16
11636
+ }
11637
+ ],
11638
+ "signatures": [
11639
+ {
11640
+ "id": 377,
11641
+ "name": "SelectInput",
11642
+ "kind": 4096,
11643
+ "kindString": "Call signature",
11644
+ "flags": {},
11645
+ "typeParameter": [
11646
+ {
11647
+ "id": 378,
11648
+ "name": "Option",
11649
+ "kind": 131072,
11650
+ "kindString": "Type parameter",
11651
+ "flags": {},
11652
+ "default": {
11653
+ "type": "intrinsic",
11654
+ "name": "unknown"
11655
+ }
11656
+ },
11657
+ {
11658
+ "id": 379,
11659
+ "name": "IsMulti",
11660
+ "kind": 131072,
11661
+ "kindString": "Type parameter",
11662
+ "flags": {},
11663
+ "type": {
11664
+ "type": "intrinsic",
11665
+ "name": "boolean"
11666
+ },
11667
+ "default": {
11668
+ "type": "literal",
11669
+ "value": false
11670
+ }
11671
+ },
11672
+ {
11673
+ "id": 380,
11674
+ "name": "Group",
11675
+ "kind": 131072,
11676
+ "kindString": "Type parameter",
11677
+ "flags": {},
11678
+ "type": {
11679
+ "type": "reference",
11680
+ "typeArguments": [
11681
+ {
11682
+ "type": "reference",
11683
+ "id": 378,
11684
+ "name": "Option"
11685
+ },
11686
+ {
11687
+ "type": "reference",
11688
+ "id": 380,
11689
+ "name": "Group"
11690
+ }
11691
+ ],
11692
+ "name": "GroupBase"
11693
+ },
11694
+ "default": {
11695
+ "type": "reference",
11696
+ "typeArguments": [
11697
+ {
11698
+ "type": "reference",
11699
+ "id": 378,
11700
+ "name": "Option"
11701
+ }
11702
+ ],
11703
+ "name": "GroupBase"
11704
+ }
11705
+ }
11706
+ ],
11707
+ "parameters": [
11708
+ {
11709
+ "id": 381,
11710
+ "name": "__namedParameters",
11711
+ "kind": 32768,
11712
+ "kindString": "Parameter",
11713
+ "flags": {},
11714
+ "type": {
11715
+ "type": "reference",
11716
+ "id": 400,
11717
+ "typeArguments": [
11718
+ {
11719
+ "type": "reference",
11720
+ "id": 378,
11721
+ "name": "Option"
11722
+ },
11723
+ {
11724
+ "type": "reference",
11725
+ "id": 379,
11726
+ "name": "IsMulti"
11727
+ },
11728
+ {
11729
+ "type": "reference",
11730
+ "id": 380,
11731
+ "name": "Group"
11732
+ }
11733
+ ],
11734
+ "name": "SelectInputProps"
11735
+ }
11736
+ }
11737
+ ],
11738
+ "type": {
11739
+ "type": "reference",
11740
+ "name": "JSX.Element"
11741
+ }
11742
+ }
11743
+ ]
11744
+ },
10357
11745
  {
10358
11746
  "id": 73,
10359
11747
  "name": "SwitchField",
@@ -10403,7 +11791,7 @@
10403
11791
  "sources": [
10404
11792
  {
10405
11793
  "fileName": "src/SwitchInput/index.tsx",
10406
- "line": 19,
11794
+ "line": 21,
10407
11795
  "character": 16
10408
11796
  }
10409
11797
  ],
@@ -10534,9 +11922,13 @@
10534
11922
  "title": "Type aliases",
10535
11923
  "kind": 4194304,
10536
11924
  "children": [
11925
+ 412,
11926
+ 404,
10537
11927
  20,
10538
11928
  7,
10539
11929
  36,
11930
+ 408,
11931
+ 400,
10540
11932
  79,
10541
11933
  347,
10542
11934
  352
@@ -10546,15 +11938,24 @@
10546
11938
  "title": "Functions",
10547
11939
  "kind": 64,
10548
11940
  "children": [
11941
+ 434,
11942
+ 394,
11943
+ 422,
11944
+ 382,
10549
11945
  1,
10550
11946
  4,
10551
11947
  33,
10552
11948
  366,
11949
+ 428,
11950
+ 388,
10553
11951
  41,
10554
11952
  44,
10555
11953
  51,
10556
11954
  60,
10557
11955
  70,
11956
+ 373,
11957
+ 416,
11958
+ 376,
10558
11959
  73,
10559
11960
  76,
10560
11961
  344,