@hero-design/rn 8.42.4 → 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 +1 -1
  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/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap CHANGED
@@ -1,40 +1,53 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
3
  exports[`DatePickerIOS renders correctly 1`] = `
4
- [
5
- <View
6
- accessibilityState={
7
- {
8
- "disabled": false,
9
- }
4
+ <View
5
+ accessibilityState={
6
+ {
7
+ "disabled": false,
10
8
  }
11
- accessible={true}
12
- collapsable={false}
13
- focusable={true}
14
- onClick={[Function]}
15
- onResponderGrant={[Function]}
16
- onResponderMove={[Function]}
17
- onResponderRelease={[Function]}
18
- onResponderTerminate={[Function]}
19
- onResponderTerminationRequest={[Function]}
20
- onStartShouldSetResponder={[Function]}
21
- style={
22
- {
23
- "opacity": 1,
24
- }
9
+ }
10
+ accessible={true}
11
+ collapsable={false}
12
+ focusable={true}
13
+ onClick={[Function]}
14
+ onResponderGrant={[Function]}
15
+ onResponderMove={[Function]}
16
+ onResponderRelease={[Function]}
17
+ onResponderTerminate={[Function]}
18
+ onResponderTerminationRequest={[Function]}
19
+ onStartShouldSetResponder={[Function]}
20
+ style={
21
+ {
22
+ "opacity": 1,
25
23
  }
24
+ }
25
+ >
26
+ <View
27
+ pointerEvents="none"
28
+ testID="datePickerInputIOS"
26
29
  >
27
30
  <View
28
- pointerEvents="none"
29
- testID="datePickerInputIOS"
31
+ pointerEvents="auto"
32
+ style={
33
+ [
34
+ {
35
+ "marginTop": 8,
36
+ "width": "100%",
37
+ },
38
+ undefined,
39
+ ]
40
+ }
30
41
  >
31
42
  <View
32
- pointerEvents="auto"
33
43
  style={
34
44
  [
35
45
  {
36
- "marginTop": 8,
37
- "width": "100%",
46
+ "alignItems": "center",
47
+ "backgroundColor": "#ffffff",
48
+ "borderRadius": 8,
49
+ "flexDirection": "row",
50
+ "padding": 16,
38
51
  },
39
52
  undefined,
40
53
  ]
@@ -44,358 +57,247 @@ exports[`DatePickerIOS renders correctly 1`] = `
44
57
  style={
45
58
  [
46
59
  {
47
- "alignItems": "center",
48
- "backgroundColor": "#ffffff",
60
+ "borderColor": "#001f23",
49
61
  "borderRadius": 8,
62
+ "borderWidth": 1,
63
+ "bottom": 0,
64
+ "left": 0,
65
+ "position": "absolute",
66
+ "right": 0,
67
+ "top": 0,
68
+ },
69
+ [
70
+ {
71
+ "backgroundColor": "#ffffff",
72
+ },
73
+ undefined,
74
+ ],
75
+ ]
76
+ }
77
+ testID="text-input-border"
78
+ themeFocused={false}
79
+ themeState="filled"
80
+ />
81
+ <View
82
+ pointerEvents="none"
83
+ style={
84
+ [
85
+ {
86
+ "backgroundColor": "#ffffff",
50
87
  "flexDirection": "row",
51
- "padding": 16,
88
+ "left": 16,
89
+ "paddingHorizontal": 4,
90
+ "position": "absolute",
91
+ "top": -4,
92
+ "zIndex": 1,
93
+ },
94
+ {
95
+ "backgroundColor": "#ffffff",
52
96
  },
53
- undefined,
54
97
  ]
55
98
  }
99
+ testID="label-container"
56
100
  >
57
- <View
101
+ <Text
102
+ allowFontScaling={false}
58
103
  style={
59
104
  [
60
105
  {
61
- "borderColor": "#001f23",
62
- "borderRadius": 8,
63
- "borderWidth": 1,
64
- "bottom": 0,
65
- "left": 0,
66
- "position": "absolute",
67
- "right": 0,
68
- "top": 0,
106
+ "color": "#001f23",
107
+ "fontFamily": "BeVietnamPro-Regular",
108
+ "fontSize": 12,
109
+ "letterSpacing": 0.48,
110
+ "lineHeight": 16,
69
111
  },
70
112
  [
113
+ {
114
+ "color": "#001f23",
115
+ "lineHeight": 12,
116
+ },
71
117
  {
72
118
  "backgroundColor": "#ffffff",
73
119
  },
74
- undefined,
75
120
  ],
76
121
  ]
77
122
  }
78
- testID="text-input-border"
79
- themeFocused={false}
123
+ testID="input-label"
124
+ themeFontWeight="regular"
125
+ themeIntent="body"
80
126
  themeState="filled"
81
- />
82
- <View
83
- pointerEvents="none"
84
- style={
85
- [
86
- {
87
- "backgroundColor": "#ffffff",
88
- "flexDirection": "row",
89
- "left": 16,
90
- "paddingHorizontal": 4,
91
- "position": "absolute",
92
- "top": -4,
93
- "zIndex": 1,
94
- },
95
- {
96
- "backgroundColor": "#ffffff",
97
- },
98
- ]
99
- }
100
- testID="label-container"
101
127
  >
102
- <Text
103
- allowFontScaling={false}
104
- style={
105
- [
106
- {
107
- "color": "#001f23",
108
- "fontFamily": "BeVietnamPro-Regular",
109
- "fontSize": 12,
110
- "letterSpacing": 0.48,
111
- "lineHeight": 16,
112
- },
113
- [
114
- {
115
- "color": "#001f23",
116
- "lineHeight": 12,
117
- },
118
- {
119
- "backgroundColor": "#ffffff",
120
- },
121
- ],
122
- ]
128
+ Start date
129
+ </Text>
130
+ </View>
131
+ <View
132
+ style={
133
+ [
134
+ {
135
+ "alignItems": "center",
136
+ "alignSelf": "stretch",
137
+ "flexDirection": "row",
138
+ "flexGrow": 2,
139
+ "flexShrink": 1,
140
+ },
141
+ undefined,
142
+ ]
143
+ }
144
+ >
145
+ <TextInput
146
+ accessibilityState={
147
+ {
148
+ "disabled": false,
123
149
  }
124
- testID="input-label"
125
- themeFontWeight="regular"
126
- themeIntent="body"
127
- themeState="filled"
128
- >
129
- Start date
130
- </Text>
131
- </View>
132
- <View
150
+ }
151
+ allowFontScaling={false}
152
+ editable={true}
153
+ onBlur={[Function]}
154
+ onChangeText={[Function]}
155
+ onFocus={[Function]}
156
+ placeholder=" "
133
157
  style={
134
158
  [
135
159
  {
136
- "alignItems": "center",
137
160
  "alignSelf": "stretch",
138
- "flexDirection": "row",
139
161
  "flexGrow": 2,
140
- "flexShrink": 1,
162
+ "fontFamily": "BeVietnamPro-Regular",
163
+ "fontSize": 16,
164
+ "height": undefined,
165
+ "marginHorizontal": 8,
166
+ "maxHeight": 144,
167
+ "paddingVertical": 0,
168
+ "textAlignVertical": "center",
141
169
  },
142
- undefined,
143
- ]
144
- }
145
- >
146
- <TextInput
147
- accessibilityState={
148
- {
149
- "disabled": false,
150
- }
151
- }
152
- allowFontScaling={false}
153
- editable={true}
154
- onBlur={[Function]}
155
- onChangeText={[Function]}
156
- onFocus={[Function]}
157
- placeholder=" "
158
- style={
159
- [
160
- {
161
- "alignSelf": "stretch",
162
- "flexGrow": 2,
163
- "fontFamily": "BeVietnamPro-Regular",
164
- "fontSize": 16,
165
- "height": undefined,
166
- "marginHorizontal": 8,
167
- "maxHeight": 144,
168
- "paddingVertical": 0,
169
- "textAlignVertical": "center",
170
- },
171
- {
172
- "backgroundColor": "#ffffff",
173
- "color": "#001f23",
174
- },
175
- ]
176
- }
177
- testID="text-input"
178
- themeVariant="text"
179
- value="21/12/1995"
180
- />
181
- </View>
182
- <HeroIcon
183
- name="calendar-dates-outlined"
184
- style={
185
- [
186
170
  {
171
+ "backgroundColor": "#ffffff",
187
172
  "color": "#001f23",
188
- "fontSize": 24,
189
173
  },
190
- undefined,
191
174
  ]
192
175
  }
193
- testID="input-suffix"
194
- themeIntent="text"
195
- themeSize="medium"
176
+ testID="text-input"
177
+ themeVariant="text"
178
+ value="21/12/1995"
196
179
  />
197
180
  </View>
181
+ <HeroIcon
182
+ name="calendar-dates-outlined"
183
+ style={
184
+ [
185
+ {
186
+ "color": "#001f23",
187
+ "fontSize": 24,
188
+ },
189
+ undefined,
190
+ ]
191
+ }
192
+ testID="input-suffix"
193
+ themeIntent="text"
194
+ themeSize="medium"
195
+ />
196
+ </View>
197
+ <View
198
+ style={
199
+ [
200
+ {
201
+ "minHeight": 16,
202
+ "paddingLeft": 16,
203
+ "paddingTop": 2,
204
+ },
205
+ undefined,
206
+ ]
207
+ }
208
+ >
198
209
  <View
199
210
  style={
200
211
  [
201
212
  {
202
- "minHeight": 16,
203
- "paddingLeft": 16,
204
- "paddingTop": 2,
213
+ "flexDirection": "row",
214
+ "justifyContent": "space-between",
205
215
  },
206
216
  undefined,
207
217
  ]
208
218
  }
209
- >
210
- <View
211
- style={
212
- [
213
- {
214
- "flexDirection": "row",
215
- "justifyContent": "space-between",
216
- },
217
- undefined,
218
- ]
219
- }
220
- />
221
- </View>
219
+ />
222
220
  </View>
223
221
  </View>
224
- </View>,
225
- <View
226
- collapsable={false}
227
- style={
228
- {
229
- "backgroundColor": "transparent",
230
- "bottom": 0,
231
- "left": 0,
232
- "opacity": 0.4,
233
- "position": "absolute",
234
- "right": 0,
235
- "top": 0,
236
- }
237
- }
238
- />,
239
- <View
240
- collapsable={false}
222
+ </View>
223
+ <RCTModalHostView
224
+ animationType="none"
225
+ hardwareAccelerated={false}
226
+ identifier={0}
227
+ onDismiss={[Function]}
228
+ onRequestClose={[Function]}
229
+ onStartShouldSetResponder={[Function]}
230
+ presentationStyle="overFullScreen"
241
231
  style={
242
232
  {
243
- "bottom": 0,
244
- "left": 0,
245
- "opacity": 1,
246
233
  "position": "absolute",
247
- "right": 0,
248
- "top": 0,
249
- "transform": [
250
- {
251
- "translateY": 0,
252
- },
253
- ],
254
234
  }
255
235
  }
236
+ transparent={true}
237
+ visible={true}
256
238
  >
257
239
  <View
258
- pointerEvents="box-none"
240
+ collapsable={false}
259
241
  style={
260
242
  [
261
243
  {
262
- "bottom": 0,
263
- "flexDirection": "column-reverse",
244
+ "flex": 1,
264
245
  "left": 0,
265
- "position": "absolute",
266
- "right": 0,
267
246
  "top": 0,
268
247
  },
269
- undefined,
248
+ {
249
+ "backgroundColor": "transparent",
250
+ },
270
251
  ]
271
252
  }
272
253
  >
273
254
  <View
274
- onLayout={[Function]}
255
+ pointerEvents="box-none"
275
256
  style={
276
- [
277
- [
278
- {
279
- "flex": 1,
280
- "flexDirection": "column-reverse",
281
- },
282
- undefined,
283
- ],
284
- {
285
- "paddingBottom": 0,
286
- },
287
- ]
257
+ {
258
+ "flex": 1,
259
+ }
288
260
  }
289
261
  >
290
262
  <View
291
- accessible={true}
292
- collapsable={false}
293
- focusable={true}
294
- onBlur={[Function]}
295
- onClick={[Function]}
296
- onFocus={[Function]}
297
- onResponderGrant={[Function]}
298
- onResponderMove={[Function]}
299
- onResponderRelease={[Function]}
300
- onResponderTerminate={[Function]}
301
- onResponderTerminationRequest={[Function]}
302
- onStartShouldSetResponder={[Function]}
303
- style={
304
- {
305
- "backgroundColor": "#000000",
306
- "bottom": 0,
307
- "left": 0,
308
- "opacity": 0.48,
309
- "position": "absolute",
310
- "right": 0,
311
- "top": 0,
312
- }
313
- }
314
- />
315
- <RCTSafeAreaView
316
- collapsable={false}
317
- emulateUnlessSupported={true}
263
+ collapsable={true}
264
+ pointerEvents="box-none"
318
265
  style={
319
266
  {
320
- "backgroundColor": "#ffffff",
321
- "borderTopLeftRadius": 16,
322
- "borderTopRightRadius": 16,
323
- "elevation": 10,
324
- "maxHeight": "94%",
325
- "shadowColor": "#001f23",
326
- "shadowOffset": {
327
- "height": 3,
328
- "width": 0,
329
- },
330
- "shadowOpacity": 0.4,
331
- "shadowRadius": 16,
332
- "transform": [
333
- {
334
- "scaleY": 1,
335
- },
336
- {
337
- "translateY": 0,
338
- },
339
- ],
340
- "width": "100%",
267
+ "flex": 1,
341
268
  }
342
269
  }
343
270
  >
344
271
  <View
272
+ pointerEvents="box-none"
345
273
  style={
346
274
  [
347
275
  {
348
- "flexDirection": "row",
349
- "paddingHorizontal": 16,
350
- "paddingVertical": 8,
276
+ "bottom": 0,
277
+ "flexDirection": "column-reverse",
278
+ "left": 0,
279
+ "position": "absolute",
280
+ "right": 0,
281
+ "top": 0,
351
282
  },
352
283
  undefined,
353
284
  ]
354
285
  }
355
286
  >
356
287
  <View
288
+ onLayout={[Function]}
357
289
  style={
358
290
  [
359
- {
360
- "flex": 1,
361
- "justifyContent": "center",
362
- },
363
- undefined,
364
- ]
365
- }
366
- >
367
- <Text
368
- allowFontScaling={false}
369
- style={
370
291
  [
371
292
  {
372
- "color": "#001f23",
373
- "fontFamily": "BeVietnamPro-SemiBold",
374
- "fontSize": 16,
375
- "letterSpacing": 0.24,
376
- "lineHeight": 24,
293
+ "flex": 1,
294
+ "flexDirection": "column-reverse",
377
295
  },
378
296
  undefined,
379
- ]
380
- }
381
- themeIntent="body"
382
- themeTypeface="neutral"
383
- themeVariant="regular-bold"
384
- >
385
- Start date
386
- </Text>
387
- </View>
388
- <View
389
- style={
390
- [
297
+ ],
391
298
  {
392
- "alignItems": "center",
393
- "height": 48,
394
- "justifyContent": "center",
395
- "marginLeft": 12,
396
- "width": 48,
299
+ "paddingBottom": 0,
397
300
  },
398
- undefined,
399
301
  ]
400
302
  }
401
303
  >
@@ -403,7 +305,9 @@ exports[`DatePickerIOS renders correctly 1`] = `
403
305
  accessible={true}
404
306
  collapsable={false}
405
307
  focusable={true}
308
+ onBlur={[Function]}
406
309
  onClick={[Function]}
310
+ onFocus={[Function]}
407
311
  onResponderGrant={[Function]}
408
312
  onResponderMove={[Function]}
409
313
  onResponderRelease={[Function]}
@@ -412,135 +316,249 @@ exports[`DatePickerIOS renders correctly 1`] = `
412
316
  onStartShouldSetResponder={[Function]}
413
317
  style={
414
318
  {
415
- "opacity": 1,
319
+ "backgroundColor": "#000000",
320
+ "bottom": 0,
321
+ "left": 0,
322
+ "opacity": 0.48,
323
+ "position": "absolute",
324
+ "right": 0,
325
+ "top": 0,
416
326
  }
417
327
  }
418
- testID="bottom-sheet-close-icon"
419
- >
420
- <HeroIcon
421
- name="cancel"
422
- style={
423
- [
328
+ />
329
+ <RCTSafeAreaView
330
+ collapsable={false}
331
+ emulateUnlessSupported={true}
332
+ style={
333
+ {
334
+ "backgroundColor": "#ffffff",
335
+ "borderTopLeftRadius": 16,
336
+ "borderTopRightRadius": 16,
337
+ "elevation": 10,
338
+ "maxHeight": "94%",
339
+ "shadowColor": "#001f23",
340
+ "shadowOffset": {
341
+ "height": 3,
342
+ "width": 0,
343
+ },
344
+ "shadowOpacity": 0.4,
345
+ "shadowRadius": 16,
346
+ "transform": [
424
347
  {
425
- "color": "#001f23",
426
- "fontSize": 16,
348
+ "scaleY": 1,
427
349
  },
428
- undefined,
429
- ]
430
- }
431
- themeIntent="text"
432
- themeSize="xsmall"
433
- />
434
- </View>
435
- </View>
436
- </View>
437
- <View
438
- style={
439
- [
440
- {
441
- "height": 176,
442
- },
443
- undefined,
444
- ]
445
- }
446
- >
447
- <Picker
448
- display="spinner"
449
- mode="date"
450
- onChange={[Function]}
451
- style={
452
- {
453
- "flex": 1,
454
- }
455
- }
456
- testID="datePickerIOS"
457
- textColor="#001f23"
458
- value={1995-12-21T00:00:00.000Z}
459
- />
460
- </View>
461
- <View>
462
- <View
463
- style={
464
- [
465
- {
466
- "alignItems": "center",
467
- "flexDirection": "row",
468
- "justifyContent": "flex-end",
469
- "paddingHorizontal": 12,
470
- "paddingVertical": 2,
471
- },
472
- undefined,
473
- ]
474
- }
475
- >
476
- <View
477
- accessibilityState={
478
- {
479
- "disabled": false,
350
+ {
351
+ "translateY": 0,
352
+ },
353
+ ],
354
+ "width": "100%",
480
355
  }
481
356
  }
482
- accessible={true}
483
- focusable={true}
484
- onClick={[Function]}
485
- onResponderGrant={[Function]}
486
- onResponderMove={[Function]}
487
- onResponderRelease={[Function]}
488
- onResponderTerminate={[Function]}
489
- onResponderTerminationRequest={[Function]}
490
- onStartShouldSetResponder={[Function]}
491
- style={
492
- [
493
- {
494
- "alignItems": "center",
495
- "backgroundColor": "transparent",
496
- "borderRadius": 4,
497
- "borderWidth": 0,
498
- "flexDirection": "row",
499
- "justifyContent": "center",
500
- "padding": 12,
501
- },
502
- undefined,
503
- ]
504
- }
505
357
  >
506
- <Text
507
- allowFontScaling={false}
508
- disabled={false}
509
- ellipsizeMode="tail"
510
- numberOfLines={1}
358
+ <View
511
359
  style={
512
360
  [
513
361
  {
514
- "color": "#001f23",
515
- "fontFamily": "BeVietnamPro-SemiBold",
516
- "fontSize": 16,
517
- "letterSpacing": 0.24,
518
- "lineHeight": 24,
362
+ "flexDirection": "row",
363
+ "paddingHorizontal": 16,
364
+ "paddingVertical": 8,
519
365
  },
366
+ undefined,
367
+ ]
368
+ }
369
+ >
370
+ <View
371
+ style={
520
372
  [
521
373
  {
522
- "color": "#401960",
523
- "flexShrink": 1,
524
- "lineHeight": 22,
525
- "textAlign": "center",
374
+ "flex": 1,
375
+ "justifyContent": "center",
526
376
  },
527
377
  undefined,
528
- ],
378
+ ]
379
+ }
380
+ >
381
+ <Text
382
+ allowFontScaling={false}
383
+ style={
384
+ [
385
+ {
386
+ "color": "#001f23",
387
+ "fontFamily": "BeVietnamPro-SemiBold",
388
+ "fontSize": 16,
389
+ "letterSpacing": 0.24,
390
+ "lineHeight": 24,
391
+ },
392
+ undefined,
393
+ ]
394
+ }
395
+ themeIntent="body"
396
+ themeTypeface="neutral"
397
+ themeVariant="regular-bold"
398
+ >
399
+ Start date
400
+ </Text>
401
+ </View>
402
+ <View
403
+ style={
404
+ [
405
+ {
406
+ "alignItems": "center",
407
+ "height": 48,
408
+ "justifyContent": "center",
409
+ "marginLeft": 12,
410
+ "width": 48,
411
+ },
412
+ undefined,
413
+ ]
414
+ }
415
+ >
416
+ <View
417
+ accessible={true}
418
+ collapsable={false}
419
+ focusable={true}
420
+ onClick={[Function]}
421
+ onResponderGrant={[Function]}
422
+ onResponderMove={[Function]}
423
+ onResponderRelease={[Function]}
424
+ onResponderTerminate={[Function]}
425
+ onResponderTerminationRequest={[Function]}
426
+ onStartShouldSetResponder={[Function]}
427
+ style={
428
+ {
429
+ "opacity": 1,
430
+ }
431
+ }
432
+ testID="bottom-sheet-close-icon"
433
+ >
434
+ <HeroIcon
435
+ name="cancel"
436
+ style={
437
+ [
438
+ {
439
+ "color": "#001f23",
440
+ "fontSize": 16,
441
+ },
442
+ undefined,
443
+ ]
444
+ }
445
+ themeIntent="text"
446
+ themeSize="xsmall"
447
+ />
448
+ </View>
449
+ </View>
450
+ </View>
451
+ <View
452
+ style={
453
+ [
454
+ {
455
+ "height": 176,
456
+ },
457
+ undefined,
529
458
  ]
530
459
  }
531
- themeButtonVariant="text-primary"
532
- themeIntent="body"
533
- themeTypeface="neutral"
534
- themeVariant="regular-bold"
535
460
  >
536
- Confirm
537
- </Text>
538
- </View>
461
+ <Picker
462
+ display="spinner"
463
+ mode="date"
464
+ onChange={[Function]}
465
+ style={
466
+ {
467
+ "flex": 1,
468
+ }
469
+ }
470
+ testID="datePickerIOS"
471
+ textColor="#001f23"
472
+ value={1995-12-21T00:00:00.000Z}
473
+ />
474
+ </View>
475
+ <View>
476
+ <View
477
+ style={
478
+ [
479
+ {
480
+ "alignItems": "center",
481
+ "flexDirection": "row",
482
+ "justifyContent": "flex-end",
483
+ "paddingHorizontal": 12,
484
+ "paddingVertical": 2,
485
+ },
486
+ undefined,
487
+ ]
488
+ }
489
+ >
490
+ <View
491
+ accessibilityState={
492
+ {
493
+ "disabled": false,
494
+ }
495
+ }
496
+ accessible={true}
497
+ focusable={true}
498
+ onClick={[Function]}
499
+ onResponderGrant={[Function]}
500
+ onResponderMove={[Function]}
501
+ onResponderRelease={[Function]}
502
+ onResponderTerminate={[Function]}
503
+ onResponderTerminationRequest={[Function]}
504
+ onStartShouldSetResponder={[Function]}
505
+ style={
506
+ [
507
+ {
508
+ "alignItems": "center",
509
+ "backgroundColor": "transparent",
510
+ "borderRadius": 4,
511
+ "borderWidth": 0,
512
+ "flexDirection": "row",
513
+ "height": 60,
514
+ "justifyContent": "center",
515
+ "padding": 12,
516
+ },
517
+ undefined,
518
+ ]
519
+ }
520
+ >
521
+ <Text
522
+ allowFontScaling={false}
523
+ disabled={false}
524
+ ellipsizeMode="tail"
525
+ numberOfLines={1}
526
+ style={
527
+ [
528
+ {
529
+ "color": "#001f23",
530
+ "fontFamily": "BeVietnamPro-SemiBold",
531
+ "fontSize": 16,
532
+ "letterSpacing": 0.24,
533
+ "lineHeight": 24,
534
+ },
535
+ [
536
+ {
537
+ "color": "#401960",
538
+ "flexShrink": 1,
539
+ "lineHeight": 22,
540
+ "textAlign": "center",
541
+ },
542
+ undefined,
543
+ ],
544
+ ]
545
+ }
546
+ themeButtonVariant="text-primary"
547
+ themeIntent="body"
548
+ themeTypeface="neutral"
549
+ themeVariant="regular-bold"
550
+ >
551
+ Confirm
552
+ </Text>
553
+ </View>
554
+ </View>
555
+ </View>
556
+ </RCTSafeAreaView>
539
557
  </View>
540
558
  </View>
541
- </RCTSafeAreaView>
559
+ </View>
542
560
  </View>
543
561
  </View>
544
- </View>,
545
- ]
562
+ </RCTModalHostView>
563
+ </View>
546
564
  `;