@ornikar/bumper 2.8.1-canary.1768839311.501438316959a9593513e74c70cb87b0597f2db6.0 → 2.8.1-canary.1768927687.5a0439490957cfbbe8b8c5136c5fc68b0828466d.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/CHANGELOG.md +3 -6
  2. package/dist/definitions/index.d.ts +3 -0
  3. package/dist/definitions/index.d.ts.map +1 -1
  4. package/dist/definitions/system/content/icon/Icon.d.ts +4 -7
  5. package/dist/definitions/system/content/icon/Icon.d.ts.map +1 -1
  6. package/dist/definitions/system/content/typography/Typography.d.ts +8 -7
  7. package/dist/definitions/system/content/typography/Typography.d.ts.map +1 -1
  8. package/dist/definitions/system/content/typography/TypographyIcon.d.ts +9 -0
  9. package/dist/definitions/system/content/typography/TypographyIcon.d.ts.map +1 -0
  10. package/dist/definitions/system/content/typography/TypographyView.d.ts +18 -0
  11. package/dist/definitions/system/content/typography/TypographyView.d.ts.map +1 -0
  12. package/dist/definitions/system/content/typography/utils/getVariantAndWeightValues.d.ts +2 -1
  13. package/dist/definitions/system/content/typography/utils/getVariantAndWeightValues.d.ts.map +1 -1
  14. package/dist/definitions/system/content/typography/utils/typographyContext.d.ts +16 -0
  15. package/dist/definitions/system/content/typography/utils/typographyContext.d.ts.map +1 -0
  16. package/dist/definitions/system/core/primitives/Image/Image.d.ts +3 -0
  17. package/dist/definitions/system/core/primitives/Image/Image.d.ts.map +1 -0
  18. package/dist/index-metro.es.android.js +116 -11
  19. package/dist/index-metro.es.android.js.map +1 -1
  20. package/dist/index-metro.es.ios.js +116 -11
  21. package/dist/index-metro.es.ios.js.map +1 -1
  22. package/dist/index-node-22.22.cjs.js +119 -7
  23. package/dist/index-node-22.22.cjs.js.map +1 -1
  24. package/dist/index-node-22.22.cjs.web.js +119 -7
  25. package/dist/index-node-22.22.cjs.web.js.map +1 -1
  26. package/dist/index-node-22.22.es.mjs +120 -9
  27. package/dist/index-node-22.22.es.mjs.map +1 -1
  28. package/dist/index-node-22.22.es.web.mjs +120 -9
  29. package/dist/index-node-22.22.es.web.mjs.map +1 -1
  30. package/dist/index.es.js +114 -11
  31. package/dist/index.es.js.map +1 -1
  32. package/dist/index.es.web.js +114 -11
  33. package/dist/index.es.web.js.map +1 -1
  34. package/dist/tsbuildinfo +1 -1
  35. package/package.json +11 -10
  36. package/src/index.ts +3 -0
  37. package/src/system/content/icon/Icon.tsx +4 -14
  38. package/src/system/content/icon/__snapshots_web__/Icon.features.stories.tsx.snap +2 -2
  39. package/src/system/content/icon/__snapshots_web__/Icon.stories.tsx.snap +1 -1
  40. package/src/system/content/typography/Typography.tsx +24 -15
  41. package/src/system/content/typography/TypographyIcon.features.stories.tsx +163 -0
  42. package/src/system/content/typography/TypographyIcon.stories.tsx +52 -0
  43. package/src/system/content/typography/TypographyIcon.tsx +33 -0
  44. package/src/system/content/typography/TypographyView.tsx +34 -0
  45. package/src/system/content/typography/__snapshots__/TypographyIcon.features.stories.tsx.snap +839 -0
  46. package/src/system/content/typography/__snapshots__/TypographyIcon.stories.tsx.snap +31 -0
  47. package/src/system/content/typography/__snapshots_web__/Typography.features.stories.tsx.snap +7 -7
  48. package/src/system/content/typography/__snapshots_web__/Typography.stories.tsx.snap +1 -1
  49. package/src/system/content/typography/__snapshots_web__/TypographyIcon.features.stories.tsx.snap +543 -0
  50. package/src/system/content/typography/__snapshots_web__/TypographyIcon.stories.tsx.snap +37 -0
  51. package/src/system/content/typography/utils/getVariantAndWeightValues.tsx +2 -6
  52. package/src/system/content/typography/utils/typographyContext.ts +29 -0
  53. package/src/system/core/primitives/Image/Image.stories.tsx +39 -0
  54. package/src/system/core/primitives/Image/Image.ts +2 -0
  55. package/src/system/core/primitives/Image/__snapshots__/Image.stories.tsx.snap +30 -0
  56. package/src/system/core/primitives/Image/__snapshots_web__/Image.stories.tsx.snap +40 -0
  57. package/src/system/core/primitives/ScrollView/__snapshots_web__/ScrollView.features.stories.tsx.snap +11 -11
  58. package/src/system/core/primitives/ScrollView/__snapshots_web__/ScrollView.stories.tsx.snap +3 -3
  59. package/src/system/core/primitives/__snapshots_web__/Center.features.stories.tsx.snap +2 -2
  60. package/src/system/core/primitives/__snapshots_web__/Center.stories.tsx.snap +1 -1
  61. package/src/system/core/primitives/__snapshots_web__/Pressable.features.stories.tsx.snap +3 -3
  62. package/src/system/core/primitives/__snapshots_web__/Pressable.stories.tsx.snap +1 -1
  63. package/src/system/core/primitives/__snapshots_web__/Stack.features.stories.tsx.snap +6 -6
  64. package/src/system/core/primitives/__snapshots_web__/Stack.stories.tsx.snap +1 -1
  65. package/src/system/core/primitives/__snapshots_web__/View.features.stories.tsx.snap +11 -11
  66. package/src/system/core/primitives/__snapshots_web__/View.stories.tsx.snap +1 -1
  67. package/src/system/core/themes/__snapshots_web__/light.stories.tsx.snap +1 -1
  68. package/src/system/core/tokens/__snapshots_web__/breakpoints.stories.tsx.snap +1 -1
  69. package/src/system/core/tokens/__snapshots_web__/fonts.stories.tsx.snap +1 -1
  70. package/src/system/core/tokens/__snapshots_web__/radius.stories.tsx.snap +1 -1
  71. package/src/system/core/tokens/__snapshots_web__/size.stories.tsx.snap +1 -1
  72. package/src/system/core/tokens/__snapshots_web__/space.stories.tsx.snap +1 -1
  73. package/src/system/core/tokens/palettes/__snapshots_web__/deepPurpleColorPalette.stories.tsx.snap +1 -1
package/src/system/content/typography/__snapshots__/TypographyIcon.features.stories.tsx.snap ADDED
@@ -0,0 +1,839 @@
1
+ // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
2
+
3
+ exports[`Bumper/Content/TypographyIcon/Features DifferentSizes 1`] = `
4
+ <RNCSafeAreaProvider
5
+ onInsetsChange={[Function]}
6
+ style={
7
+ [
8
+ {
9
+ "flex": 1,
10
+ },
11
+ undefined,
12
+ ]
13
+ }
14
+ >
15
+ <View
16
+ style={
17
+ {
18
+ "flexDirection": "column",
19
+ "gap": 16,
20
+ }
21
+ }
22
+ >
23
+ <Text
24
+ style={
25
+ {
26
+ "color": "#563B56",
27
+ "fontFamily": "GTStandardSemibold",
28
+ "fontSize": 38,
29
+ "letterSpacing": 0,
30
+ "lineHeight": 44,
31
+ }
32
+ }
33
+ suppressHighlighting={true}
34
+ >
35
+ <View>
36
+ <View
37
+ style={
38
+ {
39
+ "height": 32,
40
+ "width": 32,
41
+ }
42
+ }
43
+ >
44
+ <svg
45
+ color="#563B56"
46
+ data-file-name="star.inline.svg"
47
+ />
48
+ </View>
49
+ </View>
50
+ Large heading with size 32 icon
51
+ </Text>
52
+ <Text
53
+ style={
54
+ {
55
+ "color": "#563B56",
56
+ "fontFamily": "GTStandard",
57
+ "fontSize": 16,
58
+ "letterSpacing": 0.3,
59
+ "lineHeight": 24,
60
+ }
61
+ }
62
+ suppressHighlighting={true}
63
+ >
64
+ <View>
65
+ <View
66
+ style={
67
+ {
68
+ "height": 20,
69
+ "width": 20,
70
+ }
71
+ }
72
+ >
73
+ <svg
74
+ color="#563B56"
75
+ data-file-name="star.inline.svg"
76
+ />
77
+ </View>
78
+ </View>
79
+ Body text with size 20 icon
80
+ </Text>
81
+ <Text
82
+ style={
83
+ {
84
+ "color": "#563B56",
85
+ "fontFamily": "GTStandard",
86
+ "fontSize": 14,
87
+ "letterSpacing": 0.3,
88
+ "lineHeight": 20,
89
+ }
90
+ }
91
+ suppressHighlighting={true}
92
+ >
93
+ <View>
94
+ <View
95
+ style={
96
+ {
97
+ "height": 16,
98
+ "width": 16,
99
+ }
100
+ }
101
+ >
102
+ <svg
103
+ color="#563B56"
104
+ data-file-name="star.inline.svg"
105
+ />
106
+ </View>
107
+ </View>
108
+ Small text with size 16 icon
109
+ </Text>
110
+ </View>
111
+ </RNCSafeAreaProvider>
112
+ `;
113
+
114
+ exports[`Bumper/Content/TypographyIcon/Features InheritFromTypography 1`] = `
115
+ <RNCSafeAreaProvider
116
+ onInsetsChange={[Function]}
117
+ style={
118
+ [
119
+ {
120
+ "flex": 1,
121
+ },
122
+ undefined,
123
+ ]
124
+ }
125
+ >
126
+ <View
127
+ style={
128
+ {
129
+ "flexDirection": "column",
130
+ "gap": 24,
131
+ }
132
+ }
133
+ >
134
+ <View
135
+ style={
136
+ {
137
+ "flexDirection": "column",
138
+ "gap": 8,
139
+ }
140
+ }
141
+ >
142
+ <Text
143
+ style={
144
+ {
145
+ "color": "#505050",
146
+ "fontFamily": "GTStandard",
147
+ "fontSize": 14,
148
+ "letterSpacing": 0.3,
149
+ "lineHeight": 20,
150
+ }
151
+ }
152
+ suppressHighlighting={true}
153
+ >
154
+ Icon inherits accent color from Typography
155
+ </Text>
156
+ <Text
157
+ style={
158
+ {
159
+ "color": "#563B56",
160
+ "fontFamily": "GTStandard",
161
+ "fontSize": 16,
162
+ "letterSpacing": 0.3,
163
+ "lineHeight": 24,
164
+ }
165
+ }
166
+ suppressHighlighting={true}
167
+ >
168
+ <View>
169
+ <View
170
+ style={
171
+ {
172
+ "height": 20,
173
+ "width": 20,
174
+ }
175
+ }
176
+ >
177
+ <svg
178
+ color="#563B56"
179
+ data-file-name="star.inline.svg"
180
+ />
181
+ </View>
182
+ </View>
183
+ This icon inherits the accent color
184
+ </Text>
185
+ </View>
186
+ <View
187
+ style={
188
+ {
189
+ "flexDirection": "column",
190
+ "gap": 8,
191
+ }
192
+ }
193
+ >
194
+ <Text
195
+ style={
196
+ {
197
+ "color": "#505050",
198
+ "fontFamily": "GTStandard",
199
+ "fontSize": 14,
200
+ "letterSpacing": 0.3,
201
+ "lineHeight": 20,
202
+ }
203
+ }
204
+ suppressHighlighting={true}
205
+ >
206
+ Icon inherits success color from Typography
207
+ </Text>
208
+ <Text
209
+ style={
210
+ {
211
+ "color": "#357105",
212
+ "fontFamily": "GTStandard",
213
+ "fontSize": 16,
214
+ "letterSpacing": 0.3,
215
+ "lineHeight": 24,
216
+ }
217
+ }
218
+ suppressHighlighting={true}
219
+ >
220
+ <View>
221
+ <View
222
+ style={
223
+ {
224
+ "height": 20,
225
+ "width": 20,
226
+ }
227
+ }
228
+ >
229
+ <svg
230
+ color="#357105"
231
+ data-file-name="check-circle.inline.svg"
232
+ />
233
+ </View>
234
+ </View>
235
+ Operation completed successfully
236
+ </Text>
237
+ </View>
238
+ <View
239
+ style={
240
+ {
241
+ "flexDirection": "column",
242
+ "gap": 8,
243
+ }
244
+ }
245
+ >
246
+ <Text
247
+ style={
248
+ {
249
+ "color": "#505050",
250
+ "fontFamily": "GTStandard",
251
+ "fontSize": 14,
252
+ "letterSpacing": 0.3,
253
+ "lineHeight": 20,
254
+ }
255
+ }
256
+ suppressHighlighting={true}
257
+ >
258
+ Icon inherits danger color from Typography
259
+ </Text>
260
+ <Text
261
+ style={
262
+ {
263
+ "color": "#BD100F",
264
+ "fontFamily": "GTStandard",
265
+ "fontSize": 16,
266
+ "letterSpacing": 0.3,
267
+ "lineHeight": 24,
268
+ }
269
+ }
270
+ suppressHighlighting={true}
271
+ >
272
+ <View>
273
+ <View
274
+ style={
275
+ {
276
+ "height": 20,
277
+ "width": 20,
278
+ }
279
+ }
280
+ >
281
+ <svg
282
+ color="#BD100F"
283
+ data-file-name="warning.inline.svg"
284
+ />
285
+ </View>
286
+ </View>
287
+ Error: Something went wrong
288
+ </Text>
289
+ </View>
290
+ <View
291
+ style={
292
+ {
293
+ "flexDirection": "column",
294
+ "gap": 8,
295
+ }
296
+ }
297
+ >
298
+ <Text
299
+ style={
300
+ {
301
+ "color": "#505050",
302
+ "fontFamily": "GTStandard",
303
+ "fontSize": 14,
304
+ "letterSpacing": 0.3,
305
+ "lineHeight": 20,
306
+ }
307
+ }
308
+ suppressHighlighting={true}
309
+ >
310
+ Icon inherits warning color from Typography
311
+ </Text>
312
+ <Text
313
+ style={
314
+ {
315
+ "color": "#BA930B",
316
+ "fontFamily": "GTStandard",
317
+ "fontSize": 16,
318
+ "letterSpacing": 0.3,
319
+ "lineHeight": 24,
320
+ }
321
+ }
322
+ suppressHighlighting={true}
323
+ >
324
+ <View>
325
+ <View
326
+ style={
327
+ {
328
+ "height": 20,
329
+ "width": 20,
330
+ }
331
+ }
332
+ >
333
+ <svg
334
+ color="#BA930B"
335
+ data-file-name="info.inline.svg"
336
+ />
337
+ </View>
338
+ </View>
339
+ Warning: Please review this item
340
+ </Text>
341
+ </View>
342
+ </View>
343
+ </RNCSafeAreaProvider>
344
+ `;
345
+
346
+ exports[`Bumper/Content/TypographyIcon/Features NestedTypographyInheritance 1`] = `
347
+ <RNCSafeAreaProvider
348
+ onInsetsChange={[Function]}
349
+ style={
350
+ [
351
+ {
352
+ "flex": 1,
353
+ },
354
+ undefined,
355
+ ]
356
+ }
357
+ >
358
+ <View
359
+ style={
360
+ {
361
+ "flexDirection": "column",
362
+ "gap": 24,
363
+ }
364
+ }
365
+ >
366
+ <View
367
+ style={
368
+ {
369
+ "flexDirection": "column",
370
+ "gap": 8,
371
+ }
372
+ }
373
+ >
374
+ <Text
375
+ style={
376
+ {
377
+ "color": "#505050",
378
+ "fontFamily": "GTStandard",
379
+ "fontSize": 14,
380
+ "letterSpacing": 0.3,
381
+ "lineHeight": 20,
382
+ }
383
+ }
384
+ suppressHighlighting={true}
385
+ >
386
+ Nested Typography components - icon inherits from parent
387
+ </Text>
388
+ <Text
389
+ style={
390
+ {
391
+ "color": "#563B56",
392
+ "fontFamily": "GTStandard",
393
+ "fontSize": 18,
394
+ "letterSpacing": 0.3,
395
+ "lineHeight": 26,
396
+ }
397
+ }
398
+ suppressHighlighting={true}
399
+ >
400
+ <View>
401
+ <View
402
+ style={
403
+ {
404
+ "height": 20,
405
+ "width": 20,
406
+ }
407
+ }
408
+ >
409
+ <svg
410
+ color="#563B56"
411
+ data-file-name="star.inline.svg"
412
+ />
413
+ </View>
414
+ </View>
415
+ Parent text with icon
416
+ <Text
417
+ style={
418
+ {
419
+ "color": "#563B56",
420
+ "fontFamily": "GTStandard",
421
+ "fontSize": 16,
422
+ "letterSpacing": 0.3,
423
+ "lineHeight": 24,
424
+ }
425
+ }
426
+ suppressHighlighting={true}
427
+ >
428
+ <View>
429
+ <View
430
+ style={
431
+ {
432
+ "height": 16,
433
+ "width": 16,
434
+ }
435
+ }
436
+ >
437
+ <svg
438
+ color="#563B56"
439
+ data-file-name="check-circle.inline.svg"
440
+ />
441
+ </View>
442
+ </View>
443
+ Nested text - icon inherits parent color
444
+ </Text>
445
+ </Text>
446
+ </View>
447
+ <View
448
+ style={
449
+ {
450
+ "flexDirection": "column",
451
+ "gap": 8,
452
+ }
453
+ }
454
+ >
455
+ <Text
456
+ style={
457
+ {
458
+ "color": "#505050",
459
+ "fontFamily": "GTStandard",
460
+ "fontSize": 14,
461
+ "letterSpacing": 0.3,
462
+ "lineHeight": 20,
463
+ }
464
+ }
465
+ suppressHighlighting={true}
466
+ >
467
+ Nested with override - child overrides parent color
468
+ </Text>
469
+ <Text
470
+ style={
471
+ {
472
+ "color": "#563B56",
473
+ "fontFamily": "GTStandard",
474
+ "fontSize": 18,
475
+ "letterSpacing": 0.3,
476
+ "lineHeight": 26,
477
+ }
478
+ }
479
+ suppressHighlighting={true}
480
+ >
481
+ <View>
482
+ <View
483
+ style={
484
+ {
485
+ "height": 20,
486
+ "width": 20,
487
+ }
488
+ }
489
+ >
490
+ <svg
491
+ color="#563B56"
492
+ data-file-name="star.inline.svg"
493
+ />
494
+ </View>
495
+ </View>
496
+ Parent accent color
497
+ <Text
498
+ style={
499
+ {
500
+ "color": "#357105",
501
+ "fontFamily": "GTStandard",
502
+ "fontSize": 16,
503
+ "letterSpacing": 0.3,
504
+ "lineHeight": 24,
505
+ }
506
+ }
507
+ suppressHighlighting={true}
508
+ >
509
+ <View>
510
+ <View
511
+ style={
512
+ {
513
+ "height": 16,
514
+ "width": 16,
515
+ }
516
+ }
517
+ >
518
+ <svg
519
+ color="#357105"
520
+ data-file-name="check-circle.inline.svg"
521
+ />
522
+ </View>
523
+ </View>
524
+ Child overrides to success
525
+ </Text>
526
+ </Text>
527
+ </View>
528
+ </View>
529
+ </RNCSafeAreaProvider>
530
+ `;
531
+
532
+ exports[`Bumper/Content/TypographyIcon/Features OverrideInheritedColor 1`] = `
533
+ <RNCSafeAreaProvider
534
+ onInsetsChange={[Function]}
535
+ style={
536
+ [
537
+ {
538
+ "flex": 1,
539
+ },
540
+ undefined,
541
+ ]
542
+ }
543
+ >
544
+ <View
545
+ style={
546
+ {
547
+ "flexDirection": "column",
548
+ "gap": 24,
549
+ }
550
+ }
551
+ >
552
+ <View
553
+ style={
554
+ {
555
+ "flexDirection": "column",
556
+ "gap": 8,
557
+ }
558
+ }
559
+ >
560
+ <Text
561
+ style={
562
+ {
563
+ "color": "#505050",
564
+ "fontFamily": "GTStandard",
565
+ "fontSize": 14,
566
+ "letterSpacing": 0.3,
567
+ "lineHeight": 20,
568
+ }
569
+ }
570
+ suppressHighlighting={true}
571
+ >
572
+ Typography is accent, but icon explicitly uses success color
573
+ </Text>
574
+ <Text
575
+ style={
576
+ {
577
+ "color": "#563B56",
578
+ "fontFamily": "GTStandard",
579
+ "fontSize": 16,
580
+ "letterSpacing": 0.3,
581
+ "lineHeight": 24,
582
+ }
583
+ }
584
+ suppressHighlighting={true}
585
+ >
586
+ <View>
587
+ <View
588
+ style={
589
+ {
590
+ "height": 20,
591
+ "width": 20,
592
+ }
593
+ }
594
+ >
595
+ <svg
596
+ color="#357105"
597
+ data-file-name="check-circle.inline.svg"
598
+ />
599
+ </View>
600
+ </View>
601
+ Icon overrides inherited color
602
+ </Text>
603
+ </View>
604
+ <View
605
+ style={
606
+ {
607
+ "flexDirection": "column",
608
+ "gap": 8,
609
+ }
610
+ }
611
+ >
612
+ <Text
613
+ style={
614
+ {
615
+ "color": "#505050",
616
+ "fontFamily": "GTStandard",
617
+ "fontSize": 14,
618
+ "letterSpacing": 0.3,
619
+ "lineHeight": 20,
620
+ }
621
+ }
622
+ suppressHighlighting={true}
623
+ >
624
+ Typography is success, but icon explicitly uses danger color
625
+ </Text>
626
+ <Text
627
+ style={
628
+ {
629
+ "color": "#357105",
630
+ "fontFamily": "GTStandard",
631
+ "fontSize": 16,
632
+ "letterSpacing": 0.3,
633
+ "lineHeight": 24,
634
+ }
635
+ }
636
+ suppressHighlighting={true}
637
+ >
638
+ <View>
639
+ <View
640
+ style={
641
+ {
642
+ "height": 20,
643
+ "width": 20,
644
+ }
645
+ }
646
+ >
647
+ <svg
648
+ color="#BD100F"
649
+ data-file-name="warning.inline.svg"
650
+ />
651
+ </View>
652
+ </View>
653
+ Mixed color scenario
654
+ </Text>
655
+ </View>
656
+ </View>
657
+ </RNCSafeAreaProvider>
658
+ `;
659
+
660
+ exports[`Bumper/Content/TypographyIcon/Features WithExplicitColor 1`] = `
661
+ <RNCSafeAreaProvider
662
+ onInsetsChange={[Function]}
663
+ style={
664
+ [
665
+ {
666
+ "flex": 1,
667
+ },
668
+ undefined,
669
+ ]
670
+ }
671
+ >
672
+ <View
673
+ style={
674
+ {
675
+ "alignItems": "center",
676
+ "flexDirection": "row",
677
+ "gap": 16,
678
+ }
679
+ }
680
+ >
681
+ <View
682
+ style={
683
+ {
684
+ "alignItems": "center",
685
+ "flexDirection": "column",
686
+ "gap": 8,
687
+ }
688
+ }
689
+ >
690
+ <View>
691
+ <View
692
+ style={
693
+ {
694
+ "height": 24,
695
+ "width": 24,
696
+ }
697
+ }
698
+ >
699
+ <svg
700
+ color="#563B56"
701
+ data-file-name="star.inline.svg"
702
+ />
703
+ </View>
704
+ </View>
705
+ <Text
706
+ style={
707
+ {
708
+ "color": "#505050",
709
+ "fontFamily": "GTStandard",
710
+ "fontSize": 12,
711
+ "letterSpacing": 0.3,
712
+ "lineHeight": 16,
713
+ }
714
+ }
715
+ suppressHighlighting={true}
716
+ >
717
+ Explicit accent
718
+ </Text>
719
+ </View>
720
+ <View
721
+ style={
722
+ {
723
+ "alignItems": "center",
724
+ "flexDirection": "column",
725
+ "gap": 8,
726
+ }
727
+ }
728
+ >
729
+ <View>
730
+ <View
731
+ style={
732
+ {
733
+ "height": 24,
734
+ "width": 24,
735
+ }
736
+ }
737
+ >
738
+ <svg
739
+ color="#357105"
740
+ data-file-name="check-circle.inline.svg"
741
+ />
742
+ </View>
743
+ </View>
744
+ <Text
745
+ style={
746
+ {
747
+ "color": "#505050",
748
+ "fontFamily": "GTStandard",
749
+ "fontSize": 12,
750
+ "letterSpacing": 0.3,
751
+ "lineHeight": 16,
752
+ }
753
+ }
754
+ suppressHighlighting={true}
755
+ >
756
+ Explicit success
757
+ </Text>
758
+ </View>
759
+ <View
760
+ style={
761
+ {
762
+ "alignItems": "center",
763
+ "flexDirection": "column",
764
+ "gap": 8,
765
+ }
766
+ }
767
+ >
768
+ <View>
769
+ <View
770
+ style={
771
+ {
772
+ "height": 24,
773
+ "width": 24,
774
+ }
775
+ }
776
+ >
777
+ <svg
778
+ color="#BA930B"
779
+ data-file-name="warning.inline.svg"
780
+ />
781
+ </View>
782
+ </View>
783
+ <Text
784
+ style={
785
+ {
786
+ "color": "#505050",
787
+ "fontFamily": "GTStandard",
788
+ "fontSize": 12,
789
+ "letterSpacing": 0.3,
790
+ "lineHeight": 16,
791
+ }
792
+ }
793
+ suppressHighlighting={true}
794
+ >
795
+ Explicit warning
796
+ </Text>
797
+ </View>
798
+ <View
799
+ style={
800
+ {
801
+ "alignItems": "center",
802
+ "flexDirection": "column",
803
+ "gap": 8,
804
+ }
805
+ }
806
+ >
807
+ <View>
808
+ <View
809
+ style={
810
+ {
811
+ "height": 24,
812
+ "width": 24,
813
+ }
814
+ }
815
+ >
816
+ <svg
817
+ color="#BD100F"
818
+ data-file-name="warning.inline.svg"
819
+ />
820
+ </View>
821
+ </View>
822
+ <Text
823
+ style={
824
+ {
825
+ "color": "#505050",
826
+ "fontFamily": "GTStandard",
827
+ "fontSize": 12,
828
+ "letterSpacing": 0.3,
829
+ "lineHeight": 16,
830
+ }
831
+ }
832
+ suppressHighlighting={true}
833
+ >
834
+ Explicit danger
835
+ </Text>
836
+ </View>
837
+ </View>
838
+ </RNCSafeAreaProvider>
839
+ `;