@ornikar/kitt-universal 1.0.0-pre

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 (146) hide show
  1. package/dist/index-browser-all-dev.es.js +1934 -0
  2. package/dist/index-browser-all-dev.es.js.map +1 -0
  3. package/dist/index-browser-all.es.js +1920 -0
  4. package/dist/index-browser-all.es.js.map +1 -0
  5. package/dist/index-node-12.13-dev.cjs.js +2059 -0
  6. package/dist/index-node-12.13-dev.cjs.js.map +1 -0
  7. package/dist/index-node-12.13.cjs.js +2048 -0
  8. package/dist/index-node-12.13.cjs.js.map +1 -0
  9. package/index.js +7 -0
  10. package/package.json +61 -0
  11. package/src/.eslintrc.json +42 -0
  12. package/src/Avatar/Avatar.stories.tsx +47 -0
  13. package/src/Avatar/Avatar.tsx +60 -0
  14. package/src/Avatar/__snapshots__/Avatar.stories.tsx.snap +1229 -0
  15. package/src/Button/Button.stories.tsx +303 -0
  16. package/src/Button/Button.tsx +60 -0
  17. package/src/Button/ButtonContainer.tsx +32 -0
  18. package/src/Button/ButtonContent.tsx +133 -0
  19. package/src/Button/__snapshots__/Button.stories.tsx.snap +7483 -0
  20. package/src/Button/useButton.ts +14 -0
  21. package/src/Card/Card.stories.tsx +33 -0
  22. package/src/Card/Card.tsx +25 -0
  23. package/src/Card/__snapshots__/Card.stories.tsx.snap +306 -0
  24. package/src/FullScreenModal/Body.tsx +25 -0
  25. package/src/FullScreenModal/FullScreenModal.stories.tsx +65 -0
  26. package/src/FullScreenModal/FullScreenModal.tsx +21 -0
  27. package/src/FullScreenModal/Header.tsx +129 -0
  28. package/src/FullScreenModal/__snapshots__/FullScreenModal.stories.tsx.snap +771 -0
  29. package/src/Icon/Icon.stories.tsx +61 -0
  30. package/src/Icon/Icon.tsx +37 -0
  31. package/src/Icon/SpinningIcon.tsx +38 -0
  32. package/src/Icon/SpinningIcon.web.css +13 -0
  33. package/src/Icon/SpinningIcon.web.tsx +11 -0
  34. package/src/Icon/__snapshots__/Icon.stories.tsx.snap +5648 -0
  35. package/src/KittBreakpoints.ts +44 -0
  36. package/src/KittThemeProvider.tsx +30 -0
  37. package/src/ListItem/ListItem.stories.tsx +124 -0
  38. package/src/ListItem/ListItem.tsx +61 -0
  39. package/src/ListItem/ListItemContent.tsx +17 -0
  40. package/src/ListItem/ListItemSideContent.tsx +41 -0
  41. package/src/ListItem/__snapshots__/ListItem.stories.tsx.snap +1514 -0
  42. package/src/Loader/LargeLoader.tsx +12 -0
  43. package/src/Loader/LargeLoader.web.css +103 -0
  44. package/src/Loader/LargeLoader.web.test.tsx +10 -0
  45. package/src/Loader/LargeLoader.web.tsx +18 -0
  46. package/src/Loader/Loader.stories.tsx +49 -0
  47. package/src/Loader/Loader.tsx +21 -0
  48. package/src/Loader/Loader.web.test.tsx +20 -0
  49. package/src/Loader/Loader.web.tsx +14 -0
  50. package/src/Loader/__snapshots__/LargeLoader.web.test.tsx.snap +33 -0
  51. package/src/Loader/__snapshots__/Loader.stories.tsx.snap +607 -0
  52. package/src/Loader/__snapshots__/Loader.web.test.tsx.snap +103 -0
  53. package/src/Message/Message.stories.tsx +104 -0
  54. package/src/Message/Message.tsx +114 -0
  55. package/src/Message/__snapshots__/Message.stories.tsx.snap +2776 -0
  56. package/src/Modal/Body.tsx +20 -0
  57. package/src/Modal/Footer.tsx +18 -0
  58. package/src/Modal/Header.tsx +66 -0
  59. package/src/Modal/Modal.stories.tsx +183 -0
  60. package/src/Modal/Modal.tsx +66 -0
  61. package/src/Modal/OnCloseContext.ts +3 -0
  62. package/src/Modal/__snapshots__/Modal.stories.tsx.snap +2960 -0
  63. package/src/Notification/Notification.stories.tsx +103 -0
  64. package/src/Notification/Notification.tsx +21 -0
  65. package/src/Notification/__snapshots__/Notification.stories.tsx.snap +2861 -0
  66. package/src/Overlay/Overlay.tsx +22 -0
  67. package/src/Tag/Tag.stories.tsx +19 -0
  68. package/src/Tag/Tag.tsx +31 -0
  69. package/src/Tag/__snapshots__/Tag.stories.tsx.snap +303 -0
  70. package/src/Tooltip/Tooltip.tsx +17 -0
  71. package/src/__mocks__/react-native-safe-area-context.tsx +26 -0
  72. package/src/forms/InputFeedback/InputFeedback.stories.tsx +20 -0
  73. package/src/forms/InputFeedback/InputFeedback.tsx +28 -0
  74. package/src/forms/InputFeedback/__snapshots__/InputFeedback.stories.tsx.snap +252 -0
  75. package/src/forms/InputField/InputField.stories.tsx +21 -0
  76. package/src/forms/InputField/InputField.tsx +45 -0
  77. package/src/forms/InputField/__snapshots__/InputField.stories.tsx.snap +240 -0
  78. package/src/forms/InputFormState.ts +1 -0
  79. package/src/forms/InputText/InputText.stories.tsx +87 -0
  80. package/src/forms/InputText/InputText.tsx +172 -0
  81. package/src/forms/InputText/__snapshots__/InputText.stories.tsx.snap +4274 -0
  82. package/src/forms/InputText/useInputText.ts +19 -0
  83. package/src/forms/Label/Label.stories.tsx +16 -0
  84. package/src/forms/Label/Label.tsx +17 -0
  85. package/src/forms/Label/__snapshots__/Label.stories.tsx.snap +174 -0
  86. package/src/forms/Radio/Radio.stories.tsx +50 -0
  87. package/src/forms/Radio/Radio.tsx +81 -0
  88. package/src/forms/Radio/__snapshots__/Radio.stories.tsx.snap +967 -0
  89. package/src/forms/TextArea/TextArea.stories.tsx +74 -0
  90. package/src/forms/TextArea/TextArea.tsx +12 -0
  91. package/src/forms/TextArea/__snapshots__/TextArea.stories.tsx.snap +2091 -0
  92. package/src/index.ts +43 -0
  93. package/src/stories/Block.tsx +24 -0
  94. package/src/stories/Flex.tsx +16 -0
  95. package/src/stories/color-tokens.stories.tsx +143 -0
  96. package/src/stories-list.tsx +22 -0
  97. package/src/story-components/Section.tsx +56 -0
  98. package/src/story-components/Story.tsx +24 -0
  99. package/src/story-components/StoryDecorator.tsx +8 -0
  100. package/src/story-components/StoryGrid.tsx +80 -0
  101. package/src/story-components/StoryTitle.stories.tsx +12 -0
  102. package/src/story-components/StoryTitle.tsx +69 -0
  103. package/src/story-components/__snapshots__/StoryTitle.stories.tsx.snap +155 -0
  104. package/src/story-components/index.ts +13 -0
  105. package/src/themes/default.ts +34 -0
  106. package/src/themes/late-ocean/avatarLateOceanTheme.ts +12 -0
  107. package/src/themes/late-ocean/buttonLateOceanTheme.ts +37 -0
  108. package/src/themes/late-ocean/cardLateOceanTheme.ts +19 -0
  109. package/src/themes/late-ocean/colorsLateOceanTheme.ts +19 -0
  110. package/src/themes/late-ocean/feedbackMessageLateOceanTheme.ts +10 -0
  111. package/src/themes/late-ocean/formLateOceanTheme.ts +9 -0
  112. package/src/themes/late-ocean/fullScreenModalLateOceanTheme.ts +8 -0
  113. package/src/themes/late-ocean/inputFieldLateOceanTheme.ts +4 -0
  114. package/src/themes/late-ocean/inputLateOceanTheme.ts +55 -0
  115. package/src/themes/late-ocean/listItemLateOceanTheme.ts +8 -0
  116. package/src/themes/late-ocean/radioLateOceanTheme.ts +19 -0
  117. package/src/themes/late-ocean/shadowsLateOceanTheme.ts +3 -0
  118. package/src/themes/late-ocean/tagLateOceanTheme.ts +17 -0
  119. package/src/themes/late-ocean/typographyLateOceanTheme.ts +94 -0
  120. package/src/themes/palettes/lateOceanColorPalette.ts +24 -0
  121. package/src/typings/babel-config.d.ts +6 -0
  122. package/src/typings/metro.d.ts +6 -0
  123. package/src/typography/Typography.stories.tsx +115 -0
  124. package/src/typography/Typography.tsx +165 -0
  125. package/src/typography/TypographyIcon.stories.tsx +32 -0
  126. package/src/typography/TypographyIcon.tsx +35 -0
  127. package/src/typography/TypographyLink.stories.tsx +89 -0
  128. package/src/typography/TypographyLink.tsx +48 -0
  129. package/src/typography/__snapshots__/Typography.stories.tsx.snap +6118 -0
  130. package/src/typography/__snapshots__/TypographyIcon.stories.tsx.snap +334 -0
  131. package/src/typography/__snapshots__/TypographyLink.stories.tsx.snap +10945 -0
  132. package/src/utils/storybook/decorators/KittThemeDecorator.tsx +11 -0
  133. package/src/utils/storybook/decorators/SafeAreaProviderDecorator.tsx +11 -0
  134. package/src/utils/storybook/setup-global-decorators.ts +6 -0
  135. package/src/utils/tests/renderWithProvidersUtils.tsx +17 -0
  136. package/src/utils/typeUtils.ts +6 -0
  137. package/src/utils/windowSize/MatchWindowSize.tsx +14 -0
  138. package/src/utils/windowSize/__snapshots__/windowSize.stories.tsx.snap +1485 -0
  139. package/src/utils/windowSize/createWindowSizeHelper.test.ts +11 -0
  140. package/src/utils/windowSize/createWindowSizeHelper.ts +65 -0
  141. package/src/utils/windowSize/useMatchWindowSize.ts +14 -0
  142. package/src/utils/windowSize/useWindowSize.ts +1 -0
  143. package/src/utils/windowSize/windowSize.stories.tsx +116 -0
  144. package/tsconfig.build.json +30 -0
  145. package/tsconfig.json +13 -0
  146. package/yarn-error.log +22274 -0
package/src/forms/InputText/__snapshots__/InputText.stories.tsx.snap ADDED
@@ -0,0 +1,4274 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`kitt/Forms InputText 1`] = `
4
+ <RNCSafeAreaProvider
5
+ onInsetsChange={[Function]}
6
+ style={
7
+ Array [
8
+ Object {
9
+ "flex": 1,
10
+ },
11
+ undefined,
12
+ ]
13
+ }
14
+ >
15
+ <RCTScrollView
16
+ style={
17
+ Array [
18
+ Object {
19
+ "paddingBottom": 10,
20
+ "paddingLeft": 10,
21
+ "paddingRight": 10,
22
+ "paddingTop": 10,
23
+ },
24
+ ]
25
+ }
26
+ >
27
+ <View>
28
+ <View
29
+ style={
30
+ Array [
31
+ Object {
32
+ "marginBottom": 30,
33
+ },
34
+ ]
35
+ }
36
+ >
37
+ <Text
38
+ aria-level="1"
39
+ color="black"
40
+ isHeader={true}
41
+ style={
42
+ Array [
43
+ Object {
44
+ "color": "#000000",
45
+ "fontFamily": "Moderat-Extended-Bold",
46
+ "fontSize": 38,
47
+ "fontStyle": "normal",
48
+ "fontWeight": "400",
49
+ "lineHeight": 49,
50
+ "textDecorationColor": "#000000",
51
+ },
52
+ ]
53
+ }
54
+ type="header1"
55
+ variant="bold"
56
+ >
57
+ Input Text
58
+ </Text>
59
+ </View>
60
+ <View
61
+ style={
62
+ Array [
63
+ Object {
64
+ "marginBottom": 90,
65
+ },
66
+ ]
67
+ }
68
+ >
69
+ <View
70
+ style={
71
+ Array [
72
+ Object {
73
+ "marginBottom": 30,
74
+ },
75
+ ]
76
+ }
77
+ >
78
+ <View
79
+ style={
80
+ Array [
81
+ Object {
82
+ "marginBottom": 30,
83
+ },
84
+ ]
85
+ }
86
+ >
87
+ <Text
88
+ aria-level="2"
89
+ color="black"
90
+ isHeader={true}
91
+ style={
92
+ Array [
93
+ Object {
94
+ "color": "#000000",
95
+ "fontFamily": "Moderat-Extended-Bold",
96
+ "fontSize": 32,
97
+ "fontStyle": "normal",
98
+ "fontWeight": "400",
99
+ "lineHeight": 42,
100
+ "textDecorationColor": "#000000",
101
+ },
102
+ ]
103
+ }
104
+ type="header2"
105
+ variant="bold"
106
+ >
107
+ Demo
108
+ </Text>
109
+ </View>
110
+ <View
111
+ style={
112
+ Array [
113
+ Object {
114
+ "marginBottom": 4,
115
+ "marginTop": 2,
116
+ },
117
+ ]
118
+ }
119
+ >
120
+ <TextInput
121
+ allowFontScaling={true}
122
+ autoCompleteType="off"
123
+ autoCorrect={true}
124
+ editable={true}
125
+ keyboardType="default"
126
+ minHeight={0}
127
+ onBlur={[Function]}
128
+ onChange={[MockFunction]}
129
+ onFocus={[Function]}
130
+ placeholder="Placeholder"
131
+ placeholderTextColor="#737373"
132
+ rejectResponderTermination={true}
133
+ secureTextEntry={false}
134
+ selectionColor="#4C34E0"
135
+ state="default"
136
+ style={
137
+ Array [
138
+ Object {
139
+ "backgroundColor": "#FFFFFF",
140
+ "borderColor": "#E5E5E5",
141
+ "borderRadius": 10,
142
+ "borderWidth": 2,
143
+ "color": "#000000",
144
+ "fontFamily": "NotoSans",
145
+ "fontSize": 16,
146
+ "lineHeight": 0,
147
+ "minHeight": 0,
148
+ "paddingBottom": 12,
149
+ "paddingLeft": 16,
150
+ "paddingRight": 16,
151
+ "paddingTop": 12,
152
+ },
153
+ ]
154
+ }
155
+ textContentType="none"
156
+ underlineColorAndroid="transparent"
157
+ />
158
+ </View>
159
+ <View
160
+ style={
161
+ Array [
162
+ Object {
163
+ "marginBottom": 4,
164
+ "marginTop": 2,
165
+ },
166
+ ]
167
+ }
168
+ >
169
+ <TextInput
170
+ allowFontScaling={true}
171
+ autoCompleteType="password"
172
+ autoCorrect={false}
173
+ editable={true}
174
+ keyboardType="default"
175
+ minHeight={0}
176
+ onBlur={[Function]}
177
+ onChange={[MockFunction]}
178
+ onFocus={[Function]}
179
+ placeholder="******"
180
+ placeholderTextColor="#737373"
181
+ rejectResponderTermination={true}
182
+ secureTextEntry={true}
183
+ selectionColor="#4C34E0"
184
+ state="default"
185
+ style={
186
+ Array [
187
+ Object {
188
+ "backgroundColor": "#FFFFFF",
189
+ "borderColor": "#E5E5E5",
190
+ "borderRadius": 10,
191
+ "borderWidth": 2,
192
+ "color": "#000000",
193
+ "fontFamily": "NotoSans",
194
+ "fontSize": 16,
195
+ "lineHeight": 0,
196
+ "minHeight": 0,
197
+ "paddingBottom": 12,
198
+ "paddingLeft": 16,
199
+ "paddingRight": 16,
200
+ "paddingTop": 12,
201
+ },
202
+ ]
203
+ }
204
+ textContentType="password"
205
+ underlineColorAndroid="transparent"
206
+ />
207
+ <View
208
+ accessible={true}
209
+ collapsable={false}
210
+ focusable={true}
211
+ onBlur={[Function]}
212
+ onClick={[Function]}
213
+ onFocus={[Function]}
214
+ onResponderGrant={[Function]}
215
+ onResponderMove={[Function]}
216
+ onResponderRelease={[Function]}
217
+ onResponderTerminate={[Function]}
218
+ onResponderTerminationRequest={[Function]}
219
+ onStartShouldSetResponder={[Function]}
220
+ style={
221
+ Array [
222
+ Object {
223
+ "bottom": 0,
224
+ "justifyContent": "center",
225
+ "paddingBottom": 10,
226
+ "paddingLeft": 10,
227
+ "paddingRight": 10,
228
+ "paddingTop": 10,
229
+ "position": "absolute",
230
+ "right": 0,
231
+ "top": 0,
232
+ },
233
+ ]
234
+ }
235
+ >
236
+ <View
237
+ color="#000000"
238
+ size={20}
239
+ style={
240
+ Array [
241
+ Object {
242
+ "alignSelf": "auto",
243
+ "color": "#000000",
244
+ "height": 20,
245
+ "width": 20,
246
+ },
247
+ ]
248
+ }
249
+ >
250
+ <svg
251
+ color="#000000"
252
+ data-file-name="SvgEyeOffInline"
253
+ />
254
+ </View>
255
+ </View>
256
+ </View>
257
+ </View>
258
+ </View>
259
+ <View
260
+ style={
261
+ Array [
262
+ Object {
263
+ "marginBottom": 30,
264
+ },
265
+ ]
266
+ }
267
+ >
268
+ <View
269
+ style={
270
+ Array [
271
+ Object {
272
+ "marginBottom": 30,
273
+ },
274
+ ]
275
+ }
276
+ >
277
+ <Text
278
+ aria-level="2"
279
+ color="black"
280
+ isHeader={true}
281
+ style={
282
+ Array [
283
+ Object {
284
+ "color": "#000000",
285
+ "fontFamily": "Moderat-Extended-Bold",
286
+ "fontSize": 32,
287
+ "fontStyle": "normal",
288
+ "fontWeight": "400",
289
+ "lineHeight": 42,
290
+ "textDecorationColor": "#000000",
291
+ },
292
+ ]
293
+ }
294
+ type="header2"
295
+ variant="bold"
296
+ >
297
+ Default
298
+ </Text>
299
+ </View>
300
+ <View
301
+ style={
302
+ Array [
303
+ Object {
304
+ "flexDirection": "column",
305
+ "marginBottom": 0,
306
+ "marginLeft": 0,
307
+ "marginRight": 0,
308
+ "marginTop": 0,
309
+ },
310
+ ]
311
+ }
312
+ >
313
+ <View
314
+ style={
315
+ Array [
316
+ Object {
317
+ "paddingBottom": 20,
318
+ "paddingLeft": 0,
319
+ "paddingRight": 0,
320
+ "paddingTop": 10,
321
+ },
322
+ ]
323
+ }
324
+ >
325
+ <View
326
+ style={
327
+ Array [
328
+ Object {
329
+ "marginBottom": 10,
330
+ },
331
+ ]
332
+ }
333
+ >
334
+ <Text
335
+ aria-level="4"
336
+ color="black"
337
+ isHeader={true}
338
+ medium="header5"
339
+ numberOfLines={1}
340
+ style={
341
+ Array [
342
+ Object {
343
+ "color": "#000000",
344
+ "fontFamily": "Moderat-Extended-Bold",
345
+ "fontSize": 18,
346
+ "fontStyle": "normal",
347
+ "fontWeight": "400",
348
+ "lineHeight": 23,
349
+ "textDecorationColor": "#000000",
350
+ },
351
+ ]
352
+ }
353
+ type="header4"
354
+ variant="bold"
355
+ >
356
+ Empty
357
+ </Text>
358
+ </View>
359
+ <View
360
+ style={
361
+ Array [
362
+ Object {
363
+ "marginBottom": 4,
364
+ "marginTop": 2,
365
+ },
366
+ ]
367
+ }
368
+ >
369
+ <TextInput
370
+ allowFontScaling={true}
371
+ autoCompleteType="off"
372
+ autoCorrect={true}
373
+ editable={true}
374
+ keyboardType="default"
375
+ minHeight={0}
376
+ onBlur={[Function]}
377
+ onChange={[MockFunction]}
378
+ onFocus={[Function]}
379
+ placeholder="Placeholder"
380
+ placeholderTextColor="#737373"
381
+ rejectResponderTermination={true}
382
+ secureTextEntry={false}
383
+ selectionColor="#4C34E0"
384
+ state="default"
385
+ style={
386
+ Array [
387
+ Object {
388
+ "backgroundColor": "#FFFFFF",
389
+ "borderColor": "#E5E5E5",
390
+ "borderRadius": 10,
391
+ "borderWidth": 2,
392
+ "color": "#000000",
393
+ "fontFamily": "NotoSans",
394
+ "fontSize": 16,
395
+ "lineHeight": 0,
396
+ "minHeight": 0,
397
+ "paddingBottom": 12,
398
+ "paddingLeft": 16,
399
+ "paddingRight": 16,
400
+ "paddingTop": 12,
401
+ },
402
+ ]
403
+ }
404
+ textContentType="none"
405
+ underlineColorAndroid="transparent"
406
+ />
407
+ </View>
408
+ </View>
409
+ <View
410
+ style={
411
+ Array [
412
+ Object {
413
+ "paddingBottom": 20,
414
+ "paddingLeft": 0,
415
+ "paddingRight": 0,
416
+ "paddingTop": 10,
417
+ },
418
+ ]
419
+ }
420
+ >
421
+ <View
422
+ style={
423
+ Array [
424
+ Object {
425
+ "marginBottom": 10,
426
+ },
427
+ ]
428
+ }
429
+ >
430
+ <Text
431
+ aria-level="4"
432
+ color="black"
433
+ isHeader={true}
434
+ medium="header5"
435
+ numberOfLines={1}
436
+ style={
437
+ Array [
438
+ Object {
439
+ "color": "#000000",
440
+ "fontFamily": "Moderat-Extended-Bold",
441
+ "fontSize": 18,
442
+ "fontStyle": "normal",
443
+ "fontWeight": "400",
444
+ "lineHeight": 23,
445
+ "textDecorationColor": "#000000",
446
+ },
447
+ ]
448
+ }
449
+ type="header4"
450
+ variant="bold"
451
+ >
452
+ Filled
453
+ </Text>
454
+ </View>
455
+ <View
456
+ style={
457
+ Array [
458
+ Object {
459
+ "marginBottom": 4,
460
+ "marginTop": 2,
461
+ },
462
+ ]
463
+ }
464
+ >
465
+ <TextInput
466
+ allowFontScaling={true}
467
+ autoCompleteType="off"
468
+ autoCorrect={true}
469
+ editable={true}
470
+ keyboardType="default"
471
+ minHeight={0}
472
+ onBlur={[Function]}
473
+ onChange={[MockFunction]}
474
+ onFocus={[Function]}
475
+ placeholder="Placeholder"
476
+ placeholderTextColor="#737373"
477
+ rejectResponderTermination={true}
478
+ secureTextEntry={false}
479
+ selectionColor="#4C34E0"
480
+ state="default"
481
+ style={
482
+ Array [
483
+ Object {
484
+ "backgroundColor": "#FFFFFF",
485
+ "borderColor": "#E5E5E5",
486
+ "borderRadius": 10,
487
+ "borderWidth": 2,
488
+ "color": "#000000",
489
+ "fontFamily": "NotoSans",
490
+ "fontSize": 16,
491
+ "lineHeight": 0,
492
+ "minHeight": 0,
493
+ "paddingBottom": 12,
494
+ "paddingLeft": 16,
495
+ "paddingRight": 16,
496
+ "paddingTop": 12,
497
+ },
498
+ ]
499
+ }
500
+ textContentType="none"
501
+ underlineColorAndroid="transparent"
502
+ value="The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who uses a technologically advanced, artificially intelligent automobile."
503
+ />
504
+ </View>
505
+ </View>
506
+ <View
507
+ style={
508
+ Array [
509
+ Object {
510
+ "paddingBottom": 20,
511
+ "paddingLeft": 0,
512
+ "paddingRight": 0,
513
+ "paddingTop": 10,
514
+ },
515
+ ]
516
+ }
517
+ >
518
+ <View
519
+ style={
520
+ Array [
521
+ Object {
522
+ "marginBottom": 10,
523
+ },
524
+ ]
525
+ }
526
+ >
527
+ <Text
528
+ aria-level="4"
529
+ color="black"
530
+ isHeader={true}
531
+ medium="header5"
532
+ numberOfLines={1}
533
+ style={
534
+ Array [
535
+ Object {
536
+ "color": "#000000",
537
+ "fontFamily": "Moderat-Extended-Bold",
538
+ "fontSize": 18,
539
+ "fontStyle": "normal",
540
+ "fontWeight": "400",
541
+ "lineHeight": 23,
542
+ "textDecorationColor": "#000000",
543
+ },
544
+ ]
545
+ }
546
+ type="header4"
547
+ variant="bold"
548
+ >
549
+ Hover
550
+ </Text>
551
+ </View>
552
+ <View
553
+ style={
554
+ Array [
555
+ Object {
556
+ "marginBottom": 4,
557
+ "marginTop": 2,
558
+ },
559
+ ]
560
+ }
561
+ >
562
+ <TextInput
563
+ allowFontScaling={true}
564
+ autoCompleteType="off"
565
+ autoCorrect={true}
566
+ editable={true}
567
+ keyboardType="default"
568
+ minHeight={0}
569
+ onBlur={[Function]}
570
+ onChange={[MockFunction]}
571
+ onFocus={[Function]}
572
+ placeholder="Placeholder"
573
+ placeholderTextColor="#737373"
574
+ rejectResponderTermination={true}
575
+ secureTextEntry={false}
576
+ selectionColor="#4C34E0"
577
+ state="hover"
578
+ style={
579
+ Array [
580
+ Object {
581
+ "backgroundColor": "#FFFFFF",
582
+ "borderColor": "#CCCCCC",
583
+ "borderRadius": 10,
584
+ "borderWidth": 2,
585
+ "color": "#000000",
586
+ "fontFamily": "NotoSans",
587
+ "fontSize": 16,
588
+ "lineHeight": 0,
589
+ "minHeight": 0,
590
+ "paddingBottom": 12,
591
+ "paddingLeft": 16,
592
+ "paddingRight": 16,
593
+ "paddingTop": 12,
594
+ },
595
+ ]
596
+ }
597
+ textContentType="none"
598
+ underlineColorAndroid="transparent"
599
+ value="The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who uses a technologically advanced, artificially intelligent automobile."
600
+ />
601
+ </View>
602
+ </View>
603
+ <View
604
+ style={
605
+ Array [
606
+ Object {
607
+ "paddingBottom": 20,
608
+ "paddingLeft": 0,
609
+ "paddingRight": 0,
610
+ "paddingTop": 10,
611
+ },
612
+ ]
613
+ }
614
+ >
615
+ <View
616
+ style={
617
+ Array [
618
+ Object {
619
+ "marginBottom": 10,
620
+ },
621
+ ]
622
+ }
623
+ >
624
+ <Text
625
+ aria-level="4"
626
+ color="black"
627
+ isHeader={true}
628
+ medium="header5"
629
+ numberOfLines={1}
630
+ style={
631
+ Array [
632
+ Object {
633
+ "color": "#000000",
634
+ "fontFamily": "Moderat-Extended-Bold",
635
+ "fontSize": 18,
636
+ "fontStyle": "normal",
637
+ "fontWeight": "400",
638
+ "lineHeight": 23,
639
+ "textDecorationColor": "#000000",
640
+ },
641
+ ]
642
+ }
643
+ type="header4"
644
+ variant="bold"
645
+ >
646
+ Focus
647
+ </Text>
648
+ </View>
649
+ <View
650
+ style={
651
+ Array [
652
+ Object {
653
+ "marginBottom": 4,
654
+ "marginTop": 2,
655
+ },
656
+ ]
657
+ }
658
+ >
659
+ <TextInput
660
+ allowFontScaling={true}
661
+ autoCompleteType="off"
662
+ autoCorrect={true}
663
+ editable={true}
664
+ keyboardType="default"
665
+ minHeight={0}
666
+ onBlur={[Function]}
667
+ onChange={[MockFunction]}
668
+ onFocus={[Function]}
669
+ placeholder="Placeholder"
670
+ placeholderTextColor="#737373"
671
+ rejectResponderTermination={true}
672
+ secureTextEntry={false}
673
+ selectionColor="#4C34E0"
674
+ state="focus"
675
+ style={
676
+ Array [
677
+ Object {
678
+ "backgroundColor": "#FFFFFF",
679
+ "borderColor": "#4C34E0",
680
+ "borderRadius": 10,
681
+ "borderWidth": 2,
682
+ "color": "#000000",
683
+ "fontFamily": "NotoSans",
684
+ "fontSize": 16,
685
+ "lineHeight": 0,
686
+ "minHeight": 0,
687
+ "paddingBottom": 12,
688
+ "paddingLeft": 16,
689
+ "paddingRight": 16,
690
+ "paddingTop": 12,
691
+ },
692
+ ]
693
+ }
694
+ textContentType="none"
695
+ underlineColorAndroid="transparent"
696
+ value="The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who uses a technologically advanced, artificially intelligent automobile."
697
+ />
698
+ </View>
699
+ </View>
700
+ <View
701
+ style={
702
+ Array [
703
+ Object {
704
+ "paddingBottom": 20,
705
+ "paddingLeft": 0,
706
+ "paddingRight": 0,
707
+ "paddingTop": 10,
708
+ },
709
+ ]
710
+ }
711
+ >
712
+ <View
713
+ style={
714
+ Array [
715
+ Object {
716
+ "marginBottom": 10,
717
+ },
718
+ ]
719
+ }
720
+ >
721
+ <Text
722
+ aria-level="4"
723
+ color="black"
724
+ isHeader={true}
725
+ medium="header5"
726
+ numberOfLines={1}
727
+ style={
728
+ Array [
729
+ Object {
730
+ "color": "#000000",
731
+ "fontFamily": "Moderat-Extended-Bold",
732
+ "fontSize": 18,
733
+ "fontStyle": "normal",
734
+ "fontWeight": "400",
735
+ "lineHeight": 23,
736
+ "textDecorationColor": "#000000",
737
+ },
738
+ ]
739
+ }
740
+ type="header4"
741
+ variant="bold"
742
+ >
743
+ Disabled
744
+ </Text>
745
+ </View>
746
+ <View
747
+ style={
748
+ Array [
749
+ Object {
750
+ "marginBottom": 4,
751
+ "marginTop": 2,
752
+ },
753
+ ]
754
+ }
755
+ >
756
+ <TextInput
757
+ allowFontScaling={true}
758
+ autoCompleteType="off"
759
+ autoCorrect={true}
760
+ editable={false}
761
+ keyboardType="default"
762
+ minHeight={0}
763
+ onBlur={[Function]}
764
+ onChange={[MockFunction]}
765
+ onFocus={[Function]}
766
+ placeholder="Placeholder"
767
+ placeholderTextColor="#737373"
768
+ rejectResponderTermination={true}
769
+ secureTextEntry={false}
770
+ selectionColor="#4C34E0"
771
+ state="disabled"
772
+ style={
773
+ Array [
774
+ Object {
775
+ "backgroundColor": "#F2F2F2",
776
+ "borderColor": "#E5E5E5",
777
+ "borderRadius": 10,
778
+ "borderWidth": 2,
779
+ "color": "#737373",
780
+ "fontFamily": "NotoSans",
781
+ "fontSize": 16,
782
+ "lineHeight": 0,
783
+ "minHeight": 0,
784
+ "paddingBottom": 12,
785
+ "paddingLeft": 16,
786
+ "paddingRight": 16,
787
+ "paddingTop": 12,
788
+ },
789
+ ]
790
+ }
791
+ textContentType="none"
792
+ underlineColorAndroid="transparent"
793
+ />
794
+ </View>
795
+ </View>
796
+ <View
797
+ style={
798
+ Array [
799
+ Object {
800
+ "paddingBottom": 20,
801
+ "paddingLeft": 0,
802
+ "paddingRight": 0,
803
+ "paddingTop": 10,
804
+ },
805
+ ]
806
+ }
807
+ >
808
+ <View
809
+ style={
810
+ Array [
811
+ Object {
812
+ "marginBottom": 10,
813
+ },
814
+ ]
815
+ }
816
+ >
817
+ <Text
818
+ aria-level="4"
819
+ color="black"
820
+ isHeader={true}
821
+ medium="header5"
822
+ numberOfLines={1}
823
+ style={
824
+ Array [
825
+ Object {
826
+ "color": "#000000",
827
+ "fontFamily": "Moderat-Extended-Bold",
828
+ "fontSize": 18,
829
+ "fontStyle": "normal",
830
+ "fontWeight": "400",
831
+ "lineHeight": 23,
832
+ "textDecorationColor": "#000000",
833
+ },
834
+ ]
835
+ }
836
+ type="header4"
837
+ variant="bold"
838
+ >
839
+ Disabled Filled
840
+ </Text>
841
+ </View>
842
+ <View
843
+ style={
844
+ Array [
845
+ Object {
846
+ "marginBottom": 4,
847
+ "marginTop": 2,
848
+ },
849
+ ]
850
+ }
851
+ >
852
+ <TextInput
853
+ allowFontScaling={true}
854
+ autoCompleteType="off"
855
+ autoCorrect={true}
856
+ editable={false}
857
+ keyboardType="default"
858
+ minHeight={0}
859
+ onBlur={[Function]}
860
+ onChange={[MockFunction]}
861
+ onFocus={[Function]}
862
+ placeholder="Placeholder"
863
+ placeholderTextColor="#737373"
864
+ rejectResponderTermination={true}
865
+ secureTextEntry={false}
866
+ selectionColor="#4C34E0"
867
+ state="disabled"
868
+ style={
869
+ Array [
870
+ Object {
871
+ "backgroundColor": "#F2F2F2",
872
+ "borderColor": "#E5E5E5",
873
+ "borderRadius": 10,
874
+ "borderWidth": 2,
875
+ "color": "#737373",
876
+ "fontFamily": "NotoSans",
877
+ "fontSize": 16,
878
+ "lineHeight": 0,
879
+ "minHeight": 0,
880
+ "paddingBottom": 12,
881
+ "paddingLeft": 16,
882
+ "paddingRight": 16,
883
+ "paddingTop": 12,
884
+ },
885
+ ]
886
+ }
887
+ textContentType="none"
888
+ underlineColorAndroid="transparent"
889
+ value="The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who uses a technologically advanced, artificially intelligent automobile."
890
+ />
891
+ </View>
892
+ </View>
893
+ </View>
894
+ </View>
895
+ <View
896
+ style={
897
+ Array [
898
+ Object {
899
+ "marginBottom": 30,
900
+ },
901
+ ]
902
+ }
903
+ >
904
+ <View
905
+ style={
906
+ Array [
907
+ Object {
908
+ "marginBottom": 30,
909
+ },
910
+ ]
911
+ }
912
+ >
913
+ <Text
914
+ aria-level="2"
915
+ color="black"
916
+ isHeader={true}
917
+ style={
918
+ Array [
919
+ Object {
920
+ "color": "#000000",
921
+ "fontFamily": "Moderat-Extended-Bold",
922
+ "fontSize": 32,
923
+ "fontStyle": "normal",
924
+ "fontWeight": "400",
925
+ "lineHeight": 42,
926
+ "textDecorationColor": "#000000",
927
+ },
928
+ ]
929
+ }
930
+ type="header2"
931
+ variant="bold"
932
+ >
933
+ Valid
934
+ </Text>
935
+ </View>
936
+ <View
937
+ style={
938
+ Array [
939
+ Object {
940
+ "flexDirection": "column",
941
+ "marginBottom": 0,
942
+ "marginLeft": 0,
943
+ "marginRight": 0,
944
+ "marginTop": 0,
945
+ },
946
+ ]
947
+ }
948
+ >
949
+ <View
950
+ style={
951
+ Array [
952
+ Object {
953
+ "paddingBottom": 20,
954
+ "paddingLeft": 0,
955
+ "paddingRight": 0,
956
+ "paddingTop": 10,
957
+ },
958
+ ]
959
+ }
960
+ >
961
+ <View
962
+ style={
963
+ Array [
964
+ Object {
965
+ "marginBottom": 10,
966
+ },
967
+ ]
968
+ }
969
+ >
970
+ <Text
971
+ aria-level="4"
972
+ color="black"
973
+ isHeader={true}
974
+ medium="header5"
975
+ numberOfLines={1}
976
+ style={
977
+ Array [
978
+ Object {
979
+ "color": "#000000",
980
+ "fontFamily": "Moderat-Extended-Bold",
981
+ "fontSize": 18,
982
+ "fontStyle": "normal",
983
+ "fontWeight": "400",
984
+ "lineHeight": 23,
985
+ "textDecorationColor": "#000000",
986
+ },
987
+ ]
988
+ }
989
+ type="header4"
990
+ variant="bold"
991
+ >
992
+ Empty
993
+ </Text>
994
+ </View>
995
+ <View
996
+ style={
997
+ Array [
998
+ Object {
999
+ "marginBottom": 4,
1000
+ "marginTop": 2,
1001
+ },
1002
+ ]
1003
+ }
1004
+ >
1005
+ <TextInput
1006
+ allowFontScaling={true}
1007
+ autoCompleteType="off"
1008
+ autoCorrect={true}
1009
+ editable={true}
1010
+ keyboardType="default"
1011
+ minHeight={0}
1012
+ onBlur={[Function]}
1013
+ onChange={[MockFunction]}
1014
+ onFocus={[Function]}
1015
+ placeholder="Placeholder"
1016
+ placeholderTextColor="#737373"
1017
+ rejectResponderTermination={true}
1018
+ secureTextEntry={false}
1019
+ selectionColor="#4C34E0"
1020
+ state="default"
1021
+ style={
1022
+ Array [
1023
+ Object {
1024
+ "backgroundColor": "#FFFFFF",
1025
+ "borderColor": "#E5E5E5",
1026
+ "borderRadius": 10,
1027
+ "borderWidth": 2,
1028
+ "color": "#000000",
1029
+ "fontFamily": "NotoSans",
1030
+ "fontSize": 16,
1031
+ "lineHeight": 0,
1032
+ "minHeight": 0,
1033
+ "paddingBottom": 12,
1034
+ "paddingLeft": 16,
1035
+ "paddingRight": 16,
1036
+ "paddingTop": 12,
1037
+ },
1038
+ ]
1039
+ }
1040
+ textContentType="none"
1041
+ underlineColorAndroid="transparent"
1042
+ />
1043
+ </View>
1044
+ </View>
1045
+ <View
1046
+ style={
1047
+ Array [
1048
+ Object {
1049
+ "paddingBottom": 20,
1050
+ "paddingLeft": 0,
1051
+ "paddingRight": 0,
1052
+ "paddingTop": 10,
1053
+ },
1054
+ ]
1055
+ }
1056
+ >
1057
+ <View
1058
+ style={
1059
+ Array [
1060
+ Object {
1061
+ "marginBottom": 10,
1062
+ },
1063
+ ]
1064
+ }
1065
+ >
1066
+ <Text
1067
+ aria-level="4"
1068
+ color="black"
1069
+ isHeader={true}
1070
+ medium="header5"
1071
+ numberOfLines={1}
1072
+ style={
1073
+ Array [
1074
+ Object {
1075
+ "color": "#000000",
1076
+ "fontFamily": "Moderat-Extended-Bold",
1077
+ "fontSize": 18,
1078
+ "fontStyle": "normal",
1079
+ "fontWeight": "400",
1080
+ "lineHeight": 23,
1081
+ "textDecorationColor": "#000000",
1082
+ },
1083
+ ]
1084
+ }
1085
+ type="header4"
1086
+ variant="bold"
1087
+ >
1088
+ Filled
1089
+ </Text>
1090
+ </View>
1091
+ <View
1092
+ style={
1093
+ Array [
1094
+ Object {
1095
+ "marginBottom": 4,
1096
+ "marginTop": 2,
1097
+ },
1098
+ ]
1099
+ }
1100
+ >
1101
+ <TextInput
1102
+ allowFontScaling={true}
1103
+ autoCompleteType="off"
1104
+ autoCorrect={true}
1105
+ editable={true}
1106
+ keyboardType="default"
1107
+ minHeight={0}
1108
+ onBlur={[Function]}
1109
+ onChange={[MockFunction]}
1110
+ onFocus={[Function]}
1111
+ placeholder="Placeholder"
1112
+ placeholderTextColor="#737373"
1113
+ rejectResponderTermination={true}
1114
+ secureTextEntry={false}
1115
+ selectionColor="#4C34E0"
1116
+ state="default"
1117
+ style={
1118
+ Array [
1119
+ Object {
1120
+ "backgroundColor": "#FFFFFF",
1121
+ "borderColor": "#E5E5E5",
1122
+ "borderRadius": 10,
1123
+ "borderWidth": 2,
1124
+ "color": "#000000",
1125
+ "fontFamily": "NotoSans",
1126
+ "fontSize": 16,
1127
+ "lineHeight": 0,
1128
+ "minHeight": 0,
1129
+ "paddingBottom": 12,
1130
+ "paddingLeft": 16,
1131
+ "paddingRight": 16,
1132
+ "paddingTop": 12,
1133
+ },
1134
+ ]
1135
+ }
1136
+ textContentType="none"
1137
+ underlineColorAndroid="transparent"
1138
+ value="The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who uses a technologically advanced, artificially intelligent automobile."
1139
+ />
1140
+ </View>
1141
+ </View>
1142
+ <View
1143
+ style={
1144
+ Array [
1145
+ Object {
1146
+ "paddingBottom": 20,
1147
+ "paddingLeft": 0,
1148
+ "paddingRight": 0,
1149
+ "paddingTop": 10,
1150
+ },
1151
+ ]
1152
+ }
1153
+ >
1154
+ <View
1155
+ style={
1156
+ Array [
1157
+ Object {
1158
+ "marginBottom": 10,
1159
+ },
1160
+ ]
1161
+ }
1162
+ >
1163
+ <Text
1164
+ aria-level="4"
1165
+ color="black"
1166
+ isHeader={true}
1167
+ medium="header5"
1168
+ numberOfLines={1}
1169
+ style={
1170
+ Array [
1171
+ Object {
1172
+ "color": "#000000",
1173
+ "fontFamily": "Moderat-Extended-Bold",
1174
+ "fontSize": 18,
1175
+ "fontStyle": "normal",
1176
+ "fontWeight": "400",
1177
+ "lineHeight": 23,
1178
+ "textDecorationColor": "#000000",
1179
+ },
1180
+ ]
1181
+ }
1182
+ type="header4"
1183
+ variant="bold"
1184
+ >
1185
+ Hover
1186
+ </Text>
1187
+ </View>
1188
+ <View
1189
+ style={
1190
+ Array [
1191
+ Object {
1192
+ "marginBottom": 4,
1193
+ "marginTop": 2,
1194
+ },
1195
+ ]
1196
+ }
1197
+ >
1198
+ <TextInput
1199
+ allowFontScaling={true}
1200
+ autoCompleteType="off"
1201
+ autoCorrect={true}
1202
+ editable={true}
1203
+ keyboardType="default"
1204
+ minHeight={0}
1205
+ onBlur={[Function]}
1206
+ onChange={[MockFunction]}
1207
+ onFocus={[Function]}
1208
+ placeholder="Placeholder"
1209
+ placeholderTextColor="#737373"
1210
+ rejectResponderTermination={true}
1211
+ secureTextEntry={false}
1212
+ selectionColor="#4C34E0"
1213
+ state="hover"
1214
+ style={
1215
+ Array [
1216
+ Object {
1217
+ "backgroundColor": "#FFFFFF",
1218
+ "borderColor": "#CCCCCC",
1219
+ "borderRadius": 10,
1220
+ "borderWidth": 2,
1221
+ "color": "#000000",
1222
+ "fontFamily": "NotoSans",
1223
+ "fontSize": 16,
1224
+ "lineHeight": 0,
1225
+ "minHeight": 0,
1226
+ "paddingBottom": 12,
1227
+ "paddingLeft": 16,
1228
+ "paddingRight": 16,
1229
+ "paddingTop": 12,
1230
+ },
1231
+ ]
1232
+ }
1233
+ textContentType="none"
1234
+ underlineColorAndroid="transparent"
1235
+ value="The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who uses a technologically advanced, artificially intelligent automobile."
1236
+ />
1237
+ </View>
1238
+ </View>
1239
+ <View
1240
+ style={
1241
+ Array [
1242
+ Object {
1243
+ "paddingBottom": 20,
1244
+ "paddingLeft": 0,
1245
+ "paddingRight": 0,
1246
+ "paddingTop": 10,
1247
+ },
1248
+ ]
1249
+ }
1250
+ >
1251
+ <View
1252
+ style={
1253
+ Array [
1254
+ Object {
1255
+ "marginBottom": 10,
1256
+ },
1257
+ ]
1258
+ }
1259
+ >
1260
+ <Text
1261
+ aria-level="4"
1262
+ color="black"
1263
+ isHeader={true}
1264
+ medium="header5"
1265
+ numberOfLines={1}
1266
+ style={
1267
+ Array [
1268
+ Object {
1269
+ "color": "#000000",
1270
+ "fontFamily": "Moderat-Extended-Bold",
1271
+ "fontSize": 18,
1272
+ "fontStyle": "normal",
1273
+ "fontWeight": "400",
1274
+ "lineHeight": 23,
1275
+ "textDecorationColor": "#000000",
1276
+ },
1277
+ ]
1278
+ }
1279
+ type="header4"
1280
+ variant="bold"
1281
+ >
1282
+ Focus
1283
+ </Text>
1284
+ </View>
1285
+ <View
1286
+ style={
1287
+ Array [
1288
+ Object {
1289
+ "marginBottom": 4,
1290
+ "marginTop": 2,
1291
+ },
1292
+ ]
1293
+ }
1294
+ >
1295
+ <TextInput
1296
+ allowFontScaling={true}
1297
+ autoCompleteType="off"
1298
+ autoCorrect={true}
1299
+ editable={true}
1300
+ keyboardType="default"
1301
+ minHeight={0}
1302
+ onBlur={[Function]}
1303
+ onChange={[MockFunction]}
1304
+ onFocus={[Function]}
1305
+ placeholder="Placeholder"
1306
+ placeholderTextColor="#737373"
1307
+ rejectResponderTermination={true}
1308
+ secureTextEntry={false}
1309
+ selectionColor="#4C34E0"
1310
+ state="focus"
1311
+ style={
1312
+ Array [
1313
+ Object {
1314
+ "backgroundColor": "#FFFFFF",
1315
+ "borderColor": "#4C34E0",
1316
+ "borderRadius": 10,
1317
+ "borderWidth": 2,
1318
+ "color": "#000000",
1319
+ "fontFamily": "NotoSans",
1320
+ "fontSize": 16,
1321
+ "lineHeight": 0,
1322
+ "minHeight": 0,
1323
+ "paddingBottom": 12,
1324
+ "paddingLeft": 16,
1325
+ "paddingRight": 16,
1326
+ "paddingTop": 12,
1327
+ },
1328
+ ]
1329
+ }
1330
+ textContentType="none"
1331
+ underlineColorAndroid="transparent"
1332
+ value="The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who uses a technologically advanced, artificially intelligent automobile."
1333
+ />
1334
+ </View>
1335
+ </View>
1336
+ <View
1337
+ style={
1338
+ Array [
1339
+ Object {
1340
+ "paddingBottom": 20,
1341
+ "paddingLeft": 0,
1342
+ "paddingRight": 0,
1343
+ "paddingTop": 10,
1344
+ },
1345
+ ]
1346
+ }
1347
+ >
1348
+ <View
1349
+ style={
1350
+ Array [
1351
+ Object {
1352
+ "marginBottom": 10,
1353
+ },
1354
+ ]
1355
+ }
1356
+ >
1357
+ <Text
1358
+ aria-level="4"
1359
+ color="black"
1360
+ isHeader={true}
1361
+ medium="header5"
1362
+ numberOfLines={1}
1363
+ style={
1364
+ Array [
1365
+ Object {
1366
+ "color": "#000000",
1367
+ "fontFamily": "Moderat-Extended-Bold",
1368
+ "fontSize": 18,
1369
+ "fontStyle": "normal",
1370
+ "fontWeight": "400",
1371
+ "lineHeight": 23,
1372
+ "textDecorationColor": "#000000",
1373
+ },
1374
+ ]
1375
+ }
1376
+ type="header4"
1377
+ variant="bold"
1378
+ >
1379
+ Disabled
1380
+ </Text>
1381
+ </View>
1382
+ <View
1383
+ style={
1384
+ Array [
1385
+ Object {
1386
+ "marginBottom": 4,
1387
+ "marginTop": 2,
1388
+ },
1389
+ ]
1390
+ }
1391
+ >
1392
+ <TextInput
1393
+ allowFontScaling={true}
1394
+ autoCompleteType="off"
1395
+ autoCorrect={true}
1396
+ editable={false}
1397
+ keyboardType="default"
1398
+ minHeight={0}
1399
+ onBlur={[Function]}
1400
+ onChange={[MockFunction]}
1401
+ onFocus={[Function]}
1402
+ placeholder="Placeholder"
1403
+ placeholderTextColor="#737373"
1404
+ rejectResponderTermination={true}
1405
+ secureTextEntry={false}
1406
+ selectionColor="#4C34E0"
1407
+ state="disabled"
1408
+ style={
1409
+ Array [
1410
+ Object {
1411
+ "backgroundColor": "#F2F2F2",
1412
+ "borderColor": "#E5E5E5",
1413
+ "borderRadius": 10,
1414
+ "borderWidth": 2,
1415
+ "color": "#737373",
1416
+ "fontFamily": "NotoSans",
1417
+ "fontSize": 16,
1418
+ "lineHeight": 0,
1419
+ "minHeight": 0,
1420
+ "paddingBottom": 12,
1421
+ "paddingLeft": 16,
1422
+ "paddingRight": 16,
1423
+ "paddingTop": 12,
1424
+ },
1425
+ ]
1426
+ }
1427
+ textContentType="none"
1428
+ underlineColorAndroid="transparent"
1429
+ />
1430
+ </View>
1431
+ </View>
1432
+ <View
1433
+ style={
1434
+ Array [
1435
+ Object {
1436
+ "paddingBottom": 20,
1437
+ "paddingLeft": 0,
1438
+ "paddingRight": 0,
1439
+ "paddingTop": 10,
1440
+ },
1441
+ ]
1442
+ }
1443
+ >
1444
+ <View
1445
+ style={
1446
+ Array [
1447
+ Object {
1448
+ "marginBottom": 10,
1449
+ },
1450
+ ]
1451
+ }
1452
+ >
1453
+ <Text
1454
+ aria-level="4"
1455
+ color="black"
1456
+ isHeader={true}
1457
+ medium="header5"
1458
+ numberOfLines={1}
1459
+ style={
1460
+ Array [
1461
+ Object {
1462
+ "color": "#000000",
1463
+ "fontFamily": "Moderat-Extended-Bold",
1464
+ "fontSize": 18,
1465
+ "fontStyle": "normal",
1466
+ "fontWeight": "400",
1467
+ "lineHeight": 23,
1468
+ "textDecorationColor": "#000000",
1469
+ },
1470
+ ]
1471
+ }
1472
+ type="header4"
1473
+ variant="bold"
1474
+ >
1475
+ Disabled Filled
1476
+ </Text>
1477
+ </View>
1478
+ <View
1479
+ style={
1480
+ Array [
1481
+ Object {
1482
+ "marginBottom": 4,
1483
+ "marginTop": 2,
1484
+ },
1485
+ ]
1486
+ }
1487
+ >
1488
+ <TextInput
1489
+ allowFontScaling={true}
1490
+ autoCompleteType="off"
1491
+ autoCorrect={true}
1492
+ editable={false}
1493
+ keyboardType="default"
1494
+ minHeight={0}
1495
+ onBlur={[Function]}
1496
+ onChange={[MockFunction]}
1497
+ onFocus={[Function]}
1498
+ placeholder="Placeholder"
1499
+ placeholderTextColor="#737373"
1500
+ rejectResponderTermination={true}
1501
+ secureTextEntry={false}
1502
+ selectionColor="#4C34E0"
1503
+ state="disabled"
1504
+ style={
1505
+ Array [
1506
+ Object {
1507
+ "backgroundColor": "#F2F2F2",
1508
+ "borderColor": "#E5E5E5",
1509
+ "borderRadius": 10,
1510
+ "borderWidth": 2,
1511
+ "color": "#737373",
1512
+ "fontFamily": "NotoSans",
1513
+ "fontSize": 16,
1514
+ "lineHeight": 0,
1515
+ "minHeight": 0,
1516
+ "paddingBottom": 12,
1517
+ "paddingLeft": 16,
1518
+ "paddingRight": 16,
1519
+ "paddingTop": 12,
1520
+ },
1521
+ ]
1522
+ }
1523
+ textContentType="none"
1524
+ underlineColorAndroid="transparent"
1525
+ value="The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who uses a technologically advanced, artificially intelligent automobile."
1526
+ />
1527
+ </View>
1528
+ </View>
1529
+ </View>
1530
+ </View>
1531
+ <View
1532
+ style={
1533
+ Array [
1534
+ Object {
1535
+ "marginBottom": 30,
1536
+ },
1537
+ ]
1538
+ }
1539
+ >
1540
+ <View
1541
+ style={
1542
+ Array [
1543
+ Object {
1544
+ "marginBottom": 30,
1545
+ },
1546
+ ]
1547
+ }
1548
+ >
1549
+ <Text
1550
+ aria-level="2"
1551
+ color="black"
1552
+ isHeader={true}
1553
+ style={
1554
+ Array [
1555
+ Object {
1556
+ "color": "#000000",
1557
+ "fontFamily": "Moderat-Extended-Bold",
1558
+ "fontSize": 32,
1559
+ "fontStyle": "normal",
1560
+ "fontWeight": "400",
1561
+ "lineHeight": 42,
1562
+ "textDecorationColor": "#000000",
1563
+ },
1564
+ ]
1565
+ }
1566
+ type="header2"
1567
+ variant="bold"
1568
+ >
1569
+ Invalid
1570
+ </Text>
1571
+ </View>
1572
+ <View
1573
+ style={
1574
+ Array [
1575
+ Object {
1576
+ "flexDirection": "column",
1577
+ "marginBottom": 0,
1578
+ "marginLeft": 0,
1579
+ "marginRight": 0,
1580
+ "marginTop": 0,
1581
+ },
1582
+ ]
1583
+ }
1584
+ >
1585
+ <View
1586
+ style={
1587
+ Array [
1588
+ Object {
1589
+ "paddingBottom": 20,
1590
+ "paddingLeft": 0,
1591
+ "paddingRight": 0,
1592
+ "paddingTop": 10,
1593
+ },
1594
+ ]
1595
+ }
1596
+ >
1597
+ <View
1598
+ style={
1599
+ Array [
1600
+ Object {
1601
+ "marginBottom": 10,
1602
+ },
1603
+ ]
1604
+ }
1605
+ >
1606
+ <Text
1607
+ aria-level="4"
1608
+ color="black"
1609
+ isHeader={true}
1610
+ medium="header5"
1611
+ numberOfLines={1}
1612
+ style={
1613
+ Array [
1614
+ Object {
1615
+ "color": "#000000",
1616
+ "fontFamily": "Moderat-Extended-Bold",
1617
+ "fontSize": 18,
1618
+ "fontStyle": "normal",
1619
+ "fontWeight": "400",
1620
+ "lineHeight": 23,
1621
+ "textDecorationColor": "#000000",
1622
+ },
1623
+ ]
1624
+ }
1625
+ type="header4"
1626
+ variant="bold"
1627
+ >
1628
+ Empty
1629
+ </Text>
1630
+ </View>
1631
+ <View
1632
+ style={
1633
+ Array [
1634
+ Object {
1635
+ "marginBottom": 4,
1636
+ "marginTop": 2,
1637
+ },
1638
+ ]
1639
+ }
1640
+ >
1641
+ <TextInput
1642
+ allowFontScaling={true}
1643
+ autoCompleteType="off"
1644
+ autoCorrect={true}
1645
+ editable={true}
1646
+ keyboardType="default"
1647
+ minHeight={0}
1648
+ onBlur={[Function]}
1649
+ onChange={[MockFunction]}
1650
+ onFocus={[Function]}
1651
+ placeholder="Placeholder"
1652
+ placeholderTextColor="#737373"
1653
+ rejectResponderTermination={true}
1654
+ secureTextEntry={false}
1655
+ selectionColor="#4C34E0"
1656
+ state="invalid"
1657
+ style={
1658
+ Array [
1659
+ Object {
1660
+ "backgroundColor": "#FFFFFF",
1661
+ "borderColor": "#D44148",
1662
+ "borderRadius": 10,
1663
+ "borderWidth": 2,
1664
+ "color": "#000000",
1665
+ "fontFamily": "NotoSans",
1666
+ "fontSize": 16,
1667
+ "lineHeight": 0,
1668
+ "minHeight": 0,
1669
+ "paddingBottom": 12,
1670
+ "paddingLeft": 16,
1671
+ "paddingRight": 16,
1672
+ "paddingTop": 12,
1673
+ },
1674
+ ]
1675
+ }
1676
+ textContentType="none"
1677
+ underlineColorAndroid="transparent"
1678
+ />
1679
+ </View>
1680
+ </View>
1681
+ <View
1682
+ style={
1683
+ Array [
1684
+ Object {
1685
+ "paddingBottom": 20,
1686
+ "paddingLeft": 0,
1687
+ "paddingRight": 0,
1688
+ "paddingTop": 10,
1689
+ },
1690
+ ]
1691
+ }
1692
+ >
1693
+ <View
1694
+ style={
1695
+ Array [
1696
+ Object {
1697
+ "marginBottom": 10,
1698
+ },
1699
+ ]
1700
+ }
1701
+ >
1702
+ <Text
1703
+ aria-level="4"
1704
+ color="black"
1705
+ isHeader={true}
1706
+ medium="header5"
1707
+ numberOfLines={1}
1708
+ style={
1709
+ Array [
1710
+ Object {
1711
+ "color": "#000000",
1712
+ "fontFamily": "Moderat-Extended-Bold",
1713
+ "fontSize": 18,
1714
+ "fontStyle": "normal",
1715
+ "fontWeight": "400",
1716
+ "lineHeight": 23,
1717
+ "textDecorationColor": "#000000",
1718
+ },
1719
+ ]
1720
+ }
1721
+ type="header4"
1722
+ variant="bold"
1723
+ >
1724
+ Filled
1725
+ </Text>
1726
+ </View>
1727
+ <View
1728
+ style={
1729
+ Array [
1730
+ Object {
1731
+ "marginBottom": 4,
1732
+ "marginTop": 2,
1733
+ },
1734
+ ]
1735
+ }
1736
+ >
1737
+ <TextInput
1738
+ allowFontScaling={true}
1739
+ autoCompleteType="off"
1740
+ autoCorrect={true}
1741
+ editable={true}
1742
+ keyboardType="default"
1743
+ minHeight={0}
1744
+ onBlur={[Function]}
1745
+ onChange={[MockFunction]}
1746
+ onFocus={[Function]}
1747
+ placeholder="Placeholder"
1748
+ placeholderTextColor="#737373"
1749
+ rejectResponderTermination={true}
1750
+ secureTextEntry={false}
1751
+ selectionColor="#4C34E0"
1752
+ state="invalid"
1753
+ style={
1754
+ Array [
1755
+ Object {
1756
+ "backgroundColor": "#FFFFFF",
1757
+ "borderColor": "#D44148",
1758
+ "borderRadius": 10,
1759
+ "borderWidth": 2,
1760
+ "color": "#000000",
1761
+ "fontFamily": "NotoSans",
1762
+ "fontSize": 16,
1763
+ "lineHeight": 0,
1764
+ "minHeight": 0,
1765
+ "paddingBottom": 12,
1766
+ "paddingLeft": 16,
1767
+ "paddingRight": 16,
1768
+ "paddingTop": 12,
1769
+ },
1770
+ ]
1771
+ }
1772
+ textContentType="none"
1773
+ underlineColorAndroid="transparent"
1774
+ value="The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who uses a technologically advanced, artificially intelligent automobile."
1775
+ />
1776
+ </View>
1777
+ </View>
1778
+ <View
1779
+ style={
1780
+ Array [
1781
+ Object {
1782
+ "paddingBottom": 20,
1783
+ "paddingLeft": 0,
1784
+ "paddingRight": 0,
1785
+ "paddingTop": 10,
1786
+ },
1787
+ ]
1788
+ }
1789
+ >
1790
+ <View
1791
+ style={
1792
+ Array [
1793
+ Object {
1794
+ "marginBottom": 10,
1795
+ },
1796
+ ]
1797
+ }
1798
+ >
1799
+ <Text
1800
+ aria-level="4"
1801
+ color="black"
1802
+ isHeader={true}
1803
+ medium="header5"
1804
+ numberOfLines={1}
1805
+ style={
1806
+ Array [
1807
+ Object {
1808
+ "color": "#000000",
1809
+ "fontFamily": "Moderat-Extended-Bold",
1810
+ "fontSize": 18,
1811
+ "fontStyle": "normal",
1812
+ "fontWeight": "400",
1813
+ "lineHeight": 23,
1814
+ "textDecorationColor": "#000000",
1815
+ },
1816
+ ]
1817
+ }
1818
+ type="header4"
1819
+ variant="bold"
1820
+ >
1821
+ Hover
1822
+ </Text>
1823
+ </View>
1824
+ <View
1825
+ style={
1826
+ Array [
1827
+ Object {
1828
+ "marginBottom": 4,
1829
+ "marginTop": 2,
1830
+ },
1831
+ ]
1832
+ }
1833
+ >
1834
+ <TextInput
1835
+ allowFontScaling={true}
1836
+ autoCompleteType="off"
1837
+ autoCorrect={true}
1838
+ editable={true}
1839
+ keyboardType="default"
1840
+ minHeight={0}
1841
+ onBlur={[Function]}
1842
+ onChange={[MockFunction]}
1843
+ onFocus={[Function]}
1844
+ placeholder="Placeholder"
1845
+ placeholderTextColor="#737373"
1846
+ rejectResponderTermination={true}
1847
+ secureTextEntry={false}
1848
+ selectionColor="#4C34E0"
1849
+ state="hover"
1850
+ style={
1851
+ Array [
1852
+ Object {
1853
+ "backgroundColor": "#FFFFFF",
1854
+ "borderColor": "#CCCCCC",
1855
+ "borderRadius": 10,
1856
+ "borderWidth": 2,
1857
+ "color": "#000000",
1858
+ "fontFamily": "NotoSans",
1859
+ "fontSize": 16,
1860
+ "lineHeight": 0,
1861
+ "minHeight": 0,
1862
+ "paddingBottom": 12,
1863
+ "paddingLeft": 16,
1864
+ "paddingRight": 16,
1865
+ "paddingTop": 12,
1866
+ },
1867
+ ]
1868
+ }
1869
+ textContentType="none"
1870
+ underlineColorAndroid="transparent"
1871
+ value="The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who uses a technologically advanced, artificially intelligent automobile."
1872
+ />
1873
+ </View>
1874
+ </View>
1875
+ <View
1876
+ style={
1877
+ Array [
1878
+ Object {
1879
+ "paddingBottom": 20,
1880
+ "paddingLeft": 0,
1881
+ "paddingRight": 0,
1882
+ "paddingTop": 10,
1883
+ },
1884
+ ]
1885
+ }
1886
+ >
1887
+ <View
1888
+ style={
1889
+ Array [
1890
+ Object {
1891
+ "marginBottom": 10,
1892
+ },
1893
+ ]
1894
+ }
1895
+ >
1896
+ <Text
1897
+ aria-level="4"
1898
+ color="black"
1899
+ isHeader={true}
1900
+ medium="header5"
1901
+ numberOfLines={1}
1902
+ style={
1903
+ Array [
1904
+ Object {
1905
+ "color": "#000000",
1906
+ "fontFamily": "Moderat-Extended-Bold",
1907
+ "fontSize": 18,
1908
+ "fontStyle": "normal",
1909
+ "fontWeight": "400",
1910
+ "lineHeight": 23,
1911
+ "textDecorationColor": "#000000",
1912
+ },
1913
+ ]
1914
+ }
1915
+ type="header4"
1916
+ variant="bold"
1917
+ >
1918
+ Focus
1919
+ </Text>
1920
+ </View>
1921
+ <View
1922
+ style={
1923
+ Array [
1924
+ Object {
1925
+ "marginBottom": 4,
1926
+ "marginTop": 2,
1927
+ },
1928
+ ]
1929
+ }
1930
+ >
1931
+ <TextInput
1932
+ allowFontScaling={true}
1933
+ autoCompleteType="off"
1934
+ autoCorrect={true}
1935
+ editable={true}
1936
+ keyboardType="default"
1937
+ minHeight={0}
1938
+ onBlur={[Function]}
1939
+ onChange={[MockFunction]}
1940
+ onFocus={[Function]}
1941
+ placeholder="Placeholder"
1942
+ placeholderTextColor="#737373"
1943
+ rejectResponderTermination={true}
1944
+ secureTextEntry={false}
1945
+ selectionColor="#4C34E0"
1946
+ state="focus"
1947
+ style={
1948
+ Array [
1949
+ Object {
1950
+ "backgroundColor": "#FFFFFF",
1951
+ "borderColor": "#4C34E0",
1952
+ "borderRadius": 10,
1953
+ "borderWidth": 2,
1954
+ "color": "#000000",
1955
+ "fontFamily": "NotoSans",
1956
+ "fontSize": 16,
1957
+ "lineHeight": 0,
1958
+ "minHeight": 0,
1959
+ "paddingBottom": 12,
1960
+ "paddingLeft": 16,
1961
+ "paddingRight": 16,
1962
+ "paddingTop": 12,
1963
+ },
1964
+ ]
1965
+ }
1966
+ textContentType="none"
1967
+ underlineColorAndroid="transparent"
1968
+ value="The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who uses a technologically advanced, artificially intelligent automobile."
1969
+ />
1970
+ </View>
1971
+ </View>
1972
+ <View
1973
+ style={
1974
+ Array [
1975
+ Object {
1976
+ "paddingBottom": 20,
1977
+ "paddingLeft": 0,
1978
+ "paddingRight": 0,
1979
+ "paddingTop": 10,
1980
+ },
1981
+ ]
1982
+ }
1983
+ >
1984
+ <View
1985
+ style={
1986
+ Array [
1987
+ Object {
1988
+ "marginBottom": 10,
1989
+ },
1990
+ ]
1991
+ }
1992
+ >
1993
+ <Text
1994
+ aria-level="4"
1995
+ color="black"
1996
+ isHeader={true}
1997
+ medium="header5"
1998
+ numberOfLines={1}
1999
+ style={
2000
+ Array [
2001
+ Object {
2002
+ "color": "#000000",
2003
+ "fontFamily": "Moderat-Extended-Bold",
2004
+ "fontSize": 18,
2005
+ "fontStyle": "normal",
2006
+ "fontWeight": "400",
2007
+ "lineHeight": 23,
2008
+ "textDecorationColor": "#000000",
2009
+ },
2010
+ ]
2011
+ }
2012
+ type="header4"
2013
+ variant="bold"
2014
+ >
2015
+ Disabled
2016
+ </Text>
2017
+ </View>
2018
+ <View
2019
+ style={
2020
+ Array [
2021
+ Object {
2022
+ "marginBottom": 4,
2023
+ "marginTop": 2,
2024
+ },
2025
+ ]
2026
+ }
2027
+ >
2028
+ <TextInput
2029
+ allowFontScaling={true}
2030
+ autoCompleteType="off"
2031
+ autoCorrect={true}
2032
+ editable={false}
2033
+ keyboardType="default"
2034
+ minHeight={0}
2035
+ onBlur={[Function]}
2036
+ onChange={[MockFunction]}
2037
+ onFocus={[Function]}
2038
+ placeholder="Placeholder"
2039
+ placeholderTextColor="#737373"
2040
+ rejectResponderTermination={true}
2041
+ secureTextEntry={false}
2042
+ selectionColor="#4C34E0"
2043
+ state="disabled"
2044
+ style={
2045
+ Array [
2046
+ Object {
2047
+ "backgroundColor": "#F2F2F2",
2048
+ "borderColor": "#E5E5E5",
2049
+ "borderRadius": 10,
2050
+ "borderWidth": 2,
2051
+ "color": "#737373",
2052
+ "fontFamily": "NotoSans",
2053
+ "fontSize": 16,
2054
+ "lineHeight": 0,
2055
+ "minHeight": 0,
2056
+ "paddingBottom": 12,
2057
+ "paddingLeft": 16,
2058
+ "paddingRight": 16,
2059
+ "paddingTop": 12,
2060
+ },
2061
+ ]
2062
+ }
2063
+ textContentType="none"
2064
+ underlineColorAndroid="transparent"
2065
+ />
2066
+ </View>
2067
+ </View>
2068
+ <View
2069
+ style={
2070
+ Array [
2071
+ Object {
2072
+ "paddingBottom": 20,
2073
+ "paddingLeft": 0,
2074
+ "paddingRight": 0,
2075
+ "paddingTop": 10,
2076
+ },
2077
+ ]
2078
+ }
2079
+ >
2080
+ <View
2081
+ style={
2082
+ Array [
2083
+ Object {
2084
+ "marginBottom": 10,
2085
+ },
2086
+ ]
2087
+ }
2088
+ >
2089
+ <Text
2090
+ aria-level="4"
2091
+ color="black"
2092
+ isHeader={true}
2093
+ medium="header5"
2094
+ numberOfLines={1}
2095
+ style={
2096
+ Array [
2097
+ Object {
2098
+ "color": "#000000",
2099
+ "fontFamily": "Moderat-Extended-Bold",
2100
+ "fontSize": 18,
2101
+ "fontStyle": "normal",
2102
+ "fontWeight": "400",
2103
+ "lineHeight": 23,
2104
+ "textDecorationColor": "#000000",
2105
+ },
2106
+ ]
2107
+ }
2108
+ type="header4"
2109
+ variant="bold"
2110
+ >
2111
+ Disabled Filled
2112
+ </Text>
2113
+ </View>
2114
+ <View
2115
+ style={
2116
+ Array [
2117
+ Object {
2118
+ "marginBottom": 4,
2119
+ "marginTop": 2,
2120
+ },
2121
+ ]
2122
+ }
2123
+ >
2124
+ <TextInput
2125
+ allowFontScaling={true}
2126
+ autoCompleteType="off"
2127
+ autoCorrect={true}
2128
+ editable={false}
2129
+ keyboardType="default"
2130
+ minHeight={0}
2131
+ onBlur={[Function]}
2132
+ onChange={[MockFunction]}
2133
+ onFocus={[Function]}
2134
+ placeholder="Placeholder"
2135
+ placeholderTextColor="#737373"
2136
+ rejectResponderTermination={true}
2137
+ secureTextEntry={false}
2138
+ selectionColor="#4C34E0"
2139
+ state="disabled"
2140
+ style={
2141
+ Array [
2142
+ Object {
2143
+ "backgroundColor": "#F2F2F2",
2144
+ "borderColor": "#E5E5E5",
2145
+ "borderRadius": 10,
2146
+ "borderWidth": 2,
2147
+ "color": "#737373",
2148
+ "fontFamily": "NotoSans",
2149
+ "fontSize": 16,
2150
+ "lineHeight": 0,
2151
+ "minHeight": 0,
2152
+ "paddingBottom": 12,
2153
+ "paddingLeft": 16,
2154
+ "paddingRight": 16,
2155
+ "paddingTop": 12,
2156
+ },
2157
+ ]
2158
+ }
2159
+ textContentType="none"
2160
+ underlineColorAndroid="transparent"
2161
+ value="The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who uses a technologically advanced, artificially intelligent automobile."
2162
+ />
2163
+ </View>
2164
+ </View>
2165
+ </View>
2166
+ </View>
2167
+ <View
2168
+ style={
2169
+ Array [
2170
+ Object {
2171
+ "marginBottom": 30,
2172
+ },
2173
+ ]
2174
+ }
2175
+ >
2176
+ <View
2177
+ style={
2178
+ Array [
2179
+ Object {
2180
+ "marginBottom": 30,
2181
+ },
2182
+ ]
2183
+ }
2184
+ >
2185
+ <Text
2186
+ aria-level="2"
2187
+ color="black"
2188
+ isHeader={true}
2189
+ style={
2190
+ Array [
2191
+ Object {
2192
+ "color": "#000000",
2193
+ "fontFamily": "Moderat-Extended-Bold",
2194
+ "fontSize": 32,
2195
+ "fontStyle": "normal",
2196
+ "fontWeight": "400",
2197
+ "lineHeight": 42,
2198
+ "textDecorationColor": "#000000",
2199
+ },
2200
+ ]
2201
+ }
2202
+ type="header2"
2203
+ variant="bold"
2204
+ >
2205
+ Password
2206
+ </Text>
2207
+ </View>
2208
+ <View
2209
+ style={
2210
+ Array [
2211
+ Object {
2212
+ "flexDirection": "column",
2213
+ "marginBottom": 0,
2214
+ "marginLeft": 0,
2215
+ "marginRight": 0,
2216
+ "marginTop": 0,
2217
+ },
2218
+ ]
2219
+ }
2220
+ >
2221
+ <View
2222
+ style={
2223
+ Array [
2224
+ Object {
2225
+ "paddingBottom": 20,
2226
+ "paddingLeft": 0,
2227
+ "paddingRight": 0,
2228
+ "paddingTop": 10,
2229
+ },
2230
+ ]
2231
+ }
2232
+ >
2233
+ <View
2234
+ style={
2235
+ Array [
2236
+ Object {
2237
+ "marginBottom": 10,
2238
+ },
2239
+ ]
2240
+ }
2241
+ >
2242
+ <Text
2243
+ aria-level="4"
2244
+ color="black"
2245
+ isHeader={true}
2246
+ medium="header5"
2247
+ numberOfLines={1}
2248
+ style={
2249
+ Array [
2250
+ Object {
2251
+ "color": "#000000",
2252
+ "fontFamily": "Moderat-Extended-Bold",
2253
+ "fontSize": 18,
2254
+ "fontStyle": "normal",
2255
+ "fontWeight": "400",
2256
+ "lineHeight": 23,
2257
+ "textDecorationColor": "#000000",
2258
+ },
2259
+ ]
2260
+ }
2261
+ type="header4"
2262
+ variant="bold"
2263
+ >
2264
+ Empty
2265
+ </Text>
2266
+ </View>
2267
+ <View
2268
+ style={
2269
+ Array [
2270
+ Object {
2271
+ "marginBottom": 4,
2272
+ "marginTop": 2,
2273
+ },
2274
+ ]
2275
+ }
2276
+ >
2277
+ <TextInput
2278
+ allowFontScaling={true}
2279
+ autoCompleteType="password"
2280
+ autoCorrect={false}
2281
+ editable={true}
2282
+ keyboardType="default"
2283
+ minHeight={0}
2284
+ onBlur={[Function]}
2285
+ onChange={[MockFunction]}
2286
+ onFocus={[Function]}
2287
+ placeholder="Placeholder"
2288
+ placeholderTextColor="#737373"
2289
+ rejectResponderTermination={true}
2290
+ secureTextEntry={true}
2291
+ selectionColor="#4C34E0"
2292
+ state="default"
2293
+ style={
2294
+ Array [
2295
+ Object {
2296
+ "backgroundColor": "#FFFFFF",
2297
+ "borderColor": "#E5E5E5",
2298
+ "borderRadius": 10,
2299
+ "borderWidth": 2,
2300
+ "color": "#000000",
2301
+ "fontFamily": "NotoSans",
2302
+ "fontSize": 16,
2303
+ "lineHeight": 0,
2304
+ "minHeight": 0,
2305
+ "paddingBottom": 12,
2306
+ "paddingLeft": 16,
2307
+ "paddingRight": 16,
2308
+ "paddingTop": 12,
2309
+ },
2310
+ ]
2311
+ }
2312
+ textContentType="password"
2313
+ underlineColorAndroid="transparent"
2314
+ />
2315
+ <View
2316
+ accessible={true}
2317
+ collapsable={false}
2318
+ focusable={true}
2319
+ onBlur={[Function]}
2320
+ onClick={[Function]}
2321
+ onFocus={[Function]}
2322
+ onResponderGrant={[Function]}
2323
+ onResponderMove={[Function]}
2324
+ onResponderRelease={[Function]}
2325
+ onResponderTerminate={[Function]}
2326
+ onResponderTerminationRequest={[Function]}
2327
+ onStartShouldSetResponder={[Function]}
2328
+ style={
2329
+ Array [
2330
+ Object {
2331
+ "bottom": 0,
2332
+ "justifyContent": "center",
2333
+ "paddingBottom": 10,
2334
+ "paddingLeft": 10,
2335
+ "paddingRight": 10,
2336
+ "paddingTop": 10,
2337
+ "position": "absolute",
2338
+ "right": 0,
2339
+ "top": 0,
2340
+ },
2341
+ ]
2342
+ }
2343
+ >
2344
+ <View
2345
+ color="#000000"
2346
+ size={20}
2347
+ style={
2348
+ Array [
2349
+ Object {
2350
+ "alignSelf": "auto",
2351
+ "color": "#000000",
2352
+ "height": 20,
2353
+ "width": 20,
2354
+ },
2355
+ ]
2356
+ }
2357
+ >
2358
+ <svg
2359
+ color="#000000"
2360
+ data-file-name="SvgEyeOffInline"
2361
+ />
2362
+ </View>
2363
+ </View>
2364
+ </View>
2365
+ </View>
2366
+ <View
2367
+ style={
2368
+ Array [
2369
+ Object {
2370
+ "paddingBottom": 20,
2371
+ "paddingLeft": 0,
2372
+ "paddingRight": 0,
2373
+ "paddingTop": 10,
2374
+ },
2375
+ ]
2376
+ }
2377
+ >
2378
+ <View
2379
+ style={
2380
+ Array [
2381
+ Object {
2382
+ "marginBottom": 10,
2383
+ },
2384
+ ]
2385
+ }
2386
+ >
2387
+ <Text
2388
+ aria-level="4"
2389
+ color="black"
2390
+ isHeader={true}
2391
+ medium="header5"
2392
+ numberOfLines={1}
2393
+ style={
2394
+ Array [
2395
+ Object {
2396
+ "color": "#000000",
2397
+ "fontFamily": "Moderat-Extended-Bold",
2398
+ "fontSize": 18,
2399
+ "fontStyle": "normal",
2400
+ "fontWeight": "400",
2401
+ "lineHeight": 23,
2402
+ "textDecorationColor": "#000000",
2403
+ },
2404
+ ]
2405
+ }
2406
+ type="header4"
2407
+ variant="bold"
2408
+ >
2409
+ Filled
2410
+ </Text>
2411
+ </View>
2412
+ <View
2413
+ style={
2414
+ Array [
2415
+ Object {
2416
+ "marginBottom": 4,
2417
+ "marginTop": 2,
2418
+ },
2419
+ ]
2420
+ }
2421
+ >
2422
+ <TextInput
2423
+ allowFontScaling={true}
2424
+ autoCompleteType="password"
2425
+ autoCorrect={false}
2426
+ editable={true}
2427
+ keyboardType="default"
2428
+ minHeight={0}
2429
+ onBlur={[Function]}
2430
+ onChange={[MockFunction]}
2431
+ onFocus={[Function]}
2432
+ placeholder="Placeholder"
2433
+ placeholderTextColor="#737373"
2434
+ rejectResponderTermination={true}
2435
+ secureTextEntry={true}
2436
+ selectionColor="#4C34E0"
2437
+ state="default"
2438
+ style={
2439
+ Array [
2440
+ Object {
2441
+ "backgroundColor": "#FFFFFF",
2442
+ "borderColor": "#E5E5E5",
2443
+ "borderRadius": 10,
2444
+ "borderWidth": 2,
2445
+ "color": "#000000",
2446
+ "fontFamily": "NotoSans",
2447
+ "fontSize": 16,
2448
+ "lineHeight": 0,
2449
+ "minHeight": 0,
2450
+ "paddingBottom": 12,
2451
+ "paddingLeft": 16,
2452
+ "paddingRight": 16,
2453
+ "paddingTop": 12,
2454
+ },
2455
+ ]
2456
+ }
2457
+ textContentType="password"
2458
+ underlineColorAndroid="transparent"
2459
+ value="The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who uses a technologically advanced, artificially intelligent automobile."
2460
+ />
2461
+ <View
2462
+ accessible={true}
2463
+ collapsable={false}
2464
+ focusable={true}
2465
+ onBlur={[Function]}
2466
+ onClick={[Function]}
2467
+ onFocus={[Function]}
2468
+ onResponderGrant={[Function]}
2469
+ onResponderMove={[Function]}
2470
+ onResponderRelease={[Function]}
2471
+ onResponderTerminate={[Function]}
2472
+ onResponderTerminationRequest={[Function]}
2473
+ onStartShouldSetResponder={[Function]}
2474
+ style={
2475
+ Array [
2476
+ Object {
2477
+ "bottom": 0,
2478
+ "justifyContent": "center",
2479
+ "paddingBottom": 10,
2480
+ "paddingLeft": 10,
2481
+ "paddingRight": 10,
2482
+ "paddingTop": 10,
2483
+ "position": "absolute",
2484
+ "right": 0,
2485
+ "top": 0,
2486
+ },
2487
+ ]
2488
+ }
2489
+ >
2490
+ <View
2491
+ color="#000000"
2492
+ size={20}
2493
+ style={
2494
+ Array [
2495
+ Object {
2496
+ "alignSelf": "auto",
2497
+ "color": "#000000",
2498
+ "height": 20,
2499
+ "width": 20,
2500
+ },
2501
+ ]
2502
+ }
2503
+ >
2504
+ <svg
2505
+ color="#000000"
2506
+ data-file-name="SvgEyeOffInline"
2507
+ />
2508
+ </View>
2509
+ </View>
2510
+ </View>
2511
+ </View>
2512
+ <View
2513
+ style={
2514
+ Array [
2515
+ Object {
2516
+ "paddingBottom": 20,
2517
+ "paddingLeft": 0,
2518
+ "paddingRight": 0,
2519
+ "paddingTop": 10,
2520
+ },
2521
+ ]
2522
+ }
2523
+ >
2524
+ <View
2525
+ style={
2526
+ Array [
2527
+ Object {
2528
+ "marginBottom": 10,
2529
+ },
2530
+ ]
2531
+ }
2532
+ >
2533
+ <Text
2534
+ aria-level="4"
2535
+ color="black"
2536
+ isHeader={true}
2537
+ medium="header5"
2538
+ numberOfLines={1}
2539
+ style={
2540
+ Array [
2541
+ Object {
2542
+ "color": "#000000",
2543
+ "fontFamily": "Moderat-Extended-Bold",
2544
+ "fontSize": 18,
2545
+ "fontStyle": "normal",
2546
+ "fontWeight": "400",
2547
+ "lineHeight": 23,
2548
+ "textDecorationColor": "#000000",
2549
+ },
2550
+ ]
2551
+ }
2552
+ type="header4"
2553
+ variant="bold"
2554
+ >
2555
+ Hover
2556
+ </Text>
2557
+ </View>
2558
+ <View
2559
+ style={
2560
+ Array [
2561
+ Object {
2562
+ "marginBottom": 4,
2563
+ "marginTop": 2,
2564
+ },
2565
+ ]
2566
+ }
2567
+ >
2568
+ <TextInput
2569
+ allowFontScaling={true}
2570
+ autoCompleteType="password"
2571
+ autoCorrect={false}
2572
+ editable={true}
2573
+ keyboardType="default"
2574
+ minHeight={0}
2575
+ onBlur={[Function]}
2576
+ onChange={[MockFunction]}
2577
+ onFocus={[Function]}
2578
+ placeholder="Placeholder"
2579
+ placeholderTextColor="#737373"
2580
+ rejectResponderTermination={true}
2581
+ secureTextEntry={true}
2582
+ selectionColor="#4C34E0"
2583
+ state="hover"
2584
+ style={
2585
+ Array [
2586
+ Object {
2587
+ "backgroundColor": "#FFFFFF",
2588
+ "borderColor": "#CCCCCC",
2589
+ "borderRadius": 10,
2590
+ "borderWidth": 2,
2591
+ "color": "#000000",
2592
+ "fontFamily": "NotoSans",
2593
+ "fontSize": 16,
2594
+ "lineHeight": 0,
2595
+ "minHeight": 0,
2596
+ "paddingBottom": 12,
2597
+ "paddingLeft": 16,
2598
+ "paddingRight": 16,
2599
+ "paddingTop": 12,
2600
+ },
2601
+ ]
2602
+ }
2603
+ textContentType="password"
2604
+ underlineColorAndroid="transparent"
2605
+ value="The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who uses a technologically advanced, artificially intelligent automobile."
2606
+ />
2607
+ <View
2608
+ accessible={true}
2609
+ collapsable={false}
2610
+ focusable={true}
2611
+ onBlur={[Function]}
2612
+ onClick={[Function]}
2613
+ onFocus={[Function]}
2614
+ onResponderGrant={[Function]}
2615
+ onResponderMove={[Function]}
2616
+ onResponderRelease={[Function]}
2617
+ onResponderTerminate={[Function]}
2618
+ onResponderTerminationRequest={[Function]}
2619
+ onStartShouldSetResponder={[Function]}
2620
+ style={
2621
+ Array [
2622
+ Object {
2623
+ "bottom": 0,
2624
+ "justifyContent": "center",
2625
+ "paddingBottom": 10,
2626
+ "paddingLeft": 10,
2627
+ "paddingRight": 10,
2628
+ "paddingTop": 10,
2629
+ "position": "absolute",
2630
+ "right": 0,
2631
+ "top": 0,
2632
+ },
2633
+ ]
2634
+ }
2635
+ >
2636
+ <View
2637
+ color="#000000"
2638
+ size={20}
2639
+ style={
2640
+ Array [
2641
+ Object {
2642
+ "alignSelf": "auto",
2643
+ "color": "#000000",
2644
+ "height": 20,
2645
+ "width": 20,
2646
+ },
2647
+ ]
2648
+ }
2649
+ >
2650
+ <svg
2651
+ color="#000000"
2652
+ data-file-name="SvgEyeOffInline"
2653
+ />
2654
+ </View>
2655
+ </View>
2656
+ </View>
2657
+ </View>
2658
+ <View
2659
+ style={
2660
+ Array [
2661
+ Object {
2662
+ "paddingBottom": 20,
2663
+ "paddingLeft": 0,
2664
+ "paddingRight": 0,
2665
+ "paddingTop": 10,
2666
+ },
2667
+ ]
2668
+ }
2669
+ >
2670
+ <View
2671
+ style={
2672
+ Array [
2673
+ Object {
2674
+ "marginBottom": 10,
2675
+ },
2676
+ ]
2677
+ }
2678
+ >
2679
+ <Text
2680
+ aria-level="4"
2681
+ color="black"
2682
+ isHeader={true}
2683
+ medium="header5"
2684
+ numberOfLines={1}
2685
+ style={
2686
+ Array [
2687
+ Object {
2688
+ "color": "#000000",
2689
+ "fontFamily": "Moderat-Extended-Bold",
2690
+ "fontSize": 18,
2691
+ "fontStyle": "normal",
2692
+ "fontWeight": "400",
2693
+ "lineHeight": 23,
2694
+ "textDecorationColor": "#000000",
2695
+ },
2696
+ ]
2697
+ }
2698
+ type="header4"
2699
+ variant="bold"
2700
+ >
2701
+ Focus
2702
+ </Text>
2703
+ </View>
2704
+ <View
2705
+ style={
2706
+ Array [
2707
+ Object {
2708
+ "marginBottom": 4,
2709
+ "marginTop": 2,
2710
+ },
2711
+ ]
2712
+ }
2713
+ >
2714
+ <TextInput
2715
+ allowFontScaling={true}
2716
+ autoCompleteType="password"
2717
+ autoCorrect={false}
2718
+ editable={true}
2719
+ keyboardType="default"
2720
+ minHeight={0}
2721
+ onBlur={[Function]}
2722
+ onChange={[MockFunction]}
2723
+ onFocus={[Function]}
2724
+ placeholder="Placeholder"
2725
+ placeholderTextColor="#737373"
2726
+ rejectResponderTermination={true}
2727
+ secureTextEntry={true}
2728
+ selectionColor="#4C34E0"
2729
+ state="focus"
2730
+ style={
2731
+ Array [
2732
+ Object {
2733
+ "backgroundColor": "#FFFFFF",
2734
+ "borderColor": "#4C34E0",
2735
+ "borderRadius": 10,
2736
+ "borderWidth": 2,
2737
+ "color": "#000000",
2738
+ "fontFamily": "NotoSans",
2739
+ "fontSize": 16,
2740
+ "lineHeight": 0,
2741
+ "minHeight": 0,
2742
+ "paddingBottom": 12,
2743
+ "paddingLeft": 16,
2744
+ "paddingRight": 16,
2745
+ "paddingTop": 12,
2746
+ },
2747
+ ]
2748
+ }
2749
+ textContentType="password"
2750
+ underlineColorAndroid="transparent"
2751
+ value="The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who uses a technologically advanced, artificially intelligent automobile."
2752
+ />
2753
+ <View
2754
+ accessible={true}
2755
+ collapsable={false}
2756
+ focusable={true}
2757
+ onBlur={[Function]}
2758
+ onClick={[Function]}
2759
+ onFocus={[Function]}
2760
+ onResponderGrant={[Function]}
2761
+ onResponderMove={[Function]}
2762
+ onResponderRelease={[Function]}
2763
+ onResponderTerminate={[Function]}
2764
+ onResponderTerminationRequest={[Function]}
2765
+ onStartShouldSetResponder={[Function]}
2766
+ style={
2767
+ Array [
2768
+ Object {
2769
+ "bottom": 0,
2770
+ "justifyContent": "center",
2771
+ "paddingBottom": 10,
2772
+ "paddingLeft": 10,
2773
+ "paddingRight": 10,
2774
+ "paddingTop": 10,
2775
+ "position": "absolute",
2776
+ "right": 0,
2777
+ "top": 0,
2778
+ },
2779
+ ]
2780
+ }
2781
+ >
2782
+ <View
2783
+ color="#000000"
2784
+ size={20}
2785
+ style={
2786
+ Array [
2787
+ Object {
2788
+ "alignSelf": "auto",
2789
+ "color": "#000000",
2790
+ "height": 20,
2791
+ "width": 20,
2792
+ },
2793
+ ]
2794
+ }
2795
+ >
2796
+ <svg
2797
+ color="#000000"
2798
+ data-file-name="SvgEyeOffInline"
2799
+ />
2800
+ </View>
2801
+ </View>
2802
+ </View>
2803
+ </View>
2804
+ <View
2805
+ style={
2806
+ Array [
2807
+ Object {
2808
+ "paddingBottom": 20,
2809
+ "paddingLeft": 0,
2810
+ "paddingRight": 0,
2811
+ "paddingTop": 10,
2812
+ },
2813
+ ]
2814
+ }
2815
+ >
2816
+ <View
2817
+ style={
2818
+ Array [
2819
+ Object {
2820
+ "marginBottom": 10,
2821
+ },
2822
+ ]
2823
+ }
2824
+ >
2825
+ <Text
2826
+ aria-level="4"
2827
+ color="black"
2828
+ isHeader={true}
2829
+ medium="header5"
2830
+ numberOfLines={1}
2831
+ style={
2832
+ Array [
2833
+ Object {
2834
+ "color": "#000000",
2835
+ "fontFamily": "Moderat-Extended-Bold",
2836
+ "fontSize": 18,
2837
+ "fontStyle": "normal",
2838
+ "fontWeight": "400",
2839
+ "lineHeight": 23,
2840
+ "textDecorationColor": "#000000",
2841
+ },
2842
+ ]
2843
+ }
2844
+ type="header4"
2845
+ variant="bold"
2846
+ >
2847
+ Disabled
2848
+ </Text>
2849
+ </View>
2850
+ <View
2851
+ style={
2852
+ Array [
2853
+ Object {
2854
+ "marginBottom": 4,
2855
+ "marginTop": 2,
2856
+ },
2857
+ ]
2858
+ }
2859
+ >
2860
+ <TextInput
2861
+ allowFontScaling={true}
2862
+ autoCompleteType="password"
2863
+ autoCorrect={false}
2864
+ editable={false}
2865
+ keyboardType="default"
2866
+ minHeight={0}
2867
+ onBlur={[Function]}
2868
+ onChange={[MockFunction]}
2869
+ onFocus={[Function]}
2870
+ placeholder="Placeholder"
2871
+ placeholderTextColor="#737373"
2872
+ rejectResponderTermination={true}
2873
+ secureTextEntry={true}
2874
+ selectionColor="#4C34E0"
2875
+ state="disabled"
2876
+ style={
2877
+ Array [
2878
+ Object {
2879
+ "backgroundColor": "#F2F2F2",
2880
+ "borderColor": "#E5E5E5",
2881
+ "borderRadius": 10,
2882
+ "borderWidth": 2,
2883
+ "color": "#737373",
2884
+ "fontFamily": "NotoSans",
2885
+ "fontSize": 16,
2886
+ "lineHeight": 0,
2887
+ "minHeight": 0,
2888
+ "paddingBottom": 12,
2889
+ "paddingLeft": 16,
2890
+ "paddingRight": 16,
2891
+ "paddingTop": 12,
2892
+ },
2893
+ ]
2894
+ }
2895
+ textContentType="password"
2896
+ underlineColorAndroid="transparent"
2897
+ />
2898
+ </View>
2899
+ </View>
2900
+ <View
2901
+ style={
2902
+ Array [
2903
+ Object {
2904
+ "paddingBottom": 20,
2905
+ "paddingLeft": 0,
2906
+ "paddingRight": 0,
2907
+ "paddingTop": 10,
2908
+ },
2909
+ ]
2910
+ }
2911
+ >
2912
+ <View
2913
+ style={
2914
+ Array [
2915
+ Object {
2916
+ "marginBottom": 10,
2917
+ },
2918
+ ]
2919
+ }
2920
+ >
2921
+ <Text
2922
+ aria-level="4"
2923
+ color="black"
2924
+ isHeader={true}
2925
+ medium="header5"
2926
+ numberOfLines={1}
2927
+ style={
2928
+ Array [
2929
+ Object {
2930
+ "color": "#000000",
2931
+ "fontFamily": "Moderat-Extended-Bold",
2932
+ "fontSize": 18,
2933
+ "fontStyle": "normal",
2934
+ "fontWeight": "400",
2935
+ "lineHeight": 23,
2936
+ "textDecorationColor": "#000000",
2937
+ },
2938
+ ]
2939
+ }
2940
+ type="header4"
2941
+ variant="bold"
2942
+ >
2943
+ Disabled Filled
2944
+ </Text>
2945
+ </View>
2946
+ <View
2947
+ style={
2948
+ Array [
2949
+ Object {
2950
+ "marginBottom": 4,
2951
+ "marginTop": 2,
2952
+ },
2953
+ ]
2954
+ }
2955
+ >
2956
+ <TextInput
2957
+ allowFontScaling={true}
2958
+ autoCompleteType="password"
2959
+ autoCorrect={false}
2960
+ editable={false}
2961
+ keyboardType="default"
2962
+ minHeight={0}
2963
+ onBlur={[Function]}
2964
+ onChange={[MockFunction]}
2965
+ onFocus={[Function]}
2966
+ placeholder="Placeholder"
2967
+ placeholderTextColor="#737373"
2968
+ rejectResponderTermination={true}
2969
+ secureTextEntry={true}
2970
+ selectionColor="#4C34E0"
2971
+ state="disabled"
2972
+ style={
2973
+ Array [
2974
+ Object {
2975
+ "backgroundColor": "#F2F2F2",
2976
+ "borderColor": "#E5E5E5",
2977
+ "borderRadius": 10,
2978
+ "borderWidth": 2,
2979
+ "color": "#737373",
2980
+ "fontFamily": "NotoSans",
2981
+ "fontSize": 16,
2982
+ "lineHeight": 0,
2983
+ "minHeight": 0,
2984
+ "paddingBottom": 12,
2985
+ "paddingLeft": 16,
2986
+ "paddingRight": 16,
2987
+ "paddingTop": 12,
2988
+ },
2989
+ ]
2990
+ }
2991
+ textContentType="password"
2992
+ underlineColorAndroid="transparent"
2993
+ value="The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who uses a technologically advanced, artificially intelligent automobile."
2994
+ />
2995
+ </View>
2996
+ </View>
2997
+ </View>
2998
+ </View>
2999
+ <View
3000
+ style={
3001
+ Array [
3002
+ Object {
3003
+ "marginBottom": 30,
3004
+ },
3005
+ ]
3006
+ }
3007
+ >
3008
+ <View
3009
+ style={
3010
+ Array [
3011
+ Object {
3012
+ "marginBottom": 30,
3013
+ },
3014
+ ]
3015
+ }
3016
+ >
3017
+ <Text
3018
+ aria-level="2"
3019
+ color="black"
3020
+ isHeader={true}
3021
+ style={
3022
+ Array [
3023
+ Object {
3024
+ "color": "#000000",
3025
+ "fontFamily": "Moderat-Extended-Bold",
3026
+ "fontSize": 32,
3027
+ "fontStyle": "normal",
3028
+ "fontWeight": "400",
3029
+ "lineHeight": 42,
3030
+ "textDecorationColor": "#000000",
3031
+ },
3032
+ ]
3033
+ }
3034
+ type="header2"
3035
+ variant="bold"
3036
+ >
3037
+ Email
3038
+ </Text>
3039
+ </View>
3040
+ <View
3041
+ style={
3042
+ Array [
3043
+ Object {
3044
+ "flexDirection": "column",
3045
+ "marginBottom": 0,
3046
+ "marginLeft": 0,
3047
+ "marginRight": 0,
3048
+ "marginTop": 0,
3049
+ },
3050
+ ]
3051
+ }
3052
+ >
3053
+ <View
3054
+ style={
3055
+ Array [
3056
+ Object {
3057
+ "paddingBottom": 20,
3058
+ "paddingLeft": 0,
3059
+ "paddingRight": 0,
3060
+ "paddingTop": 10,
3061
+ },
3062
+ ]
3063
+ }
3064
+ >
3065
+ <View
3066
+ style={
3067
+ Array [
3068
+ Object {
3069
+ "marginBottom": 10,
3070
+ },
3071
+ ]
3072
+ }
3073
+ >
3074
+ <Text
3075
+ aria-level="4"
3076
+ color="black"
3077
+ isHeader={true}
3078
+ medium="header5"
3079
+ numberOfLines={1}
3080
+ style={
3081
+ Array [
3082
+ Object {
3083
+ "color": "#000000",
3084
+ "fontFamily": "Moderat-Extended-Bold",
3085
+ "fontSize": 18,
3086
+ "fontStyle": "normal",
3087
+ "fontWeight": "400",
3088
+ "lineHeight": 23,
3089
+ "textDecorationColor": "#000000",
3090
+ },
3091
+ ]
3092
+ }
3093
+ type="header4"
3094
+ variant="bold"
3095
+ >
3096
+ Empty
3097
+ </Text>
3098
+ </View>
3099
+ <View
3100
+ style={
3101
+ Array [
3102
+ Object {
3103
+ "marginBottom": 4,
3104
+ "marginTop": 2,
3105
+ },
3106
+ ]
3107
+ }
3108
+ >
3109
+ <TextInput
3110
+ allowFontScaling={true}
3111
+ autoCompleteType="email"
3112
+ autoCorrect={false}
3113
+ editable={true}
3114
+ keyboardType="email-address"
3115
+ minHeight={0}
3116
+ onBlur={[Function]}
3117
+ onChange={[MockFunction]}
3118
+ onFocus={[Function]}
3119
+ placeholder="Placeholder"
3120
+ placeholderTextColor="#737373"
3121
+ rejectResponderTermination={true}
3122
+ secureTextEntry={false}
3123
+ selectionColor="#4C34E0"
3124
+ state="default"
3125
+ style={
3126
+ Array [
3127
+ Object {
3128
+ "backgroundColor": "#FFFFFF",
3129
+ "borderColor": "#E5E5E5",
3130
+ "borderRadius": 10,
3131
+ "borderWidth": 2,
3132
+ "color": "#000000",
3133
+ "fontFamily": "NotoSans",
3134
+ "fontSize": 16,
3135
+ "lineHeight": 0,
3136
+ "minHeight": 0,
3137
+ "paddingBottom": 12,
3138
+ "paddingLeft": 16,
3139
+ "paddingRight": 16,
3140
+ "paddingTop": 12,
3141
+ },
3142
+ ]
3143
+ }
3144
+ textContentType="emailAddress"
3145
+ underlineColorAndroid="transparent"
3146
+ />
3147
+ </View>
3148
+ </View>
3149
+ <View
3150
+ style={
3151
+ Array [
3152
+ Object {
3153
+ "paddingBottom": 20,
3154
+ "paddingLeft": 0,
3155
+ "paddingRight": 0,
3156
+ "paddingTop": 10,
3157
+ },
3158
+ ]
3159
+ }
3160
+ >
3161
+ <View
3162
+ style={
3163
+ Array [
3164
+ Object {
3165
+ "marginBottom": 10,
3166
+ },
3167
+ ]
3168
+ }
3169
+ >
3170
+ <Text
3171
+ aria-level="4"
3172
+ color="black"
3173
+ isHeader={true}
3174
+ medium="header5"
3175
+ numberOfLines={1}
3176
+ style={
3177
+ Array [
3178
+ Object {
3179
+ "color": "#000000",
3180
+ "fontFamily": "Moderat-Extended-Bold",
3181
+ "fontSize": 18,
3182
+ "fontStyle": "normal",
3183
+ "fontWeight": "400",
3184
+ "lineHeight": 23,
3185
+ "textDecorationColor": "#000000",
3186
+ },
3187
+ ]
3188
+ }
3189
+ type="header4"
3190
+ variant="bold"
3191
+ >
3192
+ Filled
3193
+ </Text>
3194
+ </View>
3195
+ <View
3196
+ style={
3197
+ Array [
3198
+ Object {
3199
+ "marginBottom": 4,
3200
+ "marginTop": 2,
3201
+ },
3202
+ ]
3203
+ }
3204
+ >
3205
+ <TextInput
3206
+ allowFontScaling={true}
3207
+ autoCompleteType="email"
3208
+ autoCorrect={false}
3209
+ editable={true}
3210
+ keyboardType="email-address"
3211
+ minHeight={0}
3212
+ onBlur={[Function]}
3213
+ onChange={[MockFunction]}
3214
+ onFocus={[Function]}
3215
+ placeholder="Placeholder"
3216
+ placeholderTextColor="#737373"
3217
+ rejectResponderTermination={true}
3218
+ secureTextEntry={false}
3219
+ selectionColor="#4C34E0"
3220
+ state="default"
3221
+ style={
3222
+ Array [
3223
+ Object {
3224
+ "backgroundColor": "#FFFFFF",
3225
+ "borderColor": "#E5E5E5",
3226
+ "borderRadius": 10,
3227
+ "borderWidth": 2,
3228
+ "color": "#000000",
3229
+ "fontFamily": "NotoSans",
3230
+ "fontSize": 16,
3231
+ "lineHeight": 0,
3232
+ "minHeight": 0,
3233
+ "paddingBottom": 12,
3234
+ "paddingLeft": 16,
3235
+ "paddingRight": 16,
3236
+ "paddingTop": 12,
3237
+ },
3238
+ ]
3239
+ }
3240
+ textContentType="emailAddress"
3241
+ underlineColorAndroid="transparent"
3242
+ value="The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who uses a technologically advanced, artificially intelligent automobile."
3243
+ />
3244
+ </View>
3245
+ </View>
3246
+ <View
3247
+ style={
3248
+ Array [
3249
+ Object {
3250
+ "paddingBottom": 20,
3251
+ "paddingLeft": 0,
3252
+ "paddingRight": 0,
3253
+ "paddingTop": 10,
3254
+ },
3255
+ ]
3256
+ }
3257
+ >
3258
+ <View
3259
+ style={
3260
+ Array [
3261
+ Object {
3262
+ "marginBottom": 10,
3263
+ },
3264
+ ]
3265
+ }
3266
+ >
3267
+ <Text
3268
+ aria-level="4"
3269
+ color="black"
3270
+ isHeader={true}
3271
+ medium="header5"
3272
+ numberOfLines={1}
3273
+ style={
3274
+ Array [
3275
+ Object {
3276
+ "color": "#000000",
3277
+ "fontFamily": "Moderat-Extended-Bold",
3278
+ "fontSize": 18,
3279
+ "fontStyle": "normal",
3280
+ "fontWeight": "400",
3281
+ "lineHeight": 23,
3282
+ "textDecorationColor": "#000000",
3283
+ },
3284
+ ]
3285
+ }
3286
+ type="header4"
3287
+ variant="bold"
3288
+ >
3289
+ Hover
3290
+ </Text>
3291
+ </View>
3292
+ <View
3293
+ style={
3294
+ Array [
3295
+ Object {
3296
+ "marginBottom": 4,
3297
+ "marginTop": 2,
3298
+ },
3299
+ ]
3300
+ }
3301
+ >
3302
+ <TextInput
3303
+ allowFontScaling={true}
3304
+ autoCompleteType="email"
3305
+ autoCorrect={false}
3306
+ editable={true}
3307
+ keyboardType="email-address"
3308
+ minHeight={0}
3309
+ onBlur={[Function]}
3310
+ onChange={[MockFunction]}
3311
+ onFocus={[Function]}
3312
+ placeholder="Placeholder"
3313
+ placeholderTextColor="#737373"
3314
+ rejectResponderTermination={true}
3315
+ secureTextEntry={false}
3316
+ selectionColor="#4C34E0"
3317
+ state="hover"
3318
+ style={
3319
+ Array [
3320
+ Object {
3321
+ "backgroundColor": "#FFFFFF",
3322
+ "borderColor": "#CCCCCC",
3323
+ "borderRadius": 10,
3324
+ "borderWidth": 2,
3325
+ "color": "#000000",
3326
+ "fontFamily": "NotoSans",
3327
+ "fontSize": 16,
3328
+ "lineHeight": 0,
3329
+ "minHeight": 0,
3330
+ "paddingBottom": 12,
3331
+ "paddingLeft": 16,
3332
+ "paddingRight": 16,
3333
+ "paddingTop": 12,
3334
+ },
3335
+ ]
3336
+ }
3337
+ textContentType="emailAddress"
3338
+ underlineColorAndroid="transparent"
3339
+ value="The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who uses a technologically advanced, artificially intelligent automobile."
3340
+ />
3341
+ </View>
3342
+ </View>
3343
+ <View
3344
+ style={
3345
+ Array [
3346
+ Object {
3347
+ "paddingBottom": 20,
3348
+ "paddingLeft": 0,
3349
+ "paddingRight": 0,
3350
+ "paddingTop": 10,
3351
+ },
3352
+ ]
3353
+ }
3354
+ >
3355
+ <View
3356
+ style={
3357
+ Array [
3358
+ Object {
3359
+ "marginBottom": 10,
3360
+ },
3361
+ ]
3362
+ }
3363
+ >
3364
+ <Text
3365
+ aria-level="4"
3366
+ color="black"
3367
+ isHeader={true}
3368
+ medium="header5"
3369
+ numberOfLines={1}
3370
+ style={
3371
+ Array [
3372
+ Object {
3373
+ "color": "#000000",
3374
+ "fontFamily": "Moderat-Extended-Bold",
3375
+ "fontSize": 18,
3376
+ "fontStyle": "normal",
3377
+ "fontWeight": "400",
3378
+ "lineHeight": 23,
3379
+ "textDecorationColor": "#000000",
3380
+ },
3381
+ ]
3382
+ }
3383
+ type="header4"
3384
+ variant="bold"
3385
+ >
3386
+ Focus
3387
+ </Text>
3388
+ </View>
3389
+ <View
3390
+ style={
3391
+ Array [
3392
+ Object {
3393
+ "marginBottom": 4,
3394
+ "marginTop": 2,
3395
+ },
3396
+ ]
3397
+ }
3398
+ >
3399
+ <TextInput
3400
+ allowFontScaling={true}
3401
+ autoCompleteType="email"
3402
+ autoCorrect={false}
3403
+ editable={true}
3404
+ keyboardType="email-address"
3405
+ minHeight={0}
3406
+ onBlur={[Function]}
3407
+ onChange={[MockFunction]}
3408
+ onFocus={[Function]}
3409
+ placeholder="Placeholder"
3410
+ placeholderTextColor="#737373"
3411
+ rejectResponderTermination={true}
3412
+ secureTextEntry={false}
3413
+ selectionColor="#4C34E0"
3414
+ state="focus"
3415
+ style={
3416
+ Array [
3417
+ Object {
3418
+ "backgroundColor": "#FFFFFF",
3419
+ "borderColor": "#4C34E0",
3420
+ "borderRadius": 10,
3421
+ "borderWidth": 2,
3422
+ "color": "#000000",
3423
+ "fontFamily": "NotoSans",
3424
+ "fontSize": 16,
3425
+ "lineHeight": 0,
3426
+ "minHeight": 0,
3427
+ "paddingBottom": 12,
3428
+ "paddingLeft": 16,
3429
+ "paddingRight": 16,
3430
+ "paddingTop": 12,
3431
+ },
3432
+ ]
3433
+ }
3434
+ textContentType="emailAddress"
3435
+ underlineColorAndroid="transparent"
3436
+ value="The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who uses a technologically advanced, artificially intelligent automobile."
3437
+ />
3438
+ </View>
3439
+ </View>
3440
+ <View
3441
+ style={
3442
+ Array [
3443
+ Object {
3444
+ "paddingBottom": 20,
3445
+ "paddingLeft": 0,
3446
+ "paddingRight": 0,
3447
+ "paddingTop": 10,
3448
+ },
3449
+ ]
3450
+ }
3451
+ >
3452
+ <View
3453
+ style={
3454
+ Array [
3455
+ Object {
3456
+ "marginBottom": 10,
3457
+ },
3458
+ ]
3459
+ }
3460
+ >
3461
+ <Text
3462
+ aria-level="4"
3463
+ color="black"
3464
+ isHeader={true}
3465
+ medium="header5"
3466
+ numberOfLines={1}
3467
+ style={
3468
+ Array [
3469
+ Object {
3470
+ "color": "#000000",
3471
+ "fontFamily": "Moderat-Extended-Bold",
3472
+ "fontSize": 18,
3473
+ "fontStyle": "normal",
3474
+ "fontWeight": "400",
3475
+ "lineHeight": 23,
3476
+ "textDecorationColor": "#000000",
3477
+ },
3478
+ ]
3479
+ }
3480
+ type="header4"
3481
+ variant="bold"
3482
+ >
3483
+ Disabled
3484
+ </Text>
3485
+ </View>
3486
+ <View
3487
+ style={
3488
+ Array [
3489
+ Object {
3490
+ "marginBottom": 4,
3491
+ "marginTop": 2,
3492
+ },
3493
+ ]
3494
+ }
3495
+ >
3496
+ <TextInput
3497
+ allowFontScaling={true}
3498
+ autoCompleteType="email"
3499
+ autoCorrect={false}
3500
+ editable={false}
3501
+ keyboardType="email-address"
3502
+ minHeight={0}
3503
+ onBlur={[Function]}
3504
+ onChange={[MockFunction]}
3505
+ onFocus={[Function]}
3506
+ placeholder="Placeholder"
3507
+ placeholderTextColor="#737373"
3508
+ rejectResponderTermination={true}
3509
+ secureTextEntry={false}
3510
+ selectionColor="#4C34E0"
3511
+ state="disabled"
3512
+ style={
3513
+ Array [
3514
+ Object {
3515
+ "backgroundColor": "#F2F2F2",
3516
+ "borderColor": "#E5E5E5",
3517
+ "borderRadius": 10,
3518
+ "borderWidth": 2,
3519
+ "color": "#737373",
3520
+ "fontFamily": "NotoSans",
3521
+ "fontSize": 16,
3522
+ "lineHeight": 0,
3523
+ "minHeight": 0,
3524
+ "paddingBottom": 12,
3525
+ "paddingLeft": 16,
3526
+ "paddingRight": 16,
3527
+ "paddingTop": 12,
3528
+ },
3529
+ ]
3530
+ }
3531
+ textContentType="emailAddress"
3532
+ underlineColorAndroid="transparent"
3533
+ />
3534
+ </View>
3535
+ </View>
3536
+ <View
3537
+ style={
3538
+ Array [
3539
+ Object {
3540
+ "paddingBottom": 20,
3541
+ "paddingLeft": 0,
3542
+ "paddingRight": 0,
3543
+ "paddingTop": 10,
3544
+ },
3545
+ ]
3546
+ }
3547
+ >
3548
+ <View
3549
+ style={
3550
+ Array [
3551
+ Object {
3552
+ "marginBottom": 10,
3553
+ },
3554
+ ]
3555
+ }
3556
+ >
3557
+ <Text
3558
+ aria-level="4"
3559
+ color="black"
3560
+ isHeader={true}
3561
+ medium="header5"
3562
+ numberOfLines={1}
3563
+ style={
3564
+ Array [
3565
+ Object {
3566
+ "color": "#000000",
3567
+ "fontFamily": "Moderat-Extended-Bold",
3568
+ "fontSize": 18,
3569
+ "fontStyle": "normal",
3570
+ "fontWeight": "400",
3571
+ "lineHeight": 23,
3572
+ "textDecorationColor": "#000000",
3573
+ },
3574
+ ]
3575
+ }
3576
+ type="header4"
3577
+ variant="bold"
3578
+ >
3579
+ Disabled Filled
3580
+ </Text>
3581
+ </View>
3582
+ <View
3583
+ style={
3584
+ Array [
3585
+ Object {
3586
+ "marginBottom": 4,
3587
+ "marginTop": 2,
3588
+ },
3589
+ ]
3590
+ }
3591
+ >
3592
+ <TextInput
3593
+ allowFontScaling={true}
3594
+ autoCompleteType="email"
3595
+ autoCorrect={false}
3596
+ editable={false}
3597
+ keyboardType="email-address"
3598
+ minHeight={0}
3599
+ onBlur={[Function]}
3600
+ onChange={[MockFunction]}
3601
+ onFocus={[Function]}
3602
+ placeholder="Placeholder"
3603
+ placeholderTextColor="#737373"
3604
+ rejectResponderTermination={true}
3605
+ secureTextEntry={false}
3606
+ selectionColor="#4C34E0"
3607
+ state="disabled"
3608
+ style={
3609
+ Array [
3610
+ Object {
3611
+ "backgroundColor": "#F2F2F2",
3612
+ "borderColor": "#E5E5E5",
3613
+ "borderRadius": 10,
3614
+ "borderWidth": 2,
3615
+ "color": "#737373",
3616
+ "fontFamily": "NotoSans",
3617
+ "fontSize": 16,
3618
+ "lineHeight": 0,
3619
+ "minHeight": 0,
3620
+ "paddingBottom": 12,
3621
+ "paddingLeft": 16,
3622
+ "paddingRight": 16,
3623
+ "paddingTop": 12,
3624
+ },
3625
+ ]
3626
+ }
3627
+ textContentType="emailAddress"
3628
+ underlineColorAndroid="transparent"
3629
+ value="The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who uses a technologically advanced, artificially intelligent automobile."
3630
+ />
3631
+ </View>
3632
+ </View>
3633
+ </View>
3634
+ </View>
3635
+ <View
3636
+ style={
3637
+ Array [
3638
+ Object {
3639
+ "marginBottom": 30,
3640
+ },
3641
+ ]
3642
+ }
3643
+ >
3644
+ <View
3645
+ style={
3646
+ Array [
3647
+ Object {
3648
+ "marginBottom": 30,
3649
+ },
3650
+ ]
3651
+ }
3652
+ >
3653
+ <Text
3654
+ aria-level="2"
3655
+ color="black"
3656
+ isHeader={true}
3657
+ style={
3658
+ Array [
3659
+ Object {
3660
+ "color": "#000000",
3661
+ "fontFamily": "Moderat-Extended-Bold",
3662
+ "fontSize": 32,
3663
+ "fontStyle": "normal",
3664
+ "fontWeight": "400",
3665
+ "lineHeight": 42,
3666
+ "textDecorationColor": "#000000",
3667
+ },
3668
+ ]
3669
+ }
3670
+ type="header2"
3671
+ variant="bold"
3672
+ >
3673
+ Username
3674
+ </Text>
3675
+ </View>
3676
+ <View
3677
+ style={
3678
+ Array [
3679
+ Object {
3680
+ "flexDirection": "column",
3681
+ "marginBottom": 0,
3682
+ "marginLeft": 0,
3683
+ "marginRight": 0,
3684
+ "marginTop": 0,
3685
+ },
3686
+ ]
3687
+ }
3688
+ >
3689
+ <View
3690
+ style={
3691
+ Array [
3692
+ Object {
3693
+ "paddingBottom": 20,
3694
+ "paddingLeft": 0,
3695
+ "paddingRight": 0,
3696
+ "paddingTop": 10,
3697
+ },
3698
+ ]
3699
+ }
3700
+ >
3701
+ <View
3702
+ style={
3703
+ Array [
3704
+ Object {
3705
+ "marginBottom": 10,
3706
+ },
3707
+ ]
3708
+ }
3709
+ >
3710
+ <Text
3711
+ aria-level="4"
3712
+ color="black"
3713
+ isHeader={true}
3714
+ medium="header5"
3715
+ numberOfLines={1}
3716
+ style={
3717
+ Array [
3718
+ Object {
3719
+ "color": "#000000",
3720
+ "fontFamily": "Moderat-Extended-Bold",
3721
+ "fontSize": 18,
3722
+ "fontStyle": "normal",
3723
+ "fontWeight": "400",
3724
+ "lineHeight": 23,
3725
+ "textDecorationColor": "#000000",
3726
+ },
3727
+ ]
3728
+ }
3729
+ type="header4"
3730
+ variant="bold"
3731
+ >
3732
+ Empty
3733
+ </Text>
3734
+ </View>
3735
+ <View
3736
+ style={
3737
+ Array [
3738
+ Object {
3739
+ "marginBottom": 4,
3740
+ "marginTop": 2,
3741
+ },
3742
+ ]
3743
+ }
3744
+ >
3745
+ <TextInput
3746
+ allowFontScaling={true}
3747
+ autoCompleteType="name"
3748
+ autoCorrect={false}
3749
+ editable={true}
3750
+ keyboardType="default"
3751
+ minHeight={0}
3752
+ onBlur={[Function]}
3753
+ onChange={[MockFunction]}
3754
+ onFocus={[Function]}
3755
+ placeholder="Placeholder"
3756
+ placeholderTextColor="#737373"
3757
+ rejectResponderTermination={true}
3758
+ secureTextEntry={false}
3759
+ selectionColor="#4C34E0"
3760
+ state="default"
3761
+ style={
3762
+ Array [
3763
+ Object {
3764
+ "backgroundColor": "#FFFFFF",
3765
+ "borderColor": "#E5E5E5",
3766
+ "borderRadius": 10,
3767
+ "borderWidth": 2,
3768
+ "color": "#000000",
3769
+ "fontFamily": "NotoSans",
3770
+ "fontSize": 16,
3771
+ "lineHeight": 0,
3772
+ "minHeight": 0,
3773
+ "paddingBottom": 12,
3774
+ "paddingLeft": 16,
3775
+ "paddingRight": 16,
3776
+ "paddingTop": 12,
3777
+ },
3778
+ ]
3779
+ }
3780
+ textContentType="username"
3781
+ underlineColorAndroid="transparent"
3782
+ />
3783
+ </View>
3784
+ </View>
3785
+ <View
3786
+ style={
3787
+ Array [
3788
+ Object {
3789
+ "paddingBottom": 20,
3790
+ "paddingLeft": 0,
3791
+ "paddingRight": 0,
3792
+ "paddingTop": 10,
3793
+ },
3794
+ ]
3795
+ }
3796
+ >
3797
+ <View
3798
+ style={
3799
+ Array [
3800
+ Object {
3801
+ "marginBottom": 10,
3802
+ },
3803
+ ]
3804
+ }
3805
+ >
3806
+ <Text
3807
+ aria-level="4"
3808
+ color="black"
3809
+ isHeader={true}
3810
+ medium="header5"
3811
+ numberOfLines={1}
3812
+ style={
3813
+ Array [
3814
+ Object {
3815
+ "color": "#000000",
3816
+ "fontFamily": "Moderat-Extended-Bold",
3817
+ "fontSize": 18,
3818
+ "fontStyle": "normal",
3819
+ "fontWeight": "400",
3820
+ "lineHeight": 23,
3821
+ "textDecorationColor": "#000000",
3822
+ },
3823
+ ]
3824
+ }
3825
+ type="header4"
3826
+ variant="bold"
3827
+ >
3828
+ Filled
3829
+ </Text>
3830
+ </View>
3831
+ <View
3832
+ style={
3833
+ Array [
3834
+ Object {
3835
+ "marginBottom": 4,
3836
+ "marginTop": 2,
3837
+ },
3838
+ ]
3839
+ }
3840
+ >
3841
+ <TextInput
3842
+ allowFontScaling={true}
3843
+ autoCompleteType="name"
3844
+ autoCorrect={false}
3845
+ editable={true}
3846
+ keyboardType="default"
3847
+ minHeight={0}
3848
+ onBlur={[Function]}
3849
+ onChange={[MockFunction]}
3850
+ onFocus={[Function]}
3851
+ placeholder="Placeholder"
3852
+ placeholderTextColor="#737373"
3853
+ rejectResponderTermination={true}
3854
+ secureTextEntry={false}
3855
+ selectionColor="#4C34E0"
3856
+ state="default"
3857
+ style={
3858
+ Array [
3859
+ Object {
3860
+ "backgroundColor": "#FFFFFF",
3861
+ "borderColor": "#E5E5E5",
3862
+ "borderRadius": 10,
3863
+ "borderWidth": 2,
3864
+ "color": "#000000",
3865
+ "fontFamily": "NotoSans",
3866
+ "fontSize": 16,
3867
+ "lineHeight": 0,
3868
+ "minHeight": 0,
3869
+ "paddingBottom": 12,
3870
+ "paddingLeft": 16,
3871
+ "paddingRight": 16,
3872
+ "paddingTop": 12,
3873
+ },
3874
+ ]
3875
+ }
3876
+ textContentType="username"
3877
+ underlineColorAndroid="transparent"
3878
+ value="The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who uses a technologically advanced, artificially intelligent automobile."
3879
+ />
3880
+ </View>
3881
+ </View>
3882
+ <View
3883
+ style={
3884
+ Array [
3885
+ Object {
3886
+ "paddingBottom": 20,
3887
+ "paddingLeft": 0,
3888
+ "paddingRight": 0,
3889
+ "paddingTop": 10,
3890
+ },
3891
+ ]
3892
+ }
3893
+ >
3894
+ <View
3895
+ style={
3896
+ Array [
3897
+ Object {
3898
+ "marginBottom": 10,
3899
+ },
3900
+ ]
3901
+ }
3902
+ >
3903
+ <Text
3904
+ aria-level="4"
3905
+ color="black"
3906
+ isHeader={true}
3907
+ medium="header5"
3908
+ numberOfLines={1}
3909
+ style={
3910
+ Array [
3911
+ Object {
3912
+ "color": "#000000",
3913
+ "fontFamily": "Moderat-Extended-Bold",
3914
+ "fontSize": 18,
3915
+ "fontStyle": "normal",
3916
+ "fontWeight": "400",
3917
+ "lineHeight": 23,
3918
+ "textDecorationColor": "#000000",
3919
+ },
3920
+ ]
3921
+ }
3922
+ type="header4"
3923
+ variant="bold"
3924
+ >
3925
+ Hover
3926
+ </Text>
3927
+ </View>
3928
+ <View
3929
+ style={
3930
+ Array [
3931
+ Object {
3932
+ "marginBottom": 4,
3933
+ "marginTop": 2,
3934
+ },
3935
+ ]
3936
+ }
3937
+ >
3938
+ <TextInput
3939
+ allowFontScaling={true}
3940
+ autoCompleteType="name"
3941
+ autoCorrect={false}
3942
+ editable={true}
3943
+ keyboardType="default"
3944
+ minHeight={0}
3945
+ onBlur={[Function]}
3946
+ onChange={[MockFunction]}
3947
+ onFocus={[Function]}
3948
+ placeholder="Placeholder"
3949
+ placeholderTextColor="#737373"
3950
+ rejectResponderTermination={true}
3951
+ secureTextEntry={false}
3952
+ selectionColor="#4C34E0"
3953
+ state="hover"
3954
+ style={
3955
+ Array [
3956
+ Object {
3957
+ "backgroundColor": "#FFFFFF",
3958
+ "borderColor": "#CCCCCC",
3959
+ "borderRadius": 10,
3960
+ "borderWidth": 2,
3961
+ "color": "#000000",
3962
+ "fontFamily": "NotoSans",
3963
+ "fontSize": 16,
3964
+ "lineHeight": 0,
3965
+ "minHeight": 0,
3966
+ "paddingBottom": 12,
3967
+ "paddingLeft": 16,
3968
+ "paddingRight": 16,
3969
+ "paddingTop": 12,
3970
+ },
3971
+ ]
3972
+ }
3973
+ textContentType="username"
3974
+ underlineColorAndroid="transparent"
3975
+ value="The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who uses a technologically advanced, artificially intelligent automobile."
3976
+ />
3977
+ </View>
3978
+ </View>
3979
+ <View
3980
+ style={
3981
+ Array [
3982
+ Object {
3983
+ "paddingBottom": 20,
3984
+ "paddingLeft": 0,
3985
+ "paddingRight": 0,
3986
+ "paddingTop": 10,
3987
+ },
3988
+ ]
3989
+ }
3990
+ >
3991
+ <View
3992
+ style={
3993
+ Array [
3994
+ Object {
3995
+ "marginBottom": 10,
3996
+ },
3997
+ ]
3998
+ }
3999
+ >
4000
+ <Text
4001
+ aria-level="4"
4002
+ color="black"
4003
+ isHeader={true}
4004
+ medium="header5"
4005
+ numberOfLines={1}
4006
+ style={
4007
+ Array [
4008
+ Object {
4009
+ "color": "#000000",
4010
+ "fontFamily": "Moderat-Extended-Bold",
4011
+ "fontSize": 18,
4012
+ "fontStyle": "normal",
4013
+ "fontWeight": "400",
4014
+ "lineHeight": 23,
4015
+ "textDecorationColor": "#000000",
4016
+ },
4017
+ ]
4018
+ }
4019
+ type="header4"
4020
+ variant="bold"
4021
+ >
4022
+ Focus
4023
+ </Text>
4024
+ </View>
4025
+ <View
4026
+ style={
4027
+ Array [
4028
+ Object {
4029
+ "marginBottom": 4,
4030
+ "marginTop": 2,
4031
+ },
4032
+ ]
4033
+ }
4034
+ >
4035
+ <TextInput
4036
+ allowFontScaling={true}
4037
+ autoCompleteType="name"
4038
+ autoCorrect={false}
4039
+ editable={true}
4040
+ keyboardType="default"
4041
+ minHeight={0}
4042
+ onBlur={[Function]}
4043
+ onChange={[MockFunction]}
4044
+ onFocus={[Function]}
4045
+ placeholder="Placeholder"
4046
+ placeholderTextColor="#737373"
4047
+ rejectResponderTermination={true}
4048
+ secureTextEntry={false}
4049
+ selectionColor="#4C34E0"
4050
+ state="focus"
4051
+ style={
4052
+ Array [
4053
+ Object {
4054
+ "backgroundColor": "#FFFFFF",
4055
+ "borderColor": "#4C34E0",
4056
+ "borderRadius": 10,
4057
+ "borderWidth": 2,
4058
+ "color": "#000000",
4059
+ "fontFamily": "NotoSans",
4060
+ "fontSize": 16,
4061
+ "lineHeight": 0,
4062
+ "minHeight": 0,
4063
+ "paddingBottom": 12,
4064
+ "paddingLeft": 16,
4065
+ "paddingRight": 16,
4066
+ "paddingTop": 12,
4067
+ },
4068
+ ]
4069
+ }
4070
+ textContentType="username"
4071
+ underlineColorAndroid="transparent"
4072
+ value="The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who uses a technologically advanced, artificially intelligent automobile."
4073
+ />
4074
+ </View>
4075
+ </View>
4076
+ <View
4077
+ style={
4078
+ Array [
4079
+ Object {
4080
+ "paddingBottom": 20,
4081
+ "paddingLeft": 0,
4082
+ "paddingRight": 0,
4083
+ "paddingTop": 10,
4084
+ },
4085
+ ]
4086
+ }
4087
+ >
4088
+ <View
4089
+ style={
4090
+ Array [
4091
+ Object {
4092
+ "marginBottom": 10,
4093
+ },
4094
+ ]
4095
+ }
4096
+ >
4097
+ <Text
4098
+ aria-level="4"
4099
+ color="black"
4100
+ isHeader={true}
4101
+ medium="header5"
4102
+ numberOfLines={1}
4103
+ style={
4104
+ Array [
4105
+ Object {
4106
+ "color": "#000000",
4107
+ "fontFamily": "Moderat-Extended-Bold",
4108
+ "fontSize": 18,
4109
+ "fontStyle": "normal",
4110
+ "fontWeight": "400",
4111
+ "lineHeight": 23,
4112
+ "textDecorationColor": "#000000",
4113
+ },
4114
+ ]
4115
+ }
4116
+ type="header4"
4117
+ variant="bold"
4118
+ >
4119
+ Disabled
4120
+ </Text>
4121
+ </View>
4122
+ <View
4123
+ style={
4124
+ Array [
4125
+ Object {
4126
+ "marginBottom": 4,
4127
+ "marginTop": 2,
4128
+ },
4129
+ ]
4130
+ }
4131
+ >
4132
+ <TextInput
4133
+ allowFontScaling={true}
4134
+ autoCompleteType="name"
4135
+ autoCorrect={false}
4136
+ editable={false}
4137
+ keyboardType="default"
4138
+ minHeight={0}
4139
+ onBlur={[Function]}
4140
+ onChange={[MockFunction]}
4141
+ onFocus={[Function]}
4142
+ placeholder="Placeholder"
4143
+ placeholderTextColor="#737373"
4144
+ rejectResponderTermination={true}
4145
+ secureTextEntry={false}
4146
+ selectionColor="#4C34E0"
4147
+ state="disabled"
4148
+ style={
4149
+ Array [
4150
+ Object {
4151
+ "backgroundColor": "#F2F2F2",
4152
+ "borderColor": "#E5E5E5",
4153
+ "borderRadius": 10,
4154
+ "borderWidth": 2,
4155
+ "color": "#737373",
4156
+ "fontFamily": "NotoSans",
4157
+ "fontSize": 16,
4158
+ "lineHeight": 0,
4159
+ "minHeight": 0,
4160
+ "paddingBottom": 12,
4161
+ "paddingLeft": 16,
4162
+ "paddingRight": 16,
4163
+ "paddingTop": 12,
4164
+ },
4165
+ ]
4166
+ }
4167
+ textContentType="username"
4168
+ underlineColorAndroid="transparent"
4169
+ />
4170
+ </View>
4171
+ </View>
4172
+ <View
4173
+ style={
4174
+ Array [
4175
+ Object {
4176
+ "paddingBottom": 20,
4177
+ "paddingLeft": 0,
4178
+ "paddingRight": 0,
4179
+ "paddingTop": 10,
4180
+ },
4181
+ ]
4182
+ }
4183
+ >
4184
+ <View
4185
+ style={
4186
+ Array [
4187
+ Object {
4188
+ "marginBottom": 10,
4189
+ },
4190
+ ]
4191
+ }
4192
+ >
4193
+ <Text
4194
+ aria-level="4"
4195
+ color="black"
4196
+ isHeader={true}
4197
+ medium="header5"
4198
+ numberOfLines={1}
4199
+ style={
4200
+ Array [
4201
+ Object {
4202
+ "color": "#000000",
4203
+ "fontFamily": "Moderat-Extended-Bold",
4204
+ "fontSize": 18,
4205
+ "fontStyle": "normal",
4206
+ "fontWeight": "400",
4207
+ "lineHeight": 23,
4208
+ "textDecorationColor": "#000000",
4209
+ },
4210
+ ]
4211
+ }
4212
+ type="header4"
4213
+ variant="bold"
4214
+ >
4215
+ Disabled Filled
4216
+ </Text>
4217
+ </View>
4218
+ <View
4219
+ style={
4220
+ Array [
4221
+ Object {
4222
+ "marginBottom": 4,
4223
+ "marginTop": 2,
4224
+ },
4225
+ ]
4226
+ }
4227
+ >
4228
+ <TextInput
4229
+ allowFontScaling={true}
4230
+ autoCompleteType="name"
4231
+ autoCorrect={false}
4232
+ editable={false}
4233
+ keyboardType="default"
4234
+ minHeight={0}
4235
+ onBlur={[Function]}
4236
+ onChange={[MockFunction]}
4237
+ onFocus={[Function]}
4238
+ placeholder="Placeholder"
4239
+ placeholderTextColor="#737373"
4240
+ rejectResponderTermination={true}
4241
+ secureTextEntry={false}
4242
+ selectionColor="#4C34E0"
4243
+ state="disabled"
4244
+ style={
4245
+ Array [
4246
+ Object {
4247
+ "backgroundColor": "#F2F2F2",
4248
+ "borderColor": "#E5E5E5",
4249
+ "borderRadius": 10,
4250
+ "borderWidth": 2,
4251
+ "color": "#737373",
4252
+ "fontFamily": "NotoSans",
4253
+ "fontSize": 16,
4254
+ "lineHeight": 0,
4255
+ "minHeight": 0,
4256
+ "paddingBottom": 12,
4257
+ "paddingLeft": 16,
4258
+ "paddingRight": 16,
4259
+ "paddingTop": 12,
4260
+ },
4261
+ ]
4262
+ }
4263
+ textContentType="username"
4264
+ underlineColorAndroid="transparent"
4265
+ value="The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who uses a technologically advanced, artificially intelligent automobile."
4266
+ />
4267
+ </View>
4268
+ </View>
4269
+ </View>
4270
+ </View>
4271
+ </View>
4272
+ </RCTScrollView>
4273
+ </RNCSafeAreaProvider>
4274
+ `;