@hero-design/rn 8.50.0 → 8.52.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 (33) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/CHANGELOG.md +20 -0
  3. package/assets/fonts/hero-icons-mobile.ttf +0 -0
  4. package/es/index.js +332 -307
  5. package/lib/assets/fonts/hero-icons-mobile.ttf +0 -0
  6. package/lib/index.js +332 -307
  7. package/package.json +1 -1
  8. package/src/components/Carousel/__tests__/index.spec.tsx +14 -0
  9. package/src/components/Carousel/index.tsx +15 -14
  10. package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap +6 -3
  11. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap +2 -1
  12. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap +2 -1
  13. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap +2 -1
  14. package/src/components/Icon/HeroIcon/glyphMap.json +1 -1
  15. package/src/components/Icon/IconList.ts +5 -0
  16. package/src/components/RichTextEditor/__tests__/__snapshots__/RichTextEditor.spec.tsx.snap +4 -2
  17. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +12 -6
  18. package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +10 -5
  19. package/src/components/Swipeable/__tests__/__snapshots__/index.spec.tsx.snap +90 -54
  20. package/src/components/Swipeable/index.tsx +31 -17
  21. package/src/components/TextInput/StyledTextInput.tsx +3 -4
  22. package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap +0 -10
  23. package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap +34 -25
  24. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap +4 -2
  25. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap +4 -2
  26. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +5 -2
  27. package/src/theme/components/swipeable.ts +6 -1
  28. package/src/theme/components/textInput.ts +1 -2
  29. package/types/components/Icon/IconList.d.ts +1 -1
  30. package/types/components/Icon/index.d.ts +1 -1
  31. package/types/components/Icon/utils.d.ts +1 -1
  32. package/types/theme/components/swipeable.d.ts +4 -0
  33. package/types/theme/components/textInput.d.ts +1 -2
@@ -10,37 +10,55 @@ exports[`Swipeable renders correctly with variant=card 1`] = `
10
10
  >
11
11
  <View>
12
12
  <View
13
- containerStyle={
14
- {
15
- "borderRadius": 8,
16
- }
13
+ onLayout={[Function]}
14
+ style={
15
+ [
16
+ {},
17
+ undefined,
18
+ ]
17
19
  }
18
- onSwipeableClose={[Function]}
19
- onSwipeableLeftOpen={[Function]}
20
- onSwipeableRightOpen={[Function]}
21
- renderLeftActions={[Function]}
22
- renderRightActions={[Function]}
23
20
  >
24
- <Text
25
- allowFontScaling={false}
26
- style={
27
- [
28
- {
29
- "color": "#001f23",
30
- "fontFamily": "BeVietnamPro-Regular",
31
- "fontSize": 14,
32
- "letterSpacing": 0.48,
33
- "lineHeight": 22,
34
- },
35
- undefined,
36
- ]
21
+ <View
22
+ childrenContainerStyle={
23
+ {
24
+ "backgroundColor": "#ffffff",
25
+ "borderRadius": 8,
26
+ "position": "relative",
27
+ "width": 4,
28
+ }
29
+ }
30
+ containerStyle={
31
+ {
32
+ "borderRadius": 8,
33
+ }
37
34
  }
38
- themeIntent="body"
39
- themeTypeface="neutral"
40
- themeVariant="small"
35
+ onSwipeableClose={[Function]}
36
+ onSwipeableLeftOpen={[Function]}
37
+ onSwipeableRightOpen={[Function]}
38
+ renderLeftActions={[Function]}
39
+ renderRightActions={[Function]}
41
40
  >
42
- Swipeable Item
43
- </Text>
41
+ <Text
42
+ allowFontScaling={false}
43
+ style={
44
+ [
45
+ {
46
+ "color": "#001f23",
47
+ "fontFamily": "BeVietnamPro-Regular",
48
+ "fontSize": 14,
49
+ "letterSpacing": 0.48,
50
+ "lineHeight": 22,
51
+ },
52
+ undefined,
53
+ ]
54
+ }
55
+ themeIntent="body"
56
+ themeTypeface="neutral"
57
+ themeVariant="small"
58
+ >
59
+ Swipeable Item
60
+ </Text>
61
+ </View>
44
62
  </View>
45
63
  </View>
46
64
  <View
@@ -76,37 +94,55 @@ exports[`Swipeable renders correctly with variant=full-width 1`] = `
76
94
  >
77
95
  <View>
78
96
  <View
79
- containerStyle={
80
- {
81
- "borderRadius": 0,
82
- }
97
+ onLayout={[Function]}
98
+ style={
99
+ [
100
+ {},
101
+ undefined,
102
+ ]
83
103
  }
84
- onSwipeableClose={[Function]}
85
- onSwipeableLeftOpen={[Function]}
86
- onSwipeableRightOpen={[Function]}
87
- renderLeftActions={[Function]}
88
- renderRightActions={[Function]}
89
104
  >
90
- <Text
91
- allowFontScaling={false}
92
- style={
93
- [
94
- {
95
- "color": "#001f23",
96
- "fontFamily": "BeVietnamPro-Regular",
97
- "fontSize": 14,
98
- "letterSpacing": 0.48,
99
- "lineHeight": 22,
100
- },
101
- undefined,
102
- ]
105
+ <View
106
+ childrenContainerStyle={
107
+ {
108
+ "backgroundColor": "#ffffff",
109
+ "borderRadius": 8,
110
+ "position": "relative",
111
+ "width": 4,
112
+ }
113
+ }
114
+ containerStyle={
115
+ {
116
+ "borderRadius": 0,
117
+ }
103
118
  }
104
- themeIntent="body"
105
- themeTypeface="neutral"
106
- themeVariant="small"
119
+ onSwipeableClose={[Function]}
120
+ onSwipeableLeftOpen={[Function]}
121
+ onSwipeableRightOpen={[Function]}
122
+ renderLeftActions={[Function]}
123
+ renderRightActions={[Function]}
107
124
  >
108
- Swipeable Item
109
- </Text>
125
+ <Text
126
+ allowFontScaling={false}
127
+ style={
128
+ [
129
+ {
130
+ "color": "#001f23",
131
+ "fontFamily": "BeVietnamPro-Regular",
132
+ "fontSize": 14,
133
+ "letterSpacing": 0.48,
134
+ "lineHeight": 22,
135
+ },
136
+ undefined,
137
+ ]
138
+ }
139
+ themeIntent="body"
140
+ themeTypeface="neutral"
141
+ themeVariant="small"
142
+ >
143
+ Swipeable Item
144
+ </Text>
145
+ </View>
110
146
  </View>
111
147
  </View>
112
148
  <View
@@ -13,6 +13,7 @@ import {
13
13
  } from 'react-native-gesture-handler';
14
14
  import SwipeableAction from './SwipeableAction';
15
15
  import { useTheme } from '../../theme';
16
+ import Box from '../Box';
16
17
 
17
18
  type State = 'closed' | 'leftOpen' | 'rightOpen';
18
19
  // We are supporting both v1 and v2 of RNGH at the same time.
@@ -90,6 +91,8 @@ const renderActions = (
90
91
  width,
91
92
  flexDirection: 'row',
92
93
  transform: [{ translateX: trans }],
94
+ zIndex: -99,
95
+ position: 'relative',
93
96
  }}
94
97
  >
95
98
  {actions}
@@ -111,6 +114,7 @@ const Swipeable = ({
111
114
  const theme = useTheme();
112
115
  const { width } = useWindowDimensions();
113
116
  const swipeableRef = useRef<RnghSwipeable>(null);
117
+ const [containerWidth, setContainerWidth] = React.useState(0);
114
118
 
115
119
  const renderLeftActions = useCallback(
116
120
  (progress: Animated.AnimatedInterpolation<string | number>) =>
@@ -146,23 +150,33 @@ const Swipeable = ({
146
150
 
147
151
  return (
148
152
  <GestureHandlerRootView>
149
- <RnghSwipeable
150
- {...swipeableProps}
151
- ref={swipeableRef}
152
- {...(leftActions !== undefined && { renderLeftActions })}
153
- {...(rightActions !== undefined && { renderRightActions })}
154
- onSwipeableLeftOpen={() => onStateChange?.('leftOpen')}
155
- onSwipeableRightOpen={() => onStateChange?.('rightOpen')}
156
- onSwipeableClose={() => onStateChange?.('closed')}
157
- containerStyle={{
158
- borderRadius:
159
- variant === 'card'
160
- ? theme.__hd__.swipeable.radii.swipeableContainer
161
- : 0,
162
- }}
163
- >
164
- {children}
165
- </RnghSwipeable>
153
+ <Box onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}>
154
+ <RnghSwipeable
155
+ {...swipeableProps}
156
+ ref={swipeableRef}
157
+ {...(leftActions !== undefined && { renderLeftActions })}
158
+ {...(rightActions !== undefined && { renderRightActions })}
159
+ onSwipeableLeftOpen={() => onStateChange?.('leftOpen')}
160
+ onSwipeableRightOpen={() => onStateChange?.('rightOpen')}
161
+ onSwipeableClose={() => onStateChange?.('closed')}
162
+ containerStyle={{
163
+ borderRadius:
164
+ variant === 'card'
165
+ ? theme.__hd__.swipeable.radii.swipeableContainer
166
+ : 0,
167
+ }}
168
+ childrenContainerStyle={{
169
+ backgroundColor:
170
+ theme.__hd__.swipeable.colors.defaultContainerBackground,
171
+ position: 'relative',
172
+ width:
173
+ containerWidth + theme.__hd__.swipeable.space.containerExtraWidth,
174
+ borderRadius: theme.__hd__.swipeable.radii.swipeableContainer,
175
+ }}
176
+ >
177
+ {children}
178
+ </RnghSwipeable>
179
+ </Box>
166
180
  </GestureHandlerRootView>
167
181
  );
168
182
  };
@@ -56,8 +56,6 @@ const StyledMaxLengthMessage = styled(Typography.Caption)<{
56
56
  themeState: State;
57
57
  }>(({ theme, themeState }) => ({
58
58
  color: theme.__hd__.textInput.colors.maxLengthLabels[themeState],
59
- marginRight: theme.__hd__.textInput.space.maxLengthLabelMarginLeft,
60
- alignSelf: 'flex-end',
61
59
  flex: 1,
62
60
  flexGrow: 1,
63
61
  textAlign: 'right',
@@ -112,8 +110,8 @@ const StyledTextInputAndLabelContainer = styled(View)(() => ({
112
110
  }));
113
111
 
114
112
  const StyledErrorAndHelpTextContainer = styled(View)(({ theme }) => ({
115
- paddingLeft:
116
- theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingLeft,
113
+ paddingHorizontal:
114
+ theme.__hd__.textInput.space.errorAndHelpTextContainerHorizontalPadding,
117
115
  minHeight: theme.__hd__.textInput.sizes.errorAndHelpTextContainerHeight,
118
116
  paddingTop: theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingTop,
119
117
  }));
@@ -121,6 +119,7 @@ const StyledErrorAndHelpTextContainer = styled(View)(({ theme }) => ({
121
119
  const StyledErrorAndMaxLengthContainer = styled(View)(() => ({
122
120
  flexDirection: 'row',
123
121
  justifyContent: 'space-between',
122
+ alignItems: 'flex-start',
124
123
  }));
125
124
 
126
125
  export {
@@ -777,11 +777,9 @@ exports[`StyledMaxLengthMessage renders correctly with themeState default 1`] =
777
777
  },
778
778
  [
779
779
  {
780
- "alignSelf": "flex-end",
781
780
  "color": "#001f23",
782
781
  "flex": 1,
783
782
  "flexGrow": 1,
784
- "marginRight": 4,
785
783
  "textAlign": "right",
786
784
  },
787
785
  undefined,
@@ -838,11 +836,9 @@ exports[`StyledMaxLengthMessage renders correctly with themeState disabled 1`] =
838
836
  },
839
837
  [
840
838
  {
841
- "alignSelf": "flex-end",
842
839
  "color": "#bfc1c5",
843
840
  "flex": 1,
844
841
  "flexGrow": 1,
845
- "marginRight": 4,
846
842
  "textAlign": "right",
847
843
  },
848
844
  undefined,
@@ -899,11 +895,9 @@ exports[`StyledMaxLengthMessage renders correctly with themeState error 1`] = `
899
895
  },
900
896
  [
901
897
  {
902
- "alignSelf": "flex-end",
903
898
  "color": "#cb300a",
904
899
  "flex": 1,
905
900
  "flexGrow": 1,
906
- "marginRight": 4,
907
901
  "textAlign": "right",
908
902
  },
909
903
  undefined,
@@ -960,11 +954,9 @@ exports[`StyledMaxLengthMessage renders correctly with themeState filled 1`] = `
960
954
  },
961
955
  [
962
956
  {
963
- "alignSelf": "flex-end",
964
957
  "color": "#001f23",
965
958
  "flex": 1,
966
959
  "flexGrow": 1,
967
- "marginRight": 4,
968
960
  "textAlign": "right",
969
961
  },
970
962
  undefined,
@@ -1021,11 +1013,9 @@ exports[`StyledMaxLengthMessage renders correctly with themeState readonly 1`] =
1021
1013
  },
1022
1014
  [
1023
1015
  {
1024
- "alignSelf": "flex-end",
1025
1016
  "color": "#808f91",
1026
1017
  "flex": 1,
1027
1018
  "flexGrow": 1,
1028
- "marginRight": 4,
1029
1019
  "textAlign": "right",
1030
1020
  },
1031
1021
  undefined,
@@ -229,7 +229,7 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
229
229
  [
230
230
  {
231
231
  "minHeight": 16,
232
- "paddingLeft": 16,
232
+ "paddingHorizontal": 16,
233
233
  "paddingTop": 2,
234
234
  },
235
235
  undefined,
@@ -240,6 +240,7 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
240
240
  style={
241
241
  [
242
242
  {
243
+ "alignItems": "flex-start",
243
244
  "flexDirection": "row",
244
245
  "justifyContent": "space-between",
245
246
  },
@@ -279,11 +280,9 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
279
280
  },
280
281
  [
281
282
  {
282
- "alignSelf": "flex-end",
283
283
  "color": "#001f23",
284
284
  "flex": 1,
285
285
  "flexGrow": 1,
286
- "marginRight": 4,
287
286
  "textAlign": "right",
288
287
  },
289
288
  undefined,
@@ -552,7 +551,7 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
552
551
  [
553
552
  {
554
553
  "minHeight": 16,
555
- "paddingLeft": 16,
554
+ "paddingHorizontal": 16,
556
555
  "paddingTop": 2,
557
556
  },
558
557
  undefined,
@@ -563,6 +562,7 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
563
562
  style={
564
563
  [
565
564
  {
565
+ "alignItems": "flex-start",
566
566
  "flexDirection": "row",
567
567
  "justifyContent": "space-between",
568
568
  },
@@ -602,11 +602,9 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
602
602
  },
603
603
  [
604
604
  {
605
- "alignSelf": "flex-end",
606
605
  "color": "#001f23",
607
606
  "flex": 1,
608
607
  "flexGrow": 1,
609
- "marginRight": 4,
610
608
  "textAlign": "right",
611
609
  },
612
610
  undefined,
@@ -876,7 +874,7 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
876
874
  [
877
875
  {
878
876
  "minHeight": 16,
879
- "paddingLeft": 16,
877
+ "paddingHorizontal": 16,
880
878
  "paddingTop": 2,
881
879
  },
882
880
  undefined,
@@ -887,6 +885,7 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
887
885
  style={
888
886
  [
889
887
  {
888
+ "alignItems": "flex-start",
890
889
  "flexDirection": "row",
891
890
  "justifyContent": "space-between",
892
891
  },
@@ -926,11 +925,9 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
926
925
  },
927
926
  [
928
927
  {
929
- "alignSelf": "flex-end",
930
928
  "color": "#001f23",
931
929
  "flex": 1,
932
930
  "flexGrow": 1,
933
- "marginRight": 4,
934
931
  "textAlign": "right",
935
932
  },
936
933
  undefined,
@@ -1183,7 +1180,7 @@ exports[`TextInput disabled renders correctly 1`] = `
1183
1180
  [
1184
1181
  {
1185
1182
  "minHeight": 16,
1186
- "paddingLeft": 16,
1183
+ "paddingHorizontal": 16,
1187
1184
  "paddingTop": 2,
1188
1185
  },
1189
1186
  undefined,
@@ -1194,6 +1191,7 @@ exports[`TextInput disabled renders correctly 1`] = `
1194
1191
  style={
1195
1192
  [
1196
1193
  {
1194
+ "alignItems": "flex-start",
1197
1195
  "flexDirection": "row",
1198
1196
  "justifyContent": "space-between",
1199
1197
  },
@@ -1452,7 +1450,7 @@ exports[`TextInput error renders correctly 1`] = `
1452
1450
  [
1453
1451
  {
1454
1452
  "minHeight": 16,
1455
- "paddingLeft": 16,
1453
+ "paddingHorizontal": 16,
1456
1454
  "paddingTop": 2,
1457
1455
  },
1458
1456
  undefined,
@@ -1463,6 +1461,7 @@ exports[`TextInput error renders correctly 1`] = `
1463
1461
  style={
1464
1462
  [
1465
1463
  {
1464
+ "alignItems": "flex-start",
1466
1465
  "flexDirection": "row",
1467
1466
  "justifyContent": "space-between",
1468
1467
  },
@@ -1765,7 +1764,7 @@ exports[`TextInput filled renders correctly 1`] = `
1765
1764
  [
1766
1765
  {
1767
1766
  "minHeight": 16,
1768
- "paddingLeft": 16,
1767
+ "paddingHorizontal": 16,
1769
1768
  "paddingTop": 2,
1770
1769
  },
1771
1770
  undefined,
@@ -1776,6 +1775,7 @@ exports[`TextInput filled renders correctly 1`] = `
1776
1775
  style={
1777
1776
  [
1778
1777
  {
1778
+ "alignItems": "flex-start",
1779
1779
  "flexDirection": "row",
1780
1780
  "justifyContent": "space-between",
1781
1781
  },
@@ -2034,7 +2034,7 @@ exports[`TextInput helper text renders correctly 1`] = `
2034
2034
  [
2035
2035
  {
2036
2036
  "minHeight": 16,
2037
- "paddingLeft": 16,
2037
+ "paddingHorizontal": 16,
2038
2038
  "paddingTop": 2,
2039
2039
  },
2040
2040
  undefined,
@@ -2045,6 +2045,7 @@ exports[`TextInput helper text renders correctly 1`] = `
2045
2045
  style={
2046
2046
  [
2047
2047
  {
2048
+ "alignItems": "flex-start",
2048
2049
  "flexDirection": "row",
2049
2050
  "justifyContent": "space-between",
2050
2051
  },
@@ -2312,7 +2313,7 @@ exports[`TextInput idle renders correctly 1`] = `
2312
2313
  [
2313
2314
  {
2314
2315
  "minHeight": 16,
2315
- "paddingLeft": 16,
2316
+ "paddingHorizontal": 16,
2316
2317
  "paddingTop": 2,
2317
2318
  },
2318
2319
  undefined,
@@ -2323,6 +2324,7 @@ exports[`TextInput idle renders correctly 1`] = `
2323
2324
  style={
2324
2325
  [
2325
2326
  {
2327
+ "alignItems": "flex-start",
2326
2328
  "flexDirection": "row",
2327
2329
  "justifyContent": "space-between",
2328
2330
  },
@@ -2596,7 +2598,7 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
2596
2598
  [
2597
2599
  {
2598
2600
  "minHeight": 16,
2599
- "paddingLeft": 16,
2601
+ "paddingHorizontal": 16,
2600
2602
  "paddingTop": 2,
2601
2603
  },
2602
2604
  undefined,
@@ -2607,6 +2609,7 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
2607
2609
  style={
2608
2610
  [
2609
2611
  {
2612
+ "alignItems": "flex-start",
2610
2613
  "flexDirection": "row",
2611
2614
  "justifyContent": "space-between",
2612
2615
  },
@@ -2812,7 +2815,7 @@ exports[`TextInput loading renders correctly 1`] = `
2812
2815
  [
2813
2816
  {
2814
2817
  "minHeight": 16,
2815
- "paddingLeft": 16,
2818
+ "paddingHorizontal": 16,
2816
2819
  "paddingTop": 2,
2817
2820
  },
2818
2821
  undefined,
@@ -2823,6 +2826,7 @@ exports[`TextInput loading renders correctly 1`] = `
2823
2826
  style={
2824
2827
  [
2825
2828
  {
2829
+ "alignItems": "flex-start",
2826
2830
  "flexDirection": "row",
2827
2831
  "justifyContent": "space-between",
2828
2832
  },
@@ -3068,7 +3072,7 @@ exports[`TextInput max length renders correctly 1`] = `
3068
3072
  [
3069
3073
  {
3070
3074
  "minHeight": 16,
3071
- "paddingLeft": 16,
3075
+ "paddingHorizontal": 16,
3072
3076
  "paddingTop": 2,
3073
3077
  },
3074
3078
  undefined,
@@ -3079,6 +3083,7 @@ exports[`TextInput max length renders correctly 1`] = `
3079
3083
  style={
3080
3084
  [
3081
3085
  {
3086
+ "alignItems": "flex-start",
3082
3087
  "flexDirection": "row",
3083
3088
  "justifyContent": "space-between",
3084
3089
  },
@@ -3155,11 +3160,9 @@ exports[`TextInput max length renders correctly 1`] = `
3155
3160
  },
3156
3161
  [
3157
3162
  {
3158
- "alignSelf": "flex-end",
3159
3163
  "color": "#cb300a",
3160
3164
  "flex": 1,
3161
3165
  "flexGrow": 1,
3162
- "marginRight": 4,
3163
3166
  "textAlign": "right",
3164
3167
  },
3165
3168
  undefined,
@@ -3413,7 +3416,7 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
3413
3416
  [
3414
3417
  {
3415
3418
  "minHeight": 16,
3416
- "paddingLeft": 16,
3419
+ "paddingHorizontal": 16,
3417
3420
  "paddingTop": 2,
3418
3421
  },
3419
3422
  undefined,
@@ -3424,6 +3427,7 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
3424
3427
  style={
3425
3428
  [
3426
3429
  {
3430
+ "alignItems": "flex-start",
3427
3431
  "flexDirection": "row",
3428
3432
  "justifyContent": "space-between",
3429
3433
  },
@@ -3739,7 +3743,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
3739
3743
  [
3740
3744
  {
3741
3745
  "minHeight": 16,
3742
- "paddingLeft": 16,
3746
+ "paddingHorizontal": 16,
3743
3747
  "paddingTop": 2,
3744
3748
  },
3745
3749
  undefined,
@@ -3750,6 +3754,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
3750
3754
  style={
3751
3755
  [
3752
3756
  {
3757
+ "alignItems": "flex-start",
3753
3758
  "flexDirection": "row",
3754
3759
  "justifyContent": "space-between",
3755
3760
  },
@@ -4044,7 +4049,7 @@ exports[`TextInput readonly renders correctly 1`] = `
4044
4049
  [
4045
4050
  {
4046
4051
  "minHeight": 16,
4047
- "paddingLeft": 16,
4052
+ "paddingHorizontal": 16,
4048
4053
  "paddingTop": 2,
4049
4054
  },
4050
4055
  undefined,
@@ -4055,6 +4060,7 @@ exports[`TextInput readonly renders correctly 1`] = `
4055
4060
  style={
4056
4061
  [
4057
4062
  {
4063
+ "alignItems": "flex-start",
4058
4064
  "flexDirection": "row",
4059
4065
  "justifyContent": "space-between",
4060
4066
  },
@@ -4269,7 +4275,7 @@ exports[`TextInput ref ref methods work correctly 1`] = `
4269
4275
  [
4270
4276
  {
4271
4277
  "minHeight": 16,
4272
- "paddingLeft": 16,
4278
+ "paddingHorizontal": 16,
4273
4279
  "paddingTop": 2,
4274
4280
  },
4275
4281
  undefined,
@@ -4280,6 +4286,7 @@ exports[`TextInput ref ref methods work correctly 1`] = `
4280
4286
  style={
4281
4287
  [
4282
4288
  {
4289
+ "alignItems": "flex-start",
4283
4290
  "flexDirection": "row",
4284
4291
  "justifyContent": "space-between",
4285
4292
  },
@@ -4553,7 +4560,7 @@ exports[`TextInput required renders correctly 1`] = `
4553
4560
  [
4554
4561
  {
4555
4562
  "minHeight": 16,
4556
- "paddingLeft": 16,
4563
+ "paddingHorizontal": 16,
4557
4564
  "paddingTop": 2,
4558
4565
  },
4559
4566
  undefined,
@@ -4564,6 +4571,7 @@ exports[`TextInput required renders correctly 1`] = `
4564
4571
  style={
4565
4572
  [
4566
4573
  {
4574
+ "alignItems": "flex-start",
4567
4575
  "flexDirection": "row",
4568
4576
  "justifyContent": "space-between",
4569
4577
  },
@@ -4779,7 +4787,7 @@ exports[`TextInput variants renders textarea variant correctly 1`] = `
4779
4787
  [
4780
4788
  {
4781
4789
  "minHeight": 16,
4782
- "paddingLeft": 16,
4790
+ "paddingHorizontal": 16,
4783
4791
  "paddingTop": 2,
4784
4792
  },
4785
4793
  undefined,
@@ -4790,6 +4798,7 @@ exports[`TextInput variants renders textarea variant correctly 1`] = `
4790
4798
  style={
4791
4799
  [
4792
4800
  {
4801
+ "alignItems": "flex-start",
4793
4802
  "flexDirection": "row",
4794
4803
  "justifyContent": "space-between",
4795
4804
  },
@@ -220,7 +220,7 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
220
220
  [
221
221
  {
222
222
  "minHeight": 16,
223
- "paddingLeft": 16,
223
+ "paddingHorizontal": 16,
224
224
  "paddingTop": 2,
225
225
  },
226
226
  undefined,
@@ -231,6 +231,7 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
231
231
  style={
232
232
  [
233
233
  {
234
+ "alignItems": "flex-start",
234
235
  "flexDirection": "row",
235
236
  "justifyContent": "space-between",
236
237
  },
@@ -520,7 +521,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
520
521
  [
521
522
  {
522
523
  "minHeight": 16,
523
- "paddingLeft": 16,
524
+ "paddingHorizontal": 16,
524
525
  "paddingTop": 2,
525
526
  },
526
527
  undefined,
@@ -531,6 +532,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
531
532
  style={
532
533
  [
533
534
  {
535
+ "alignItems": "flex-start",
534
536
  "flexDirection": "row",
535
537
  "justifyContent": "space-between",
536
538
  },