@ledgerhq/lumen-ui-rnative 0.1.22 → 0.1.24

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

@@ -0,0 +1,735 @@
+"use strict";
+
+import { CryptoIcon } from '@ledgerhq/crypto-icons';
+import { useState } from 'react';
+import { Settings } from "../../Symbols/index.js";
+import { BottomSheet } from "../BottomSheet/index.js";
+import { BottomSheetHeader } from "../BottomSheet/BottomSheetHeader.js";
+import { BottomSheetScrollView, BottomSheetView } from "../BottomSheet/Scrollables.js";
+import { useBottomSheetRef } from "../BottomSheet/useBottomSheetRef.js";
+import { MediaButton } from "../MediaButton/index.js";
+import { Spot } from "../Spot/index.js";
+import { Tag } from "../Tag/Tag.js";
+import { Box, Text } from "../Utility/index.js";
+import { OptionList, OptionListContent, OptionListEmptyState, OptionListItem, OptionListItemLeading, OptionListItemContent, OptionListItemDescription, OptionListItemContentRow, OptionListTrigger, OptionListItemText } from "./OptionList.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const meta = {
+  component: OptionList,
+  title: 'Selection/OptionList',
+  subcomponents: {
+    OptionListContent,
+    OptionListItem,
+    OptionListItemLeading,
+    OptionListItemContent,
+    OptionListItemText,
+    OptionListItemDescription,
+    OptionListItemContentRow,
+    OptionListTrigger
+  },
+  decorators: [Story => /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsx(Box, {
+      lx: {
+        flex: 1,
+        padding: 's24',
+        alignItems: 'flex-start',
+        width: 's320',
+        height: 's480'
+      },
+      children: /*#__PURE__*/_jsx(Story, {})
+    })
+  })],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code'
+      }
+    }
+  }
+};
+export default meta;
+const CURRENCIES = [{
+  value: 'btc',
+  label: 'Bitcoin',
+  meta: {
+    ticker: 'BTC',
+    ledgerId: 'bitcoin'
+  }
+}, {
+  value: 'eth',
+  label: 'Ethereum',
+  meta: {
+    ticker: 'ETH',
+    ledgerId: 'ethereum'
+  }
+}, {
+  value: 'sol',
+  label: 'Solana',
+  meta: {
+    ticker: 'SOL',
+    ledgerId: 'solana'
+  }
+}, {
+  value: 'dot',
+  label: 'Polkadot',
+  meta: {
+    ticker: 'DOT',
+    ledgerId: 'polkadot'
+  }
+}];
+export const Base = {
+  render: () => {
+    const [value, setValue] = useState(null);
+    const bottomSheetRef = useBottomSheetRef();
+    const selected = CURRENCIES.find(c => c.value === value);
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(OptionListTrigger, {
+        label: "Currency",
+        onPress: () => bottomSheetRef.current?.present(),
+        children: selected && /*#__PURE__*/_jsx(Text, {
+          lx: {
+            color: 'base'
+          },
+          children: selected.label
+        })
+      }), /*#__PURE__*/_jsx(BottomSheet, {
+        ref: bottomSheetRef,
+        enableDynamicSizing: true,
+        snapPoints: null,
+        onClose: () => bottomSheetRef.current?.dismiss(),
+        children: /*#__PURE__*/_jsxs(BottomSheetView, {
+          children: [/*#__PURE__*/_jsx(BottomSheetHeader, {
+            title: "Select currency"
+          }), /*#__PURE__*/_jsx(OptionList, {
+            items: CURRENCIES,
+            value: value,
+            onValueChange: v => {
+              setValue(v);
+              bottomSheetRef.current?.dismiss();
+            },
+            children: /*#__PURE__*/_jsx(OptionListContent, {
+              renderItem: item => {
+                const ticker = item.meta.ticker;
+                return /*#__PURE__*/_jsxs(OptionListItem, {
+                  value: item.value,
+                  children: [/*#__PURE__*/_jsx(OptionListItemLeading, {
+                    children: /*#__PURE__*/_jsx(CryptoIcon, {
+                      ledgerId: item.meta?.ledgerId ?? '',
+                      ticker: ticker,
+                      size: "32px"
+                    })
+                  }), /*#__PURE__*/_jsxs(OptionListItemContent, {
+                    children: [/*#__PURE__*/_jsx(OptionListItemText, {
+                      children: item.label
+                    }), /*#__PURE__*/_jsx(OptionListItemDescription, {
+                      children: ticker
+                    })]
+                  })]
+                });
+              }
+            })
+          })]
+        })
+      })]
+    });
+  }
+};
+const FOODS = [{
+  value: 'apple',
+  label: 'Apple',
+  group: 'Fruits'
+}, {
+  value: 'banana',
+  label: 'Banana',
+  group: 'Fruits'
+}, {
+  value: 'orange',
+  label: 'Orange',
+  group: 'Fruits'
+}, {
+  value: 'carrot',
+  label: 'Carrot',
+  group: 'Vegetables'
+}, {
+  value: 'broccoli',
+  label: 'Broccoli',
+  group: 'Vegetables'
+}, {
+  value: 'spinach',
+  label: 'Spinach',
+  group: 'Vegetables'
+}];
+export const WithGroups = {
+  render: () => {
+    const [value, setValue] = useState(null);
+    const bottomSheetRef = useBottomSheetRef();
+    const selected = FOODS.find(f => f.value === value);
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(OptionListTrigger, {
+        label: "Food",
+        onPress: () => bottomSheetRef.current?.present(),
+        children: selected && /*#__PURE__*/_jsx(Text, {
+          lx: {
+            color: 'base'
+          },
+          children: selected.label
+        })
+      }), /*#__PURE__*/_jsx(BottomSheet, {
+        ref: bottomSheetRef,
+        enableDynamicSizing: true,
+        snapPoints: null,
+        onClose: () => bottomSheetRef.current?.dismiss(),
+        children: /*#__PURE__*/_jsxs(BottomSheetScrollView, {
+          children: [/*#__PURE__*/_jsx(BottomSheetHeader, {
+            title: "Pick a food"
+          }), /*#__PURE__*/_jsx(OptionList, {
+            items: FOODS,
+            value: value,
+            onValueChange: v => {
+              setValue(v);
+              bottomSheetRef.current?.dismiss();
+            },
+            children: /*#__PURE__*/_jsx(OptionListContent, {
+              renderItem: item => /*#__PURE__*/_jsx(OptionListItem, {
+                value: item.value,
+                children: /*#__PURE__*/_jsx(OptionListItemContent, {
+                  children: /*#__PURE__*/_jsx(OptionListItemText, {
+                    children: item.label
+                  })
+                })
+              })
+            })
+          })]
+        })
+      })]
+    });
+  }
+};
+const NETWORKS = [{
+  value: 'ethereum',
+  label: 'Ethereum',
+  meta: {
+    ticker: 'ETH',
+    ledgerId: 'ethereum',
+    tag: 'ERC-20'
+  }
+}, {
+  value: 'polygon',
+  label: 'Polygon',
+  meta: {
+    ticker: 'MATIC',
+    ledgerId: 'polygon',
+    tag: 'Layer 2'
+  }
+}, {
+  value: 'arbitrum',
+  label: 'Arbitrum',
+  meta: {
+    ticker: 'ARB',
+    ledgerId: 'arbitrum',
+    tag: 'Layer 2'
+  }
+}, {
+  value: 'optimism',
+  label: 'Optimism',
+  meta: {
+    ticker: 'OP',
+    ledgerId: 'optimism',
+    tag: 'Layer 2'
+  }
+}];
+export const WithContentRow = {
+  render: () => {
+    const [value, setValue] = useState(null);
+    const bottomSheetRef = useBottomSheetRef();
+    const selected = NETWORKS.find(n => n.value === value);
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(OptionListTrigger, {
+        label: "Network",
+        onPress: () => bottomSheetRef.current?.present(),
+        children: selected && /*#__PURE__*/_jsx(Text, {
+          lx: {
+            color: 'base'
+          },
+          children: selected.label
+        })
+      }), /*#__PURE__*/_jsx(BottomSheet, {
+        ref: bottomSheetRef,
+        enableDynamicSizing: true,
+        snapPoints: null,
+        onClose: () => bottomSheetRef.current?.dismiss(),
+        children: /*#__PURE__*/_jsxs(BottomSheetView, {
+          children: [/*#__PURE__*/_jsx(BottomSheetHeader, {
+            title: "Select network"
+          }), /*#__PURE__*/_jsx(OptionList, {
+            items: NETWORKS,
+            value: value,
+            onValueChange: v => {
+              setValue(v);
+              bottomSheetRef.current?.dismiss();
+            },
+            children: /*#__PURE__*/_jsx(OptionListContent, {
+              renderItem: item => {
+                const meta = item.meta;
+                return /*#__PURE__*/_jsxs(OptionListItem, {
+                  value: item.value,
+                  children: [/*#__PURE__*/_jsx(OptionListItemLeading, {
+                    children: /*#__PURE__*/_jsx(CryptoIcon, {
+                      ledgerId: meta.ledgerId,
+                      ticker: meta.ticker,
+                      size: "32px"
+                    })
+                  }), /*#__PURE__*/_jsxs(OptionListItemContent, {
+                    children: [/*#__PURE__*/_jsxs(OptionListItemContentRow, {
+                      children: [/*#__PURE__*/_jsx(OptionListItemText, {
+                        children: item.label
+                      }), /*#__PURE__*/_jsx(Tag, {
+                        label: meta.tag,
+                        appearance: "gray",
+                        size: "sm"
+                      })]
+                    }), /*#__PURE__*/_jsx(OptionListItemDescription, {
+                      children: meta.ticker
+                    })]
+                  })]
+                });
+              }
+            })
+          })]
+        })
+      })]
+    });
+  }
+};
+const ACCOUNTS = [{
+  value: 'savings',
+  label: 'Savings Account',
+  description: 'High-yield savings'
+}, {
+  value: 'checking',
+  label: 'Checking Account',
+  description: 'Primary checking',
+  disabled: true
+}, {
+  value: 'investment',
+  label: 'Investment Account'
+}, {
+  value: 'retirement',
+  label: 'Retirement Fund',
+  description: 'Long-term growth',
+  disabled: true
+}];
+export const WithDisabledItems = {
+  render: () => {
+    const [value, setValue] = useState(null);
+    const bottomSheetRef = useBottomSheetRef();
+    const selected = ACCOUNTS.find(a => a.value === value);
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(OptionListTrigger, {
+        label: "Account",
+        onPress: () => bottomSheetRef.current?.present(),
+        children: selected && /*#__PURE__*/_jsx(Text, {
+          lx: {
+            color: 'base'
+          },
+          children: selected.label
+        })
+      }), /*#__PURE__*/_jsx(BottomSheet, {
+        ref: bottomSheetRef,
+        enableDynamicSizing: true,
+        snapPoints: null,
+        onClose: () => bottomSheetRef.current?.dismiss(),
+        children: /*#__PURE__*/_jsxs(BottomSheetView, {
+          children: [/*#__PURE__*/_jsx(BottomSheetHeader, {
+            title: "Select account"
+          }), /*#__PURE__*/_jsx(OptionList, {
+            items: ACCOUNTS,
+            value: value,
+            onValueChange: v => {
+              setValue(v);
+              bottomSheetRef.current?.dismiss();
+            },
+            children: /*#__PURE__*/_jsx(OptionListContent, {
+              renderItem: item => /*#__PURE__*/_jsxs(OptionListItem, {
+                value: item.value,
+                disabled: item.disabled,
+                children: [/*#__PURE__*/_jsx(OptionListItemLeading, {
+                  children: /*#__PURE__*/_jsx(Spot, {
+                    appearance: "icon",
+                    icon: Settings
+                  })
+                }), /*#__PURE__*/_jsxs(OptionListItemContent, {
+                  children: [/*#__PURE__*/_jsx(OptionListItemText, {
+                    children: item.label
+                  }), item.description && /*#__PURE__*/_jsx(OptionListItemDescription, {
+                    children: item.description
+                  })]
+                })]
+              })
+            })
+          })]
+        })
+      })]
+    });
+  }
+};
+const GROUPED_NETWORKS = [{
+  value: 'eth-main',
+  label: 'Ethereum',
+  group: 'Layer 1',
+  meta: {
+    ticker: 'ETH',
+    ledgerId: 'ethereum',
+    tag: 'Mainnet'
+  }
+}, {
+  value: 'btc-main',
+  label: 'Bitcoin',
+  group: 'Layer 1',
+  meta: {
+    ticker: 'BTC',
+    ledgerId: 'bitcoin',
+    tag: 'Mainnet'
+  }
+}, {
+  value: 'polygon',
+  label: 'Polygon',
+  group: 'Layer 2',
+  meta: {
+    ticker: 'MATIC',
+    ledgerId: 'polygon',
+    tag: 'Rollup'
+  }
+}, {
+  value: 'arbitrum',
+  label: 'Arbitrum',
+  group: 'Layer 2',
+  meta: {
+    ticker: 'ARB',
+    ledgerId: 'arbitrum',
+    tag: 'Rollup'
+  }
+}, {
+  value: 'optimism',
+  label: 'Optimism',
+  group: 'Layer 2',
+  meta: {
+    ticker: 'OP',
+    ledgerId: 'optimism',
+    tag: 'Rollup'
+  }
+}];
+export const GroupedWithContentRow = {
+  render: () => {
+    const [value, setValue] = useState(null);
+    const bottomSheetRef = useBottomSheetRef();
+    const selected = GROUPED_NETWORKS.find(n => n.value === value);
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(OptionListTrigger, {
+        label: "Network",
+        onPress: () => bottomSheetRef.current?.present(),
+        children: selected && /*#__PURE__*/_jsx(Text, {
+          lx: {
+            color: 'base'
+          },
+          children: selected.label
+        })
+      }), /*#__PURE__*/_jsx(BottomSheet, {
+        ref: bottomSheetRef,
+        enableDynamicSizing: true,
+        snapPoints: null,
+        onClose: () => bottomSheetRef.current?.dismiss(),
+        children: /*#__PURE__*/_jsxs(BottomSheetScrollView, {
+          children: [/*#__PURE__*/_jsx(BottomSheetHeader, {
+            title: "Select network"
+          }), /*#__PURE__*/_jsx(OptionList, {
+            items: GROUPED_NETWORKS,
+            value: value,
+            onValueChange: v => {
+              setValue(v);
+              bottomSheetRef.current?.dismiss();
+            },
+            children: /*#__PURE__*/_jsx(OptionListContent, {
+              renderItem: item => {
+                const meta = item.meta;
+                return /*#__PURE__*/_jsxs(OptionListItem, {
+                  value: item.value,
+                  children: [/*#__PURE__*/_jsx(OptionListItemLeading, {
+                    children: /*#__PURE__*/_jsx(CryptoIcon, {
+                      ledgerId: meta.ledgerId,
+                      ticker: meta.ticker,
+                      size: "32px"
+                    })
+                  }), /*#__PURE__*/_jsxs(OptionListItemContent, {
+                    children: [/*#__PURE__*/_jsxs(OptionListItemContentRow, {
+                      children: [/*#__PURE__*/_jsx(OptionListItemText, {
+                        children: item.label
+                      }), /*#__PURE__*/_jsx(Tag, {
+                        label: meta.tag,
+                        appearance: "gray",
+                        size: "sm"
+                      })]
+                    }), /*#__PURE__*/_jsx(OptionListItemDescription, {
+                      children: meta.ticker
+                    })]
+                  })]
+                });
+              }
+            })
+          })]
+        })
+      })]
+    });
+  }
+};
+export const EmptyState = {
+  render: () => {
+    const bottomSheetRef = useBottomSheetRef();
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(OptionListTrigger, {
+        label: "Currency",
+        onPress: () => bottomSheetRef.current?.present()
+      }), /*#__PURE__*/_jsx(BottomSheet, {
+        ref: bottomSheetRef,
+        enableDynamicSizing: true,
+        snapPoints: null,
+        onClose: () => bottomSheetRef.current?.dismiss(),
+        children: /*#__PURE__*/_jsxs(BottomSheetView, {
+          children: [/*#__PURE__*/_jsx(BottomSheetHeader, {
+            title: "Select currency"
+          }), /*#__PURE__*/_jsxs(OptionList, {
+            items: [],
+            value: null,
+            children: [/*#__PURE__*/_jsx(OptionListContent, {
+              renderItem: item => /*#__PURE__*/_jsx(OptionListItem, {
+                value: item.value,
+                children: /*#__PURE__*/_jsx(OptionListItemContent, {
+                  children: /*#__PURE__*/_jsx(OptionListItemText, {
+                    children: item.label
+                  })
+                })
+              })
+            }), /*#__PURE__*/_jsx(OptionListEmptyState, {
+              title: "No options available",
+              description: "There are no items to display"
+            })]
+          })]
+        })
+      })]
+    });
+  }
+};
+const SIMPLE_OPTIONS = [{
+  value: 'all',
+  label: 'All accounts'
+}, {
+  value: 'savings',
+  label: 'Savings'
+}, {
+  value: 'checking',
+  label: 'Checking'
+}];
+const SETTINGS_OPTIONS = [{
+  value: 'general',
+  label: 'General'
+}, {
+  value: 'security',
+  label: 'Security'
+}, {
+  value: 'notifications',
+  label: 'Notifications'
+}];
+const appearances = ['gray', 'transparent', 'no-background'];
+const SimpleOptionListSheet = ({
+  sheetRef,
+  items,
+  title,
+  value,
+  onValueChange
+}) => /*#__PURE__*/_jsx(BottomSheet, {
+  ref: sheetRef,
+  enableDynamicSizing: true,
+  snapPoints: null,
+  onClose: () => sheetRef.current?.dismiss(),
+  children: /*#__PURE__*/_jsxs(BottomSheetView, {
+    children: [/*#__PURE__*/_jsx(BottomSheetHeader, {
+      title: title
+    }), /*#__PURE__*/_jsx(OptionList, {
+      items: items,
+      value: value,
+      onValueChange: v => {
+        onValueChange(v);
+        sheetRef.current?.dismiss();
+      },
+      children: /*#__PURE__*/_jsx(OptionListContent, {
+        renderItem: item => /*#__PURE__*/_jsx(OptionListItem, {
+          value: item.value,
+          children: /*#__PURE__*/_jsx(OptionListItemContent, {
+            children: /*#__PURE__*/_jsx(OptionListItemText, {
+              children: item.label
+            })
+          })
+        })
+      })
+    })]
+  })
+});
+export const TriggerShowcase = {
+  render: () => {
+    const [buttonValue, setButtonValue] = useState(null);
+    const [iconValue, setIconValue] = useState(null);
+    const [cryptoValue, setCryptoValue] = useState(null);
+    const [appearanceValues, setAppearanceValues] = useState({});
+    const buttonRef = useBottomSheetRef();
+    const iconRef = useBottomSheetRef();
+    const cryptoRef = useBottomSheetRef();
+    const appearanceRefs = {
+      gray: useBottomSheetRef(),
+      transparent: useBottomSheetRef(),
+      'no-background': useBottomSheetRef()
+    };
+    const selectedButton = SIMPLE_OPTIONS.find(o => o.value === buttonValue);
+    const selectedIcon = SETTINGS_OPTIONS.find(o => o.value === iconValue);
+    const selectedCrypto = CURRENCIES.find(c => c.value === cryptoValue);
+    return /*#__PURE__*/_jsxs(Box, {
+      lx: {
+        gap: 's16',
+        alignItems: 'flex-start'
+      },
+      children: [/*#__PURE__*/_jsx(MediaButton, {
+        appearance: "gray",
+        onPress: () => buttonRef.current?.present(),
+        children: selectedButton?.label ?? 'All accounts'
+      }), /*#__PURE__*/_jsx(MediaButton, {
+        appearance: "gray",
+        disabled: true,
+        children: "Disabled"
+      }), /*#__PURE__*/_jsx(MediaButton, {
+        appearance: "gray",
+        onPress: () => iconRef.current?.present(),
+        icon: /*#__PURE__*/_jsx(Settings, {
+          size: 20
+        }),
+        iconType: "flat",
+        children: selectedIcon?.label ?? 'Settings'
+      }), /*#__PURE__*/_jsx(MediaButton, {
+        appearance: "gray",
+        onPress: () => cryptoRef.current?.present(),
+        icon: selectedCrypto?.meta ? /*#__PURE__*/_jsx(CryptoIcon, {
+          ledgerId: selectedCrypto.meta.ledgerId,
+          ticker: selectedCrypto.meta.ticker,
+          size: "32px"
+        }) : undefined,
+        iconType: "rounded",
+        children: selectedCrypto?.label ?? 'Network'
+      }), /*#__PURE__*/_jsx(Box, {
+        lx: {
+          flexDirection: 'row',
+          gap: 's16'
+        },
+        children: appearances.map(appearance => {
+          const selected = SIMPLE_OPTIONS.find(o => o.value === appearanceValues[appearance]);
+          return /*#__PURE__*/_jsx(MediaButton, {
+            appearance: appearance,
+            onPress: () => appearanceRefs[appearance].current?.present(),
+            children: selected?.label ?? appearance
+          }, appearance);
+        })
+      }), /*#__PURE__*/_jsx(SimpleOptionListSheet, {
+        sheetRef: buttonRef,
+        items: SIMPLE_OPTIONS,
+        title: "All accounts",
+        value: buttonValue,
+        onValueChange: setButtonValue
+      }), /*#__PURE__*/_jsx(SimpleOptionListSheet, {
+        sheetRef: iconRef,
+        items: SETTINGS_OPTIONS,
+        title: "Settings",
+        value: iconValue,
+        onValueChange: setIconValue
+      }), /*#__PURE__*/_jsx(BottomSheet, {
+        ref: cryptoRef,
+        enableDynamicSizing: true,
+        snapPoints: null,
+        onClose: () => cryptoRef.current?.dismiss(),
+        children: /*#__PURE__*/_jsxs(BottomSheetView, {
+          children: [/*#__PURE__*/_jsx(BottomSheetHeader, {
+            title: "Select network"
+          }), /*#__PURE__*/_jsx(OptionList, {
+            items: CURRENCIES,
+            value: cryptoValue,
+            onValueChange: v => {
+              setCryptoValue(v);
+              cryptoRef.current?.dismiss();
+            },
+            children: /*#__PURE__*/_jsx(OptionListContent, {
+              renderItem: item => {
+                const ticker = item.meta.ticker;
+                return /*#__PURE__*/_jsxs(OptionListItem, {
+                  value: item.value,
+                  children: [/*#__PURE__*/_jsx(OptionListItemLeading, {
+                    children: /*#__PURE__*/_jsx(CryptoIcon, {
+                      ledgerId: item.meta?.ledgerId ?? '',
+                      ticker: ticker,
+                      size: "32px"
+                    })
+                  }), /*#__PURE__*/_jsxs(OptionListItemContent, {
+                    children: [/*#__PURE__*/_jsx(OptionListItemText, {
+                      children: item.label
+                    }), /*#__PURE__*/_jsx(OptionListItemDescription, {
+                      children: ticker
+                    })]
+                  })]
+                });
+              }
+            })
+          })]
+        })
+      }), appearances.map(appearance => /*#__PURE__*/_jsx(SimpleOptionListSheet, {
+        sheetRef: appearanceRefs[appearance],
+        items: SIMPLE_OPTIONS,
+        title: appearance,
+        value: appearanceValues[appearance] ?? null,
+        onValueChange: v => setAppearanceValues(prev => ({
+          ...prev,
+          [appearance]: v
+        }))
+      }, appearance))]
+    });
+  }
+};
+export const WithDefaultValue = {
+  render: () => /*#__PURE__*/_jsx(Box, {
+    lx: {
+      width: 's320'
+    },
+    children: /*#__PURE__*/_jsx(OptionList, {
+      items: CURRENCIES,
+      defaultValue: "eth",
+      children: /*#__PURE__*/_jsx(OptionListContent, {
+        renderItem: item => {
+          const meta = item.meta;
+          return /*#__PURE__*/_jsxs(OptionListItem, {
+            value: item.value,
+            children: [/*#__PURE__*/_jsx(OptionListItemLeading, {
+              children: /*#__PURE__*/_jsx(CryptoIcon, {
+                ledgerId: meta.ledgerId,
+                ticker: meta.ticker,
+                size: "32px"
+              })
+            }), /*#__PURE__*/_jsxs(OptionListItemContent, {
+              children: [/*#__PURE__*/_jsx(OptionListItemText, {
+                children: item.label
+              }), /*#__PURE__*/_jsx(OptionListItemDescription, {
+                children: meta.ticker
+              })]
+            })]
+          });
+        }
+      })
+    })
+  })
+};
+//# sourceMappingURL=OptionList.stories.js.map