@hero-design/rn 8.42.3 → 8.43.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 (50) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/CHANGELOG.md +11 -0
  3. package/assets/fonts/hero-icons-mobile.ttf +0 -0
  4. package/es/index.js +670 -499
  5. package/lib/assets/fonts/hero-icons-mobile.ttf +0 -0
  6. package/lib/index.js +1109 -937
  7. package/package.json +7 -7
  8. package/src/components/BottomSheet/__tests__/__snapshots__/index.spec.tsx.snap +197 -211
  9. package/src/components/BottomSheet/index.tsx +1 -1
  10. package/src/components/Button/LoadingIndicator/StyledLoadingIndicator.tsx +6 -10
  11. package/src/components/Button/LoadingIndicator/__tests__/__snapshots__/StyledLoadingIndicator.spec.tsx.snap +0 -20
  12. package/src/components/Button/LoadingIndicator/__tests__/__snapshots__/index.spec.tsx.snap +0 -70
  13. package/src/components/Button/StyledButton.tsx +4 -0
  14. package/src/components/Button/__tests__/__snapshots__/Button.spec.tsx.snap +16 -42
  15. package/src/components/Button/__tests__/__snapshots__/StyledButton.spec.tsx.snap +10 -0
  16. package/src/components/Carousel/__tests__/__snapshots__/index.spec.tsx.snap +3 -0
  17. package/src/components/Carousel/__tests__/index.spec.tsx +8 -10
  18. package/src/components/Chip/StyledChip.tsx +121 -0
  19. package/src/components/Chip/__tests__/__snapshots__/index.spec.tsx.snap +943 -0
  20. package/src/components/Chip/__tests__/index.spec.tsx +136 -0
  21. package/src/components/Chip/index.tsx +82 -0
  22. package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap +12 -0
  23. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap +417 -399
  24. package/src/components/Error/__tests__/index.spec.tsx +9 -6
  25. package/src/components/Icon/HeroIcon/glyphMap.json +1 -1
  26. package/src/components/Icon/IconList.ts +1 -0
  27. package/src/components/RichTextEditor/__tests__/RichTextEditor.spec.tsx +8 -10
  28. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +367 -451
  29. package/src/components/Select/MultiSelect/__tests__/index.spec.tsx +7 -10
  30. package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +357 -419
  31. package/src/components/Success/__tests__/index.spec.tsx +9 -6
  32. package/src/components/Tabs/__tests__/SceneView.spec.tsx +19 -23
  33. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap +417 -399
  34. package/src/index.ts +2 -0
  35. package/src/testHelpers/renderWithTheme.tsx +1 -7
  36. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +38 -1
  37. package/src/theme/components/button.ts +0 -1
  38. package/src/theme/components/chip.ts +47 -0
  39. package/src/theme/getTheme.ts +3 -0
  40. package/types/components/Button/LoadingIndicator/StyledLoadingIndicator.d.ts +3 -3
  41. package/types/components/Chip/StyledChip.d.ts +31 -0
  42. package/types/components/Chip/index.d.ts +26 -0
  43. package/types/components/Icon/IconList.d.ts +1 -1
  44. package/types/components/Icon/index.d.ts +1 -1
  45. package/types/components/Icon/utils.d.ts +1 -1
  46. package/types/index.d.ts +2 -1
  47. package/types/theme/components/button.d.ts +0 -1
  48. package/types/theme/components/chip.d.ts +40 -0
  49. package/types/theme/getTheme.d.ts +2 -0
  50. package/.turbo/turbo-publish:npm.log +0 -0
package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap CHANGED
@@ -229,40 +229,53 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
229
229
  `;
230
230
 
231
231
  exports[`TimePickerIOS renders correctly 1`] = `
232
- [
233
- <View
234
- accessibilityState={
235
- {
236
- "disabled": false,
237
- }
232
+ <View
233
+ accessibilityState={
234
+ {
235
+ "disabled": false,
238
236
  }
239
- accessible={true}
240
- collapsable={false}
241
- focusable={true}
242
- onClick={[Function]}
243
- onResponderGrant={[Function]}
244
- onResponderMove={[Function]}
245
- onResponderRelease={[Function]}
246
- onResponderTerminate={[Function]}
247
- onResponderTerminationRequest={[Function]}
248
- onStartShouldSetResponder={[Function]}
249
- style={
250
- {
251
- "opacity": 1,
252
- }
237
+ }
238
+ accessible={true}
239
+ collapsable={false}
240
+ focusable={true}
241
+ onClick={[Function]}
242
+ onResponderGrant={[Function]}
243
+ onResponderMove={[Function]}
244
+ onResponderRelease={[Function]}
245
+ onResponderTerminate={[Function]}
246
+ onResponderTerminationRequest={[Function]}
247
+ onStartShouldSetResponder={[Function]}
248
+ style={
249
+ {
250
+ "opacity": 1,
253
251
  }
252
+ }
253
+ >
254
+ <View
255
+ pointerEvents="none"
256
+ testID="timePickerInputIOS"
254
257
  >
255
258
  <View
256
- pointerEvents="none"
257
- testID="timePickerInputIOS"
259
+ pointerEvents="auto"
260
+ style={
261
+ [
262
+ {
263
+ "marginTop": 8,
264
+ "width": "100%",
265
+ },
266
+ undefined,
267
+ ]
268
+ }
258
269
  >
259
270
  <View
260
- pointerEvents="auto"
261
271
  style={
262
272
  [
263
273
  {
264
- "marginTop": 8,
265
- "width": "100%",
274
+ "alignItems": "center",
275
+ "backgroundColor": "#ffffff",
276
+ "borderRadius": 8,
277
+ "flexDirection": "row",
278
+ "padding": 16,
266
279
  },
267
280
  undefined,
268
281
  ]
@@ -272,358 +285,247 @@ exports[`TimePickerIOS renders correctly 1`] = `
272
285
  style={
273
286
  [
274
287
  {
275
- "alignItems": "center",
276
- "backgroundColor": "#ffffff",
288
+ "borderColor": "#001f23",
277
289
  "borderRadius": 8,
290
+ "borderWidth": 1,
291
+ "bottom": 0,
292
+ "left": 0,
293
+ "position": "absolute",
294
+ "right": 0,
295
+ "top": 0,
296
+ },
297
+ [
298
+ {
299
+ "backgroundColor": "#ffffff",
300
+ },
301
+ undefined,
302
+ ],
303
+ ]
304
+ }
305
+ testID="text-input-border"
306
+ themeFocused={false}
307
+ themeState="filled"
308
+ />
309
+ <View
310
+ pointerEvents="none"
311
+ style={
312
+ [
313
+ {
314
+ "backgroundColor": "#ffffff",
278
315
  "flexDirection": "row",
279
- "padding": 16,
316
+ "left": 16,
317
+ "paddingHorizontal": 4,
318
+ "position": "absolute",
319
+ "top": -4,
320
+ "zIndex": 1,
321
+ },
322
+ {
323
+ "backgroundColor": "#ffffff",
280
324
  },
281
- undefined,
282
325
  ]
283
326
  }
327
+ testID="label-container"
284
328
  >
285
- <View
329
+ <Text
330
+ allowFontScaling={false}
286
331
  style={
287
332
  [
288
333
  {
289
- "borderColor": "#001f23",
290
- "borderRadius": 8,
291
- "borderWidth": 1,
292
- "bottom": 0,
293
- "left": 0,
294
- "position": "absolute",
295
- "right": 0,
296
- "top": 0,
334
+ "color": "#001f23",
335
+ "fontFamily": "BeVietnamPro-Regular",
336
+ "fontSize": 12,
337
+ "letterSpacing": 0.48,
338
+ "lineHeight": 16,
297
339
  },
298
340
  [
341
+ {
342
+ "color": "#001f23",
343
+ "lineHeight": 12,
344
+ },
299
345
  {
300
346
  "backgroundColor": "#ffffff",
301
347
  },
302
- undefined,
303
348
  ],
304
349
  ]
305
350
  }
306
- testID="text-input-border"
307
- themeFocused={false}
351
+ testID="input-label"
352
+ themeFontWeight="regular"
353
+ themeIntent="body"
308
354
  themeState="filled"
309
- />
310
- <View
311
- pointerEvents="none"
312
- style={
313
- [
314
- {
315
- "backgroundColor": "#ffffff",
316
- "flexDirection": "row",
317
- "left": 16,
318
- "paddingHorizontal": 4,
319
- "position": "absolute",
320
- "top": -4,
321
- "zIndex": 1,
322
- },
323
- {
324
- "backgroundColor": "#ffffff",
325
- },
326
- ]
327
- }
328
- testID="label-container"
329
355
  >
330
- <Text
331
- allowFontScaling={false}
332
- style={
333
- [
334
- {
335
- "color": "#001f23",
336
- "fontFamily": "BeVietnamPro-Regular",
337
- "fontSize": 12,
338
- "letterSpacing": 0.48,
339
- "lineHeight": 16,
340
- },
341
- [
342
- {
343
- "color": "#001f23",
344
- "lineHeight": 12,
345
- },
346
- {
347
- "backgroundColor": "#ffffff",
348
- },
349
- ],
350
- ]
356
+ Break time
357
+ </Text>
358
+ </View>
359
+ <View
360
+ style={
361
+ [
362
+ {
363
+ "alignItems": "center",
364
+ "alignSelf": "stretch",
365
+ "flexDirection": "row",
366
+ "flexGrow": 2,
367
+ "flexShrink": 1,
368
+ },
369
+ undefined,
370
+ ]
371
+ }
372
+ >
373
+ <TextInput
374
+ accessibilityState={
375
+ {
376
+ "disabled": false,
351
377
  }
352
- testID="input-label"
353
- themeFontWeight="regular"
354
- themeIntent="body"
355
- themeState="filled"
356
- >
357
- Break time
358
- </Text>
359
- </View>
360
- <View
378
+ }
379
+ allowFontScaling={false}
380
+ editable={true}
381
+ onBlur={[Function]}
382
+ onChangeText={[Function]}
383
+ onFocus={[Function]}
384
+ placeholder=" "
361
385
  style={
362
386
  [
363
387
  {
364
- "alignItems": "center",
365
388
  "alignSelf": "stretch",
366
- "flexDirection": "row",
367
389
  "flexGrow": 2,
368
- "flexShrink": 1,
390
+ "fontFamily": "BeVietnamPro-Regular",
391
+ "fontSize": 16,
392
+ "height": undefined,
393
+ "marginHorizontal": 8,
394
+ "maxHeight": 144,
395
+ "paddingVertical": 0,
396
+ "textAlignVertical": "center",
369
397
  },
370
- undefined,
371
- ]
372
- }
373
- >
374
- <TextInput
375
- accessibilityState={
376
- {
377
- "disabled": false,
378
- }
379
- }
380
- allowFontScaling={false}
381
- editable={true}
382
- onBlur={[Function]}
383
- onChangeText={[Function]}
384
- onFocus={[Function]}
385
- placeholder=" "
386
- style={
387
- [
388
- {
389
- "alignSelf": "stretch",
390
- "flexGrow": 2,
391
- "fontFamily": "BeVietnamPro-Regular",
392
- "fontSize": 16,
393
- "height": undefined,
394
- "marginHorizontal": 8,
395
- "maxHeight": 144,
396
- "paddingVertical": 0,
397
- "textAlignVertical": "center",
398
- },
399
- {
400
- "backgroundColor": "#ffffff",
401
- "color": "#001f23",
402
- },
403
- ]
404
- }
405
- testID="text-input"
406
- themeVariant="text"
407
- value="03:24 AM"
408
- />
409
- </View>
410
- <HeroIcon
411
- name="clock-3"
412
- style={
413
- [
414
398
  {
399
+ "backgroundColor": "#ffffff",
415
400
  "color": "#001f23",
416
- "fontSize": 24,
417
401
  },
418
- undefined,
419
402
  ]
420
403
  }
421
- testID="input-suffix"
422
- themeIntent="text"
423
- themeSize="medium"
404
+ testID="text-input"
405
+ themeVariant="text"
406
+ value="03:24 AM"
424
407
  />
425
408
  </View>
409
+ <HeroIcon
410
+ name="clock-3"
411
+ style={
412
+ [
413
+ {
414
+ "color": "#001f23",
415
+ "fontSize": 24,
416
+ },
417
+ undefined,
418
+ ]
419
+ }
420
+ testID="input-suffix"
421
+ themeIntent="text"
422
+ themeSize="medium"
423
+ />
424
+ </View>
425
+ <View
426
+ style={
427
+ [
428
+ {
429
+ "minHeight": 16,
430
+ "paddingLeft": 16,
431
+ "paddingTop": 2,
432
+ },
433
+ undefined,
434
+ ]
435
+ }
436
+ >
426
437
  <View
427
438
  style={
428
439
  [
429
440
  {
430
- "minHeight": 16,
431
- "paddingLeft": 16,
432
- "paddingTop": 2,
441
+ "flexDirection": "row",
442
+ "justifyContent": "space-between",
433
443
  },
434
444
  undefined,
435
445
  ]
436
446
  }
437
- >
438
- <View
439
- style={
440
- [
441
- {
442
- "flexDirection": "row",
443
- "justifyContent": "space-between",
444
- },
445
- undefined,
446
- ]
447
- }
448
- />
449
- </View>
447
+ />
450
448
  </View>
451
449
  </View>
452
- </View>,
453
- <View
454
- collapsable={false}
455
- style={
456
- {
457
- "backgroundColor": "transparent",
458
- "bottom": 0,
459
- "left": 0,
460
- "opacity": 0.4,
461
- "position": "absolute",
462
- "right": 0,
463
- "top": 0,
464
- }
465
- }
466
- />,
467
- <View
468
- collapsable={false}
450
+ </View>
451
+ <RCTModalHostView
452
+ animationType="none"
453
+ hardwareAccelerated={false}
454
+ identifier={0}
455
+ onDismiss={[Function]}
456
+ onRequestClose={[Function]}
457
+ onStartShouldSetResponder={[Function]}
458
+ presentationStyle="overFullScreen"
469
459
  style={
470
460
  {
471
- "bottom": 0,
472
- "left": 0,
473
- "opacity": 1,
474
461
  "position": "absolute",
475
- "right": 0,
476
- "top": 0,
477
- "transform": [
478
- {
479
- "translateY": 0,
480
- },
481
- ],
482
462
  }
483
463
  }
464
+ transparent={true}
465
+ visible={true}
484
466
  >
485
467
  <View
486
- pointerEvents="box-none"
468
+ collapsable={false}
487
469
  style={
488
470
  [
489
471
  {
490
- "bottom": 0,
491
- "flexDirection": "column-reverse",
472
+ "flex": 1,
492
473
  "left": 0,
493
- "position": "absolute",
494
- "right": 0,
495
474
  "top": 0,
496
475
  },
497
- undefined,
476
+ {
477
+ "backgroundColor": "transparent",
478
+ },
498
479
  ]
499
480
  }
500
481
  >
501
482
  <View
502
- onLayout={[Function]}
483
+ pointerEvents="box-none"
503
484
  style={
504
- [
505
- [
506
- {
507
- "flex": 1,
508
- "flexDirection": "column-reverse",
509
- },
510
- undefined,
511
- ],
512
- {
513
- "paddingBottom": 0,
514
- },
515
- ]
485
+ {
486
+ "flex": 1,
487
+ }
516
488
  }
517
489
  >
518
490
  <View
519
- accessible={true}
520
- collapsable={false}
521
- focusable={true}
522
- onBlur={[Function]}
523
- onClick={[Function]}
524
- onFocus={[Function]}
525
- onResponderGrant={[Function]}
526
- onResponderMove={[Function]}
527
- onResponderRelease={[Function]}
528
- onResponderTerminate={[Function]}
529
- onResponderTerminationRequest={[Function]}
530
- onStartShouldSetResponder={[Function]}
491
+ collapsable={true}
492
+ pointerEvents="box-none"
531
493
  style={
532
494
  {
533
- "backgroundColor": "#000000",
534
- "bottom": 0,
535
- "left": 0,
536
- "opacity": 0.48,
537
- "position": "absolute",
538
- "right": 0,
539
- "top": 0,
540
- }
541
- }
542
- />
543
- <RCTSafeAreaView
544
- collapsable={false}
545
- emulateUnlessSupported={true}
546
- style={
547
- {
548
- "backgroundColor": "#ffffff",
549
- "borderTopLeftRadius": 16,
550
- "borderTopRightRadius": 16,
551
- "elevation": 10,
552
- "maxHeight": "94%",
553
- "shadowColor": "#001f23",
554
- "shadowOffset": {
555
- "height": 3,
556
- "width": 0,
557
- },
558
- "shadowOpacity": 0.4,
559
- "shadowRadius": 16,
560
- "transform": [
561
- {
562
- "scaleY": 1,
563
- },
564
- {
565
- "translateY": 0,
566
- },
567
- ],
568
- "width": "100%",
495
+ "flex": 1,
569
496
  }
570
497
  }
571
498
  >
572
499
  <View
500
+ pointerEvents="box-none"
573
501
  style={
574
502
  [
575
503
  {
576
- "flexDirection": "row",
577
- "paddingHorizontal": 16,
578
- "paddingVertical": 8,
504
+ "bottom": 0,
505
+ "flexDirection": "column-reverse",
506
+ "left": 0,
507
+ "position": "absolute",
508
+ "right": 0,
509
+ "top": 0,
579
510
  },
580
511
  undefined,
581
512
  ]
582
513
  }
583
514
  >
584
515
  <View
516
+ onLayout={[Function]}
585
517
  style={
586
518
  [
587
- {
588
- "flex": 1,
589
- "justifyContent": "center",
590
- },
591
- undefined,
592
- ]
593
- }
594
- >
595
- <Text
596
- allowFontScaling={false}
597
- style={
598
519
  [
599
520
  {
600
- "color": "#001f23",
601
- "fontFamily": "BeVietnamPro-SemiBold",
602
- "fontSize": 16,
603
- "letterSpacing": 0.24,
604
- "lineHeight": 24,
521
+ "flex": 1,
522
+ "flexDirection": "column-reverse",
605
523
  },
606
524
  undefined,
607
- ]
608
- }
609
- themeIntent="body"
610
- themeTypeface="neutral"
611
- themeVariant="regular-bold"
612
- >
613
- Break time
614
- </Text>
615
- </View>
616
- <View
617
- style={
618
- [
525
+ ],
619
526
  {
620
- "alignItems": "center",
621
- "height": 48,
622
- "justifyContent": "center",
623
- "marginLeft": 12,
624
- "width": 48,
527
+ "paddingBottom": 0,
625
528
  },
626
- undefined,
627
529
  ]
628
530
  }
629
531
  >
@@ -631,7 +533,9 @@ exports[`TimePickerIOS renders correctly 1`] = `
631
533
  accessible={true}
632
534
  collapsable={false}
633
535
  focusable={true}
536
+ onBlur={[Function]}
634
537
  onClick={[Function]}
538
+ onFocus={[Function]}
635
539
  onResponderGrant={[Function]}
636
540
  onResponderMove={[Function]}
637
541
  onResponderRelease={[Function]}
@@ -640,135 +544,249 @@ exports[`TimePickerIOS renders correctly 1`] = `
640
544
  onStartShouldSetResponder={[Function]}
641
545
  style={
642
546
  {
643
- "opacity": 1,
547
+ "backgroundColor": "#000000",
548
+ "bottom": 0,
549
+ "left": 0,
550
+ "opacity": 0.48,
551
+ "position": "absolute",
552
+ "right": 0,
553
+ "top": 0,
644
554
  }
645
555
  }
646
- testID="bottom-sheet-close-icon"
647
- >
648
- <HeroIcon
649
- name="cancel"
650
- style={
651
- [
556
+ />
557
+ <RCTSafeAreaView
558
+ collapsable={false}
559
+ emulateUnlessSupported={true}
560
+ style={
561
+ {
562
+ "backgroundColor": "#ffffff",
563
+ "borderTopLeftRadius": 16,
564
+ "borderTopRightRadius": 16,
565
+ "elevation": 10,
566
+ "maxHeight": "94%",
567
+ "shadowColor": "#001f23",
568
+ "shadowOffset": {
569
+ "height": 3,
570
+ "width": 0,
571
+ },
572
+ "shadowOpacity": 0.4,
573
+ "shadowRadius": 16,
574
+ "transform": [
652
575
  {
653
- "color": "#001f23",
654
- "fontSize": 16,
576
+ "scaleY": 1,
655
577
  },
656
- undefined,
657
- ]
658
- }
659
- themeIntent="text"
660
- themeSize="xsmall"
661
- />
662
- </View>
663
- </View>
664
- </View>
665
- <View
666
- style={
667
- [
668
- {
669
- "height": 176,
670
- },
671
- undefined,
672
- ]
673
- }
674
- >
675
- <Picker
676
- display="spinner"
677
- mode="time"
678
- onChange={[Function]}
679
- style={
680
- {
681
- "flex": 1,
682
- }
683
- }
684
- testID="timePickerIOS"
685
- textColor="#001f23"
686
- value={1995-12-17T03:24:00.000Z}
687
- />
688
- </View>
689
- <View>
690
- <View
691
- style={
692
- [
693
- {
694
- "alignItems": "center",
695
- "flexDirection": "row",
696
- "justifyContent": "flex-end",
697
- "paddingHorizontal": 12,
698
- "paddingVertical": 2,
699
- },
700
- undefined,
701
- ]
702
- }
703
- >
704
- <View
705
- accessibilityState={
706
- {
707
- "disabled": false,
578
+ {
579
+ "translateY": 0,
580
+ },
581
+ ],
582
+ "width": "100%",
708
583
  }
709
584
  }
710
- accessible={true}
711
- focusable={true}
712
- onClick={[Function]}
713
- onResponderGrant={[Function]}
714
- onResponderMove={[Function]}
715
- onResponderRelease={[Function]}
716
- onResponderTerminate={[Function]}
717
- onResponderTerminationRequest={[Function]}
718
- onStartShouldSetResponder={[Function]}
719
- style={
720
- [
721
- {
722
- "alignItems": "center",
723
- "backgroundColor": "transparent",
724
- "borderRadius": 4,
725
- "borderWidth": 0,
726
- "flexDirection": "row",
727
- "justifyContent": "center",
728
- "padding": 12,
729
- },
730
- undefined,
731
- ]
732
- }
733
585
  >
734
- <Text
735
- allowFontScaling={false}
736
- disabled={false}
737
- ellipsizeMode="tail"
738
- numberOfLines={1}
586
+ <View
739
587
  style={
740
588
  [
741
589
  {
742
- "color": "#001f23",
743
- "fontFamily": "BeVietnamPro-SemiBold",
744
- "fontSize": 16,
745
- "letterSpacing": 0.24,
746
- "lineHeight": 24,
590
+ "flexDirection": "row",
591
+ "paddingHorizontal": 16,
592
+ "paddingVertical": 8,
747
593
  },
594
+ undefined,
595
+ ]
596
+ }
597
+ >
598
+ <View
599
+ style={
748
600
  [
749
601
  {
750
- "color": "#401960",
751
- "flexShrink": 1,
752
- "lineHeight": 22,
753
- "textAlign": "center",
602
+ "flex": 1,
603
+ "justifyContent": "center",
754
604
  },
755
605
  undefined,
756
- ],
606
+ ]
607
+ }
608
+ >
609
+ <Text
610
+ allowFontScaling={false}
611
+ style={
612
+ [
613
+ {
614
+ "color": "#001f23",
615
+ "fontFamily": "BeVietnamPro-SemiBold",
616
+ "fontSize": 16,
617
+ "letterSpacing": 0.24,
618
+ "lineHeight": 24,
619
+ },
620
+ undefined,
621
+ ]
622
+ }
623
+ themeIntent="body"
624
+ themeTypeface="neutral"
625
+ themeVariant="regular-bold"
626
+ >
627
+ Break time
628
+ </Text>
629
+ </View>
630
+ <View
631
+ style={
632
+ [
633
+ {
634
+ "alignItems": "center",
635
+ "height": 48,
636
+ "justifyContent": "center",
637
+ "marginLeft": 12,
638
+ "width": 48,
639
+ },
640
+ undefined,
641
+ ]
642
+ }
643
+ >
644
+ <View
645
+ accessible={true}
646
+ collapsable={false}
647
+ focusable={true}
648
+ onClick={[Function]}
649
+ onResponderGrant={[Function]}
650
+ onResponderMove={[Function]}
651
+ onResponderRelease={[Function]}
652
+ onResponderTerminate={[Function]}
653
+ onResponderTerminationRequest={[Function]}
654
+ onStartShouldSetResponder={[Function]}
655
+ style={
656
+ {
657
+ "opacity": 1,
658
+ }
659
+ }
660
+ testID="bottom-sheet-close-icon"
661
+ >
662
+ <HeroIcon
663
+ name="cancel"
664
+ style={
665
+ [
666
+ {
667
+ "color": "#001f23",
668
+ "fontSize": 16,
669
+ },
670
+ undefined,
671
+ ]
672
+ }
673
+ themeIntent="text"
674
+ themeSize="xsmall"
675
+ />
676
+ </View>
677
+ </View>
678
+ </View>
679
+ <View
680
+ style={
681
+ [
682
+ {
683
+ "height": 176,
684
+ },
685
+ undefined,
757
686
  ]
758
687
  }
759
- themeButtonVariant="text-primary"
760
- themeIntent="body"
761
- themeTypeface="neutral"
762
- themeVariant="regular-bold"
763
688
  >
764
- Confirm
765
- </Text>
766
- </View>
689
+ <Picker
690
+ display="spinner"
691
+ mode="time"
692
+ onChange={[Function]}
693
+ style={
694
+ {
695
+ "flex": 1,
696
+ }
697
+ }
698
+ testID="timePickerIOS"
699
+ textColor="#001f23"
700
+ value={1995-12-17T03:24:00.000Z}
701
+ />
702
+ </View>
703
+ <View>
704
+ <View
705
+ style={
706
+ [
707
+ {
708
+ "alignItems": "center",
709
+ "flexDirection": "row",
710
+ "justifyContent": "flex-end",
711
+ "paddingHorizontal": 12,
712
+ "paddingVertical": 2,
713
+ },
714
+ undefined,
715
+ ]
716
+ }
717
+ >
718
+ <View
719
+ accessibilityState={
720
+ {
721
+ "disabled": false,
722
+ }
723
+ }
724
+ accessible={true}
725
+ focusable={true}
726
+ onClick={[Function]}
727
+ onResponderGrant={[Function]}
728
+ onResponderMove={[Function]}
729
+ onResponderRelease={[Function]}
730
+ onResponderTerminate={[Function]}
731
+ onResponderTerminationRequest={[Function]}
732
+ onStartShouldSetResponder={[Function]}
733
+ style={
734
+ [
735
+ {
736
+ "alignItems": "center",
737
+ "backgroundColor": "transparent",
738
+ "borderRadius": 4,
739
+ "borderWidth": 0,
740
+ "flexDirection": "row",
741
+ "height": 60,
742
+ "justifyContent": "center",
743
+ "padding": 12,
744
+ },
745
+ undefined,
746
+ ]
747
+ }
748
+ >
749
+ <Text
750
+ allowFontScaling={false}
751
+ disabled={false}
752
+ ellipsizeMode="tail"
753
+ numberOfLines={1}
754
+ style={
755
+ [
756
+ {
757
+ "color": "#001f23",
758
+ "fontFamily": "BeVietnamPro-SemiBold",
759
+ "fontSize": 16,
760
+ "letterSpacing": 0.24,
761
+ "lineHeight": 24,
762
+ },
763
+ [
764
+ {
765
+ "color": "#401960",
766
+ "flexShrink": 1,
767
+ "lineHeight": 22,
768
+ "textAlign": "center",
769
+ },
770
+ undefined,
771
+ ],
772
+ ]
773
+ }
774
+ themeButtonVariant="text-primary"
775
+ themeIntent="body"
776
+ themeTypeface="neutral"
777
+ themeVariant="regular-bold"
778
+ >
779
+ Confirm
780
+ </Text>
781
+ </View>
782
+ </View>
783
+ </View>
784
+ </RCTSafeAreaView>
767
785
  </View>
768
786
  </View>
769
- </RCTSafeAreaView>
787
+ </View>
770
788
  </View>
771
789
  </View>
772
- </View>,
773
- ]
790
+ </RCTModalHostView>
791
+ </View>
774
792
  `;