@hero-design/rn 8.42.3 → 8.43.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 (50) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/CHANGELOG.md +11 -0
  3. package/assets/fonts/hero-icons-mobile.ttf +0 -0
  4. package/es/index.js +670 -499
  5. package/lib/assets/fonts/hero-icons-mobile.ttf +0 -0
  6. package/lib/index.js +1109 -937
  7. package/package.json +7 -7
  8. package/src/components/BottomSheet/__tests__/__snapshots__/index.spec.tsx.snap +197 -211
  9. package/src/components/BottomSheet/index.tsx +1 -1
  10. package/src/components/Button/LoadingIndicator/StyledLoadingIndicator.tsx +6 -10
  11. package/src/components/Button/LoadingIndicator/__tests__/__snapshots__/StyledLoadingIndicator.spec.tsx.snap +0 -20
  12. package/src/components/Button/LoadingIndicator/__tests__/__snapshots__/index.spec.tsx.snap +0 -70
  13. package/src/components/Button/StyledButton.tsx +4 -0
  14. package/src/components/Button/__tests__/__snapshots__/Button.spec.tsx.snap +16 -42
  15. package/src/components/Button/__tests__/__snapshots__/StyledButton.spec.tsx.snap +10 -0
  16. package/src/components/Carousel/__tests__/__snapshots__/index.spec.tsx.snap +3 -0
  17. package/src/components/Carousel/__tests__/index.spec.tsx +8 -10
  18. package/src/components/Chip/StyledChip.tsx +121 -0
  19. package/src/components/Chip/__tests__/__snapshots__/index.spec.tsx.snap +943 -0
  20. package/src/components/Chip/__tests__/index.spec.tsx +136 -0
  21. package/src/components/Chip/index.tsx +82 -0
  22. package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap +12 -0
  23. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap +417 -399
  24. package/src/components/Error/__tests__/index.spec.tsx +9 -6
  25. package/src/components/Icon/HeroIcon/glyphMap.json +1 -1
  26. package/src/components/Icon/IconList.ts +1 -0
  27. package/src/components/RichTextEditor/__tests__/RichTextEditor.spec.tsx +8 -10
  28. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +367 -451
  29. package/src/components/Select/MultiSelect/__tests__/index.spec.tsx +7 -10
  30. package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +357 -419
  31. package/src/components/Success/__tests__/index.spec.tsx +9 -6
  32. package/src/components/Tabs/__tests__/SceneView.spec.tsx +19 -23
  33. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap +417 -399
  34. package/src/index.ts +2 -0
  35. package/src/testHelpers/renderWithTheme.tsx +1 -7
  36. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +38 -1
  37. package/src/theme/components/button.ts +0 -1
  38. package/src/theme/components/chip.ts +47 -0
  39. package/src/theme/getTheme.ts +3 -0
  40. package/types/components/Button/LoadingIndicator/StyledLoadingIndicator.d.ts +3 -3
  41. package/types/components/Chip/StyledChip.d.ts +31 -0
  42. package/types/components/Chip/index.d.ts +26 -0
  43. package/types/components/Icon/IconList.d.ts +1 -1
  44. package/types/components/Icon/index.d.ts +1 -1
  45. package/types/components/Icon/utils.d.ts +1 -1
  46. package/types/index.d.ts +2 -1
  47. package/types/theme/components/button.d.ts +0 -1
  48. package/types/theme/components/chip.d.ts +40 -0
  49. package/types/theme/getTheme.d.ts +2 -0
  50. package/.turbo/turbo-publish:npm.log +0 -0
package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap CHANGED
@@ -222,37 +222,11 @@ exports[`rendering allows custom renderer 1`] = `
222
222
  </View>
223
223
  </View>
224
224
  </View>,
225
- <View
226
- collapsable={false}
227
- style={
228
- {
229
- "backgroundColor": "transparent",
230
- "bottom": 0,
231
- "left": 0,
232
- "opacity": 0.4,
233
- "position": "absolute",
234
- "right": 0,
235
- "top": 0,
236
- }
237
- }
238
- />,
239
- <View
240
- collapsable={false}
241
- style={
242
- {
243
- "bottom": 0,
244
- "left": 0,
245
- "opacity": 1,
246
- "position": "absolute",
247
- "right": 0,
248
- "top": 0,
249
- "transform": [
250
- {
251
- "translateY": 0,
252
- },
253
- ],
254
- }
255
- }
225
+ <Modal
226
+ hardwareAccelerated={false}
227
+ onRequestClose={[Function]}
228
+ transparent={true}
229
+ visible={true}
256
230
  >
257
231
  <View
258
232
  pointerEvents="box-none"
@@ -1336,55 +1310,42 @@ exports[`rendering allows custom renderer 1`] = `
1336
1310
  </RCTSafeAreaView>
1337
1311
  </View>
1338
1312
  </View>
1339
- </View>,
1313
+ </Modal>,
1340
1314
  ]
1341
1315
  `;
1342
1316
 
1343
1317
  exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
1344
- <View
1345
- pointerEvents="auto"
1346
- >
1318
+ [
1347
1319
  <View
1348
- accessible={true}
1349
- collapsable={false}
1350
- focusable={true}
1351
- onClick={[Function]}
1352
- onResponderGrant={[Function]}
1353
- onResponderMove={[Function]}
1354
- onResponderRelease={[Function]}
1355
- onResponderTerminate={[Function]}
1356
- onResponderTerminationRequest={[Function]}
1357
- onStartShouldSetResponder={[Function]}
1358
- style={
1359
- {
1360
- "opacity": 1,
1361
- }
1362
- }
1320
+ pointerEvents="auto"
1363
1321
  >
1364
1322
  <View
1365
- pointerEvents="none"
1323
+ accessible={true}
1324
+ collapsable={false}
1325
+ focusable={true}
1326
+ onClick={[Function]}
1327
+ onResponderGrant={[Function]}
1328
+ onResponderMove={[Function]}
1329
+ onResponderRelease={[Function]}
1330
+ onResponderTerminate={[Function]}
1331
+ onResponderTerminationRequest={[Function]}
1332
+ onStartShouldSetResponder={[Function]}
1333
+ style={
1334
+ {
1335
+ "opacity": 1,
1336
+ }
1337
+ }
1366
1338
  >
1367
1339
  <View
1368
- pointerEvents="auto"
1369
- style={
1370
- [
1371
- {
1372
- "marginTop": 8,
1373
- "width": "100%",
1374
- },
1375
- undefined,
1376
- ]
1377
- }
1340
+ pointerEvents="none"
1378
1341
  >
1379
1342
  <View
1343
+ pointerEvents="auto"
1380
1344
  style={
1381
1345
  [
1382
1346
  {
1383
- "alignItems": "center",
1384
- "backgroundColor": "#ffffff",
1385
- "borderRadius": 8,
1386
- "flexDirection": "row",
1387
- "padding": 16,
1347
+ "marginTop": 8,
1348
+ "width": "100%",
1388
1349
  },
1389
1350
  undefined,
1390
1351
  ]
@@ -1394,173 +1355,194 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
1394
1355
  style={
1395
1356
  [
1396
1357
  {
1397
- "borderColor": "#001f23",
1398
- "borderRadius": 8,
1399
- "borderWidth": 1,
1400
- "bottom": 0,
1401
- "left": 0,
1402
- "position": "absolute",
1403
- "right": 0,
1404
- "top": 0,
1405
- },
1406
- [
1407
- {
1408
- "backgroundColor": "#ffffff",
1409
- },
1410
- undefined,
1411
- ],
1412
- ]
1413
- }
1414
- testID="text-input-border"
1415
- themeFocused={false}
1416
- themeState="filled"
1417
- />
1418
- <View
1419
- pointerEvents="none"
1420
- style={
1421
- [
1422
- {
1358
+ "alignItems": "center",
1423
1359
  "backgroundColor": "#ffffff",
1360
+ "borderRadius": 8,
1424
1361
  "flexDirection": "row",
1425
- "left": 16,
1426
- "paddingHorizontal": 4,
1427
- "position": "absolute",
1428
- "top": -4,
1429
- "zIndex": 1,
1430
- },
1431
- {
1432
- "backgroundColor": "#ffffff",
1362
+ "padding": 16,
1433
1363
  },
1364
+ undefined,
1434
1365
  ]
1435
1366
  }
1436
- testID="label-container"
1437
1367
  >
1438
- <Text
1439
- allowFontScaling={false}
1368
+ <View
1440
1369
  style={
1441
1370
  [
1442
1371
  {
1443
- "color": "#001f23",
1444
- "fontFamily": "BeVietnamPro-Regular",
1445
- "fontSize": 12,
1446
- "letterSpacing": 0.48,
1447
- "lineHeight": 16,
1372
+ "borderColor": "#001f23",
1373
+ "borderRadius": 8,
1374
+ "borderWidth": 1,
1375
+ "bottom": 0,
1376
+ "left": 0,
1377
+ "position": "absolute",
1378
+ "right": 0,
1379
+ "top": 0,
1448
1380
  },
1449
1381
  [
1450
- {
1451
- "color": "#001f23",
1452
- "lineHeight": 12,
1453
- },
1454
1382
  {
1455
1383
  "backgroundColor": "#ffffff",
1456
1384
  },
1385
+ undefined,
1457
1386
  ],
1458
1387
  ]
1459
1388
  }
1460
- testID="input-label"
1461
- themeFontWeight="regular"
1462
- themeIntent="body"
1389
+ testID="text-input-border"
1390
+ themeFocused={false}
1463
1391
  themeState="filled"
1392
+ />
1393
+ <View
1394
+ pointerEvents="none"
1395
+ style={
1396
+ [
1397
+ {
1398
+ "backgroundColor": "#ffffff",
1399
+ "flexDirection": "row",
1400
+ "left": 16,
1401
+ "paddingHorizontal": 4,
1402
+ "position": "absolute",
1403
+ "top": -4,
1404
+ "zIndex": 1,
1405
+ },
1406
+ {
1407
+ "backgroundColor": "#ffffff",
1408
+ },
1409
+ ]
1410
+ }
1411
+ testID="label-container"
1464
1412
  >
1465
- Allow notifications
1466
- </Text>
1467
- </View>
1468
- <View
1469
- style={
1470
- [
1471
- {
1472
- "alignItems": "center",
1473
- "alignSelf": "stretch",
1474
- "flexDirection": "row",
1475
- "flexGrow": 2,
1476
- "flexShrink": 1,
1477
- },
1478
- undefined,
1479
- ]
1480
- }
1481
- >
1482
- <TextInput
1483
- accessibilityState={
1484
- {
1485
- "disabled": false,
1413
+ <Text
1414
+ allowFontScaling={false}
1415
+ style={
1416
+ [
1417
+ {
1418
+ "color": "#001f23",
1419
+ "fontFamily": "BeVietnamPro-Regular",
1420
+ "fontSize": 12,
1421
+ "letterSpacing": 0.48,
1422
+ "lineHeight": 16,
1423
+ },
1424
+ [
1425
+ {
1426
+ "color": "#001f23",
1427
+ "lineHeight": 12,
1428
+ },
1429
+ {
1430
+ "backgroundColor": "#ffffff",
1431
+ },
1432
+ ],
1433
+ ]
1486
1434
  }
1487
- }
1488
- allowFontScaling={false}
1489
- editable={true}
1490
- multiline={true}
1491
- onBlur={[Function]}
1492
- onChangeText={[Function]}
1493
- onFocus={[Function]}
1494
- placeholder=" "
1495
- pointerEvents="none"
1435
+ testID="input-label"
1436
+ themeFontWeight="regular"
1437
+ themeIntent="body"
1438
+ themeState="filled"
1439
+ >
1440
+ Allow notifications
1441
+ </Text>
1442
+ </View>
1443
+ <View
1496
1444
  style={
1497
1445
  [
1498
1446
  {
1447
+ "alignItems": "center",
1499
1448
  "alignSelf": "stretch",
1449
+ "flexDirection": "row",
1500
1450
  "flexGrow": 2,
1501
- "fontFamily": "BeVietnamPro-Regular",
1502
- "fontSize": 16,
1503
- "height": undefined,
1504
- "marginHorizontal": 8,
1505
- "maxHeight": 144,
1506
- "paddingVertical": 0,
1507
- "textAlignVertical": "center",
1451
+ "flexShrink": 1,
1508
1452
  },
1453
+ undefined,
1454
+ ]
1455
+ }
1456
+ >
1457
+ <TextInput
1458
+ accessibilityState={
1459
+ {
1460
+ "disabled": false,
1461
+ }
1462
+ }
1463
+ allowFontScaling={false}
1464
+ editable={true}
1465
+ multiline={true}
1466
+ onBlur={[Function]}
1467
+ onChangeText={[Function]}
1468
+ onFocus={[Function]}
1469
+ placeholder=" "
1470
+ pointerEvents="none"
1471
+ style={
1472
+ [
1473
+ {
1474
+ "alignSelf": "stretch",
1475
+ "flexGrow": 2,
1476
+ "fontFamily": "BeVietnamPro-Regular",
1477
+ "fontSize": 16,
1478
+ "height": undefined,
1479
+ "marginHorizontal": 8,
1480
+ "maxHeight": 144,
1481
+ "paddingVertical": 0,
1482
+ "textAlignVertical": "center",
1483
+ },
1484
+ {
1485
+ "backgroundColor": "#ffffff",
1486
+ "color": "#001f23",
1487
+ },
1488
+ ]
1489
+ }
1490
+ testID="text-input"
1491
+ themeVariant="text"
1492
+ value="Monday"
1493
+ />
1494
+ </View>
1495
+ <HeroIcon
1496
+ name="arrow-down"
1497
+ style={
1498
+ [
1509
1499
  {
1510
- "backgroundColor": "#ffffff",
1511
1500
  "color": "#001f23",
1501
+ "fontSize": 24,
1512
1502
  },
1503
+ undefined,
1513
1504
  ]
1514
1505
  }
1515
- testID="text-input"
1516
- themeVariant="text"
1517
- value="Monday"
1506
+ testID="input-suffix"
1507
+ themeIntent="text"
1508
+ themeSize="medium"
1518
1509
  />
1519
1510
  </View>
1520
- <HeroIcon
1521
- name="arrow-down"
1522
- style={
1523
- [
1524
- {
1525
- "color": "#001f23",
1526
- "fontSize": 24,
1527
- },
1528
- undefined,
1529
- ]
1530
- }
1531
- testID="input-suffix"
1532
- themeIntent="text"
1533
- themeSize="medium"
1534
- />
1535
- </View>
1536
- <View
1537
- style={
1538
- [
1539
- {
1540
- "minHeight": 16,
1541
- "paddingLeft": 16,
1542
- "paddingTop": 2,
1543
- },
1544
- undefined,
1545
- ]
1546
- }
1547
- >
1548
1511
  <View
1549
1512
  style={
1550
1513
  [
1551
1514
  {
1552
- "flexDirection": "row",
1553
- "justifyContent": "space-between",
1515
+ "minHeight": 16,
1516
+ "paddingLeft": 16,
1517
+ "paddingTop": 2,
1554
1518
  },
1555
1519
  undefined,
1556
1520
  ]
1557
1521
  }
1558
- />
1522
+ >
1523
+ <View
1524
+ style={
1525
+ [
1526
+ {
1527
+ "flexDirection": "row",
1528
+ "justifyContent": "space-between",
1529
+ },
1530
+ undefined,
1531
+ ]
1532
+ }
1533
+ />
1534
+ </View>
1559
1535
  </View>
1560
1536
  </View>
1561
1537
  </View>
1562
- </View>
1563
- </View>
1538
+ </View>,
1539
+ <Modal
1540
+ hardwareAccelerated={false}
1541
+ onRequestClose={[Function]}
1542
+ transparent={true}
1543
+ visible={false}
1544
+ />,
1545
+ ]
1564
1546
  `;
1565
1547
 
1566
1548
  exports[`rendering renders correctly when bottom sheet is visible 1`] = `
@@ -1785,37 +1767,11 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
1785
1767
  </View>
1786
1768
  </View>
1787
1769
  </View>,
1788
- <View
1789
- collapsable={false}
1790
- style={
1791
- {
1792
- "backgroundColor": "transparent",
1793
- "bottom": 0,
1794
- "left": 0,
1795
- "opacity": 0.4,
1796
- "position": "absolute",
1797
- "right": 0,
1798
- "top": 0,
1799
- }
1800
- }
1801
- />,
1802
- <View
1803
- collapsable={false}
1804
- style={
1805
- {
1806
- "bottom": 0,
1807
- "left": 0,
1808
- "opacity": 1,
1809
- "position": "absolute",
1810
- "right": 0,
1811
- "top": 0,
1812
- "transform": [
1813
- {
1814
- "translateY": 0,
1815
- },
1816
- ],
1817
- }
1818
- }
1770
+ <Modal
1771
+ hardwareAccelerated={false}
1772
+ onRequestClose={[Function]}
1773
+ transparent={true}
1774
+ visible={true}
1819
1775
  >
1820
1776
  <View
1821
1777
  pointerEvents="box-none"
@@ -3024,55 +2980,42 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
3024
2980
  </RCTSafeAreaView>
3025
2981
  </View>
3026
2982
  </View>
3027
- </View>,
2983
+ </Modal>,
3028
2984
  ]
3029
2985
  `;
3030
2986
 
3031
2987
  exports[`rendering renders correctly when input is loading 1`] = `
3032
- <View
3033
- pointerEvents="none"
3034
- >
2988
+ [
3035
2989
  <View
3036
- accessible={true}
3037
- collapsable={false}
3038
- focusable={true}
3039
- onClick={[Function]}
3040
- onResponderGrant={[Function]}
3041
- onResponderMove={[Function]}
3042
- onResponderRelease={[Function]}
3043
- onResponderTerminate={[Function]}
3044
- onResponderTerminationRequest={[Function]}
3045
- onStartShouldSetResponder={[Function]}
3046
- style={
3047
- {
3048
- "opacity": 1,
3049
- }
3050
- }
2990
+ pointerEvents="none"
3051
2991
  >
3052
2992
  <View
3053
- pointerEvents="none"
2993
+ accessible={true}
2994
+ collapsable={false}
2995
+ focusable={true}
2996
+ onClick={[Function]}
2997
+ onResponderGrant={[Function]}
2998
+ onResponderMove={[Function]}
2999
+ onResponderRelease={[Function]}
3000
+ onResponderTerminate={[Function]}
3001
+ onResponderTerminationRequest={[Function]}
3002
+ onStartShouldSetResponder={[Function]}
3003
+ style={
3004
+ {
3005
+ "opacity": 1,
3006
+ }
3007
+ }
3054
3008
  >
3055
3009
  <View
3056
3010
  pointerEvents="none"
3057
- style={
3058
- [
3059
- {
3060
- "marginTop": 8,
3061
- "width": "100%",
3062
- },
3063
- undefined,
3064
- ]
3065
- }
3066
3011
  >
3067
3012
  <View
3013
+ pointerEvents="none"
3068
3014
  style={
3069
3015
  [
3070
3016
  {
3071
- "alignItems": "center",
3072
- "backgroundColor": "#ffffff",
3073
- "borderRadius": 8,
3074
- "flexDirection": "row",
3075
- "padding": 16,
3017
+ "marginTop": 8,
3018
+ "width": "100%",
3076
3019
  },
3077
3020
  undefined,
3078
3021
  ]
@@ -3082,186 +3025,207 @@ exports[`rendering renders correctly when input is loading 1`] = `
3082
3025
  style={
3083
3026
  [
3084
3027
  {
3085
- "borderColor": "#808f91",
3086
- "borderRadius": 8,
3087
- "borderWidth": 1,
3088
- "bottom": 0,
3089
- "left": 0,
3090
- "position": "absolute",
3091
- "right": 0,
3092
- "top": 0,
3093
- },
3094
- [
3095
- {
3096
- "backgroundColor": "#ffffff",
3097
- },
3098
- undefined,
3099
- ],
3100
- ]
3101
- }
3102
- testID="text-input-border"
3103
- themeFocused={false}
3104
- themeState="readonly"
3105
- />
3106
- <View
3107
- pointerEvents="none"
3108
- style={
3109
- [
3110
- {
3028
+ "alignItems": "center",
3111
3029
  "backgroundColor": "#ffffff",
3030
+ "borderRadius": 8,
3112
3031
  "flexDirection": "row",
3113
- "left": 16,
3114
- "paddingHorizontal": 4,
3115
- "position": "absolute",
3116
- "top": -4,
3117
- "zIndex": 1,
3118
- },
3119
- {
3120
- "backgroundColor": "#ffffff",
3032
+ "padding": 16,
3121
3033
  },
3034
+ undefined,
3122
3035
  ]
3123
3036
  }
3124
- testID="label-container"
3125
3037
  >
3126
- <Text
3127
- allowFontScaling={false}
3038
+ <View
3128
3039
  style={
3129
3040
  [
3130
3041
  {
3131
- "color": "#001f23",
3132
- "fontFamily": "BeVietnamPro-Regular",
3133
- "fontSize": 12,
3134
- "letterSpacing": 0.48,
3135
- "lineHeight": 16,
3042
+ "borderColor": "#808f91",
3043
+ "borderRadius": 8,
3044
+ "borderWidth": 1,
3045
+ "bottom": 0,
3046
+ "left": 0,
3047
+ "position": "absolute",
3048
+ "right": 0,
3049
+ "top": 0,
3136
3050
  },
3137
3051
  [
3138
- {
3139
- "color": "#808f91",
3140
- "lineHeight": 12,
3141
- },
3142
3052
  {
3143
3053
  "backgroundColor": "#ffffff",
3144
3054
  },
3055
+ undefined,
3145
3056
  ],
3146
3057
  ]
3147
3058
  }
3148
- testID="input-label"
3149
- themeFontWeight="regular"
3150
- themeIntent="body"
3059
+ testID="text-input-border"
3060
+ themeFocused={false}
3151
3061
  themeState="readonly"
3152
- >
3153
- Allow notifications
3154
- </Text>
3155
- </View>
3156
- <View
3157
- style={
3158
- [
3159
- {
3160
- "alignItems": "center",
3161
- "alignSelf": "stretch",
3162
- "flexDirection": "row",
3163
- "flexGrow": 2,
3164
- "flexShrink": 1,
3165
- },
3166
- undefined,
3167
- ]
3168
- }
3169
- >
3170
- <TextInput
3171
- accessibilityState={
3172
- {
3173
- "disabled": true,
3174
- }
3175
- }
3176
- allowFontScaling={false}
3177
- editable={true}
3178
- multiline={true}
3179
- onBlur={[Function]}
3180
- onChangeText={[Function]}
3181
- onFocus={[Function]}
3182
- placeholder=" "
3062
+ />
3063
+ <View
3183
3064
  pointerEvents="none"
3184
3065
  style={
3185
3066
  [
3186
3067
  {
3187
- "alignSelf": "stretch",
3188
- "flexGrow": 2,
3189
- "fontFamily": "BeVietnamPro-Regular",
3190
- "fontSize": 16,
3191
- "height": undefined,
3192
- "marginHorizontal": 8,
3193
- "maxHeight": 144,
3194
- "paddingVertical": 0,
3195
- "textAlignVertical": "center",
3068
+ "backgroundColor": "#ffffff",
3069
+ "flexDirection": "row",
3070
+ "left": 16,
3071
+ "paddingHorizontal": 4,
3072
+ "position": "absolute",
3073
+ "top": -4,
3074
+ "zIndex": 1,
3196
3075
  },
3197
3076
  {
3198
3077
  "backgroundColor": "#ffffff",
3199
- "color": "#001f23",
3200
3078
  },
3201
3079
  ]
3202
3080
  }
3203
- testID="text-input"
3204
- themeVariant="text"
3205
- value="Monday"
3206
- />
3207
- </View>
3208
- <View
3209
- collapsable={false}
3210
- style={
3211
- {
3212
- "transform": [
3213
- {
3214
- "rotate": "0deg",
3215
- },
3216
- ],
3217
- }
3218
- }
3219
- >
3220
- <HeroIcon
3221
- name="loading"
3081
+ testID="label-container"
3082
+ >
3083
+ <Text
3084
+ allowFontScaling={false}
3085
+ style={
3086
+ [
3087
+ {
3088
+ "color": "#001f23",
3089
+ "fontFamily": "BeVietnamPro-Regular",
3090
+ "fontSize": 12,
3091
+ "letterSpacing": 0.48,
3092
+ "lineHeight": 16,
3093
+ },
3094
+ [
3095
+ {
3096
+ "color": "#808f91",
3097
+ "lineHeight": 12,
3098
+ },
3099
+ {
3100
+ "backgroundColor": "#ffffff",
3101
+ },
3102
+ ],
3103
+ ]
3104
+ }
3105
+ testID="input-label"
3106
+ themeFontWeight="regular"
3107
+ themeIntent="body"
3108
+ themeState="readonly"
3109
+ >
3110
+ Allow notifications
3111
+ </Text>
3112
+ </View>
3113
+ <View
3222
3114
  style={
3223
3115
  [
3224
3116
  {
3225
- "color": "#001f23",
3226
- "fontSize": 24,
3117
+ "alignItems": "center",
3118
+ "alignSelf": "stretch",
3119
+ "flexDirection": "row",
3120
+ "flexGrow": 2,
3121
+ "flexShrink": 1,
3227
3122
  },
3228
3123
  undefined,
3229
3124
  ]
3230
3125
  }
3231
- testID="input-suffix"
3232
- themeIntent="text"
3233
- themeSize="medium"
3234
- />
3126
+ >
3127
+ <TextInput
3128
+ accessibilityState={
3129
+ {
3130
+ "disabled": true,
3131
+ }
3132
+ }
3133
+ allowFontScaling={false}
3134
+ editable={true}
3135
+ multiline={true}
3136
+ onBlur={[Function]}
3137
+ onChangeText={[Function]}
3138
+ onFocus={[Function]}
3139
+ placeholder=" "
3140
+ pointerEvents="none"
3141
+ style={
3142
+ [
3143
+ {
3144
+ "alignSelf": "stretch",
3145
+ "flexGrow": 2,
3146
+ "fontFamily": "BeVietnamPro-Regular",
3147
+ "fontSize": 16,
3148
+ "height": undefined,
3149
+ "marginHorizontal": 8,
3150
+ "maxHeight": 144,
3151
+ "paddingVertical": 0,
3152
+ "textAlignVertical": "center",
3153
+ },
3154
+ {
3155
+ "backgroundColor": "#ffffff",
3156
+ "color": "#001f23",
3157
+ },
3158
+ ]
3159
+ }
3160
+ testID="text-input"
3161
+ themeVariant="text"
3162
+ value="Monday"
3163
+ />
3164
+ </View>
3165
+ <View
3166
+ collapsable={false}
3167
+ style={
3168
+ {
3169
+ "transform": [
3170
+ {
3171
+ "rotate": "0deg",
3172
+ },
3173
+ ],
3174
+ }
3175
+ }
3176
+ >
3177
+ <HeroIcon
3178
+ name="loading"
3179
+ style={
3180
+ [
3181
+ {
3182
+ "color": "#001f23",
3183
+ "fontSize": 24,
3184
+ },
3185
+ undefined,
3186
+ ]
3187
+ }
3188
+ testID="input-suffix"
3189
+ themeIntent="text"
3190
+ themeSize="medium"
3191
+ />
3192
+ </View>
3235
3193
  </View>
3236
- </View>
3237
- <View
3238
- style={
3239
- [
3240
- {
3241
- "minHeight": 16,
3242
- "paddingLeft": 16,
3243
- "paddingTop": 2,
3244
- },
3245
- undefined,
3246
- ]
3247
- }
3248
- >
3249
3194
  <View
3250
3195
  style={
3251
3196
  [
3252
3197
  {
3253
- "flexDirection": "row",
3254
- "justifyContent": "space-between",
3198
+ "minHeight": 16,
3199
+ "paddingLeft": 16,
3200
+ "paddingTop": 2,
3255
3201
  },
3256
3202
  undefined,
3257
3203
  ]
3258
3204
  }
3259
- />
3205
+ >
3206
+ <View
3207
+ style={
3208
+ [
3209
+ {
3210
+ "flexDirection": "row",
3211
+ "justifyContent": "space-between",
3212
+ },
3213
+ undefined,
3214
+ ]
3215
+ }
3216
+ />
3217
+ </View>
3260
3218
  </View>
3261
3219
  </View>
3262
3220
  </View>
3263
- </View>
3264
- </View>
3221
+ </View>,
3222
+ <Modal
3223
+ hardwareAccelerated={false}
3224
+ onRequestClose={[Function]}
3225
+ transparent={true}
3226
+ visible={false}
3227
+ />,
3228
+ ]
3265
3229
  `;
3266
3230
 
3267
3231
  exports[`rendering renders correctly when receives sections 1`] = `
@@ -3486,37 +3450,11 @@ exports[`rendering renders correctly when receives sections 1`] = `
3486
3450
  </View>
3487
3451
  </View>
3488
3452
  </View>,
3489
- <View
3490
- collapsable={false}
3491
- style={
3492
- {
3493
- "backgroundColor": "transparent",
3494
- "bottom": 0,
3495
- "left": 0,
3496
- "opacity": 0.4,
3497
- "position": "absolute",
3498
- "right": 0,
3499
- "top": 0,
3500
- }
3501
- }
3502
- />,
3503
- <View
3504
- collapsable={false}
3505
- style={
3506
- {
3507
- "bottom": 0,
3508
- "left": 0,
3509
- "opacity": 1,
3510
- "position": "absolute",
3511
- "right": 0,
3512
- "top": 0,
3513
- "transform": [
3514
- {
3515
- "translateY": 0,
3516
- },
3517
- ],
3518
- }
3519
- }
3453
+ <Modal
3454
+ hardwareAccelerated={false}
3455
+ onRequestClose={[Function]}
3456
+ transparent={true}
3457
+ visible={true}
3520
3458
  >
3521
3459
  <View
3522
3460
  pointerEvents="box-none"
@@ -4339,6 +4277,6 @@ exports[`rendering renders correctly when receives sections 1`] = `
4339
4277
  </RCTSafeAreaView>
4340
4278
  </View>
4341
4279
  </View>
4342
- </View>,
4280
+ </Modal>,
4343
4281
  ]
4344
4282
  `;