@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/Avatar/__snapshots__/Avatar.stories.tsx.snap ADDED
@@ -0,0 +1,1229 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`kitt/Data Display Avatar 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
+ Avatar
58
+ </Text>
59
+ </View>
60
+ <View
61
+ style={
62
+ Array [
63
+ Object {
64
+ "marginBottom": 30,
65
+ },
66
+ ]
67
+ }
68
+ >
69
+ <View
70
+ style={
71
+ Array [
72
+ Object {
73
+ "marginBottom": 30,
74
+ },
75
+ ]
76
+ }
77
+ >
78
+ <Text
79
+ aria-level="2"
80
+ color="black"
81
+ isHeader={true}
82
+ style={
83
+ Array [
84
+ Object {
85
+ "color": "#000000",
86
+ "fontFamily": "Moderat-Extended-Bold",
87
+ "fontSize": 32,
88
+ "fontStyle": "normal",
89
+ "fontWeight": "400",
90
+ "lineHeight": 42,
91
+ "textDecorationColor": "#000000",
92
+ },
93
+ ]
94
+ }
95
+ type="header2"
96
+ variant="bold"
97
+ >
98
+ With Source
99
+ </Text>
100
+ </View>
101
+ <View
102
+ style={
103
+ Array [
104
+ Object {
105
+ "flexDirection": "column",
106
+ "marginBottom": 0,
107
+ "marginLeft": 0,
108
+ "marginRight": 0,
109
+ "marginTop": 0,
110
+ },
111
+ ]
112
+ }
113
+ >
114
+ <View
115
+ style={
116
+ Array [
117
+ Object {
118
+ "paddingBottom": 20,
119
+ "paddingLeft": 0,
120
+ "paddingRight": 0,
121
+ "paddingTop": 10,
122
+ },
123
+ ]
124
+ }
125
+ >
126
+ <View
127
+ style={
128
+ Array [
129
+ Object {
130
+ "marginBottom": 10,
131
+ },
132
+ ]
133
+ }
134
+ >
135
+ <Text
136
+ aria-level="4"
137
+ color="black"
138
+ isHeader={true}
139
+ medium="header5"
140
+ numberOfLines={1}
141
+ style={
142
+ Array [
143
+ Object {
144
+ "color": "#000000",
145
+ "fontFamily": "Moderat-Extended-Bold",
146
+ "fontSize": 18,
147
+ "fontStyle": "normal",
148
+ "fontWeight": "400",
149
+ "lineHeight": 23,
150
+ "textDecorationColor": "#000000",
151
+ },
152
+ ]
153
+ }
154
+ type="header4"
155
+ variant="bold"
156
+ >
157
+ Default
158
+ </Text>
159
+ </View>
160
+ <View
161
+ size={40}
162
+ src="https://assets.staging-fr-onroad.com/avatars/2237155ce2af98ee5fd.jpeg"
163
+ style={
164
+ Array [
165
+ Object {
166
+ "alignItems": "center",
167
+ "backgroundColor": "#4C34E0",
168
+ "borderRadius": 10,
169
+ "height": 40,
170
+ "justifyContent": "center",
171
+ "overflow": "hidden",
172
+ "width": 40,
173
+ },
174
+ ]
175
+ }
176
+ >
177
+ <Image
178
+ source={
179
+ Object {
180
+ "uri": "https://assets.staging-fr-onroad.com/avatars/2237155ce2af98ee5fd.jpeg",
181
+ }
182
+ }
183
+ style={
184
+ Object {
185
+ "height": 40,
186
+ "width": 40,
187
+ }
188
+ }
189
+ />
190
+ </View>
191
+ </View>
192
+ <View
193
+ style={
194
+ Array [
195
+ Object {
196
+ "paddingBottom": 20,
197
+ "paddingLeft": 0,
198
+ "paddingRight": 0,
199
+ "paddingTop": 10,
200
+ },
201
+ ]
202
+ }
203
+ >
204
+ <View
205
+ style={
206
+ Array [
207
+ Object {
208
+ "marginBottom": 10,
209
+ },
210
+ ]
211
+ }
212
+ >
213
+ <Text
214
+ aria-level="4"
215
+ color="black"
216
+ isHeader={true}
217
+ medium="header5"
218
+ numberOfLines={1}
219
+ style={
220
+ Array [
221
+ Object {
222
+ "color": "#000000",
223
+ "fontFamily": "Moderat-Extended-Bold",
224
+ "fontSize": 18,
225
+ "fontStyle": "normal",
226
+ "fontWeight": "400",
227
+ "lineHeight": 23,
228
+ "textDecorationColor": "#000000",
229
+ },
230
+ ]
231
+ }
232
+ type="header4"
233
+ variant="bold"
234
+ >
235
+ Round
236
+ </Text>
237
+ </View>
238
+ <View
239
+ round={true}
240
+ size={40}
241
+ src="https://assets.staging-fr-onroad.com/avatars/2237155ce2af98ee5fd.jpeg"
242
+ style={
243
+ Array [
244
+ Object {
245
+ "alignItems": "center",
246
+ "backgroundColor": "#4C34E0",
247
+ "borderRadius": 20,
248
+ "height": 40,
249
+ "justifyContent": "center",
250
+ "overflow": "hidden",
251
+ "width": 40,
252
+ },
253
+ ]
254
+ }
255
+ >
256
+ <Image
257
+ source={
258
+ Object {
259
+ "uri": "https://assets.staging-fr-onroad.com/avatars/2237155ce2af98ee5fd.jpeg",
260
+ }
261
+ }
262
+ style={
263
+ Object {
264
+ "height": 40,
265
+ "width": 40,
266
+ }
267
+ }
268
+ />
269
+ </View>
270
+ </View>
271
+ <View
272
+ style={
273
+ Array [
274
+ Object {
275
+ "paddingBottom": 20,
276
+ "paddingLeft": 0,
277
+ "paddingRight": 0,
278
+ "paddingTop": 10,
279
+ },
280
+ ]
281
+ }
282
+ >
283
+ <View
284
+ style={
285
+ Array [
286
+ Object {
287
+ "marginBottom": 10,
288
+ },
289
+ ]
290
+ }
291
+ >
292
+ <Text
293
+ aria-level="4"
294
+ color="black"
295
+ isHeader={true}
296
+ medium="header5"
297
+ numberOfLines={1}
298
+ style={
299
+ Array [
300
+ Object {
301
+ "color": "#000000",
302
+ "fontFamily": "Moderat-Extended-Bold",
303
+ "fontSize": 18,
304
+ "fontStyle": "normal",
305
+ "fontWeight": "400",
306
+ "lineHeight": 23,
307
+ "textDecorationColor": "#000000",
308
+ },
309
+ ]
310
+ }
311
+ type="header4"
312
+ variant="bold"
313
+ >
314
+ Light
315
+ </Text>
316
+ </View>
317
+ <View
318
+ light={true}
319
+ size={40}
320
+ src="https://assets.staging-fr-onroad.com/avatars/2237155ce2af98ee5fd.jpeg"
321
+ style={
322
+ Array [
323
+ Object {
324
+ "alignItems": "center",
325
+ "backgroundColor": "#E5E5E5",
326
+ "borderRadius": 10,
327
+ "height": 40,
328
+ "justifyContent": "center",
329
+ "overflow": "hidden",
330
+ "width": 40,
331
+ },
332
+ ]
333
+ }
334
+ >
335
+ <Image
336
+ source={
337
+ Object {
338
+ "uri": "https://assets.staging-fr-onroad.com/avatars/2237155ce2af98ee5fd.jpeg",
339
+ }
340
+ }
341
+ style={
342
+ Object {
343
+ "height": 40,
344
+ "width": 40,
345
+ }
346
+ }
347
+ />
348
+ </View>
349
+ </View>
350
+ <View
351
+ style={
352
+ Array [
353
+ Object {
354
+ "paddingBottom": 20,
355
+ "paddingLeft": 0,
356
+ "paddingRight": 0,
357
+ "paddingTop": 10,
358
+ },
359
+ ]
360
+ }
361
+ >
362
+ <View
363
+ style={
364
+ Array [
365
+ Object {
366
+ "marginBottom": 10,
367
+ },
368
+ ]
369
+ }
370
+ >
371
+ <Text
372
+ aria-level="4"
373
+ color="black"
374
+ isHeader={true}
375
+ medium="header5"
376
+ numberOfLines={1}
377
+ style={
378
+ Array [
379
+ Object {
380
+ "color": "#000000",
381
+ "fontFamily": "Moderat-Extended-Bold",
382
+ "fontSize": 18,
383
+ "fontStyle": "normal",
384
+ "fontWeight": "400",
385
+ "lineHeight": 23,
386
+ "textDecorationColor": "#000000",
387
+ },
388
+ ]
389
+ }
390
+ type="header4"
391
+ variant="bold"
392
+ >
393
+ Small
394
+ </Text>
395
+ </View>
396
+ <View
397
+ size={32}
398
+ src="https://assets.staging-fr-onroad.com/avatars/2237155ce2af98ee5fd.jpeg"
399
+ style={
400
+ Array [
401
+ Object {
402
+ "alignItems": "center",
403
+ "backgroundColor": "#4C34E0",
404
+ "borderRadius": 10,
405
+ "height": 32,
406
+ "justifyContent": "center",
407
+ "overflow": "hidden",
408
+ "width": 32,
409
+ },
410
+ ]
411
+ }
412
+ >
413
+ <Image
414
+ source={
415
+ Object {
416
+ "uri": "https://assets.staging-fr-onroad.com/avatars/2237155ce2af98ee5fd.jpeg",
417
+ }
418
+ }
419
+ style={
420
+ Object {
421
+ "height": 32,
422
+ "width": 32,
423
+ }
424
+ }
425
+ />
426
+ </View>
427
+ </View>
428
+ </View>
429
+ </View>
430
+ <View
431
+ style={
432
+ Array [
433
+ Object {
434
+ "marginBottom": 30,
435
+ },
436
+ ]
437
+ }
438
+ >
439
+ <View
440
+ style={
441
+ Array [
442
+ Object {
443
+ "marginBottom": 30,
444
+ },
445
+ ]
446
+ }
447
+ >
448
+ <Text
449
+ aria-level="2"
450
+ color="black"
451
+ isHeader={true}
452
+ style={
453
+ Array [
454
+ Object {
455
+ "color": "#000000",
456
+ "fontFamily": "Moderat-Extended-Bold",
457
+ "fontSize": 32,
458
+ "fontStyle": "normal",
459
+ "fontWeight": "400",
460
+ "lineHeight": 42,
461
+ "textDecorationColor": "#000000",
462
+ },
463
+ ]
464
+ }
465
+ type="header2"
466
+ variant="bold"
467
+ >
468
+ With Initials
469
+ </Text>
470
+ </View>
471
+ <View
472
+ style={
473
+ Array [
474
+ Object {
475
+ "flexDirection": "column",
476
+ "marginBottom": 0,
477
+ "marginLeft": 0,
478
+ "marginRight": 0,
479
+ "marginTop": 0,
480
+ },
481
+ ]
482
+ }
483
+ >
484
+ <View
485
+ style={
486
+ Array [
487
+ Object {
488
+ "paddingBottom": 20,
489
+ "paddingLeft": 0,
490
+ "paddingRight": 0,
491
+ "paddingTop": 10,
492
+ },
493
+ ]
494
+ }
495
+ >
496
+ <View
497
+ style={
498
+ Array [
499
+ Object {
500
+ "marginBottom": 10,
501
+ },
502
+ ]
503
+ }
504
+ >
505
+ <Text
506
+ aria-level="4"
507
+ color="black"
508
+ isHeader={true}
509
+ medium="header5"
510
+ numberOfLines={1}
511
+ style={
512
+ Array [
513
+ Object {
514
+ "color": "#000000",
515
+ "fontFamily": "Moderat-Extended-Bold",
516
+ "fontSize": 18,
517
+ "fontStyle": "normal",
518
+ "fontWeight": "400",
519
+ "lineHeight": 23,
520
+ "textDecorationColor": "#000000",
521
+ },
522
+ ]
523
+ }
524
+ type="header4"
525
+ variant="bold"
526
+ >
527
+ Default
528
+ </Text>
529
+ </View>
530
+ <View
531
+ firstname="Michael"
532
+ lastname="Knight"
533
+ size={40}
534
+ style={
535
+ Array [
536
+ Object {
537
+ "alignItems": "center",
538
+ "backgroundColor": "#4C34E0",
539
+ "borderRadius": 10,
540
+ "height": 40,
541
+ "justifyContent": "center",
542
+ "overflow": "hidden",
543
+ "width": 40,
544
+ },
545
+ ]
546
+ }
547
+ >
548
+ <Text
549
+ color="white"
550
+ isHeader={false}
551
+ style={
552
+ Array [
553
+ Object {
554
+ "color": "#FFFFFF",
555
+ "fontFamily": "NotoSans-Bold",
556
+ "fontSize": 14,
557
+ "fontStyle": "normal",
558
+ "fontWeight": "700",
559
+ "lineHeight": 22,
560
+ "textDecorationColor": "#FFFFFF",
561
+ },
562
+ ]
563
+ }
564
+ type="body-small"
565
+ variant="bold"
566
+ >
567
+ MK
568
+ </Text>
569
+ </View>
570
+ </View>
571
+ <View
572
+ style={
573
+ Array [
574
+ Object {
575
+ "paddingBottom": 20,
576
+ "paddingLeft": 0,
577
+ "paddingRight": 0,
578
+ "paddingTop": 10,
579
+ },
580
+ ]
581
+ }
582
+ >
583
+ <View
584
+ style={
585
+ Array [
586
+ Object {
587
+ "marginBottom": 10,
588
+ },
589
+ ]
590
+ }
591
+ >
592
+ <Text
593
+ aria-level="4"
594
+ color="black"
595
+ isHeader={true}
596
+ medium="header5"
597
+ numberOfLines={1}
598
+ style={
599
+ Array [
600
+ Object {
601
+ "color": "#000000",
602
+ "fontFamily": "Moderat-Extended-Bold",
603
+ "fontSize": 18,
604
+ "fontStyle": "normal",
605
+ "fontWeight": "400",
606
+ "lineHeight": 23,
607
+ "textDecorationColor": "#000000",
608
+ },
609
+ ]
610
+ }
611
+ type="header4"
612
+ variant="bold"
613
+ >
614
+ Round
615
+ </Text>
616
+ </View>
617
+ <View
618
+ firstname="Michael"
619
+ lastname="Knight"
620
+ round={true}
621
+ size={40}
622
+ style={
623
+ Array [
624
+ Object {
625
+ "alignItems": "center",
626
+ "backgroundColor": "#4C34E0",
627
+ "borderRadius": 20,
628
+ "height": 40,
629
+ "justifyContent": "center",
630
+ "overflow": "hidden",
631
+ "width": 40,
632
+ },
633
+ ]
634
+ }
635
+ >
636
+ <Text
637
+ color="white"
638
+ isHeader={false}
639
+ style={
640
+ Array [
641
+ Object {
642
+ "color": "#FFFFFF",
643
+ "fontFamily": "NotoSans-Bold",
644
+ "fontSize": 14,
645
+ "fontStyle": "normal",
646
+ "fontWeight": "700",
647
+ "lineHeight": 22,
648
+ "textDecorationColor": "#FFFFFF",
649
+ },
650
+ ]
651
+ }
652
+ type="body-small"
653
+ variant="bold"
654
+ >
655
+ MK
656
+ </Text>
657
+ </View>
658
+ </View>
659
+ <View
660
+ style={
661
+ Array [
662
+ Object {
663
+ "paddingBottom": 20,
664
+ "paddingLeft": 0,
665
+ "paddingRight": 0,
666
+ "paddingTop": 10,
667
+ },
668
+ ]
669
+ }
670
+ >
671
+ <View
672
+ style={
673
+ Array [
674
+ Object {
675
+ "marginBottom": 10,
676
+ },
677
+ ]
678
+ }
679
+ >
680
+ <Text
681
+ aria-level="4"
682
+ color="black"
683
+ isHeader={true}
684
+ medium="header5"
685
+ numberOfLines={1}
686
+ style={
687
+ Array [
688
+ Object {
689
+ "color": "#000000",
690
+ "fontFamily": "Moderat-Extended-Bold",
691
+ "fontSize": 18,
692
+ "fontStyle": "normal",
693
+ "fontWeight": "400",
694
+ "lineHeight": 23,
695
+ "textDecorationColor": "#000000",
696
+ },
697
+ ]
698
+ }
699
+ type="header4"
700
+ variant="bold"
701
+ >
702
+ Light
703
+ </Text>
704
+ </View>
705
+ <View
706
+ firstname="Michael"
707
+ lastname="Knight"
708
+ light={true}
709
+ size={40}
710
+ style={
711
+ Array [
712
+ Object {
713
+ "alignItems": "center",
714
+ "backgroundColor": "#E5E5E5",
715
+ "borderRadius": 10,
716
+ "height": 40,
717
+ "justifyContent": "center",
718
+ "overflow": "hidden",
719
+ "width": 40,
720
+ },
721
+ ]
722
+ }
723
+ >
724
+ <Text
725
+ color="black"
726
+ isHeader={false}
727
+ style={
728
+ Array [
729
+ Object {
730
+ "color": "#000000",
731
+ "fontFamily": "NotoSans-Bold",
732
+ "fontSize": 14,
733
+ "fontStyle": "normal",
734
+ "fontWeight": "700",
735
+ "lineHeight": 22,
736
+ "textDecorationColor": "#000000",
737
+ },
738
+ ]
739
+ }
740
+ type="body-small"
741
+ variant="bold"
742
+ >
743
+ MK
744
+ </Text>
745
+ </View>
746
+ </View>
747
+ <View
748
+ style={
749
+ Array [
750
+ Object {
751
+ "paddingBottom": 20,
752
+ "paddingLeft": 0,
753
+ "paddingRight": 0,
754
+ "paddingTop": 10,
755
+ },
756
+ ]
757
+ }
758
+ >
759
+ <View
760
+ style={
761
+ Array [
762
+ Object {
763
+ "marginBottom": 10,
764
+ },
765
+ ]
766
+ }
767
+ >
768
+ <Text
769
+ aria-level="4"
770
+ color="black"
771
+ isHeader={true}
772
+ medium="header5"
773
+ numberOfLines={1}
774
+ style={
775
+ Array [
776
+ Object {
777
+ "color": "#000000",
778
+ "fontFamily": "Moderat-Extended-Bold",
779
+ "fontSize": 18,
780
+ "fontStyle": "normal",
781
+ "fontWeight": "400",
782
+ "lineHeight": 23,
783
+ "textDecorationColor": "#000000",
784
+ },
785
+ ]
786
+ }
787
+ type="header4"
788
+ variant="bold"
789
+ >
790
+ Small
791
+ </Text>
792
+ </View>
793
+ <View
794
+ firstname="Michael"
795
+ lastname="Knight"
796
+ size={32}
797
+ style={
798
+ Array [
799
+ Object {
800
+ "alignItems": "center",
801
+ "backgroundColor": "#4C34E0",
802
+ "borderRadius": 10,
803
+ "height": 32,
804
+ "justifyContent": "center",
805
+ "overflow": "hidden",
806
+ "width": 32,
807
+ },
808
+ ]
809
+ }
810
+ >
811
+ <Text
812
+ color="white"
813
+ isHeader={false}
814
+ style={
815
+ Array [
816
+ Object {
817
+ "color": "#FFFFFF",
818
+ "fontFamily": "NotoSans-Bold",
819
+ "fontSize": 14,
820
+ "fontStyle": "normal",
821
+ "fontWeight": "700",
822
+ "lineHeight": 22,
823
+ "textDecorationColor": "#FFFFFF",
824
+ },
825
+ ]
826
+ }
827
+ type="body-small"
828
+ variant="bold"
829
+ >
830
+ MK
831
+ </Text>
832
+ </View>
833
+ </View>
834
+ </View>
835
+ </View>
836
+ <View
837
+ style={
838
+ Array [
839
+ Object {
840
+ "marginBottom": 30,
841
+ },
842
+ ]
843
+ }
844
+ >
845
+ <View
846
+ style={
847
+ Array [
848
+ Object {
849
+ "marginBottom": 30,
850
+ },
851
+ ]
852
+ }
853
+ >
854
+ <Text
855
+ aria-level="2"
856
+ color="black"
857
+ isHeader={true}
858
+ style={
859
+ Array [
860
+ Object {
861
+ "color": "#000000",
862
+ "fontFamily": "Moderat-Extended-Bold",
863
+ "fontSize": 32,
864
+ "fontStyle": "normal",
865
+ "fontWeight": "400",
866
+ "lineHeight": 42,
867
+ "textDecorationColor": "#000000",
868
+ },
869
+ ]
870
+ }
871
+ type="header2"
872
+ variant="bold"
873
+ >
874
+ Without Name
875
+ </Text>
876
+ </View>
877
+ <View
878
+ style={
879
+ Array [
880
+ Object {
881
+ "flexDirection": "column",
882
+ "marginBottom": 0,
883
+ "marginLeft": 0,
884
+ "marginRight": 0,
885
+ "marginTop": 0,
886
+ },
887
+ ]
888
+ }
889
+ >
890
+ <View
891
+ style={
892
+ Array [
893
+ Object {
894
+ "paddingBottom": 20,
895
+ "paddingLeft": 0,
896
+ "paddingRight": 0,
897
+ "paddingTop": 10,
898
+ },
899
+ ]
900
+ }
901
+ >
902
+ <View
903
+ style={
904
+ Array [
905
+ Object {
906
+ "marginBottom": 10,
907
+ },
908
+ ]
909
+ }
910
+ >
911
+ <Text
912
+ aria-level="4"
913
+ color="black"
914
+ isHeader={true}
915
+ medium="header5"
916
+ numberOfLines={1}
917
+ style={
918
+ Array [
919
+ Object {
920
+ "color": "#000000",
921
+ "fontFamily": "Moderat-Extended-Bold",
922
+ "fontSize": 18,
923
+ "fontStyle": "normal",
924
+ "fontWeight": "400",
925
+ "lineHeight": 23,
926
+ "textDecorationColor": "#000000",
927
+ },
928
+ ]
929
+ }
930
+ type="header4"
931
+ variant="bold"
932
+ >
933
+ Default
934
+ </Text>
935
+ </View>
936
+ <View
937
+ size={40}
938
+ style={
939
+ Array [
940
+ Object {
941
+ "alignItems": "center",
942
+ "backgroundColor": "#4C34E0",
943
+ "borderRadius": 10,
944
+ "height": 40,
945
+ "justifyContent": "center",
946
+ "overflow": "hidden",
947
+ "width": 40,
948
+ },
949
+ ]
950
+ }
951
+ >
952
+ <View
953
+ color="white"
954
+ size={20}
955
+ style={
956
+ Array [
957
+ Object {
958
+ "alignSelf": "auto",
959
+ "color": "white",
960
+ "height": 20,
961
+ "width": 20,
962
+ },
963
+ ]
964
+ }
965
+ >
966
+ <svg
967
+ color="white"
968
+ data-file-name="SvgUserInline"
969
+ />
970
+ </View>
971
+ </View>
972
+ </View>
973
+ <View
974
+ style={
975
+ Array [
976
+ Object {
977
+ "paddingBottom": 20,
978
+ "paddingLeft": 0,
979
+ "paddingRight": 0,
980
+ "paddingTop": 10,
981
+ },
982
+ ]
983
+ }
984
+ >
985
+ <View
986
+ style={
987
+ Array [
988
+ Object {
989
+ "marginBottom": 10,
990
+ },
991
+ ]
992
+ }
993
+ >
994
+ <Text
995
+ aria-level="4"
996
+ color="black"
997
+ isHeader={true}
998
+ medium="header5"
999
+ numberOfLines={1}
1000
+ style={
1001
+ Array [
1002
+ Object {
1003
+ "color": "#000000",
1004
+ "fontFamily": "Moderat-Extended-Bold",
1005
+ "fontSize": 18,
1006
+ "fontStyle": "normal",
1007
+ "fontWeight": "400",
1008
+ "lineHeight": 23,
1009
+ "textDecorationColor": "#000000",
1010
+ },
1011
+ ]
1012
+ }
1013
+ type="header4"
1014
+ variant="bold"
1015
+ >
1016
+ Round
1017
+ </Text>
1018
+ </View>
1019
+ <View
1020
+ round={true}
1021
+ size={40}
1022
+ style={
1023
+ Array [
1024
+ Object {
1025
+ "alignItems": "center",
1026
+ "backgroundColor": "#4C34E0",
1027
+ "borderRadius": 20,
1028
+ "height": 40,
1029
+ "justifyContent": "center",
1030
+ "overflow": "hidden",
1031
+ "width": 40,
1032
+ },
1033
+ ]
1034
+ }
1035
+ >
1036
+ <View
1037
+ color="white"
1038
+ size={20}
1039
+ style={
1040
+ Array [
1041
+ Object {
1042
+ "alignSelf": "auto",
1043
+ "color": "white",
1044
+ "height": 20,
1045
+ "width": 20,
1046
+ },
1047
+ ]
1048
+ }
1049
+ >
1050
+ <svg
1051
+ color="white"
1052
+ data-file-name="SvgUserInline"
1053
+ />
1054
+ </View>
1055
+ </View>
1056
+ </View>
1057
+ <View
1058
+ style={
1059
+ Array [
1060
+ Object {
1061
+ "paddingBottom": 20,
1062
+ "paddingLeft": 0,
1063
+ "paddingRight": 0,
1064
+ "paddingTop": 10,
1065
+ },
1066
+ ]
1067
+ }
1068
+ >
1069
+ <View
1070
+ style={
1071
+ Array [
1072
+ Object {
1073
+ "marginBottom": 10,
1074
+ },
1075
+ ]
1076
+ }
1077
+ >
1078
+ <Text
1079
+ aria-level="4"
1080
+ color="black"
1081
+ isHeader={true}
1082
+ medium="header5"
1083
+ numberOfLines={1}
1084
+ style={
1085
+ Array [
1086
+ Object {
1087
+ "color": "#000000",
1088
+ "fontFamily": "Moderat-Extended-Bold",
1089
+ "fontSize": 18,
1090
+ "fontStyle": "normal",
1091
+ "fontWeight": "400",
1092
+ "lineHeight": 23,
1093
+ "textDecorationColor": "#000000",
1094
+ },
1095
+ ]
1096
+ }
1097
+ type="header4"
1098
+ variant="bold"
1099
+ >
1100
+ Light
1101
+ </Text>
1102
+ </View>
1103
+ <View
1104
+ light={true}
1105
+ size={40}
1106
+ style={
1107
+ Array [
1108
+ Object {
1109
+ "alignItems": "center",
1110
+ "backgroundColor": "#E5E5E5",
1111
+ "borderRadius": 10,
1112
+ "height": 40,
1113
+ "justifyContent": "center",
1114
+ "overflow": "hidden",
1115
+ "width": 40,
1116
+ },
1117
+ ]
1118
+ }
1119
+ >
1120
+ <View
1121
+ color="black"
1122
+ size={20}
1123
+ style={
1124
+ Array [
1125
+ Object {
1126
+ "alignSelf": "auto",
1127
+ "color": "black",
1128
+ "height": 20,
1129
+ "width": 20,
1130
+ },
1131
+ ]
1132
+ }
1133
+ >
1134
+ <svg
1135
+ color="black"
1136
+ data-file-name="SvgUserInline"
1137
+ />
1138
+ </View>
1139
+ </View>
1140
+ </View>
1141
+ <View
1142
+ style={
1143
+ Array [
1144
+ Object {
1145
+ "paddingBottom": 20,
1146
+ "paddingLeft": 0,
1147
+ "paddingRight": 0,
1148
+ "paddingTop": 10,
1149
+ },
1150
+ ]
1151
+ }
1152
+ >
1153
+ <View
1154
+ style={
1155
+ Array [
1156
+ Object {
1157
+ "marginBottom": 10,
1158
+ },
1159
+ ]
1160
+ }
1161
+ >
1162
+ <Text
1163
+ aria-level="4"
1164
+ color="black"
1165
+ isHeader={true}
1166
+ medium="header5"
1167
+ numberOfLines={1}
1168
+ style={
1169
+ Array [
1170
+ Object {
1171
+ "color": "#000000",
1172
+ "fontFamily": "Moderat-Extended-Bold",
1173
+ "fontSize": 18,
1174
+ "fontStyle": "normal",
1175
+ "fontWeight": "400",
1176
+ "lineHeight": 23,
1177
+ "textDecorationColor": "#000000",
1178
+ },
1179
+ ]
1180
+ }
1181
+ type="header4"
1182
+ variant="bold"
1183
+ >
1184
+ Small
1185
+ </Text>
1186
+ </View>
1187
+ <View
1188
+ size={32}
1189
+ style={
1190
+ Array [
1191
+ Object {
1192
+ "alignItems": "center",
1193
+ "backgroundColor": "#4C34E0",
1194
+ "borderRadius": 10,
1195
+ "height": 32,
1196
+ "justifyContent": "center",
1197
+ "overflow": "hidden",
1198
+ "width": 32,
1199
+ },
1200
+ ]
1201
+ }
1202
+ >
1203
+ <View
1204
+ color="white"
1205
+ size={16}
1206
+ style={
1207
+ Array [
1208
+ Object {
1209
+ "alignSelf": "auto",
1210
+ "color": "white",
1211
+ "height": 16,
1212
+ "width": 16,
1213
+ },
1214
+ ]
1215
+ }
1216
+ >
1217
+ <svg
1218
+ color="white"
1219
+ data-file-name="SvgUserInline"
1220
+ />
1221
+ </View>
1222
+ </View>
1223
+ </View>
1224
+ </View>
1225
+ </View>
1226
+ </View>
1227
+ </RCTScrollView>
1228
+ </RNCSafeAreaProvider>
1229
+ `;