@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/Message/__snapshots__/Message.stories.tsx.snap ADDED
@@ -0,0 +1,2776 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`kitt/Feedback Message 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
+ Message
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
+ noRadius={false}
112
+ style={
113
+ Array [
114
+ Object {
115
+ "alignItems": "flex-start",
116
+ "backgroundColor": "#89BDDD",
117
+ "borderRadius": 20,
118
+ "flexDirection": "row",
119
+ "justifyContent": "space-between",
120
+ "paddingBottom": 16,
121
+ "paddingLeft": 16,
122
+ "paddingRight": 16,
123
+ "paddingTop": 16,
124
+ },
125
+ ]
126
+ }
127
+ type="info"
128
+ >
129
+ <View
130
+ style={
131
+ Array [
132
+ Object {
133
+ "marginRight": 16,
134
+ },
135
+ ]
136
+ }
137
+ >
138
+ <View
139
+ color="black"
140
+ size={20}
141
+ style={
142
+ Array [
143
+ Object {
144
+ "alignSelf": "auto",
145
+ "color": "black",
146
+ "height": 20,
147
+ "width": 20,
148
+ },
149
+ ]
150
+ }
151
+ >
152
+ <svg
153
+ color="black"
154
+ data-file-name="SvgInfoInline"
155
+ />
156
+ </View>
157
+ </View>
158
+ <Text
159
+ centeredText={false}
160
+ style={
161
+ Array [
162
+ Object {
163
+ "flexBasis": 0,
164
+ "flexGrow": 1,
165
+ "flexShrink": 1,
166
+ "textAlign": "left",
167
+ },
168
+ ]
169
+ }
170
+ type="info"
171
+ >
172
+ <Text
173
+ color="black"
174
+ isHeader={false}
175
+ style={
176
+ Array [
177
+ Object {
178
+ "color": "#000000",
179
+ "fontFamily": "NotoSans",
180
+ "fontSize": 14,
181
+ "fontStyle": "normal",
182
+ "fontWeight": "400",
183
+ "lineHeight": 22,
184
+ "textDecorationColor": "#000000",
185
+ },
186
+ ]
187
+ }
188
+ type="body-small"
189
+ variant="regular"
190
+ >
191
+ Info message goes here...
192
+ </Text>
193
+ </Text>
194
+ </View>
195
+ </View>
196
+ </View>
197
+ <View
198
+ style={
199
+ Array [
200
+ Object {
201
+ "marginBottom": 30,
202
+ },
203
+ ]
204
+ }
205
+ >
206
+ <View
207
+ style={
208
+ Array [
209
+ Object {
210
+ "marginBottom": 30,
211
+ },
212
+ ]
213
+ }
214
+ >
215
+ <Text
216
+ aria-level="2"
217
+ color="black"
218
+ isHeader={true}
219
+ style={
220
+ Array [
221
+ Object {
222
+ "color": "#000000",
223
+ "fontFamily": "Moderat-Extended-Bold",
224
+ "fontSize": 32,
225
+ "fontStyle": "normal",
226
+ "fontWeight": "400",
227
+ "lineHeight": 42,
228
+ "textDecorationColor": "#000000",
229
+ },
230
+ ]
231
+ }
232
+ type="header2"
233
+ variant="bold"
234
+ >
235
+ Classic
236
+ </Text>
237
+ </View>
238
+ <View
239
+ style={
240
+ Array [
241
+ Object {
242
+ "marginBottom": 20,
243
+ },
244
+ ]
245
+ }
246
+ >
247
+ <View
248
+ style={
249
+ Array [
250
+ Object {
251
+ "marginBottom": 10,
252
+ },
253
+ ]
254
+ }
255
+ >
256
+ <Text
257
+ aria-level="3"
258
+ color="black"
259
+ isHeader={true}
260
+ medium="header4"
261
+ style={
262
+ Array [
263
+ Object {
264
+ "color": "#000000",
265
+ "fontFamily": "Moderat-Extended-Bold",
266
+ "fontSize": 24,
267
+ "fontStyle": "normal",
268
+ "fontWeight": "400",
269
+ "lineHeight": 31,
270
+ "textDecorationColor": "#000000",
271
+ },
272
+ ]
273
+ }
274
+ type="header3"
275
+ variant="bold"
276
+ >
277
+ Info
278
+ </Text>
279
+ </View>
280
+ <View
281
+ noRadius={false}
282
+ style={
283
+ Array [
284
+ Object {
285
+ "alignItems": "flex-start",
286
+ "backgroundColor": "#89BDDD",
287
+ "borderRadius": 20,
288
+ "flexDirection": "row",
289
+ "justifyContent": "space-between",
290
+ "paddingBottom": 16,
291
+ "paddingLeft": 16,
292
+ "paddingRight": 16,
293
+ "paddingTop": 16,
294
+ },
295
+ ]
296
+ }
297
+ type="info"
298
+ >
299
+ <View
300
+ style={
301
+ Array [
302
+ Object {
303
+ "marginRight": 16,
304
+ },
305
+ ]
306
+ }
307
+ >
308
+ <View
309
+ color="black"
310
+ size={20}
311
+ style={
312
+ Array [
313
+ Object {
314
+ "alignSelf": "auto",
315
+ "color": "black",
316
+ "height": 20,
317
+ "width": 20,
318
+ },
319
+ ]
320
+ }
321
+ >
322
+ <svg
323
+ color="black"
324
+ data-file-name="SvgInfoInline"
325
+ />
326
+ </View>
327
+ </View>
328
+ <Text
329
+ centeredText={false}
330
+ style={
331
+ Array [
332
+ Object {
333
+ "flexBasis": 0,
334
+ "flexGrow": 1,
335
+ "flexShrink": 1,
336
+ "textAlign": "left",
337
+ },
338
+ ]
339
+ }
340
+ type="info"
341
+ >
342
+ <Text
343
+ color="black"
344
+ isHeader={false}
345
+ style={
346
+ Array [
347
+ Object {
348
+ "color": "#000000",
349
+ "fontFamily": "NotoSans",
350
+ "fontSize": 14,
351
+ "fontStyle": "normal",
352
+ "fontWeight": "400",
353
+ "lineHeight": 22,
354
+ "textDecorationColor": "#000000",
355
+ },
356
+ ]
357
+ }
358
+ type="body-small"
359
+ variant="regular"
360
+ >
361
+ Info message goes here...
362
+ </Text>
363
+ </Text>
364
+ </View>
365
+ </View>
366
+ <View
367
+ style={
368
+ Array [
369
+ Object {
370
+ "marginBottom": 20,
371
+ },
372
+ ]
373
+ }
374
+ >
375
+ <View
376
+ style={
377
+ Array [
378
+ Object {
379
+ "marginBottom": 10,
380
+ },
381
+ ]
382
+ }
383
+ >
384
+ <Text
385
+ aria-level="3"
386
+ color="black"
387
+ isHeader={true}
388
+ medium="header4"
389
+ style={
390
+ Array [
391
+ Object {
392
+ "color": "#000000",
393
+ "fontFamily": "Moderat-Extended-Bold",
394
+ "fontSize": 24,
395
+ "fontStyle": "normal",
396
+ "fontWeight": "400",
397
+ "lineHeight": 31,
398
+ "textDecorationColor": "#000000",
399
+ },
400
+ ]
401
+ }
402
+ type="header3"
403
+ variant="bold"
404
+ >
405
+ Confirmation
406
+ </Text>
407
+ </View>
408
+ <View
409
+ noRadius={false}
410
+ style={
411
+ Array [
412
+ Object {
413
+ "alignItems": "flex-start",
414
+ "backgroundColor": "#38836D",
415
+ "borderRadius": 20,
416
+ "flexDirection": "row",
417
+ "justifyContent": "space-between",
418
+ "paddingBottom": 16,
419
+ "paddingLeft": 16,
420
+ "paddingRight": 16,
421
+ "paddingTop": 16,
422
+ },
423
+ ]
424
+ }
425
+ type="success"
426
+ >
427
+ <View
428
+ style={
429
+ Array [
430
+ Object {
431
+ "marginRight": 16,
432
+ },
433
+ ]
434
+ }
435
+ >
436
+ <View
437
+ color="white"
438
+ size={20}
439
+ style={
440
+ Array [
441
+ Object {
442
+ "alignSelf": "auto",
443
+ "color": "white",
444
+ "height": 20,
445
+ "width": 20,
446
+ },
447
+ ]
448
+ }
449
+ >
450
+ <svg
451
+ color="white"
452
+ data-file-name="SvgCheckInline"
453
+ />
454
+ </View>
455
+ </View>
456
+ <Text
457
+ centeredText={false}
458
+ style={
459
+ Array [
460
+ Object {
461
+ "flexBasis": 0,
462
+ "flexGrow": 1,
463
+ "flexShrink": 1,
464
+ "textAlign": "left",
465
+ },
466
+ ]
467
+ }
468
+ type="success"
469
+ >
470
+ <Text
471
+ color="white"
472
+ isHeader={false}
473
+ style={
474
+ Array [
475
+ Object {
476
+ "color": "#FFFFFF",
477
+ "fontFamily": "NotoSans",
478
+ "fontSize": 14,
479
+ "fontStyle": "normal",
480
+ "fontWeight": "400",
481
+ "lineHeight": 22,
482
+ "textDecorationColor": "#FFFFFF",
483
+ },
484
+ ]
485
+ }
486
+ type="body-small"
487
+ variant="regular"
488
+ >
489
+ Confirmation message goes here...
490
+ </Text>
491
+ </Text>
492
+ </View>
493
+ </View>
494
+ <View
495
+ style={
496
+ Array [
497
+ Object {
498
+ "marginBottom": 20,
499
+ },
500
+ ]
501
+ }
502
+ >
503
+ <View
504
+ style={
505
+ Array [
506
+ Object {
507
+ "marginBottom": 10,
508
+ },
509
+ ]
510
+ }
511
+ >
512
+ <Text
513
+ aria-level="3"
514
+ color="black"
515
+ isHeader={true}
516
+ medium="header4"
517
+ style={
518
+ Array [
519
+ Object {
520
+ "color": "#000000",
521
+ "fontFamily": "Moderat-Extended-Bold",
522
+ "fontSize": 24,
523
+ "fontStyle": "normal",
524
+ "fontWeight": "400",
525
+ "lineHeight": 31,
526
+ "textDecorationColor": "#000000",
527
+ },
528
+ ]
529
+ }
530
+ type="header3"
531
+ variant="bold"
532
+ >
533
+ Warning
534
+ </Text>
535
+ </View>
536
+ <View
537
+ noRadius={false}
538
+ style={
539
+ Array [
540
+ Object {
541
+ "alignItems": "flex-start",
542
+ "backgroundColor": "#F8C583",
543
+ "borderRadius": 20,
544
+ "flexDirection": "row",
545
+ "justifyContent": "space-between",
546
+ "paddingBottom": 16,
547
+ "paddingLeft": 16,
548
+ "paddingRight": 16,
549
+ "paddingTop": 16,
550
+ },
551
+ ]
552
+ }
553
+ type="warning"
554
+ >
555
+ <View
556
+ style={
557
+ Array [
558
+ Object {
559
+ "marginRight": 16,
560
+ },
561
+ ]
562
+ }
563
+ >
564
+ <View
565
+ color="black"
566
+ size={20}
567
+ style={
568
+ Array [
569
+ Object {
570
+ "alignSelf": "auto",
571
+ "color": "black",
572
+ "height": 20,
573
+ "width": 20,
574
+ },
575
+ ]
576
+ }
577
+ >
578
+ <svg
579
+ color="black"
580
+ data-file-name="SvgAlertCircleInline"
581
+ />
582
+ </View>
583
+ </View>
584
+ <Text
585
+ centeredText={false}
586
+ style={
587
+ Array [
588
+ Object {
589
+ "flexBasis": 0,
590
+ "flexGrow": 1,
591
+ "flexShrink": 1,
592
+ "textAlign": "left",
593
+ },
594
+ ]
595
+ }
596
+ type="warning"
597
+ >
598
+ <Text
599
+ color="black"
600
+ isHeader={false}
601
+ style={
602
+ Array [
603
+ Object {
604
+ "color": "#000000",
605
+ "fontFamily": "NotoSans",
606
+ "fontSize": 14,
607
+ "fontStyle": "normal",
608
+ "fontWeight": "400",
609
+ "lineHeight": 22,
610
+ "textDecorationColor": "#000000",
611
+ },
612
+ ]
613
+ }
614
+ type="body-small"
615
+ variant="regular"
616
+ >
617
+ Warning message goes here...
618
+ </Text>
619
+ </Text>
620
+ </View>
621
+ </View>
622
+ <View
623
+ style={
624
+ Array [
625
+ Object {
626
+ "marginBottom": 20,
627
+ },
628
+ ]
629
+ }
630
+ >
631
+ <View
632
+ style={
633
+ Array [
634
+ Object {
635
+ "marginBottom": 10,
636
+ },
637
+ ]
638
+ }
639
+ >
640
+ <Text
641
+ aria-level="3"
642
+ color="black"
643
+ isHeader={true}
644
+ medium="header4"
645
+ style={
646
+ Array [
647
+ Object {
648
+ "color": "#000000",
649
+ "fontFamily": "Moderat-Extended-Bold",
650
+ "fontSize": 24,
651
+ "fontStyle": "normal",
652
+ "fontWeight": "400",
653
+ "lineHeight": 31,
654
+ "textDecorationColor": "#000000",
655
+ },
656
+ ]
657
+ }
658
+ type="header3"
659
+ variant="bold"
660
+ >
661
+ Error
662
+ </Text>
663
+ </View>
664
+ <View
665
+ noRadius={false}
666
+ style={
667
+ Array [
668
+ Object {
669
+ "alignItems": "flex-start",
670
+ "backgroundColor": "#D44148",
671
+ "borderRadius": 20,
672
+ "flexDirection": "row",
673
+ "justifyContent": "space-between",
674
+ "paddingBottom": 16,
675
+ "paddingLeft": 16,
676
+ "paddingRight": 16,
677
+ "paddingTop": 16,
678
+ },
679
+ ]
680
+ }
681
+ type="danger"
682
+ >
683
+ <View
684
+ style={
685
+ Array [
686
+ Object {
687
+ "marginRight": 16,
688
+ },
689
+ ]
690
+ }
691
+ >
692
+ <View
693
+ color="white"
694
+ size={20}
695
+ style={
696
+ Array [
697
+ Object {
698
+ "alignSelf": "auto",
699
+ "color": "white",
700
+ "height": 20,
701
+ "width": 20,
702
+ },
703
+ ]
704
+ }
705
+ >
706
+ <svg
707
+ color="white"
708
+ data-file-name="SvgAlertTriangleInline"
709
+ />
710
+ </View>
711
+ </View>
712
+ <Text
713
+ centeredText={false}
714
+ style={
715
+ Array [
716
+ Object {
717
+ "flexBasis": 0,
718
+ "flexGrow": 1,
719
+ "flexShrink": 1,
720
+ "textAlign": "left",
721
+ },
722
+ ]
723
+ }
724
+ type="danger"
725
+ >
726
+ <Text
727
+ color="white"
728
+ isHeader={false}
729
+ style={
730
+ Array [
731
+ Object {
732
+ "color": "#FFFFFF",
733
+ "fontFamily": "NotoSans",
734
+ "fontSize": 14,
735
+ "fontStyle": "normal",
736
+ "fontWeight": "400",
737
+ "lineHeight": 22,
738
+ "textDecorationColor": "#FFFFFF",
739
+ },
740
+ ]
741
+ }
742
+ type="body-small"
743
+ variant="regular"
744
+ >
745
+ Error message goes here...
746
+ </Text>
747
+ </Text>
748
+ </View>
749
+ </View>
750
+ </View>
751
+ <View
752
+ style={
753
+ Array [
754
+ Object {
755
+ "marginBottom": 30,
756
+ },
757
+ ]
758
+ }
759
+ >
760
+ <View
761
+ style={
762
+ Array [
763
+ Object {
764
+ "marginBottom": 30,
765
+ },
766
+ ]
767
+ }
768
+ >
769
+ <Text
770
+ aria-level="2"
771
+ color="black"
772
+ isHeader={true}
773
+ style={
774
+ Array [
775
+ Object {
776
+ "color": "#000000",
777
+ "fontFamily": "Moderat-Extended-Bold",
778
+ "fontSize": 32,
779
+ "fontStyle": "normal",
780
+ "fontWeight": "400",
781
+ "lineHeight": 42,
782
+ "textDecorationColor": "#000000",
783
+ },
784
+ ]
785
+ }
786
+ type="header2"
787
+ variant="bold"
788
+ >
789
+ Classic - Centered Text
790
+ </Text>
791
+ </View>
792
+ <View
793
+ style={
794
+ Array [
795
+ Object {
796
+ "marginBottom": 20,
797
+ },
798
+ ]
799
+ }
800
+ >
801
+ <View
802
+ style={
803
+ Array [
804
+ Object {
805
+ "marginBottom": 10,
806
+ },
807
+ ]
808
+ }
809
+ >
810
+ <Text
811
+ aria-level="3"
812
+ color="black"
813
+ isHeader={true}
814
+ medium="header4"
815
+ style={
816
+ Array [
817
+ Object {
818
+ "color": "#000000",
819
+ "fontFamily": "Moderat-Extended-Bold",
820
+ "fontSize": 24,
821
+ "fontStyle": "normal",
822
+ "fontWeight": "400",
823
+ "lineHeight": 31,
824
+ "textDecorationColor": "#000000",
825
+ },
826
+ ]
827
+ }
828
+ type="header3"
829
+ variant="bold"
830
+ >
831
+ Info
832
+ </Text>
833
+ </View>
834
+ <View
835
+ noRadius={false}
836
+ style={
837
+ Array [
838
+ Object {
839
+ "alignItems": "flex-start",
840
+ "backgroundColor": "#89BDDD",
841
+ "borderRadius": 20,
842
+ "flexDirection": "row",
843
+ "justifyContent": "space-between",
844
+ "paddingBottom": 16,
845
+ "paddingLeft": 16,
846
+ "paddingRight": 16,
847
+ "paddingTop": 16,
848
+ },
849
+ ]
850
+ }
851
+ type="info"
852
+ >
853
+ <Text
854
+ centeredText={true}
855
+ style={
856
+ Array [
857
+ Object {
858
+ "flexBasis": 0,
859
+ "flexGrow": 1,
860
+ "flexShrink": 1,
861
+ "textAlign": "center",
862
+ },
863
+ ]
864
+ }
865
+ type="info"
866
+ >
867
+ <Text
868
+ color="black"
869
+ isHeader={false}
870
+ style={
871
+ Array [
872
+ Object {
873
+ "color": "#000000",
874
+ "fontFamily": "NotoSans",
875
+ "fontSize": 14,
876
+ "fontStyle": "normal",
877
+ "fontWeight": "400",
878
+ "lineHeight": 22,
879
+ "textDecorationColor": "#000000",
880
+ },
881
+ ]
882
+ }
883
+ type="body-small"
884
+ variant="regular"
885
+ >
886
+ Info message goes here...
887
+ </Text>
888
+ </Text>
889
+ </View>
890
+ </View>
891
+ <View
892
+ style={
893
+ Array [
894
+ Object {
895
+ "marginBottom": 20,
896
+ },
897
+ ]
898
+ }
899
+ >
900
+ <View
901
+ style={
902
+ Array [
903
+ Object {
904
+ "marginBottom": 10,
905
+ },
906
+ ]
907
+ }
908
+ >
909
+ <Text
910
+ aria-level="3"
911
+ color="black"
912
+ isHeader={true}
913
+ medium="header4"
914
+ style={
915
+ Array [
916
+ Object {
917
+ "color": "#000000",
918
+ "fontFamily": "Moderat-Extended-Bold",
919
+ "fontSize": 24,
920
+ "fontStyle": "normal",
921
+ "fontWeight": "400",
922
+ "lineHeight": 31,
923
+ "textDecorationColor": "#000000",
924
+ },
925
+ ]
926
+ }
927
+ type="header3"
928
+ variant="bold"
929
+ >
930
+ Confirmation
931
+ </Text>
932
+ </View>
933
+ <View
934
+ noRadius={false}
935
+ style={
936
+ Array [
937
+ Object {
938
+ "alignItems": "flex-start",
939
+ "backgroundColor": "#38836D",
940
+ "borderRadius": 20,
941
+ "flexDirection": "row",
942
+ "justifyContent": "space-between",
943
+ "paddingBottom": 16,
944
+ "paddingLeft": 16,
945
+ "paddingRight": 16,
946
+ "paddingTop": 16,
947
+ },
948
+ ]
949
+ }
950
+ type="success"
951
+ >
952
+ <Text
953
+ centeredText={true}
954
+ style={
955
+ Array [
956
+ Object {
957
+ "flexBasis": 0,
958
+ "flexGrow": 1,
959
+ "flexShrink": 1,
960
+ "textAlign": "center",
961
+ },
962
+ ]
963
+ }
964
+ type="success"
965
+ >
966
+ <Text
967
+ color="white"
968
+ isHeader={false}
969
+ style={
970
+ Array [
971
+ Object {
972
+ "color": "#FFFFFF",
973
+ "fontFamily": "NotoSans",
974
+ "fontSize": 14,
975
+ "fontStyle": "normal",
976
+ "fontWeight": "400",
977
+ "lineHeight": 22,
978
+ "textDecorationColor": "#FFFFFF",
979
+ },
980
+ ]
981
+ }
982
+ type="body-small"
983
+ variant="regular"
984
+ >
985
+ Confirmation message goes here...
986
+ </Text>
987
+ </Text>
988
+ </View>
989
+ </View>
990
+ <View
991
+ style={
992
+ Array [
993
+ Object {
994
+ "marginBottom": 20,
995
+ },
996
+ ]
997
+ }
998
+ >
999
+ <View
1000
+ style={
1001
+ Array [
1002
+ Object {
1003
+ "marginBottom": 10,
1004
+ },
1005
+ ]
1006
+ }
1007
+ >
1008
+ <Text
1009
+ aria-level="3"
1010
+ color="black"
1011
+ isHeader={true}
1012
+ medium="header4"
1013
+ style={
1014
+ Array [
1015
+ Object {
1016
+ "color": "#000000",
1017
+ "fontFamily": "Moderat-Extended-Bold",
1018
+ "fontSize": 24,
1019
+ "fontStyle": "normal",
1020
+ "fontWeight": "400",
1021
+ "lineHeight": 31,
1022
+ "textDecorationColor": "#000000",
1023
+ },
1024
+ ]
1025
+ }
1026
+ type="header3"
1027
+ variant="bold"
1028
+ >
1029
+ Warning
1030
+ </Text>
1031
+ </View>
1032
+ <View
1033
+ noRadius={false}
1034
+ style={
1035
+ Array [
1036
+ Object {
1037
+ "alignItems": "flex-start",
1038
+ "backgroundColor": "#F8C583",
1039
+ "borderRadius": 20,
1040
+ "flexDirection": "row",
1041
+ "justifyContent": "space-between",
1042
+ "paddingBottom": 16,
1043
+ "paddingLeft": 16,
1044
+ "paddingRight": 16,
1045
+ "paddingTop": 16,
1046
+ },
1047
+ ]
1048
+ }
1049
+ type="warning"
1050
+ >
1051
+ <Text
1052
+ centeredText={true}
1053
+ style={
1054
+ Array [
1055
+ Object {
1056
+ "flexBasis": 0,
1057
+ "flexGrow": 1,
1058
+ "flexShrink": 1,
1059
+ "textAlign": "center",
1060
+ },
1061
+ ]
1062
+ }
1063
+ type="warning"
1064
+ >
1065
+ <Text
1066
+ color="black"
1067
+ isHeader={false}
1068
+ style={
1069
+ Array [
1070
+ Object {
1071
+ "color": "#000000",
1072
+ "fontFamily": "NotoSans",
1073
+ "fontSize": 14,
1074
+ "fontStyle": "normal",
1075
+ "fontWeight": "400",
1076
+ "lineHeight": 22,
1077
+ "textDecorationColor": "#000000",
1078
+ },
1079
+ ]
1080
+ }
1081
+ type="body-small"
1082
+ variant="regular"
1083
+ >
1084
+ Warning message goes here...
1085
+ </Text>
1086
+ </Text>
1087
+ </View>
1088
+ </View>
1089
+ <View
1090
+ style={
1091
+ Array [
1092
+ Object {
1093
+ "marginBottom": 20,
1094
+ },
1095
+ ]
1096
+ }
1097
+ >
1098
+ <View
1099
+ style={
1100
+ Array [
1101
+ Object {
1102
+ "marginBottom": 10,
1103
+ },
1104
+ ]
1105
+ }
1106
+ >
1107
+ <Text
1108
+ aria-level="3"
1109
+ color="black"
1110
+ isHeader={true}
1111
+ medium="header4"
1112
+ style={
1113
+ Array [
1114
+ Object {
1115
+ "color": "#000000",
1116
+ "fontFamily": "Moderat-Extended-Bold",
1117
+ "fontSize": 24,
1118
+ "fontStyle": "normal",
1119
+ "fontWeight": "400",
1120
+ "lineHeight": 31,
1121
+ "textDecorationColor": "#000000",
1122
+ },
1123
+ ]
1124
+ }
1125
+ type="header3"
1126
+ variant="bold"
1127
+ >
1128
+ Error
1129
+ </Text>
1130
+ </View>
1131
+ <View
1132
+ noRadius={false}
1133
+ style={
1134
+ Array [
1135
+ Object {
1136
+ "alignItems": "flex-start",
1137
+ "backgroundColor": "#D44148",
1138
+ "borderRadius": 20,
1139
+ "flexDirection": "row",
1140
+ "justifyContent": "space-between",
1141
+ "paddingBottom": 16,
1142
+ "paddingLeft": 16,
1143
+ "paddingRight": 16,
1144
+ "paddingTop": 16,
1145
+ },
1146
+ ]
1147
+ }
1148
+ type="danger"
1149
+ >
1150
+ <Text
1151
+ centeredText={true}
1152
+ style={
1153
+ Array [
1154
+ Object {
1155
+ "flexBasis": 0,
1156
+ "flexGrow": 1,
1157
+ "flexShrink": 1,
1158
+ "textAlign": "center",
1159
+ },
1160
+ ]
1161
+ }
1162
+ type="danger"
1163
+ >
1164
+ <Text
1165
+ color="white"
1166
+ isHeader={false}
1167
+ style={
1168
+ Array [
1169
+ Object {
1170
+ "color": "#FFFFFF",
1171
+ "fontFamily": "NotoSans",
1172
+ "fontSize": 14,
1173
+ "fontStyle": "normal",
1174
+ "fontWeight": "400",
1175
+ "lineHeight": 22,
1176
+ "textDecorationColor": "#FFFFFF",
1177
+ },
1178
+ ]
1179
+ }
1180
+ type="body-small"
1181
+ variant="regular"
1182
+ >
1183
+ Error message goes here...
1184
+ </Text>
1185
+ </Text>
1186
+ </View>
1187
+ </View>
1188
+ </View>
1189
+ <View
1190
+ style={
1191
+ Array [
1192
+ Object {
1193
+ "marginBottom": 30,
1194
+ },
1195
+ ]
1196
+ }
1197
+ >
1198
+ <View
1199
+ style={
1200
+ Array [
1201
+ Object {
1202
+ "marginBottom": 30,
1203
+ },
1204
+ ]
1205
+ }
1206
+ >
1207
+ <Text
1208
+ aria-level="2"
1209
+ color="black"
1210
+ isHeader={true}
1211
+ style={
1212
+ Array [
1213
+ Object {
1214
+ "color": "#000000",
1215
+ "fontFamily": "Moderat-Extended-Bold",
1216
+ "fontSize": 32,
1217
+ "fontStyle": "normal",
1218
+ "fontWeight": "400",
1219
+ "lineHeight": 42,
1220
+ "textDecorationColor": "#000000",
1221
+ },
1222
+ ]
1223
+ }
1224
+ type="header2"
1225
+ variant="bold"
1226
+ >
1227
+ Dismissable
1228
+ </Text>
1229
+ </View>
1230
+ <View
1231
+ style={
1232
+ Array [
1233
+ Object {
1234
+ "marginBottom": 20,
1235
+ },
1236
+ ]
1237
+ }
1238
+ >
1239
+ <View
1240
+ style={
1241
+ Array [
1242
+ Object {
1243
+ "marginBottom": 10,
1244
+ },
1245
+ ]
1246
+ }
1247
+ >
1248
+ <Text
1249
+ aria-level="3"
1250
+ color="black"
1251
+ isHeader={true}
1252
+ medium="header4"
1253
+ style={
1254
+ Array [
1255
+ Object {
1256
+ "color": "#000000",
1257
+ "fontFamily": "Moderat-Extended-Bold",
1258
+ "fontSize": 24,
1259
+ "fontStyle": "normal",
1260
+ "fontWeight": "400",
1261
+ "lineHeight": 31,
1262
+ "textDecorationColor": "#000000",
1263
+ },
1264
+ ]
1265
+ }
1266
+ type="header3"
1267
+ variant="bold"
1268
+ >
1269
+ Info
1270
+ </Text>
1271
+ </View>
1272
+ <View
1273
+ noRadius={false}
1274
+ style={
1275
+ Array [
1276
+ Object {
1277
+ "alignItems": "flex-start",
1278
+ "backgroundColor": "#89BDDD",
1279
+ "borderRadius": 20,
1280
+ "flexDirection": "row",
1281
+ "justifyContent": "space-between",
1282
+ "paddingBottom": 16,
1283
+ "paddingLeft": 16,
1284
+ "paddingRight": 16,
1285
+ "paddingTop": 16,
1286
+ },
1287
+ ]
1288
+ }
1289
+ type="info"
1290
+ >
1291
+ <View
1292
+ style={
1293
+ Array [
1294
+ Object {
1295
+ "marginRight": 16,
1296
+ },
1297
+ ]
1298
+ }
1299
+ >
1300
+ <View
1301
+ color="black"
1302
+ size={20}
1303
+ style={
1304
+ Array [
1305
+ Object {
1306
+ "alignSelf": "auto",
1307
+ "color": "black",
1308
+ "height": 20,
1309
+ "width": 20,
1310
+ },
1311
+ ]
1312
+ }
1313
+ >
1314
+ <svg
1315
+ color="black"
1316
+ data-file-name="SvgInfoInline"
1317
+ />
1318
+ </View>
1319
+ </View>
1320
+ <Text
1321
+ centeredText={false}
1322
+ style={
1323
+ Array [
1324
+ Object {
1325
+ "flexBasis": 0,
1326
+ "flexGrow": 1,
1327
+ "flexShrink": 1,
1328
+ "textAlign": "left",
1329
+ },
1330
+ ]
1331
+ }
1332
+ type="info"
1333
+ >
1334
+ <Text
1335
+ color="black"
1336
+ isHeader={false}
1337
+ style={
1338
+ Array [
1339
+ Object {
1340
+ "color": "#000000",
1341
+ "fontFamily": "NotoSans",
1342
+ "fontSize": 14,
1343
+ "fontStyle": "normal",
1344
+ "fontWeight": "400",
1345
+ "lineHeight": 22,
1346
+ "textDecorationColor": "#000000",
1347
+ },
1348
+ ]
1349
+ }
1350
+ type="body-small"
1351
+ variant="regular"
1352
+ >
1353
+ Info message goes here...
1354
+ </Text>
1355
+ </Text>
1356
+ <View
1357
+ accessible={true}
1358
+ focusable={true}
1359
+ onClick={[Function]}
1360
+ onResponderGrant={[Function]}
1361
+ onResponderMove={[Function]}
1362
+ onResponderRelease={[Function]}
1363
+ onResponderTerminate={[Function]}
1364
+ onResponderTerminationRequest={[Function]}
1365
+ onStartShouldSetResponder={[Function]}
1366
+ style={
1367
+ Object {
1368
+ "marginLeft": 16,
1369
+ "opacity": 1,
1370
+ "paddingBottom": 4,
1371
+ "paddingLeft": 4,
1372
+ "paddingRight": 4,
1373
+ "paddingTop": 4,
1374
+ }
1375
+ }
1376
+ >
1377
+ <View
1378
+ color="black"
1379
+ size={14}
1380
+ style={
1381
+ Array [
1382
+ Object {
1383
+ "alignSelf": "auto",
1384
+ "color": "black",
1385
+ "height": 14,
1386
+ "width": 14,
1387
+ },
1388
+ ]
1389
+ }
1390
+ >
1391
+ <svg
1392
+ color="black"
1393
+ data-file-name="SvgXInline"
1394
+ />
1395
+ </View>
1396
+ </View>
1397
+ </View>
1398
+ </View>
1399
+ <View
1400
+ style={
1401
+ Array [
1402
+ Object {
1403
+ "marginBottom": 20,
1404
+ },
1405
+ ]
1406
+ }
1407
+ >
1408
+ <View
1409
+ style={
1410
+ Array [
1411
+ Object {
1412
+ "marginBottom": 10,
1413
+ },
1414
+ ]
1415
+ }
1416
+ >
1417
+ <Text
1418
+ aria-level="3"
1419
+ color="black"
1420
+ isHeader={true}
1421
+ medium="header4"
1422
+ style={
1423
+ Array [
1424
+ Object {
1425
+ "color": "#000000",
1426
+ "fontFamily": "Moderat-Extended-Bold",
1427
+ "fontSize": 24,
1428
+ "fontStyle": "normal",
1429
+ "fontWeight": "400",
1430
+ "lineHeight": 31,
1431
+ "textDecorationColor": "#000000",
1432
+ },
1433
+ ]
1434
+ }
1435
+ type="header3"
1436
+ variant="bold"
1437
+ >
1438
+ Confirmation
1439
+ </Text>
1440
+ </View>
1441
+ <View
1442
+ noRadius={false}
1443
+ style={
1444
+ Array [
1445
+ Object {
1446
+ "alignItems": "flex-start",
1447
+ "backgroundColor": "#38836D",
1448
+ "borderRadius": 20,
1449
+ "flexDirection": "row",
1450
+ "justifyContent": "space-between",
1451
+ "paddingBottom": 16,
1452
+ "paddingLeft": 16,
1453
+ "paddingRight": 16,
1454
+ "paddingTop": 16,
1455
+ },
1456
+ ]
1457
+ }
1458
+ type="success"
1459
+ >
1460
+ <View
1461
+ style={
1462
+ Array [
1463
+ Object {
1464
+ "marginRight": 16,
1465
+ },
1466
+ ]
1467
+ }
1468
+ >
1469
+ <View
1470
+ color="white"
1471
+ size={20}
1472
+ style={
1473
+ Array [
1474
+ Object {
1475
+ "alignSelf": "auto",
1476
+ "color": "white",
1477
+ "height": 20,
1478
+ "width": 20,
1479
+ },
1480
+ ]
1481
+ }
1482
+ >
1483
+ <svg
1484
+ color="white"
1485
+ data-file-name="SvgCheckInline"
1486
+ />
1487
+ </View>
1488
+ </View>
1489
+ <Text
1490
+ centeredText={false}
1491
+ style={
1492
+ Array [
1493
+ Object {
1494
+ "flexBasis": 0,
1495
+ "flexGrow": 1,
1496
+ "flexShrink": 1,
1497
+ "textAlign": "left",
1498
+ },
1499
+ ]
1500
+ }
1501
+ type="success"
1502
+ >
1503
+ <Text
1504
+ color="white"
1505
+ isHeader={false}
1506
+ style={
1507
+ Array [
1508
+ Object {
1509
+ "color": "#FFFFFF",
1510
+ "fontFamily": "NotoSans",
1511
+ "fontSize": 14,
1512
+ "fontStyle": "normal",
1513
+ "fontWeight": "400",
1514
+ "lineHeight": 22,
1515
+ "textDecorationColor": "#FFFFFF",
1516
+ },
1517
+ ]
1518
+ }
1519
+ type="body-small"
1520
+ variant="regular"
1521
+ >
1522
+ Confirmation message goes here...
1523
+ </Text>
1524
+ </Text>
1525
+ <View
1526
+ accessible={true}
1527
+ focusable={true}
1528
+ onClick={[Function]}
1529
+ onResponderGrant={[Function]}
1530
+ onResponderMove={[Function]}
1531
+ onResponderRelease={[Function]}
1532
+ onResponderTerminate={[Function]}
1533
+ onResponderTerminationRequest={[Function]}
1534
+ onStartShouldSetResponder={[Function]}
1535
+ style={
1536
+ Object {
1537
+ "marginLeft": 16,
1538
+ "opacity": 1,
1539
+ "paddingBottom": 4,
1540
+ "paddingLeft": 4,
1541
+ "paddingRight": 4,
1542
+ "paddingTop": 4,
1543
+ }
1544
+ }
1545
+ >
1546
+ <View
1547
+ color="white"
1548
+ size={14}
1549
+ style={
1550
+ Array [
1551
+ Object {
1552
+ "alignSelf": "auto",
1553
+ "color": "white",
1554
+ "height": 14,
1555
+ "width": 14,
1556
+ },
1557
+ ]
1558
+ }
1559
+ >
1560
+ <svg
1561
+ color="white"
1562
+ data-file-name="SvgXInline"
1563
+ />
1564
+ </View>
1565
+ </View>
1566
+ </View>
1567
+ </View>
1568
+ <View
1569
+ style={
1570
+ Array [
1571
+ Object {
1572
+ "marginBottom": 20,
1573
+ },
1574
+ ]
1575
+ }
1576
+ >
1577
+ <View
1578
+ style={
1579
+ Array [
1580
+ Object {
1581
+ "marginBottom": 10,
1582
+ },
1583
+ ]
1584
+ }
1585
+ >
1586
+ <Text
1587
+ aria-level="3"
1588
+ color="black"
1589
+ isHeader={true}
1590
+ medium="header4"
1591
+ style={
1592
+ Array [
1593
+ Object {
1594
+ "color": "#000000",
1595
+ "fontFamily": "Moderat-Extended-Bold",
1596
+ "fontSize": 24,
1597
+ "fontStyle": "normal",
1598
+ "fontWeight": "400",
1599
+ "lineHeight": 31,
1600
+ "textDecorationColor": "#000000",
1601
+ },
1602
+ ]
1603
+ }
1604
+ type="header3"
1605
+ variant="bold"
1606
+ >
1607
+ Warning
1608
+ </Text>
1609
+ </View>
1610
+ <View
1611
+ noRadius={false}
1612
+ style={
1613
+ Array [
1614
+ Object {
1615
+ "alignItems": "flex-start",
1616
+ "backgroundColor": "#F8C583",
1617
+ "borderRadius": 20,
1618
+ "flexDirection": "row",
1619
+ "justifyContent": "space-between",
1620
+ "paddingBottom": 16,
1621
+ "paddingLeft": 16,
1622
+ "paddingRight": 16,
1623
+ "paddingTop": 16,
1624
+ },
1625
+ ]
1626
+ }
1627
+ type="warning"
1628
+ >
1629
+ <View
1630
+ style={
1631
+ Array [
1632
+ Object {
1633
+ "marginRight": 16,
1634
+ },
1635
+ ]
1636
+ }
1637
+ >
1638
+ <View
1639
+ color="black"
1640
+ size={20}
1641
+ style={
1642
+ Array [
1643
+ Object {
1644
+ "alignSelf": "auto",
1645
+ "color": "black",
1646
+ "height": 20,
1647
+ "width": 20,
1648
+ },
1649
+ ]
1650
+ }
1651
+ >
1652
+ <svg
1653
+ color="black"
1654
+ data-file-name="SvgAlertCircleInline"
1655
+ />
1656
+ </View>
1657
+ </View>
1658
+ <Text
1659
+ centeredText={false}
1660
+ style={
1661
+ Array [
1662
+ Object {
1663
+ "flexBasis": 0,
1664
+ "flexGrow": 1,
1665
+ "flexShrink": 1,
1666
+ "textAlign": "left",
1667
+ },
1668
+ ]
1669
+ }
1670
+ type="warning"
1671
+ >
1672
+ <Text
1673
+ color="black"
1674
+ isHeader={false}
1675
+ style={
1676
+ Array [
1677
+ Object {
1678
+ "color": "#000000",
1679
+ "fontFamily": "NotoSans",
1680
+ "fontSize": 14,
1681
+ "fontStyle": "normal",
1682
+ "fontWeight": "400",
1683
+ "lineHeight": 22,
1684
+ "textDecorationColor": "#000000",
1685
+ },
1686
+ ]
1687
+ }
1688
+ type="body-small"
1689
+ variant="regular"
1690
+ >
1691
+ Warning message goes here...
1692
+ </Text>
1693
+ </Text>
1694
+ <View
1695
+ accessible={true}
1696
+ focusable={true}
1697
+ onClick={[Function]}
1698
+ onResponderGrant={[Function]}
1699
+ onResponderMove={[Function]}
1700
+ onResponderRelease={[Function]}
1701
+ onResponderTerminate={[Function]}
1702
+ onResponderTerminationRequest={[Function]}
1703
+ onStartShouldSetResponder={[Function]}
1704
+ style={
1705
+ Object {
1706
+ "marginLeft": 16,
1707
+ "opacity": 1,
1708
+ "paddingBottom": 4,
1709
+ "paddingLeft": 4,
1710
+ "paddingRight": 4,
1711
+ "paddingTop": 4,
1712
+ }
1713
+ }
1714
+ >
1715
+ <View
1716
+ color="black"
1717
+ size={14}
1718
+ style={
1719
+ Array [
1720
+ Object {
1721
+ "alignSelf": "auto",
1722
+ "color": "black",
1723
+ "height": 14,
1724
+ "width": 14,
1725
+ },
1726
+ ]
1727
+ }
1728
+ >
1729
+ <svg
1730
+ color="black"
1731
+ data-file-name="SvgXInline"
1732
+ />
1733
+ </View>
1734
+ </View>
1735
+ </View>
1736
+ </View>
1737
+ <View
1738
+ style={
1739
+ Array [
1740
+ Object {
1741
+ "marginBottom": 20,
1742
+ },
1743
+ ]
1744
+ }
1745
+ >
1746
+ <View
1747
+ style={
1748
+ Array [
1749
+ Object {
1750
+ "marginBottom": 10,
1751
+ },
1752
+ ]
1753
+ }
1754
+ >
1755
+ <Text
1756
+ aria-level="3"
1757
+ color="black"
1758
+ isHeader={true}
1759
+ medium="header4"
1760
+ style={
1761
+ Array [
1762
+ Object {
1763
+ "color": "#000000",
1764
+ "fontFamily": "Moderat-Extended-Bold",
1765
+ "fontSize": 24,
1766
+ "fontStyle": "normal",
1767
+ "fontWeight": "400",
1768
+ "lineHeight": 31,
1769
+ "textDecorationColor": "#000000",
1770
+ },
1771
+ ]
1772
+ }
1773
+ type="header3"
1774
+ variant="bold"
1775
+ >
1776
+ Error
1777
+ </Text>
1778
+ </View>
1779
+ <View
1780
+ noRadius={false}
1781
+ style={
1782
+ Array [
1783
+ Object {
1784
+ "alignItems": "flex-start",
1785
+ "backgroundColor": "#D44148",
1786
+ "borderRadius": 20,
1787
+ "flexDirection": "row",
1788
+ "justifyContent": "space-between",
1789
+ "paddingBottom": 16,
1790
+ "paddingLeft": 16,
1791
+ "paddingRight": 16,
1792
+ "paddingTop": 16,
1793
+ },
1794
+ ]
1795
+ }
1796
+ type="danger"
1797
+ >
1798
+ <View
1799
+ style={
1800
+ Array [
1801
+ Object {
1802
+ "marginRight": 16,
1803
+ },
1804
+ ]
1805
+ }
1806
+ >
1807
+ <View
1808
+ color="white"
1809
+ size={20}
1810
+ style={
1811
+ Array [
1812
+ Object {
1813
+ "alignSelf": "auto",
1814
+ "color": "white",
1815
+ "height": 20,
1816
+ "width": 20,
1817
+ },
1818
+ ]
1819
+ }
1820
+ >
1821
+ <svg
1822
+ color="white"
1823
+ data-file-name="SvgAlertTriangleInline"
1824
+ />
1825
+ </View>
1826
+ </View>
1827
+ <Text
1828
+ centeredText={false}
1829
+ style={
1830
+ Array [
1831
+ Object {
1832
+ "flexBasis": 0,
1833
+ "flexGrow": 1,
1834
+ "flexShrink": 1,
1835
+ "textAlign": "left",
1836
+ },
1837
+ ]
1838
+ }
1839
+ type="danger"
1840
+ >
1841
+ <Text
1842
+ color="white"
1843
+ isHeader={false}
1844
+ style={
1845
+ Array [
1846
+ Object {
1847
+ "color": "#FFFFFF",
1848
+ "fontFamily": "NotoSans",
1849
+ "fontSize": 14,
1850
+ "fontStyle": "normal",
1851
+ "fontWeight": "400",
1852
+ "lineHeight": 22,
1853
+ "textDecorationColor": "#FFFFFF",
1854
+ },
1855
+ ]
1856
+ }
1857
+ type="body-small"
1858
+ variant="regular"
1859
+ >
1860
+ Error message goes here...
1861
+ </Text>
1862
+ </Text>
1863
+ <View
1864
+ accessible={true}
1865
+ focusable={true}
1866
+ onClick={[Function]}
1867
+ onResponderGrant={[Function]}
1868
+ onResponderMove={[Function]}
1869
+ onResponderRelease={[Function]}
1870
+ onResponderTerminate={[Function]}
1871
+ onResponderTerminationRequest={[Function]}
1872
+ onStartShouldSetResponder={[Function]}
1873
+ style={
1874
+ Object {
1875
+ "marginLeft": 16,
1876
+ "opacity": 1,
1877
+ "paddingBottom": 4,
1878
+ "paddingLeft": 4,
1879
+ "paddingRight": 4,
1880
+ "paddingTop": 4,
1881
+ }
1882
+ }
1883
+ >
1884
+ <View
1885
+ color="white"
1886
+ size={14}
1887
+ style={
1888
+ Array [
1889
+ Object {
1890
+ "alignSelf": "auto",
1891
+ "color": "white",
1892
+ "height": 14,
1893
+ "width": 14,
1894
+ },
1895
+ ]
1896
+ }
1897
+ >
1898
+ <svg
1899
+ color="white"
1900
+ data-file-name="SvgXInline"
1901
+ />
1902
+ </View>
1903
+ </View>
1904
+ </View>
1905
+ </View>
1906
+ </View>
1907
+ <View
1908
+ style={
1909
+ Array [
1910
+ Object {
1911
+ "marginBottom": 30,
1912
+ },
1913
+ ]
1914
+ }
1915
+ >
1916
+ <View
1917
+ style={
1918
+ Array [
1919
+ Object {
1920
+ "marginBottom": 30,
1921
+ },
1922
+ ]
1923
+ }
1924
+ >
1925
+ <Text
1926
+ aria-level="2"
1927
+ color="black"
1928
+ isHeader={true}
1929
+ style={
1930
+ Array [
1931
+ Object {
1932
+ "color": "#000000",
1933
+ "fontFamily": "Moderat-Extended-Bold",
1934
+ "fontSize": 32,
1935
+ "fontStyle": "normal",
1936
+ "fontWeight": "400",
1937
+ "lineHeight": 42,
1938
+ "textDecorationColor": "#000000",
1939
+ },
1940
+ ]
1941
+ }
1942
+ type="header2"
1943
+ variant="bold"
1944
+ >
1945
+ Classic - with title
1946
+ </Text>
1947
+ </View>
1948
+ <View
1949
+ style={
1950
+ Array [
1951
+ Object {
1952
+ "marginBottom": 20,
1953
+ },
1954
+ ]
1955
+ }
1956
+ >
1957
+ <View
1958
+ style={
1959
+ Array [
1960
+ Object {
1961
+ "marginBottom": 10,
1962
+ },
1963
+ ]
1964
+ }
1965
+ >
1966
+ <Text
1967
+ aria-level="3"
1968
+ color="black"
1969
+ isHeader={true}
1970
+ medium="header4"
1971
+ style={
1972
+ Array [
1973
+ Object {
1974
+ "color": "#000000",
1975
+ "fontFamily": "Moderat-Extended-Bold",
1976
+ "fontSize": 24,
1977
+ "fontStyle": "normal",
1978
+ "fontWeight": "400",
1979
+ "lineHeight": 31,
1980
+ "textDecorationColor": "#000000",
1981
+ },
1982
+ ]
1983
+ }
1984
+ type="header3"
1985
+ variant="bold"
1986
+ >
1987
+ Info
1988
+ </Text>
1989
+ </View>
1990
+ <View
1991
+ noRadius={false}
1992
+ style={
1993
+ Array [
1994
+ Object {
1995
+ "alignItems": "flex-start",
1996
+ "backgroundColor": "#89BDDD",
1997
+ "borderRadius": 20,
1998
+ "flexDirection": "row",
1999
+ "justifyContent": "space-between",
2000
+ "paddingBottom": 16,
2001
+ "paddingLeft": 16,
2002
+ "paddingRight": 16,
2003
+ "paddingTop": 16,
2004
+ },
2005
+ ]
2006
+ }
2007
+ type="info"
2008
+ >
2009
+ <View
2010
+ style={
2011
+ Array [
2012
+ Object {
2013
+ "marginRight": 16,
2014
+ },
2015
+ ]
2016
+ }
2017
+ >
2018
+ <View
2019
+ color="black"
2020
+ size={20}
2021
+ style={
2022
+ Array [
2023
+ Object {
2024
+ "alignSelf": "auto",
2025
+ "color": "black",
2026
+ "height": 20,
2027
+ "width": 20,
2028
+ },
2029
+ ]
2030
+ }
2031
+ >
2032
+ <svg
2033
+ color="black"
2034
+ data-file-name="SvgInfoInline"
2035
+ />
2036
+ </View>
2037
+ </View>
2038
+ <Text
2039
+ centeredText={false}
2040
+ style={
2041
+ Array [
2042
+ Object {
2043
+ "flexBasis": 0,
2044
+ "flexGrow": 1,
2045
+ "flexShrink": 1,
2046
+ "textAlign": "left",
2047
+ },
2048
+ ]
2049
+ }
2050
+ type="info"
2051
+ >
2052
+ <Text
2053
+ color="black"
2054
+ isHeader={false}
2055
+ style={
2056
+ Array [
2057
+ Object {
2058
+ "color": "#000000",
2059
+ "fontFamily": "NotoSans",
2060
+ "fontSize": 14,
2061
+ "fontStyle": "normal",
2062
+ "fontWeight": "400",
2063
+ "lineHeight": 22,
2064
+ "textDecorationColor": "#000000",
2065
+ },
2066
+ ]
2067
+ }
2068
+ type="body-small"
2069
+ variant="regular"
2070
+ >
2071
+ <Text
2072
+ isHeader={false}
2073
+ style={
2074
+ Array [
2075
+ Object {
2076
+ "fontFamily": "NotoSans-Bold",
2077
+ "fontSize": 16,
2078
+ "fontStyle": "normal",
2079
+ "fontWeight": "700",
2080
+ "lineHeight": 26,
2081
+ },
2082
+ ]
2083
+ }
2084
+ type="body"
2085
+ variant="bold"
2086
+ >
2087
+ This is a title
2088
+
2089
+
2090
+ </Text>
2091
+ <Text
2092
+ isHeader={false}
2093
+ style={
2094
+ Array [
2095
+ Object {
2096
+ "fontFamily": "NotoSans",
2097
+ "fontSize": 14,
2098
+ "fontStyle": "normal",
2099
+ "fontWeight": "400",
2100
+ "lineHeight": 22,
2101
+ },
2102
+ ]
2103
+ }
2104
+ type="body-small"
2105
+ variant="regular"
2106
+ >
2107
+ Info message goes here...
2108
+ </Text>
2109
+ </Text>
2110
+ </Text>
2111
+ <View
2112
+ accessible={true}
2113
+ focusable={true}
2114
+ onClick={[Function]}
2115
+ onResponderGrant={[Function]}
2116
+ onResponderMove={[Function]}
2117
+ onResponderRelease={[Function]}
2118
+ onResponderTerminate={[Function]}
2119
+ onResponderTerminationRequest={[Function]}
2120
+ onStartShouldSetResponder={[Function]}
2121
+ style={
2122
+ Object {
2123
+ "marginLeft": 16,
2124
+ "opacity": 1,
2125
+ "paddingBottom": 4,
2126
+ "paddingLeft": 4,
2127
+ "paddingRight": 4,
2128
+ "paddingTop": 4,
2129
+ }
2130
+ }
2131
+ >
2132
+ <View
2133
+ color="black"
2134
+ size={14}
2135
+ style={
2136
+ Array [
2137
+ Object {
2138
+ "alignSelf": "auto",
2139
+ "color": "black",
2140
+ "height": 14,
2141
+ "width": 14,
2142
+ },
2143
+ ]
2144
+ }
2145
+ >
2146
+ <svg
2147
+ color="black"
2148
+ data-file-name="SvgXInline"
2149
+ />
2150
+ </View>
2151
+ </View>
2152
+ </View>
2153
+ </View>
2154
+ <View
2155
+ style={
2156
+ Array [
2157
+ Object {
2158
+ "marginBottom": 20,
2159
+ },
2160
+ ]
2161
+ }
2162
+ >
2163
+ <View
2164
+ style={
2165
+ Array [
2166
+ Object {
2167
+ "marginBottom": 10,
2168
+ },
2169
+ ]
2170
+ }
2171
+ >
2172
+ <Text
2173
+ aria-level="3"
2174
+ color="black"
2175
+ isHeader={true}
2176
+ medium="header4"
2177
+ style={
2178
+ Array [
2179
+ Object {
2180
+ "color": "#000000",
2181
+ "fontFamily": "Moderat-Extended-Bold",
2182
+ "fontSize": 24,
2183
+ "fontStyle": "normal",
2184
+ "fontWeight": "400",
2185
+ "lineHeight": 31,
2186
+ "textDecorationColor": "#000000",
2187
+ },
2188
+ ]
2189
+ }
2190
+ type="header3"
2191
+ variant="bold"
2192
+ >
2193
+ Confirmation
2194
+ </Text>
2195
+ </View>
2196
+ <View
2197
+ noRadius={false}
2198
+ style={
2199
+ Array [
2200
+ Object {
2201
+ "alignItems": "flex-start",
2202
+ "backgroundColor": "#38836D",
2203
+ "borderRadius": 20,
2204
+ "flexDirection": "row",
2205
+ "justifyContent": "space-between",
2206
+ "paddingBottom": 16,
2207
+ "paddingLeft": 16,
2208
+ "paddingRight": 16,
2209
+ "paddingTop": 16,
2210
+ },
2211
+ ]
2212
+ }
2213
+ type="success"
2214
+ >
2215
+ <View
2216
+ style={
2217
+ Array [
2218
+ Object {
2219
+ "marginRight": 16,
2220
+ },
2221
+ ]
2222
+ }
2223
+ >
2224
+ <View
2225
+ color="white"
2226
+ size={20}
2227
+ style={
2228
+ Array [
2229
+ Object {
2230
+ "alignSelf": "auto",
2231
+ "color": "white",
2232
+ "height": 20,
2233
+ "width": 20,
2234
+ },
2235
+ ]
2236
+ }
2237
+ >
2238
+ <svg
2239
+ color="white"
2240
+ data-file-name="SvgCheckInline"
2241
+ />
2242
+ </View>
2243
+ </View>
2244
+ <Text
2245
+ centeredText={false}
2246
+ style={
2247
+ Array [
2248
+ Object {
2249
+ "flexBasis": 0,
2250
+ "flexGrow": 1,
2251
+ "flexShrink": 1,
2252
+ "textAlign": "left",
2253
+ },
2254
+ ]
2255
+ }
2256
+ type="success"
2257
+ >
2258
+ <Text
2259
+ color="white"
2260
+ isHeader={false}
2261
+ style={
2262
+ Array [
2263
+ Object {
2264
+ "color": "#FFFFFF",
2265
+ "fontFamily": "NotoSans",
2266
+ "fontSize": 14,
2267
+ "fontStyle": "normal",
2268
+ "fontWeight": "400",
2269
+ "lineHeight": 22,
2270
+ "textDecorationColor": "#FFFFFF",
2271
+ },
2272
+ ]
2273
+ }
2274
+ type="body-small"
2275
+ variant="regular"
2276
+ >
2277
+ <Text
2278
+ isHeader={false}
2279
+ style={
2280
+ Array [
2281
+ Object {
2282
+ "fontFamily": "NotoSans-Bold",
2283
+ "fontSize": 16,
2284
+ "fontStyle": "normal",
2285
+ "fontWeight": "700",
2286
+ "lineHeight": 26,
2287
+ },
2288
+ ]
2289
+ }
2290
+ type="body"
2291
+ variant="bold"
2292
+ >
2293
+ This is a title
2294
+
2295
+
2296
+ </Text>
2297
+ <Text
2298
+ isHeader={false}
2299
+ style={
2300
+ Array [
2301
+ Object {
2302
+ "fontFamily": "NotoSans",
2303
+ "fontSize": 14,
2304
+ "fontStyle": "normal",
2305
+ "fontWeight": "400",
2306
+ "lineHeight": 22,
2307
+ },
2308
+ ]
2309
+ }
2310
+ type="body-small"
2311
+ variant="regular"
2312
+ >
2313
+ Confirmation message goes here...
2314
+ </Text>
2315
+ </Text>
2316
+ </Text>
2317
+ <View
2318
+ accessible={true}
2319
+ focusable={true}
2320
+ onClick={[Function]}
2321
+ onResponderGrant={[Function]}
2322
+ onResponderMove={[Function]}
2323
+ onResponderRelease={[Function]}
2324
+ onResponderTerminate={[Function]}
2325
+ onResponderTerminationRequest={[Function]}
2326
+ onStartShouldSetResponder={[Function]}
2327
+ style={
2328
+ Object {
2329
+ "marginLeft": 16,
2330
+ "opacity": 1,
2331
+ "paddingBottom": 4,
2332
+ "paddingLeft": 4,
2333
+ "paddingRight": 4,
2334
+ "paddingTop": 4,
2335
+ }
2336
+ }
2337
+ >
2338
+ <View
2339
+ color="white"
2340
+ size={14}
2341
+ style={
2342
+ Array [
2343
+ Object {
2344
+ "alignSelf": "auto",
2345
+ "color": "white",
2346
+ "height": 14,
2347
+ "width": 14,
2348
+ },
2349
+ ]
2350
+ }
2351
+ >
2352
+ <svg
2353
+ color="white"
2354
+ data-file-name="SvgXInline"
2355
+ />
2356
+ </View>
2357
+ </View>
2358
+ </View>
2359
+ </View>
2360
+ <View
2361
+ style={
2362
+ Array [
2363
+ Object {
2364
+ "marginBottom": 20,
2365
+ },
2366
+ ]
2367
+ }
2368
+ >
2369
+ <View
2370
+ style={
2371
+ Array [
2372
+ Object {
2373
+ "marginBottom": 10,
2374
+ },
2375
+ ]
2376
+ }
2377
+ >
2378
+ <Text
2379
+ aria-level="3"
2380
+ color="black"
2381
+ isHeader={true}
2382
+ medium="header4"
2383
+ style={
2384
+ Array [
2385
+ Object {
2386
+ "color": "#000000",
2387
+ "fontFamily": "Moderat-Extended-Bold",
2388
+ "fontSize": 24,
2389
+ "fontStyle": "normal",
2390
+ "fontWeight": "400",
2391
+ "lineHeight": 31,
2392
+ "textDecorationColor": "#000000",
2393
+ },
2394
+ ]
2395
+ }
2396
+ type="header3"
2397
+ variant="bold"
2398
+ >
2399
+ Warning
2400
+ </Text>
2401
+ </View>
2402
+ <View
2403
+ noRadius={false}
2404
+ style={
2405
+ Array [
2406
+ Object {
2407
+ "alignItems": "flex-start",
2408
+ "backgroundColor": "#F8C583",
2409
+ "borderRadius": 20,
2410
+ "flexDirection": "row",
2411
+ "justifyContent": "space-between",
2412
+ "paddingBottom": 16,
2413
+ "paddingLeft": 16,
2414
+ "paddingRight": 16,
2415
+ "paddingTop": 16,
2416
+ },
2417
+ ]
2418
+ }
2419
+ type="warning"
2420
+ >
2421
+ <View
2422
+ style={
2423
+ Array [
2424
+ Object {
2425
+ "marginRight": 16,
2426
+ },
2427
+ ]
2428
+ }
2429
+ >
2430
+ <View
2431
+ color="black"
2432
+ size={20}
2433
+ style={
2434
+ Array [
2435
+ Object {
2436
+ "alignSelf": "auto",
2437
+ "color": "black",
2438
+ "height": 20,
2439
+ "width": 20,
2440
+ },
2441
+ ]
2442
+ }
2443
+ >
2444
+ <svg
2445
+ color="black"
2446
+ data-file-name="SvgAlertCircleInline"
2447
+ />
2448
+ </View>
2449
+ </View>
2450
+ <Text
2451
+ centeredText={false}
2452
+ style={
2453
+ Array [
2454
+ Object {
2455
+ "flexBasis": 0,
2456
+ "flexGrow": 1,
2457
+ "flexShrink": 1,
2458
+ "textAlign": "left",
2459
+ },
2460
+ ]
2461
+ }
2462
+ type="warning"
2463
+ >
2464
+ <Text
2465
+ color="black"
2466
+ isHeader={false}
2467
+ style={
2468
+ Array [
2469
+ Object {
2470
+ "color": "#000000",
2471
+ "fontFamily": "NotoSans",
2472
+ "fontSize": 14,
2473
+ "fontStyle": "normal",
2474
+ "fontWeight": "400",
2475
+ "lineHeight": 22,
2476
+ "textDecorationColor": "#000000",
2477
+ },
2478
+ ]
2479
+ }
2480
+ type="body-small"
2481
+ variant="regular"
2482
+ >
2483
+ <Text
2484
+ isHeader={false}
2485
+ style={
2486
+ Array [
2487
+ Object {
2488
+ "fontFamily": "NotoSans-Bold",
2489
+ "fontSize": 16,
2490
+ "fontStyle": "normal",
2491
+ "fontWeight": "700",
2492
+ "lineHeight": 26,
2493
+ },
2494
+ ]
2495
+ }
2496
+ type="body"
2497
+ variant="bold"
2498
+ >
2499
+ This is a title
2500
+
2501
+
2502
+ </Text>
2503
+ <Text
2504
+ isHeader={false}
2505
+ style={
2506
+ Array [
2507
+ Object {
2508
+ "fontFamily": "NotoSans",
2509
+ "fontSize": 14,
2510
+ "fontStyle": "normal",
2511
+ "fontWeight": "400",
2512
+ "lineHeight": 22,
2513
+ },
2514
+ ]
2515
+ }
2516
+ type="body-small"
2517
+ variant="regular"
2518
+ >
2519
+ Warning message goes here...
2520
+ </Text>
2521
+ </Text>
2522
+ </Text>
2523
+ <View
2524
+ accessible={true}
2525
+ focusable={true}
2526
+ onClick={[Function]}
2527
+ onResponderGrant={[Function]}
2528
+ onResponderMove={[Function]}
2529
+ onResponderRelease={[Function]}
2530
+ onResponderTerminate={[Function]}
2531
+ onResponderTerminationRequest={[Function]}
2532
+ onStartShouldSetResponder={[Function]}
2533
+ style={
2534
+ Object {
2535
+ "marginLeft": 16,
2536
+ "opacity": 1,
2537
+ "paddingBottom": 4,
2538
+ "paddingLeft": 4,
2539
+ "paddingRight": 4,
2540
+ "paddingTop": 4,
2541
+ }
2542
+ }
2543
+ >
2544
+ <View
2545
+ color="black"
2546
+ size={14}
2547
+ style={
2548
+ Array [
2549
+ Object {
2550
+ "alignSelf": "auto",
2551
+ "color": "black",
2552
+ "height": 14,
2553
+ "width": 14,
2554
+ },
2555
+ ]
2556
+ }
2557
+ >
2558
+ <svg
2559
+ color="black"
2560
+ data-file-name="SvgXInline"
2561
+ />
2562
+ </View>
2563
+ </View>
2564
+ </View>
2565
+ </View>
2566
+ <View
2567
+ style={
2568
+ Array [
2569
+ Object {
2570
+ "marginBottom": 20,
2571
+ },
2572
+ ]
2573
+ }
2574
+ >
2575
+ <View
2576
+ style={
2577
+ Array [
2578
+ Object {
2579
+ "marginBottom": 10,
2580
+ },
2581
+ ]
2582
+ }
2583
+ >
2584
+ <Text
2585
+ aria-level="3"
2586
+ color="black"
2587
+ isHeader={true}
2588
+ medium="header4"
2589
+ style={
2590
+ Array [
2591
+ Object {
2592
+ "color": "#000000",
2593
+ "fontFamily": "Moderat-Extended-Bold",
2594
+ "fontSize": 24,
2595
+ "fontStyle": "normal",
2596
+ "fontWeight": "400",
2597
+ "lineHeight": 31,
2598
+ "textDecorationColor": "#000000",
2599
+ },
2600
+ ]
2601
+ }
2602
+ type="header3"
2603
+ variant="bold"
2604
+ >
2605
+ Error
2606
+ </Text>
2607
+ </View>
2608
+ <View
2609
+ noRadius={false}
2610
+ style={
2611
+ Array [
2612
+ Object {
2613
+ "alignItems": "flex-start",
2614
+ "backgroundColor": "#D44148",
2615
+ "borderRadius": 20,
2616
+ "flexDirection": "row",
2617
+ "justifyContent": "space-between",
2618
+ "paddingBottom": 16,
2619
+ "paddingLeft": 16,
2620
+ "paddingRight": 16,
2621
+ "paddingTop": 16,
2622
+ },
2623
+ ]
2624
+ }
2625
+ type="danger"
2626
+ >
2627
+ <View
2628
+ style={
2629
+ Array [
2630
+ Object {
2631
+ "marginRight": 16,
2632
+ },
2633
+ ]
2634
+ }
2635
+ >
2636
+ <View
2637
+ color="white"
2638
+ size={20}
2639
+ style={
2640
+ Array [
2641
+ Object {
2642
+ "alignSelf": "auto",
2643
+ "color": "white",
2644
+ "height": 20,
2645
+ "width": 20,
2646
+ },
2647
+ ]
2648
+ }
2649
+ >
2650
+ <svg
2651
+ color="white"
2652
+ data-file-name="SvgAlertTriangleInline"
2653
+ />
2654
+ </View>
2655
+ </View>
2656
+ <Text
2657
+ centeredText={false}
2658
+ style={
2659
+ Array [
2660
+ Object {
2661
+ "flexBasis": 0,
2662
+ "flexGrow": 1,
2663
+ "flexShrink": 1,
2664
+ "textAlign": "left",
2665
+ },
2666
+ ]
2667
+ }
2668
+ type="danger"
2669
+ >
2670
+ <Text
2671
+ color="white"
2672
+ isHeader={false}
2673
+ style={
2674
+ Array [
2675
+ Object {
2676
+ "color": "#FFFFFF",
2677
+ "fontFamily": "NotoSans",
2678
+ "fontSize": 14,
2679
+ "fontStyle": "normal",
2680
+ "fontWeight": "400",
2681
+ "lineHeight": 22,
2682
+ "textDecorationColor": "#FFFFFF",
2683
+ },
2684
+ ]
2685
+ }
2686
+ type="body-small"
2687
+ variant="regular"
2688
+ >
2689
+ <Text
2690
+ isHeader={false}
2691
+ style={
2692
+ Array [
2693
+ Object {
2694
+ "fontFamily": "NotoSans-Bold",
2695
+ "fontSize": 16,
2696
+ "fontStyle": "normal",
2697
+ "fontWeight": "700",
2698
+ "lineHeight": 26,
2699
+ },
2700
+ ]
2701
+ }
2702
+ type="body"
2703
+ variant="bold"
2704
+ >
2705
+ This is a title
2706
+
2707
+
2708
+ </Text>
2709
+ <Text
2710
+ isHeader={false}
2711
+ style={
2712
+ Array [
2713
+ Object {
2714
+ "fontFamily": "NotoSans",
2715
+ "fontSize": 14,
2716
+ "fontStyle": "normal",
2717
+ "fontWeight": "400",
2718
+ "lineHeight": 22,
2719
+ },
2720
+ ]
2721
+ }
2722
+ type="body-small"
2723
+ variant="regular"
2724
+ >
2725
+ Error message goes here...
2726
+ </Text>
2727
+ </Text>
2728
+ </Text>
2729
+ <View
2730
+ accessible={true}
2731
+ focusable={true}
2732
+ onClick={[Function]}
2733
+ onResponderGrant={[Function]}
2734
+ onResponderMove={[Function]}
2735
+ onResponderRelease={[Function]}
2736
+ onResponderTerminate={[Function]}
2737
+ onResponderTerminationRequest={[Function]}
2738
+ onStartShouldSetResponder={[Function]}
2739
+ style={
2740
+ Object {
2741
+ "marginLeft": 16,
2742
+ "opacity": 1,
2743
+ "paddingBottom": 4,
2744
+ "paddingLeft": 4,
2745
+ "paddingRight": 4,
2746
+ "paddingTop": 4,
2747
+ }
2748
+ }
2749
+ >
2750
+ <View
2751
+ color="white"
2752
+ size={14}
2753
+ style={
2754
+ Array [
2755
+ Object {
2756
+ "alignSelf": "auto",
2757
+ "color": "white",
2758
+ "height": 14,
2759
+ "width": 14,
2760
+ },
2761
+ ]
2762
+ }
2763
+ >
2764
+ <svg
2765
+ color="white"
2766
+ data-file-name="SvgXInline"
2767
+ />
2768
+ </View>
2769
+ </View>
2770
+ </View>
2771
+ </View>
2772
+ </View>
2773
+ </View>
2774
+ </RCTScrollView>
2775
+ </RNCSafeAreaProvider>
2776
+ `;