@hero-design/rn 8.24.0 → 8.25.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/.turbo/turbo-build.log +9 -9
  2. package/es/index.js +111 -60
  3. package/lib/index.js +110 -59
  4. package/package.json +5 -5
  5. package/src/components/Carousel/CardCarousel.tsx +23 -7
  6. package/src/components/Carousel/__tests__/CardCarousel.spec.tsx +177 -70
  7. package/src/components/Carousel/__tests__/__snapshots__/CardCarousel.spec.tsx.snap +294 -1
  8. package/src/components/Collapse/index.tsx +11 -10
  9. package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap +21 -15
  10. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap +7 -5
  11. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap +7 -5
  12. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap +7 -5
  13. package/src/components/Error/StyledError.tsx +2 -0
  14. package/src/components/Error/__tests__/__snapshots__/index.spec.tsx.snap +8 -0
  15. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +28 -20
  16. package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +28 -20
  17. package/src/components/Spinner/AnimatedSpinner.tsx +2 -2
  18. package/src/components/TextInput/StyledTextInput.tsx +4 -0
  19. package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap +21 -1
  20. package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap +112 -78
  21. package/src/components/TextInput/index.tsx +1 -4
  22. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap +14 -10
  23. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap +14 -10
  24. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +9 -1
  25. package/src/theme/components/error.ts +6 -1
  26. package/src/theme/components/textInput.ts +16 -2
  27. package/types/components/Collapse/index.d.ts +1 -1
  28. package/types/theme/components/error.d.ts +4 -0
  29. package/types/theme/components/textInput.d.ts +4 -0
package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap CHANGED
@@ -88,7 +88,7 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
88
88
  "left": 16,
89
89
  "paddingHorizontal": 4,
90
90
  "position": "absolute",
91
- "top": -10,
91
+ "top": -5,
92
92
  "zIndex": 1,
93
93
  },
94
94
  Object {
@@ -105,13 +105,15 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
105
105
  Object {
106
106
  "color": "#001f23",
107
107
  "fontFamily": "BeVietnamPro-Regular",
108
- "fontSize": 12,
109
- "letterSpacing": 0.36,
110
- "lineHeight": 20,
108
+ "fontSize": 14,
109
+ "letterSpacing": 0.42,
110
+ "lineHeight": 22,
111
111
  },
112
112
  Array [
113
113
  Object {
114
114
  "color": "#001f23",
115
+ "fontSize": 12,
116
+ "lineHeight": 12,
115
117
  },
116
118
  Object {
117
119
  "backgroundColor": "#ffffff",
@@ -120,7 +122,7 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
120
122
  ]
121
123
  }
122
124
  testID="input-label"
123
- themeFontSize="small"
125
+ themeFontSize="medium"
124
126
  themeFontWeight="regular"
125
127
  themeIntent="body"
126
128
  themeState="filled"
@@ -311,7 +313,7 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
311
313
  "left": 16,
312
314
  "paddingHorizontal": 4,
313
315
  "position": "absolute",
314
- "top": -10,
316
+ "top": -5,
315
317
  "zIndex": 1,
316
318
  },
317
319
  Object {
@@ -328,13 +330,15 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
328
330
  Object {
329
331
  "color": "#001f23",
330
332
  "fontFamily": "BeVietnamPro-Regular",
331
- "fontSize": 12,
332
- "letterSpacing": 0.36,
333
- "lineHeight": 20,
333
+ "fontSize": 14,
334
+ "letterSpacing": 0.42,
335
+ "lineHeight": 22,
334
336
  },
335
337
  Array [
336
338
  Object {
337
339
  "color": "#001f23",
340
+ "fontSize": 12,
341
+ "lineHeight": 12,
338
342
  },
339
343
  Object {
340
344
  "backgroundColor": "#ffffff",
@@ -343,7 +347,7 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
343
347
  ]
344
348
  }
345
349
  testID="input-label"
346
- themeFontSize="small"
350
+ themeFontSize="medium"
347
351
  themeFontWeight="regular"
348
352
  themeIntent="body"
349
353
  themeState="filled"
@@ -540,7 +544,7 @@ exports[`DatePicker renders variant Calendar 1`] = `
540
544
  "left": 16,
541
545
  "paddingHorizontal": 4,
542
546
  "position": "absolute",
543
- "top": -10,
547
+ "top": -5,
544
548
  "zIndex": 1,
545
549
  },
546
550
  Object {
@@ -557,13 +561,15 @@ exports[`DatePicker renders variant Calendar 1`] = `
557
561
  Object {
558
562
  "color": "#001f23",
559
563
  "fontFamily": "BeVietnamPro-Regular",
560
- "fontSize": 12,
561
- "letterSpacing": 0.36,
562
- "lineHeight": 20,
564
+ "fontSize": 14,
565
+ "letterSpacing": 0.42,
566
+ "lineHeight": 22,
563
567
  },
564
568
  Array [
565
569
  Object {
566
570
  "color": "#001f23",
571
+ "fontSize": 12,
572
+ "lineHeight": 12,
567
573
  },
568
574
  Object {
569
575
  "backgroundColor": "#ffffff",
@@ -572,7 +578,7 @@ exports[`DatePicker renders variant Calendar 1`] = `
572
578
  ]
573
579
  }
574
580
  testID="input-label"
575
- themeFontSize="small"
581
+ themeFontSize="medium"
576
582
  themeFontWeight="regular"
577
583
  themeIntent="body"
578
584
  themeState="filled"
package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap CHANGED
@@ -88,7 +88,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
88
88
  "left": 16,
89
89
  "paddingHorizontal": 4,
90
90
  "position": "absolute",
91
- "top": -10,
91
+ "top": -5,
92
92
  "zIndex": 1,
93
93
  },
94
94
  Object {
@@ -105,13 +105,15 @@ exports[`DatePickerAndroid renders correctly 1`] = `
105
105
  Object {
106
106
  "color": "#001f23",
107
107
  "fontFamily": "BeVietnamPro-Regular",
108
- "fontSize": 12,
109
- "letterSpacing": 0.36,
110
- "lineHeight": 20,
108
+ "fontSize": 14,
109
+ "letterSpacing": 0.42,
110
+ "lineHeight": 22,
111
111
  },
112
112
  Array [
113
113
  Object {
114
114
  "color": "#001f23",
115
+ "fontSize": 12,
116
+ "lineHeight": 12,
115
117
  },
116
118
  Object {
117
119
  "backgroundColor": "#ffffff",
@@ -120,7 +122,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
120
122
  ]
121
123
  }
122
124
  testID="input-label"
123
- themeFontSize="small"
125
+ themeFontSize="medium"
124
126
  themeFontWeight="regular"
125
127
  themeIntent="body"
126
128
  themeState="filled"
package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap CHANGED
@@ -88,7 +88,7 @@ exports[`DatePickerCalendar renders correctly 1`] = `
88
88
  "left": 16,
89
89
  "paddingHorizontal": 4,
90
90
  "position": "absolute",
91
- "top": -10,
91
+ "top": -5,
92
92
  "zIndex": 1,
93
93
  },
94
94
  Object {
@@ -105,13 +105,15 @@ exports[`DatePickerCalendar renders correctly 1`] = `
105
105
  Object {
106
106
  "color": "#001f23",
107
107
  "fontFamily": "BeVietnamPro-Regular",
108
- "fontSize": 12,
109
- "letterSpacing": 0.36,
110
- "lineHeight": 20,
108
+ "fontSize": 14,
109
+ "letterSpacing": 0.42,
110
+ "lineHeight": 22,
111
111
  },
112
112
  Array [
113
113
  Object {
114
114
  "color": "#001f23",
115
+ "fontSize": 12,
116
+ "lineHeight": 12,
115
117
  },
116
118
  Object {
117
119
  "backgroundColor": "#ffffff",
@@ -120,7 +122,7 @@ exports[`DatePickerCalendar renders correctly 1`] = `
120
122
  ]
121
123
  }
122
124
  testID="input-label"
123
- themeFontSize="small"
125
+ themeFontSize="medium"
124
126
  themeFontWeight="regular"
125
127
  themeIntent="body"
126
128
  themeState="filled"
package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap CHANGED
@@ -88,7 +88,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
88
88
  "left": 16,
89
89
  "paddingHorizontal": 4,
90
90
  "position": "absolute",
91
- "top": -10,
91
+ "top": -5,
92
92
  "zIndex": 1,
93
93
  },
94
94
  Object {
@@ -105,13 +105,15 @@ exports[`DatePickerIOS renders correctly 1`] = `
105
105
  Object {
106
106
  "color": "#001f23",
107
107
  "fontFamily": "BeVietnamPro-Regular",
108
- "fontSize": 12,
109
- "letterSpacing": 0.36,
110
- "lineHeight": 20,
108
+ "fontSize": 14,
109
+ "letterSpacing": 0.42,
110
+ "lineHeight": 22,
111
111
  },
112
112
  Array [
113
113
  Object {
114
114
  "color": "#001f23",
115
+ "fontSize": 12,
116
+ "lineHeight": 12,
115
117
  },
116
118
  Object {
117
119
  "backgroundColor": "#ffffff",
@@ -120,7 +122,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
120
122
  ]
121
123
  }
122
124
  testID="input-label"
123
- themeFontSize="small"
125
+ themeFontSize="medium"
124
126
  themeFontWeight="regular"
125
127
  themeIntent="body"
126
128
  themeState="filled"
package/src/components/Error/StyledError.tsx CHANGED
@@ -68,6 +68,7 @@ const StyledErrorTitle = styled(Typography.Text)(({ theme }) => ({
68
68
  textAlign: 'center',
69
69
  marginBottom: theme.__hd__.error.space.titleMarginBottom,
70
70
  color: theme.__hd__.error.colors.title,
71
+ lineHeight: theme.__hd__.error.lineHeight.title,
71
72
  }));
72
73
 
73
74
  const StyledErrorDescription = styled(Typography.Text)(({ theme }) => ({
@@ -75,6 +76,7 @@ const StyledErrorDescription = styled(Typography.Text)(({ theme }) => ({
75
76
  fontSize: theme.__hd__.error.fontSizes.description,
76
77
  textAlign: 'center',
77
78
  color: theme.__hd__.error.colors.description,
79
+ lineHeight: theme.__hd__.error.lineHeight.description,
78
80
  }));
79
81
 
80
82
  export {
package/src/components/Error/__tests__/__snapshots__/index.spec.tsx.snap CHANGED
@@ -77,6 +77,7 @@ exports[`Error renders error screen with custom image element correctly 1`] = `
77
77
  "color": "#001f23",
78
78
  "fontFamily": "RebondGrotesque-SemiBold",
79
79
  "fontSize": 24,
80
+ "lineHeight": 32,
80
81
  "marginBottom": 8,
81
82
  "textAlign": "center",
82
83
  },
@@ -107,6 +108,7 @@ exports[`Error renders error screen with custom image element correctly 1`] = `
107
108
  "color": "#4d6265",
108
109
  "fontFamily": "RebondGrotesque",
109
110
  "fontSize": 18,
111
+ "lineHeight": 26,
110
112
  "textAlign": "center",
111
113
  },
112
114
  undefined,
@@ -209,6 +211,7 @@ exports[`Error renders error screen with image correctly 1`] = `
209
211
  "color": "#001f23",
210
212
  "fontFamily": "RebondGrotesque-SemiBold",
211
213
  "fontSize": 24,
214
+ "lineHeight": 32,
212
215
  "marginBottom": 8,
213
216
  "textAlign": "center",
214
217
  },
@@ -239,6 +242,7 @@ exports[`Error renders error screen with image correctly 1`] = `
239
242
  "color": "#4d6265",
240
243
  "fontFamily": "RebondGrotesque",
241
244
  "fontSize": 18,
245
+ "lineHeight": 26,
242
246
  "textAlign": "center",
243
247
  },
244
248
  undefined,
@@ -357,6 +361,7 @@ exports[`Error renders full screen error page correctly 1`] = `
357
361
  "color": "#001f23",
358
362
  "fontFamily": "RebondGrotesque-SemiBold",
359
363
  "fontSize": 24,
364
+ "lineHeight": 32,
360
365
  "marginBottom": 8,
361
366
  "textAlign": "center",
362
367
  },
@@ -387,6 +392,7 @@ exports[`Error renders full screen error page correctly 1`] = `
387
392
  "color": "#4d6265",
388
393
  "fontFamily": "RebondGrotesque",
389
394
  "fontSize": 18,
395
+ "lineHeight": 26,
390
396
  "textAlign": "center",
391
397
  },
392
398
  undefined,
@@ -451,6 +457,7 @@ exports[`Error renders title only correctly 1`] = `
451
457
  "color": "#001f23",
452
458
  "fontFamily": "RebondGrotesque-SemiBold",
453
459
  "fontSize": 24,
460
+ "lineHeight": 32,
454
461
  "marginBottom": 8,
455
462
  "textAlign": "center",
456
463
  },
@@ -481,6 +488,7 @@ exports[`Error renders title only correctly 1`] = `
481
488
  "color": "#4d6265",
482
489
  "fontFamily": "RebondGrotesque",
483
490
  "fontSize": 18,
491
+ "lineHeight": 26,
484
492
  "textAlign": "center",
485
493
  },
486
494
  undefined,
package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap CHANGED
@@ -1486,7 +1486,7 @@ Array [
1486
1486
  "left": 16,
1487
1487
  "paddingHorizontal": 4,
1488
1488
  "position": "absolute",
1489
- "top": -10,
1489
+ "top": -5,
1490
1490
  "zIndex": 1,
1491
1491
  },
1492
1492
  Object {
@@ -1503,13 +1503,15 @@ Array [
1503
1503
  Object {
1504
1504
  "color": "#001f23",
1505
1505
  "fontFamily": "BeVietnamPro-Regular",
1506
- "fontSize": 12,
1507
- "letterSpacing": 0.36,
1508
- "lineHeight": 20,
1506
+ "fontSize": 14,
1507
+ "letterSpacing": 0.42,
1508
+ "lineHeight": 22,
1509
1509
  },
1510
1510
  Array [
1511
1511
  Object {
1512
1512
  "color": "#001f23",
1513
+ "fontSize": 12,
1514
+ "lineHeight": 12,
1513
1515
  },
1514
1516
  Object {
1515
1517
  "backgroundColor": "#ffffff",
@@ -1518,7 +1520,7 @@ Array [
1518
1520
  ]
1519
1521
  }
1520
1522
  testID="input-label"
1521
- themeFontSize="small"
1523
+ themeFontSize="medium"
1522
1524
  themeFontWeight="regular"
1523
1525
  themeIntent="body"
1524
1526
  themeState="filled"
@@ -1717,7 +1719,7 @@ Array [
1717
1719
  "left": 16,
1718
1720
  "paddingHorizontal": 4,
1719
1721
  "position": "absolute",
1720
- "top": -10,
1722
+ "top": -5,
1721
1723
  "zIndex": 1,
1722
1724
  },
1723
1725
  Object {
@@ -1734,13 +1736,15 @@ Array [
1734
1736
  Object {
1735
1737
  "color": "#001f23",
1736
1738
  "fontFamily": "BeVietnamPro-Regular",
1737
- "fontSize": 12,
1738
- "letterSpacing": 0.36,
1739
- "lineHeight": 20,
1739
+ "fontSize": 14,
1740
+ "letterSpacing": 0.42,
1741
+ "lineHeight": 22,
1740
1742
  },
1741
1743
  Array [
1742
1744
  Object {
1743
1745
  "color": "#001f23",
1746
+ "fontSize": 12,
1747
+ "lineHeight": 12,
1744
1748
  },
1745
1749
  Object {
1746
1750
  "backgroundColor": "#ffffff",
@@ -1749,7 +1753,7 @@ Array [
1749
1753
  ]
1750
1754
  }
1751
1755
  testID="input-label"
1752
- themeFontSize="small"
1756
+ themeFontSize="medium"
1753
1757
  themeFontWeight="regular"
1754
1758
  themeIntent="body"
1755
1759
  themeState="filled"
@@ -3295,7 +3299,7 @@ Array [
3295
3299
  "left": 16,
3296
3300
  "paddingHorizontal": 4,
3297
3301
  "position": "absolute",
3298
- "top": -10,
3302
+ "top": -5,
3299
3303
  "zIndex": 1,
3300
3304
  },
3301
3305
  Object {
@@ -3312,13 +3316,15 @@ Array [
3312
3316
  Object {
3313
3317
  "color": "#001f23",
3314
3318
  "fontFamily": "BeVietnamPro-Regular",
3315
- "fontSize": 12,
3316
- "letterSpacing": 0.36,
3317
- "lineHeight": 20,
3319
+ "fontSize": 14,
3320
+ "letterSpacing": 0.42,
3321
+ "lineHeight": 22,
3318
3322
  },
3319
3323
  Array [
3320
3324
  Object {
3321
3325
  "color": "#808f91",
3326
+ "fontSize": 12,
3327
+ "lineHeight": 12,
3322
3328
  },
3323
3329
  Object {
3324
3330
  "backgroundColor": "#ffffff",
@@ -3327,7 +3333,7 @@ Array [
3327
3333
  ]
3328
3334
  }
3329
3335
  testID="input-label"
3330
- themeFontSize="small"
3336
+ themeFontSize="medium"
3331
3337
  themeFontWeight="regular"
3332
3338
  themeIntent="body"
3333
3339
  themeState="readonly"
@@ -3539,7 +3545,7 @@ Array [
3539
3545
  "left": 16,
3540
3546
  "paddingHorizontal": 4,
3541
3547
  "position": "absolute",
3542
- "top": -10,
3548
+ "top": -5,
3543
3549
  "zIndex": 1,
3544
3550
  },
3545
3551
  Object {
@@ -3556,13 +3562,15 @@ Array [
3556
3562
  Object {
3557
3563
  "color": "#001f23",
3558
3564
  "fontFamily": "BeVietnamPro-Regular",
3559
- "fontSize": 12,
3560
- "letterSpacing": 0.36,
3561
- "lineHeight": 20,
3565
+ "fontSize": 14,
3566
+ "letterSpacing": 0.42,
3567
+ "lineHeight": 22,
3562
3568
  },
3563
3569
  Array [
3564
3570
  Object {
3565
3571
  "color": "#001f23",
3572
+ "fontSize": 12,
3573
+ "lineHeight": 12,
3566
3574
  },
3567
3575
  Object {
3568
3576
  "backgroundColor": "#ffffff",
@@ -3571,7 +3579,7 @@ Array [
3571
3579
  ]
3572
3580
  }
3573
3581
  testID="input-label"
3574
- themeFontSize="small"
3582
+ themeFontSize="medium"
3575
3583
  themeFontWeight="regular"
3576
3584
  themeIntent="body"
3577
3585
  themeState="filled"
package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap CHANGED
@@ -1408,7 +1408,7 @@ Array [
1408
1408
  "left": 16,
1409
1409
  "paddingHorizontal": 4,
1410
1410
  "position": "absolute",
1411
- "top": -10,
1411
+ "top": -5,
1412
1412
  "zIndex": 1,
1413
1413
  },
1414
1414
  Object {
@@ -1425,13 +1425,15 @@ Array [
1425
1425
  Object {
1426
1426
  "color": "#001f23",
1427
1427
  "fontFamily": "BeVietnamPro-Regular",
1428
- "fontSize": 12,
1429
- "letterSpacing": 0.36,
1430
- "lineHeight": 20,
1428
+ "fontSize": 14,
1429
+ "letterSpacing": 0.42,
1430
+ "lineHeight": 22,
1431
1431
  },
1432
1432
  Array [
1433
1433
  Object {
1434
1434
  "color": "#001f23",
1435
+ "fontSize": 12,
1436
+ "lineHeight": 12,
1435
1437
  },
1436
1438
  Object {
1437
1439
  "backgroundColor": "#ffffff",
@@ -1440,7 +1442,7 @@ Array [
1440
1442
  ]
1441
1443
  }
1442
1444
  testID="input-label"
1443
- themeFontSize="small"
1445
+ themeFontSize="medium"
1444
1446
  themeFontWeight="regular"
1445
1447
  themeIntent="body"
1446
1448
  themeState="filled"
@@ -1639,7 +1641,7 @@ Array [
1639
1641
  "left": 16,
1640
1642
  "paddingHorizontal": 4,
1641
1643
  "position": "absolute",
1642
- "top": -10,
1644
+ "top": -5,
1643
1645
  "zIndex": 1,
1644
1646
  },
1645
1647
  Object {
@@ -1656,13 +1658,15 @@ Array [
1656
1658
  Object {
1657
1659
  "color": "#001f23",
1658
1660
  "fontFamily": "BeVietnamPro-Regular",
1659
- "fontSize": 12,
1660
- "letterSpacing": 0.36,
1661
- "lineHeight": 20,
1661
+ "fontSize": 14,
1662
+ "letterSpacing": 0.42,
1663
+ "lineHeight": 22,
1662
1664
  },
1663
1665
  Array [
1664
1666
  Object {
1665
1667
  "color": "#001f23",
1668
+ "fontSize": 12,
1669
+ "lineHeight": 12,
1666
1670
  },
1667
1671
  Object {
1668
1672
  "backgroundColor": "#ffffff",
@@ -1671,7 +1675,7 @@ Array [
1671
1675
  ]
1672
1676
  }
1673
1677
  testID="input-label"
1674
- themeFontSize="small"
1678
+ themeFontSize="medium"
1675
1679
  themeFontWeight="regular"
1676
1680
  themeIntent="body"
1677
1681
  themeState="filled"
@@ -3086,7 +3090,7 @@ Array [
3086
3090
  "left": 16,
3087
3091
  "paddingHorizontal": 4,
3088
3092
  "position": "absolute",
3089
- "top": -10,
3093
+ "top": -5,
3090
3094
  "zIndex": 1,
3091
3095
  },
3092
3096
  Object {
@@ -3103,13 +3107,15 @@ Array [
3103
3107
  Object {
3104
3108
  "color": "#001f23",
3105
3109
  "fontFamily": "BeVietnamPro-Regular",
3106
- "fontSize": 12,
3107
- "letterSpacing": 0.36,
3108
- "lineHeight": 20,
3110
+ "fontSize": 14,
3111
+ "letterSpacing": 0.42,
3112
+ "lineHeight": 22,
3109
3113
  },
3110
3114
  Array [
3111
3115
  Object {
3112
3116
  "color": "#808f91",
3117
+ "fontSize": 12,
3118
+ "lineHeight": 12,
3113
3119
  },
3114
3120
  Object {
3115
3121
  "backgroundColor": "#ffffff",
@@ -3118,7 +3124,7 @@ Array [
3118
3124
  ]
3119
3125
  }
3120
3126
  testID="input-label"
3121
- themeFontSize="small"
3127
+ themeFontSize="medium"
3122
3128
  themeFontWeight="regular"
3123
3129
  themeIntent="body"
3124
3130
  themeState="readonly"
@@ -3330,7 +3336,7 @@ Array [
3330
3336
  "left": 16,
3331
3337
  "paddingHorizontal": 4,
3332
3338
  "position": "absolute",
3333
- "top": -10,
3339
+ "top": -5,
3334
3340
  "zIndex": 1,
3335
3341
  },
3336
3342
  Object {
@@ -3347,13 +3353,15 @@ Array [
3347
3353
  Object {
3348
3354
  "color": "#001f23",
3349
3355
  "fontFamily": "BeVietnamPro-Regular",
3350
- "fontSize": 12,
3351
- "letterSpacing": 0.36,
3352
- "lineHeight": 20,
3356
+ "fontSize": 14,
3357
+ "letterSpacing": 0.42,
3358
+ "lineHeight": 22,
3353
3359
  },
3354
3360
  Array [
3355
3361
  Object {
3356
3362
  "color": "#001f23",
3363
+ "fontSize": 12,
3364
+ "lineHeight": 12,
3357
3365
  },
3358
3366
  Object {
3359
3367
  "backgroundColor": "#ffffff",
@@ -3362,7 +3370,7 @@ Array [
3362
3370
  ]
3363
3371
  }
3364
3372
  testID="input-label"
3365
- themeFontSize="small"
3373
+ themeFontSize="medium"
3366
3374
  themeFontWeight="regular"
3367
3375
  themeIntent="body"
3368
3376
  themeState="filled"
package/src/components/Spinner/AnimatedSpinner.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { useEffect, useRef } from 'react';
2
- import { Animated, Easing, StyleSheet } from 'react-native';
2
+ import { Animated, Easing, Platform, StyleSheet } from 'react-native';
3
3
 
4
4
  import { StyledSpinnerDot, StyledSpinnerRow } from './StyledSpinner';
5
5
 
@@ -22,7 +22,7 @@ const AnimatedSpinner = ({
22
22
  toValue: 1,
23
23
  duration: 1200,
24
24
  easing: Easing.linear,
25
- useNativeDriver: true,
25
+ useNativeDriver: Platform.OS !== 'web',
26
26
  })
27
27
  );
28
28
 
package/src/components/TextInput/StyledTextInput.tsx CHANGED
@@ -23,12 +23,16 @@ const StyledLabel = styled(Typography.Text)<{
23
23
  themeState: State;
24
24
  }>(({ theme, themeState }) => ({
25
25
  color: theme.__hd__.textInput.colors.labels[themeState],
26
+ fontSize: theme.__hd__.textInput.fontSizes.topLabel,
27
+ lineHeight: theme.__hd__.textInput.lineHeights.topLabel,
26
28
  }));
27
29
 
28
30
  const StyledAsteriskLabel = styled(Typography.Text)<{
29
31
  themeState: State;
30
32
  }>(({ theme, themeState }) => ({
31
33
  color: theme.__hd__.textInput.colors.asterisks[themeState],
34
+ fontSize: theme.__hd__.textInput.fontSizes.topLabel,
35
+ lineHeight: theme.__hd__.textInput.lineHeights.topLabel,
32
36
  }));
33
37
 
34
38
  const StyledLabelContainerInsideTextInput = styled(View)<{