@coinbase/cds-mobile 8.15.0 → 8.16.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 (19) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dts/cells/Cell.d.ts +29 -2
  3. package/dts/cells/Cell.d.ts.map +1 -1
  4. package/dts/cells/CellDetail.d.ts +4 -0
  5. package/dts/cells/CellDetail.d.ts.map +1 -1
  6. package/dts/cells/CellMedia.d.ts +4 -0
  7. package/dts/cells/CellMedia.d.ts.map +1 -1
  8. package/dts/cells/ListCell.d.ts +58 -4
  9. package/dts/cells/ListCell.d.ts.map +1 -1
  10. package/dts/cells/ListCellFallback.d.ts +1 -1
  11. package/dts/cells/ListCellFallback.d.ts.map +1 -1
  12. package/esm/cells/Cell.js +32 -16
  13. package/esm/cells/CellDetail.js +3 -2
  14. package/esm/cells/CellMedia.js +4 -0
  15. package/esm/cells/ListCell.js +53 -15
  16. package/esm/cells/ListCellFallback.js +10 -3
  17. package/esm/cells/__stories__/ListCell.stories.js +595 -110
  18. package/esm/cells/__stories__/ListCellFallback.stories.js +49 -30
  19. package/package.json +2 -2
package/esm/cells/__stories__/ListCell.stories.js CHANGED
@@ -1,20 +1,23 @@
1
1
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
2
2
  import React from 'react';
3
- import { assets } from '@coinbase/cds-common/internal/data/assets';
3
+ import { assets, squareAssets } from '@coinbase/cds-common/internal/data/assets';
4
4
  import { selectCellSpacingConfig } from '@coinbase/cds-common/tokens/select';
5
5
  import { gutter } from '@coinbase/cds-common/tokens/sizing';
6
6
  import { Button } from '../../buttons/Button';
7
7
  import { IconButton } from '../../buttons/IconButton';
8
8
  import { Example, ExampleScreen } from '../../examples/ExampleScreen';
9
+ import { useTheme } from '../../hooks/useTheme';
10
+ import { Icon } from '../../icons/Icon';
9
11
  import { Pictogram } from '../../illustrations/Pictogram';
12
+ import { HStack, VStack } from '../../layout';
13
+ import { Avatar } from '../../media/Avatar';
14
+ import { RollingNumber } from '../../numbers';
15
+ import { Tag } from '../../tag/Tag';
16
+ import { Text } from '../../typography/Text';
10
17
  import { CellHelperText } from '../CellHelperText';
11
- import { CellMedia } from '../CellMedia';
12
18
  import { ListCell } from '../ListCell';
13
19
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
14
20
  const onPressConsole = () => console.log('onPress');
15
- const innerSpacingConfig = {
16
- paddingX: 1
17
- };
18
21
  const cellPriorities = ['middle', 'end'];
19
22
  const titlePadding = {
20
23
  paddingX: gutter
@@ -22,49 +25,60 @@ const titlePadding = {
22
25
  const Content = () => {
23
26
  return /*#__PURE__*/_jsxs(_Fragment, {
24
27
  children: [/*#__PURE__*/_jsx(ListCell, {
28
+ layoutSpacing: "hug",
25
29
  title: "Title"
26
30
  }), /*#__PURE__*/_jsx(ListCell, {
27
31
  detail: "Detail",
32
+ layoutSpacing: "hug",
28
33
  title: "Title"
29
34
  }), /*#__PURE__*/_jsx(ListCell, {
30
35
  description: "Description",
36
+ layoutSpacing: "hug",
31
37
  title: "Title"
32
38
  }), /*#__PURE__*/_jsx(ListCell, {
33
39
  description: "Description",
34
40
  detail: "Detail",
41
+ layoutSpacing: "hug",
35
42
  title: "Title"
36
43
  }), /*#__PURE__*/_jsx(ListCell, {
37
44
  description: "Description",
38
45
  detail: "Detail",
46
+ layoutSpacing: "hug",
39
47
  subdetail: "Neutral",
40
48
  title: "Title"
41
49
  }), /*#__PURE__*/_jsx(ListCell, {
42
50
  detail: "Detail",
51
+ layoutSpacing: "hug",
43
52
  subdetail: "Neutral",
44
53
  title: "Title"
45
54
  }), /*#__PURE__*/_jsx(ListCell, {
46
55
  description: "Description",
47
56
  detail: "Detail",
57
+ layoutSpacing: "hug",
48
58
  subdetail: "+Positive",
49
59
  title: "Title",
50
60
  variant: "positive"
51
61
  }), /*#__PURE__*/_jsx(ListCell, {
62
+ layoutSpacing: "hug",
52
63
  subdetail: "+Positive",
53
64
  title: "Title",
54
65
  variant: "positive"
55
66
  }), /*#__PURE__*/_jsx(ListCell, {
56
67
  description: "Description",
57
68
  detail: "Detail",
69
+ layoutSpacing: "hug",
58
70
  subdetail: "-Negative",
59
71
  title: "Title",
60
72
  variant: "negative"
61
73
  }), /*#__PURE__*/_jsx(ListCell, {
62
74
  detail: "Detail",
75
+ layoutSpacing: "hug",
63
76
  subdetail: "-Negative",
64
77
  title: "Title",
65
78
  variant: "negative"
66
79
  }), /*#__PURE__*/_jsx(ListCell, {
67
80
  detail: "Detail",
81
+ layoutSpacing: "hug",
68
82
  subdetail: "Warning",
69
83
  title: "Title",
70
84
  variant: "warning"
@@ -74,60 +88,60 @@ const Content = () => {
74
88
  const CompactContent = () => {
75
89
  return /*#__PURE__*/_jsxs(_Fragment, {
76
90
  children: [/*#__PURE__*/_jsx(ListCell, {
77
- compact: true,
91
+ layoutSpacing: "compact",
78
92
  title: "Title"
79
93
  }), /*#__PURE__*/_jsx(ListCell, {
80
- compact: true,
81
94
  detail: "Detail",
95
+ layoutSpacing: "compact",
82
96
  title: "Title"
83
97
  }), /*#__PURE__*/_jsx(ListCell, {
84
- compact: true,
85
98
  description: "Description",
99
+ layoutSpacing: "compact",
86
100
  title: "Title"
87
101
  }), /*#__PURE__*/_jsx(ListCell, {
88
- compact: true,
89
102
  description: "Description",
90
103
  detail: "Detail",
104
+ layoutSpacing: "compact",
91
105
  title: "Title"
92
106
  }), /*#__PURE__*/_jsx(ListCell, {
93
- compact: true,
94
107
  description: "Description",
95
108
  detail: "Detail",
109
+ layoutSpacing: "compact",
96
110
  subdetail: "Neutral",
97
111
  title: "Title"
98
112
  }), /*#__PURE__*/_jsx(ListCell, {
99
- compact: true,
100
113
  detail: "Detail",
114
+ layoutSpacing: "compact",
101
115
  subdetail: "Neutral",
102
116
  title: "Title"
103
117
  }), /*#__PURE__*/_jsx(ListCell, {
104
- compact: true,
105
118
  description: "Description",
106
119
  detail: "Detail",
120
+ layoutSpacing: "compact",
107
121
  subdetail: "+Positive",
108
122
  title: "Title",
109
123
  variant: "positive"
110
124
  }), /*#__PURE__*/_jsx(ListCell, {
111
- compact: true,
125
+ layoutSpacing: "compact",
112
126
  subdetail: "+Positive",
113
127
  title: "Title",
114
128
  variant: "positive"
115
129
  }), /*#__PURE__*/_jsx(ListCell, {
116
- compact: true,
117
130
  description: "Description",
118
131
  detail: "Detail",
132
+ layoutSpacing: "compact",
119
133
  subdetail: "-Negative",
120
134
  title: "Title",
121
135
  variant: "negative"
122
136
  }), /*#__PURE__*/_jsx(ListCell, {
123
- compact: true,
124
137
  detail: "Detail",
138
+ layoutSpacing: "compact",
125
139
  subdetail: "-Negative",
126
140
  title: "Title",
127
141
  variant: "negative"
128
142
  }), /*#__PURE__*/_jsx(ListCell, {
129
- compact: true,
130
143
  detail: "Detail",
144
+ layoutSpacing: "compact",
131
145
  subdetail: "Warning",
132
146
  title: "Title",
133
147
  variant: "warning"
@@ -136,20 +150,24 @@ const CompactContent = () => {
136
150
  };
137
151
  const PressableContent = () => /*#__PURE__*/_jsxs(_Fragment, {
138
152
  children: [/*#__PURE__*/_jsx(ListCell, {
153
+ layoutSpacing: "hug",
139
154
  onPress: onPressConsole,
140
155
  title: "Title"
141
156
  }), /*#__PURE__*/_jsx(ListCell, {
157
+ layoutSpacing: "hug",
142
158
  onPress: onPressConsole,
143
159
  subdetail: "Neutral",
144
160
  title: "Title"
145
161
  }), /*#__PURE__*/_jsx(ListCell, {
146
162
  description: "Multi-line description",
163
+ layoutSpacing: "hug",
147
164
  onPress: onPressConsole,
148
165
  title: "Title"
149
166
  }), /*#__PURE__*/_jsx(ListCell, {
150
167
  multiline: true,
151
168
  selected: true,
152
169
  description: "Multi-line description",
170
+ layoutSpacing: "hug",
153
171
  onPress: onPressConsole,
154
172
  title: "Title"
155
173
  }), /*#__PURE__*/_jsx(ListCell, {
@@ -157,28 +175,32 @@ const PressableContent = () => /*#__PURE__*/_jsxs(_Fragment, {
157
175
  multiline: true,
158
176
  selected: true,
159
177
  description: "Multi-line description",
178
+ layoutSpacing: "hug",
160
179
  onPress: onPressConsole,
161
180
  title: "Title"
162
181
  }), /*#__PURE__*/_jsx(ListCell, {
163
182
  multiline: true,
164
183
  description: "Multi-line description goes here with really long text",
184
+ layoutSpacing: "hug",
165
185
  onPress: onPressConsole,
166
186
  title: "Title"
167
187
  }), /*#__PURE__*/_jsx(ListCell, {
168
188
  multiline: true,
169
189
  selected: true,
170
190
  description: "Multi-line description goes here with really long text",
191
+ layoutSpacing: "hug",
171
192
  onPress: onPressConsole,
172
193
  title: "Title"
173
194
  }), /*#__PURE__*/_jsx(ListCell, {
174
195
  description: "Description",
175
196
  detail: "Detail",
197
+ layoutSpacing: "hug",
176
198
  onPress: onPressConsole,
177
199
  title: "Title"
178
200
  }), /*#__PURE__*/_jsx(ListCell, {
179
201
  description: "Description",
180
202
  detail: "Detail",
181
- innerSpacing: innerSpacingConfig,
203
+ layoutSpacing: "hug",
182
204
  onPress: onPressConsole,
183
205
  subdetail: "Neutral",
184
206
  title: "Title"
@@ -186,6 +208,7 @@ const PressableContent = () => /*#__PURE__*/_jsxs(_Fragment, {
186
208
  selected: true,
187
209
  description: "Description",
188
210
  detail: "Detail",
211
+ layoutSpacing: "hug",
189
212
  onPress: onPressConsole,
190
213
  subdetail: "Neutral",
191
214
  title: "Title"
@@ -193,7 +216,7 @@ const PressableContent = () => /*#__PURE__*/_jsxs(_Fragment, {
193
216
  disabled: true,
194
217
  description: "Description",
195
218
  detail: "Detail",
196
- innerSpacing: innerSpacingConfig,
219
+ layoutSpacing: "hug",
197
220
  onPress: onPressConsole,
198
221
  subdetail: "Neutral",
199
222
  title: "Title"
@@ -202,6 +225,7 @@ const PressableContent = () => /*#__PURE__*/_jsxs(_Fragment, {
202
225
  selected: true,
203
226
  description: "Description",
204
227
  detail: "Detail",
228
+ layoutSpacing: "hug",
205
229
  onPress: onPressConsole,
206
230
  subdetail: "+Postive",
207
231
  title: "Title",
@@ -211,6 +235,7 @@ const PressableContent = () => /*#__PURE__*/_jsxs(_Fragment, {
211
235
  selected: true,
212
236
  description: "Description",
213
237
  detail: "Detail",
238
+ layoutSpacing: "hug",
214
239
  onPress: onPressConsole,
215
240
  subdetail: "Warning",
216
241
  title: "Title",
@@ -219,87 +244,85 @@ const PressableContent = () => /*#__PURE__*/_jsxs(_Fragment, {
219
244
  });
220
245
  const CompactPressableContent = () => /*#__PURE__*/_jsxs(_Fragment, {
221
246
  children: [/*#__PURE__*/_jsx(ListCell, {
222
- compact: true,
247
+ layoutSpacing: "compact",
223
248
  onPress: onPressConsole,
224
249
  title: "Title"
225
250
  }), /*#__PURE__*/_jsx(ListCell, {
226
- compact: true,
251
+ layoutSpacing: "compact",
227
252
  onPress: onPressConsole,
228
253
  subdetail: "Neutral",
229
254
  title: "Title"
230
255
  }), /*#__PURE__*/_jsx(ListCell, {
231
- compact: true,
232
256
  multiline: true,
233
257
  description: "Multi-line description",
258
+ layoutSpacing: "compact",
234
259
  onPress: onPressConsole,
235
260
  title: "Title"
236
261
  }), /*#__PURE__*/_jsx(ListCell, {
237
- compact: true,
238
262
  multiline: true,
239
263
  selected: true,
240
264
  description: "Multi-line description",
265
+ layoutSpacing: "compact",
241
266
  onPress: onPressConsole,
242
267
  title: "Title"
243
268
  }), /*#__PURE__*/_jsx(ListCell, {
244
- compact: true,
245
269
  multiline: true,
246
270
  description: "Multi-line description goes here with really long text",
271
+ layoutSpacing: "compact",
247
272
  onPress: onPressConsole,
248
273
  title: "Title"
249
274
  }), /*#__PURE__*/_jsx(ListCell, {
250
- compact: true,
251
275
  multiline: true,
252
276
  selected: true,
253
277
  description: "Multi-line description goes here with really long text",
278
+ layoutSpacing: "compact",
254
279
  onPress: onPressConsole,
255
280
  title: "Title"
256
281
  }), /*#__PURE__*/_jsx(ListCell, {
257
- compact: true,
258
282
  description: "Description",
259
283
  detail: "Detail",
284
+ layoutSpacing: "compact",
260
285
  onPress: onPressConsole,
261
286
  title: "Title"
262
287
  }), /*#__PURE__*/_jsx(ListCell, {
263
- compact: true,
264
288
  description: "Description",
265
289
  detail: "Detail",
266
- innerSpacing: innerSpacingConfig,
290
+ layoutSpacing: "compact",
267
291
  onPress: onPressConsole,
268
292
  subdetail: "Neutral",
269
293
  title: "Title"
270
294
  }), /*#__PURE__*/_jsx(ListCell, {
271
- compact: true,
272
295
  selected: true,
273
296
  description: "Description",
274
297
  detail: "Detail",
298
+ layoutSpacing: "compact",
275
299
  onPress: onPressConsole,
276
300
  subdetail: "Neutral",
277
301
  title: "Title"
278
302
  }), /*#__PURE__*/_jsx(ListCell, {
279
- compact: true,
280
303
  disabled: true,
281
304
  description: "Description",
282
305
  detail: "Detail",
283
- innerSpacing: innerSpacingConfig,
306
+ layoutSpacing: "compact",
284
307
  onPress: onPressConsole,
285
308
  subdetail: "Neutral",
286
309
  title: "Title"
287
310
  }), /*#__PURE__*/_jsx(ListCell, {
288
- compact: true,
289
311
  disabled: true,
290
312
  selected: true,
291
313
  description: "Description",
292
314
  detail: "Detail",
315
+ layoutSpacing: "compact",
293
316
  onPress: onPressConsole,
294
317
  subdetail: "+Postive",
295
318
  title: "Title",
296
319
  variant: "positive"
297
320
  }), /*#__PURE__*/_jsx(ListCell, {
298
- compact: true,
299
321
  disabled: true,
300
322
  selected: true,
301
323
  description: "Description",
302
324
  detail: "Detail",
325
+ layoutSpacing: "compact",
303
326
  onPress: onPressConsole,
304
327
  subdetail: "Warning",
305
328
  title: "Title",
@@ -308,36 +331,49 @@ const CompactPressableContent = () => /*#__PURE__*/_jsxs(_Fragment, {
308
331
  });
309
332
  const LongContent = () => /*#__PURE__*/_jsxs(_Fragment, {
310
333
  children: [/*#__PURE__*/_jsx(ListCell, {
311
- description: "Description also has a very long length that will wrap to 2 lines maximum. This is different from subtitle that only supports 1 line.",
312
334
  detail: "Detail also has a very long string",
313
335
  subdetail: "Neutral also does too",
314
- title: "Title with a very long length that should wrap to 2 lines when there is no subtitle or description"
336
+ title: "(Deprecated behavior) Title with a very long length that should be capped at 2 lines when there is no description provided"
315
337
  }), /*#__PURE__*/_jsx(ListCell, {
338
+ description: "Description",
316
339
  detail: "Detail also has a very long string",
317
340
  subdetail: "Neutral also does too",
318
- title: "disableMultilineTitle === undefined. Title with a very long length that should wrap to 2 lines when there is no subtitle or description"
341
+ title: "(Deprecated behavior) Title with a very long length that should be capped at 1 line when there is description provided"
342
+ }), /*#__PURE__*/_jsx(ListCell, {
343
+ detail: "Detail also has a very long string",
344
+ layoutSpacing: "hug",
345
+ subdetail: "Neutral also does too",
346
+ title: "Title with a very long length that should be capped at 2 lines"
319
347
  }), /*#__PURE__*/_jsx(ListCell, {
320
348
  disableMultilineTitle: true,
321
349
  detail: "Detail also has a very long string",
350
+ layoutSpacing: "hug",
322
351
  subdetail: "Neutral also does too",
323
- title: "disableMultilineTitle === true. Title with a very long length that should wrap to 2 lines when there is no subtitle or description"
352
+ title: "Title with a very long length that should be capped at 1 line when 'disableMultilineTitle' is turned on"
353
+ }), /*#__PURE__*/_jsx(ListCell, {
354
+ description: "Description also has a very long length that will be capped at 1 line, unless 'multiline' is turned on and the description can go as many lines as needed.",
355
+ detail: "Detail also has a very long string",
356
+ layoutSpacing: "hug",
357
+ subdetail: "Neutral also does too",
358
+ title: "Title with a very long length that should be capped at 2 lines"
324
359
  }), /*#__PURE__*/_jsx(ListCell, {
325
360
  multiline: true,
326
361
  selected: true,
327
- description: "Description also has a very long length that will wrap to 2 lines maximum. This is different from subtitle that only supports 1 line.",
362
+ description: "Description also has a very long length that will be capped at 1 line, unless 'multiline' is turned on and the description can go as many lines as needed.",
328
363
  detail: "Detail also has a very long string",
364
+ layoutSpacing: "hug",
329
365
  subdetail: "Neutral also does too",
330
- title: "Title with a very long length that should wrap to 2 lines when there is no subtitle or description"
366
+ title: "Title with a very long length that should be capped at 2 lines"
331
367
  })]
332
368
  });
333
369
  const PriorityContent = () => /*#__PURE__*/_jsxs(_Fragment, {
334
370
  children: [/*#__PURE__*/_jsx(ListCell, {
335
371
  description: "Some description of the asset",
336
372
  detail: "$334,239.03",
337
- intermediary: /*#__PURE__*/_jsx(CellMedia, {
338
- name: "chartLine",
339
- type: "icon"
373
+ intermediary: /*#__PURE__*/_jsx(Icon, {
374
+ name: "chartLine"
340
375
  }),
376
+ layoutSpacing: "hug",
341
377
  priority: "start",
342
378
  subdetail: "+4.06%",
343
379
  title: "Asset with a really long name",
@@ -345,10 +381,10 @@ const PriorityContent = () => /*#__PURE__*/_jsxs(_Fragment, {
345
381
  }), /*#__PURE__*/_jsx(ListCell, {
346
382
  description: "Some description of the asset",
347
383
  detail: "$334,239.03",
348
- intermediary: /*#__PURE__*/_jsx(CellMedia, {
349
- name: "chartLine",
350
- type: "icon"
384
+ intermediary: /*#__PURE__*/_jsx(Icon, {
385
+ name: "chartLine"
351
386
  }),
387
+ layoutSpacing: "hug",
352
388
  priority: "middle",
353
389
  subdetail: "+4.06%",
354
390
  title: "Asset with a really long name",
@@ -356,10 +392,10 @@ const PriorityContent = () => /*#__PURE__*/_jsxs(_Fragment, {
356
392
  }), /*#__PURE__*/_jsx(ListCell, {
357
393
  description: "Some description of the asset",
358
394
  detail: "$334,239.03",
359
- intermediary: /*#__PURE__*/_jsx(CellMedia, {
360
- name: "chartLine",
361
- type: "icon"
395
+ intermediary: /*#__PURE__*/_jsx(Icon, {
396
+ name: "chartLine"
362
397
  }),
398
+ layoutSpacing: "hug",
363
399
  priority: "end",
364
400
  subdetail: "+4.06%",
365
401
  title: "Asset with a really long name",
@@ -367,10 +403,10 @@ const PriorityContent = () => /*#__PURE__*/_jsxs(_Fragment, {
367
403
  }), /*#__PURE__*/_jsx(ListCell, {
368
404
  description: "Some description of the asset",
369
405
  detail: "$334,239.03",
370
- intermediary: /*#__PURE__*/_jsx(CellMedia, {
371
- name: "chartLine",
372
- type: "icon"
406
+ intermediary: /*#__PURE__*/_jsx(Icon, {
407
+ name: "chartLine"
373
408
  }),
409
+ layoutSpacing: "hug",
374
410
  priority: cellPriorities,
375
411
  subdetail: "+4.06%",
376
412
  title: "Asset with a really long name",
@@ -378,10 +414,10 @@ const PriorityContent = () => /*#__PURE__*/_jsxs(_Fragment, {
378
414
  }), /*#__PURE__*/_jsx(ListCell, {
379
415
  description: "Some description of the asset",
380
416
  detail: "$334,239.03",
381
- intermediary: /*#__PURE__*/_jsx(CellMedia, {
382
- name: "chartLine",
383
- type: "icon"
417
+ intermediary: /*#__PURE__*/_jsx(Icon, {
418
+ name: "chartLine"
384
419
  }),
420
+ layoutSpacing: "hug",
385
421
  priority: cellPriorities,
386
422
  subdetail: "+4.06%",
387
423
  title: "Asset with a really long name",
@@ -391,25 +427,30 @@ const PriorityContent = () => /*#__PURE__*/_jsxs(_Fragment, {
391
427
  const WithAccessory = () => /*#__PURE__*/_jsxs(_Fragment, {
392
428
  children: [/*#__PURE__*/_jsx(ListCell, {
393
429
  accessory: "arrow",
430
+ layoutSpacing: "hug",
394
431
  title: "Title"
395
432
  }), /*#__PURE__*/_jsx(ListCell, {
396
433
  accessory: "more",
397
434
  detail: "Detail",
435
+ layoutSpacing: "hug",
398
436
  title: "Title"
399
437
  }), /*#__PURE__*/_jsx(ListCell, {
400
438
  accessory: "selected",
401
439
  description: "Description",
440
+ layoutSpacing: "hug",
402
441
  title: "Title"
403
442
  }), /*#__PURE__*/_jsx(ListCell, {
404
443
  accessory: "arrow",
405
444
  description: "Description",
406
445
  detail: "Detail",
446
+ layoutSpacing: "hug",
407
447
  title: "Title"
408
448
  }), /*#__PURE__*/_jsx(ListCell, {
409
449
  selected: true,
410
450
  accessory: "arrow",
411
451
  description: "Description",
412
452
  detail: "Detail",
453
+ layoutSpacing: "hug",
413
454
  title: "Title"
414
455
  }), /*#__PURE__*/_jsx(ListCell, {
415
456
  disableSelectionAccessory: true,
@@ -417,17 +458,20 @@ const WithAccessory = () => /*#__PURE__*/_jsxs(_Fragment, {
417
458
  accessory: "arrow",
418
459
  description: "Description",
419
460
  detail: "Detail",
461
+ layoutSpacing: "hug",
420
462
  title: "Title"
421
463
  }), /*#__PURE__*/_jsx(ListCell, {
422
464
  accessory: "more",
423
465
  description: "Description",
424
466
  detail: "Detail",
467
+ layoutSpacing: "hug",
425
468
  subdetail: "Neutral",
426
469
  title: "Title"
427
470
  }), /*#__PURE__*/_jsx(ListCell, {
428
471
  accessory: "selected",
429
472
  description: "Description",
430
473
  detail: "Detail",
474
+ layoutSpacing: "hug",
431
475
  subdetail: "+Positive",
432
476
  title: "Title",
433
477
  variant: "positive"
@@ -435,6 +479,7 @@ const WithAccessory = () => /*#__PURE__*/_jsxs(_Fragment, {
435
479
  accessory: "arrow",
436
480
  description: "Description",
437
481
  detail: "Detail",
482
+ layoutSpacing: "hug",
438
483
  subdetail: "-Negative",
439
484
  title: "Title",
440
485
  variant: "negative"
@@ -442,6 +487,7 @@ const WithAccessory = () => /*#__PURE__*/_jsxs(_Fragment, {
442
487
  accessory: "arrow",
443
488
  description: "Description",
444
489
  detail: "Detail",
490
+ layoutSpacing: "hug",
445
491
  subdetail: "Warning",
446
492
  title: "Title",
447
493
  variant: "warning"
@@ -449,84 +495,85 @@ const WithAccessory = () => /*#__PURE__*/_jsxs(_Fragment, {
449
495
  });
450
496
  const WithMedia = () => /*#__PURE__*/_jsxs(_Fragment, {
451
497
  children: [/*#__PURE__*/_jsx(ListCell, {
452
- media: /*#__PURE__*/_jsx(CellMedia, {
498
+ layoutSpacing: "hug",
499
+ media: /*#__PURE__*/_jsx(Icon, {
453
500
  active: true,
454
- name: "email",
455
- type: "icon"
501
+ name: "email"
456
502
  }),
457
503
  title: "Icon"
458
504
  }), /*#__PURE__*/_jsx(ListCell, {
459
- media: /*#__PURE__*/_jsx(CellMedia, {
505
+ layoutSpacing: "hug",
506
+ media: /*#__PURE__*/_jsx(Icon, {
460
507
  active: true,
461
- name: "email",
462
- type: "icon"
508
+ name: "email"
463
509
  }),
464
510
  onPress: onPressConsole,
465
511
  title: "Icon (pressable)"
466
512
  }), /*#__PURE__*/_jsx(ListCell, {
467
513
  description: "Description",
468
- media: /*#__PURE__*/_jsx(CellMedia, {
469
- name: "phone",
470
- type: "icon"
514
+ layoutSpacing: "hug",
515
+ media: /*#__PURE__*/_jsx(Icon, {
516
+ name: "phone"
471
517
  }),
472
518
  title: "Icon"
473
519
  }), /*#__PURE__*/_jsx(ListCell, {
474
520
  description: "Description",
475
521
  detail: "Detail",
476
- media: /*#__PURE__*/_jsx(CellMedia, {
477
- source: assets.eth.imageUrl,
478
- type: "avatar"
522
+ layoutSpacing: "hug",
523
+ media: /*#__PURE__*/_jsx(Avatar, {
524
+ src: assets.eth.imageUrl
479
525
  }),
480
526
  title: "Avatar"
481
527
  }), /*#__PURE__*/_jsx(ListCell, {
482
528
  description: "Description",
483
529
  detail: "Detail",
484
- media: /*#__PURE__*/_jsx(CellMedia, {
485
- source: assets.eth.imageUrl,
486
- type: "asset"
530
+ layoutSpacing: "hug",
531
+ media: /*#__PURE__*/_jsx(Avatar, {
532
+ src: assets.eth.imageUrl
487
533
  }),
488
534
  subdetail: "Neutral",
489
535
  title: "Asset"
490
536
  }), /*#__PURE__*/_jsx(ListCell, {
491
537
  detail: "Detail",
492
- media: /*#__PURE__*/_jsx(CellMedia, {
493
- source: assets.eth.imageUrl,
494
- type: "image"
538
+ layoutSpacing: "hug",
539
+ media: /*#__PURE__*/_jsx(Avatar, {
540
+ src: assets.eth.imageUrl
495
541
  }),
496
542
  title: "Image"
497
543
  }), /*#__PURE__*/_jsx(ListCell, {
498
544
  description: "Description",
499
- media: /*#__PURE__*/_jsx(CellMedia, {
500
- illustration: /*#__PURE__*/_jsx(Pictogram, {
501
- name: "shield"
502
- }),
503
- type: "pictogram"
545
+ layoutSpacing: "hug",
546
+ media: /*#__PURE__*/_jsx(Pictogram, {
547
+ name: "shield"
504
548
  }),
505
549
  title: "Pictogram"
506
550
  })]
507
551
  });
508
552
  const WithActions = () => /*#__PURE__*/_jsxs(_Fragment, {
509
553
  children: [/*#__PURE__*/_jsx(ListCell, {
510
- action: /*#__PURE__*/_jsx(Button, {
554
+ detail: "Detail",
555
+ end: /*#__PURE__*/_jsx(Button, {
511
556
  children: "Action"
512
557
  }),
513
- detail: "Detail",
558
+ layoutSpacing: "hug",
514
559
  title: "Title"
515
560
  }), /*#__PURE__*/_jsx(ListCell, {
516
- action: /*#__PURE__*/_jsx(Button, {
561
+ description: "Description",
562
+ end: /*#__PURE__*/_jsx(Button, {
517
563
  compact: true,
518
564
  variant: "negative",
519
565
  children: "Action"
520
566
  }),
521
- description: "Description",
567
+ layoutSpacing: "hug",
522
568
  title: "Title"
523
569
  }), /*#__PURE__*/_jsx(ListCell, {
524
- action: /*#__PURE__*/_jsx(IconButton, {
570
+ description: "Description",
571
+ detail: "Detail",
572
+ end: /*#__PURE__*/_jsx(IconButton, {
525
573
  accessibilityLabel: "External link",
526
574
  name: "externalLink"
527
575
  }),
528
- description: "Description",
529
- detail: "Detail",
576
+ layoutSpacing: "hug",
530
577
  title: "Title"
531
578
  })]
532
579
  });
@@ -535,46 +582,46 @@ const WithIntermediary = () => /*#__PURE__*/_jsxs(_Fragment, {
535
582
  description: "Description",
536
583
  detail: "$1,230",
537
584
  detailWidth: 100,
538
- intermediary: /*#__PURE__*/_jsx(CellMedia, {
539
- name: "chartLine",
540
- type: "icon"
585
+ intermediary: /*#__PURE__*/_jsx(Icon, {
586
+ name: "chartLine"
541
587
  }),
588
+ layoutSpacing: "hug",
542
589
  title: "Title"
543
590
  }), /*#__PURE__*/_jsx(ListCell, {
544
591
  description: "Description",
545
592
  detail: "$44,130",
546
593
  detailWidth: 100,
547
- intermediary: /*#__PURE__*/_jsx(CellMedia, {
548
- name: "chartLine",
549
- type: "icon"
594
+ intermediary: /*#__PURE__*/_jsx(Icon, {
595
+ name: "chartLine"
550
596
  }),
597
+ layoutSpacing: "hug",
551
598
  title: "Title"
552
599
  }), /*#__PURE__*/_jsx(ListCell, {
553
600
  description: "Description",
554
601
  detail: "$942,103",
555
602
  detailWidth: 100,
556
- intermediary: /*#__PURE__*/_jsx(CellMedia, {
557
- name: "chartLine",
558
- type: "icon"
603
+ intermediary: /*#__PURE__*/_jsx(Icon, {
604
+ name: "chartLine"
559
605
  }),
606
+ layoutSpacing: "hug",
560
607
  title: "Title"
561
608
  }), /*#__PURE__*/_jsx(ListCell, {
562
609
  description: "Description",
563
610
  detail: "$530",
564
611
  detailWidth: 100,
565
- intermediary: /*#__PURE__*/_jsx(CellMedia, {
566
- name: "chartLine",
567
- type: "icon"
612
+ intermediary: /*#__PURE__*/_jsx(Icon, {
613
+ name: "chartLine"
568
614
  }),
615
+ layoutSpacing: "hug",
569
616
  title: "Title"
570
617
  }), /*#__PURE__*/_jsx(ListCell, {
571
618
  description: "Description",
572
619
  detail: "$123K",
573
620
  detailWidth: 100,
574
- intermediary: /*#__PURE__*/_jsx(CellMedia, {
575
- name: "chartLine",
576
- type: "icon"
621
+ intermediary: /*#__PURE__*/_jsx(Icon, {
622
+ name: "chartLine"
577
623
  }),
624
+ layoutSpacing: "hug",
578
625
  title: "Title"
579
626
  })]
580
627
  });
@@ -583,6 +630,7 @@ const WithHelperText = () => /*#__PURE__*/_jsxs(_Fragment, {
583
630
  helperText: /*#__PURE__*/_jsx(CellHelperText, {
584
631
  children: "Helper text"
585
632
  }),
633
+ layoutSpacing: "hug",
586
634
  onPress: onPressConsole,
587
635
  title: "Title"
588
636
  }), /*#__PURE__*/_jsx(ListCell, {
@@ -590,6 +638,7 @@ const WithHelperText = () => /*#__PURE__*/_jsxs(_Fragment, {
590
638
  helperText: /*#__PURE__*/_jsx(CellHelperText, {
591
639
  children: "Helper text"
592
640
  }),
641
+ layoutSpacing: "hug",
593
642
  onPress: onPressConsole,
594
643
  title: "Title"
595
644
  }), /*#__PURE__*/_jsx(ListCell, {
@@ -599,6 +648,7 @@ const WithHelperText = () => /*#__PURE__*/_jsxs(_Fragment, {
599
648
  variant: "warning",
600
649
  children: "Warning text"
601
650
  }),
651
+ layoutSpacing: "hug",
602
652
  onPress: onPressConsole,
603
653
  title: "Title"
604
654
  }), /*#__PURE__*/_jsx(ListCell, {
@@ -608,6 +658,7 @@ const WithHelperText = () => /*#__PURE__*/_jsxs(_Fragment, {
608
658
  variant: "error",
609
659
  children: "Error text"
610
660
  }),
661
+ layoutSpacing: "hug",
611
662
  onPress: onPressConsole,
612
663
  subdetail: "Subdetail",
613
664
  title: "Title"
@@ -619,6 +670,7 @@ const WithHelperText = () => /*#__PURE__*/_jsxs(_Fragment, {
619
670
  variant: "error",
620
671
  children: "Disabled error text"
621
672
  }),
673
+ layoutSpacing: "hug",
622
674
  onPress: onPressConsole,
623
675
  subdetail: "Subdetail",
624
676
  title: "Title"
@@ -628,38 +680,39 @@ const WithHelperText = () => /*#__PURE__*/_jsxs(_Fragment, {
628
680
  paddingStart: 6,
629
681
  children: "Helper text with media"
630
682
  }),
631
- media: /*#__PURE__*/_jsx(CellMedia, {
632
- source: assets.eth.imageUrl,
633
- type: "avatar"
683
+ layoutSpacing: "hug",
684
+ media: /*#__PURE__*/_jsx(Avatar, {
685
+ src: assets.eth.imageUrl
634
686
  }),
635
687
  onPress: onPressConsole,
636
688
  title: "Title"
637
689
  }), /*#__PURE__*/_jsx(ListCell, {
638
- action: /*#__PURE__*/_jsx(Button, {
690
+ description: "Description",
691
+ end: /*#__PURE__*/_jsx(Button, {
639
692
  compact: true,
640
693
  children: "Action"
641
694
  }),
642
- description: "Description",
643
695
  helperText: /*#__PURE__*/_jsx(CellHelperText, {
644
696
  variant: "warning",
645
697
  children: "Helper text with action"
646
698
  }),
699
+ layoutSpacing: "hug",
647
700
  title: "Title"
648
701
  }), /*#__PURE__*/_jsx(ListCell, {
649
702
  accessory: "more",
650
- action: /*#__PURE__*/_jsx(Button, {
703
+ description: "Description also has a very long length that will wrap to 2 lines maximum. This is different from subtitle that only supports 1 line.",
704
+ end: /*#__PURE__*/_jsx(Button, {
651
705
  compact: true,
652
706
  children: "Action"
653
707
  }),
654
- description: "Description also has a very long length that will wrap to 2 lines maximum. This is different from subtitle that only supports 1 line.",
655
708
  helperText: /*#__PURE__*/_jsx(CellHelperText, {
656
709
  paddingStart: 6,
657
710
  variant: "error",
658
711
  children: "Helper text with media, action, and accessory and very long text"
659
712
  }),
660
- media: /*#__PURE__*/_jsx(CellMedia, {
661
- source: assets.eth.imageUrl,
662
- type: "avatar"
713
+ layoutSpacing: "hug",
714
+ media: /*#__PURE__*/_jsx(Avatar, {
715
+ src: assets.eth.imageUrl
663
716
  }),
664
717
  priority: "end",
665
718
  title: "Title"
@@ -672,6 +725,7 @@ const CustomSpacing = () => /*#__PURE__*/_jsxs(_Fragment, {
672
725
  description: "Description",
673
726
  detail: "$1,230",
674
727
  detailWidth: 100,
728
+ layoutSpacing: "hug",
675
729
  onPress: onPressConsole,
676
730
  title: "Title"
677
731
  }, selectCellSpacingConfig)), /*#__PURE__*/_jsx(ListCell, _extends({
@@ -679,10 +733,423 @@ const CustomSpacing = () => /*#__PURE__*/_jsxs(_Fragment, {
679
733
  description: "Description",
680
734
  detail: "$1,230",
681
735
  detailWidth: 100,
736
+ layoutSpacing: "hug",
682
737
  onPress: onPressConsole,
683
738
  title: "Title"
684
739
  }, selectCellSpacingConfig))]
685
740
  });
741
+ const HugListCell = () => {
742
+ const theme = useTheme();
743
+ return /*#__PURE__*/_jsxs(VStack, {
744
+ width: "360px",
745
+ children: [/*#__PURE__*/_jsx(ListCell, {
746
+ accessory: "more",
747
+ description: "Description",
748
+ detail: "Detail",
749
+ layoutSpacing: "hug",
750
+ media: /*#__PURE__*/_jsx(Avatar, {
751
+ shape: "circle",
752
+ size: "l",
753
+ src: assets.eth.imageUrl
754
+ }),
755
+ onPress: onPressConsole,
756
+ subdetail: "Subdetail",
757
+ title: "Title"
758
+ }), /*#__PURE__*/_jsx(ListCell, {
759
+ accessory: "more",
760
+ description: "Description",
761
+ detail: "Detail",
762
+ helperText: /*#__PURE__*/_jsx(CellHelperText, {
763
+ font: "label2",
764
+ variant: "information",
765
+ children: "This is helpful information to guide the user"
766
+ }),
767
+ layoutSpacing: "hug",
768
+ media: /*#__PURE__*/_jsx(Avatar, {
769
+ shape: "circle",
770
+ size: "l",
771
+ src: assets.eth.imageUrl
772
+ }),
773
+ onPress: onPressConsole,
774
+ subdetail: "Subdetail",
775
+ title: "Title"
776
+ }), /*#__PURE__*/_jsx(ListCell, {
777
+ multiline: true,
778
+ accessory: "more",
779
+ description: "Long description with multiple lines. This section can be arbitrarily long and occupy many many lines.",
780
+ detail: "Detail",
781
+ layoutSpacing: "hug",
782
+ media: /*#__PURE__*/_jsx(Avatar, {
783
+ shape: "circle",
784
+ size: "l",
785
+ src: assets.eth.imageUrl
786
+ }),
787
+ onPress: onPressConsole,
788
+ subdetail: "Subdetail",
789
+ title: "Title"
790
+ }), /*#__PURE__*/_jsx(ListCell, {
791
+ multiline: true,
792
+ accessory: "more",
793
+ description: "Long description with multiple lines. This section can be arbitrarily long and occupy many many lines.",
794
+ detail: "Detail",
795
+ layoutSpacing: "hug",
796
+ media: /*#__PURE__*/_jsx(Avatar, {
797
+ shape: "circle",
798
+ size: "l",
799
+ src: assets.eth.imageUrl
800
+ }),
801
+ onPress: onPressConsole,
802
+ styles: {
803
+ media: {
804
+ marginTop: theme.space[1],
805
+ alignSelf: 'flex-start'
806
+ }
807
+ },
808
+ subdetail: "Subdetail",
809
+ title: "Title"
810
+ }), /*#__PURE__*/_jsx(ListCell, {
811
+ accessory: "more",
812
+ description: "Description",
813
+ detail: "Detail",
814
+ layoutSpacing: "hug",
815
+ onPress: onPressConsole,
816
+ subdetail: "Subdetail",
817
+ title: "Title"
818
+ }), /*#__PURE__*/_jsx(ListCell, {
819
+ accessory: "more",
820
+ description: "Description",
821
+ detail: "Detail",
822
+ layoutSpacing: "hug",
823
+ media: /*#__PURE__*/_jsx(Icon, {
824
+ name: "heart",
825
+ size: "l"
826
+ }),
827
+ onPress: onPressConsole,
828
+ subdetail: "Subdetail",
829
+ title: "Title"
830
+ }), /*#__PURE__*/_jsx(ListCell, {
831
+ accessory: "more",
832
+ description: "Description",
833
+ detail: "Detail",
834
+ layoutSpacing: "hug",
835
+ media: /*#__PURE__*/_jsx(Icon, {
836
+ name: "heart",
837
+ size: "s"
838
+ }),
839
+ onPress: onPressConsole,
840
+ subdetail: "Subdetail",
841
+ title: "Title"
842
+ }), /*#__PURE__*/_jsx(ListCell, {
843
+ accessory: "more",
844
+ description: "Description",
845
+ detail: "Detail",
846
+ end: /*#__PURE__*/_jsx(Button, {
847
+ compact: true,
848
+ children: "Action"
849
+ }),
850
+ layoutSpacing: "hug",
851
+ media: /*#__PURE__*/_jsx(Icon, {
852
+ name: "heart",
853
+ size: "xs"
854
+ }),
855
+ onPress: onPressConsole,
856
+ subdetail: "Subdetail",
857
+ title: "Title"
858
+ }), /*#__PURE__*/_jsx(ListCell, {
859
+ accessory: "more",
860
+ description: "Description",
861
+ detail: "Detail",
862
+ intermediary: /*#__PURE__*/_jsx(Avatar, {
863
+ shape: "square",
864
+ size: "l",
865
+ src: squareAssets.human6
866
+ }),
867
+ layoutSpacing: "hug",
868
+ media: /*#__PURE__*/_jsx(Avatar, {
869
+ shape: "square",
870
+ size: "l",
871
+ src: squareAssets.human1
872
+ }),
873
+ onPress: onPressConsole,
874
+ subdetail: /*#__PURE__*/_jsx(Tag, {
875
+ colorScheme: "green",
876
+ children: /*#__PURE__*/_jsxs(HStack, {
877
+ alignItems: "center",
878
+ gap: 0.5,
879
+ justifyContent: "flex-end",
880
+ paddingTop: 1,
881
+ children: [/*#__PURE__*/_jsx(Icon, {
882
+ color: "fgPositive",
883
+ name: "diagonalUpArrow",
884
+ size: "xs"
885
+ }), /*#__PURE__*/_jsx(Text, {
886
+ color: "fgPositive",
887
+ children: "1.64%"
888
+ })]
889
+ })
890
+ }),
891
+ title: "Title"
892
+ })]
893
+ });
894
+ };
895
+ const LayoutSpacing = () => /*#__PURE__*/_jsxs(VStack, {
896
+ children: [/*#__PURE__*/_jsx(ListCell, {
897
+ accessory: "arrow",
898
+ description: "New design (hug)",
899
+ detail: "$12,345.00",
900
+ intermediary: /*#__PURE__*/_jsx(Icon, {
901
+ name: "chartLine"
902
+ }),
903
+ layoutSpacing: "hug",
904
+ media: /*#__PURE__*/_jsx(Avatar, {
905
+ src: assets.eth.imageUrl
906
+ }),
907
+ onPress: onPressConsole,
908
+ subdetail: "+1.23%",
909
+ title: "Hug",
910
+ variant: "positive"
911
+ }), /*#__PURE__*/_jsx(ListCell, {
912
+ accessory: "arrow",
913
+ description: "Deprecated (use hug)",
914
+ detail: "$12,345.00",
915
+ intermediary: /*#__PURE__*/_jsx(Icon, {
916
+ name: "chartLine"
917
+ }),
918
+ layoutSpacing: "compact",
919
+ media: /*#__PURE__*/_jsx(Avatar, {
920
+ src: assets.eth.imageUrl
921
+ }),
922
+ onPress: onPressConsole,
923
+ subdetail: "+1.23%",
924
+ title: "Compact",
925
+ variant: "positive"
926
+ }), /*#__PURE__*/_jsx(ListCell, {
927
+ accessory: "arrow",
928
+ description: "Deprecated (use hug)",
929
+ detail: "$12,345.00",
930
+ intermediary: /*#__PURE__*/_jsx(Icon, {
931
+ name: "chartLine"
932
+ }),
933
+ layoutSpacing: "spacious",
934
+ media: /*#__PURE__*/_jsx(Avatar, {
935
+ src: assets.eth.imageUrl
936
+ }),
937
+ onPress: onPressConsole,
938
+ subdetail: "+1.23%",
939
+ title: "Spacious",
940
+ variant: "positive"
941
+ })]
942
+ });
943
+ const UseCaseShowcase = () => {
944
+ const format = {
945
+ style: 'currency',
946
+ currency: 'USD',
947
+ minimumFractionDigits: 2,
948
+ maximumFractionDigits: 2
949
+ };
950
+ const currency = new Intl.NumberFormat(undefined, format);
951
+
952
+ // State for prices and amounts to enable simulation updates
953
+ const [btcPrice, setBtcPrice] = React.useState(8407.9);
954
+ const [btcAmt, setBtcAmt] = React.useState(0.1246);
955
+ const [ethPrice, setEthPrice] = React.useState(2381.86);
956
+ const [ethAmt, setEthAmt] = React.useState(0.5);
957
+ const [adaPrice, setAdaPrice] = React.useState(0.84);
958
+ const [adaAmt, setAdaAmt] = React.useState(1);
959
+ const [ltcPrice, setLtcPrice] = React.useState(145.32);
960
+ const [ltcAmt, setLtcAmt] = React.useState(2.3);
961
+ const [daiPrice, setDaiPrice] = React.useState(1);
962
+ const [daiAmt, setDaiAmt] = React.useState(100);
963
+ const simulate = React.useCallback(() => {
964
+ const jitter = function (value, pct) {
965
+ if (pct === void 0) {
966
+ pct = 0.03;
967
+ }
968
+ const delta = (Math.random() * 2 - 1) * pct;
969
+ return Math.max(0, value * (1 + delta));
970
+ };
971
+ setBtcPrice(v => jitter(v));
972
+ setBtcAmt(v => jitter(v, 0.05));
973
+ setEthPrice(v => jitter(v));
974
+ setEthAmt(v => jitter(v, 0.05));
975
+ setAdaPrice(v => jitter(v));
976
+ setAdaAmt(v => jitter(v, 0.05));
977
+ setLtcPrice(v => jitter(v));
978
+ setLtcAmt(v => jitter(v, 0.05));
979
+ setDaiPrice(v => jitter(v));
980
+ setDaiAmt(v => jitter(v, 0.05));
981
+ }, []);
982
+ return /*#__PURE__*/_jsxs(VStack, {
983
+ width: "360px",
984
+ children: [/*#__PURE__*/_jsx(ListCell, {
985
+ accessibilityLabel: "BTC, value " + currency.format(btcPrice) + ", amount " + btcAmt.toLocaleString() + " BTC"
986
+ // If you need to pass non-string values to the detail or subdetail,
987
+ // you can use the end prop to pass in a VStack, which can be anything you want.
988
+ ,
989
+ end: /*#__PURE__*/_jsxs(VStack, {
990
+ alignItems: "flex-end",
991
+ children: [/*#__PURE__*/_jsx(RollingNumber, {
992
+ colorPulseOnUpdate: true,
993
+ font: "body",
994
+ format: format,
995
+ value: btcPrice
996
+ }), /*#__PURE__*/_jsx(RollingNumber, {
997
+ color: "fgMuted",
998
+ font: "label2",
999
+ suffix: " BTC",
1000
+ value: btcAmt
1001
+ })]
1002
+ }),
1003
+ intermediary: /*#__PURE__*/_jsx(Icon, {
1004
+ name: "chartLine"
1005
+ }),
1006
+ layoutSpacing: "hug",
1007
+ media: /*#__PURE__*/_jsx(Avatar, {
1008
+ src: assets.btc.imageUrl
1009
+ }),
1010
+ onPress: onPressConsole,
1011
+ priority: "middle",
1012
+ styles: {
1013
+ end: {
1014
+ width: 100
1015
+ }
1016
+ },
1017
+ title: "BTC"
1018
+ }), /*#__PURE__*/_jsx(ListCell, {
1019
+ accessibilityLabel: "ETH, 25% staked, value " + currency.format(ethPrice) + ", amount " + ethAmt.toLocaleString() + " ETH"
1020
+ // If you need to pass non-string values to the detail or subdetail,
1021
+ // you can use the end prop to pass in a VStack, which can be anything you want.
1022
+ ,
1023
+ description: "25% staked",
1024
+ end: /*#__PURE__*/_jsxs(VStack, {
1025
+ alignItems: "flex-end",
1026
+ children: [/*#__PURE__*/_jsx(RollingNumber, {
1027
+ colorPulseOnUpdate: true,
1028
+ font: "body",
1029
+ format: format,
1030
+ value: ethPrice
1031
+ }), /*#__PURE__*/_jsx(RollingNumber, {
1032
+ color: "fgMuted",
1033
+ font: "label2",
1034
+ suffix: " ETH",
1035
+ value: ethAmt
1036
+ })]
1037
+ }),
1038
+ intermediary: /*#__PURE__*/_jsx(Icon, {
1039
+ name: "chartLine"
1040
+ }),
1041
+ layoutSpacing: "hug",
1042
+ media: /*#__PURE__*/_jsx(Avatar, {
1043
+ src: assets.eth.imageUrl
1044
+ }),
1045
+ onPress: onPressConsole,
1046
+ styles: {
1047
+ end: {
1048
+ width: 100
1049
+ }
1050
+ },
1051
+ title: "ETH"
1052
+ }), /*#__PURE__*/_jsx(ListCell, {
1053
+ accessibilityLabel: "ADA, 51% staked, value " + currency.format(adaPrice) + ", amount " + adaAmt.toLocaleString() + " ADA"
1054
+ // If you need to pass non-string values to the detail or subdetail,
1055
+ // you can use the end prop to pass in a VStack, which can be anything you want.
1056
+ ,
1057
+ description: "51% staked",
1058
+ end: /*#__PURE__*/_jsxs(VStack, {
1059
+ alignItems: "flex-end",
1060
+ children: [/*#__PURE__*/_jsx(RollingNumber, {
1061
+ colorPulseOnUpdate: true,
1062
+ font: "body",
1063
+ format: format,
1064
+ value: adaPrice
1065
+ }), /*#__PURE__*/_jsx(RollingNumber, {
1066
+ color: "fgMuted",
1067
+ font: "label2",
1068
+ suffix: " ADA",
1069
+ value: adaAmt
1070
+ })]
1071
+ }),
1072
+ intermediary: /*#__PURE__*/_jsx(Icon, {
1073
+ name: "chartLine"
1074
+ }),
1075
+ layoutSpacing: "hug",
1076
+ media: /*#__PURE__*/_jsx(Avatar, {
1077
+ src: assets.ada.imageUrl
1078
+ }),
1079
+ onPress: onPressConsole,
1080
+ styles: {
1081
+ end: {
1082
+ width: 100
1083
+ }
1084
+ },
1085
+ title: "ADA"
1086
+ }), /*#__PURE__*/_jsx(ListCell, {
1087
+ accessibilityLabel: "LTC, value " + currency.format(ltcPrice) + ", amount " + ltcAmt.toLocaleString() + " LTC",
1088
+ end: /*#__PURE__*/_jsxs(VStack, {
1089
+ alignItems: "flex-end",
1090
+ children: [/*#__PURE__*/_jsx(RollingNumber, {
1091
+ colorPulseOnUpdate: true,
1092
+ font: "body",
1093
+ format: format,
1094
+ value: ltcPrice
1095
+ }), /*#__PURE__*/_jsx(RollingNumber, {
1096
+ color: "fgMuted",
1097
+ font: "label2",
1098
+ suffix: " LTC",
1099
+ value: ltcAmt
1100
+ })]
1101
+ }),
1102
+ intermediary: /*#__PURE__*/_jsx(Icon, {
1103
+ name: "chartLine"
1104
+ }),
1105
+ layoutSpacing: "hug",
1106
+ media: /*#__PURE__*/_jsx(Avatar, {
1107
+ src: assets.ltc.imageUrl
1108
+ }),
1109
+ onPress: onPressConsole,
1110
+ styles: {
1111
+ end: {
1112
+ width: 100
1113
+ }
1114
+ },
1115
+ title: "LTC"
1116
+ }), /*#__PURE__*/_jsx(ListCell, {
1117
+ accessibilityLabel: "DAI, Stablecoin, value " + currency.format(daiPrice) + ", amount " + daiAmt.toLocaleString() + " DAI",
1118
+ description: "Stablecoin",
1119
+ end: /*#__PURE__*/_jsxs(VStack, {
1120
+ alignItems: "flex-end",
1121
+ children: [/*#__PURE__*/_jsx(RollingNumber, {
1122
+ colorPulseOnUpdate: true,
1123
+ font: "body",
1124
+ format: format,
1125
+ value: daiPrice
1126
+ }), /*#__PURE__*/_jsx(RollingNumber, {
1127
+ color: "fgMuted",
1128
+ font: "label2",
1129
+ suffix: " DAI",
1130
+ value: daiAmt
1131
+ })]
1132
+ }),
1133
+ intermediary: /*#__PURE__*/_jsx(Icon, {
1134
+ name: "chartLine"
1135
+ }),
1136
+ layoutSpacing: "hug",
1137
+ media: /*#__PURE__*/_jsx(Avatar, {
1138
+ src: assets.dai.imageUrl
1139
+ }),
1140
+ onPress: onPressConsole,
1141
+ styles: {
1142
+ end: {
1143
+ width: 100
1144
+ }
1145
+ },
1146
+ title: "DAI"
1147
+ }), /*#__PURE__*/_jsx(Button, {
1148
+ onPress: simulate,
1149
+ children: "Simulate"
1150
+ })]
1151
+ });
1152
+ };
686
1153
  const ListCellScreen = () => {
687
1154
  return /*#__PURE__*/_jsxs(ExampleScreen, {
688
1155
  children: [/*#__PURE__*/_jsx(Example, {
@@ -694,7 +1161,7 @@ const ListCellScreen = () => {
694
1161
  }), /*#__PURE__*/_jsx(Example, {
695
1162
  inline: true,
696
1163
  paddingX: 0,
697
- title: "CompactContent",
1164
+ title: "CompactContent(deprecated)",
698
1165
  titlePadding: titlePadding,
699
1166
  children: /*#__PURE__*/_jsx(CompactContent, {})
700
1167
  }), /*#__PURE__*/_jsx(Example, {
@@ -706,7 +1173,7 @@ const ListCellScreen = () => {
706
1173
  }), /*#__PURE__*/_jsx(Example, {
707
1174
  inline: true,
708
1175
  paddingX: 0,
709
- title: "CompactPressableContent",
1176
+ title: "CompactPressableContent(deprecated)",
710
1177
  titlePadding: titlePadding,
711
1178
  children: /*#__PURE__*/_jsx(CompactPressableContent, {})
712
1179
  }), /*#__PURE__*/_jsx(Example, {
@@ -757,6 +1224,24 @@ const ListCellScreen = () => {
757
1224
  title: "CustomSpacing",
758
1225
  titlePadding: titlePadding,
759
1226
  children: /*#__PURE__*/_jsx(CustomSpacing, {})
1227
+ }), /*#__PURE__*/_jsx(Example, {
1228
+ inline: true,
1229
+ paddingX: 0,
1230
+ title: "HugListCell",
1231
+ titlePadding: titlePadding,
1232
+ children: /*#__PURE__*/_jsx(HugListCell, {})
1233
+ }), /*#__PURE__*/_jsx(Example, {
1234
+ inline: true,
1235
+ paddingX: 0,
1236
+ title: "LayoutSpacing",
1237
+ titlePadding: titlePadding,
1238
+ children: /*#__PURE__*/_jsx(LayoutSpacing, {})
1239
+ }), /*#__PURE__*/_jsx(Example, {
1240
+ inline: true,
1241
+ paddingX: 0,
1242
+ title: "UseCaseShowcase",
1243
+ titlePadding: titlePadding,
1244
+ children: /*#__PURE__*/_jsx(UseCaseShowcase, {})
760
1245
  })]
761
1246
  });
762
1247
  };