@ledgerhq/lumen-ui-rnative 0.1.22 → 0.1.24

package/dist/module/lib/Components/ListItem/ListItem.stories.js

@@ -1,11 +1,13 @@
 "use strict";
 
+import { CryptoIcon } from '@ledgerhq/crypto-icons';
 import { useState } from 'react';
 import { Settings, ChevronRight, Wallet } from "../../Symbols/index.js";
+import { MediaImage } from "../MediaImage/index.js";
 import { Spot } from "../Spot/index.js";
 import { Switch } from "../Switch/Switch.js";
 import { Tag } from "../Tag/Tag.js";
-import { Box } from "../Utility/index.js";
+import { Box, Text } from "../Utility/index.js";
 import { ListItem, ListItemLeading, ListItemContent, ListItemTitle, ListItemDescription, ListItemTrailing, ListItemContentRow } from "./ListItem.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const meta = {
@@ -46,6 +48,7 @@ const meta = {
 export default meta;
 export const Base = {
   args: {
+    density: 'expanded',
     lx: {
       maxWidth: 's320'
     }
@@ -55,11 +58,12 @@ export const Base = {
     children: /*#__PURE__*/_jsxs(ListItemLeading, {
       children: [/*#__PURE__*/_jsx(Spot, {
         appearance: "icon",
-        icon: Settings
+        icon: Settings,
+        size: args.density === 'compact' ? 32 : 48
       }), /*#__PURE__*/_jsxs(ListItemContent, {
         children: [/*#__PURE__*/_jsx(ListItemTitle, {
           children: "Item with Icon and Description"
-        }), /*#__PURE__*/_jsx(ListItemDescription, {
+        }), args.density === 'expanded' && /*#__PURE__*/_jsx(ListItemDescription, {
           children: "Additional information"
         })]
       })]
@@ -71,10 +75,12 @@ export const Base = {
         code: `
 <ListItem>
   <ListItemLeading>
-    <Spot appearance="icon" icon={Settings} />
+    <Spot appearance="icon" icon={Settings} size={density === 'compact' ? 32 : 48} />
     <ListItemContent>
       <ListItemTitle>Item with Icon and Description</ListItemTitle>
-      <ListItemDescription>Additional information</ListItemDescription>
+      {density === 'expanded' && (
+        <ListItemDescription>Additional information</ListItemDescription>
+      )}
     </ListItemContent>
   </ListItemLeading>
 </ListItem>
@@ -83,240 +89,220 @@ export const Base = {
     }
   }
 };
-export const VariantsShowcase = {
-  render: () => {
-    const [selected, setSelected] = useState(false);
-    return /*#__PURE__*/_jsxs(Box, {
-      lx: {
-        flexDirection: 'column',
-        maxWidth: 's320',
-        gap: 's8'
-      },
-      children: [/*#__PURE__*/_jsx(ListItem, {
-        children: /*#__PURE__*/_jsxs(ListItemLeading, {
-          children: [/*#__PURE__*/_jsx(Spot, {
-            size: 48,
-            appearance: "icon",
-            icon: Settings
-          }), /*#__PURE__*/_jsxs(ListItemContent, {
-            children: [/*#__PURE__*/_jsx(ListItemTitle, {
-              children: "Simple composition"
-            }), /*#__PURE__*/_jsx(ListItemDescription, {
-              children: "With description"
-            })]
-          })]
-        })
-      }), /*#__PURE__*/_jsxs(ListItem, {
-        onPress: () => setSelected(!selected),
-        children: [/*#__PURE__*/_jsxs(ListItemLeading, {
-          children: [/*#__PURE__*/_jsx(Spot, {
-            size: 48,
-            appearance: "icon",
-            icon: Wallet
-          }), /*#__PURE__*/_jsxs(ListItemContent, {
-            children: [/*#__PURE__*/_jsx(ListItemTitle, {
-              children: "Switch Variant"
-            }), /*#__PURE__*/_jsx(ListItemDescription, {
-              children: "With description"
-            })]
-          })]
-        }), /*#__PURE__*/_jsx(ListItemTrailing, {
-          children: /*#__PURE__*/_jsx(Switch, {
-            checked: selected,
-            onCheckedChange: setSelected
-          })
-        })]
-      }), /*#__PURE__*/_jsxs(ListItem, {
-        children: [/*#__PURE__*/_jsxs(ListItemLeading, {
-          children: [/*#__PURE__*/_jsx(Spot, {
-            size: 48,
-            appearance: "icon",
-            icon: Wallet
-          }), /*#__PURE__*/_jsxs(ListItemContent, {
-            children: [/*#__PURE__*/_jsx(ListItemTitle, {
-              children: "Content Variant"
-            }), /*#__PURE__*/_jsx(ListItemDescription, {
-              children: "With description"
-            })]
-          })]
-        }), /*#__PURE__*/_jsx(ListItemTrailing, {
-          children: /*#__PURE__*/_jsxs(ListItemContent, {
-            children: [/*#__PURE__*/_jsx(ListItemTitle, {
-              children: "42.10"
-            }), /*#__PURE__*/_jsx(ListItemDescription, {
-              children: "USD"
-            })]
+export const DensityShowcase = {
+  render: () => /*#__PURE__*/_jsxs(Box, {
+    lx: {
+      flexDirection: 'column',
+      maxWidth: 's320',
+      gap: 's8'
+    },
+    children: [/*#__PURE__*/_jsxs(ListItem, {
+      density: "compact",
+      onPress: () => {},
+      children: [/*#__PURE__*/_jsxs(ListItemLeading, {
+        children: [/*#__PURE__*/_jsx(CryptoIcon, {
+          ledgerId: "bitcoin",
+          ticker: "BTC",
+          size: "24px"
+        }), /*#__PURE__*/_jsx(ListItemContent, {
+          children: /*#__PURE__*/_jsx(ListItemTitle, {
+            children: "Compact with icon"
           })
         })]
-      }), /*#__PURE__*/_jsxs(ListItem, {
-        children: [/*#__PURE__*/_jsxs(ListItemLeading, {
-          children: [/*#__PURE__*/_jsx(Spot, {
-            size: 48,
-            appearance: "icon",
-            icon: Wallet
-          }), /*#__PURE__*/_jsxs(ListItemContent, {
-            children: [/*#__PURE__*/_jsx(ListItemTitle, {
-              children: "Content Variant"
-            }), /*#__PURE__*/_jsx(ListItemDescription, {
-              children: "Custom style"
-            })]
-          })]
-        }), /*#__PURE__*/_jsx(ListItemTrailing, {
-          children: /*#__PURE__*/_jsxs(ListItemContent, {
-            children: [/*#__PURE__*/_jsx(ListItemTitle, {
-              children: "USD"
-            }), /*#__PURE__*/_jsx(ListItemDescription, {
-              lx: {
-                color: 'error'
-              },
-              children: "-7.53%"
-            })]
+      }), /*#__PURE__*/_jsx(ListItemTrailing, {
+        children: /*#__PURE__*/_jsx(ChevronRight, {
+          size: 24
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(ListItem, {
+      density: "compact",
+      children: [/*#__PURE__*/_jsxs(ListItemLeading, {
+        children: [/*#__PURE__*/_jsx(Spot, {
+          size: 32,
+          appearance: "icon",
+          icon: Wallet
+        }), /*#__PURE__*/_jsx(ListItemContent, {
+          children: /*#__PURE__*/_jsx(ListItemTitle, {
+            children: "Compact with value"
           })
         })]
-      }), /*#__PURE__*/_jsxs(ListItem, {
-        children: [/*#__PURE__*/_jsxs(ListItemLeading, {
-          children: [/*#__PURE__*/_jsx(Spot, {
-            size: 48,
-            appearance: "icon",
-            icon: Wallet
-          }), /*#__PURE__*/_jsxs(ListItemContent, {
-            children: [/*#__PURE__*/_jsx(ListItemTitle, {
-              children: "Content Variant"
-            }), /*#__PURE__*/_jsx(ListItemDescription, {
-              children: "Custom style"
-            })]
+      }), /*#__PURE__*/_jsx(ListItemTrailing, {
+        children: /*#__PURE__*/_jsx(ListItemTitle, {
+          children: "$3,000"
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(ListItem, {
+      density: "expanded",
+      onPress: () => {},
+      children: [/*#__PURE__*/_jsxs(ListItemLeading, {
+        children: [/*#__PURE__*/_jsx(CryptoIcon, {
+          ledgerId: "bitcoin",
+          ticker: "BTC",
+          size: "48px"
+        }), /*#__PURE__*/_jsxs(ListItemContent, {
+          children: [/*#__PURE__*/_jsx(ListItemTitle, {
+            children: "Expanded with icon"
+          }), /*#__PURE__*/_jsx(ListItemDescription, {
+            children: "Additional information"
           })]
-        }), /*#__PURE__*/_jsx(ListItemTrailing, {
-          children: /*#__PURE__*/_jsxs(ListItemContent, {
-            children: [/*#__PURE__*/_jsx(ListItemTitle, {
-              children: "USD"
-            }), /*#__PURE__*/_jsx(ListItemDescription, {
-              lx: {
-                color: 'success'
-              },
-              children: "+7.53%"
-            })]
-          })
         })]
-      }), /*#__PURE__*/_jsxs(ListItem, {
-        children: [/*#__PURE__*/_jsxs(ListItemLeading, {
-          children: [/*#__PURE__*/_jsx(Spot, {
-            size: 48,
-            appearance: "icon",
-            icon: Settings
-          }), /*#__PURE__*/_jsxs(ListItemContent, {
-            children: [/*#__PURE__*/_jsx(ListItemTitle, {
-              children: "Tag Variant"
-            }), /*#__PURE__*/_jsx(ListItemDescription, {
-              children: "With description"
-            })]
+      }), /*#__PURE__*/_jsx(ListItemTrailing, {
+        children: /*#__PURE__*/_jsx(ChevronRight, {
+          size: 24
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(ListItem, {
+      density: "expanded",
+      children: [/*#__PURE__*/_jsxs(ListItemLeading, {
+        children: [/*#__PURE__*/_jsx(Spot, {
+          size: 48,
+          appearance: "icon",
+          icon: Wallet
+        }), /*#__PURE__*/_jsxs(ListItemContent, {
+          children: [/*#__PURE__*/_jsx(ListItemTitle, {
+            children: "Expanded with value"
+          }), /*#__PURE__*/_jsx(ListItemDescription, {
+            children: "With description"
           })]
-        }), /*#__PURE__*/_jsx(ListItemTrailing, {
-          children: /*#__PURE__*/_jsx(Tag, {
-            size: "sm",
-            label: "New",
-            appearance: "accent"
-          })
         })]
-      }), /*#__PURE__*/_jsxs(ListItem, {
-        children: [/*#__PURE__*/_jsxs(ListItemLeading, {
-          children: [/*#__PURE__*/_jsx(Spot, {
-            size: 48,
-            appearance: "icon",
-            icon: Settings
-          }), /*#__PURE__*/_jsxs(ListItemContent, {
-            children: [/*#__PURE__*/_jsx(ListItemTitle, {
-              children: "Icon Variant"
-            }), /*#__PURE__*/_jsx(ListItemDescription, {
-              children: "With description"
+      }), /*#__PURE__*/_jsx(ListItemTrailing, {
+        children: /*#__PURE__*/_jsx(ListItemTitle, {
+          children: "$3,000"
+        })
+      })]
+    })]
+  })
+};
+export const InteractiveShowcase = {
+  render: () => {
+    const [selected, setSelected] = useState(false);
+    return /*#__PURE__*/_jsxs(Box, {
+      lx: {
+        flexDirection: 'column',
+        maxWidth: 's320',
+        gap: 's16'
+      },
+      children: [/*#__PURE__*/_jsxs(Box, {
+        lx: {
+          flexDirection: 'column',
+          gap: 's8'
+        },
+        children: [/*#__PURE__*/_jsx(Text, {
+          typography: "body4SemiBold",
+          lx: {
+            color: 'muted'
+          },
+          children: "Info"
+        }), /*#__PURE__*/_jsxs(ListItem, {
+          children: [/*#__PURE__*/_jsxs(ListItemLeading, {
+            children: [/*#__PURE__*/_jsx(Spot, {
+              size: 48,
+              appearance: "icon",
+              icon: Settings
+            }), /*#__PURE__*/_jsxs(ListItemContent, {
+              children: [/*#__PURE__*/_jsx(ListItemTitle, {
+                children: "Display only"
+              }), /*#__PURE__*/_jsx(ListItemDescription, {
+                children: "No press feedback"
+              })]
             })]
+          }), /*#__PURE__*/_jsx(ListItemTrailing, {
+            children: /*#__PURE__*/_jsxs(ListItemContent, {
+              children: [/*#__PURE__*/_jsx(ListItemTitle, {
+                children: "42.10"
+              }), /*#__PURE__*/_jsx(ListItemDescription, {
+                children: "USD"
+              })]
+            })
           })]
-        }), /*#__PURE__*/_jsx(ListItemTrailing, {
-          children: /*#__PURE__*/_jsx(ChevronRight, {
-            size: 24
-          })
-        })]
-      }), /*#__PURE__*/_jsxs(ListItem, {
-        children: [/*#__PURE__*/_jsxs(ListItemLeading, {
-          children: [/*#__PURE__*/_jsx(Wallet, {
-            size: 24
-          }), /*#__PURE__*/_jsxs(ListItemContent, {
-            children: [/*#__PURE__*/_jsx(ListItemTitle, {
-              children: "Icon without Spot"
-            }), /*#__PURE__*/_jsx(ListItemDescription, {
-              children: "With icon"
+        }), /*#__PURE__*/_jsxs(ListItem, {
+          children: [/*#__PURE__*/_jsxs(ListItemLeading, {
+            children: [/*#__PURE__*/_jsx(Spot, {
+              size: 48,
+              appearance: "icon",
+              icon: Wallet
+            }), /*#__PURE__*/_jsxs(ListItemContent, {
+              children: [/*#__PURE__*/_jsx(ListItemTitle, {
+                children: "Static item"
+              }), /*#__PURE__*/_jsx(ListItemDescription, {
+                children: "Not pressable"
+              })]
             })]
+          }), /*#__PURE__*/_jsx(ListItemTrailing, {
+            children: /*#__PURE__*/_jsx(Tag, {
+              size: "sm",
+              label: "New",
+              appearance: "accent"
+            })
           })]
-        }), /*#__PURE__*/_jsx(ListItemTrailing, {
-          children: /*#__PURE__*/_jsx(ChevronRight, {
-            size: 24
-          })
         })]
-      }), /*#__PURE__*/_jsxs(ListItem, {
-        children: [/*#__PURE__*/_jsxs(ListItemLeading, {
-          children: [/*#__PURE__*/_jsx(Spot, {
-            size: 48,
-            appearance: "icon",
-            icon: Wallet
-          }), /*#__PURE__*/_jsxs(ListItemContent, {
-            children: [/*#__PURE__*/_jsxs(ListItemContentRow, {
+      }), /*#__PURE__*/_jsxs(Box, {
+        lx: {
+          flexDirection: 'column',
+          gap: 's8'
+        },
+        children: [/*#__PURE__*/_jsx(Text, {
+          typography: "body4SemiBold",
+          lx: {
+            color: 'muted'
+          },
+          children: "Interactive"
+        }), /*#__PURE__*/_jsxs(ListItem, {
+          onPress: () => {},
+          children: [/*#__PURE__*/_jsxs(ListItemLeading, {
+            children: [/*#__PURE__*/_jsx(Spot, {
+              size: 48,
+              appearance: "icon",
+              icon: Settings
+            }), /*#__PURE__*/_jsxs(ListItemContent, {
               children: [/*#__PURE__*/_jsx(ListItemTitle, {
-                children: "Complex 1"
-              }), /*#__PURE__*/_jsx(Tag, {
-                size: "sm",
-                label: "New",
-                appearance: "base"
-              })]
-            }), /*#__PURE__*/_jsxs(ListItemContentRow, {
-              children: [/*#__PURE__*/_jsx(ListItemDescription, {
-                children: "With description"
-              }), /*#__PURE__*/_jsx(Tag, {
-                size: "sm",
-                label: "Custom Tag",
-                appearance: "gray"
+                children: "Navigation"
+              }), /*#__PURE__*/_jsx(ListItemDescription, {
+                children: "Press feedback styles"
               })]
             })]
+          }), /*#__PURE__*/_jsx(ListItemTrailing, {
+            children: /*#__PURE__*/_jsx(ChevronRight, {
+              size: 24
+            })
           })]
-        }), /*#__PURE__*/_jsx(ListItemTrailing, {
-          children: /*#__PURE__*/_jsxs(ListItemContent, {
-            children: [/*#__PURE__*/_jsx(ListItemTitle, {
-              children: "42.10"
-            }), /*#__PURE__*/_jsx(ListItemDescription, {
-              children: "USD"
-            })]
-          })
-        })]
-      }), /*#__PURE__*/_jsxs(ListItem, {
-        children: [/*#__PURE__*/_jsxs(ListItemLeading, {
-          children: [/*#__PURE__*/_jsx(Spot, {
-            size: 48,
-            appearance: "icon",
-            icon: Wallet
-          }), /*#__PURE__*/_jsxs(ListItemContent, {
-            children: [/*#__PURE__*/_jsx(ListItemTitle, {
-              children: "Complex 2"
-            }), /*#__PURE__*/_jsx(ListItemDescription, {
-              children: "With description"
+        }), /*#__PURE__*/_jsxs(ListItem, {
+          onPress: () => setSelected(!selected),
+          children: [/*#__PURE__*/_jsxs(ListItemLeading, {
+            children: [/*#__PURE__*/_jsx(Spot, {
+              size: 48,
+              appearance: "icon",
+              icon: Wallet
+            }), /*#__PURE__*/_jsxs(ListItemContent, {
+              children: [/*#__PURE__*/_jsx(ListItemTitle, {
+                children: "Toggle"
+              }), /*#__PURE__*/_jsx(ListItemDescription, {
+                children: "Press to toggle"
+              })]
             })]
+          }), /*#__PURE__*/_jsx(ListItemTrailing, {
+            children: /*#__PURE__*/_jsx(Switch, {
+              checked: selected,
+              onCheckedChange: setSelected
+            })
           })]
-        }), /*#__PURE__*/_jsx(ListItemTrailing, {
-          children: /*#__PURE__*/_jsxs(ListItemContent, {
-            children: [/*#__PURE__*/_jsxs(ListItemContentRow, {
-              children: [/*#__PURE__*/_jsx(Tag, {
-                size: "sm",
-                label: "New",
-                appearance: "base"
-              }), /*#__PURE__*/_jsx(ListItemTitle, {
-                children: "1200.12"
+        }), /*#__PURE__*/_jsxs(ListItem, {
+          onPress: () => {},
+          children: [/*#__PURE__*/_jsxs(ListItemLeading, {
+            children: [/*#__PURE__*/_jsx(Wallet, {
+              size: 24
+            }), /*#__PURE__*/_jsxs(ListItemContent, {
+              children: [/*#__PURE__*/_jsx(ListItemTitle, {
+                children: "Icon without Spot"
+              }), /*#__PURE__*/_jsx(ListItemDescription, {
+                children: "With icon"
               })]
-            }), /*#__PURE__*/_jsx(ListItemContentRow, {
-              children: /*#__PURE__*/_jsx(Tag, {
-                size: "sm",
-                label: "BTC",
-                appearance: "gray"
-              })
             })]
-          })
+          }), /*#__PURE__*/_jsx(ListItemTrailing, {
+            children: /*#__PURE__*/_jsx(ChevronRight, {
+              size: 24
+            })
+          })]
         })]
       })]
     });
@@ -353,6 +339,7 @@ export const DisabledState = {
       })]
     }), /*#__PURE__*/_jsxs(ListItem, {
       ...args,
+      onPress: () => {},
       children: [/*#__PURE__*/_jsxs(ListItemLeading, {
         children: [/*#__PURE__*/_jsx(Spot, {
           size: 48,
@@ -430,89 +417,316 @@ export const DisabledState = {
   }
 };
 export const ResponsiveLayout = {
-  render: () => /*#__PURE__*/_jsx(Box, {
+  render: () => /*#__PURE__*/_jsxs(Box, {
     lx: {
-      width: 's400',
-      borderWidth: 's1',
-      borderColor: 'mutedSubtle',
-      padding: 's16'
+      flexDirection: 'column',
+      width: 's480',
+      gap: 's32'
     },
-    children: /*#__PURE__*/_jsxs(Box, {
+    children: [/*#__PURE__*/_jsxs(ListItem, {
       lx: {
-        flexDirection: 'column'
+        alignSelf: 'flex-start'
       },
-      children: [/*#__PURE__*/_jsxs(ListItem, {
-        children: [/*#__PURE__*/_jsxs(ListItemLeading, {
-          children: [/*#__PURE__*/_jsx(Spot, {
-            size: 48,
-            appearance: "icon",
-            icon: Settings
-          }), /*#__PURE__*/_jsxs(ListItemContent, {
-            children: [/*#__PURE__*/_jsx(ListItemTitle, {
-              children: "Short Title"
-            }), /*#__PURE__*/_jsx(ListItemDescription, {
-              children: "Short description"
-            })]
+      onPress: () => {},
+      children: [/*#__PURE__*/_jsxs(ListItemLeading, {
+        children: [/*#__PURE__*/_jsx(Spot, {
+          size: 48,
+          appearance: "icon",
+          icon: Settings
+        }), /*#__PURE__*/_jsxs(ListItemContent, {
+          children: [/*#__PURE__*/_jsx(ListItemTitle, {
+            children: "Fit content"
+          }), /*#__PURE__*/_jsx(ListItemDescription, {
+            children: "Short"
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(ListItemTrailing, {
+        children: /*#__PURE__*/_jsx(ChevronRight, {
+          size: 24
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(ListItem, {
+      lx: {
+        width: 's320'
+      },
+      onPress: () => {},
+      children: [/*#__PURE__*/_jsxs(ListItemLeading, {
+        children: [/*#__PURE__*/_jsx(Spot, {
+          size: 48,
+          appearance: "icon",
+          icon: Settings
+        }), /*#__PURE__*/_jsxs(ListItemContent, {
+          children: [/*#__PURE__*/_jsx(ListItemTitle, {
+            children: "Defined width (320px) with a long title that truncates"
+          }), /*#__PURE__*/_jsx(ListItemDescription, {
+            children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos."
           })]
-        }), /*#__PURE__*/_jsx(ListItemTrailing, {
-          children: /*#__PURE__*/_jsx(ChevronRight, {
-            size: 24
-          })
         })]
-      }), /*#__PURE__*/_jsxs(ListItem, {
-        children: [/*#__PURE__*/_jsxs(ListItemLeading, {
-          children: [/*#__PURE__*/_jsx(Spot, {
-            size: 48,
-            appearance: "icon",
-            icon: Settings
-          }), /*#__PURE__*/_jsxs(ListItemContent, {
+      }), /*#__PURE__*/_jsx(ListItemTrailing, {
+        children: /*#__PURE__*/_jsx(ChevronRight, {
+          size: 24
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(ListItem, {
+      lx: {
+        width: 's320'
+      },
+      children: [/*#__PURE__*/_jsxs(ListItemLeading, {
+        children: [/*#__PURE__*/_jsx(Spot, {
+          size: 48,
+          appearance: "icon",
+          icon: Wallet
+        }), /*#__PURE__*/_jsxs(ListItemContent, {
+          children: [/*#__PURE__*/_jsxs(ListItemContentRow, {
             children: [/*#__PURE__*/_jsx(ListItemTitle, {
-              children: "Long Title that should truncate appropriately"
-            }), /*#__PURE__*/_jsx(ListItemDescription, {
+              children: "Defined width (320px) with ContentRow"
+            }), /*#__PURE__*/_jsx(Tag, {
+              size: "sm",
+              label: "New",
+              appearance: "base"
+            })]
+          }), /*#__PURE__*/_jsxs(ListItemContentRow, {
+            children: [/*#__PURE__*/_jsx(ListItemDescription, {
               children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos."
+            }), /*#__PURE__*/_jsx(Tag, {
+              size: "sm",
+              label: "Custom Tag",
+              appearance: "gray"
             })]
           })]
-        }), /*#__PURE__*/_jsx(ListItemTrailing, {
-          children: /*#__PURE__*/_jsx(ChevronRight, {
-            size: 24
+        })]
+      }), /*#__PURE__*/_jsx(ListItemTrailing, {
+        children: /*#__PURE__*/_jsxs(ListItemContent, {
+          children: [/*#__PURE__*/_jsx(ListItemTitle, {
+            children: "42.10"
+          }), /*#__PURE__*/_jsx(ListItemDescription, {
+            children: "USD"
+          })]
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(ListItem, {
+      lx: {
+        width: 'full'
+      },
+      onPress: () => {},
+      children: [/*#__PURE__*/_jsxs(ListItemLeading, {
+        children: [/*#__PURE__*/_jsx(Spot, {
+          size: 48,
+          appearance: "icon",
+          icon: Settings
+        }), /*#__PURE__*/_jsxs(ListItemContent, {
+          children: [/*#__PURE__*/_jsx(ListItemTitle, {
+            children: "Full width (fills parent)"
+          }), /*#__PURE__*/_jsx(ListItemDescription, {
+            children: "Stretches to container width"
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(ListItemTrailing, {
+        children: /*#__PURE__*/_jsx(ChevronRight, {
+          size: 24
+        })
+      })]
+    })]
+  })
+};
+export const CompositionShowcase = {
+  render: () => /*#__PURE__*/_jsxs(Box, {
+    lx: {
+      flexDirection: 'column',
+      maxWidth: 's320',
+      gap: 's8'
+    },
+    children: [/*#__PURE__*/_jsx(ListItem, {
+      children: /*#__PURE__*/_jsxs(ListItemLeading, {
+        children: [/*#__PURE__*/_jsx(Spot, {
+          size: 48,
+          appearance: "icon",
+          icon: Settings
+        }), /*#__PURE__*/_jsx(ListItemContent, {
+          children: /*#__PURE__*/_jsx(ListItemTitle, {
+            children: "Simple composition"
           })
         })]
-      }), /*#__PURE__*/_jsxs(ListItem, {
-        children: [/*#__PURE__*/_jsxs(ListItemLeading, {
-          children: [/*#__PURE__*/_jsx(Spot, {
-            size: 48,
-            appearance: "icon",
-            icon: Wallet
-          }), /*#__PURE__*/_jsxs(ListItemContent, {
-            children: [/*#__PURE__*/_jsxs(ListItemContentRow, {
-              children: [/*#__PURE__*/_jsx(ListItemTitle, {
-                children: "Long Title that should truncate appropriately"
-              }), /*#__PURE__*/_jsx(Tag, {
-                size: "sm",
-                label: "New",
-                appearance: "base"
-              })]
-            }), /*#__PURE__*/_jsxs(ListItemContentRow, {
-              children: [/*#__PURE__*/_jsx(ListItemDescription, {
-                children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos."
-              }), /*#__PURE__*/_jsx(Tag, {
-                size: "sm",
-                label: "Custom Tag",
-                appearance: "gray"
-              })]
+      })
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: /*#__PURE__*/_jsxs(ListItemLeading, {
+        children: [/*#__PURE__*/_jsx(Spot, {
+          size: 48,
+          appearance: "icon",
+          icon: Settings
+        }), /*#__PURE__*/_jsxs(ListItemContent, {
+          children: [/*#__PURE__*/_jsx(ListItemTitle, {
+            children: "Crypto icon"
+          }), /*#__PURE__*/_jsxs(ListItemContentRow, {
+            children: [/*#__PURE__*/_jsx(ListItemDescription, {
+              children: "Inline with description"
+            }), /*#__PURE__*/_jsx(MediaImage, {
+              src: "https://crypto-icons.ledger.com/ALGO.png",
+              alt: "Algorand",
+              size: 20
             })]
           })]
-        }), /*#__PURE__*/_jsx(ListItemTrailing, {
-          children: /*#__PURE__*/_jsxs(ListItemContent, {
+        })]
+      })
+    }), /*#__PURE__*/_jsxs(ListItem, {
+      children: [/*#__PURE__*/_jsxs(ListItemLeading, {
+        children: [/*#__PURE__*/_jsx(Spot, {
+          size: 48,
+          appearance: "icon",
+          icon: Wallet
+        }), /*#__PURE__*/_jsxs(ListItemContent, {
+          children: [/*#__PURE__*/_jsx(ListItemTitle, {
+            children: "Content Variant"
+          }), /*#__PURE__*/_jsx(ListItemDescription, {
+            children: "With description"
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(ListItemTrailing, {
+        children: /*#__PURE__*/_jsxs(ListItemContent, {
+          children: [/*#__PURE__*/_jsx(ListItemTitle, {
+            children: "42.10"
+          }), /*#__PURE__*/_jsx(ListItemDescription, {
+            children: "USD"
+          })]
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(ListItem, {
+      children: [/*#__PURE__*/_jsxs(ListItemLeading, {
+        children: [/*#__PURE__*/_jsx(Spot, {
+          size: 48,
+          appearance: "icon",
+          icon: Wallet
+        }), /*#__PURE__*/_jsxs(ListItemContent, {
+          children: [/*#__PURE__*/_jsx(ListItemTitle, {
+            children: "Content Variant"
+          }), /*#__PURE__*/_jsx(ListItemDescription, {
+            children: "Custom style"
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(ListItemTrailing, {
+        children: /*#__PURE__*/_jsxs(ListItemContent, {
+          children: [/*#__PURE__*/_jsx(ListItemTitle, {
+            children: "USD"
+          }), /*#__PURE__*/_jsx(ListItemDescription, {
+            lx: {
+              color: 'error'
+            },
+            children: "-7.53%"
+          })]
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(ListItem, {
+      children: [/*#__PURE__*/_jsxs(ListItemLeading, {
+        children: [/*#__PURE__*/_jsx(Spot, {
+          size: 48,
+          appearance: "icon",
+          icon: Wallet
+        }), /*#__PURE__*/_jsxs(ListItemContent, {
+          children: [/*#__PURE__*/_jsx(ListItemTitle, {
+            children: "Content Variant"
+          }), /*#__PURE__*/_jsx(ListItemDescription, {
+            children: "Custom style"
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(ListItemTrailing, {
+        children: /*#__PURE__*/_jsxs(ListItemContent, {
+          children: [/*#__PURE__*/_jsx(ListItemTitle, {
+            children: "USD"
+          }), /*#__PURE__*/_jsx(ListItemDescription, {
+            lx: {
+              color: 'success'
+            },
+            children: "+7.53%"
+          })]
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(ListItem, {
+      children: [/*#__PURE__*/_jsxs(ListItemLeading, {
+        children: [/*#__PURE__*/_jsx(Spot, {
+          size: 48,
+          appearance: "icon",
+          icon: Settings
+        }), /*#__PURE__*/_jsxs(ListItemContent, {
+          children: [/*#__PURE__*/_jsx(ListItemTitle, {
+            children: "Tag Variant"
+          }), /*#__PURE__*/_jsx(ListItemDescription, {
+            children: "With description"
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(ListItemTrailing, {
+        children: /*#__PURE__*/_jsx(Tag, {
+          size: "sm",
+          label: "New",
+          appearance: "accent"
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(ListItem, {
+      children: [/*#__PURE__*/_jsxs(ListItemLeading, {
+        children: [/*#__PURE__*/_jsx(Spot, {
+          size: 48,
+          appearance: "icon",
+          icon: Wallet
+        }), /*#__PURE__*/_jsxs(ListItemContent, {
+          children: [/*#__PURE__*/_jsxs(ListItemContentRow, {
             children: [/*#__PURE__*/_jsx(ListItemTitle, {
-              children: "42.10"
-            }), /*#__PURE__*/_jsx(ListItemDescription, {
-              children: "USD"
+              children: "Complex 1"
+            }), /*#__PURE__*/_jsx(Tag, {
+              size: "sm",
+              label: "New",
+              appearance: "base"
             })]
-          })
+          }), /*#__PURE__*/_jsxs(ListItemContentRow, {
+            children: [/*#__PURE__*/_jsx(ListItemDescription, {
+              children: "With description"
+            }), /*#__PURE__*/_jsx(Tag, {
+              size: "sm",
+              label: "Custom Tag",
+              appearance: "gray"
+            })]
+          })]
         })]
+      }), /*#__PURE__*/_jsx(ListItemTrailing, {
+        children: /*#__PURE__*/_jsxs(ListItemContent, {
+          children: [/*#__PURE__*/_jsx(ListItemTitle, {
+            children: "42.10"
+          }), /*#__PURE__*/_jsx(ListItemDescription, {
+            children: "USD"
+          })]
+        })
       })]
-    })
+    }), /*#__PURE__*/_jsxs(ListItem, {
+      children: [/*#__PURE__*/_jsxs(ListItemLeading, {
+        children: [/*#__PURE__*/_jsx(Spot, {
+          size: 48,
+          appearance: "icon",
+          icon: Wallet
+        }), /*#__PURE__*/_jsxs(ListItemContent, {
+          children: [/*#__PURE__*/_jsx(ListItemTitle, {
+            children: "Complex 2"
+          }), /*#__PURE__*/_jsx(ListItemDescription, {
+            children: "With description"
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(ListItemTrailing, {
+        children: /*#__PURE__*/_jsxs(ListItemContent, {
+          children: [/*#__PURE__*/_jsxs(ListItemContentRow, {
+            children: [/*#__PURE__*/_jsx(Tag, {
+              size: "sm",
+              label: "New",
+              appearance: "base"
+            }), /*#__PURE__*/_jsx(ListItemTitle, {
+              children: "1200.12"
+            })]
+          }), /*#__PURE__*/_jsx(ListItemContentRow, {
+            children: /*#__PURE__*/_jsx(Tag, {
+              size: "sm",
+              label: "BTC",
+              appearance: "gray"
+            })
+          })]
+        })
+      })]
+    })]
   })
 };
 //# sourceMappingURL=ListItem.stories.js.map