@hero-design/rn 8.45.0-test.0 → 8.45.1

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 (37) hide show
  1. package/.turbo/turbo-build.log +2 -2
  2. package/CHANGELOG.md +23 -2
  3. package/es/index.js +764 -578
  4. package/lib/index.js +764 -578
  5. package/package.json +6 -6
  6. package/src/components/Accordion/index.tsx +1 -1
  7. package/src/components/Avatar/AvatarStack/StyledAvatarStack.tsx +63 -9
  8. package/src/components/Avatar/AvatarStack/__tests__/StyledAvatarStack.spec.tsx +71 -9
  9. package/src/components/Avatar/AvatarStack/__tests__/__snapshots__/StyledAvatarStack.spec.tsx.snap +271 -2
  10. package/src/components/Avatar/AvatarStack/__tests__/__snapshots__/index.spec.tsx.snap +2156 -7
  11. package/src/components/Avatar/AvatarStack/__tests__/index.spec.tsx +140 -6
  12. package/src/components/Avatar/AvatarStack/index.tsx +94 -9
  13. package/src/components/Carousel/index.tsx +18 -11
  14. package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap +108 -57
  15. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap +36 -19
  16. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap +36 -19
  17. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap +36 -19
  18. package/src/components/RichTextEditor/RichTextEditor.tsx +89 -38
  19. package/src/components/RichTextEditor/__tests__/__snapshots__/RichTextEditor.spec.tsx.snap +130 -102
  20. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +247 -146
  21. package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +211 -127
  22. package/src/components/TextInput/StyledTextInput.tsx +9 -31
  23. package/src/components/TextInput/__tests__/StyledTextInput.spec.tsx +0 -44
  24. package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap +21 -638
  25. package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap +1159 -833
  26. package/src/components/TextInput/__tests__/index.spec.tsx +2 -2
  27. package/src/components/TextInput/index.tsx +128 -57
  28. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap +72 -38
  29. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap +72 -38
  30. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +2 -2
  31. package/src/theme/components/textInput.ts +2 -2
  32. package/types/components/Accordion/index.d.ts +1 -1
  33. package/types/components/Avatar/AvatarStack/StyledAvatarStack.d.ts +13 -0
  34. package/types/components/Avatar/AvatarStack/index.d.ts +14 -2
  35. package/types/components/Avatar/index.d.ts +1 -1
  36. package/types/components/TextInput/StyledTextInput.d.ts +4 -24
  37. package/types/components/TextInput/index.d.ts +1 -0
package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap CHANGED
@@ -21,6 +21,7 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
21
21
  }
22
22
  >
23
23
  <View
24
+ onLayout={[Function]}
24
25
  style={
25
26
  [
26
27
  {
@@ -60,24 +61,51 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
60
61
  themeState="filled"
61
62
  />
62
63
  <View
64
+ onLayout={[Function]}
65
+ >
66
+ <HeroIcon
67
+ name="dollar-sign"
68
+ style={
69
+ [
70
+ {
71
+ "color": "#001f23",
72
+ "fontSize": 16,
73
+ },
74
+ undefined,
75
+ ]
76
+ }
77
+ testID="input-prefix"
78
+ themeIntent="text"
79
+ themeSize="xsmall"
80
+ />
81
+ </View>
82
+ <View
83
+ collapsable={false}
63
84
  pointerEvents="none"
64
85
  style={
65
- [
66
- {
67
- "backgroundColor": "#ffffff",
68
- "flexDirection": "row",
69
- "left": 16,
70
- "paddingHorizontal": 4,
71
- "position": "absolute",
72
- "top": -4,
73
- "zIndex": 1,
74
- },
75
- {
76
- "backgroundColor": "#f6f6f7",
77
- },
78
- ]
86
+ {
87
+ "alignItems": "center",
88
+ "flexDirection": "row",
89
+ "justifyContent": "center",
90
+ "left": 0,
91
+ "position": "absolute",
92
+ "right": 0,
93
+ "top": -10.666666666666666,
94
+ "transform": [
95
+ {
96
+ "translateY": 0,
97
+ },
98
+ {
99
+ "translateX": 24,
100
+ },
101
+ {
102
+ "scale": 1,
103
+ },
104
+ ],
105
+ "zIndex": 1,
106
+ }
79
107
  }
80
- testID="label-container"
108
+ themeVariant="text"
81
109
  >
82
110
  <Text
83
111
  allowFontScaling={false}
@@ -86,40 +114,47 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
86
114
  {
87
115
  "color": "#001f23",
88
116
  "fontFamily": "BeVietnamPro-Regular",
89
- "fontSize": 12,
117
+ "fontSize": 16,
90
118
  "letterSpacing": 0.48,
91
- "lineHeight": 16,
119
+ "lineHeight": 24,
92
120
  },
93
121
  [
94
122
  {
95
123
  "color": "#cb300a",
96
- "lineHeight": 12,
97
124
  },
98
- undefined,
125
+ {
126
+ "backgroundColor": "#f6f6f7",
127
+ },
99
128
  ],
100
129
  ]
101
130
  }
102
- themeFontWeight="regular"
131
+ testID="input-label-asterisk"
103
132
  themeIntent="body"
104
133
  themeState="filled"
134
+ themeTypeface="neutral"
135
+ themeVariant="regular"
105
136
  >
106
137
  *
107
138
  </Text>
108
139
  <Text
109
140
  allowFontScaling={false}
141
+ onLayout={[Function]}
110
142
  style={
111
143
  [
112
144
  {
113
145
  "color": "#001f23",
114
146
  "fontFamily": "BeVietnamPro-Regular",
115
- "fontSize": 12,
147
+ "fontSize": 16,
116
148
  "letterSpacing": 0.48,
117
- "lineHeight": 16,
149
+ "lineHeight": 24,
118
150
  },
119
151
  [
120
152
  {
153
+ "alignContent": "center",
154
+ "alignItems": "center",
121
155
  "color": "#001f23",
122
- "lineHeight": 12,
156
+ "marginTop": -2,
157
+ "textAlignVertical": "center",
123
158
  },
124
159
  {
125
160
  "backgroundColor": "#f6f6f7",
@@ -128,28 +163,14 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
128
163
  ]
129
164
  }
130
165
  testID="input-label"
131
- themeFontWeight="regular"
132
166
  themeIntent="body"
133
167
  themeState="filled"
168
+ themeTypeface="neutral"
169
+ themeVariant="regular"
134
170
  >
135
171
  Amount (AUD)
136
172
  </Text>
137
173
  </View>
138
- <HeroIcon
139
- name="dollar-sign"
140
- style={
141
- [
142
- {
143
- "color": "#001f23",
144
- "fontSize": 16,
145
- },
146
- undefined,
147
- ]
148
- }
149
- testID="input-prefix"
150
- themeIntent="text"
151
- themeSize="xsmall"
152
- />
153
174
  <View
154
175
  style={
155
176
  [
@@ -324,6 +345,7 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
324
345
  }
325
346
  >
326
347
  <View
348
+ onLayout={[Function]}
327
349
  style={
328
350
  [
329
351
  {
@@ -363,24 +385,51 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
363
385
  themeState="filled"
364
386
  />
365
387
  <View
388
+ onLayout={[Function]}
389
+ >
390
+ <HeroIcon
391
+ name="dollar-sign"
392
+ style={
393
+ [
394
+ {
395
+ "color": "#001f23",
396
+ "fontSize": 16,
397
+ },
398
+ undefined,
399
+ ]
400
+ }
401
+ testID="input-prefix"
402
+ themeIntent="text"
403
+ themeSize="xsmall"
404
+ />
405
+ </View>
406
+ <View
407
+ collapsable={false}
366
408
  pointerEvents="none"
367
409
  style={
368
- [
369
- {
370
- "backgroundColor": "#ffffff",
371
- "flexDirection": "row",
372
- "left": 16,
373
- "paddingHorizontal": 4,
374
- "position": "absolute",
375
- "top": -4,
376
- "zIndex": 1,
377
- },
378
- {
379
- "backgroundColor": "#ffffff",
380
- },
381
- ]
410
+ {
411
+ "alignItems": "center",
412
+ "flexDirection": "row",
413
+ "justifyContent": "center",
414
+ "left": 0,
415
+ "position": "absolute",
416
+ "right": 0,
417
+ "top": -10.666666666666666,
418
+ "transform": [
419
+ {
420
+ "translateY": 0,
421
+ },
422
+ {
423
+ "translateX": 24,
424
+ },
425
+ {
426
+ "scale": 1,
427
+ },
428
+ ],
429
+ "zIndex": 1,
430
+ }
382
431
  }
383
- testID="label-container"
432
+ themeVariant="text"
384
433
  >
385
434
  <Text
386
435
  allowFontScaling={false}
@@ -389,40 +438,47 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
389
438
  {
390
439
  "color": "#001f23",
391
440
  "fontFamily": "BeVietnamPro-Regular",
392
- "fontSize": 12,
441
+ "fontSize": 16,
393
442
  "letterSpacing": 0.48,
394
- "lineHeight": 16,
443
+ "lineHeight": 24,
395
444
  },
396
445
  [
397
446
  {
398
447
  "color": "#cb300a",
399
- "lineHeight": 12,
400
448
  },
401
- undefined,
449
+ {
450
+ "backgroundColor": "#ffffff",
451
+ },
402
452
  ],
403
453
  ]
404
454
  }
405
- themeFontWeight="regular"
455
+ testID="input-label-asterisk"
406
456
  themeIntent="body"
407
457
  themeState="filled"
458
+ themeTypeface="neutral"
459
+ themeVariant="regular"
408
460
  >
409
461
  *
410
462
  </Text>
411
463
  <Text
412
464
  allowFontScaling={false}
465
+ onLayout={[Function]}
413
466
  style={
414
467
  [
415
468
  {
416
469
  "color": "#001f23",
417
470
  "fontFamily": "BeVietnamPro-Regular",
418
- "fontSize": 12,
471
+ "fontSize": 16,
419
472
  "letterSpacing": 0.48,
420
- "lineHeight": 16,
473
+ "lineHeight": 24,
421
474
  },
422
475
  [
423
476
  {
477
+ "alignContent": "center",
478
+ "alignItems": "center",
424
479
  "color": "#001f23",
425
- "lineHeight": 12,
480
+ "marginTop": -2,
481
+ "textAlignVertical": "center",
426
482
  },
427
483
  {
428
484
  "backgroundColor": "#ffffff",
@@ -431,28 +487,14 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
431
487
  ]
432
488
  }
433
489
  testID="input-label"
434
- themeFontWeight="regular"
435
490
  themeIntent="body"
436
491
  themeState="filled"
492
+ themeTypeface="neutral"
493
+ themeVariant="regular"
437
494
  >
438
495
  Amount (AUD)
439
496
  </Text>
440
497
  </View>
441
- <HeroIcon
442
- name="dollar-sign"
443
- style={
444
- [
445
- {
446
- "color": "#001f23",
447
- "fontSize": 16,
448
- },
449
- undefined,
450
- ]
451
- }
452
- testID="input-prefix"
453
- themeIntent="text"
454
- themeSize="xsmall"
455
- />
456
498
  <View
457
499
  style={
458
500
  [
@@ -626,6 +668,7 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
626
668
  }
627
669
  >
628
670
  <View
671
+ onLayout={[Function]}
629
672
  style={
630
673
  [
631
674
  {
@@ -665,24 +708,51 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
665
708
  themeState="filled"
666
709
  />
667
710
  <View
711
+ onLayout={[Function]}
712
+ >
713
+ <HeroIcon
714
+ name="dollar-sign"
715
+ style={
716
+ [
717
+ {
718
+ "color": "#001f23",
719
+ "fontSize": 16,
720
+ },
721
+ undefined,
722
+ ]
723
+ }
724
+ testID="input-prefix"
725
+ themeIntent="text"
726
+ themeSize="xsmall"
727
+ />
728
+ </View>
729
+ <View
730
+ collapsable={false}
668
731
  pointerEvents="none"
669
732
  style={
670
- [
671
- {
672
- "backgroundColor": "#ffffff",
673
- "flexDirection": "row",
674
- "left": 16,
675
- "paddingHorizontal": 4,
676
- "position": "absolute",
677
- "top": -4,
678
- "zIndex": 1,
679
- },
680
- {
681
- "backgroundColor": "#ffffff",
682
- },
683
- ]
733
+ {
734
+ "alignItems": "center",
735
+ "flexDirection": "row",
736
+ "justifyContent": "center",
737
+ "left": 0,
738
+ "position": "absolute",
739
+ "right": 0,
740
+ "top": -10.666666666666666,
741
+ "transform": [
742
+ {
743
+ "translateY": 0,
744
+ },
745
+ {
746
+ "translateX": 24,
747
+ },
748
+ {
749
+ "scale": 1,
750
+ },
751
+ ],
752
+ "zIndex": 1,
753
+ }
684
754
  }
685
- testID="label-container"
755
+ themeVariant="text"
686
756
  >
687
757
  <Text
688
758
  allowFontScaling={false}
@@ -691,40 +761,47 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
691
761
  {
692
762
  "color": "#001f23",
693
763
  "fontFamily": "BeVietnamPro-Regular",
694
- "fontSize": 12,
764
+ "fontSize": 16,
695
765
  "letterSpacing": 0.48,
696
- "lineHeight": 16,
766
+ "lineHeight": 24,
697
767
  },
698
768
  [
699
769
  {
700
770
  "color": "#cb300a",
701
- "lineHeight": 12,
702
771
  },
703
- undefined,
772
+ {
773
+ "backgroundColor": "#ffffff",
774
+ },
704
775
  ],
705
776
  ]
706
777
  }
707
- themeFontWeight="regular"
778
+ testID="input-label-asterisk"
708
779
  themeIntent="body"
709
780
  themeState="filled"
781
+ themeTypeface="neutral"
782
+ themeVariant="regular"
710
783
  >
711
784
  *
712
785
  </Text>
713
786
  <Text
714
787
  allowFontScaling={false}
788
+ onLayout={[Function]}
715
789
  style={
716
790
  [
717
791
  {
718
792
  "color": "#001f23",
719
793
  "fontFamily": "BeVietnamPro-Regular",
720
- "fontSize": 12,
794
+ "fontSize": 16,
721
795
  "letterSpacing": 0.48,
722
- "lineHeight": 16,
796
+ "lineHeight": 24,
723
797
  },
724
798
  [
725
799
  {
800
+ "alignContent": "center",
801
+ "alignItems": "center",
726
802
  "color": "#001f23",
727
- "lineHeight": 12,
803
+ "marginTop": -2,
804
+ "textAlignVertical": "center",
728
805
  },
729
806
  {
730
807
  "backgroundColor": "#ffffff",
@@ -733,28 +810,14 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
733
810
  ]
734
811
  }
735
812
  testID="input-label"
736
- themeFontWeight="regular"
737
813
  themeIntent="body"
738
814
  themeState="filled"
815
+ themeTypeface="neutral"
816
+ themeVariant="regular"
739
817
  >
740
818
  Amount (AUD)
741
819
  </Text>
742
820
  </View>
743
- <HeroIcon
744
- name="dollar-sign"
745
- style={
746
- [
747
- {
748
- "color": "#001f23",
749
- "fontSize": 16,
750
- },
751
- undefined,
752
- ]
753
- }
754
- testID="input-prefix"
755
- themeIntent="text"
756
- themeSize="xsmall"
757
- />
758
821
  <View
759
822
  style={
760
823
  [
@@ -930,6 +993,7 @@ exports[`TextInput disabled renders correctly 1`] = `
930
993
  testID="disabled-text-input"
931
994
  >
932
995
  <View
996
+ onLayout={[Function]}
933
997
  style={
934
998
  [
935
999
  {
@@ -969,24 +1033,35 @@ exports[`TextInput disabled renders correctly 1`] = `
969
1033
  themeState="disabled"
970
1034
  />
971
1035
  <View
1036
+ onLayout={[Function]}
1037
+ />
1038
+ <View
1039
+ collapsable={false}
972
1040
  pointerEvents="none"
973
1041
  style={
974
- [
975
- {
976
- "backgroundColor": "#ffffff",
977
- "flexDirection": "row",
978
- "left": 16,
979
- "paddingHorizontal": 4,
980
- "position": "absolute",
981
- "top": -4,
982
- "zIndex": 1,
983
- },
984
- {
985
- "backgroundColor": "#ffffff",
986
- },
987
- ]
1042
+ {
1043
+ "alignItems": "center",
1044
+ "flexDirection": "row",
1045
+ "justifyContent": "center",
1046
+ "left": 0,
1047
+ "position": "absolute",
1048
+ "right": 0,
1049
+ "top": -10.666666666666666,
1050
+ "transform": [
1051
+ {
1052
+ "translateY": 0,
1053
+ },
1054
+ {
1055
+ "translateX": 24,
1056
+ },
1057
+ {
1058
+ "scale": 1,
1059
+ },
1060
+ ],
1061
+ "zIndex": 1,
1062
+ }
988
1063
  }
989
- testID="label-container"
1064
+ themeVariant="text"
990
1065
  >
991
1066
  <Text
992
1067
  allowFontScaling={false}
@@ -995,40 +1070,47 @@ exports[`TextInput disabled renders correctly 1`] = `
995
1070
  {
996
1071
  "color": "#001f23",
997
1072
  "fontFamily": "BeVietnamPro-Regular",
998
- "fontSize": 12,
1073
+ "fontSize": 16,
999
1074
  "letterSpacing": 0.48,
1000
- "lineHeight": 16,
1075
+ "lineHeight": 24,
1001
1076
  },
1002
1077
  [
1003
1078
  {
1004
1079
  "color": "#bfc1c5",
1005
- "lineHeight": 12,
1006
1080
  },
1007
- undefined,
1081
+ {
1082
+ "backgroundColor": "#ffffff",
1083
+ },
1008
1084
  ],
1009
1085
  ]
1010
1086
  }
1011
- themeFontWeight="regular"
1087
+ testID="input-label-asterisk"
1012
1088
  themeIntent="body"
1013
1089
  themeState="disabled"
1090
+ themeTypeface="neutral"
1091
+ themeVariant="regular"
1014
1092
  >
1015
1093
  *
1016
1094
  </Text>
1017
1095
  <Text
1018
1096
  allowFontScaling={false}
1097
+ onLayout={[Function]}
1019
1098
  style={
1020
1099
  [
1021
1100
  {
1022
1101
  "color": "#001f23",
1023
1102
  "fontFamily": "BeVietnamPro-Regular",
1024
- "fontSize": 12,
1103
+ "fontSize": 16,
1025
1104
  "letterSpacing": 0.48,
1026
- "lineHeight": 16,
1105
+ "lineHeight": 24,
1027
1106
  },
1028
1107
  [
1029
1108
  {
1109
+ "alignContent": "center",
1110
+ "alignItems": "center",
1030
1111
  "color": "#bfc1c5",
1031
- "lineHeight": 12,
1112
+ "marginTop": -2,
1113
+ "textAlignVertical": "center",
1032
1114
  },
1033
1115
  {
1034
1116
  "backgroundColor": "#ffffff",
@@ -1037,9 +1119,10 @@ exports[`TextInput disabled renders correctly 1`] = `
1037
1119
  ]
1038
1120
  }
1039
1121
  testID="input-label"
1040
- themeFontWeight="regular"
1041
1122
  themeIntent="body"
1042
1123
  themeState="disabled"
1124
+ themeTypeface="neutral"
1125
+ themeVariant="regular"
1043
1126
  >
1044
1127
  Amount (AUD)
1045
1128
  </Text>
@@ -1164,6 +1247,7 @@ exports[`TextInput error renders correctly 1`] = `
1164
1247
  }
1165
1248
  >
1166
1249
  <View
1250
+ onLayout={[Function]}
1167
1251
  style={
1168
1252
  [
1169
1253
  {
@@ -1202,112 +1286,131 @@ exports[`TextInput error renders correctly 1`] = `
1202
1286
  themeFocused={false}
1203
1287
  themeState="error"
1204
1288
  />
1205
- <HeroIcon
1206
- name="dollar-sign"
1207
- style={
1208
- [
1209
- {
1210
- "color": "#001f23",
1211
- "fontSize": 16,
1212
- },
1213
- undefined,
1214
- ]
1215
- }
1216
- testID="input-prefix"
1217
- themeIntent="text"
1218
- themeSize="xsmall"
1219
- />
1220
1289
  <View
1221
- style={
1222
- [
1223
- {
1224
- "alignItems": "center",
1225
- "alignSelf": "stretch",
1226
- "flexDirection": "row",
1227
- "flexGrow": 2,
1228
- "flexShrink": 1,
1229
- },
1230
- undefined,
1231
- ]
1232
- }
1290
+ onLayout={[Function]}
1233
1291
  >
1234
- <View
1235
- pointerEvents="none"
1292
+ <HeroIcon
1293
+ name="dollar-sign"
1236
1294
  style={
1237
1295
  [
1238
1296
  {
1239
- "alignItems": "center",
1240
- "bottom": 0,
1241
- "flexDirection": "row",
1242
- "left": 0,
1243
- "position": "absolute",
1244
- "right": 0,
1245
- "top": 0,
1246
- "zIndex": 9999,
1297
+ "color": "#001f23",
1298
+ "fontSize": 16,
1247
1299
  },
1248
1300
  undefined,
1249
1301
  ]
1250
1302
  }
1251
- themeVariant="text"
1252
- >
1253
- <Text
1254
- allowFontScaling={false}
1255
- style={
1256
- [
1257
- {
1258
- "color": "#001f23",
1259
- "fontFamily": "BeVietnamPro-Regular",
1260
- "fontSize": 16,
1261
- "letterSpacing": 0.48,
1262
- "lineHeight": 24,
1263
- },
1264
- [
1265
- {
1266
- "color": "#cb300a",
1267
- },
1268
- undefined,
1269
- ],
1270
- ]
1271
- }
1272
- themeIntent="body"
1273
- themeState="error"
1274
- themeTypeface="neutral"
1275
- themeVariant="regular"
1276
- >
1277
- *
1278
- </Text>
1279
- <Text
1280
- allowFontScaling={false}
1281
- style={
1303
+ testID="input-prefix"
1304
+ themeIntent="text"
1305
+ themeSize="xsmall"
1306
+ />
1307
+ </View>
1308
+ <View
1309
+ collapsable={false}
1310
+ pointerEvents="none"
1311
+ style={
1312
+ {
1313
+ "alignItems": "center",
1314
+ "flexDirection": "row",
1315
+ "justifyContent": "center",
1316
+ "left": 0,
1317
+ "position": "absolute",
1318
+ "right": 0,
1319
+ "top": -10.666666666666666,
1320
+ "transform": [
1321
+ {
1322
+ "translateY": 0,
1323
+ },
1324
+ {
1325
+ "translateX": 24,
1326
+ },
1327
+ {
1328
+ "scale": 1,
1329
+ },
1330
+ ],
1331
+ "zIndex": 1,
1332
+ }
1333
+ }
1334
+ themeVariant="text"
1335
+ >
1336
+ <Text
1337
+ allowFontScaling={false}
1338
+ style={
1339
+ [
1340
+ {
1341
+ "color": "#001f23",
1342
+ "fontFamily": "BeVietnamPro-Regular",
1343
+ "fontSize": 16,
1344
+ "letterSpacing": 0.48,
1345
+ "lineHeight": 24,
1346
+ },
1347
+ [
1348
+ {
1349
+ "color": "#cb300a",
1350
+ },
1351
+ {
1352
+ "backgroundColor": "#ffffff",
1353
+ },
1354
+ ],
1355
+ ]
1356
+ }
1357
+ testID="input-label-asterisk"
1358
+ themeIntent="body"
1359
+ themeState="error"
1360
+ themeTypeface="neutral"
1361
+ themeVariant="regular"
1362
+ >
1363
+ *
1364
+ </Text>
1365
+ <Text
1366
+ allowFontScaling={false}
1367
+ onLayout={[Function]}
1368
+ style={
1369
+ [
1370
+ {
1371
+ "color": "#001f23",
1372
+ "fontFamily": "BeVietnamPro-Regular",
1373
+ "fontSize": 16,
1374
+ "letterSpacing": 0.48,
1375
+ "lineHeight": 24,
1376
+ },
1282
1377
  [
1283
1378
  {
1379
+ "alignContent": "center",
1380
+ "alignItems": "center",
1284
1381
  "color": "#001f23",
1285
- "fontFamily": "BeVietnamPro-Regular",
1286
- "fontSize": 16,
1287
- "letterSpacing": 0.48,
1288
- "lineHeight": 24,
1382
+ "marginTop": -2,
1383
+ "textAlignVertical": "center",
1289
1384
  },
1290
- [
1291
- {
1292
- "alignContent": "center",
1293
- "alignItems": "center",
1294
- "color": "#001f23",
1295
- "marginTop": -2,
1296
- "textAlignVertical": "center",
1297
- },
1298
- undefined,
1299
- ],
1300
- ]
1301
- }
1302
- testID="input-label"
1303
- themeIntent="body"
1304
- themeState="error"
1305
- themeTypeface="neutral"
1306
- themeVariant="regular"
1307
- >
1308
- Amount (AUD)
1309
- </Text>
1310
- </View>
1385
+ {
1386
+ "backgroundColor": "#ffffff",
1387
+ },
1388
+ ],
1389
+ ]
1390
+ }
1391
+ testID="input-label"
1392
+ themeIntent="body"
1393
+ themeState="error"
1394
+ themeTypeface="neutral"
1395
+ themeVariant="regular"
1396
+ >
1397
+ Amount (AUD)
1398
+ </Text>
1399
+ </View>
1400
+ <View
1401
+ style={
1402
+ [
1403
+ {
1404
+ "alignItems": "center",
1405
+ "alignSelf": "stretch",
1406
+ "flexDirection": "row",
1407
+ "flexGrow": 2,
1408
+ "flexShrink": 1,
1409
+ },
1410
+ undefined,
1411
+ ]
1412
+ }
1413
+ >
1311
1414
  <TextInput
1312
1415
  accessibilityState={
1313
1416
  {
@@ -1470,6 +1573,7 @@ exports[`TextInput filled renders correctly 1`] = `
1470
1573
  }
1471
1574
  >
1472
1575
  <View
1576
+ onLayout={[Function]}
1473
1577
  style={
1474
1578
  [
1475
1579
  {
@@ -1509,40 +1613,71 @@ exports[`TextInput filled renders correctly 1`] = `
1509
1613
  themeState="filled"
1510
1614
  />
1511
1615
  <View
1616
+ onLayout={[Function]}
1617
+ >
1618
+ <HeroIcon
1619
+ name="dollar-sign"
1620
+ style={
1621
+ [
1622
+ {
1623
+ "color": "#001f23",
1624
+ "fontSize": 16,
1625
+ },
1626
+ undefined,
1627
+ ]
1628
+ }
1629
+ testID="input-prefix"
1630
+ themeIntent="text"
1631
+ themeSize="xsmall"
1632
+ />
1633
+ </View>
1634
+ <View
1635
+ collapsable={false}
1512
1636
  pointerEvents="none"
1513
1637
  style={
1514
- [
1515
- {
1516
- "backgroundColor": "#ffffff",
1517
- "flexDirection": "row",
1518
- "left": 16,
1519
- "paddingHorizontal": 4,
1520
- "position": "absolute",
1521
- "top": -4,
1522
- "zIndex": 1,
1523
- },
1524
- {
1525
- "backgroundColor": "#ffffff",
1526
- },
1527
- ]
1638
+ {
1639
+ "alignItems": "center",
1640
+ "flexDirection": "row",
1641
+ "justifyContent": "center",
1642
+ "left": 0,
1643
+ "position": "absolute",
1644
+ "right": 0,
1645
+ "top": -10.666666666666666,
1646
+ "transform": [
1647
+ {
1648
+ "translateY": 0,
1649
+ },
1650
+ {
1651
+ "translateX": 24,
1652
+ },
1653
+ {
1654
+ "scale": 1,
1655
+ },
1656
+ ],
1657
+ "zIndex": 1,
1658
+ }
1528
1659
  }
1529
- testID="label-container"
1660
+ themeVariant="text"
1530
1661
  >
1531
1662
  <Text
1532
1663
  allowFontScaling={false}
1664
+ onLayout={[Function]}
1533
1665
  style={
1534
1666
  [
1535
1667
  {
1536
1668
  "color": "#001f23",
1537
1669
  "fontFamily": "BeVietnamPro-Regular",
1538
- "fontSize": 12,
1670
+ "fontSize": 16,
1539
1671
  "letterSpacing": 0.48,
1540
- "lineHeight": 16,
1672
+ "lineHeight": 24,
1541
1673
  },
1542
1674
  [
1543
1675
  {
1676
+ "alignContent": "center",
1677
+ "alignItems": "center",
1544
1678
  "color": "#001f23",
1545
- "lineHeight": 12,
1679
+ "marginTop": -2,
1680
+ "textAlignVertical": "center",
1546
1681
  },
1547
1682
  {
1548
1683
  "backgroundColor": "#ffffff",
@@ -1551,28 +1686,14 @@ exports[`TextInput filled renders correctly 1`] = `
1551
1686
  ]
1552
1687
  }
1553
1688
  testID="input-label"
1554
- themeFontWeight="regular"
1555
1689
  themeIntent="body"
1556
1690
  themeState="filled"
1691
+ themeTypeface="neutral"
1692
+ themeVariant="regular"
1557
1693
  >
1558
1694
  Amount (AUD)
1559
1695
  </Text>
1560
1696
  </View>
1561
- <HeroIcon
1562
- name="dollar-sign"
1563
- style={
1564
- [
1565
- {
1566
- "color": "#001f23",
1567
- "fontSize": 16,
1568
- },
1569
- undefined,
1570
- ]
1571
- }
1572
- testID="input-prefix"
1573
- themeIntent="text"
1574
- themeSize="xsmall"
1575
- />
1576
1697
  <View
1577
1698
  style={
1578
1699
  [
@@ -1708,6 +1829,7 @@ exports[`TextInput helper text renders correctly 1`] = `
1708
1829
  }
1709
1830
  >
1710
1831
  <View
1832
+ onLayout={[Function]}
1711
1833
  style={
1712
1834
  [
1713
1835
  {
@@ -1746,21 +1868,117 @@ exports[`TextInput helper text renders correctly 1`] = `
1746
1868
  themeFocused={false}
1747
1869
  themeState="default"
1748
1870
  />
1749
- <HeroIcon
1750
- name="dollar-sign"
1871
+ <View
1872
+ onLayout={[Function]}
1873
+ >
1874
+ <HeroIcon
1875
+ name="dollar-sign"
1876
+ style={
1877
+ [
1878
+ {
1879
+ "color": "#001f23",
1880
+ "fontSize": 16,
1881
+ },
1882
+ undefined,
1883
+ ]
1884
+ }
1885
+ testID="input-prefix"
1886
+ themeIntent="text"
1887
+ themeSize="xsmall"
1888
+ />
1889
+ </View>
1890
+ <View
1891
+ collapsable={false}
1892
+ pointerEvents="none"
1751
1893
  style={
1752
- [
1753
- {
1754
- "color": "#001f23",
1755
- "fontSize": 16,
1756
- },
1757
- undefined,
1758
- ]
1894
+ {
1895
+ "alignItems": "center",
1896
+ "flexDirection": "row",
1897
+ "justifyContent": "center",
1898
+ "left": 0,
1899
+ "position": "absolute",
1900
+ "right": 0,
1901
+ "top": -10.666666666666666,
1902
+ "transform": [
1903
+ {
1904
+ "translateY": 0,
1905
+ },
1906
+ {
1907
+ "translateX": 24,
1908
+ },
1909
+ {
1910
+ "scale": 1,
1911
+ },
1912
+ ],
1913
+ "zIndex": 1,
1914
+ }
1759
1915
  }
1760
- testID="input-prefix"
1761
- themeIntent="text"
1762
- themeSize="xsmall"
1763
- />
1916
+ themeVariant="text"
1917
+ >
1918
+ <Text
1919
+ allowFontScaling={false}
1920
+ style={
1921
+ [
1922
+ {
1923
+ "color": "#001f23",
1924
+ "fontFamily": "BeVietnamPro-Regular",
1925
+ "fontSize": 16,
1926
+ "letterSpacing": 0.48,
1927
+ "lineHeight": 24,
1928
+ },
1929
+ [
1930
+ {
1931
+ "color": "#cb300a",
1932
+ },
1933
+ {
1934
+ "backgroundColor": "#ffffff",
1935
+ },
1936
+ ],
1937
+ ]
1938
+ }
1939
+ testID="input-label-asterisk"
1940
+ themeIntent="body"
1941
+ themeState="default"
1942
+ themeTypeface="neutral"
1943
+ themeVariant="regular"
1944
+ >
1945
+ *
1946
+ </Text>
1947
+ <Text
1948
+ allowFontScaling={false}
1949
+ onLayout={[Function]}
1950
+ style={
1951
+ [
1952
+ {
1953
+ "color": "#001f23",
1954
+ "fontFamily": "BeVietnamPro-Regular",
1955
+ "fontSize": 16,
1956
+ "letterSpacing": 0.48,
1957
+ "lineHeight": 24,
1958
+ },
1959
+ [
1960
+ {
1961
+ "alignContent": "center",
1962
+ "alignItems": "center",
1963
+ "color": "#001f23",
1964
+ "marginTop": -2,
1965
+ "textAlignVertical": "center",
1966
+ },
1967
+ {
1968
+ "backgroundColor": "#ffffff",
1969
+ },
1970
+ ],
1971
+ ]
1972
+ }
1973
+ testID="input-label"
1974
+ themeIntent="body"
1975
+ themeState="default"
1976
+ themeTypeface="neutral"
1977
+ themeVariant="regular"
1978
+ >
1979
+ Amount (AUD)
1980
+ </Text>
1981
+ </View>
1764
1982
  <View
1765
1983
  style={
1766
1984
  [
@@ -1775,83 +1993,6 @@ exports[`TextInput helper text renders correctly 1`] = `
1775
1993
  ]
1776
1994
  }
1777
1995
  >
1778
- <View
1779
- pointerEvents="none"
1780
- style={
1781
- [
1782
- {
1783
- "alignItems": "center",
1784
- "bottom": 0,
1785
- "flexDirection": "row",
1786
- "left": 0,
1787
- "position": "absolute",
1788
- "right": 0,
1789
- "top": 0,
1790
- "zIndex": 9999,
1791
- },
1792
- undefined,
1793
- ]
1794
- }
1795
- themeVariant="text"
1796
- >
1797
- <Text
1798
- allowFontScaling={false}
1799
- style={
1800
- [
1801
- {
1802
- "color": "#001f23",
1803
- "fontFamily": "BeVietnamPro-Regular",
1804
- "fontSize": 16,
1805
- "letterSpacing": 0.48,
1806
- "lineHeight": 24,
1807
- },
1808
- [
1809
- {
1810
- "color": "#cb300a",
1811
- },
1812
- undefined,
1813
- ],
1814
- ]
1815
- }
1816
- themeIntent="body"
1817
- themeState="default"
1818
- themeTypeface="neutral"
1819
- themeVariant="regular"
1820
- >
1821
- *
1822
- </Text>
1823
- <Text
1824
- allowFontScaling={false}
1825
- style={
1826
- [
1827
- {
1828
- "color": "#001f23",
1829
- "fontFamily": "BeVietnamPro-Regular",
1830
- "fontSize": 16,
1831
- "letterSpacing": 0.48,
1832
- "lineHeight": 24,
1833
- },
1834
- [
1835
- {
1836
- "alignContent": "center",
1837
- "alignItems": "center",
1838
- "color": "#001f23",
1839
- "marginTop": -2,
1840
- "textAlignVertical": "center",
1841
- },
1842
- undefined,
1843
- ],
1844
- ]
1845
- }
1846
- testID="input-label"
1847
- themeIntent="body"
1848
- themeState="default"
1849
- themeTypeface="neutral"
1850
- themeVariant="regular"
1851
- >
1852
- Amount (AUD)
1853
- </Text>
1854
- </View>
1855
1996
  <TextInput
1856
1997
  accessibilityState={
1857
1998
  {
@@ -1980,6 +2121,7 @@ exports[`TextInput idle renders correctly 1`] = `
1980
2121
  testID="idle-text-input"
1981
2122
  >
1982
2123
  <View
2124
+ onLayout={[Function]}
1983
2125
  style={
1984
2126
  [
1985
2127
  {
@@ -2018,21 +2160,88 @@ exports[`TextInput idle renders correctly 1`] = `
2018
2160
  themeFocused={false}
2019
2161
  themeState="default"
2020
2162
  />
2021
- <HeroIcon
2022
- name="dollar-sign"
2163
+ <View
2164
+ onLayout={[Function]}
2165
+ >
2166
+ <HeroIcon
2167
+ name="dollar-sign"
2168
+ style={
2169
+ [
2170
+ {
2171
+ "color": "#001f23",
2172
+ "fontSize": 16,
2173
+ },
2174
+ undefined,
2175
+ ]
2176
+ }
2177
+ testID="input-prefix"
2178
+ themeIntent="text"
2179
+ themeSize="xsmall"
2180
+ />
2181
+ </View>
2182
+ <View
2183
+ collapsable={false}
2184
+ pointerEvents="none"
2023
2185
  style={
2024
- [
2025
- {
2026
- "color": "#001f23",
2027
- "fontSize": 16,
2028
- },
2029
- undefined,
2030
- ]
2186
+ {
2187
+ "alignItems": "center",
2188
+ "flexDirection": "row",
2189
+ "justifyContent": "center",
2190
+ "left": 0,
2191
+ "position": "absolute",
2192
+ "right": 0,
2193
+ "top": -10.666666666666666,
2194
+ "transform": [
2195
+ {
2196
+ "translateY": 0,
2197
+ },
2198
+ {
2199
+ "translateX": 24,
2200
+ },
2201
+ {
2202
+ "scale": 1,
2203
+ },
2204
+ ],
2205
+ "zIndex": 1,
2206
+ }
2031
2207
  }
2032
- testID="input-prefix"
2033
- themeIntent="text"
2034
- themeSize="xsmall"
2035
- />
2208
+ themeVariant="text"
2209
+ >
2210
+ <Text
2211
+ allowFontScaling={false}
2212
+ onLayout={[Function]}
2213
+ style={
2214
+ [
2215
+ {
2216
+ "color": "#001f23",
2217
+ "fontFamily": "BeVietnamPro-Regular",
2218
+ "fontSize": 16,
2219
+ "letterSpacing": 0.48,
2220
+ "lineHeight": 24,
2221
+ },
2222
+ [
2223
+ {
2224
+ "alignContent": "center",
2225
+ "alignItems": "center",
2226
+ "color": "#001f23",
2227
+ "marginTop": -2,
2228
+ "textAlignVertical": "center",
2229
+ },
2230
+ {
2231
+ "backgroundColor": "#ffffff",
2232
+ },
2233
+ ],
2234
+ ]
2235
+ }
2236
+ testID="input-label"
2237
+ themeIntent="body"
2238
+ themeState="default"
2239
+ themeTypeface="neutral"
2240
+ themeVariant="regular"
2241
+ >
2242
+ Amount (AUD)
2243
+ </Text>
2244
+ </View>
2036
2245
  <View
2037
2246
  style={
2038
2247
  [
@@ -2047,57 +2256,6 @@ exports[`TextInput idle renders correctly 1`] = `
2047
2256
  ]
2048
2257
  }
2049
2258
  >
2050
- <View
2051
- pointerEvents="none"
2052
- style={
2053
- [
2054
- {
2055
- "alignItems": "center",
2056
- "bottom": 0,
2057
- "flexDirection": "row",
2058
- "left": 0,
2059
- "position": "absolute",
2060
- "right": 0,
2061
- "top": 0,
2062
- "zIndex": 9999,
2063
- },
2064
- undefined,
2065
- ]
2066
- }
2067
- themeVariant="text"
2068
- >
2069
- <Text
2070
- allowFontScaling={false}
2071
- style={
2072
- [
2073
- {
2074
- "color": "#001f23",
2075
- "fontFamily": "BeVietnamPro-Regular",
2076
- "fontSize": 16,
2077
- "letterSpacing": 0.48,
2078
- "lineHeight": 24,
2079
- },
2080
- [
2081
- {
2082
- "alignContent": "center",
2083
- "alignItems": "center",
2084
- "color": "#001f23",
2085
- "marginTop": -2,
2086
- "textAlignVertical": "center",
2087
- },
2088
- undefined,
2089
- ],
2090
- ]
2091
- }
2092
- testID="input-label"
2093
- themeIntent="body"
2094
- themeState="default"
2095
- themeTypeface="neutral"
2096
- themeVariant="regular"
2097
- >
2098
- Amount (AUD)
2099
- </Text>
2100
- </View>
2101
2259
  <TextInput
2102
2260
  accessibilityState={
2103
2261
  {
@@ -2218,6 +2376,7 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
2218
2376
  }
2219
2377
  >
2220
2378
  <View
2379
+ onLayout={[Function]}
2221
2380
  style={
2222
2381
  [
2223
2382
  {
@@ -2256,112 +2415,131 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
2256
2415
  themeFocused={false}
2257
2416
  themeState="default"
2258
2417
  />
2259
- <HeroIcon
2260
- name="eye-circle"
2261
- style={
2262
- [
2263
- {
2264
- "color": "#001f23",
2265
- "fontSize": 24,
2266
- },
2267
- undefined,
2268
- ]
2269
- }
2270
- testID="prefix-element"
2271
- themeIntent="text"
2272
- themeSize="medium"
2273
- />
2274
2418
  <View
2419
+ onLayout={[Function]}
2420
+ >
2421
+ <HeroIcon
2422
+ name="eye-circle"
2423
+ style={
2424
+ [
2425
+ {
2426
+ "color": "#001f23",
2427
+ "fontSize": 24,
2428
+ },
2429
+ undefined,
2430
+ ]
2431
+ }
2432
+ testID="prefix-element"
2433
+ themeIntent="text"
2434
+ themeSize="medium"
2435
+ />
2436
+ </View>
2437
+ <View
2438
+ collapsable={false}
2439
+ pointerEvents="none"
2275
2440
  style={
2276
- [
2277
- {
2278
- "alignItems": "center",
2279
- "alignSelf": "stretch",
2280
- "flexDirection": "row",
2281
- "flexGrow": 2,
2282
- "flexShrink": 1,
2283
- },
2284
- undefined,
2285
- ]
2441
+ {
2442
+ "alignItems": "center",
2443
+ "flexDirection": "row",
2444
+ "justifyContent": "center",
2445
+ "left": 0,
2446
+ "position": "absolute",
2447
+ "right": 0,
2448
+ "top": -10.666666666666666,
2449
+ "transform": [
2450
+ {
2451
+ "translateY": 0,
2452
+ },
2453
+ {
2454
+ "translateX": 24,
2455
+ },
2456
+ {
2457
+ "scale": 1,
2458
+ },
2459
+ ],
2460
+ "zIndex": 1,
2461
+ }
2286
2462
  }
2463
+ themeVariant="text"
2287
2464
  >
2288
- <View
2289
- pointerEvents="none"
2465
+ <Text
2466
+ allowFontScaling={false}
2290
2467
  style={
2291
2468
  [
2292
2469
  {
2293
- "alignItems": "center",
2294
- "bottom": 0,
2295
- "flexDirection": "row",
2296
- "left": 0,
2297
- "position": "absolute",
2298
- "right": 0,
2299
- "top": 0,
2300
- "zIndex": 9999,
2470
+ "color": "#001f23",
2471
+ "fontFamily": "BeVietnamPro-Regular",
2472
+ "fontSize": 16,
2473
+ "letterSpacing": 0.48,
2474
+ "lineHeight": 24,
2301
2475
  },
2302
- undefined,
2476
+ [
2477
+ {
2478
+ "color": "#cb300a",
2479
+ },
2480
+ {
2481
+ "backgroundColor": "#ffffff",
2482
+ },
2483
+ ],
2303
2484
  ]
2304
2485
  }
2305
- themeVariant="text"
2486
+ testID="input-label-asterisk"
2487
+ themeIntent="body"
2488
+ themeState="default"
2489
+ themeTypeface="neutral"
2490
+ themeVariant="regular"
2306
2491
  >
2307
- <Text
2308
- allowFontScaling={false}
2309
- style={
2492
+ *
2493
+ </Text>
2494
+ <Text
2495
+ allowFontScaling={false}
2496
+ onLayout={[Function]}
2497
+ style={
2498
+ [
2499
+ {
2500
+ "color": "#001f23",
2501
+ "fontFamily": "BeVietnamPro-Regular",
2502
+ "fontSize": 16,
2503
+ "letterSpacing": 0.48,
2504
+ "lineHeight": 24,
2505
+ },
2310
2506
  [
2311
2507
  {
2508
+ "alignContent": "center",
2509
+ "alignItems": "center",
2312
2510
  "color": "#001f23",
2313
- "fontFamily": "BeVietnamPro-Regular",
2314
- "fontSize": 16,
2315
- "letterSpacing": 0.48,
2316
- "lineHeight": 24,
2511
+ "marginTop": -2,
2512
+ "textAlignVertical": "center",
2317
2513
  },
2318
- [
2319
- {
2320
- "color": "#cb300a",
2321
- },
2322
- undefined,
2323
- ],
2324
- ]
2325
- }
2326
- themeIntent="body"
2327
- themeState="default"
2328
- themeTypeface="neutral"
2329
- themeVariant="regular"
2330
- >
2331
- *
2332
- </Text>
2333
- <Text
2334
- allowFontScaling={false}
2335
- style={
2336
- [
2337
2514
  {
2338
- "color": "#001f23",
2339
- "fontFamily": "BeVietnamPro-Regular",
2340
- "fontSize": 16,
2341
- "letterSpacing": 0.48,
2342
- "lineHeight": 24,
2515
+ "backgroundColor": "#ffffff",
2343
2516
  },
2344
- [
2345
- {
2346
- "alignContent": "center",
2347
- "alignItems": "center",
2348
- "color": "#001f23",
2349
- "marginTop": -2,
2350
- "textAlignVertical": "center",
2351
- },
2352
- undefined,
2353
- ],
2354
- ]
2355
- }
2356
- testID="input-label"
2357
- themeIntent="body"
2358
- themeState="default"
2359
- themeTypeface="neutral"
2360
- themeVariant="regular"
2361
- >
2362
- Amount (AUD)
2363
- </Text>
2364
- </View>
2517
+ ],
2518
+ ]
2519
+ }
2520
+ testID="input-label"
2521
+ themeIntent="body"
2522
+ themeState="default"
2523
+ themeTypeface="neutral"
2524
+ themeVariant="regular"
2525
+ >
2526
+ Amount (AUD)
2527
+ </Text>
2528
+ </View>
2529
+ <View
2530
+ style={
2531
+ [
2532
+ {
2533
+ "alignItems": "center",
2534
+ "alignSelf": "stretch",
2535
+ "flexDirection": "row",
2536
+ "flexGrow": 2,
2537
+ "flexShrink": 1,
2538
+ },
2539
+ undefined,
2540
+ ]
2541
+ }
2542
+ >
2365
2543
  <TextInput
2366
2544
  accessibilityState={
2367
2545
  {
@@ -2482,6 +2660,7 @@ exports[`TextInput loading renders correctly 1`] = `
2482
2660
  }
2483
2661
  >
2484
2662
  <View
2663
+ onLayout={[Function]}
2485
2664
  style={
2486
2665
  [
2487
2666
  {
@@ -2520,6 +2699,37 @@ exports[`TextInput loading renders correctly 1`] = `
2520
2699
  themeFocused={false}
2521
2700
  themeState="readonly"
2522
2701
  />
2702
+ <View
2703
+ onLayout={[Function]}
2704
+ />
2705
+ <View
2706
+ collapsable={false}
2707
+ pointerEvents="none"
2708
+ style={
2709
+ {
2710
+ "alignItems": "center",
2711
+ "flexDirection": "row",
2712
+ "justifyContent": "center",
2713
+ "left": 0,
2714
+ "position": "absolute",
2715
+ "right": 0,
2716
+ "top": -10.666666666666666,
2717
+ "transform": [
2718
+ {
2719
+ "translateY": 0,
2720
+ },
2721
+ {
2722
+ "translateX": 24,
2723
+ },
2724
+ {
2725
+ "scale": 1,
2726
+ },
2727
+ ],
2728
+ "zIndex": 1,
2729
+ }
2730
+ }
2731
+ themeVariant="text"
2732
+ />
2523
2733
  <View
2524
2734
  style={
2525
2735
  [
@@ -2534,25 +2744,6 @@ exports[`TextInput loading renders correctly 1`] = `
2534
2744
  ]
2535
2745
  }
2536
2746
  >
2537
- <View
2538
- pointerEvents="none"
2539
- style={
2540
- [
2541
- {
2542
- "alignItems": "center",
2543
- "bottom": 0,
2544
- "flexDirection": "row",
2545
- "left": 0,
2546
- "position": "absolute",
2547
- "right": 0,
2548
- "top": 0,
2549
- "zIndex": 9999,
2550
- },
2551
- undefined,
2552
- ]
2553
- }
2554
- themeVariant="text"
2555
- />
2556
2747
  <TextInput
2557
2748
  accessibilityState={
2558
2749
  {
@@ -2685,6 +2876,7 @@ exports[`TextInput max length renders correctly 1`] = `
2685
2876
  }
2686
2877
  >
2687
2878
  <View
2879
+ onLayout={[Function]}
2688
2880
  style={
2689
2881
  [
2690
2882
  {
@@ -2724,24 +2916,35 @@ exports[`TextInput max length renders correctly 1`] = `
2724
2916
  themeState="error"
2725
2917
  />
2726
2918
  <View
2919
+ onLayout={[Function]}
2920
+ />
2921
+ <View
2922
+ collapsable={false}
2727
2923
  pointerEvents="none"
2728
2924
  style={
2729
- [
2730
- {
2731
- "backgroundColor": "#ffffff",
2732
- "flexDirection": "row",
2733
- "left": 16,
2734
- "paddingHorizontal": 4,
2735
- "position": "absolute",
2736
- "top": -4,
2737
- "zIndex": 1,
2738
- },
2739
- {
2740
- "backgroundColor": "#ffffff",
2741
- },
2742
- ]
2925
+ {
2926
+ "alignItems": "center",
2927
+ "flexDirection": "row",
2928
+ "justifyContent": "center",
2929
+ "left": 0,
2930
+ "position": "absolute",
2931
+ "right": 0,
2932
+ "top": -10.666666666666666,
2933
+ "transform": [
2934
+ {
2935
+ "translateY": 0,
2936
+ },
2937
+ {
2938
+ "translateX": 24,
2939
+ },
2940
+ {
2941
+ "scale": 1,
2942
+ },
2943
+ ],
2944
+ "zIndex": 1,
2945
+ }
2743
2946
  }
2744
- testID="label-container"
2947
+ themeVariant="text"
2745
2948
  >
2746
2949
  <Text
2747
2950
  allowFontScaling={false}
@@ -2750,40 +2953,47 @@ exports[`TextInput max length renders correctly 1`] = `
2750
2953
  {
2751
2954
  "color": "#001f23",
2752
2955
  "fontFamily": "BeVietnamPro-Regular",
2753
- "fontSize": 12,
2956
+ "fontSize": 16,
2754
2957
  "letterSpacing": 0.48,
2755
- "lineHeight": 16,
2958
+ "lineHeight": 24,
2756
2959
  },
2757
2960
  [
2758
2961
  {
2759
2962
  "color": "#cb300a",
2760
- "lineHeight": 12,
2761
2963
  },
2762
- undefined,
2964
+ {
2965
+ "backgroundColor": "#ffffff",
2966
+ },
2763
2967
  ],
2764
2968
  ]
2765
2969
  }
2766
- themeFontWeight="regular"
2970
+ testID="input-label-asterisk"
2767
2971
  themeIntent="body"
2768
2972
  themeState="error"
2973
+ themeTypeface="neutral"
2974
+ themeVariant="regular"
2769
2975
  >
2770
2976
  *
2771
2977
  </Text>
2772
2978
  <Text
2773
2979
  allowFontScaling={false}
2980
+ onLayout={[Function]}
2774
2981
  style={
2775
2982
  [
2776
2983
  {
2777
2984
  "color": "#001f23",
2778
2985
  "fontFamily": "BeVietnamPro-Regular",
2779
- "fontSize": 12,
2986
+ "fontSize": 16,
2780
2987
  "letterSpacing": 0.48,
2781
- "lineHeight": 16,
2988
+ "lineHeight": 24,
2782
2989
  },
2783
2990
  [
2784
2991
  {
2992
+ "alignContent": "center",
2993
+ "alignItems": "center",
2785
2994
  "color": "#001f23",
2786
- "lineHeight": 12,
2995
+ "marginTop": -2,
2996
+ "textAlignVertical": "center",
2787
2997
  },
2788
2998
  {
2789
2999
  "backgroundColor": "#ffffff",
@@ -2792,9 +3002,10 @@ exports[`TextInput max length renders correctly 1`] = `
2792
3002
  ]
2793
3003
  }
2794
3004
  testID="input-label"
2795
- themeFontWeight="regular"
2796
3005
  themeIntent="body"
2797
3006
  themeState="error"
3007
+ themeTypeface="neutral"
3008
+ themeVariant="regular"
2798
3009
  >
2799
3010
  Shout out
2800
3011
  </Text>
@@ -3010,6 +3221,7 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
3010
3221
  }
3011
3222
  >
3012
3223
  <View
3224
+ onLayout={[Function]}
3013
3225
  style={
3014
3226
  [
3015
3227
  {
@@ -3049,24 +3261,35 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
3049
3261
  themeState="error"
3050
3262
  />
3051
3263
  <View
3264
+ onLayout={[Function]}
3265
+ />
3266
+ <View
3267
+ collapsable={false}
3052
3268
  pointerEvents="none"
3053
3269
  style={
3054
- [
3055
- {
3056
- "backgroundColor": "#ffffff",
3057
- "flexDirection": "row",
3058
- "left": 16,
3059
- "paddingHorizontal": 4,
3060
- "position": "absolute",
3061
- "top": -4,
3062
- "zIndex": 1,
3063
- },
3064
- {
3065
- "backgroundColor": "#ffffff",
3066
- },
3067
- ]
3270
+ {
3271
+ "alignItems": "center",
3272
+ "flexDirection": "row",
3273
+ "justifyContent": "center",
3274
+ "left": 0,
3275
+ "position": "absolute",
3276
+ "right": 0,
3277
+ "top": -10.666666666666666,
3278
+ "transform": [
3279
+ {
3280
+ "translateY": 0,
3281
+ },
3282
+ {
3283
+ "translateX": 24,
3284
+ },
3285
+ {
3286
+ "scale": 1,
3287
+ },
3288
+ ],
3289
+ "zIndex": 1,
3290
+ }
3068
3291
  }
3069
- testID="label-container"
3292
+ themeVariant="text"
3070
3293
  >
3071
3294
  <Text
3072
3295
  allowFontScaling={false}
@@ -3075,40 +3298,47 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
3075
3298
  {
3076
3299
  "color": "#001f23",
3077
3300
  "fontFamily": "BeVietnamPro-Regular",
3078
- "fontSize": 12,
3301
+ "fontSize": 16,
3079
3302
  "letterSpacing": 0.48,
3080
- "lineHeight": 16,
3303
+ "lineHeight": 24,
3081
3304
  },
3082
3305
  [
3083
3306
  {
3084
3307
  "color": "#cb300a",
3085
- "lineHeight": 12,
3086
3308
  },
3087
- undefined,
3309
+ {
3310
+ "backgroundColor": "#ffffff",
3311
+ },
3088
3312
  ],
3089
3313
  ]
3090
3314
  }
3091
- themeFontWeight="regular"
3315
+ testID="input-label-asterisk"
3092
3316
  themeIntent="body"
3093
3317
  themeState="error"
3318
+ themeTypeface="neutral"
3319
+ themeVariant="regular"
3094
3320
  >
3095
3321
  *
3096
3322
  </Text>
3097
3323
  <Text
3098
3324
  allowFontScaling={false}
3325
+ onLayout={[Function]}
3099
3326
  style={
3100
3327
  [
3101
3328
  {
3102
3329
  "color": "#001f23",
3103
3330
  "fontFamily": "BeVietnamPro-Regular",
3104
- "fontSize": 12,
3331
+ "fontSize": 16,
3105
3332
  "letterSpacing": 0.48,
3106
- "lineHeight": 16,
3333
+ "lineHeight": 24,
3107
3334
  },
3108
3335
  [
3109
3336
  {
3337
+ "alignContent": "center",
3338
+ "alignItems": "center",
3110
3339
  "color": "#001f23",
3111
- "lineHeight": 12,
3340
+ "marginTop": -2,
3341
+ "textAlignVertical": "center",
3112
3342
  },
3113
3343
  {
3114
3344
  "backgroundColor": "#ffffff",
@@ -3117,9 +3347,10 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
3117
3347
  ]
3118
3348
  }
3119
3349
  testID="input-label"
3120
- themeFontWeight="regular"
3121
3350
  themeIntent="body"
3122
3351
  themeState="error"
3352
+ themeTypeface="neutral"
3353
+ themeVariant="regular"
3123
3354
  >
3124
3355
  Shout out
3125
3356
  </Text>
@@ -3303,6 +3534,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
3303
3534
  }
3304
3535
  >
3305
3536
  <View
3537
+ onLayout={[Function]}
3306
3538
  style={
3307
3539
  [
3308
3540
  {
@@ -3341,112 +3573,131 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
3341
3573
  themeFocused={false}
3342
3574
  themeState="default"
3343
3575
  />
3344
- <HeroIcon
3345
- name="dollar-sign"
3346
- style={
3347
- [
3348
- {
3349
- "color": "#001f23",
3350
- "fontSize": 16,
3351
- },
3352
- undefined,
3353
- ]
3354
- }
3355
- testID="input-prefix"
3356
- themeIntent="text"
3357
- themeSize="xsmall"
3358
- />
3359
3576
  <View
3577
+ onLayout={[Function]}
3578
+ >
3579
+ <HeroIcon
3580
+ name="dollar-sign"
3581
+ style={
3582
+ [
3583
+ {
3584
+ "color": "#001f23",
3585
+ "fontSize": 16,
3586
+ },
3587
+ undefined,
3588
+ ]
3589
+ }
3590
+ testID="input-prefix"
3591
+ themeIntent="text"
3592
+ themeSize="xsmall"
3593
+ />
3594
+ </View>
3595
+ <View
3596
+ collapsable={false}
3597
+ pointerEvents="none"
3360
3598
  style={
3361
- [
3362
- {
3363
- "alignItems": "center",
3364
- "alignSelf": "stretch",
3365
- "flexDirection": "row",
3366
- "flexGrow": 2,
3367
- "flexShrink": 1,
3368
- },
3369
- undefined,
3370
- ]
3599
+ {
3600
+ "alignItems": "center",
3601
+ "flexDirection": "row",
3602
+ "justifyContent": "center",
3603
+ "left": 0,
3604
+ "position": "absolute",
3605
+ "right": 0,
3606
+ "top": -10.666666666666666,
3607
+ "transform": [
3608
+ {
3609
+ "translateY": 0,
3610
+ },
3611
+ {
3612
+ "translateX": 24,
3613
+ },
3614
+ {
3615
+ "scale": 1,
3616
+ },
3617
+ ],
3618
+ "zIndex": 1,
3619
+ }
3371
3620
  }
3621
+ themeVariant="text"
3372
3622
  >
3373
- <View
3374
- pointerEvents="none"
3623
+ <Text
3624
+ allowFontScaling={false}
3375
3625
  style={
3376
3626
  [
3377
3627
  {
3378
- "alignItems": "center",
3379
- "bottom": 0,
3380
- "flexDirection": "row",
3381
- "left": 0,
3382
- "position": "absolute",
3383
- "right": 0,
3384
- "top": 0,
3385
- "zIndex": 9999,
3628
+ "color": "#001f23",
3629
+ "fontFamily": "BeVietnamPro-Regular",
3630
+ "fontSize": 16,
3631
+ "letterSpacing": 0.48,
3632
+ "lineHeight": 24,
3386
3633
  },
3387
- undefined,
3634
+ [
3635
+ {
3636
+ "color": "#cb300a",
3637
+ },
3638
+ {
3639
+ "backgroundColor": "#ffffff",
3640
+ },
3641
+ ],
3388
3642
  ]
3389
3643
  }
3390
- themeVariant="text"
3644
+ testID="input-label-asterisk"
3645
+ themeIntent="body"
3646
+ themeState="default"
3647
+ themeTypeface="neutral"
3648
+ themeVariant="regular"
3391
3649
  >
3392
- <Text
3393
- allowFontScaling={false}
3394
- style={
3650
+ *
3651
+ </Text>
3652
+ <Text
3653
+ allowFontScaling={false}
3654
+ onLayout={[Function]}
3655
+ style={
3656
+ [
3657
+ {
3658
+ "color": "#001f23",
3659
+ "fontFamily": "BeVietnamPro-Regular",
3660
+ "fontSize": 16,
3661
+ "letterSpacing": 0.48,
3662
+ "lineHeight": 24,
3663
+ },
3395
3664
  [
3396
3665
  {
3666
+ "alignContent": "center",
3667
+ "alignItems": "center",
3397
3668
  "color": "#001f23",
3398
- "fontFamily": "BeVietnamPro-Regular",
3399
- "fontSize": 16,
3400
- "letterSpacing": 0.48,
3401
- "lineHeight": 24,
3669
+ "marginTop": -2,
3670
+ "textAlignVertical": "center",
3402
3671
  },
3403
- [
3404
- {
3405
- "color": "#cb300a",
3406
- },
3407
- undefined,
3408
- ],
3409
- ]
3410
- }
3411
- themeIntent="body"
3412
- themeState="default"
3413
- themeTypeface="neutral"
3414
- themeVariant="regular"
3415
- >
3416
- *
3417
- </Text>
3418
- <Text
3419
- allowFontScaling={false}
3420
- style={
3421
- [
3422
3672
  {
3423
- "color": "#001f23",
3424
- "fontFamily": "BeVietnamPro-Regular",
3425
- "fontSize": 16,
3426
- "letterSpacing": 0.48,
3427
- "lineHeight": 24,
3673
+ "backgroundColor": "#ffffff",
3428
3674
  },
3429
- [
3430
- {
3431
- "alignContent": "center",
3432
- "alignItems": "center",
3433
- "color": "#001f23",
3434
- "marginTop": -2,
3435
- "textAlignVertical": "center",
3436
- },
3437
- undefined,
3438
- ],
3439
- ]
3440
- }
3441
- testID="input-label"
3442
- themeIntent="body"
3443
- themeState="default"
3444
- themeTypeface="neutral"
3445
- themeVariant="regular"
3446
- >
3447
- Amount (AUD)
3448
- </Text>
3449
- </View>
3675
+ ],
3676
+ ]
3677
+ }
3678
+ testID="input-label"
3679
+ themeIntent="body"
3680
+ themeState="default"
3681
+ themeTypeface="neutral"
3682
+ themeVariant="regular"
3683
+ >
3684
+ Amount (AUD)
3685
+ </Text>
3686
+ </View>
3687
+ <View
3688
+ style={
3689
+ [
3690
+ {
3691
+ "alignItems": "center",
3692
+ "alignSelf": "stretch",
3693
+ "flexDirection": "row",
3694
+ "flexGrow": 2,
3695
+ "flexShrink": 1,
3696
+ },
3697
+ undefined,
3698
+ ]
3699
+ }
3700
+ >
3450
3701
  <TextInput
3451
3702
  accessibilityState={
3452
3703
  {
@@ -3572,6 +3823,7 @@ exports[`TextInput readonly renders correctly 1`] = `
3572
3823
  }
3573
3824
  >
3574
3825
  <View
3826
+ onLayout={[Function]}
3575
3827
  style={
3576
3828
  [
3577
3829
  {
@@ -3611,24 +3863,51 @@ exports[`TextInput readonly renders correctly 1`] = `
3611
3863
  themeState="readonly"
3612
3864
  />
3613
3865
  <View
3866
+ onLayout={[Function]}
3867
+ >
3868
+ <HeroIcon
3869
+ name="dollar-sign"
3870
+ style={
3871
+ [
3872
+ {
3873
+ "color": "#001f23",
3874
+ "fontSize": 16,
3875
+ },
3876
+ undefined,
3877
+ ]
3878
+ }
3879
+ testID="input-prefix"
3880
+ themeIntent="text"
3881
+ themeSize="xsmall"
3882
+ />
3883
+ </View>
3884
+ <View
3885
+ collapsable={false}
3614
3886
  pointerEvents="none"
3615
3887
  style={
3616
- [
3617
- {
3618
- "backgroundColor": "#ffffff",
3619
- "flexDirection": "row",
3620
- "left": 16,
3621
- "paddingHorizontal": 4,
3622
- "position": "absolute",
3623
- "top": -4,
3624
- "zIndex": 1,
3625
- },
3626
- {
3627
- "backgroundColor": "#ffffff",
3628
- },
3629
- ]
3888
+ {
3889
+ "alignItems": "center",
3890
+ "flexDirection": "row",
3891
+ "justifyContent": "center",
3892
+ "left": 0,
3893
+ "position": "absolute",
3894
+ "right": 0,
3895
+ "top": -10.666666666666666,
3896
+ "transform": [
3897
+ {
3898
+ "translateY": 0,
3899
+ },
3900
+ {
3901
+ "translateX": 24,
3902
+ },
3903
+ {
3904
+ "scale": 1,
3905
+ },
3906
+ ],
3907
+ "zIndex": 1,
3908
+ }
3630
3909
  }
3631
- testID="label-container"
3910
+ themeVariant="text"
3632
3911
  >
3633
3912
  <Text
3634
3913
  allowFontScaling={false}
@@ -3637,40 +3916,47 @@ exports[`TextInput readonly renders correctly 1`] = `
3637
3916
  {
3638
3917
  "color": "#001f23",
3639
3918
  "fontFamily": "BeVietnamPro-Regular",
3640
- "fontSize": 12,
3919
+ "fontSize": 16,
3641
3920
  "letterSpacing": 0.48,
3642
- "lineHeight": 16,
3921
+ "lineHeight": 24,
3643
3922
  },
3644
3923
  [
3645
3924
  {
3646
3925
  "color": "#808f91",
3647
- "lineHeight": 12,
3648
3926
  },
3649
- undefined,
3927
+ {
3928
+ "backgroundColor": "#ffffff",
3929
+ },
3650
3930
  ],
3651
3931
  ]
3652
3932
  }
3653
- themeFontWeight="regular"
3933
+ testID="input-label-asterisk"
3654
3934
  themeIntent="body"
3655
3935
  themeState="readonly"
3936
+ themeTypeface="neutral"
3937
+ themeVariant="regular"
3656
3938
  >
3657
3939
  *
3658
3940
  </Text>
3659
3941
  <Text
3660
3942
  allowFontScaling={false}
3943
+ onLayout={[Function]}
3661
3944
  style={
3662
3945
  [
3663
3946
  {
3664
3947
  "color": "#001f23",
3665
3948
  "fontFamily": "BeVietnamPro-Regular",
3666
- "fontSize": 12,
3949
+ "fontSize": 16,
3667
3950
  "letterSpacing": 0.48,
3668
- "lineHeight": 16,
3951
+ "lineHeight": 24,
3669
3952
  },
3670
3953
  [
3671
3954
  {
3955
+ "alignContent": "center",
3956
+ "alignItems": "center",
3672
3957
  "color": "#808f91",
3673
- "lineHeight": 12,
3958
+ "marginTop": -2,
3959
+ "textAlignVertical": "center",
3674
3960
  },
3675
3961
  {
3676
3962
  "backgroundColor": "#ffffff",
@@ -3679,28 +3965,14 @@ exports[`TextInput readonly renders correctly 1`] = `
3679
3965
  ]
3680
3966
  }
3681
3967
  testID="input-label"
3682
- themeFontWeight="regular"
3683
3968
  themeIntent="body"
3684
3969
  themeState="readonly"
3970
+ themeTypeface="neutral"
3971
+ themeVariant="regular"
3685
3972
  >
3686
3973
  Amount (AUD)
3687
3974
  </Text>
3688
3975
  </View>
3689
- <HeroIcon
3690
- name="dollar-sign"
3691
- style={
3692
- [
3693
- {
3694
- "color": "#001f23",
3695
- "fontSize": 16,
3696
- },
3697
- undefined,
3698
- ]
3699
- }
3700
- testID="input-prefix"
3701
- themeIntent="text"
3702
- themeSize="xsmall"
3703
- />
3704
3976
  <View
3705
3977
  style={
3706
3978
  [
@@ -3836,6 +4108,7 @@ exports[`TextInput ref ref methods work correctly 1`] = `
3836
4108
  }
3837
4109
  >
3838
4110
  <View
4111
+ onLayout={[Function]}
3839
4112
  style={
3840
4113
  [
3841
4114
  {
@@ -3875,40 +4148,55 @@ exports[`TextInput ref ref methods work correctly 1`] = `
3875
4148
  themeState="filled"
3876
4149
  />
3877
4150
  <View
4151
+ onLayout={[Function]}
4152
+ />
4153
+ <View
4154
+ collapsable={false}
3878
4155
  pointerEvents="none"
3879
4156
  style={
3880
- [
3881
- {
3882
- "backgroundColor": "#ffffff",
3883
- "flexDirection": "row",
3884
- "left": 16,
3885
- "paddingHorizontal": 4,
3886
- "position": "absolute",
3887
- "top": -4,
3888
- "zIndex": 1,
3889
- },
3890
- {
3891
- "backgroundColor": "#ffffff",
3892
- },
3893
- ]
4157
+ {
4158
+ "alignItems": "center",
4159
+ "flexDirection": "row",
4160
+ "justifyContent": "center",
4161
+ "left": 0,
4162
+ "position": "absolute",
4163
+ "right": 0,
4164
+ "top": -10.666666666666666,
4165
+ "transform": [
4166
+ {
4167
+ "translateY": 0,
4168
+ },
4169
+ {
4170
+ "translateX": 24,
4171
+ },
4172
+ {
4173
+ "scale": 1,
4174
+ },
4175
+ ],
4176
+ "zIndex": 1,
4177
+ }
3894
4178
  }
3895
- testID="label-container"
4179
+ themeVariant="text"
3896
4180
  >
3897
4181
  <Text
3898
4182
  allowFontScaling={false}
4183
+ onLayout={[Function]}
3899
4184
  style={
3900
4185
  [
3901
4186
  {
3902
4187
  "color": "#001f23",
3903
4188
  "fontFamily": "BeVietnamPro-Regular",
3904
- "fontSize": 12,
4189
+ "fontSize": 16,
3905
4190
  "letterSpacing": 0.48,
3906
- "lineHeight": 16,
4191
+ "lineHeight": 24,
3907
4192
  },
3908
4193
  [
3909
4194
  {
4195
+ "alignContent": "center",
4196
+ "alignItems": "center",
3910
4197
  "color": "#001f23",
3911
- "lineHeight": 12,
4198
+ "marginTop": -2,
4199
+ "textAlignVertical": "center",
3912
4200
  },
3913
4201
  {
3914
4202
  "backgroundColor": "#ffffff",
@@ -3917,9 +4205,10 @@ exports[`TextInput ref ref methods work correctly 1`] = `
3917
4205
  ]
3918
4206
  }
3919
4207
  testID="input-label"
3920
- themeFontWeight="regular"
3921
4208
  themeIntent="body"
3922
4209
  themeState="filled"
4210
+ themeTypeface="neutral"
4211
+ themeVariant="regular"
3923
4212
  >
3924
4213
  Amount (AUD)
3925
4214
  </Text>
@@ -4044,6 +4333,7 @@ exports[`TextInput required renders correctly 1`] = `
4044
4333
  }
4045
4334
  >
4046
4335
  <View
4336
+ onLayout={[Function]}
4047
4337
  style={
4048
4338
  [
4049
4339
  {
@@ -4082,112 +4372,131 @@ exports[`TextInput required renders correctly 1`] = `
4082
4372
  themeFocused={false}
4083
4373
  themeState="default"
4084
4374
  />
4085
- <HeroIcon
4086
- name="dollar-sign"
4087
- style={
4088
- [
4089
- {
4090
- "color": "#001f23",
4091
- "fontSize": 16,
4092
- },
4093
- undefined,
4094
- ]
4095
- }
4096
- testID="input-prefix"
4097
- themeIntent="text"
4098
- themeSize="xsmall"
4099
- />
4100
4375
  <View
4376
+ onLayout={[Function]}
4377
+ >
4378
+ <HeroIcon
4379
+ name="dollar-sign"
4380
+ style={
4381
+ [
4382
+ {
4383
+ "color": "#001f23",
4384
+ "fontSize": 16,
4385
+ },
4386
+ undefined,
4387
+ ]
4388
+ }
4389
+ testID="input-prefix"
4390
+ themeIntent="text"
4391
+ themeSize="xsmall"
4392
+ />
4393
+ </View>
4394
+ <View
4395
+ collapsable={false}
4396
+ pointerEvents="none"
4101
4397
  style={
4102
- [
4103
- {
4104
- "alignItems": "center",
4105
- "alignSelf": "stretch",
4106
- "flexDirection": "row",
4107
- "flexGrow": 2,
4108
- "flexShrink": 1,
4109
- },
4110
- undefined,
4111
- ]
4398
+ {
4399
+ "alignItems": "center",
4400
+ "flexDirection": "row",
4401
+ "justifyContent": "center",
4402
+ "left": 0,
4403
+ "position": "absolute",
4404
+ "right": 0,
4405
+ "top": -10.666666666666666,
4406
+ "transform": [
4407
+ {
4408
+ "translateY": 0,
4409
+ },
4410
+ {
4411
+ "translateX": 24,
4412
+ },
4413
+ {
4414
+ "scale": 1,
4415
+ },
4416
+ ],
4417
+ "zIndex": 1,
4418
+ }
4112
4419
  }
4420
+ themeVariant="text"
4113
4421
  >
4114
- <View
4115
- pointerEvents="none"
4422
+ <Text
4423
+ allowFontScaling={false}
4116
4424
  style={
4117
4425
  [
4118
4426
  {
4119
- "alignItems": "center",
4120
- "bottom": 0,
4121
- "flexDirection": "row",
4122
- "left": 0,
4123
- "position": "absolute",
4124
- "right": 0,
4125
- "top": 0,
4126
- "zIndex": 9999,
4427
+ "color": "#001f23",
4428
+ "fontFamily": "BeVietnamPro-Regular",
4429
+ "fontSize": 16,
4430
+ "letterSpacing": 0.48,
4431
+ "lineHeight": 24,
4127
4432
  },
4128
- undefined,
4433
+ [
4434
+ {
4435
+ "color": "#cb300a",
4436
+ },
4437
+ {
4438
+ "backgroundColor": "#ffffff",
4439
+ },
4440
+ ],
4129
4441
  ]
4130
4442
  }
4131
- themeVariant="text"
4443
+ testID="input-label-asterisk"
4444
+ themeIntent="body"
4445
+ themeState="default"
4446
+ themeTypeface="neutral"
4447
+ themeVariant="regular"
4132
4448
  >
4133
- <Text
4134
- allowFontScaling={false}
4135
- style={
4449
+ *
4450
+ </Text>
4451
+ <Text
4452
+ allowFontScaling={false}
4453
+ onLayout={[Function]}
4454
+ style={
4455
+ [
4456
+ {
4457
+ "color": "#001f23",
4458
+ "fontFamily": "BeVietnamPro-Regular",
4459
+ "fontSize": 16,
4460
+ "letterSpacing": 0.48,
4461
+ "lineHeight": 24,
4462
+ },
4136
4463
  [
4137
4464
  {
4465
+ "alignContent": "center",
4466
+ "alignItems": "center",
4138
4467
  "color": "#001f23",
4139
- "fontFamily": "BeVietnamPro-Regular",
4140
- "fontSize": 16,
4141
- "letterSpacing": 0.48,
4142
- "lineHeight": 24,
4468
+ "marginTop": -2,
4469
+ "textAlignVertical": "center",
4143
4470
  },
4144
- [
4145
- {
4146
- "color": "#cb300a",
4147
- },
4148
- undefined,
4149
- ],
4150
- ]
4151
- }
4152
- themeIntent="body"
4153
- themeState="default"
4154
- themeTypeface="neutral"
4155
- themeVariant="regular"
4156
- >
4157
- *
4158
- </Text>
4159
- <Text
4160
- allowFontScaling={false}
4161
- style={
4162
- [
4163
4471
  {
4164
- "color": "#001f23",
4165
- "fontFamily": "BeVietnamPro-Regular",
4166
- "fontSize": 16,
4167
- "letterSpacing": 0.48,
4168
- "lineHeight": 24,
4472
+ "backgroundColor": "#ffffff",
4169
4473
  },
4170
- [
4171
- {
4172
- "alignContent": "center",
4173
- "alignItems": "center",
4174
- "color": "#001f23",
4175
- "marginTop": -2,
4176
- "textAlignVertical": "center",
4177
- },
4178
- undefined,
4179
- ],
4180
- ]
4181
- }
4182
- testID="input-label"
4183
- themeIntent="body"
4184
- themeState="default"
4185
- themeTypeface="neutral"
4186
- themeVariant="regular"
4187
- >
4188
- Amount (AUD)
4189
- </Text>
4190
- </View>
4474
+ ],
4475
+ ]
4476
+ }
4477
+ testID="input-label"
4478
+ themeIntent="body"
4479
+ themeState="default"
4480
+ themeTypeface="neutral"
4481
+ themeVariant="regular"
4482
+ >
4483
+ Amount (AUD)
4484
+ </Text>
4485
+ </View>
4486
+ <View
4487
+ style={
4488
+ [
4489
+ {
4490
+ "alignItems": "center",
4491
+ "alignSelf": "stretch",
4492
+ "flexDirection": "row",
4493
+ "flexGrow": 2,
4494
+ "flexShrink": 1,
4495
+ },
4496
+ undefined,
4497
+ ]
4498
+ }
4499
+ >
4191
4500
  <TextInput
4192
4501
  accessibilityState={
4193
4502
  {
@@ -4308,6 +4617,7 @@ exports[`TextInput variants renders textarea variant correctly 1`] = `
4308
4617
  }
4309
4618
  >
4310
4619
  <View
4620
+ onLayout={[Function]}
4311
4621
  style={
4312
4622
  [
4313
4623
  {
@@ -4347,40 +4657,55 @@ exports[`TextInput variants renders textarea variant correctly 1`] = `
4347
4657
  themeState="filled"
4348
4658
  />
4349
4659
  <View
4660
+ onLayout={[Function]}
4661
+ />
4662
+ <View
4663
+ collapsable={false}
4350
4664
  pointerEvents="none"
4351
4665
  style={
4352
- [
4353
- {
4354
- "backgroundColor": "#ffffff",
4355
- "flexDirection": "row",
4356
- "left": 16,
4357
- "paddingHorizontal": 4,
4358
- "position": "absolute",
4359
- "top": -4,
4360
- "zIndex": 1,
4361
- },
4362
- {
4363
- "backgroundColor": "#ffffff",
4364
- },
4365
- ]
4666
+ {
4667
+ "alignItems": "flex-start",
4668
+ "flexDirection": "row",
4669
+ "justifyContent": "center",
4670
+ "left": 0,
4671
+ "position": "absolute",
4672
+ "right": 0,
4673
+ "top": -10.666666666666666,
4674
+ "transform": [
4675
+ {
4676
+ "translateY": 24,
4677
+ },
4678
+ {
4679
+ "translateX": 24,
4680
+ },
4681
+ {
4682
+ "scale": 1,
4683
+ },
4684
+ ],
4685
+ "zIndex": 1,
4686
+ }
4366
4687
  }
4367
- testID="label-container"
4688
+ themeVariant="textarea"
4368
4689
  >
4369
4690
  <Text
4370
4691
  allowFontScaling={false}
4692
+ onLayout={[Function]}
4371
4693
  style={
4372
4694
  [
4373
4695
  {
4374
4696
  "color": "#001f23",
4375
4697
  "fontFamily": "BeVietnamPro-Regular",
4376
- "fontSize": 12,
4698
+ "fontSize": 16,
4377
4699
  "letterSpacing": 0.48,
4378
- "lineHeight": 16,
4700
+ "lineHeight": 24,
4379
4701
  },
4380
4702
  [
4381
4703
  {
4704
+ "alignContent": "center",
4705
+ "alignItems": "center",
4382
4706
  "color": "#001f23",
4383
- "lineHeight": 12,
4707
+ "marginTop": -2,
4708
+ "textAlignVertical": "center",
4384
4709
  },
4385
4710
  {
4386
4711
  "backgroundColor": "#ffffff",
@@ -4389,9 +4714,10 @@ exports[`TextInput variants renders textarea variant correctly 1`] = `
4389
4714
  ]
4390
4715
  }
4391
4716
  testID="input-label"
4392
- themeFontWeight="regular"
4393
4717
  themeIntent="body"
4394
4718
  themeState="filled"
4719
+ themeTypeface="neutral"
4720
+ themeVariant="regular"
4395
4721
  >
4396
4722
  Amount (AUD)
4397
4723
  </Text>