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

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 +1 -1
  2. package/CHANGELOG.md +12 -2
  3. package/es/index.js +731 -584
  4. package/lib/index.js +731 -584
  5. package/package.json +1 -1
  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 +102 -57
  15. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap +34 -19
  16. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap +34 -19
  17. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap +34 -19
  18. package/src/components/RichTextEditor/RichTextEditor.tsx +76 -38
  19. package/src/components/RichTextEditor/__tests__/__snapshots__/RichTextEditor.spec.tsx.snap +126 -102
  20. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +235 -146
  21. package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +201 -127
  22. package/src/components/TextInput/StyledTextInput.tsx +8 -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 +1126 -833
  26. package/src/components/TextInput/__tests__/index.spec.tsx +2 -2
  27. package/src/components/TextInput/index.tsx +113 -57
  28. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap +68 -38
  29. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap +68 -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,50 @@ 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
+ "left": -32,
90
+ "position": "absolute",
91
+ "right": 0,
92
+ "top": -10.666666666666666,
93
+ "transform": [
94
+ {
95
+ "translateY": 0,
96
+ },
97
+ {
98
+ "translateX": 0,
99
+ },
100
+ {
101
+ "scale": 1,
102
+ },
103
+ ],
104
+ "zIndex": 1,
105
+ }
79
106
  }
80
- testID="label-container"
107
+ themeVariant="text"
81
108
  >
82
109
  <Text
83
110
  allowFontScaling={false}
@@ -86,22 +113,25 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
86
113
  {
87
114
  "color": "#001f23",
88
115
  "fontFamily": "BeVietnamPro-Regular",
89
- "fontSize": 12,
116
+ "fontSize": 16,
90
117
  "letterSpacing": 0.48,
91
- "lineHeight": 16,
118
+ "lineHeight": 24,
92
119
  },
93
120
  [
94
121
  {
95
122
  "color": "#cb300a",
96
- "lineHeight": 12,
97
123
  },
98
- undefined,
124
+ {
125
+ "backgroundColor": "#f6f6f7",
126
+ },
99
127
  ],
100
128
  ]
101
129
  }
102
- themeFontWeight="regular"
130
+ testID="input-label-asterisk"
103
131
  themeIntent="body"
104
132
  themeState="filled"
133
+ themeTypeface="neutral"
134
+ themeVariant="regular"
105
135
  >
106
136
  *
107
137
  </Text>
@@ -112,14 +142,17 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
112
142
  {
113
143
  "color": "#001f23",
114
144
  "fontFamily": "BeVietnamPro-Regular",
115
- "fontSize": 12,
145
+ "fontSize": 16,
116
146
  "letterSpacing": 0.48,
117
- "lineHeight": 16,
147
+ "lineHeight": 24,
118
148
  },
119
149
  [
120
150
  {
151
+ "alignContent": "center",
152
+ "alignItems": "center",
121
153
  "color": "#001f23",
122
- "lineHeight": 12,
154
+ "marginTop": -2,
155
+ "textAlignVertical": "center",
123
156
  },
124
157
  {
125
158
  "backgroundColor": "#f6f6f7",
@@ -128,28 +161,14 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
128
161
  ]
129
162
  }
130
163
  testID="input-label"
131
- themeFontWeight="regular"
132
164
  themeIntent="body"
133
165
  themeState="filled"
166
+ themeTypeface="neutral"
167
+ themeVariant="regular"
134
168
  >
135
169
  Amount (AUD)
136
170
  </Text>
137
171
  </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
172
  <View
154
173
  style={
155
174
  [
@@ -324,6 +343,7 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
324
343
  }
325
344
  >
326
345
  <View
346
+ onLayout={[Function]}
327
347
  style={
328
348
  [
329
349
  {
@@ -363,24 +383,50 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
363
383
  themeState="filled"
364
384
  />
365
385
  <View
386
+ onLayout={[Function]}
387
+ >
388
+ <HeroIcon
389
+ name="dollar-sign"
390
+ style={
391
+ [
392
+ {
393
+ "color": "#001f23",
394
+ "fontSize": 16,
395
+ },
396
+ undefined,
397
+ ]
398
+ }
399
+ testID="input-prefix"
400
+ themeIntent="text"
401
+ themeSize="xsmall"
402
+ />
403
+ </View>
404
+ <View
405
+ collapsable={false}
366
406
  pointerEvents="none"
367
407
  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
- ]
408
+ {
409
+ "alignItems": "center",
410
+ "flexDirection": "row",
411
+ "left": -32,
412
+ "position": "absolute",
413
+ "right": 0,
414
+ "top": -10.666666666666666,
415
+ "transform": [
416
+ {
417
+ "translateY": 0,
418
+ },
419
+ {
420
+ "translateX": 0,
421
+ },
422
+ {
423
+ "scale": 1,
424
+ },
425
+ ],
426
+ "zIndex": 1,
427
+ }
382
428
  }
383
- testID="label-container"
429
+ themeVariant="text"
384
430
  >
385
431
  <Text
386
432
  allowFontScaling={false}
@@ -389,22 +435,25 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
389
435
  {
390
436
  "color": "#001f23",
391
437
  "fontFamily": "BeVietnamPro-Regular",
392
- "fontSize": 12,
438
+ "fontSize": 16,
393
439
  "letterSpacing": 0.48,
394
- "lineHeight": 16,
440
+ "lineHeight": 24,
395
441
  },
396
442
  [
397
443
  {
398
444
  "color": "#cb300a",
399
- "lineHeight": 12,
400
445
  },
401
- undefined,
446
+ {
447
+ "backgroundColor": "#ffffff",
448
+ },
402
449
  ],
403
450
  ]
404
451
  }
405
- themeFontWeight="regular"
452
+ testID="input-label-asterisk"
406
453
  themeIntent="body"
407
454
  themeState="filled"
455
+ themeTypeface="neutral"
456
+ themeVariant="regular"
408
457
  >
409
458
  *
410
459
  </Text>
@@ -415,14 +464,17 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
415
464
  {
416
465
  "color": "#001f23",
417
466
  "fontFamily": "BeVietnamPro-Regular",
418
- "fontSize": 12,
467
+ "fontSize": 16,
419
468
  "letterSpacing": 0.48,
420
- "lineHeight": 16,
469
+ "lineHeight": 24,
421
470
  },
422
471
  [
423
472
  {
473
+ "alignContent": "center",
474
+ "alignItems": "center",
424
475
  "color": "#001f23",
425
- "lineHeight": 12,
476
+ "marginTop": -2,
477
+ "textAlignVertical": "center",
426
478
  },
427
479
  {
428
480
  "backgroundColor": "#ffffff",
@@ -431,28 +483,14 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
431
483
  ]
432
484
  }
433
485
  testID="input-label"
434
- themeFontWeight="regular"
435
486
  themeIntent="body"
436
487
  themeState="filled"
488
+ themeTypeface="neutral"
489
+ themeVariant="regular"
437
490
  >
438
491
  Amount (AUD)
439
492
  </Text>
440
493
  </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
494
  <View
457
495
  style={
458
496
  [
@@ -626,6 +664,7 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
626
664
  }
627
665
  >
628
666
  <View
667
+ onLayout={[Function]}
629
668
  style={
630
669
  [
631
670
  {
@@ -665,24 +704,50 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
665
704
  themeState="filled"
666
705
  />
667
706
  <View
707
+ onLayout={[Function]}
708
+ >
709
+ <HeroIcon
710
+ name="dollar-sign"
711
+ style={
712
+ [
713
+ {
714
+ "color": "#001f23",
715
+ "fontSize": 16,
716
+ },
717
+ undefined,
718
+ ]
719
+ }
720
+ testID="input-prefix"
721
+ themeIntent="text"
722
+ themeSize="xsmall"
723
+ />
724
+ </View>
725
+ <View
726
+ collapsable={false}
668
727
  pointerEvents="none"
669
728
  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
- ]
729
+ {
730
+ "alignItems": "center",
731
+ "flexDirection": "row",
732
+ "left": -32,
733
+ "position": "absolute",
734
+ "right": 0,
735
+ "top": -10.666666666666666,
736
+ "transform": [
737
+ {
738
+ "translateY": 0,
739
+ },
740
+ {
741
+ "translateX": 0,
742
+ },
743
+ {
744
+ "scale": 1,
745
+ },
746
+ ],
747
+ "zIndex": 1,
748
+ }
684
749
  }
685
- testID="label-container"
750
+ themeVariant="text"
686
751
  >
687
752
  <Text
688
753
  allowFontScaling={false}
@@ -691,22 +756,25 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
691
756
  {
692
757
  "color": "#001f23",
693
758
  "fontFamily": "BeVietnamPro-Regular",
694
- "fontSize": 12,
759
+ "fontSize": 16,
695
760
  "letterSpacing": 0.48,
696
- "lineHeight": 16,
761
+ "lineHeight": 24,
697
762
  },
698
763
  [
699
764
  {
700
765
  "color": "#cb300a",
701
- "lineHeight": 12,
702
766
  },
703
- undefined,
767
+ {
768
+ "backgroundColor": "#ffffff",
769
+ },
704
770
  ],
705
771
  ]
706
772
  }
707
- themeFontWeight="regular"
773
+ testID="input-label-asterisk"
708
774
  themeIntent="body"
709
775
  themeState="filled"
776
+ themeTypeface="neutral"
777
+ themeVariant="regular"
710
778
  >
711
779
  *
712
780
  </Text>
@@ -717,14 +785,17 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
717
785
  {
718
786
  "color": "#001f23",
719
787
  "fontFamily": "BeVietnamPro-Regular",
720
- "fontSize": 12,
788
+ "fontSize": 16,
721
789
  "letterSpacing": 0.48,
722
- "lineHeight": 16,
790
+ "lineHeight": 24,
723
791
  },
724
792
  [
725
793
  {
794
+ "alignContent": "center",
795
+ "alignItems": "center",
726
796
  "color": "#001f23",
727
- "lineHeight": 12,
797
+ "marginTop": -2,
798
+ "textAlignVertical": "center",
728
799
  },
729
800
  {
730
801
  "backgroundColor": "#ffffff",
@@ -733,28 +804,14 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
733
804
  ]
734
805
  }
735
806
  testID="input-label"
736
- themeFontWeight="regular"
737
807
  themeIntent="body"
738
808
  themeState="filled"
809
+ themeTypeface="neutral"
810
+ themeVariant="regular"
739
811
  >
740
812
  Amount (AUD)
741
813
  </Text>
742
814
  </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
815
  <View
759
816
  style={
760
817
  [
@@ -930,6 +987,7 @@ exports[`TextInput disabled renders correctly 1`] = `
930
987
  testID="disabled-text-input"
931
988
  >
932
989
  <View
990
+ onLayout={[Function]}
933
991
  style={
934
992
  [
935
993
  {
@@ -969,24 +1027,34 @@ exports[`TextInput disabled renders correctly 1`] = `
969
1027
  themeState="disabled"
970
1028
  />
971
1029
  <View
1030
+ onLayout={[Function]}
1031
+ />
1032
+ <View
1033
+ collapsable={false}
972
1034
  pointerEvents="none"
973
1035
  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
- ]
1036
+ {
1037
+ "alignItems": "center",
1038
+ "flexDirection": "row",
1039
+ "left": -32,
1040
+ "position": "absolute",
1041
+ "right": 0,
1042
+ "top": -10.666666666666666,
1043
+ "transform": [
1044
+ {
1045
+ "translateY": 0,
1046
+ },
1047
+ {
1048
+ "translateX": 48,
1049
+ },
1050
+ {
1051
+ "scale": 1,
1052
+ },
1053
+ ],
1054
+ "zIndex": 1,
1055
+ }
988
1056
  }
989
- testID="label-container"
1057
+ themeVariant="text"
990
1058
  >
991
1059
  <Text
992
1060
  allowFontScaling={false}
@@ -995,22 +1063,25 @@ exports[`TextInput disabled renders correctly 1`] = `
995
1063
  {
996
1064
  "color": "#001f23",
997
1065
  "fontFamily": "BeVietnamPro-Regular",
998
- "fontSize": 12,
1066
+ "fontSize": 16,
999
1067
  "letterSpacing": 0.48,
1000
- "lineHeight": 16,
1068
+ "lineHeight": 24,
1001
1069
  },
1002
1070
  [
1003
1071
  {
1004
1072
  "color": "#bfc1c5",
1005
- "lineHeight": 12,
1006
1073
  },
1007
- undefined,
1074
+ {
1075
+ "backgroundColor": "#ffffff",
1076
+ },
1008
1077
  ],
1009
1078
  ]
1010
1079
  }
1011
- themeFontWeight="regular"
1080
+ testID="input-label-asterisk"
1012
1081
  themeIntent="body"
1013
1082
  themeState="disabled"
1083
+ themeTypeface="neutral"
1084
+ themeVariant="regular"
1014
1085
  >
1015
1086
  *
1016
1087
  </Text>
@@ -1021,14 +1092,17 @@ exports[`TextInput disabled renders correctly 1`] = `
1021
1092
  {
1022
1093
  "color": "#001f23",
1023
1094
  "fontFamily": "BeVietnamPro-Regular",
1024
- "fontSize": 12,
1095
+ "fontSize": 16,
1025
1096
  "letterSpacing": 0.48,
1026
- "lineHeight": 16,
1097
+ "lineHeight": 24,
1027
1098
  },
1028
1099
  [
1029
1100
  {
1101
+ "alignContent": "center",
1102
+ "alignItems": "center",
1030
1103
  "color": "#bfc1c5",
1031
- "lineHeight": 12,
1104
+ "marginTop": -2,
1105
+ "textAlignVertical": "center",
1032
1106
  },
1033
1107
  {
1034
1108
  "backgroundColor": "#ffffff",
@@ -1037,9 +1111,10 @@ exports[`TextInput disabled renders correctly 1`] = `
1037
1111
  ]
1038
1112
  }
1039
1113
  testID="input-label"
1040
- themeFontWeight="regular"
1041
1114
  themeIntent="body"
1042
1115
  themeState="disabled"
1116
+ themeTypeface="neutral"
1117
+ themeVariant="regular"
1043
1118
  >
1044
1119
  Amount (AUD)
1045
1120
  </Text>
@@ -1164,6 +1239,7 @@ exports[`TextInput error renders correctly 1`] = `
1164
1239
  }
1165
1240
  >
1166
1241
  <View
1242
+ onLayout={[Function]}
1167
1243
  style={
1168
1244
  [
1169
1245
  {
@@ -1202,112 +1278,129 @@ exports[`TextInput error renders correctly 1`] = `
1202
1278
  themeFocused={false}
1203
1279
  themeState="error"
1204
1280
  />
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
1281
  <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
- }
1282
+ onLayout={[Function]}
1233
1283
  >
1234
- <View
1235
- pointerEvents="none"
1284
+ <HeroIcon
1285
+ name="dollar-sign"
1236
1286
  style={
1237
1287
  [
1238
1288
  {
1239
- "alignItems": "center",
1240
- "bottom": 0,
1241
- "flexDirection": "row",
1242
- "left": 0,
1243
- "position": "absolute",
1244
- "right": 0,
1245
- "top": 0,
1246
- "zIndex": 9999,
1289
+ "color": "#001f23",
1290
+ "fontSize": 16,
1247
1291
  },
1248
1292
  undefined,
1249
1293
  ]
1250
1294
  }
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={
1295
+ testID="input-prefix"
1296
+ themeIntent="text"
1297
+ themeSize="xsmall"
1298
+ />
1299
+ </View>
1300
+ <View
1301
+ collapsable={false}
1302
+ pointerEvents="none"
1303
+ style={
1304
+ {
1305
+ "alignItems": "center",
1306
+ "flexDirection": "row",
1307
+ "left": -32,
1308
+ "position": "absolute",
1309
+ "right": 0,
1310
+ "top": -10.666666666666666,
1311
+ "transform": [
1312
+ {
1313
+ "translateY": 0,
1314
+ },
1315
+ {
1316
+ "translateX": 0,
1317
+ },
1318
+ {
1319
+ "scale": 1,
1320
+ },
1321
+ ],
1322
+ "zIndex": 1,
1323
+ }
1324
+ }
1325
+ themeVariant="text"
1326
+ >
1327
+ <Text
1328
+ allowFontScaling={false}
1329
+ style={
1330
+ [
1331
+ {
1332
+ "color": "#001f23",
1333
+ "fontFamily": "BeVietnamPro-Regular",
1334
+ "fontSize": 16,
1335
+ "letterSpacing": 0.48,
1336
+ "lineHeight": 24,
1337
+ },
1338
+ [
1339
+ {
1340
+ "color": "#cb300a",
1341
+ },
1342
+ {
1343
+ "backgroundColor": "#ffffff",
1344
+ },
1345
+ ],
1346
+ ]
1347
+ }
1348
+ testID="input-label-asterisk"
1349
+ themeIntent="body"
1350
+ themeState="error"
1351
+ themeTypeface="neutral"
1352
+ themeVariant="regular"
1353
+ >
1354
+ *
1355
+ </Text>
1356
+ <Text
1357
+ allowFontScaling={false}
1358
+ style={
1359
+ [
1360
+ {
1361
+ "color": "#001f23",
1362
+ "fontFamily": "BeVietnamPro-Regular",
1363
+ "fontSize": 16,
1364
+ "letterSpacing": 0.48,
1365
+ "lineHeight": 24,
1366
+ },
1282
1367
  [
1283
1368
  {
1369
+ "alignContent": "center",
1370
+ "alignItems": "center",
1284
1371
  "color": "#001f23",
1285
- "fontFamily": "BeVietnamPro-Regular",
1286
- "fontSize": 16,
1287
- "letterSpacing": 0.48,
1288
- "lineHeight": 24,
1372
+ "marginTop": -2,
1373
+ "textAlignVertical": "center",
1289
1374
  },
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>
1375
+ {
1376
+ "backgroundColor": "#ffffff",
1377
+ },
1378
+ ],
1379
+ ]
1380
+ }
1381
+ testID="input-label"
1382
+ themeIntent="body"
1383
+ themeState="error"
1384
+ themeTypeface="neutral"
1385
+ themeVariant="regular"
1386
+ >
1387
+ Amount (AUD)
1388
+ </Text>
1389
+ </View>
1390
+ <View
1391
+ style={
1392
+ [
1393
+ {
1394
+ "alignItems": "center",
1395
+ "alignSelf": "stretch",
1396
+ "flexDirection": "row",
1397
+ "flexGrow": 2,
1398
+ "flexShrink": 1,
1399
+ },
1400
+ undefined,
1401
+ ]
1402
+ }
1403
+ >
1311
1404
  <TextInput
1312
1405
  accessibilityState={
1313
1406
  {
@@ -1470,6 +1563,7 @@ exports[`TextInput filled renders correctly 1`] = `
1470
1563
  }
1471
1564
  >
1472
1565
  <View
1566
+ onLayout={[Function]}
1473
1567
  style={
1474
1568
  [
1475
1569
  {
@@ -1509,24 +1603,50 @@ exports[`TextInput filled renders correctly 1`] = `
1509
1603
  themeState="filled"
1510
1604
  />
1511
1605
  <View
1606
+ onLayout={[Function]}
1607
+ >
1608
+ <HeroIcon
1609
+ name="dollar-sign"
1610
+ style={
1611
+ [
1612
+ {
1613
+ "color": "#001f23",
1614
+ "fontSize": 16,
1615
+ },
1616
+ undefined,
1617
+ ]
1618
+ }
1619
+ testID="input-prefix"
1620
+ themeIntent="text"
1621
+ themeSize="xsmall"
1622
+ />
1623
+ </View>
1624
+ <View
1625
+ collapsable={false}
1512
1626
  pointerEvents="none"
1513
1627
  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
- ]
1628
+ {
1629
+ "alignItems": "center",
1630
+ "flexDirection": "row",
1631
+ "left": -32,
1632
+ "position": "absolute",
1633
+ "right": 0,
1634
+ "top": -10.666666666666666,
1635
+ "transform": [
1636
+ {
1637
+ "translateY": 0,
1638
+ },
1639
+ {
1640
+ "translateX": 0,
1641
+ },
1642
+ {
1643
+ "scale": 1,
1644
+ },
1645
+ ],
1646
+ "zIndex": 1,
1647
+ }
1528
1648
  }
1529
- testID="label-container"
1649
+ themeVariant="text"
1530
1650
  >
1531
1651
  <Text
1532
1652
  allowFontScaling={false}
@@ -1535,14 +1655,17 @@ exports[`TextInput filled renders correctly 1`] = `
1535
1655
  {
1536
1656
  "color": "#001f23",
1537
1657
  "fontFamily": "BeVietnamPro-Regular",
1538
- "fontSize": 12,
1658
+ "fontSize": 16,
1539
1659
  "letterSpacing": 0.48,
1540
- "lineHeight": 16,
1660
+ "lineHeight": 24,
1541
1661
  },
1542
1662
  [
1543
1663
  {
1664
+ "alignContent": "center",
1665
+ "alignItems": "center",
1544
1666
  "color": "#001f23",
1545
- "lineHeight": 12,
1667
+ "marginTop": -2,
1668
+ "textAlignVertical": "center",
1546
1669
  },
1547
1670
  {
1548
1671
  "backgroundColor": "#ffffff",
@@ -1551,28 +1674,14 @@ exports[`TextInput filled renders correctly 1`] = `
1551
1674
  ]
1552
1675
  }
1553
1676
  testID="input-label"
1554
- themeFontWeight="regular"
1555
1677
  themeIntent="body"
1556
1678
  themeState="filled"
1679
+ themeTypeface="neutral"
1680
+ themeVariant="regular"
1557
1681
  >
1558
1682
  Amount (AUD)
1559
1683
  </Text>
1560
1684
  </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
1685
  <View
1577
1686
  style={
1578
1687
  [
@@ -1708,6 +1817,7 @@ exports[`TextInput helper text renders correctly 1`] = `
1708
1817
  }
1709
1818
  >
1710
1819
  <View
1820
+ onLayout={[Function]}
1711
1821
  style={
1712
1822
  [
1713
1823
  {
@@ -1746,21 +1856,115 @@ exports[`TextInput helper text renders correctly 1`] = `
1746
1856
  themeFocused={false}
1747
1857
  themeState="default"
1748
1858
  />
1749
- <HeroIcon
1750
- name="dollar-sign"
1859
+ <View
1860
+ onLayout={[Function]}
1861
+ >
1862
+ <HeroIcon
1863
+ name="dollar-sign"
1864
+ style={
1865
+ [
1866
+ {
1867
+ "color": "#001f23",
1868
+ "fontSize": 16,
1869
+ },
1870
+ undefined,
1871
+ ]
1872
+ }
1873
+ testID="input-prefix"
1874
+ themeIntent="text"
1875
+ themeSize="xsmall"
1876
+ />
1877
+ </View>
1878
+ <View
1879
+ collapsable={false}
1880
+ pointerEvents="none"
1751
1881
  style={
1752
- [
1753
- {
1754
- "color": "#001f23",
1755
- "fontSize": 16,
1756
- },
1757
- undefined,
1758
- ]
1882
+ {
1883
+ "alignItems": "center",
1884
+ "flexDirection": "row",
1885
+ "left": -32,
1886
+ "position": "absolute",
1887
+ "right": 0,
1888
+ "top": -10.666666666666666,
1889
+ "transform": [
1890
+ {
1891
+ "translateY": 0,
1892
+ },
1893
+ {
1894
+ "translateX": 0,
1895
+ },
1896
+ {
1897
+ "scale": 1,
1898
+ },
1899
+ ],
1900
+ "zIndex": 1,
1901
+ }
1759
1902
  }
1760
- testID="input-prefix"
1761
- themeIntent="text"
1762
- themeSize="xsmall"
1763
- />
1903
+ themeVariant="text"
1904
+ >
1905
+ <Text
1906
+ allowFontScaling={false}
1907
+ style={
1908
+ [
1909
+ {
1910
+ "color": "#001f23",
1911
+ "fontFamily": "BeVietnamPro-Regular",
1912
+ "fontSize": 16,
1913
+ "letterSpacing": 0.48,
1914
+ "lineHeight": 24,
1915
+ },
1916
+ [
1917
+ {
1918
+ "color": "#cb300a",
1919
+ },
1920
+ {
1921
+ "backgroundColor": "#ffffff",
1922
+ },
1923
+ ],
1924
+ ]
1925
+ }
1926
+ testID="input-label-asterisk"
1927
+ themeIntent="body"
1928
+ themeState="default"
1929
+ themeTypeface="neutral"
1930
+ themeVariant="regular"
1931
+ >
1932
+ *
1933
+ </Text>
1934
+ <Text
1935
+ allowFontScaling={false}
1936
+ style={
1937
+ [
1938
+ {
1939
+ "color": "#001f23",
1940
+ "fontFamily": "BeVietnamPro-Regular",
1941
+ "fontSize": 16,
1942
+ "letterSpacing": 0.48,
1943
+ "lineHeight": 24,
1944
+ },
1945
+ [
1946
+ {
1947
+ "alignContent": "center",
1948
+ "alignItems": "center",
1949
+ "color": "#001f23",
1950
+ "marginTop": -2,
1951
+ "textAlignVertical": "center",
1952
+ },
1953
+ {
1954
+ "backgroundColor": "#ffffff",
1955
+ },
1956
+ ],
1957
+ ]
1958
+ }
1959
+ testID="input-label"
1960
+ themeIntent="body"
1961
+ themeState="default"
1962
+ themeTypeface="neutral"
1963
+ themeVariant="regular"
1964
+ >
1965
+ Amount (AUD)
1966
+ </Text>
1967
+ </View>
1764
1968
  <View
1765
1969
  style={
1766
1970
  [
@@ -1775,83 +1979,6 @@ exports[`TextInput helper text renders correctly 1`] = `
1775
1979
  ]
1776
1980
  }
1777
1981
  >
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
1982
  <TextInput
1856
1983
  accessibilityState={
1857
1984
  {
@@ -1980,6 +2107,7 @@ exports[`TextInput idle renders correctly 1`] = `
1980
2107
  testID="idle-text-input"
1981
2108
  >
1982
2109
  <View
2110
+ onLayout={[Function]}
1983
2111
  style={
1984
2112
  [
1985
2113
  {
@@ -2018,21 +2146,86 @@ exports[`TextInput idle renders correctly 1`] = `
2018
2146
  themeFocused={false}
2019
2147
  themeState="default"
2020
2148
  />
2021
- <HeroIcon
2022
- name="dollar-sign"
2149
+ <View
2150
+ onLayout={[Function]}
2151
+ >
2152
+ <HeroIcon
2153
+ name="dollar-sign"
2154
+ style={
2155
+ [
2156
+ {
2157
+ "color": "#001f23",
2158
+ "fontSize": 16,
2159
+ },
2160
+ undefined,
2161
+ ]
2162
+ }
2163
+ testID="input-prefix"
2164
+ themeIntent="text"
2165
+ themeSize="xsmall"
2166
+ />
2167
+ </View>
2168
+ <View
2169
+ collapsable={false}
2170
+ pointerEvents="none"
2023
2171
  style={
2024
- [
2025
- {
2026
- "color": "#001f23",
2027
- "fontSize": 16,
2028
- },
2029
- undefined,
2030
- ]
2172
+ {
2173
+ "alignItems": "center",
2174
+ "flexDirection": "row",
2175
+ "left": -32,
2176
+ "position": "absolute",
2177
+ "right": 0,
2178
+ "top": -10.666666666666666,
2179
+ "transform": [
2180
+ {
2181
+ "translateY": 0,
2182
+ },
2183
+ {
2184
+ "translateX": 0,
2185
+ },
2186
+ {
2187
+ "scale": 1,
2188
+ },
2189
+ ],
2190
+ "zIndex": 1,
2191
+ }
2031
2192
  }
2032
- testID="input-prefix"
2033
- themeIntent="text"
2034
- themeSize="xsmall"
2035
- />
2193
+ themeVariant="text"
2194
+ >
2195
+ <Text
2196
+ allowFontScaling={false}
2197
+ style={
2198
+ [
2199
+ {
2200
+ "color": "#001f23",
2201
+ "fontFamily": "BeVietnamPro-Regular",
2202
+ "fontSize": 16,
2203
+ "letterSpacing": 0.48,
2204
+ "lineHeight": 24,
2205
+ },
2206
+ [
2207
+ {
2208
+ "alignContent": "center",
2209
+ "alignItems": "center",
2210
+ "color": "#001f23",
2211
+ "marginTop": -2,
2212
+ "textAlignVertical": "center",
2213
+ },
2214
+ {
2215
+ "backgroundColor": "#ffffff",
2216
+ },
2217
+ ],
2218
+ ]
2219
+ }
2220
+ testID="input-label"
2221
+ themeIntent="body"
2222
+ themeState="default"
2223
+ themeTypeface="neutral"
2224
+ themeVariant="regular"
2225
+ >
2226
+ Amount (AUD)
2227
+ </Text>
2228
+ </View>
2036
2229
  <View
2037
2230
  style={
2038
2231
  [
@@ -2047,57 +2240,6 @@ exports[`TextInput idle renders correctly 1`] = `
2047
2240
  ]
2048
2241
  }
2049
2242
  >
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
2243
  <TextInput
2102
2244
  accessibilityState={
2103
2245
  {
@@ -2218,6 +2360,7 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
2218
2360
  }
2219
2361
  >
2220
2362
  <View
2363
+ onLayout={[Function]}
2221
2364
  style={
2222
2365
  [
2223
2366
  {
@@ -2256,112 +2399,129 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
2256
2399
  themeFocused={false}
2257
2400
  themeState="default"
2258
2401
  />
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
2402
  <View
2403
+ onLayout={[Function]}
2404
+ >
2405
+ <HeroIcon
2406
+ name="eye-circle"
2407
+ style={
2408
+ [
2409
+ {
2410
+ "color": "#001f23",
2411
+ "fontSize": 24,
2412
+ },
2413
+ undefined,
2414
+ ]
2415
+ }
2416
+ testID="prefix-element"
2417
+ themeIntent="text"
2418
+ themeSize="medium"
2419
+ />
2420
+ </View>
2421
+ <View
2422
+ collapsable={false}
2423
+ pointerEvents="none"
2275
2424
  style={
2276
- [
2277
- {
2278
- "alignItems": "center",
2279
- "alignSelf": "stretch",
2280
- "flexDirection": "row",
2281
- "flexGrow": 2,
2282
- "flexShrink": 1,
2283
- },
2284
- undefined,
2285
- ]
2425
+ {
2426
+ "alignItems": "center",
2427
+ "flexDirection": "row",
2428
+ "left": -32,
2429
+ "position": "absolute",
2430
+ "right": 0,
2431
+ "top": -10.666666666666666,
2432
+ "transform": [
2433
+ {
2434
+ "translateY": 0,
2435
+ },
2436
+ {
2437
+ "translateX": 0,
2438
+ },
2439
+ {
2440
+ "scale": 1,
2441
+ },
2442
+ ],
2443
+ "zIndex": 1,
2444
+ }
2286
2445
  }
2446
+ themeVariant="text"
2287
2447
  >
2288
- <View
2289
- pointerEvents="none"
2448
+ <Text
2449
+ allowFontScaling={false}
2290
2450
  style={
2291
2451
  [
2292
2452
  {
2293
- "alignItems": "center",
2294
- "bottom": 0,
2295
- "flexDirection": "row",
2296
- "left": 0,
2297
- "position": "absolute",
2298
- "right": 0,
2299
- "top": 0,
2300
- "zIndex": 9999,
2453
+ "color": "#001f23",
2454
+ "fontFamily": "BeVietnamPro-Regular",
2455
+ "fontSize": 16,
2456
+ "letterSpacing": 0.48,
2457
+ "lineHeight": 24,
2301
2458
  },
2302
- undefined,
2459
+ [
2460
+ {
2461
+ "color": "#cb300a",
2462
+ },
2463
+ {
2464
+ "backgroundColor": "#ffffff",
2465
+ },
2466
+ ],
2303
2467
  ]
2304
2468
  }
2305
- themeVariant="text"
2469
+ testID="input-label-asterisk"
2470
+ themeIntent="body"
2471
+ themeState="default"
2472
+ themeTypeface="neutral"
2473
+ themeVariant="regular"
2306
2474
  >
2307
- <Text
2308
- allowFontScaling={false}
2309
- style={
2475
+ *
2476
+ </Text>
2477
+ <Text
2478
+ allowFontScaling={false}
2479
+ style={
2480
+ [
2481
+ {
2482
+ "color": "#001f23",
2483
+ "fontFamily": "BeVietnamPro-Regular",
2484
+ "fontSize": 16,
2485
+ "letterSpacing": 0.48,
2486
+ "lineHeight": 24,
2487
+ },
2310
2488
  [
2311
2489
  {
2490
+ "alignContent": "center",
2491
+ "alignItems": "center",
2312
2492
  "color": "#001f23",
2313
- "fontFamily": "BeVietnamPro-Regular",
2314
- "fontSize": 16,
2315
- "letterSpacing": 0.48,
2316
- "lineHeight": 24,
2493
+ "marginTop": -2,
2494
+ "textAlignVertical": "center",
2317
2495
  },
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
2496
  {
2338
- "color": "#001f23",
2339
- "fontFamily": "BeVietnamPro-Regular",
2340
- "fontSize": 16,
2341
- "letterSpacing": 0.48,
2342
- "lineHeight": 24,
2497
+ "backgroundColor": "#ffffff",
2343
2498
  },
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>
2499
+ ],
2500
+ ]
2501
+ }
2502
+ testID="input-label"
2503
+ themeIntent="body"
2504
+ themeState="default"
2505
+ themeTypeface="neutral"
2506
+ themeVariant="regular"
2507
+ >
2508
+ Amount (AUD)
2509
+ </Text>
2510
+ </View>
2511
+ <View
2512
+ style={
2513
+ [
2514
+ {
2515
+ "alignItems": "center",
2516
+ "alignSelf": "stretch",
2517
+ "flexDirection": "row",
2518
+ "flexGrow": 2,
2519
+ "flexShrink": 1,
2520
+ },
2521
+ undefined,
2522
+ ]
2523
+ }
2524
+ >
2365
2525
  <TextInput
2366
2526
  accessibilityState={
2367
2527
  {
@@ -2482,6 +2642,7 @@ exports[`TextInput loading renders correctly 1`] = `
2482
2642
  }
2483
2643
  >
2484
2644
  <View
2645
+ onLayout={[Function]}
2485
2646
  style={
2486
2647
  [
2487
2648
  {
@@ -2520,6 +2681,36 @@ exports[`TextInput loading renders correctly 1`] = `
2520
2681
  themeFocused={false}
2521
2682
  themeState="readonly"
2522
2683
  />
2684
+ <View
2685
+ onLayout={[Function]}
2686
+ />
2687
+ <View
2688
+ collapsable={false}
2689
+ pointerEvents="none"
2690
+ style={
2691
+ {
2692
+ "alignItems": "center",
2693
+ "flexDirection": "row",
2694
+ "left": -32,
2695
+ "position": "absolute",
2696
+ "right": 0,
2697
+ "top": -10.666666666666666,
2698
+ "transform": [
2699
+ {
2700
+ "translateY": 0,
2701
+ },
2702
+ {
2703
+ "translateX": 48,
2704
+ },
2705
+ {
2706
+ "scale": 1,
2707
+ },
2708
+ ],
2709
+ "zIndex": 1,
2710
+ }
2711
+ }
2712
+ themeVariant="text"
2713
+ />
2523
2714
  <View
2524
2715
  style={
2525
2716
  [
@@ -2534,25 +2725,6 @@ exports[`TextInput loading renders correctly 1`] = `
2534
2725
  ]
2535
2726
  }
2536
2727
  >
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
2728
  <TextInput
2557
2729
  accessibilityState={
2558
2730
  {
@@ -2685,6 +2857,7 @@ exports[`TextInput max length renders correctly 1`] = `
2685
2857
  }
2686
2858
  >
2687
2859
  <View
2860
+ onLayout={[Function]}
2688
2861
  style={
2689
2862
  [
2690
2863
  {
@@ -2724,24 +2897,34 @@ exports[`TextInput max length renders correctly 1`] = `
2724
2897
  themeState="error"
2725
2898
  />
2726
2899
  <View
2900
+ onLayout={[Function]}
2901
+ />
2902
+ <View
2903
+ collapsable={false}
2727
2904
  pointerEvents="none"
2728
2905
  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
- ]
2906
+ {
2907
+ "alignItems": "center",
2908
+ "flexDirection": "row",
2909
+ "left": -32,
2910
+ "position": "absolute",
2911
+ "right": 0,
2912
+ "top": -10.666666666666666,
2913
+ "transform": [
2914
+ {
2915
+ "translateY": 0,
2916
+ },
2917
+ {
2918
+ "translateX": 48,
2919
+ },
2920
+ {
2921
+ "scale": 1,
2922
+ },
2923
+ ],
2924
+ "zIndex": 1,
2925
+ }
2743
2926
  }
2744
- testID="label-container"
2927
+ themeVariant="text"
2745
2928
  >
2746
2929
  <Text
2747
2930
  allowFontScaling={false}
@@ -2750,22 +2933,25 @@ exports[`TextInput max length renders correctly 1`] = `
2750
2933
  {
2751
2934
  "color": "#001f23",
2752
2935
  "fontFamily": "BeVietnamPro-Regular",
2753
- "fontSize": 12,
2936
+ "fontSize": 16,
2754
2937
  "letterSpacing": 0.48,
2755
- "lineHeight": 16,
2938
+ "lineHeight": 24,
2756
2939
  },
2757
2940
  [
2758
2941
  {
2759
2942
  "color": "#cb300a",
2760
- "lineHeight": 12,
2761
2943
  },
2762
- undefined,
2944
+ {
2945
+ "backgroundColor": "#ffffff",
2946
+ },
2763
2947
  ],
2764
2948
  ]
2765
2949
  }
2766
- themeFontWeight="regular"
2950
+ testID="input-label-asterisk"
2767
2951
  themeIntent="body"
2768
2952
  themeState="error"
2953
+ themeTypeface="neutral"
2954
+ themeVariant="regular"
2769
2955
  >
2770
2956
  *
2771
2957
  </Text>
@@ -2776,14 +2962,17 @@ exports[`TextInput max length renders correctly 1`] = `
2776
2962
  {
2777
2963
  "color": "#001f23",
2778
2964
  "fontFamily": "BeVietnamPro-Regular",
2779
- "fontSize": 12,
2965
+ "fontSize": 16,
2780
2966
  "letterSpacing": 0.48,
2781
- "lineHeight": 16,
2967
+ "lineHeight": 24,
2782
2968
  },
2783
2969
  [
2784
2970
  {
2971
+ "alignContent": "center",
2972
+ "alignItems": "center",
2785
2973
  "color": "#001f23",
2786
- "lineHeight": 12,
2974
+ "marginTop": -2,
2975
+ "textAlignVertical": "center",
2787
2976
  },
2788
2977
  {
2789
2978
  "backgroundColor": "#ffffff",
@@ -2792,9 +2981,10 @@ exports[`TextInput max length renders correctly 1`] = `
2792
2981
  ]
2793
2982
  }
2794
2983
  testID="input-label"
2795
- themeFontWeight="regular"
2796
2984
  themeIntent="body"
2797
2985
  themeState="error"
2986
+ themeTypeface="neutral"
2987
+ themeVariant="regular"
2798
2988
  >
2799
2989
  Shout out
2800
2990
  </Text>
@@ -3010,6 +3200,7 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
3010
3200
  }
3011
3201
  >
3012
3202
  <View
3203
+ onLayout={[Function]}
3013
3204
  style={
3014
3205
  [
3015
3206
  {
@@ -3049,24 +3240,34 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
3049
3240
  themeState="error"
3050
3241
  />
3051
3242
  <View
3243
+ onLayout={[Function]}
3244
+ />
3245
+ <View
3246
+ collapsable={false}
3052
3247
  pointerEvents="none"
3053
3248
  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
- ]
3249
+ {
3250
+ "alignItems": "center",
3251
+ "flexDirection": "row",
3252
+ "left": -32,
3253
+ "position": "absolute",
3254
+ "right": 0,
3255
+ "top": -10.666666666666666,
3256
+ "transform": [
3257
+ {
3258
+ "translateY": 0,
3259
+ },
3260
+ {
3261
+ "translateX": 48,
3262
+ },
3263
+ {
3264
+ "scale": 1,
3265
+ },
3266
+ ],
3267
+ "zIndex": 1,
3268
+ }
3068
3269
  }
3069
- testID="label-container"
3270
+ themeVariant="text"
3070
3271
  >
3071
3272
  <Text
3072
3273
  allowFontScaling={false}
@@ -3075,22 +3276,25 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
3075
3276
  {
3076
3277
  "color": "#001f23",
3077
3278
  "fontFamily": "BeVietnamPro-Regular",
3078
- "fontSize": 12,
3279
+ "fontSize": 16,
3079
3280
  "letterSpacing": 0.48,
3080
- "lineHeight": 16,
3281
+ "lineHeight": 24,
3081
3282
  },
3082
3283
  [
3083
3284
  {
3084
3285
  "color": "#cb300a",
3085
- "lineHeight": 12,
3086
3286
  },
3087
- undefined,
3287
+ {
3288
+ "backgroundColor": "#ffffff",
3289
+ },
3088
3290
  ],
3089
3291
  ]
3090
3292
  }
3091
- themeFontWeight="regular"
3293
+ testID="input-label-asterisk"
3092
3294
  themeIntent="body"
3093
3295
  themeState="error"
3296
+ themeTypeface="neutral"
3297
+ themeVariant="regular"
3094
3298
  >
3095
3299
  *
3096
3300
  </Text>
@@ -3101,14 +3305,17 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
3101
3305
  {
3102
3306
  "color": "#001f23",
3103
3307
  "fontFamily": "BeVietnamPro-Regular",
3104
- "fontSize": 12,
3308
+ "fontSize": 16,
3105
3309
  "letterSpacing": 0.48,
3106
- "lineHeight": 16,
3310
+ "lineHeight": 24,
3107
3311
  },
3108
3312
  [
3109
3313
  {
3314
+ "alignContent": "center",
3315
+ "alignItems": "center",
3110
3316
  "color": "#001f23",
3111
- "lineHeight": 12,
3317
+ "marginTop": -2,
3318
+ "textAlignVertical": "center",
3112
3319
  },
3113
3320
  {
3114
3321
  "backgroundColor": "#ffffff",
@@ -3117,9 +3324,10 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
3117
3324
  ]
3118
3325
  }
3119
3326
  testID="input-label"
3120
- themeFontWeight="regular"
3121
3327
  themeIntent="body"
3122
3328
  themeState="error"
3329
+ themeTypeface="neutral"
3330
+ themeVariant="regular"
3123
3331
  >
3124
3332
  Shout out
3125
3333
  </Text>
@@ -3303,6 +3511,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
3303
3511
  }
3304
3512
  >
3305
3513
  <View
3514
+ onLayout={[Function]}
3306
3515
  style={
3307
3516
  [
3308
3517
  {
@@ -3341,112 +3550,129 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
3341
3550
  themeFocused={false}
3342
3551
  themeState="default"
3343
3552
  />
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
3553
  <View
3554
+ onLayout={[Function]}
3555
+ >
3556
+ <HeroIcon
3557
+ name="dollar-sign"
3558
+ style={
3559
+ [
3560
+ {
3561
+ "color": "#001f23",
3562
+ "fontSize": 16,
3563
+ },
3564
+ undefined,
3565
+ ]
3566
+ }
3567
+ testID="input-prefix"
3568
+ themeIntent="text"
3569
+ themeSize="xsmall"
3570
+ />
3571
+ </View>
3572
+ <View
3573
+ collapsable={false}
3574
+ pointerEvents="none"
3360
3575
  style={
3361
- [
3362
- {
3363
- "alignItems": "center",
3364
- "alignSelf": "stretch",
3365
- "flexDirection": "row",
3366
- "flexGrow": 2,
3367
- "flexShrink": 1,
3368
- },
3369
- undefined,
3370
- ]
3576
+ {
3577
+ "alignItems": "center",
3578
+ "flexDirection": "row",
3579
+ "left": -32,
3580
+ "position": "absolute",
3581
+ "right": 0,
3582
+ "top": -10.666666666666666,
3583
+ "transform": [
3584
+ {
3585
+ "translateY": 0,
3586
+ },
3587
+ {
3588
+ "translateX": 0,
3589
+ },
3590
+ {
3591
+ "scale": 1,
3592
+ },
3593
+ ],
3594
+ "zIndex": 1,
3595
+ }
3371
3596
  }
3597
+ themeVariant="text"
3372
3598
  >
3373
- <View
3374
- pointerEvents="none"
3599
+ <Text
3600
+ allowFontScaling={false}
3375
3601
  style={
3376
3602
  [
3377
3603
  {
3378
- "alignItems": "center",
3379
- "bottom": 0,
3380
- "flexDirection": "row",
3381
- "left": 0,
3382
- "position": "absolute",
3383
- "right": 0,
3384
- "top": 0,
3385
- "zIndex": 9999,
3604
+ "color": "#001f23",
3605
+ "fontFamily": "BeVietnamPro-Regular",
3606
+ "fontSize": 16,
3607
+ "letterSpacing": 0.48,
3608
+ "lineHeight": 24,
3386
3609
  },
3387
- undefined,
3610
+ [
3611
+ {
3612
+ "color": "#cb300a",
3613
+ },
3614
+ {
3615
+ "backgroundColor": "#ffffff",
3616
+ },
3617
+ ],
3388
3618
  ]
3389
3619
  }
3390
- themeVariant="text"
3620
+ testID="input-label-asterisk"
3621
+ themeIntent="body"
3622
+ themeState="default"
3623
+ themeTypeface="neutral"
3624
+ themeVariant="regular"
3391
3625
  >
3392
- <Text
3393
- allowFontScaling={false}
3394
- style={
3626
+ *
3627
+ </Text>
3628
+ <Text
3629
+ allowFontScaling={false}
3630
+ style={
3631
+ [
3632
+ {
3633
+ "color": "#001f23",
3634
+ "fontFamily": "BeVietnamPro-Regular",
3635
+ "fontSize": 16,
3636
+ "letterSpacing": 0.48,
3637
+ "lineHeight": 24,
3638
+ },
3395
3639
  [
3396
3640
  {
3641
+ "alignContent": "center",
3642
+ "alignItems": "center",
3397
3643
  "color": "#001f23",
3398
- "fontFamily": "BeVietnamPro-Regular",
3399
- "fontSize": 16,
3400
- "letterSpacing": 0.48,
3401
- "lineHeight": 24,
3644
+ "marginTop": -2,
3645
+ "textAlignVertical": "center",
3402
3646
  },
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
3647
  {
3423
- "color": "#001f23",
3424
- "fontFamily": "BeVietnamPro-Regular",
3425
- "fontSize": 16,
3426
- "letterSpacing": 0.48,
3427
- "lineHeight": 24,
3648
+ "backgroundColor": "#ffffff",
3428
3649
  },
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>
3650
+ ],
3651
+ ]
3652
+ }
3653
+ testID="input-label"
3654
+ themeIntent="body"
3655
+ themeState="default"
3656
+ themeTypeface="neutral"
3657
+ themeVariant="regular"
3658
+ >
3659
+ Amount (AUD)
3660
+ </Text>
3661
+ </View>
3662
+ <View
3663
+ style={
3664
+ [
3665
+ {
3666
+ "alignItems": "center",
3667
+ "alignSelf": "stretch",
3668
+ "flexDirection": "row",
3669
+ "flexGrow": 2,
3670
+ "flexShrink": 1,
3671
+ },
3672
+ undefined,
3673
+ ]
3674
+ }
3675
+ >
3450
3676
  <TextInput
3451
3677
  accessibilityState={
3452
3678
  {
@@ -3572,6 +3798,7 @@ exports[`TextInput readonly renders correctly 1`] = `
3572
3798
  }
3573
3799
  >
3574
3800
  <View
3801
+ onLayout={[Function]}
3575
3802
  style={
3576
3803
  [
3577
3804
  {
@@ -3611,24 +3838,50 @@ exports[`TextInput readonly renders correctly 1`] = `
3611
3838
  themeState="readonly"
3612
3839
  />
3613
3840
  <View
3841
+ onLayout={[Function]}
3842
+ >
3843
+ <HeroIcon
3844
+ name="dollar-sign"
3845
+ style={
3846
+ [
3847
+ {
3848
+ "color": "#001f23",
3849
+ "fontSize": 16,
3850
+ },
3851
+ undefined,
3852
+ ]
3853
+ }
3854
+ testID="input-prefix"
3855
+ themeIntent="text"
3856
+ themeSize="xsmall"
3857
+ />
3858
+ </View>
3859
+ <View
3860
+ collapsable={false}
3614
3861
  pointerEvents="none"
3615
3862
  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
- ]
3863
+ {
3864
+ "alignItems": "center",
3865
+ "flexDirection": "row",
3866
+ "left": -32,
3867
+ "position": "absolute",
3868
+ "right": 0,
3869
+ "top": -10.666666666666666,
3870
+ "transform": [
3871
+ {
3872
+ "translateY": 0,
3873
+ },
3874
+ {
3875
+ "translateX": 0,
3876
+ },
3877
+ {
3878
+ "scale": 1,
3879
+ },
3880
+ ],
3881
+ "zIndex": 1,
3882
+ }
3630
3883
  }
3631
- testID="label-container"
3884
+ themeVariant="text"
3632
3885
  >
3633
3886
  <Text
3634
3887
  allowFontScaling={false}
@@ -3637,22 +3890,25 @@ exports[`TextInput readonly renders correctly 1`] = `
3637
3890
  {
3638
3891
  "color": "#001f23",
3639
3892
  "fontFamily": "BeVietnamPro-Regular",
3640
- "fontSize": 12,
3893
+ "fontSize": 16,
3641
3894
  "letterSpacing": 0.48,
3642
- "lineHeight": 16,
3895
+ "lineHeight": 24,
3643
3896
  },
3644
3897
  [
3645
3898
  {
3646
3899
  "color": "#808f91",
3647
- "lineHeight": 12,
3648
3900
  },
3649
- undefined,
3901
+ {
3902
+ "backgroundColor": "#ffffff",
3903
+ },
3650
3904
  ],
3651
3905
  ]
3652
3906
  }
3653
- themeFontWeight="regular"
3907
+ testID="input-label-asterisk"
3654
3908
  themeIntent="body"
3655
3909
  themeState="readonly"
3910
+ themeTypeface="neutral"
3911
+ themeVariant="regular"
3656
3912
  >
3657
3913
  *
3658
3914
  </Text>
@@ -3663,14 +3919,17 @@ exports[`TextInput readonly renders correctly 1`] = `
3663
3919
  {
3664
3920
  "color": "#001f23",
3665
3921
  "fontFamily": "BeVietnamPro-Regular",
3666
- "fontSize": 12,
3922
+ "fontSize": 16,
3667
3923
  "letterSpacing": 0.48,
3668
- "lineHeight": 16,
3924
+ "lineHeight": 24,
3669
3925
  },
3670
3926
  [
3671
3927
  {
3928
+ "alignContent": "center",
3929
+ "alignItems": "center",
3672
3930
  "color": "#808f91",
3673
- "lineHeight": 12,
3931
+ "marginTop": -2,
3932
+ "textAlignVertical": "center",
3674
3933
  },
3675
3934
  {
3676
3935
  "backgroundColor": "#ffffff",
@@ -3679,28 +3938,14 @@ exports[`TextInput readonly renders correctly 1`] = `
3679
3938
  ]
3680
3939
  }
3681
3940
  testID="input-label"
3682
- themeFontWeight="regular"
3683
3941
  themeIntent="body"
3684
3942
  themeState="readonly"
3943
+ themeTypeface="neutral"
3944
+ themeVariant="regular"
3685
3945
  >
3686
3946
  Amount (AUD)
3687
3947
  </Text>
3688
3948
  </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
3949
  <View
3705
3950
  style={
3706
3951
  [
@@ -3836,6 +4081,7 @@ exports[`TextInput ref ref methods work correctly 1`] = `
3836
4081
  }
3837
4082
  >
3838
4083
  <View
4084
+ onLayout={[Function]}
3839
4085
  style={
3840
4086
  [
3841
4087
  {
@@ -3875,24 +4121,34 @@ exports[`TextInput ref ref methods work correctly 1`] = `
3875
4121
  themeState="filled"
3876
4122
  />
3877
4123
  <View
4124
+ onLayout={[Function]}
4125
+ />
4126
+ <View
4127
+ collapsable={false}
3878
4128
  pointerEvents="none"
3879
4129
  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
- ]
4130
+ {
4131
+ "alignItems": "center",
4132
+ "flexDirection": "row",
4133
+ "left": -32,
4134
+ "position": "absolute",
4135
+ "right": 0,
4136
+ "top": -10.666666666666666,
4137
+ "transform": [
4138
+ {
4139
+ "translateY": 0,
4140
+ },
4141
+ {
4142
+ "translateX": 48,
4143
+ },
4144
+ {
4145
+ "scale": 1,
4146
+ },
4147
+ ],
4148
+ "zIndex": 1,
4149
+ }
3894
4150
  }
3895
- testID="label-container"
4151
+ themeVariant="text"
3896
4152
  >
3897
4153
  <Text
3898
4154
  allowFontScaling={false}
@@ -3901,14 +4157,17 @@ exports[`TextInput ref ref methods work correctly 1`] = `
3901
4157
  {
3902
4158
  "color": "#001f23",
3903
4159
  "fontFamily": "BeVietnamPro-Regular",
3904
- "fontSize": 12,
4160
+ "fontSize": 16,
3905
4161
  "letterSpacing": 0.48,
3906
- "lineHeight": 16,
4162
+ "lineHeight": 24,
3907
4163
  },
3908
4164
  [
3909
4165
  {
4166
+ "alignContent": "center",
4167
+ "alignItems": "center",
3910
4168
  "color": "#001f23",
3911
- "lineHeight": 12,
4169
+ "marginTop": -2,
4170
+ "textAlignVertical": "center",
3912
4171
  },
3913
4172
  {
3914
4173
  "backgroundColor": "#ffffff",
@@ -3917,9 +4176,10 @@ exports[`TextInput ref ref methods work correctly 1`] = `
3917
4176
  ]
3918
4177
  }
3919
4178
  testID="input-label"
3920
- themeFontWeight="regular"
3921
4179
  themeIntent="body"
3922
4180
  themeState="filled"
4181
+ themeTypeface="neutral"
4182
+ themeVariant="regular"
3923
4183
  >
3924
4184
  Amount (AUD)
3925
4185
  </Text>
@@ -4044,6 +4304,7 @@ exports[`TextInput required renders correctly 1`] = `
4044
4304
  }
4045
4305
  >
4046
4306
  <View
4307
+ onLayout={[Function]}
4047
4308
  style={
4048
4309
  [
4049
4310
  {
@@ -4082,112 +4343,129 @@ exports[`TextInput required renders correctly 1`] = `
4082
4343
  themeFocused={false}
4083
4344
  themeState="default"
4084
4345
  />
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
4346
  <View
4347
+ onLayout={[Function]}
4348
+ >
4349
+ <HeroIcon
4350
+ name="dollar-sign"
4351
+ style={
4352
+ [
4353
+ {
4354
+ "color": "#001f23",
4355
+ "fontSize": 16,
4356
+ },
4357
+ undefined,
4358
+ ]
4359
+ }
4360
+ testID="input-prefix"
4361
+ themeIntent="text"
4362
+ themeSize="xsmall"
4363
+ />
4364
+ </View>
4365
+ <View
4366
+ collapsable={false}
4367
+ pointerEvents="none"
4101
4368
  style={
4102
- [
4103
- {
4104
- "alignItems": "center",
4105
- "alignSelf": "stretch",
4106
- "flexDirection": "row",
4107
- "flexGrow": 2,
4108
- "flexShrink": 1,
4109
- },
4110
- undefined,
4111
- ]
4369
+ {
4370
+ "alignItems": "center",
4371
+ "flexDirection": "row",
4372
+ "left": -32,
4373
+ "position": "absolute",
4374
+ "right": 0,
4375
+ "top": -10.666666666666666,
4376
+ "transform": [
4377
+ {
4378
+ "translateY": 0,
4379
+ },
4380
+ {
4381
+ "translateX": 0,
4382
+ },
4383
+ {
4384
+ "scale": 1,
4385
+ },
4386
+ ],
4387
+ "zIndex": 1,
4388
+ }
4112
4389
  }
4390
+ themeVariant="text"
4113
4391
  >
4114
- <View
4115
- pointerEvents="none"
4392
+ <Text
4393
+ allowFontScaling={false}
4116
4394
  style={
4117
4395
  [
4118
4396
  {
4119
- "alignItems": "center",
4120
- "bottom": 0,
4121
- "flexDirection": "row",
4122
- "left": 0,
4123
- "position": "absolute",
4124
- "right": 0,
4125
- "top": 0,
4126
- "zIndex": 9999,
4397
+ "color": "#001f23",
4398
+ "fontFamily": "BeVietnamPro-Regular",
4399
+ "fontSize": 16,
4400
+ "letterSpacing": 0.48,
4401
+ "lineHeight": 24,
4127
4402
  },
4128
- undefined,
4403
+ [
4404
+ {
4405
+ "color": "#cb300a",
4406
+ },
4407
+ {
4408
+ "backgroundColor": "#ffffff",
4409
+ },
4410
+ ],
4129
4411
  ]
4130
4412
  }
4131
- themeVariant="text"
4413
+ testID="input-label-asterisk"
4414
+ themeIntent="body"
4415
+ themeState="default"
4416
+ themeTypeface="neutral"
4417
+ themeVariant="regular"
4132
4418
  >
4133
- <Text
4134
- allowFontScaling={false}
4135
- style={
4419
+ *
4420
+ </Text>
4421
+ <Text
4422
+ allowFontScaling={false}
4423
+ style={
4424
+ [
4425
+ {
4426
+ "color": "#001f23",
4427
+ "fontFamily": "BeVietnamPro-Regular",
4428
+ "fontSize": 16,
4429
+ "letterSpacing": 0.48,
4430
+ "lineHeight": 24,
4431
+ },
4136
4432
  [
4137
4433
  {
4434
+ "alignContent": "center",
4435
+ "alignItems": "center",
4138
4436
  "color": "#001f23",
4139
- "fontFamily": "BeVietnamPro-Regular",
4140
- "fontSize": 16,
4141
- "letterSpacing": 0.48,
4142
- "lineHeight": 24,
4437
+ "marginTop": -2,
4438
+ "textAlignVertical": "center",
4143
4439
  },
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
4440
  {
4164
- "color": "#001f23",
4165
- "fontFamily": "BeVietnamPro-Regular",
4166
- "fontSize": 16,
4167
- "letterSpacing": 0.48,
4168
- "lineHeight": 24,
4441
+ "backgroundColor": "#ffffff",
4169
4442
  },
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>
4443
+ ],
4444
+ ]
4445
+ }
4446
+ testID="input-label"
4447
+ themeIntent="body"
4448
+ themeState="default"
4449
+ themeTypeface="neutral"
4450
+ themeVariant="regular"
4451
+ >
4452
+ Amount (AUD)
4453
+ </Text>
4454
+ </View>
4455
+ <View
4456
+ style={
4457
+ [
4458
+ {
4459
+ "alignItems": "center",
4460
+ "alignSelf": "stretch",
4461
+ "flexDirection": "row",
4462
+ "flexGrow": 2,
4463
+ "flexShrink": 1,
4464
+ },
4465
+ undefined,
4466
+ ]
4467
+ }
4468
+ >
4191
4469
  <TextInput
4192
4470
  accessibilityState={
4193
4471
  {
@@ -4308,6 +4586,7 @@ exports[`TextInput variants renders textarea variant correctly 1`] = `
4308
4586
  }
4309
4587
  >
4310
4588
  <View
4589
+ onLayout={[Function]}
4311
4590
  style={
4312
4591
  [
4313
4592
  {
@@ -4347,24 +4626,34 @@ exports[`TextInput variants renders textarea variant correctly 1`] = `
4347
4626
  themeState="filled"
4348
4627
  />
4349
4628
  <View
4629
+ onLayout={[Function]}
4630
+ />
4631
+ <View
4632
+ collapsable={false}
4350
4633
  pointerEvents="none"
4351
4634
  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
- ]
4635
+ {
4636
+ "alignItems": "flex-start",
4637
+ "flexDirection": "row",
4638
+ "left": -32,
4639
+ "position": "absolute",
4640
+ "right": 0,
4641
+ "top": -10.666666666666666,
4642
+ "transform": [
4643
+ {
4644
+ "translateY": 24,
4645
+ },
4646
+ {
4647
+ "translateX": 48,
4648
+ },
4649
+ {
4650
+ "scale": 1,
4651
+ },
4652
+ ],
4653
+ "zIndex": 1,
4654
+ }
4366
4655
  }
4367
- testID="label-container"
4656
+ themeVariant="textarea"
4368
4657
  >
4369
4658
  <Text
4370
4659
  allowFontScaling={false}
@@ -4373,14 +4662,17 @@ exports[`TextInput variants renders textarea variant correctly 1`] = `
4373
4662
  {
4374
4663
  "color": "#001f23",
4375
4664
  "fontFamily": "BeVietnamPro-Regular",
4376
- "fontSize": 12,
4665
+ "fontSize": 16,
4377
4666
  "letterSpacing": 0.48,
4378
- "lineHeight": 16,
4667
+ "lineHeight": 24,
4379
4668
  },
4380
4669
  [
4381
4670
  {
4671
+ "alignContent": "center",
4672
+ "alignItems": "center",
4382
4673
  "color": "#001f23",
4383
- "lineHeight": 12,
4674
+ "marginTop": -2,
4675
+ "textAlignVertical": "center",
4384
4676
  },
4385
4677
  {
4386
4678
  "backgroundColor": "#ffffff",
@@ -4389,9 +4681,10 @@ exports[`TextInput variants renders textarea variant correctly 1`] = `
4389
4681
  ]
4390
4682
  }
4391
4683
  testID="input-label"
4392
- themeFontWeight="regular"
4393
4684
  themeIntent="body"
4394
4685
  themeState="filled"
4686
+ themeTypeface="neutral"
4687
+ themeVariant="regular"
4395
4688
  >
4396
4689
  Amount (AUD)
4397
4690
  </Text>