@hero-design/rn 8.42.4 → 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 +1 -1
  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/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap CHANGED
@@ -223,37 +223,11 @@ exports[`rendering allows custom renderer 1`] = `
223
223
  </View>
224
224
  </View>
225
225
  </View>,
226
- <View
227
- collapsable={false}
228
- style={
229
- {
230
- "backgroundColor": "transparent",
231
- "bottom": 0,
232
- "left": 0,
233
- "opacity": 0.4,
234
- "position": "absolute",
235
- "right": 0,
236
- "top": 0,
237
- }
238
- }
239
- />,
240
- <View
241
- collapsable={false}
242
- style={
243
- {
244
- "bottom": 0,
245
- "left": 0,
246
- "opacity": 1,
247
- "position": "absolute",
248
- "right": 0,
249
- "top": 0,
250
- "transform": [
251
- {
252
- "translateY": 0,
253
- },
254
- ],
255
- }
256
- }
226
+ <Modal
227
+ hardwareAccelerated={false}
228
+ onRequestClose={[Function]}
229
+ transparent={true}
230
+ visible={true}
257
231
  >
258
232
  <View
259
233
  pointerEvents="box-none"
@@ -1367,6 +1341,7 @@ exports[`rendering allows custom renderer 1`] = `
1367
1341
  "borderRadius": 4,
1368
1342
  "borderWidth": 0,
1369
1343
  "flexDirection": "row",
1344
+ "height": 60,
1370
1345
  "justifyContent": "center",
1371
1346
  "padding": 12,
1372
1347
  },
@@ -1412,55 +1387,42 @@ exports[`rendering allows custom renderer 1`] = `
1412
1387
  </RCTSafeAreaView>
1413
1388
  </View>
1414
1389
  </View>
1415
- </View>,
1390
+ </Modal>,
1416
1391
  ]
1417
1392
  `;
1418
1393
 
1419
1394
  exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
1420
- <View
1421
- pointerEvents="auto"
1422
- >
1395
+ [
1423
1396
  <View
1424
- accessible={true}
1425
- collapsable={false}
1426
- focusable={true}
1427
- onClick={[Function]}
1428
- onResponderGrant={[Function]}
1429
- onResponderMove={[Function]}
1430
- onResponderRelease={[Function]}
1431
- onResponderTerminate={[Function]}
1432
- onResponderTerminationRequest={[Function]}
1433
- onStartShouldSetResponder={[Function]}
1434
- style={
1435
- {
1436
- "opacity": 1,
1437
- }
1438
- }
1397
+ pointerEvents="auto"
1439
1398
  >
1440
1399
  <View
1441
- pointerEvents="none"
1400
+ accessible={true}
1401
+ collapsable={false}
1402
+ focusable={true}
1403
+ onClick={[Function]}
1404
+ onResponderGrant={[Function]}
1405
+ onResponderMove={[Function]}
1406
+ onResponderRelease={[Function]}
1407
+ onResponderTerminate={[Function]}
1408
+ onResponderTerminationRequest={[Function]}
1409
+ onStartShouldSetResponder={[Function]}
1410
+ style={
1411
+ {
1412
+ "opacity": 1,
1413
+ }
1414
+ }
1442
1415
  >
1443
1416
  <View
1444
- pointerEvents="auto"
1445
- style={
1446
- [
1447
- {
1448
- "marginTop": 8,
1449
- "width": "100%",
1450
- },
1451
- undefined,
1452
- ]
1453
- }
1417
+ pointerEvents="none"
1454
1418
  >
1455
1419
  <View
1420
+ pointerEvents="auto"
1456
1421
  style={
1457
1422
  [
1458
1423
  {
1459
- "alignItems": "center",
1460
- "backgroundColor": "#ffffff",
1461
- "borderRadius": 8,
1462
- "flexDirection": "row",
1463
- "padding": 16,
1424
+ "marginTop": 8,
1425
+ "width": "100%",
1464
1426
  },
1465
1427
  undefined,
1466
1428
  ]
@@ -1470,173 +1432,194 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
1470
1432
  style={
1471
1433
  [
1472
1434
  {
1473
- "borderColor": "#001f23",
1474
- "borderRadius": 8,
1475
- "borderWidth": 1,
1476
- "bottom": 0,
1477
- "left": 0,
1478
- "position": "absolute",
1479
- "right": 0,
1480
- "top": 0,
1481
- },
1482
- [
1483
- {
1484
- "backgroundColor": "#ffffff",
1485
- },
1486
- undefined,
1487
- ],
1488
- ]
1489
- }
1490
- testID="text-input-border"
1491
- themeFocused={false}
1492
- themeState="filled"
1493
- />
1494
- <View
1495
- pointerEvents="none"
1496
- style={
1497
- [
1498
- {
1435
+ "alignItems": "center",
1499
1436
  "backgroundColor": "#ffffff",
1437
+ "borderRadius": 8,
1500
1438
  "flexDirection": "row",
1501
- "left": 16,
1502
- "paddingHorizontal": 4,
1503
- "position": "absolute",
1504
- "top": -4,
1505
- "zIndex": 1,
1506
- },
1507
- {
1508
- "backgroundColor": "#ffffff",
1439
+ "padding": 16,
1509
1440
  },
1441
+ undefined,
1510
1442
  ]
1511
1443
  }
1512
- testID="label-container"
1513
1444
  >
1514
- <Text
1515
- allowFontScaling={false}
1445
+ <View
1516
1446
  style={
1517
1447
  [
1518
1448
  {
1519
- "color": "#001f23",
1520
- "fontFamily": "BeVietnamPro-Regular",
1521
- "fontSize": 12,
1522
- "letterSpacing": 0.48,
1523
- "lineHeight": 16,
1449
+ "borderColor": "#001f23",
1450
+ "borderRadius": 8,
1451
+ "borderWidth": 1,
1452
+ "bottom": 0,
1453
+ "left": 0,
1454
+ "position": "absolute",
1455
+ "right": 0,
1456
+ "top": 0,
1524
1457
  },
1525
1458
  [
1526
- {
1527
- "color": "#001f23",
1528
- "lineHeight": 12,
1529
- },
1530
1459
  {
1531
1460
  "backgroundColor": "#ffffff",
1532
1461
  },
1462
+ undefined,
1533
1463
  ],
1534
1464
  ]
1535
1465
  }
1536
- testID="input-label"
1537
- themeFontWeight="regular"
1538
- themeIntent="body"
1466
+ testID="text-input-border"
1467
+ themeFocused={false}
1539
1468
  themeState="filled"
1469
+ />
1470
+ <View
1471
+ pointerEvents="none"
1472
+ style={
1473
+ [
1474
+ {
1475
+ "backgroundColor": "#ffffff",
1476
+ "flexDirection": "row",
1477
+ "left": 16,
1478
+ "paddingHorizontal": 4,
1479
+ "position": "absolute",
1480
+ "top": -4,
1481
+ "zIndex": 1,
1482
+ },
1483
+ {
1484
+ "backgroundColor": "#ffffff",
1485
+ },
1486
+ ]
1487
+ }
1488
+ testID="label-container"
1540
1489
  >
1541
- Allow notifications
1542
- </Text>
1543
- </View>
1544
- <View
1545
- style={
1546
- [
1547
- {
1548
- "alignItems": "center",
1549
- "alignSelf": "stretch",
1550
- "flexDirection": "row",
1551
- "flexGrow": 2,
1552
- "flexShrink": 1,
1553
- },
1554
- undefined,
1555
- ]
1556
- }
1557
- >
1558
- <TextInput
1559
- accessibilityState={
1560
- {
1561
- "disabled": false,
1490
+ <Text
1491
+ allowFontScaling={false}
1492
+ style={
1493
+ [
1494
+ {
1495
+ "color": "#001f23",
1496
+ "fontFamily": "BeVietnamPro-Regular",
1497
+ "fontSize": 12,
1498
+ "letterSpacing": 0.48,
1499
+ "lineHeight": 16,
1500
+ },
1501
+ [
1502
+ {
1503
+ "color": "#001f23",
1504
+ "lineHeight": 12,
1505
+ },
1506
+ {
1507
+ "backgroundColor": "#ffffff",
1508
+ },
1509
+ ],
1510
+ ]
1562
1511
  }
1563
- }
1564
- allowFontScaling={false}
1565
- editable={true}
1566
- multiline={true}
1567
- onBlur={[Function]}
1568
- onChangeText={[Function]}
1569
- onFocus={[Function]}
1570
- placeholder=" "
1571
- pointerEvents="none"
1512
+ testID="input-label"
1513
+ themeFontWeight="regular"
1514
+ themeIntent="body"
1515
+ themeState="filled"
1516
+ >
1517
+ Allow notifications
1518
+ </Text>
1519
+ </View>
1520
+ <View
1572
1521
  style={
1573
1522
  [
1574
1523
  {
1524
+ "alignItems": "center",
1575
1525
  "alignSelf": "stretch",
1526
+ "flexDirection": "row",
1576
1527
  "flexGrow": 2,
1577
- "fontFamily": "BeVietnamPro-Regular",
1578
- "fontSize": 16,
1579
- "height": undefined,
1580
- "marginHorizontal": 8,
1581
- "maxHeight": 144,
1582
- "paddingVertical": 0,
1583
- "textAlignVertical": "center",
1528
+ "flexShrink": 1,
1584
1529
  },
1530
+ undefined,
1531
+ ]
1532
+ }
1533
+ >
1534
+ <TextInput
1535
+ accessibilityState={
1536
+ {
1537
+ "disabled": false,
1538
+ }
1539
+ }
1540
+ allowFontScaling={false}
1541
+ editable={true}
1542
+ multiline={true}
1543
+ onBlur={[Function]}
1544
+ onChangeText={[Function]}
1545
+ onFocus={[Function]}
1546
+ placeholder=" "
1547
+ pointerEvents="none"
1548
+ style={
1549
+ [
1550
+ {
1551
+ "alignSelf": "stretch",
1552
+ "flexGrow": 2,
1553
+ "fontFamily": "BeVietnamPro-Regular",
1554
+ "fontSize": 16,
1555
+ "height": undefined,
1556
+ "marginHorizontal": 8,
1557
+ "maxHeight": 144,
1558
+ "paddingVertical": 0,
1559
+ "textAlignVertical": "center",
1560
+ },
1561
+ {
1562
+ "backgroundColor": "#ffffff",
1563
+ "color": "#001f23",
1564
+ },
1565
+ ]
1566
+ }
1567
+ testID="text-input"
1568
+ themeVariant="text"
1569
+ value="Monday, Tuesday"
1570
+ />
1571
+ </View>
1572
+ <HeroIcon
1573
+ name="arrow-down"
1574
+ style={
1575
+ [
1585
1576
  {
1586
- "backgroundColor": "#ffffff",
1587
1577
  "color": "#001f23",
1578
+ "fontSize": 24,
1588
1579
  },
1580
+ undefined,
1589
1581
  ]
1590
1582
  }
1591
- testID="text-input"
1592
- themeVariant="text"
1593
- value="Monday, Tuesday"
1583
+ testID="input-suffix"
1584
+ themeIntent="text"
1585
+ themeSize="medium"
1594
1586
  />
1595
1587
  </View>
1596
- <HeroIcon
1597
- name="arrow-down"
1598
- style={
1599
- [
1600
- {
1601
- "color": "#001f23",
1602
- "fontSize": 24,
1603
- },
1604
- undefined,
1605
- ]
1606
- }
1607
- testID="input-suffix"
1608
- themeIntent="text"
1609
- themeSize="medium"
1610
- />
1611
- </View>
1612
- <View
1613
- style={
1614
- [
1615
- {
1616
- "minHeight": 16,
1617
- "paddingLeft": 16,
1618
- "paddingTop": 2,
1619
- },
1620
- undefined,
1621
- ]
1622
- }
1623
- >
1624
1588
  <View
1625
1589
  style={
1626
1590
  [
1627
1591
  {
1628
- "flexDirection": "row",
1629
- "justifyContent": "space-between",
1592
+ "minHeight": 16,
1593
+ "paddingLeft": 16,
1594
+ "paddingTop": 2,
1630
1595
  },
1631
1596
  undefined,
1632
1597
  ]
1633
1598
  }
1634
- />
1599
+ >
1600
+ <View
1601
+ style={
1602
+ [
1603
+ {
1604
+ "flexDirection": "row",
1605
+ "justifyContent": "space-between",
1606
+ },
1607
+ undefined,
1608
+ ]
1609
+ }
1610
+ />
1611
+ </View>
1635
1612
  </View>
1636
1613
  </View>
1637
1614
  </View>
1638
- </View>
1639
- </View>
1615
+ </View>,
1616
+ <Modal
1617
+ hardwareAccelerated={false}
1618
+ onRequestClose={[Function]}
1619
+ transparent={true}
1620
+ visible={false}
1621
+ />,
1622
+ ]
1640
1623
  `;
1641
1624
 
1642
1625
  exports[`rendering renders correctly when bottom sheet is visible 1`] = `
@@ -1861,37 +1844,11 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
1861
1844
  </View>
1862
1845
  </View>
1863
1846
  </View>,
1864
- <View
1865
- collapsable={false}
1866
- style={
1867
- {
1868
- "backgroundColor": "transparent",
1869
- "bottom": 0,
1870
- "left": 0,
1871
- "opacity": 0.4,
1872
- "position": "absolute",
1873
- "right": 0,
1874
- "top": 0,
1875
- }
1876
- }
1877
- />,
1878
- <View
1879
- collapsable={false}
1880
- style={
1881
- {
1882
- "bottom": 0,
1883
- "left": 0,
1884
- "opacity": 1,
1885
- "position": "absolute",
1886
- "right": 0,
1887
- "top": 0,
1888
- "transform": [
1889
- {
1890
- "translateY": 0,
1891
- },
1892
- ],
1893
- }
1894
- }
1847
+ <Modal
1848
+ hardwareAccelerated={false}
1849
+ onRequestClose={[Function]}
1850
+ transparent={true}
1851
+ visible={true}
1895
1852
  >
1896
1853
  <View
1897
1854
  pointerEvents="box-none"
@@ -3186,6 +3143,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
3186
3143
  "borderRadius": 4,
3187
3144
  "borderWidth": 0,
3188
3145
  "flexDirection": "row",
3146
+ "height": 60,
3189
3147
  "justifyContent": "center",
3190
3148
  "padding": 12,
3191
3149
  },
@@ -3231,55 +3189,42 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
3231
3189
  </RCTSafeAreaView>
3232
3190
  </View>
3233
3191
  </View>
3234
- </View>,
3192
+ </Modal>,
3235
3193
  ]
3236
3194
  `;
3237
3195
 
3238
3196
  exports[`rendering renders correctly when input is loading 1`] = `
3239
- <View
3240
- pointerEvents="none"
3241
- >
3197
+ [
3242
3198
  <View
3243
- accessible={true}
3244
- collapsable={false}
3245
- focusable={true}
3246
- onClick={[Function]}
3247
- onResponderGrant={[Function]}
3248
- onResponderMove={[Function]}
3249
- onResponderRelease={[Function]}
3250
- onResponderTerminate={[Function]}
3251
- onResponderTerminationRequest={[Function]}
3252
- onStartShouldSetResponder={[Function]}
3253
- style={
3254
- {
3255
- "opacity": 1,
3256
- }
3257
- }
3199
+ pointerEvents="none"
3258
3200
  >
3259
3201
  <View
3260
- pointerEvents="none"
3202
+ accessible={true}
3203
+ collapsable={false}
3204
+ focusable={true}
3205
+ onClick={[Function]}
3206
+ onResponderGrant={[Function]}
3207
+ onResponderMove={[Function]}
3208
+ onResponderRelease={[Function]}
3209
+ onResponderTerminate={[Function]}
3210
+ onResponderTerminationRequest={[Function]}
3211
+ onStartShouldSetResponder={[Function]}
3212
+ style={
3213
+ {
3214
+ "opacity": 1,
3215
+ }
3216
+ }
3261
3217
  >
3262
3218
  <View
3263
3219
  pointerEvents="none"
3264
- style={
3265
- [
3266
- {
3267
- "marginTop": 8,
3268
- "width": "100%",
3269
- },
3270
- undefined,
3271
- ]
3272
- }
3273
3220
  >
3274
3221
  <View
3222
+ pointerEvents="none"
3275
3223
  style={
3276
3224
  [
3277
3225
  {
3278
- "alignItems": "center",
3279
- "backgroundColor": "#ffffff",
3280
- "borderRadius": 8,
3281
- "flexDirection": "row",
3282
- "padding": 16,
3226
+ "marginTop": 8,
3227
+ "width": "100%",
3283
3228
  },
3284
3229
  undefined,
3285
3230
  ]
@@ -3289,186 +3234,207 @@ exports[`rendering renders correctly when input is loading 1`] = `
3289
3234
  style={
3290
3235
  [
3291
3236
  {
3292
- "borderColor": "#808f91",
3293
- "borderRadius": 8,
3294
- "borderWidth": 1,
3295
- "bottom": 0,
3296
- "left": 0,
3297
- "position": "absolute",
3298
- "right": 0,
3299
- "top": 0,
3300
- },
3301
- [
3302
- {
3303
- "backgroundColor": "#ffffff",
3304
- },
3305
- undefined,
3306
- ],
3307
- ]
3308
- }
3309
- testID="text-input-border"
3310
- themeFocused={false}
3311
- themeState="readonly"
3312
- />
3313
- <View
3314
- pointerEvents="none"
3315
- style={
3316
- [
3317
- {
3237
+ "alignItems": "center",
3318
3238
  "backgroundColor": "#ffffff",
3239
+ "borderRadius": 8,
3319
3240
  "flexDirection": "row",
3320
- "left": 16,
3321
- "paddingHorizontal": 4,
3322
- "position": "absolute",
3323
- "top": -4,
3324
- "zIndex": 1,
3325
- },
3326
- {
3327
- "backgroundColor": "#ffffff",
3241
+ "padding": 16,
3328
3242
  },
3243
+ undefined,
3329
3244
  ]
3330
3245
  }
3331
- testID="label-container"
3332
3246
  >
3333
- <Text
3334
- allowFontScaling={false}
3247
+ <View
3335
3248
  style={
3336
3249
  [
3337
3250
  {
3338
- "color": "#001f23",
3339
- "fontFamily": "BeVietnamPro-Regular",
3340
- "fontSize": 12,
3341
- "letterSpacing": 0.48,
3342
- "lineHeight": 16,
3251
+ "borderColor": "#808f91",
3252
+ "borderRadius": 8,
3253
+ "borderWidth": 1,
3254
+ "bottom": 0,
3255
+ "left": 0,
3256
+ "position": "absolute",
3257
+ "right": 0,
3258
+ "top": 0,
3343
3259
  },
3344
3260
  [
3345
- {
3346
- "color": "#808f91",
3347
- "lineHeight": 12,
3348
- },
3349
3261
  {
3350
3262
  "backgroundColor": "#ffffff",
3351
3263
  },
3264
+ undefined,
3352
3265
  ],
3353
3266
  ]
3354
3267
  }
3355
- testID="input-label"
3356
- themeFontWeight="regular"
3357
- themeIntent="body"
3268
+ testID="text-input-border"
3269
+ themeFocused={false}
3358
3270
  themeState="readonly"
3359
- >
3360
- Allow notifications
3361
- </Text>
3362
- </View>
3363
- <View
3364
- style={
3365
- [
3366
- {
3367
- "alignItems": "center",
3368
- "alignSelf": "stretch",
3369
- "flexDirection": "row",
3370
- "flexGrow": 2,
3371
- "flexShrink": 1,
3372
- },
3373
- undefined,
3374
- ]
3375
- }
3376
- >
3377
- <TextInput
3378
- accessibilityState={
3379
- {
3380
- "disabled": true,
3381
- }
3382
- }
3383
- allowFontScaling={false}
3384
- editable={true}
3385
- multiline={true}
3386
- onBlur={[Function]}
3387
- onChangeText={[Function]}
3388
- onFocus={[Function]}
3389
- placeholder=" "
3271
+ />
3272
+ <View
3390
3273
  pointerEvents="none"
3391
3274
  style={
3392
3275
  [
3393
3276
  {
3394
- "alignSelf": "stretch",
3395
- "flexGrow": 2,
3396
- "fontFamily": "BeVietnamPro-Regular",
3397
- "fontSize": 16,
3398
- "height": undefined,
3399
- "marginHorizontal": 8,
3400
- "maxHeight": 144,
3401
- "paddingVertical": 0,
3402
- "textAlignVertical": "center",
3277
+ "backgroundColor": "#ffffff",
3278
+ "flexDirection": "row",
3279
+ "left": 16,
3280
+ "paddingHorizontal": 4,
3281
+ "position": "absolute",
3282
+ "top": -4,
3283
+ "zIndex": 1,
3403
3284
  },
3404
3285
  {
3405
3286
  "backgroundColor": "#ffffff",
3406
- "color": "#001f23",
3407
3287
  },
3408
3288
  ]
3409
3289
  }
3410
- testID="text-input"
3411
- themeVariant="text"
3412
- value="Monday, Tuesday"
3413
- />
3414
- </View>
3415
- <View
3416
- collapsable={false}
3417
- style={
3418
- {
3419
- "transform": [
3420
- {
3421
- "rotate": "0deg",
3422
- },
3423
- ],
3424
- }
3425
- }
3426
- >
3427
- <HeroIcon
3428
- name="loading"
3290
+ testID="label-container"
3291
+ >
3292
+ <Text
3293
+ allowFontScaling={false}
3294
+ style={
3295
+ [
3296
+ {
3297
+ "color": "#001f23",
3298
+ "fontFamily": "BeVietnamPro-Regular",
3299
+ "fontSize": 12,
3300
+ "letterSpacing": 0.48,
3301
+ "lineHeight": 16,
3302
+ },
3303
+ [
3304
+ {
3305
+ "color": "#808f91",
3306
+ "lineHeight": 12,
3307
+ },
3308
+ {
3309
+ "backgroundColor": "#ffffff",
3310
+ },
3311
+ ],
3312
+ ]
3313
+ }
3314
+ testID="input-label"
3315
+ themeFontWeight="regular"
3316
+ themeIntent="body"
3317
+ themeState="readonly"
3318
+ >
3319
+ Allow notifications
3320
+ </Text>
3321
+ </View>
3322
+ <View
3429
3323
  style={
3430
3324
  [
3431
3325
  {
3432
- "color": "#001f23",
3433
- "fontSize": 24,
3326
+ "alignItems": "center",
3327
+ "alignSelf": "stretch",
3328
+ "flexDirection": "row",
3329
+ "flexGrow": 2,
3330
+ "flexShrink": 1,
3434
3331
  },
3435
3332
  undefined,
3436
3333
  ]
3437
3334
  }
3438
- testID="input-suffix"
3439
- themeIntent="text"
3440
- themeSize="medium"
3441
- />
3335
+ >
3336
+ <TextInput
3337
+ accessibilityState={
3338
+ {
3339
+ "disabled": true,
3340
+ }
3341
+ }
3342
+ allowFontScaling={false}
3343
+ editable={true}
3344
+ multiline={true}
3345
+ onBlur={[Function]}
3346
+ onChangeText={[Function]}
3347
+ onFocus={[Function]}
3348
+ placeholder=" "
3349
+ pointerEvents="none"
3350
+ style={
3351
+ [
3352
+ {
3353
+ "alignSelf": "stretch",
3354
+ "flexGrow": 2,
3355
+ "fontFamily": "BeVietnamPro-Regular",
3356
+ "fontSize": 16,
3357
+ "height": undefined,
3358
+ "marginHorizontal": 8,
3359
+ "maxHeight": 144,
3360
+ "paddingVertical": 0,
3361
+ "textAlignVertical": "center",
3362
+ },
3363
+ {
3364
+ "backgroundColor": "#ffffff",
3365
+ "color": "#001f23",
3366
+ },
3367
+ ]
3368
+ }
3369
+ testID="text-input"
3370
+ themeVariant="text"
3371
+ value="Monday, Tuesday"
3372
+ />
3373
+ </View>
3374
+ <View
3375
+ collapsable={false}
3376
+ style={
3377
+ {
3378
+ "transform": [
3379
+ {
3380
+ "rotate": "0deg",
3381
+ },
3382
+ ],
3383
+ }
3384
+ }
3385
+ >
3386
+ <HeroIcon
3387
+ name="loading"
3388
+ style={
3389
+ [
3390
+ {
3391
+ "color": "#001f23",
3392
+ "fontSize": 24,
3393
+ },
3394
+ undefined,
3395
+ ]
3396
+ }
3397
+ testID="input-suffix"
3398
+ themeIntent="text"
3399
+ themeSize="medium"
3400
+ />
3401
+ </View>
3442
3402
  </View>
3443
- </View>
3444
- <View
3445
- style={
3446
- [
3447
- {
3448
- "minHeight": 16,
3449
- "paddingLeft": 16,
3450
- "paddingTop": 2,
3451
- },
3452
- undefined,
3453
- ]
3454
- }
3455
- >
3456
3403
  <View
3457
3404
  style={
3458
3405
  [
3459
3406
  {
3460
- "flexDirection": "row",
3461
- "justifyContent": "space-between",
3407
+ "minHeight": 16,
3408
+ "paddingLeft": 16,
3409
+ "paddingTop": 2,
3462
3410
  },
3463
3411
  undefined,
3464
3412
  ]
3465
3413
  }
3466
- />
3414
+ >
3415
+ <View
3416
+ style={
3417
+ [
3418
+ {
3419
+ "flexDirection": "row",
3420
+ "justifyContent": "space-between",
3421
+ },
3422
+ undefined,
3423
+ ]
3424
+ }
3425
+ />
3426
+ </View>
3467
3427
  </View>
3468
3428
  </View>
3469
3429
  </View>
3470
- </View>
3471
- </View>
3430
+ </View>,
3431
+ <Modal
3432
+ hardwareAccelerated={false}
3433
+ onRequestClose={[Function]}
3434
+ transparent={true}
3435
+ visible={false}
3436
+ />,
3437
+ ]
3472
3438
  `;
3473
3439
 
3474
3440
  exports[`rendering renders correctly when receives sections 1`] = `
@@ -3693,37 +3659,11 @@ exports[`rendering renders correctly when receives sections 1`] = `
3693
3659
  </View>
3694
3660
  </View>
3695
3661
  </View>,
3696
- <View
3697
- collapsable={false}
3698
- style={
3699
- {
3700
- "backgroundColor": "transparent",
3701
- "bottom": 0,
3702
- "left": 0,
3703
- "opacity": 0.4,
3704
- "position": "absolute",
3705
- "right": 0,
3706
- "top": 0,
3707
- }
3708
- }
3709
- />,
3710
- <View
3711
- collapsable={false}
3712
- style={
3713
- {
3714
- "bottom": 0,
3715
- "left": 0,
3716
- "opacity": 1,
3717
- "position": "absolute",
3718
- "right": 0,
3719
- "top": 0,
3720
- "transform": [
3721
- {
3722
- "translateY": 0,
3723
- },
3724
- ],
3725
- }
3726
- }
3662
+ <Modal
3663
+ hardwareAccelerated={false}
3664
+ onRequestClose={[Function]}
3665
+ transparent={true}
3666
+ visible={true}
3727
3667
  >
3728
3668
  <View
3729
3669
  pointerEvents="box-none"
@@ -4632,6 +4572,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
4632
4572
  "borderRadius": 4,
4633
4573
  "borderWidth": 0,
4634
4574
  "flexDirection": "row",
4575
+ "height": 60,
4635
4576
  "justifyContent": "center",
4636
4577
  "padding": 12,
4637
4578
  },
@@ -4677,7 +4618,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
4677
4618
  </RCTSafeAreaView>
4678
4619
  </View>
4679
4620
  </View>
4680
- </View>,
4621
+ </Modal>,
4681
4622
  ]
4682
4623
  `;
4683
4624
 
@@ -4903,37 +4844,11 @@ exports[`rendering renders correctly when receives sections 2`] = `
4903
4844
  </View>
4904
4845
  </View>
4905
4846
  </View>,
4906
- <View
4907
- collapsable={false}
4908
- style={
4909
- {
4910
- "backgroundColor": "transparent",
4911
- "bottom": 0,
4912
- "left": 0,
4913
- "opacity": 0.4,
4914
- "position": "absolute",
4915
- "right": 0,
4916
- "top": 0,
4917
- }
4918
- }
4919
- />,
4920
- <View
4921
- collapsable={false}
4922
- style={
4923
- {
4924
- "bottom": 0,
4925
- "left": 0,
4926
- "opacity": 1,
4927
- "position": "absolute",
4928
- "right": 0,
4929
- "top": 0,
4930
- "transform": [
4931
- {
4932
- "translateY": 0,
4933
- },
4934
- ],
4935
- }
4936
- }
4847
+ <Modal
4848
+ hardwareAccelerated={false}
4849
+ onRequestClose={[Function]}
4850
+ transparent={true}
4851
+ visible={true}
4937
4852
  >
4938
4853
  <View
4939
4854
  pointerEvents="box-none"
@@ -5814,6 +5729,7 @@ exports[`rendering renders correctly when receives sections 2`] = `
5814
5729
  "borderRadius": 4,
5815
5730
  "borderWidth": 0,
5816
5731
  "flexDirection": "row",
5732
+ "height": 60,
5817
5733
  "justifyContent": "center",
5818
5734
  "padding": 12,
5819
5735
  },
@@ -5859,6 +5775,6 @@ exports[`rendering renders correctly when receives sections 2`] = `
5859
5775
  </RCTSafeAreaView>
5860
5776
  </View>
5861
5777
  </View>
5862
- </View>,
5778
+ </Modal>,
5863
5779
  ]
5864
5780
  `;