@coinbase/cds-mobile 8.16.0 → 8.16.2

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 (10) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dts/cells/ListCell.d.ts +41 -36
  3. package/dts/cells/ListCell.d.ts.map +1 -1
  4. package/dts/cells/ListCellFallback.d.ts +1 -1
  5. package/dts/cells/ListCellFallback.d.ts.map +1 -1
  6. package/esm/cells/ListCell.js +16 -15
  7. package/esm/cells/ListCellFallback.js +5 -5
  8. package/esm/cells/__stories__/ListCell.stories.js +118 -119
  9. package/esm/cells/__stories__/ListCellFallback.stories.js +53 -53
  10. package/package.json +3 -3
package/esm/cells/__stories__/ListCell.stories.js CHANGED
@@ -25,60 +25,60 @@ const titlePadding = {
25
25
  const Content = () => {
26
26
  return /*#__PURE__*/_jsxs(_Fragment, {
27
27
  children: [/*#__PURE__*/_jsx(ListCell, {
28
- layoutSpacing: "hug",
28
+ spacingVariant: "condensed",
29
29
  title: "Title"
30
30
  }), /*#__PURE__*/_jsx(ListCell, {
31
31
  detail: "Detail",
32
- layoutSpacing: "hug",
32
+ spacingVariant: "condensed",
33
33
  title: "Title"
34
34
  }), /*#__PURE__*/_jsx(ListCell, {
35
35
  description: "Description",
36
- layoutSpacing: "hug",
36
+ spacingVariant: "condensed",
37
37
  title: "Title"
38
38
  }), /*#__PURE__*/_jsx(ListCell, {
39
39
  description: "Description",
40
40
  detail: "Detail",
41
- layoutSpacing: "hug",
41
+ spacingVariant: "condensed",
42
42
  title: "Title"
43
43
  }), /*#__PURE__*/_jsx(ListCell, {
44
44
  description: "Description",
45
45
  detail: "Detail",
46
- layoutSpacing: "hug",
46
+ spacingVariant: "condensed",
47
47
  subdetail: "Neutral",
48
48
  title: "Title"
49
49
  }), /*#__PURE__*/_jsx(ListCell, {
50
50
  detail: "Detail",
51
- layoutSpacing: "hug",
51
+ spacingVariant: "condensed",
52
52
  subdetail: "Neutral",
53
53
  title: "Title"
54
54
  }), /*#__PURE__*/_jsx(ListCell, {
55
55
  description: "Description",
56
56
  detail: "Detail",
57
- layoutSpacing: "hug",
57
+ spacingVariant: "condensed",
58
58
  subdetail: "+Positive",
59
59
  title: "Title",
60
60
  variant: "positive"
61
61
  }), /*#__PURE__*/_jsx(ListCell, {
62
- layoutSpacing: "hug",
62
+ spacingVariant: "condensed",
63
63
  subdetail: "+Positive",
64
64
  title: "Title",
65
65
  variant: "positive"
66
66
  }), /*#__PURE__*/_jsx(ListCell, {
67
67
  description: "Description",
68
68
  detail: "Detail",
69
- layoutSpacing: "hug",
69
+ spacingVariant: "condensed",
70
70
  subdetail: "-Negative",
71
71
  title: "Title",
72
72
  variant: "negative"
73
73
  }), /*#__PURE__*/_jsx(ListCell, {
74
74
  detail: "Detail",
75
- layoutSpacing: "hug",
75
+ spacingVariant: "condensed",
76
76
  subdetail: "-Negative",
77
77
  title: "Title",
78
78
  variant: "negative"
79
79
  }), /*#__PURE__*/_jsx(ListCell, {
80
80
  detail: "Detail",
81
- layoutSpacing: "hug",
81
+ spacingVariant: "condensed",
82
82
  subdetail: "Warning",
83
83
  title: "Title",
84
84
  variant: "warning"
@@ -88,60 +88,60 @@ const Content = () => {
88
88
  const CompactContent = () => {
89
89
  return /*#__PURE__*/_jsxs(_Fragment, {
90
90
  children: [/*#__PURE__*/_jsx(ListCell, {
91
- layoutSpacing: "compact",
91
+ spacingVariant: "compact",
92
92
  title: "Title"
93
93
  }), /*#__PURE__*/_jsx(ListCell, {
94
94
  detail: "Detail",
95
- layoutSpacing: "compact",
95
+ spacingVariant: "compact",
96
96
  title: "Title"
97
97
  }), /*#__PURE__*/_jsx(ListCell, {
98
98
  description: "Description",
99
- layoutSpacing: "compact",
99
+ spacingVariant: "compact",
100
100
  title: "Title"
101
101
  }), /*#__PURE__*/_jsx(ListCell, {
102
102
  description: "Description",
103
103
  detail: "Detail",
104
- layoutSpacing: "compact",
104
+ spacingVariant: "compact",
105
105
  title: "Title"
106
106
  }), /*#__PURE__*/_jsx(ListCell, {
107
107
  description: "Description",
108
108
  detail: "Detail",
109
- layoutSpacing: "compact",
109
+ spacingVariant: "compact",
110
110
  subdetail: "Neutral",
111
111
  title: "Title"
112
112
  }), /*#__PURE__*/_jsx(ListCell, {
113
113
  detail: "Detail",
114
- layoutSpacing: "compact",
114
+ spacingVariant: "compact",
115
115
  subdetail: "Neutral",
116
116
  title: "Title"
117
117
  }), /*#__PURE__*/_jsx(ListCell, {
118
118
  description: "Description",
119
119
  detail: "Detail",
120
- layoutSpacing: "compact",
120
+ spacingVariant: "compact",
121
121
  subdetail: "+Positive",
122
122
  title: "Title",
123
123
  variant: "positive"
124
124
  }), /*#__PURE__*/_jsx(ListCell, {
125
- layoutSpacing: "compact",
125
+ spacingVariant: "compact",
126
126
  subdetail: "+Positive",
127
127
  title: "Title",
128
128
  variant: "positive"
129
129
  }), /*#__PURE__*/_jsx(ListCell, {
130
130
  description: "Description",
131
131
  detail: "Detail",
132
- layoutSpacing: "compact",
132
+ spacingVariant: "compact",
133
133
  subdetail: "-Negative",
134
134
  title: "Title",
135
135
  variant: "negative"
136
136
  }), /*#__PURE__*/_jsx(ListCell, {
137
137
  detail: "Detail",
138
- layoutSpacing: "compact",
138
+ spacingVariant: "compact",
139
139
  subdetail: "-Negative",
140
140
  title: "Title",
141
141
  variant: "negative"
142
142
  }), /*#__PURE__*/_jsx(ListCell, {
143
143
  detail: "Detail",
144
- layoutSpacing: "compact",
144
+ spacingVariant: "compact",
145
145
  subdetail: "Warning",
146
146
  title: "Title",
147
147
  variant: "warning"
@@ -150,74 +150,74 @@ const CompactContent = () => {
150
150
  };
151
151
  const PressableContent = () => /*#__PURE__*/_jsxs(_Fragment, {
152
152
  children: [/*#__PURE__*/_jsx(ListCell, {
153
- layoutSpacing: "hug",
154
153
  onPress: onPressConsole,
154
+ spacingVariant: "condensed",
155
155
  title: "Title"
156
156
  }), /*#__PURE__*/_jsx(ListCell, {
157
- layoutSpacing: "hug",
158
157
  onPress: onPressConsole,
158
+ spacingVariant: "condensed",
159
159
  subdetail: "Neutral",
160
160
  title: "Title"
161
161
  }), /*#__PURE__*/_jsx(ListCell, {
162
162
  description: "Multi-line description",
163
- layoutSpacing: "hug",
164
163
  onPress: onPressConsole,
164
+ spacingVariant: "condensed",
165
165
  title: "Title"
166
166
  }), /*#__PURE__*/_jsx(ListCell, {
167
167
  multiline: true,
168
168
  selected: true,
169
169
  description: "Multi-line description",
170
- layoutSpacing: "hug",
171
170
  onPress: onPressConsole,
171
+ spacingVariant: "condensed",
172
172
  title: "Title"
173
173
  }), /*#__PURE__*/_jsx(ListCell, {
174
174
  disableSelectionAccessory: true,
175
175
  multiline: true,
176
176
  selected: true,
177
177
  description: "Multi-line description",
178
- layoutSpacing: "hug",
179
178
  onPress: onPressConsole,
179
+ spacingVariant: "condensed",
180
180
  title: "Title"
181
181
  }), /*#__PURE__*/_jsx(ListCell, {
182
182
  multiline: true,
183
183
  description: "Multi-line description goes here with really long text",
184
- layoutSpacing: "hug",
185
184
  onPress: onPressConsole,
185
+ spacingVariant: "condensed",
186
186
  title: "Title"
187
187
  }), /*#__PURE__*/_jsx(ListCell, {
188
188
  multiline: true,
189
189
  selected: true,
190
190
  description: "Multi-line description goes here with really long text",
191
- layoutSpacing: "hug",
192
191
  onPress: onPressConsole,
192
+ spacingVariant: "condensed",
193
193
  title: "Title"
194
194
  }), /*#__PURE__*/_jsx(ListCell, {
195
195
  description: "Description",
196
196
  detail: "Detail",
197
- layoutSpacing: "hug",
198
197
  onPress: onPressConsole,
198
+ spacingVariant: "condensed",
199
199
  title: "Title"
200
200
  }), /*#__PURE__*/_jsx(ListCell, {
201
201
  description: "Description",
202
202
  detail: "Detail",
203
- layoutSpacing: "hug",
204
203
  onPress: onPressConsole,
204
+ spacingVariant: "condensed",
205
205
  subdetail: "Neutral",
206
206
  title: "Title"
207
207
  }), /*#__PURE__*/_jsx(ListCell, {
208
208
  selected: true,
209
209
  description: "Description",
210
210
  detail: "Detail",
211
- layoutSpacing: "hug",
212
211
  onPress: onPressConsole,
212
+ spacingVariant: "condensed",
213
213
  subdetail: "Neutral",
214
214
  title: "Title"
215
215
  }), /*#__PURE__*/_jsx(ListCell, {
216
216
  disabled: true,
217
217
  description: "Description",
218
218
  detail: "Detail",
219
- layoutSpacing: "hug",
220
219
  onPress: onPressConsole,
220
+ spacingVariant: "condensed",
221
221
  subdetail: "Neutral",
222
222
  title: "Title"
223
223
  }), /*#__PURE__*/_jsx(ListCell, {
@@ -225,8 +225,8 @@ const PressableContent = () => /*#__PURE__*/_jsxs(_Fragment, {
225
225
  selected: true,
226
226
  description: "Description",
227
227
  detail: "Detail",
228
- layoutSpacing: "hug",
229
228
  onPress: onPressConsole,
229
+ spacingVariant: "condensed",
230
230
  subdetail: "+Postive",
231
231
  title: "Title",
232
232
  variant: "positive"
@@ -235,8 +235,8 @@ const PressableContent = () => /*#__PURE__*/_jsxs(_Fragment, {
235
235
  selected: true,
236
236
  description: "Description",
237
237
  detail: "Detail",
238
- layoutSpacing: "hug",
239
238
  onPress: onPressConsole,
239
+ spacingVariant: "condensed",
240
240
  subdetail: "Warning",
241
241
  title: "Title",
242
242
  variant: "warning"
@@ -244,67 +244,67 @@ const PressableContent = () => /*#__PURE__*/_jsxs(_Fragment, {
244
244
  });
245
245
  const CompactPressableContent = () => /*#__PURE__*/_jsxs(_Fragment, {
246
246
  children: [/*#__PURE__*/_jsx(ListCell, {
247
- layoutSpacing: "compact",
248
247
  onPress: onPressConsole,
248
+ spacingVariant: "compact",
249
249
  title: "Title"
250
250
  }), /*#__PURE__*/_jsx(ListCell, {
251
- layoutSpacing: "compact",
252
251
  onPress: onPressConsole,
252
+ spacingVariant: "compact",
253
253
  subdetail: "Neutral",
254
254
  title: "Title"
255
255
  }), /*#__PURE__*/_jsx(ListCell, {
256
256
  multiline: true,
257
257
  description: "Multi-line description",
258
- layoutSpacing: "compact",
259
258
  onPress: onPressConsole,
259
+ spacingVariant: "compact",
260
260
  title: "Title"
261
261
  }), /*#__PURE__*/_jsx(ListCell, {
262
262
  multiline: true,
263
263
  selected: true,
264
264
  description: "Multi-line description",
265
- layoutSpacing: "compact",
266
265
  onPress: onPressConsole,
266
+ spacingVariant: "compact",
267
267
  title: "Title"
268
268
  }), /*#__PURE__*/_jsx(ListCell, {
269
269
  multiline: true,
270
270
  description: "Multi-line description goes here with really long text",
271
- layoutSpacing: "compact",
272
271
  onPress: onPressConsole,
272
+ spacingVariant: "compact",
273
273
  title: "Title"
274
274
  }), /*#__PURE__*/_jsx(ListCell, {
275
275
  multiline: true,
276
276
  selected: true,
277
277
  description: "Multi-line description goes here with really long text",
278
- layoutSpacing: "compact",
279
278
  onPress: onPressConsole,
279
+ spacingVariant: "compact",
280
280
  title: "Title"
281
281
  }), /*#__PURE__*/_jsx(ListCell, {
282
282
  description: "Description",
283
283
  detail: "Detail",
284
- layoutSpacing: "compact",
285
284
  onPress: onPressConsole,
285
+ spacingVariant: "compact",
286
286
  title: "Title"
287
287
  }), /*#__PURE__*/_jsx(ListCell, {
288
288
  description: "Description",
289
289
  detail: "Detail",
290
- layoutSpacing: "compact",
291
290
  onPress: onPressConsole,
291
+ spacingVariant: "compact",
292
292
  subdetail: "Neutral",
293
293
  title: "Title"
294
294
  }), /*#__PURE__*/_jsx(ListCell, {
295
295
  selected: true,
296
296
  description: "Description",
297
297
  detail: "Detail",
298
- layoutSpacing: "compact",
299
298
  onPress: onPressConsole,
299
+ spacingVariant: "compact",
300
300
  subdetail: "Neutral",
301
301
  title: "Title"
302
302
  }), /*#__PURE__*/_jsx(ListCell, {
303
303
  disabled: true,
304
304
  description: "Description",
305
305
  detail: "Detail",
306
- layoutSpacing: "compact",
307
306
  onPress: onPressConsole,
307
+ spacingVariant: "compact",
308
308
  subdetail: "Neutral",
309
309
  title: "Title"
310
310
  }), /*#__PURE__*/_jsx(ListCell, {
@@ -312,8 +312,8 @@ const CompactPressableContent = () => /*#__PURE__*/_jsxs(_Fragment, {
312
312
  selected: true,
313
313
  description: "Description",
314
314
  detail: "Detail",
315
- layoutSpacing: "compact",
316
315
  onPress: onPressConsole,
316
+ spacingVariant: "compact",
317
317
  subdetail: "+Postive",
318
318
  title: "Title",
319
319
  variant: "positive"
@@ -322,8 +322,8 @@ const CompactPressableContent = () => /*#__PURE__*/_jsxs(_Fragment, {
322
322
  selected: true,
323
323
  description: "Description",
324
324
  detail: "Detail",
325
- layoutSpacing: "compact",
326
325
  onPress: onPressConsole,
326
+ spacingVariant: "compact",
327
327
  subdetail: "Warning",
328
328
  title: "Title",
329
329
  variant: "warning"
@@ -341,19 +341,19 @@ const LongContent = () => /*#__PURE__*/_jsxs(_Fragment, {
341
341
  title: "(Deprecated behavior) Title with a very long length that should be capped at 1 line when there is description provided"
342
342
  }), /*#__PURE__*/_jsx(ListCell, {
343
343
  detail: "Detail also has a very long string",
344
- layoutSpacing: "hug",
344
+ spacingVariant: "condensed",
345
345
  subdetail: "Neutral also does too",
346
346
  title: "Title with a very long length that should be capped at 2 lines"
347
347
  }), /*#__PURE__*/_jsx(ListCell, {
348
348
  disableMultilineTitle: true,
349
349
  detail: "Detail also has a very long string",
350
- layoutSpacing: "hug",
350
+ spacingVariant: "condensed",
351
351
  subdetail: "Neutral also does too",
352
352
  title: "Title with a very long length that should be capped at 1 line when 'disableMultilineTitle' is turned on"
353
353
  }), /*#__PURE__*/_jsx(ListCell, {
354
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
355
  detail: "Detail also has a very long string",
356
- layoutSpacing: "hug",
356
+ spacingVariant: "condensed",
357
357
  subdetail: "Neutral also does too",
358
358
  title: "Title with a very long length that should be capped at 2 lines"
359
359
  }), /*#__PURE__*/_jsx(ListCell, {
@@ -361,7 +361,7 @@ const LongContent = () => /*#__PURE__*/_jsxs(_Fragment, {
361
361
  selected: true,
362
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.",
363
363
  detail: "Detail also has a very long string",
364
- layoutSpacing: "hug",
364
+ spacingVariant: "condensed",
365
365
  subdetail: "Neutral also does too",
366
366
  title: "Title with a very long length that should be capped at 2 lines"
367
367
  })]
@@ -373,8 +373,8 @@ const PriorityContent = () => /*#__PURE__*/_jsxs(_Fragment, {
373
373
  intermediary: /*#__PURE__*/_jsx(Icon, {
374
374
  name: "chartLine"
375
375
  }),
376
- layoutSpacing: "hug",
377
376
  priority: "start",
377
+ spacingVariant: "condensed",
378
378
  subdetail: "+4.06%",
379
379
  title: "Asset with a really long name",
380
380
  variant: "positive"
@@ -384,8 +384,8 @@ const PriorityContent = () => /*#__PURE__*/_jsxs(_Fragment, {
384
384
  intermediary: /*#__PURE__*/_jsx(Icon, {
385
385
  name: "chartLine"
386
386
  }),
387
- layoutSpacing: "hug",
388
387
  priority: "middle",
388
+ spacingVariant: "condensed",
389
389
  subdetail: "+4.06%",
390
390
  title: "Asset with a really long name",
391
391
  variant: "positive"
@@ -395,8 +395,8 @@ const PriorityContent = () => /*#__PURE__*/_jsxs(_Fragment, {
395
395
  intermediary: /*#__PURE__*/_jsx(Icon, {
396
396
  name: "chartLine"
397
397
  }),
398
- layoutSpacing: "hug",
399
398
  priority: "end",
399
+ spacingVariant: "condensed",
400
400
  subdetail: "+4.06%",
401
401
  title: "Asset with a really long name",
402
402
  variant: "positive"
@@ -406,8 +406,8 @@ const PriorityContent = () => /*#__PURE__*/_jsxs(_Fragment, {
406
406
  intermediary: /*#__PURE__*/_jsx(Icon, {
407
407
  name: "chartLine"
408
408
  }),
409
- layoutSpacing: "hug",
410
409
  priority: cellPriorities,
410
+ spacingVariant: "condensed",
411
411
  subdetail: "+4.06%",
412
412
  title: "Asset with a really long name",
413
413
  variant: "positive"
@@ -417,8 +417,8 @@ const PriorityContent = () => /*#__PURE__*/_jsxs(_Fragment, {
417
417
  intermediary: /*#__PURE__*/_jsx(Icon, {
418
418
  name: "chartLine"
419
419
  }),
420
- layoutSpacing: "hug",
421
420
  priority: cellPriorities,
421
+ spacingVariant: "condensed",
422
422
  subdetail: "+4.06%",
423
423
  title: "Asset with a really long name",
424
424
  variant: "warning"
@@ -427,30 +427,30 @@ const PriorityContent = () => /*#__PURE__*/_jsxs(_Fragment, {
427
427
  const WithAccessory = () => /*#__PURE__*/_jsxs(_Fragment, {
428
428
  children: [/*#__PURE__*/_jsx(ListCell, {
429
429
  accessory: "arrow",
430
- layoutSpacing: "hug",
430
+ spacingVariant: "condensed",
431
431
  title: "Title"
432
432
  }), /*#__PURE__*/_jsx(ListCell, {
433
433
  accessory: "more",
434
434
  detail: "Detail",
435
- layoutSpacing: "hug",
435
+ spacingVariant: "condensed",
436
436
  title: "Title"
437
437
  }), /*#__PURE__*/_jsx(ListCell, {
438
438
  accessory: "selected",
439
439
  description: "Description",
440
- layoutSpacing: "hug",
440
+ spacingVariant: "condensed",
441
441
  title: "Title"
442
442
  }), /*#__PURE__*/_jsx(ListCell, {
443
443
  accessory: "arrow",
444
444
  description: "Description",
445
445
  detail: "Detail",
446
- layoutSpacing: "hug",
446
+ spacingVariant: "condensed",
447
447
  title: "Title"
448
448
  }), /*#__PURE__*/_jsx(ListCell, {
449
449
  selected: true,
450
450
  accessory: "arrow",
451
451
  description: "Description",
452
452
  detail: "Detail",
453
- layoutSpacing: "hug",
453
+ spacingVariant: "condensed",
454
454
  title: "Title"
455
455
  }), /*#__PURE__*/_jsx(ListCell, {
456
456
  disableSelectionAccessory: true,
@@ -458,20 +458,20 @@ const WithAccessory = () => /*#__PURE__*/_jsxs(_Fragment, {
458
458
  accessory: "arrow",
459
459
  description: "Description",
460
460
  detail: "Detail",
461
- layoutSpacing: "hug",
461
+ spacingVariant: "condensed",
462
462
  title: "Title"
463
463
  }), /*#__PURE__*/_jsx(ListCell, {
464
464
  accessory: "more",
465
465
  description: "Description",
466
466
  detail: "Detail",
467
- layoutSpacing: "hug",
467
+ spacingVariant: "condensed",
468
468
  subdetail: "Neutral",
469
469
  title: "Title"
470
470
  }), /*#__PURE__*/_jsx(ListCell, {
471
471
  accessory: "selected",
472
472
  description: "Description",
473
473
  detail: "Detail",
474
- layoutSpacing: "hug",
474
+ spacingVariant: "condensed",
475
475
  subdetail: "+Positive",
476
476
  title: "Title",
477
477
  variant: "positive"
@@ -479,7 +479,7 @@ const WithAccessory = () => /*#__PURE__*/_jsxs(_Fragment, {
479
479
  accessory: "arrow",
480
480
  description: "Description",
481
481
  detail: "Detail",
482
- layoutSpacing: "hug",
482
+ spacingVariant: "condensed",
483
483
  subdetail: "-Negative",
484
484
  title: "Title",
485
485
  variant: "negative"
@@ -487,7 +487,7 @@ const WithAccessory = () => /*#__PURE__*/_jsxs(_Fragment, {
487
487
  accessory: "arrow",
488
488
  description: "Description",
489
489
  detail: "Detail",
490
- layoutSpacing: "hug",
490
+ spacingVariant: "condensed",
491
491
  subdetail: "Warning",
492
492
  title: "Title",
493
493
  variant: "warning"
@@ -495,57 +495,57 @@ const WithAccessory = () => /*#__PURE__*/_jsxs(_Fragment, {
495
495
  });
496
496
  const WithMedia = () => /*#__PURE__*/_jsxs(_Fragment, {
497
497
  children: [/*#__PURE__*/_jsx(ListCell, {
498
- layoutSpacing: "hug",
499
498
  media: /*#__PURE__*/_jsx(Icon, {
500
499
  active: true,
501
500
  name: "email"
502
501
  }),
502
+ spacingVariant: "condensed",
503
503
  title: "Icon"
504
504
  }), /*#__PURE__*/_jsx(ListCell, {
505
- layoutSpacing: "hug",
506
505
  media: /*#__PURE__*/_jsx(Icon, {
507
506
  active: true,
508
507
  name: "email"
509
508
  }),
510
509
  onPress: onPressConsole,
510
+ spacingVariant: "condensed",
511
511
  title: "Icon (pressable)"
512
512
  }), /*#__PURE__*/_jsx(ListCell, {
513
513
  description: "Description",
514
- layoutSpacing: "hug",
515
514
  media: /*#__PURE__*/_jsx(Icon, {
516
515
  name: "phone"
517
516
  }),
517
+ spacingVariant: "condensed",
518
518
  title: "Icon"
519
519
  }), /*#__PURE__*/_jsx(ListCell, {
520
520
  description: "Description",
521
521
  detail: "Detail",
522
- layoutSpacing: "hug",
523
522
  media: /*#__PURE__*/_jsx(Avatar, {
524
523
  src: assets.eth.imageUrl
525
524
  }),
525
+ spacingVariant: "condensed",
526
526
  title: "Avatar"
527
527
  }), /*#__PURE__*/_jsx(ListCell, {
528
528
  description: "Description",
529
529
  detail: "Detail",
530
- layoutSpacing: "hug",
531
530
  media: /*#__PURE__*/_jsx(Avatar, {
532
531
  src: assets.eth.imageUrl
533
532
  }),
533
+ spacingVariant: "condensed",
534
534
  subdetail: "Neutral",
535
535
  title: "Asset"
536
536
  }), /*#__PURE__*/_jsx(ListCell, {
537
537
  detail: "Detail",
538
- layoutSpacing: "hug",
539
538
  media: /*#__PURE__*/_jsx(Avatar, {
540
539
  src: assets.eth.imageUrl
541
540
  }),
541
+ spacingVariant: "condensed",
542
542
  title: "Image"
543
543
  }), /*#__PURE__*/_jsx(ListCell, {
544
544
  description: "Description",
545
- layoutSpacing: "hug",
546
545
  media: /*#__PURE__*/_jsx(Pictogram, {
547
546
  name: "shield"
548
547
  }),
548
+ spacingVariant: "condensed",
549
549
  title: "Pictogram"
550
550
  })]
551
551
  });
@@ -555,7 +555,7 @@ const WithActions = () => /*#__PURE__*/_jsxs(_Fragment, {
555
555
  end: /*#__PURE__*/_jsx(Button, {
556
556
  children: "Action"
557
557
  }),
558
- layoutSpacing: "hug",
558
+ spacingVariant: "condensed",
559
559
  title: "Title"
560
560
  }), /*#__PURE__*/_jsx(ListCell, {
561
561
  description: "Description",
@@ -564,7 +564,7 @@ const WithActions = () => /*#__PURE__*/_jsxs(_Fragment, {
564
564
  variant: "negative",
565
565
  children: "Action"
566
566
  }),
567
- layoutSpacing: "hug",
567
+ spacingVariant: "condensed",
568
568
  title: "Title"
569
569
  }), /*#__PURE__*/_jsx(ListCell, {
570
570
  description: "Description",
@@ -573,7 +573,7 @@ const WithActions = () => /*#__PURE__*/_jsxs(_Fragment, {
573
573
  accessibilityLabel: "External link",
574
574
  name: "externalLink"
575
575
  }),
576
- layoutSpacing: "hug",
576
+ spacingVariant: "condensed",
577
577
  title: "Title"
578
578
  })]
579
579
  });
@@ -585,7 +585,7 @@ const WithIntermediary = () => /*#__PURE__*/_jsxs(_Fragment, {
585
585
  intermediary: /*#__PURE__*/_jsx(Icon, {
586
586
  name: "chartLine"
587
587
  }),
588
- layoutSpacing: "hug",
588
+ spacingVariant: "condensed",
589
589
  title: "Title"
590
590
  }), /*#__PURE__*/_jsx(ListCell, {
591
591
  description: "Description",
@@ -594,7 +594,7 @@ const WithIntermediary = () => /*#__PURE__*/_jsxs(_Fragment, {
594
594
  intermediary: /*#__PURE__*/_jsx(Icon, {
595
595
  name: "chartLine"
596
596
  }),
597
- layoutSpacing: "hug",
597
+ spacingVariant: "condensed",
598
598
  title: "Title"
599
599
  }), /*#__PURE__*/_jsx(ListCell, {
600
600
  description: "Description",
@@ -603,7 +603,7 @@ const WithIntermediary = () => /*#__PURE__*/_jsxs(_Fragment, {
603
603
  intermediary: /*#__PURE__*/_jsx(Icon, {
604
604
  name: "chartLine"
605
605
  }),
606
- layoutSpacing: "hug",
606
+ spacingVariant: "condensed",
607
607
  title: "Title"
608
608
  }), /*#__PURE__*/_jsx(ListCell, {
609
609
  description: "Description",
@@ -612,7 +612,7 @@ const WithIntermediary = () => /*#__PURE__*/_jsxs(_Fragment, {
612
612
  intermediary: /*#__PURE__*/_jsx(Icon, {
613
613
  name: "chartLine"
614
614
  }),
615
- layoutSpacing: "hug",
615
+ spacingVariant: "condensed",
616
616
  title: "Title"
617
617
  }), /*#__PURE__*/_jsx(ListCell, {
618
618
  description: "Description",
@@ -621,7 +621,7 @@ const WithIntermediary = () => /*#__PURE__*/_jsxs(_Fragment, {
621
621
  intermediary: /*#__PURE__*/_jsx(Icon, {
622
622
  name: "chartLine"
623
623
  }),
624
- layoutSpacing: "hug",
624
+ spacingVariant: "condensed",
625
625
  title: "Title"
626
626
  })]
627
627
  });
@@ -630,16 +630,16 @@ const WithHelperText = () => /*#__PURE__*/_jsxs(_Fragment, {
630
630
  helperText: /*#__PURE__*/_jsx(CellHelperText, {
631
631
  children: "Helper text"
632
632
  }),
633
- layoutSpacing: "hug",
634
633
  onPress: onPressConsole,
634
+ spacingVariant: "condensed",
635
635
  title: "Title"
636
636
  }), /*#__PURE__*/_jsx(ListCell, {
637
637
  description: "Description",
638
638
  helperText: /*#__PURE__*/_jsx(CellHelperText, {
639
639
  children: "Helper text"
640
640
  }),
641
- layoutSpacing: "hug",
642
641
  onPress: onPressConsole,
642
+ spacingVariant: "condensed",
643
643
  title: "Title"
644
644
  }), /*#__PURE__*/_jsx(ListCell, {
645
645
  description: "Description",
@@ -648,8 +648,8 @@ const WithHelperText = () => /*#__PURE__*/_jsxs(_Fragment, {
648
648
  variant: "warning",
649
649
  children: "Warning text"
650
650
  }),
651
- layoutSpacing: "hug",
652
651
  onPress: onPressConsole,
652
+ spacingVariant: "condensed",
653
653
  title: "Title"
654
654
  }), /*#__PURE__*/_jsx(ListCell, {
655
655
  description: "Description",
@@ -658,8 +658,8 @@ const WithHelperText = () => /*#__PURE__*/_jsxs(_Fragment, {
658
658
  variant: "error",
659
659
  children: "Error text"
660
660
  }),
661
- layoutSpacing: "hug",
662
661
  onPress: onPressConsole,
662
+ spacingVariant: "condensed",
663
663
  subdetail: "Subdetail",
664
664
  title: "Title"
665
665
  }), /*#__PURE__*/_jsx(ListCell, {
@@ -670,8 +670,8 @@ const WithHelperText = () => /*#__PURE__*/_jsxs(_Fragment, {
670
670
  variant: "error",
671
671
  children: "Disabled error text"
672
672
  }),
673
- layoutSpacing: "hug",
674
673
  onPress: onPressConsole,
674
+ spacingVariant: "condensed",
675
675
  subdetail: "Subdetail",
676
676
  title: "Title"
677
677
  }), /*#__PURE__*/_jsx(ListCell, {
@@ -680,11 +680,11 @@ const WithHelperText = () => /*#__PURE__*/_jsxs(_Fragment, {
680
680
  paddingStart: 6,
681
681
  children: "Helper text with media"
682
682
  }),
683
- layoutSpacing: "hug",
684
683
  media: /*#__PURE__*/_jsx(Avatar, {
685
684
  src: assets.eth.imageUrl
686
685
  }),
687
686
  onPress: onPressConsole,
687
+ spacingVariant: "condensed",
688
688
  title: "Title"
689
689
  }), /*#__PURE__*/_jsx(ListCell, {
690
690
  description: "Description",
@@ -696,7 +696,7 @@ const WithHelperText = () => /*#__PURE__*/_jsxs(_Fragment, {
696
696
  variant: "warning",
697
697
  children: "Helper text with action"
698
698
  }),
699
- layoutSpacing: "hug",
699
+ spacingVariant: "condensed",
700
700
  title: "Title"
701
701
  }), /*#__PURE__*/_jsx(ListCell, {
702
702
  accessory: "more",
@@ -710,11 +710,11 @@ const WithHelperText = () => /*#__PURE__*/_jsxs(_Fragment, {
710
710
  variant: "error",
711
711
  children: "Helper text with media, action, and accessory and very long text"
712
712
  }),
713
- layoutSpacing: "hug",
714
713
  media: /*#__PURE__*/_jsx(Avatar, {
715
714
  src: assets.eth.imageUrl
716
715
  }),
717
716
  priority: "end",
717
+ spacingVariant: "condensed",
718
718
  title: "Title"
719
719
  })]
720
720
  });
@@ -725,20 +725,20 @@ const CustomSpacing = () => /*#__PURE__*/_jsxs(_Fragment, {
725
725
  description: "Description",
726
726
  detail: "$1,230",
727
727
  detailWidth: 100,
728
- layoutSpacing: "hug",
729
728
  onPress: onPressConsole,
729
+ spacingVariant: "condensed",
730
730
  title: "Title"
731
731
  }, selectCellSpacingConfig)), /*#__PURE__*/_jsx(ListCell, _extends({
732
732
  borderRadius: 0,
733
733
  description: "Description",
734
734
  detail: "$1,230",
735
735
  detailWidth: 100,
736
- layoutSpacing: "hug",
737
736
  onPress: onPressConsole,
737
+ spacingVariant: "condensed",
738
738
  title: "Title"
739
739
  }, selectCellSpacingConfig))]
740
740
  });
741
- const HugListCell = () => {
741
+ const CondensedListCell = () => {
742
742
  const theme = useTheme();
743
743
  return /*#__PURE__*/_jsxs(VStack, {
744
744
  width: "360px",
@@ -746,13 +746,13 @@ const HugListCell = () => {
746
746
  accessory: "more",
747
747
  description: "Description",
748
748
  detail: "Detail",
749
- layoutSpacing: "hug",
750
749
  media: /*#__PURE__*/_jsx(Avatar, {
751
750
  shape: "circle",
752
751
  size: "l",
753
752
  src: assets.eth.imageUrl
754
753
  }),
755
754
  onPress: onPressConsole,
755
+ spacingVariant: "condensed",
756
756
  subdetail: "Subdetail",
757
757
  title: "Title"
758
758
  }), /*#__PURE__*/_jsx(ListCell, {
@@ -764,13 +764,13 @@ const HugListCell = () => {
764
764
  variant: "information",
765
765
  children: "This is helpful information to guide the user"
766
766
  }),
767
- layoutSpacing: "hug",
768
767
  media: /*#__PURE__*/_jsx(Avatar, {
769
768
  shape: "circle",
770
769
  size: "l",
771
770
  src: assets.eth.imageUrl
772
771
  }),
773
772
  onPress: onPressConsole,
773
+ spacingVariant: "condensed",
774
774
  subdetail: "Subdetail",
775
775
  title: "Title"
776
776
  }), /*#__PURE__*/_jsx(ListCell, {
@@ -778,13 +778,13 @@ const HugListCell = () => {
778
778
  accessory: "more",
779
779
  description: "Long description with multiple lines. This section can be arbitrarily long and occupy many many lines.",
780
780
  detail: "Detail",
781
- layoutSpacing: "hug",
782
781
  media: /*#__PURE__*/_jsx(Avatar, {
783
782
  shape: "circle",
784
783
  size: "l",
785
784
  src: assets.eth.imageUrl
786
785
  }),
787
786
  onPress: onPressConsole,
787
+ spacingVariant: "condensed",
788
788
  subdetail: "Subdetail",
789
789
  title: "Title"
790
790
  }), /*#__PURE__*/_jsx(ListCell, {
@@ -792,13 +792,13 @@ const HugListCell = () => {
792
792
  accessory: "more",
793
793
  description: "Long description with multiple lines. This section can be arbitrarily long and occupy many many lines.",
794
794
  detail: "Detail",
795
- layoutSpacing: "hug",
796
795
  media: /*#__PURE__*/_jsx(Avatar, {
797
796
  shape: "circle",
798
797
  size: "l",
799
798
  src: assets.eth.imageUrl
800
799
  }),
801
800
  onPress: onPressConsole,
801
+ spacingVariant: "condensed",
802
802
  styles: {
803
803
  media: {
804
804
  marginTop: theme.space[1],
@@ -811,32 +811,32 @@ const HugListCell = () => {
811
811
  accessory: "more",
812
812
  description: "Description",
813
813
  detail: "Detail",
814
- layoutSpacing: "hug",
815
814
  onPress: onPressConsole,
815
+ spacingVariant: "condensed",
816
816
  subdetail: "Subdetail",
817
817
  title: "Title"
818
818
  }), /*#__PURE__*/_jsx(ListCell, {
819
819
  accessory: "more",
820
820
  description: "Description",
821
821
  detail: "Detail",
822
- layoutSpacing: "hug",
823
822
  media: /*#__PURE__*/_jsx(Icon, {
824
823
  name: "heart",
825
824
  size: "l"
826
825
  }),
827
826
  onPress: onPressConsole,
827
+ spacingVariant: "condensed",
828
828
  subdetail: "Subdetail",
829
829
  title: "Title"
830
830
  }), /*#__PURE__*/_jsx(ListCell, {
831
831
  accessory: "more",
832
832
  description: "Description",
833
833
  detail: "Detail",
834
- layoutSpacing: "hug",
835
834
  media: /*#__PURE__*/_jsx(Icon, {
836
835
  name: "heart",
837
836
  size: "s"
838
837
  }),
839
838
  onPress: onPressConsole,
839
+ spacingVariant: "condensed",
840
840
  subdetail: "Subdetail",
841
841
  title: "Title"
842
842
  }), /*#__PURE__*/_jsx(ListCell, {
@@ -847,12 +847,12 @@ const HugListCell = () => {
847
847
  compact: true,
848
848
  children: "Action"
849
849
  }),
850
- layoutSpacing: "hug",
851
850
  media: /*#__PURE__*/_jsx(Icon, {
852
851
  name: "heart",
853
852
  size: "xs"
854
853
  }),
855
854
  onPress: onPressConsole,
855
+ spacingVariant: "condensed",
856
856
  subdetail: "Subdetail",
857
857
  title: "Title"
858
858
  }), /*#__PURE__*/_jsx(ListCell, {
@@ -864,13 +864,13 @@ const HugListCell = () => {
864
864
  size: "l",
865
865
  src: squareAssets.human6
866
866
  }),
867
- layoutSpacing: "hug",
868
867
  media: /*#__PURE__*/_jsx(Avatar, {
869
868
  shape: "square",
870
869
  size: "l",
871
870
  src: squareAssets.human1
872
871
  }),
873
872
  onPress: onPressConsole,
873
+ spacingVariant: "condensed",
874
874
  subdetail: /*#__PURE__*/_jsx(Tag, {
875
875
  colorScheme: "green",
876
876
  children: /*#__PURE__*/_jsxs(HStack, {
@@ -892,51 +892,50 @@ const HugListCell = () => {
892
892
  })]
893
893
  });
894
894
  };
895
- const LayoutSpacing = () => /*#__PURE__*/_jsxs(VStack, {
895
+ const SpacingVariant = () => /*#__PURE__*/_jsxs(VStack, {
896
896
  children: [/*#__PURE__*/_jsx(ListCell, {
897
897
  accessory: "arrow",
898
- description: "New design (hug)",
898
+ description: "New design",
899
899
  detail: "$12,345.00",
900
900
  intermediary: /*#__PURE__*/_jsx(Icon, {
901
901
  name: "chartLine"
902
902
  }),
903
- layoutSpacing: "hug",
904
903
  media: /*#__PURE__*/_jsx(Avatar, {
905
904
  src: assets.eth.imageUrl
906
905
  }),
907
906
  onPress: onPressConsole,
907
+ spacingVariant: "condensed",
908
908
  subdetail: "+1.23%",
909
- title: "Hug",
909
+ title: "Condensed",
910
910
  variant: "positive"
911
911
  }), /*#__PURE__*/_jsx(ListCell, {
912
912
  accessory: "arrow",
913
- description: "Deprecated (use hug)",
913
+ description: "Deprecated (use condensed)",
914
914
  detail: "$12,345.00",
915
915
  intermediary: /*#__PURE__*/_jsx(Icon, {
916
916
  name: "chartLine"
917
917
  }),
918
- layoutSpacing: "compact",
919
918
  media: /*#__PURE__*/_jsx(Avatar, {
920
919
  src: assets.eth.imageUrl
921
920
  }),
922
921
  onPress: onPressConsole,
922
+ spacingVariant: "compact",
923
923
  subdetail: "+1.23%",
924
924
  title: "Compact",
925
925
  variant: "positive"
926
926
  }), /*#__PURE__*/_jsx(ListCell, {
927
927
  accessory: "arrow",
928
- description: "Deprecated (use hug)",
929
928
  detail: "$12,345.00",
930
929
  intermediary: /*#__PURE__*/_jsx(Icon, {
931
930
  name: "chartLine"
932
931
  }),
933
- layoutSpacing: "spacious",
934
932
  media: /*#__PURE__*/_jsx(Avatar, {
935
933
  src: assets.eth.imageUrl
936
934
  }),
937
935
  onPress: onPressConsole,
936
+ spacingVariant: "normal",
938
937
  subdetail: "+1.23%",
939
- title: "Spacious",
938
+ title: "Normal",
940
939
  variant: "positive"
941
940
  })]
942
941
  });
@@ -1003,12 +1002,12 @@ const UseCaseShowcase = () => {
1003
1002
  intermediary: /*#__PURE__*/_jsx(Icon, {
1004
1003
  name: "chartLine"
1005
1004
  }),
1006
- layoutSpacing: "hug",
1007
1005
  media: /*#__PURE__*/_jsx(Avatar, {
1008
1006
  src: assets.btc.imageUrl
1009
1007
  }),
1010
1008
  onPress: onPressConsole,
1011
1009
  priority: "middle",
1010
+ spacingVariant: "condensed",
1012
1011
  styles: {
1013
1012
  end: {
1014
1013
  width: 100
@@ -1038,11 +1037,11 @@ const UseCaseShowcase = () => {
1038
1037
  intermediary: /*#__PURE__*/_jsx(Icon, {
1039
1038
  name: "chartLine"
1040
1039
  }),
1041
- layoutSpacing: "hug",
1042
1040
  media: /*#__PURE__*/_jsx(Avatar, {
1043
1041
  src: assets.eth.imageUrl
1044
1042
  }),
1045
1043
  onPress: onPressConsole,
1044
+ spacingVariant: "condensed",
1046
1045
  styles: {
1047
1046
  end: {
1048
1047
  width: 100
@@ -1072,11 +1071,11 @@ const UseCaseShowcase = () => {
1072
1071
  intermediary: /*#__PURE__*/_jsx(Icon, {
1073
1072
  name: "chartLine"
1074
1073
  }),
1075
- layoutSpacing: "hug",
1076
1074
  media: /*#__PURE__*/_jsx(Avatar, {
1077
1075
  src: assets.ada.imageUrl
1078
1076
  }),
1079
1077
  onPress: onPressConsole,
1078
+ spacingVariant: "condensed",
1080
1079
  styles: {
1081
1080
  end: {
1082
1081
  width: 100
@@ -1102,11 +1101,11 @@ const UseCaseShowcase = () => {
1102
1101
  intermediary: /*#__PURE__*/_jsx(Icon, {
1103
1102
  name: "chartLine"
1104
1103
  }),
1105
- layoutSpacing: "hug",
1106
1104
  media: /*#__PURE__*/_jsx(Avatar, {
1107
1105
  src: assets.ltc.imageUrl
1108
1106
  }),
1109
1107
  onPress: onPressConsole,
1108
+ spacingVariant: "condensed",
1110
1109
  styles: {
1111
1110
  end: {
1112
1111
  width: 100
@@ -1133,11 +1132,11 @@ const UseCaseShowcase = () => {
1133
1132
  intermediary: /*#__PURE__*/_jsx(Icon, {
1134
1133
  name: "chartLine"
1135
1134
  }),
1136
- layoutSpacing: "hug",
1137
1135
  media: /*#__PURE__*/_jsx(Avatar, {
1138
1136
  src: assets.dai.imageUrl
1139
1137
  }),
1140
1138
  onPress: onPressConsole,
1139
+ spacingVariant: "condensed",
1141
1140
  styles: {
1142
1141
  end: {
1143
1142
  width: 100
@@ -1227,15 +1226,15 @@ const ListCellScreen = () => {
1227
1226
  }), /*#__PURE__*/_jsx(Example, {
1228
1227
  inline: true,
1229
1228
  paddingX: 0,
1230
- title: "HugListCell",
1229
+ title: "CondensedListCell",
1231
1230
  titlePadding: titlePadding,
1232
- children: /*#__PURE__*/_jsx(HugListCell, {})
1231
+ children: /*#__PURE__*/_jsx(CondensedListCell, {})
1233
1232
  }), /*#__PURE__*/_jsx(Example, {
1234
1233
  inline: true,
1235
1234
  paddingX: 0,
1236
- title: "LayoutSpacing",
1235
+ title: "SpacingVariant",
1237
1236
  titlePadding: titlePadding,
1238
- children: /*#__PURE__*/_jsx(LayoutSpacing, {})
1237
+ children: /*#__PURE__*/_jsx(SpacingVariant, {})
1239
1238
  }), /*#__PURE__*/_jsx(Example, {
1240
1239
  inline: true,
1241
1240
  paddingX: 0,