@ledgerhq/react-ui 0.29.0 → 0.30.0

package/lib/cjs/components/asorted/Icon/Icons.stories.js

@@ -69,7 +69,7 @@ IconGrid.args = {
 };
 IconGrid.argTypes = {
   size: {
-    options: ["XS", "S", "M", "L", "XL"],
+    options: ["XS", "S", "M", "L", "XL", "XXL"],
     control: {
       type: "select"
     }

package/lib/cjs/components/asorted/Icon/Icons.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/asorted/Icon/Icons.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport { StoryFn, Meta } from \"@storybook/react\";\nimport * as Icons from \"@ledgerhq/icons-ui/react\";\nimport styled from \"styled-components\";\nimport { Flex, Text } from \"../../..\";\nimport { useTheme } from \"styled-components\";\n\ninterface SizeData {\n  size: number;\n  stroke: number;\n}\n\ninterface AvailableSizes {\n  XS: SizeData;\n  S: SizeData;\n  M: SizeData;\n  L: SizeData;\n  XL: SizeData;\n}\n\nexport default {\n  title: \"asorted/Icons\",\n  components: Icons,\n} as Meta;\n\ninterface IconProps {\n  size?: keyof AvailableSizes;\n  color?: string;\n  style?: React.CSSProperties;\n}\n\nconst IconContainer = styled(Flex).attrs<{ active?: boolean }>({\n  flexDirection: \"column\",\n  justifyContent: \"flex-end\",\n  alignItems: \"center\",\n  p: 4,\n  fill: \"black\",\n})<{ active?: boolean }>`\n  ${p => (p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``)}\n  border-radius: 4px;\n  height: 100px;\n`;\n\nconst IconGridTemplate: React.FC<IconProps> = ({ size, color, style }) => {\n  const iconNames = Object.keys(Icons) as (keyof typeof Icons)[];\n\n  const theme = useTheme();\n  const selectedColor = color || theme.colors.neutral.c100;\n\n  return (\n    <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(4, 1fr)\", gap: \"10px\" }}>\n      {iconNames.map(iconName => {\n        const IconComponent = Icons[iconName];\n        return (\n          <IconContainer key={iconName}>\n            <IconComponent size={size} color={selectedColor} style={style} />\n            <Text pt={6}>{iconName}</Text>\n          </IconContainer>\n        );\n      })}\n    </div>\n  );\n};\n\nexport const IconGrid: StoryFn<IconProps> = (args: IconProps) => <IconGridTemplate {...args} />;\n\nIconGrid.args = {\n  size: \"M\",\n  color: \"\",\n  style: {},\n};\n\nIconGrid.argTypes = {\n  size: {\n    options: [\"XS\", \"S\", \"M\", \"L\", \"XL\"],\n    control: {\n      type: \"select\",\n    },\n  },\n  color: { control: \"color\" },\n  style: { control: \"object\" },\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,YAAuB;AACvB,+BAAmB;AACnB,eAA2B;AAC3B,IAAAA,4BAAyB;AAezB,IAAO,wBAAQ;AAAA,EACb,OAAO;AAAA,EACP,YAAY;AACd;AAQA,MAAM,oBAAgB,yBAAAC,SAAO,aAAI,EAAE,MAA4B;AAAA,EAC7D,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,GAAG;AAAA,EACH,MAAM;AACR,CAAC;AAAA,IACG,OAAM,EAAE,SAAS,qBAAqB,EAAE,MAAM,OAAO,QAAQ,GAAG,MAAM,EAAG;AAAA;AAAA;AAAA;AAK7E,MAAM,mBAAwC,CAAC,EAAE,MAAM,OAAO,MAAM,MAAM;AACxE,QAAM,YAAY,OAAO,KAAK,KAAK;AAEnC,QAAM,YAAQ,oCAAS;AACvB,QAAM,gBAAgB,SAAS,MAAM,OAAO,QAAQ;AAEpD,SACE,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,qBAAqB,kBAAkB,KAAK,OAAO,KAC/E,UAAU,IAAI,cAAY;AACzB,UAAM,gBAAgB,MAAM,QAAQ;AACpC,WACE,6BAAAA,QAAA,cAAC,iBAAc,KAAK,YAClB,6BAAAA,QAAA,cAAC,iBAAc,MAAY,OAAO,eAAe,OAAc,GAC/D,6BAAAA,QAAA,cAAC,iBAAK,IAAI,KAAI,QAAS,CACzB;AAAA,EAEJ,CAAC,CACH;AAEJ;AAEO,MAAM,WAA+B,CAAC,SAAoB,6BAAAA,QAAA,cAAC,oBAAkB,GAAG,MAAM;AAE7F,SAAS,OAAO;AAAA,EACd,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO,CAAC;AACV;AAEA,SAAS,WAAW;AAAA,EAClB,MAAM;AAAA,IACJ,SAAS,CAAC,MAAM,KAAK,KAAK,KAAK,IAAI;AAAA,IACnC,SAAS;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,OAAO,EAAE,SAAS,QAAQ;AAAA,EAC1B,OAAO,EAAE,SAAS,SAAS;AAC7B;",
+  "sourcesContent": ["import React from \"react\";\nimport { StoryFn, Meta } from \"@storybook/react\";\nimport * as Icons from \"@ledgerhq/icons-ui/react\";\nimport styled from \"styled-components\";\nimport { Flex, Text } from \"../../..\";\nimport { useTheme } from \"styled-components\";\n\ninterface SizeData {\n  size: number;\n  stroke: number;\n}\n\ninterface AvailableSizes {\n  XS: SizeData;\n  S: SizeData;\n  M: SizeData;\n  L: SizeData;\n  XL: SizeData;\n  XXL: SizeData;\n}\n\nexport default {\n  title: \"asorted/Icons\",\n  components: Icons,\n} as Meta;\n\ninterface IconProps {\n  size?: keyof AvailableSizes;\n  color?: string;\n  style?: React.CSSProperties;\n}\n\nconst IconContainer = styled(Flex).attrs<{ active?: boolean }>({\n  flexDirection: \"column\",\n  justifyContent: \"flex-end\",\n  alignItems: \"center\",\n  p: 4,\n  fill: \"black\",\n})<{ active?: boolean }>`\n  ${p => (p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``)}\n  border-radius: 4px;\n  height: 100px;\n`;\n\nconst IconGridTemplate: React.FC<IconProps> = ({ size, color, style }) => {\n  const iconNames = Object.keys(Icons) as (keyof typeof Icons)[];\n\n  const theme = useTheme();\n  const selectedColor = color || theme.colors.neutral.c100;\n\n  return (\n    <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(4, 1fr)\", gap: \"10px\" }}>\n      {iconNames.map(iconName => {\n        const IconComponent = Icons[iconName];\n        return (\n          <IconContainer key={iconName}>\n            <IconComponent size={size} color={selectedColor} style={style} />\n            <Text pt={6}>{iconName}</Text>\n          </IconContainer>\n        );\n      })}\n    </div>\n  );\n};\n\nexport const IconGrid: StoryFn<IconProps> = (args: IconProps) => <IconGridTemplate {...args} />;\n\nIconGrid.args = {\n  size: \"M\",\n  color: \"\",\n  style: {},\n};\n\nIconGrid.argTypes = {\n  size: {\n    options: [\"XS\", \"S\", \"M\", \"L\", \"XL\", \"XXL\"],\n    control: {\n      type: \"select\",\n    },\n  },\n  color: { control: \"color\" },\n  style: { control: \"object\" },\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,YAAuB;AACvB,+BAAmB;AACnB,eAA2B;AAC3B,IAAAA,4BAAyB;AAgBzB,IAAO,wBAAQ;AAAA,EACb,OAAO;AAAA,EACP,YAAY;AACd;AAQA,MAAM,oBAAgB,yBAAAC,SAAO,aAAI,EAAE,MAA4B;AAAA,EAC7D,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,GAAG;AAAA,EACH,MAAM;AACR,CAAC;AAAA,IACG,OAAM,EAAE,SAAS,qBAAqB,EAAE,MAAM,OAAO,QAAQ,GAAG,MAAM,EAAG;AAAA;AAAA;AAAA;AAK7E,MAAM,mBAAwC,CAAC,EAAE,MAAM,OAAO,MAAM,MAAM;AACxE,QAAM,YAAY,OAAO,KAAK,KAAK;AAEnC,QAAM,YAAQ,oCAAS;AACvB,QAAM,gBAAgB,SAAS,MAAM,OAAO,QAAQ;AAEpD,SACE,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,qBAAqB,kBAAkB,KAAK,OAAO,KAC/E,UAAU,IAAI,cAAY;AACzB,UAAM,gBAAgB,MAAM,QAAQ;AACpC,WACE,6BAAAA,QAAA,cAAC,iBAAc,KAAK,YAClB,6BAAAA,QAAA,cAAC,iBAAc,MAAY,OAAO,eAAe,OAAc,GAC/D,6BAAAA,QAAA,cAAC,iBAAK,IAAI,KAAI,QAAS,CACzB;AAAA,EAEJ,CAAC,CACH;AAEJ;AAEO,MAAM,WAA+B,CAAC,SAAoB,6BAAAA,QAAA,cAAC,oBAAkB,GAAG,MAAM;AAE7F,SAAS,OAAO;AAAA,EACd,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO,CAAC;AACV;AAEA,SAAS,WAAW;AAAA,EAClB,MAAM;AAAA,IACJ,SAAS,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK;AAAA,IAC1C,SAAS;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,OAAO,EAAE,SAAS,QAAQ;AAAA,EAC1B,OAAO,EAAE,SAAS,SAAS;AAC7B;",
   "names": ["import_styled_components", "styled", "React"]
 }

package/lib/cjs/pre-ldls/components/AccountList/AccountList.js

@@ -36,12 +36,21 @@ var import_AccountItem = require("../AccountItem/AccountItem");
 var import_VirtualList = require("../VirtualList/VirtualList");
 const AccountList = ({
   accounts,
-  onClick
+  onClick,
+  bottomComponent
 }) => {
   const renderAccountItem = (0, import_react.useCallback)(
     (account) => /* @__PURE__ */ import_react.default.createElement(import_AccountItem.AccountItem, { onClick: () => onClick(account.id), account }),
     [onClick]
   );
-  return /* @__PURE__ */ import_react.default.createElement(import_VirtualList.VirtualList, { items: accounts, itemHeight: 70, renderItem: renderAccountItem });
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_VirtualList.VirtualList,
+    {
+      items: accounts,
+      itemHeight: 70,
+      bottomComponent,
+      renderItem: renderAccountItem
+    }
+  );
 };
 //# sourceMappingURL=AccountList.js.map

package/lib/cjs/pre-ldls/components/AccountList/AccountList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/AccountList/AccountList.tsx"],
-  "sourcesContent": ["import React, { useCallback } from \"react\";\nimport { Account, AccountItem } from \"../AccountItem/AccountItem\";\nimport { VirtualList } from \"../VirtualList/VirtualList\";\n\nexport const AccountList = ({\n  accounts,\n  onClick,\n}: {\n  accounts: Account[];\n  onClick: (networkId: string) => void;\n}) => {\n  const renderAccountItem = useCallback(\n    (account: Account) => <AccountItem onClick={() => onClick(account.id)} account={account} />,\n    [onClick],\n  );\n\n  return <VirtualList items={accounts} itemHeight={70} renderItem={renderAccountItem} />;\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AACnC,yBAAqC;AACrC,yBAA4B;AAErB,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AACF,MAGM;AACJ,QAAM,wBAAoB;AAAA,IACxB,CAAC,YAAqB,6BAAAA,QAAA,cAAC,kCAAY,SAAS,MAAM,QAAQ,QAAQ,EAAE,GAAG,SAAkB;AAAA,IACzF,CAAC,OAAO;AAAA,EACV;AAEA,SAAO,6BAAAA,QAAA,cAAC,kCAAY,OAAO,UAAU,YAAY,IAAI,YAAY,mBAAmB;AACtF;",
+  "sourcesContent": ["import React, { useCallback } from \"react\";\nimport { Account, AccountItem } from \"../AccountItem/AccountItem\";\nimport { VirtualList } from \"../VirtualList/VirtualList\";\n\nexport const AccountList = ({\n  accounts,\n  onClick,\n  bottomComponent,\n}: {\n  accounts: Account[];\n  onClick: (networkId: string) => void;\n  bottomComponent?: React.ReactNode;\n}) => {\n  const renderAccountItem = useCallback(\n    (account: Account) => <AccountItem onClick={() => onClick(account.id)} account={account} />,\n    [onClick],\n  );\n\n  return (\n    <VirtualList\n      items={accounts}\n      itemHeight={70}\n      bottomComponent={bottomComponent}\n      renderItem={renderAccountItem}\n    />\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AACnC,yBAAqC;AACrC,yBAA4B;AAErB,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,QAAM,wBAAoB;AAAA,IACxB,CAAC,YAAqB,6BAAAA,QAAA,cAAC,kCAAY,SAAS,MAAM,QAAQ,QAAQ,EAAE,GAAG,SAAkB;AAAA,IACzF,CAAC,OAAO;AAAA,EACV;AAEA,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,YAAY;AAAA,MACZ;AAAA,MACA,YAAY;AAAA;AAAA,EACd;AAEJ;",
   "names": ["React"]
 }

package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.js

@@ -70,10 +70,23 @@ const InfoWrapper = import_styled_components.default.div`
   overflow: hidden;
   flex: 1;
 `;
-const AssetItem = ({ name, ticker, id, onClick }) => {
+const LeftElementWrapper = import_styled_components.default.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+const AssetItem = ({
+  name,
+  ticker,
+  id,
+  onClick,
+  leftElement,
+  rightElement
+}) => {
   return /* @__PURE__ */ import_react.default.createElement(Wrapper, { onClick: () => onClick({ name, ticker, id }) }, /* @__PURE__ */ import_react.default.createElement(import_CryptoIcon.CryptoIcon, { size: "48px", ledgerId: id, ticker }), /* @__PURE__ */ import_react.default.createElement(InfoWrapper, null, /* @__PURE__ */ import_react.default.createElement(
     import_components.Text,
     {
+      fontSize: "14px",
       variant: "largeLineHeight",
       fontWeight: "semiBold",
       color: "var(--colors-content-default-default)",
@@ -85,14 +98,16 @@ const AssetItem = ({ name, ticker, id, onClick }) => {
       }
     },
     name
-  ), /* @__PURE__ */ import_react.default.createElement(
+  ), /* @__PURE__ */ import_react.default.createElement(LeftElementWrapper, null, /* @__PURE__ */ import_react.default.createElement(
     import_components.Text,
     {
+      fontSize: "12px",
+      lineHeight: "16px",
       variant: "bodyLineHeight",
-      fontWeight: "semiBold",
+      fontWeight: "medium",
       color: "var(--colors-content-subdued-default-default)"
     },
     ticker
-  )));
+  ), leftElement)), rightElement);
 };
 //# sourceMappingURL=AssetItem.js.map

package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/AssetItem/AssetItem.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { Text } from \"../../../components\";\nimport { CryptoIcon } from \"../CryptoIcon/CryptoIcon\";\n\nexport type AssetType = {\n  name: string;\n  ticker: string;\n  id: string;\n};\n\ntype AssetItemProps = AssetType & {\n  onClick: (asset: AssetType) => void;\n};\n\nconst Wrapper = styled.div`\n  ${withTokens(\n    \"spacing-xxs\",\n    \"margin-s\",\n    \"radius-s\",\n    \"colors-content-subdued-default-default\",\n    \"colors-content-default-default\",\n    \"colors-surface-transparent-hover\",\n    \"colors-surface-transparent-pressed\",\n  )}\n\n  display: flex;\n  padding: var(--spacing-xxs);\n  cursor: pointer;\n  border-radius: var(--radius-s, 8px);\n  align-items: center;\n  overflow: hidden;\n\n  :hover {\n    background-color: var(--colors-surface-transparent-hover);\n  }\n\n  :active {\n    background-color: var(--colors-surface-transparent-pressed);\n  }\n`;\n\nconst InfoWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin-left: var(--margin-s);\n  overflow: hidden;\n  flex: 1;\n`;\n\nexport const AssetItem = ({ name, ticker, id, onClick }: AssetItemProps) => {\n  return (\n    <Wrapper onClick={() => onClick({ name, ticker, id })}>\n      <CryptoIcon size=\"48px\" ledgerId={id} ticker={ticker} />\n      <InfoWrapper>\n        <Text\n          variant=\"largeLineHeight\"\n          fontWeight=\"semiBold\"\n          color=\"var(--colors-content-default-default)\"\n          style={{\n            display: \"block\",\n            whiteSpace: \"nowrap\",\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n          }}\n        >\n          {name}\n        </Text>\n        <Text\n          variant=\"bodyLineHeight\"\n          fontWeight=\"semiBold\"\n          color=\"var(--colors-content-subdued-default-default)\"\n        >\n          {ticker}\n        </Text>\n      </InfoWrapper>\n    </Wrapper>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAAqB;AACrB,wBAA2B;AAY3B,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBH,MAAM,cAAc,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASpB,MAAM,YAAY,CAAC,EAAE,MAAM,QAAQ,IAAI,QAAQ,MAAsB;AAC1E,SACE,6BAAAC,QAAA,cAAC,WAAQ,SAAS,MAAM,QAAQ,EAAE,MAAM,QAAQ,GAAG,CAAC,KAClD,6BAAAA,QAAA,cAAC,gCAAW,MAAK,QAAO,UAAU,IAAI,QAAgB,GACtD,6BAAAA,QAAA,cAAC,mBACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,cAAc;AAAA,MAChB;AAAA;AAAA,IAEC;AAAA,EACH,GACA,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA;AAAA,IAEL;AAAA,EACH,CACF,CACF;AAEJ;",
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { Text } from \"../../../components\";\nimport { CryptoIcon } from \"../CryptoIcon/CryptoIcon\";\n\nexport type AssetType = {\n  name: string;\n  ticker: string;\n  id: string;\n  leftElement?: React.ReactNode;\n  rightElement?: React.ReactNode;\n};\n\ntype AssetItemProps = AssetType & {\n  onClick: (asset: AssetType) => void;\n};\n\nconst Wrapper = styled.div`\n  ${withTokens(\n    \"spacing-xxs\",\n    \"margin-s\",\n    \"radius-s\",\n    \"colors-content-subdued-default-default\",\n    \"colors-content-default-default\",\n    \"colors-surface-transparent-hover\",\n    \"colors-surface-transparent-pressed\",\n  )}\n\n  display: flex;\n  padding: var(--spacing-xxs);\n  cursor: pointer;\n  border-radius: var(--radius-s, 8px);\n  align-items: center;\n  overflow: hidden;\n\n  :hover {\n    background-color: var(--colors-surface-transparent-hover);\n  }\n\n  :active {\n    background-color: var(--colors-surface-transparent-pressed);\n  }\n`;\n\nconst InfoWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin-left: var(--margin-s);\n  overflow: hidden;\n  flex: 1;\n`;\n\nconst LeftElementWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 4px;\n`;\n\nexport const AssetItem = ({\n  name,\n  ticker,\n  id,\n  onClick,\n  leftElement,\n  rightElement,\n}: AssetItemProps) => {\n  return (\n    <Wrapper onClick={() => onClick({ name, ticker, id })}>\n      <CryptoIcon size=\"48px\" ledgerId={id} ticker={ticker} />\n      <InfoWrapper>\n        <Text\n          fontSize=\"14px\"\n          variant=\"largeLineHeight\"\n          fontWeight=\"semiBold\"\n          color=\"var(--colors-content-default-default)\"\n          style={{\n            display: \"block\",\n            whiteSpace: \"nowrap\",\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n          }}\n        >\n          {name}\n        </Text>\n        <LeftElementWrapper>\n          <Text\n            fontSize=\"12px\"\n            lineHeight=\"16px\"\n            variant=\"bodyLineHeight\"\n            fontWeight=\"medium\"\n            color=\"var(--colors-content-subdued-default-default)\"\n          >\n            {ticker}\n          </Text>\n          {leftElement}\n        </LeftElementWrapper>\n      </InfoWrapper>\n      {rightElement}\n    </Wrapper>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAAqB;AACrB,wBAA2B;AAc3B,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBH,MAAM,cAAc,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3B,MAAM,qBAAqB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAM3B,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAsB;AACpB,SACE,6BAAAC,QAAA,cAAC,WAAQ,SAAS,MAAM,QAAQ,EAAE,MAAM,QAAQ,GAAG,CAAC,KAClD,6BAAAA,QAAA,cAAC,gCAAW,MAAK,QAAO,UAAU,IAAI,QAAgB,GACtD,6BAAAA,QAAA,cAAC,mBACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,cAAc;AAAA,MAChB;AAAA;AAAA,IAEC;AAAA,EACH,GACA,6BAAAA,QAAA,cAAC,0BACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,YAAW;AAAA,MACX,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA;AAAA,IAEL;AAAA,EACH,GACC,WACH,CACF,GACC,YACH;AAEJ;",
   "names": ["styled", "React"]
 }

package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.stories.js

@@ -20,19 +20,64 @@ var AssetItem_stories_exports = {};
 __export(AssetItem_stories_exports, {
   Default: () => Default,
   TestAssetItem: () => TestAssetItem,
+  WithBalance: () => WithBalance,
+  WithDiscreetModeEnabled: () => WithDiscreetModeEnabled,
+  WithLeftTagAndRightBalance: () => WithLeftTagAndRightBalance,
+  WithTag: () => WithTag,
   default: () => AssetItem_stories_default
 });
 module.exports = __toCommonJS(AssetItem_stories_exports);
 var import_AssetItem = require("./AssetItem");
 var import_test = require("@storybook/test");
+var import_sharedStoryBook = require("../sharedStoryBook");
 const meta = {
   component: import_AssetItem.AssetItem,
   title: "PreLdls/Components/AssetItem",
   tags: ["autodocs"],
-  args: { name: "Bitcoin", ticker: "BTC", id: "bitcoin" }
+  args: { name: "Bitcoin", ticker: "BTC", id: "bitcoin" },
+  parameters: {
+    docs: {
+      description: {
+        component: "AssetItem displays a crypto asset with its name, ticker, icon, and optionally fiat value and balance. Use it to represent selectable assets in lists."
+      }
+    }
+  }
 };
 var AssetItem_stories_default = meta;
 const Default = {};
+const WithBalance = {
+  args: {
+    name: "Bitcoin",
+    ticker: "BTC",
+    id: "bitcoin",
+    rightElement: (0, import_sharedStoryBook.createRightElement)(false)
+  }
+};
+const WithTag = {
+  args: {
+    name: "Bitcoin",
+    ticker: "BTC",
+    id: "bitcoin",
+    leftElement: import_sharedStoryBook.leftElement
+  }
+};
+const WithLeftTagAndRightBalance = {
+  args: {
+    name: "Bitcoin",
+    ticker: "BTC",
+    id: "bitcoin",
+    leftElement: import_sharedStoryBook.leftElement,
+    rightElement: (0, import_sharedStoryBook.createRightElement)(false)
+  }
+};
+const WithDiscreetModeEnabled = {
+  args: {
+    name: "Bitcoin",
+    ticker: "BTC",
+    id: "bitcoin",
+    rightElement: (0, import_sharedStoryBook.createRightElement)(true)
+  }
+};
 const TestAssetItem = {
   play: async ({ canvasElement }) => {
     const canvas = (0, import_test.within)(canvasElement);

package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/AssetItem/AssetItem.stories.tsx"],
-  "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { AssetItem } from \"./AssetItem\";\nimport { expect, within } from \"@storybook/test\";\n\nconst meta: Meta<typeof AssetItem> = {\n  component: AssetItem,\n  title: \"PreLdls/Components/AssetItem\",\n  tags: [\"autodocs\"],\n  args: { name: \"Bitcoin\", ticker: \"BTC\", id: \"bitcoin\" },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof AssetItem>;\n\nexport const Default: Story = {};\n\nexport const TestAssetItem: Story = {\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n\n    const name = canvas.getByText(\"Bitcoin\");\n    const ticker = canvas.getByText(\"BTC\");\n\n    await expect(name).toBeInTheDocument();\n    await expect(ticker).toBeInTheDocument();\n  },\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAA0B;AAC1B,kBAA+B;AAE/B,MAAM,OAA+B;AAAA,EACnC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM,EAAE,MAAM,WAAW,QAAQ,OAAO,IAAI,UAAU;AACxD;AACA,IAAO,4BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,gBAAuB;AAAA,EAClC,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AAEnC,UAAM,OAAO,OAAO,UAAU,SAAS;AACvC,UAAM,SAAS,OAAO,UAAU,KAAK;AAErC,cAAM,oBAAO,IAAI,EAAE,kBAAkB;AACrC,cAAM,oBAAO,MAAM,EAAE,kBAAkB;AAAA,EACzC;AACF;",
+  "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { AssetItem } from \"./AssetItem\";\nimport { expect, within } from \"@storybook/test\";\nimport { createRightElement, leftElement } from \"../sharedStoryBook\";\n\nconst meta: Meta<typeof AssetItem> = {\n  component: AssetItem,\n  title: \"PreLdls/Components/AssetItem\",\n  tags: [\"autodocs\"],\n  args: { name: \"Bitcoin\", ticker: \"BTC\", id: \"bitcoin\" },\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"AssetItem displays a crypto asset with its name, ticker, icon, and optionally fiat value and balance. Use it to represent selectable assets in lists.\",\n      },\n    },\n  },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof AssetItem>;\n\nexport const Default: Story = {};\n\nexport const WithBalance: Story = {\n  args: {\n    name: \"Bitcoin\",\n    ticker: \"BTC\",\n    id: \"bitcoin\",\n    rightElement: createRightElement(false),\n  },\n};\n\nexport const WithTag: Story = {\n  args: {\n    name: \"Bitcoin\",\n    ticker: \"BTC\",\n    id: \"bitcoin\",\n    leftElement: leftElement,\n  },\n};\n\nexport const WithLeftTagAndRightBalance: Story = {\n  args: {\n    name: \"Bitcoin\",\n    ticker: \"BTC\",\n    id: \"bitcoin\",\n    leftElement: leftElement,\n    rightElement: createRightElement(false),\n  },\n};\n\nexport const WithDiscreetModeEnabled: Story = {\n  args: {\n    name: \"Bitcoin\",\n    ticker: \"BTC\",\n    id: \"bitcoin\",\n    rightElement: createRightElement(true),\n  },\n};\n\nexport const TestAssetItem: Story = {\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n\n    const name = canvas.getByText(\"Bitcoin\");\n    const ticker = canvas.getByText(\"BTC\");\n\n    await expect(name).toBeInTheDocument();\n    await expect(ticker).toBeInTheDocument();\n  },\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAA0B;AAC1B,kBAA+B;AAC/B,6BAAgD;AAEhD,MAAM,OAA+B;AAAA,EACnC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM,EAAE,MAAM,WAAW,QAAQ,OAAO,IAAI,UAAU;AAAA,EACtD,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WACE;AAAA,MACJ;AAAA,IACF;AAAA,EACF;AACF;AACA,IAAO,4BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,cAAqB;AAAA,EAChC,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,IAAI;AAAA,IACJ,kBAAc,2CAAmB,KAAK;AAAA,EACxC;AACF;AAEO,MAAM,UAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,IAAI;AAAA,IACJ,aAAa;AAAA,EACf;AACF;AAEO,MAAM,6BAAoC;AAAA,EAC/C,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,IAAI;AAAA,IACJ,aAAa;AAAA,IACb,kBAAc,2CAAmB,KAAK;AAAA,EACxC;AACF;AAEO,MAAM,0BAAiC;AAAA,EAC5C,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,IAAI;AAAA,IACJ,kBAAc,2CAAmB,IAAI;AAAA,EACvC;AACF;AAEO,MAAM,gBAAuB;AAAA,EAClC,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AAEnC,UAAM,OAAO,OAAO,UAAU,SAAS;AACvC,UAAM,SAAS,OAAO,UAAU,KAAK;AAErC,cAAM,oBAAO,IAAI,EAAE,kBAAkB;AACrC,cAAM,oBAAO,MAAM,EAAE,kBAAkB;AAAA,EACzC;AACF;",
   "names": []
 }

package/lib/cjs/pre-ldls/components/AssetList/AssetList.js

@@ -42,13 +42,13 @@ const AssetList = ({
   hasNextPage
 }) => {
   const renderAssetItem = (0, import_react.useCallback)(
-    ({ name, ticker, id }) => /* @__PURE__ */ import_react.default.createElement(import_AssetItem.AssetItem, { name, ticker, id, onClick }),
+    (props) => /* @__PURE__ */ import_react.default.createElement(import_AssetItem.AssetItem, { ...props, onClick }),
     [onClick]
   );
   return /* @__PURE__ */ import_react.default.createElement(
     import_VirtualList.VirtualList,
     {
-      itemHeight: 70,
+      itemHeight: 64,
       items: assets,
       onVisibleItemsScrollEnd,
       renderItem: renderAssetItem,

package/lib/cjs/pre-ldls/components/AssetList/AssetList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/AssetList/AssetList.tsx"],
-  "sourcesContent": ["import React, { useCallback } from \"react\";\nimport { AssetItem, AssetType } from \"../AssetItem/AssetItem\";\nimport { VirtualList } from \"../VirtualList/VirtualList\";\n\nexport const AssetList = ({\n  assets,\n  onClick,\n  onVisibleItemsScrollEnd,\n  scrollToTop,\n  hasNextPage,\n}: {\n  assets: AssetType[];\n  onClick: (asset: AssetType) => void;\n  onVisibleItemsScrollEnd?: () => void;\n  scrollToTop?: boolean;\n  hasNextPage?: boolean;\n}) => {\n  const renderAssetItem = useCallback(\n    ({ name, ticker, id }: AssetType) => (\n      <AssetItem name={name} ticker={ticker} id={id} onClick={onClick} />\n    ),\n    [onClick],\n  );\n\n  return (\n    <VirtualList\n      itemHeight={70}\n      items={assets}\n      onVisibleItemsScrollEnd={onVisibleItemsScrollEnd}\n      renderItem={renderAssetItem}\n      scrollToTop={scrollToTop}\n      hasNextPage={hasNextPage}\n    />\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AACnC,uBAAqC;AACrC,yBAA4B;AAErB,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAMM;AACJ,QAAM,sBAAkB;AAAA,IACtB,CAAC,EAAE,MAAM,QAAQ,GAAG,MAClB,6BAAAA,QAAA,cAAC,8BAAU,MAAY,QAAgB,IAAQ,SAAkB;AAAA,IAEnE,CAAC,OAAO;AAAA,EACV;AAEA,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,YAAY;AAAA,MACZ,OAAO;AAAA,MACP;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import React, { useCallback } from \"react\";\nimport { AssetItem, AssetType } from \"../AssetItem/AssetItem\";\nimport { VirtualList } from \"../VirtualList/VirtualList\";\n\nexport const AssetList = ({\n  assets,\n  onClick,\n  onVisibleItemsScrollEnd,\n  scrollToTop,\n  hasNextPage,\n}: {\n  assets: AssetType[];\n  onClick: (asset: AssetType) => void;\n  onVisibleItemsScrollEnd?: () => void;\n  scrollToTop?: boolean;\n  hasNextPage?: boolean;\n}) => {\n  const renderAssetItem = useCallback(\n    (props: AssetType) => <AssetItem {...props} onClick={onClick} />,\n    [onClick],\n  );\n\n  return (\n    <VirtualList\n      itemHeight={64}\n      items={assets}\n      onVisibleItemsScrollEnd={onVisibleItemsScrollEnd}\n      renderItem={renderAssetItem}\n      scrollToTop={scrollToTop}\n      hasNextPage={hasNextPage}\n    />\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AACnC,uBAAqC;AACrC,yBAA4B;AAErB,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAMM;AACJ,QAAM,sBAAkB;AAAA,IACtB,CAAC,UAAqB,6BAAAA,QAAA,cAAC,8BAAW,GAAG,OAAO,SAAkB;AAAA,IAC9D,CAAC,OAAO;AAAA,EACV;AAEA,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,YAAY;AAAA,MACZ,OAAO;AAAA,MACP;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
   "names": ["React"]
 }

package/lib/cjs/pre-ldls/components/AssetList/AssetList.stories.js

@@ -30,12 +30,16 @@ var AssetList_stories_exports = {};
 __export(AssetList_stories_exports, {
   Default: () => Default,
   TestAssetClick: () => TestAssetClick,
+  WithDiscreetModeEnabled: () => WithDiscreetModeEnabled,
+  WithFiatValue: () => WithFiatValue,
+  WithLeftTagAndRightBalance: () => WithLeftTagAndRightBalance,
   default: () => AssetList_stories_default
 });
 module.exports = __toCommonJS(AssetList_stories_exports);
 var import_AssetList = require("./AssetList");
 var import_test = require("@storybook/test");
 var import_react = __toESM(require("react"));
+var import_sharedStoryBook = require("../sharedStoryBook");
 const testFn = (0, import_test.fn)();
 const meta = {
   component: import_AssetList.AssetList,
@@ -52,10 +56,48 @@ const meta = {
     })),
     onClick: testFn,
     scrollToTop: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "AssetList displays a list of crypto assets. It supports virtual scrolling for performance with large datasets. Use it to represent selectable assets in lists."
+      }
+    }
   }
 };
 var AssetList_stories_default = meta;
 const Default = {};
+const WithFiatValue = {
+  args: {
+    assets: Array.from({ length: 50 }).map((_, i) => ({
+      name: `Bitcoin ${i}`,
+      ticker: "BTC",
+      id: "bitcoin",
+      rightElement: (0, import_sharedStoryBook.createRightElement)(false)
+    }))
+  }
+};
+const WithDiscreetModeEnabled = {
+  args: {
+    assets: Array.from({ length: 50 }).map((_, i) => ({
+      name: `Bitcoin ${i}`,
+      ticker: "BTC",
+      id: "bitcoin",
+      rightElement: (0, import_sharedStoryBook.createRightElement)(true)
+    }))
+  }
+};
+const WithLeftTagAndRightBalance = {
+  args: {
+    assets: Array.from({ length: 50 }).map((_, i) => ({
+      name: `Bitcoin ${i}`,
+      ticker: "BTC",
+      id: "bitcoin",
+      leftElement: import_sharedStoryBook.leftElement,
+      rightElement: (0, import_sharedStoryBook.createRightElement)(false)
+    }))
+  }
+};
 const TestAssetClick = {
   play: async ({ canvasElement }) => {
     const canvas = (0, import_test.within)(canvasElement);

package/lib/cjs/pre-ldls/components/AssetList/AssetList.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/AssetList/AssetList.stories.tsx"],
-  "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { AssetList } from \"./AssetList\";\nimport { expect, fn, userEvent, within } from \"@storybook/test\";\nimport React from \"react\";\n\nconst testFn = fn();\n\nconst meta: Meta<typeof AssetList> = {\n  component: AssetList,\n  decorators: [\n    Story => (\n      <div style={{ height: \"400px\" }}>\n        <Story />\n      </div>\n    ),\n  ],\n  title: \"PreLdls/Components/AssetList\",\n  tags: [\"autodocs\"],\n  args: {\n    assets: Array.from({ length: 50 }).map((_, i) => ({\n      name: `Bitcoin ${i}`,\n      ticker: \"BTC\",\n      id: \"bitcoin\",\n    })),\n    onClick: testFn,\n    scrollToTop: false,\n  },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof AssetList>;\n\nexport const Default: Story = {};\n\nexport const TestAssetClick: Story = {\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n    const input = canvas.getByText(\"Bitcoin 1\");\n    await userEvent.click(input);\n    await expect(testFn).toHaveBeenCalledWith({ name: \"Bitcoin 1\", ticker: \"BTC\", id: \"bitcoin\" });\n  },\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAA0B;AAC1B,kBAA8C;AAC9C,mBAAkB;AAElB,MAAM,aAAS,gBAAG;AAElB,MAAM,OAA+B;AAAA,EACnC,WAAW;AAAA,EACX,YAAY;AAAA,IACV,WACE,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,QAAQ,QAAQ,KAC5B,6BAAAA,QAAA,cAAC,WAAM,CACT;AAAA,EAEJ;AAAA,EACA,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM;AAAA,IACJ,QAAQ,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,OAAO;AAAA,MAChD,MAAM,WAAW,CAAC;AAAA,MAClB,QAAQ;AAAA,MACR,IAAI;AAAA,IACN,EAAE;AAAA,IACF,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AACF;AACA,IAAO,4BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,iBAAwB;AAAA,EACnC,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AACnC,UAAM,QAAQ,OAAO,UAAU,WAAW;AAC1C,UAAM,sBAAU,MAAM,KAAK;AAC3B,cAAM,oBAAO,MAAM,EAAE,qBAAqB,EAAE,MAAM,aAAa,QAAQ,OAAO,IAAI,UAAU,CAAC;AAAA,EAC/F;AACF;",
+  "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { AssetList } from \"./AssetList\";\nimport { expect, fn, userEvent, within } from \"@storybook/test\";\nimport React from \"react\";\nimport { createRightElement, leftElement } from \"../sharedStoryBook\";\n\nconst testFn = fn();\n\nconst meta: Meta<typeof AssetList> = {\n  component: AssetList,\n  decorators: [\n    Story => (\n      <div style={{ height: \"400px\" }}>\n        <Story />\n      </div>\n    ),\n  ],\n  title: \"PreLdls/Components/AssetList\",\n  tags: [\"autodocs\"],\n  args: {\n    assets: Array.from({ length: 50 }).map((_, i) => ({\n      name: `Bitcoin ${i}`,\n      ticker: \"BTC\",\n      id: \"bitcoin\",\n    })),\n    onClick: testFn,\n    scrollToTop: false,\n  },\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"AssetList displays a list of crypto assets. It supports virtual scrolling for performance with large datasets. Use it to represent selectable assets in lists.\",\n      },\n    },\n  },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof AssetList>;\n\nexport const Default: Story = {};\n\nexport const WithFiatValue: Story = {\n  args: {\n    assets: Array.from({ length: 50 }).map((_, i) => ({\n      name: `Bitcoin ${i}`,\n      ticker: \"BTC\",\n      id: \"bitcoin\",\n      rightElement: createRightElement(false),\n    })),\n  },\n};\n\nexport const WithDiscreetModeEnabled: Story = {\n  args: {\n    assets: Array.from({ length: 50 }).map((_, i) => ({\n      name: `Bitcoin ${i}`,\n      ticker: \"BTC\",\n      id: \"bitcoin\",\n      rightElement: createRightElement(true),\n    })),\n  },\n};\n\nexport const WithLeftTagAndRightBalance: Story = {\n  args: {\n    assets: Array.from({ length: 50 }).map((_, i) => ({\n      name: `Bitcoin ${i}`,\n      ticker: \"BTC\",\n      id: \"bitcoin\",\n      leftElement: leftElement,\n      rightElement: createRightElement(false),\n    })),\n  },\n};\n\nexport const TestAssetClick: Story = {\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n    const input = canvas.getByText(\"Bitcoin 1\");\n    await userEvent.click(input);\n    await expect(testFn).toHaveBeenCalledWith({ name: \"Bitcoin 1\", ticker: \"BTC\", id: \"bitcoin\" });\n  },\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAA0B;AAC1B,kBAA8C;AAC9C,mBAAkB;AAClB,6BAAgD;AAEhD,MAAM,aAAS,gBAAG;AAElB,MAAM,OAA+B;AAAA,EACnC,WAAW;AAAA,EACX,YAAY;AAAA,IACV,WACE,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,QAAQ,QAAQ,KAC5B,6BAAAA,QAAA,cAAC,WAAM,CACT;AAAA,EAEJ;AAAA,EACA,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM;AAAA,IACJ,QAAQ,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,OAAO;AAAA,MAChD,MAAM,WAAW,CAAC;AAAA,MAClB,QAAQ;AAAA,MACR,IAAI;AAAA,IACN,EAAE;AAAA,IACF,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WACE;AAAA,MACJ;AAAA,IACF;AAAA,EACF;AACF;AACA,IAAO,4BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,gBAAuB;AAAA,EAClC,MAAM;AAAA,IACJ,QAAQ,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,OAAO;AAAA,MAChD,MAAM,WAAW,CAAC;AAAA,MAClB,QAAQ;AAAA,MACR,IAAI;AAAA,MACJ,kBAAc,2CAAmB,KAAK;AAAA,IACxC,EAAE;AAAA,EACJ;AACF;AAEO,MAAM,0BAAiC;AAAA,EAC5C,MAAM;AAAA,IACJ,QAAQ,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,OAAO;AAAA,MAChD,MAAM,WAAW,CAAC;AAAA,MAClB,QAAQ;AAAA,MACR,IAAI;AAAA,MACJ,kBAAc,2CAAmB,IAAI;AAAA,IACvC,EAAE;AAAA,EACJ;AACF;AAEO,MAAM,6BAAoC;AAAA,EAC/C,MAAM;AAAA,IACJ,QAAQ,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,OAAO;AAAA,MAChD,MAAM,WAAW,CAAC;AAAA,MAClB,QAAQ;AAAA,MACR,IAAI;AAAA,MACJ,aAAa;AAAA,MACb,kBAAc,2CAAmB,KAAK;AAAA,IACxC,EAAE;AAAA,EACJ;AACF;AAEO,MAAM,iBAAwB;AAAA,EACnC,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AACnC,UAAM,QAAQ,OAAO,UAAU,WAAW;AAC1C,UAAM,sBAAU,MAAM,KAAK;AAC3B,cAAM,oBAAO,MAAM,EAAE,qBAAqB,EAAE,MAAM,aAAa,QAAQ,OAAO,IAAI,UAAU,CAAC;AAAA,EAC/F;AACF;",
   "names": ["React"]
 }

package/lib/cjs/pre-ldls/components/NetworkItem/NetworkItem.js

@@ -42,6 +42,8 @@ const Wrapper = import_styled_components.default.div`
   "margin-s",
   "radius-s",
   "colors-content-default-default",
+  "colors-content-subdued-default-default",
+  // used by leftElement child
   "colors-surface-transparent-hover",
   "colors-surface-transparent-pressed"
 )}
@@ -64,8 +66,21 @@ const InfoWrapper = import_styled_components.default.div`
   flex-direction: column;
   justify-content: center;
   margin-left: var(--margin-s);
+  flex: 1;
 `;
-const NetworkItem = ({ name, onClick, id, ticker }) => {
+const LeftElementWrapper = import_styled_components.default.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+const NetworkItem = ({
+  name,
+  onClick,
+  id,
+  ticker,
+  leftElement,
+  rightElement
+}) => {
   return /* @__PURE__ */ import_react.default.createElement(Wrapper, { onClick }, /* @__PURE__ */ import_react.default.createElement(import_CryptoIcon.CryptoIcon, { size: "48px", ledgerId: id, ticker }), /* @__PURE__ */ import_react.default.createElement(InfoWrapper, null, /* @__PURE__ */ import_react.default.createElement(
     import_components.Text,
     {
@@ -74,6 +89,6 @@ const NetworkItem = ({ name, onClick, id, ticker }) => {
       color: "var(--colors-content-default-default)"
     },
     name
-  )));
+  ), /* @__PURE__ */ import_react.default.createElement(LeftElementWrapper, null, leftElement)), rightElement);
 };
 //# sourceMappingURL=NetworkItem.js.map

package/lib/cjs/pre-ldls/components/NetworkItem/NetworkItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/NetworkItem/NetworkItem.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { Text } from \"../../../components\";\nimport { CryptoIcon } from \"../CryptoIcon/CryptoIcon\";\n\nexport type Network = { name: string; id: string; ticker: string };\n\ntype NetworkItemProps = Network & {\n  onClick: () => void;\n};\n\nconst Wrapper = styled.div`\n  ${withTokens(\n    \"spacing-xxs\",\n    \"margin-s\",\n    \"radius-s\",\n    \"colors-content-default-default\",\n    \"colors-surface-transparent-hover\",\n    \"colors-surface-transparent-pressed\",\n  )}\n  display: flex;\n  padding: var(--spacing-xxs);\n  cursor: pointer;\n  border-radius: var(--radius-s, 8px);\n  align-items: center;\n\n  :hover {\n    background-color: var(--colors-surface-transparent-hover);\n  }\n\n  :active {\n    background-color: var(--colors-surface-transparent-pressed);\n  }\n`;\n\nconst InfoWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin-left: var(--margin-s);\n`;\n\nexport const NetworkItem = ({ name, onClick, id, ticker }: NetworkItemProps) => {\n  return (\n    <Wrapper onClick={onClick}>\n      <CryptoIcon size=\"48px\" ledgerId={id} ticker={ticker} />\n      <InfoWrapper>\n        <Text\n          variant=\"largeLineHeight\"\n          fontWeight=\"semiBold\"\n          color=\"var(--colors-content-default-default)\"\n        >\n          {name}\n        </Text>\n      </InfoWrapper>\n    </Wrapper>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAAqB;AACrB,wBAA2B;AAQ3B,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBH,MAAM,cAAc,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOpB,MAAM,cAAc,CAAC,EAAE,MAAM,SAAS,IAAI,OAAO,MAAwB;AAC9E,SACE,6BAAAC,QAAA,cAAC,WAAQ,WACP,6BAAAA,QAAA,cAAC,gCAAW,MAAK,QAAO,UAAU,IAAI,QAAgB,GACtD,6BAAAA,QAAA,cAAC,mBACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA;AAAA,IAEL;AAAA,EACH,CACF,CACF;AAEJ;",
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { Text } from \"../../../components\";\nimport { CryptoIcon } from \"../CryptoIcon/CryptoIcon\";\n\nexport type Network = {\n  name: string;\n  id: string;\n  ticker: string;\n  leftElement?: React.ReactNode;\n  rightElement?: React.ReactNode;\n};\n\ntype NetworkItemProps = Network & {\n  onClick: () => void;\n};\n\nconst Wrapper = styled.div`\n  ${withTokens(\n    \"spacing-xxs\",\n    \"margin-s\",\n    \"radius-s\",\n    \"colors-content-default-default\",\n    \"colors-content-subdued-default-default\", // used by leftElement child\n    \"colors-surface-transparent-hover\",\n    \"colors-surface-transparent-pressed\",\n  )}\n  display: flex;\n  padding: var(--spacing-xxs);\n  cursor: pointer;\n  border-radius: var(--radius-s, 8px);\n  align-items: center;\n\n  :hover {\n    background-color: var(--colors-surface-transparent-hover);\n  }\n\n  :active {\n    background-color: var(--colors-surface-transparent-pressed);\n  }\n`;\n\nconst InfoWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin-left: var(--margin-s);\n  flex: 1;\n`;\n\nconst LeftElementWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 4px;\n`;\n\nexport const NetworkItem = ({\n  name,\n  onClick,\n  id,\n  ticker,\n  leftElement,\n  rightElement,\n}: NetworkItemProps) => {\n  return (\n    <Wrapper onClick={onClick}>\n      <CryptoIcon size=\"48px\" ledgerId={id} ticker={ticker} />\n      <InfoWrapper>\n        <Text\n          variant=\"largeLineHeight\"\n          fontWeight=\"semiBold\"\n          color=\"var(--colors-content-default-default)\"\n        >\n          {name}\n        </Text>\n        <LeftElementWrapper>{leftElement}</LeftElementWrapper>\n      </InfoWrapper>\n      {rightElement}\n    </Wrapper>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAAqB;AACrB,wBAA2B;AAc3B,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBH,MAAM,cAAc,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ3B,MAAM,qBAAqB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAM3B,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAwB;AACtB,SACE,6BAAAC,QAAA,cAAC,WAAQ,WACP,6BAAAA,QAAA,cAAC,gCAAW,MAAK,QAAO,UAAU,IAAI,QAAgB,GACtD,6BAAAA,QAAA,cAAC,mBACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA;AAAA,IAEL;AAAA,EACH,GACA,6BAAAA,QAAA,cAAC,0BAAoB,WAAY,CACnC,GACC,YACH;AAEJ;",
   "names": ["styled", "React"]
 }

package/lib/cjs/pre-ldls/components/NetworkItem/NetworkItem.stories.js

@@ -19,17 +19,24 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var NetworkItem_stories_exports = {};
 __export(NetworkItem_stories_exports, {
   Default: () => Default,
+  NetworkItemWithLeftElement: () => NetworkItemWithLeftElement,
+  NetworkItemWithRightElement: () => NetworkItemWithRightElement,
   TestNetworkItem: () => TestNetworkItem,
   default: () => NetworkItem_stories_default
 });
 module.exports = __toCommonJS(NetworkItem_stories_exports);
 var import_NetworkItem = require("./NetworkItem");
 var import_test = require("@storybook/test");
+var import_sharedStoryBook = require("../sharedStoryBook");
 const meta = {
   component: import_NetworkItem.NetworkItem,
   title: "PreLdls/Components/NetworkItem",
   tags: ["autodocs"],
-  args: { name: "Bitcoin", id: "bitcoin", ticker: "btc" }
+  args: {
+    name: "Bitcoin",
+    id: "bitcoin",
+    ticker: "btc"
+  }
 };
 var NetworkItem_stories_default = meta;
 const Default = {};
@@ -40,4 +47,20 @@ const TestNetworkItem = {
     await (0, import_test.expect)(name).toBeInTheDocument();
   }
 };
+const NetworkItemWithLeftElement = {
+  args: {
+    name: "Bitcoin",
+    id: "bitcoin",
+    ticker: "btc",
+    leftElement: import_sharedStoryBook.leftElement
+  }
+};
+const NetworkItemWithRightElement = {
+  args: {
+    name: "Bitcoin",
+    id: "bitcoin",
+    ticker: "btc",
+    rightElement: (0, import_sharedStoryBook.createRightElement)(true)
+  }
+};
 //# sourceMappingURL=NetworkItem.stories.js.map

package/lib/cjs/pre-ldls/components/NetworkItem/NetworkItem.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/NetworkItem/NetworkItem.stories.tsx"],
-  "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { NetworkItem } from \"./NetworkItem\";\nimport { expect, within } from \"@storybook/test\";\n\nconst meta: Meta<typeof NetworkItem> = {\n  component: NetworkItem,\n  title: \"PreLdls/Components/NetworkItem\",\n  tags: [\"autodocs\"],\n  args: { name: \"Bitcoin\", id: \"bitcoin\", ticker: \"btc\" },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof NetworkItem>;\n\nexport const Default: Story = {};\n\nexport const TestNetworkItem: Story = {\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n\n    const name = canvas.getByText(\"Bitcoin\");\n\n    await expect(name).toBeInTheDocument();\n  },\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,yBAA4B;AAC5B,kBAA+B;AAE/B,MAAM,OAAiC;AAAA,EACrC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM,EAAE,MAAM,WAAW,IAAI,WAAW,QAAQ,MAAM;AACxD;AACA,IAAO,8BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,kBAAyB;AAAA,EACpC,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AAEnC,UAAM,OAAO,OAAO,UAAU,SAAS;AAEvC,cAAM,oBAAO,IAAI,EAAE,kBAAkB;AAAA,EACvC;AACF;",
+  "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { NetworkItem } from \"./NetworkItem\";\nimport { expect, within } from \"@storybook/test\";\nimport { createRightElement, leftElement } from \"../sharedStoryBook\";\n\nconst meta: Meta<typeof NetworkItem> = {\n  component: NetworkItem,\n  title: \"PreLdls/Components/NetworkItem\",\n  tags: [\"autodocs\"],\n  args: {\n    name: \"Bitcoin\",\n    id: \"bitcoin\",\n    ticker: \"btc\",\n  },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof NetworkItem>;\n\nexport const Default: Story = {};\n\nexport const TestNetworkItem: Story = {\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n\n    const name = canvas.getByText(\"Bitcoin\");\n\n    await expect(name).toBeInTheDocument();\n  },\n};\n\nexport const NetworkItemWithLeftElement: Story = {\n  args: {\n    name: \"Bitcoin\",\n    id: \"bitcoin\",\n    ticker: \"btc\",\n    leftElement,\n  },\n};\n\nexport const NetworkItemWithRightElement: Story = {\n  args: {\n    name: \"Bitcoin\",\n    id: \"bitcoin\",\n    ticker: \"btc\",\n    rightElement: createRightElement(true),\n  },\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,yBAA4B;AAC5B,kBAA+B;AAC/B,6BAAgD;AAEhD,MAAM,OAAiC;AAAA,EACrC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,QAAQ;AAAA,EACV;AACF;AACA,IAAO,8BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,kBAAyB;AAAA,EACpC,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AAEnC,UAAM,OAAO,OAAO,UAAU,SAAS;AAEvC,cAAM,oBAAO,IAAI,EAAE,kBAAkB;AAAA,EACvC;AACF;AAEO,MAAM,6BAAoC;AAAA,EAC/C,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR;AAAA,EACF;AACF;AAEO,MAAM,8BAAqC;AAAA,EAChD,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,kBAAc,2CAAmB,IAAI;AAAA,EACvC;AACF;",
   "names": []
 }

package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.js

@@ -48,7 +48,8 @@ const VirtualList = ({
   items,
   onVisibleItemsScrollEnd,
   renderItem,
-  scrollToTop = false
+  scrollToTop = false,
+  bottomComponent
 }) => {
   const parentRef = (0, import_react.useRef)(null);
   const scrollToFn = (0, import_react.useCallback)(
@@ -130,7 +131,19 @@ const VirtualList = ({
           }
         },
         renderItem(items[virtualRow.index])
-      ))
+      )),
+      bottomComponent && /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: `${rowVirtualizer.getTotalSize()}px`,
+            left: 0,
+            width: "100%"
+          }
+        },
+        bottomComponent
+      )
     ),
     isLoading && (showCustomLoadingComponent ? LoadingComponent : /* @__PURE__ */ import_react.default.createElement(DefaultLoadingComponent, null))
   );

package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],
-  "sourcesContent": ["import React, { useEffect, useRef, useCallback } from \"react\";\nimport { useVirtualizer } from \"@tanstack/react-virtual\";\nimport { Flex, InfiniteLoader } from \"../../../components\";\n\ninterface VirtualItem {\n  key: string | number | bigint;\n  index: number;\n  start: number;\n  end: number;\n  size: number;\n}\n\n/**\n * Props for the VirtualList component, which efficiently renders large lists\n * by virtualizing DOM nodes to improve performance.\n */\ntype VirtualListProps<T> = {\n  /**\n   * Height of each item in the list.\n   * This is used to calculate the total height of the list and the position of each item.\n   */\n  itemHeight: number;\n  /**\n   * Number of extra items to render outside the visible viewport for smoother scrolling.\n   * Defaults to 5.\n   */\n  overscan?: number;\n  /**\n   * React component or node to display when the list is loading additional items.\n   * If not provided, a default loading spinner will be used.\n   */\n  LoadingComponent?: React.ReactNode;\n  /**\n   * Indicates whether new items are currently being loaded.\n   */\n  isLoading?: boolean;\n  /**\n   * Indicates if there are more items to load.\n   */\n  hasNextPage?: boolean;\n  /**\n   * Number of items to check before the end of the list to trigger loading more items.\n   * Defaults to 5.\n   */\n  threshold?: number;\n  /**\n   * Callback function to be called when the user scrolls to the end of the visible items.\n   * This can be used to load more items when the user reaches the end of the list.\n   */\n  onVisibleItemsScrollEnd?: () => void;\n  /**\n   * Function to render each item in the list.\n   * Receives a single value from the items array as an argument and should return a React node.\n   */\n  renderItem: (item: T) => React.ReactNode;\n  /**\n   * The array of items which will be rendered\n   */\n  items: T[];\n  /**\n   * When set to true, the list will scroll to the top\n   */\n  scrollToTop?: boolean;\n};\n\nconst DefaultLoadingComponent = () => (\n  <Flex justifyContent=\"center\" alignItems=\"center\" height=\"76px\">\n    <InfiniteLoader />\n  </Flex>\n);\n\nfunction easeInOutCubic(t: number) {\n  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;\n}\n\nexport const VirtualList = <T,>({\n  itemHeight,\n  overscan = 5,\n  LoadingComponent,\n  isLoading,\n  hasNextPage = false,\n  threshold = 5,\n  items,\n  onVisibleItemsScrollEnd,\n  renderItem,\n  scrollToTop = false,\n}: VirtualListProps<T>) => {\n  const parentRef = useRef<HTMLDivElement>(null);\n\n  const scrollToFn = useCallback(\n    (\n      offset: number,\n      options: { adjustments?: number; behavior?: \"auto\" | \"smooth\" },\n      instance: { scrollElement: HTMLElement | null },\n    ) => {\n      const element = instance.scrollElement;\n      if (!element) return;\n\n      const duration = options.behavior === \"smooth\" ? 100 : 0;\n\n      if (duration === 0) {\n        element.scrollTop = offset;\n        return;\n      }\n\n      const startTime = performance.now();\n      const startTop = element.scrollTop;\n      const distanceToScroll = offset - startTop;\n\n      const scrollStep = (currentTime: number) => {\n        const elapsed = currentTime - startTime;\n        const progress = Math.min(elapsed / duration, 1);\n\n        const easedProgress = easeInOutCubic(progress);\n\n        element.scrollTop = startTop + distanceToScroll * easedProgress;\n\n        if (progress < 1) {\n          requestAnimationFrame(scrollStep);\n        }\n      };\n\n      requestAnimationFrame(scrollStep);\n    },\n    [],\n  );\n\n  const rowVirtualizer = useVirtualizer({\n    count: hasNextPage ? items.length + 1 : items.length,\n    overscan,\n    getScrollElement: () => parentRef.current,\n    estimateSize: () => itemHeight,\n    scrollToFn,\n  });\n\n  const virtualItems = rowVirtualizer.getVirtualItems();\n\n  useEffect(() => {\n    if (scrollToTop && parentRef.current) {\n      scrollToFn(0, { behavior: \"smooth\" }, { scrollElement: parentRef.current });\n    }\n  }, [scrollToTop, scrollToFn]);\n\n  useEffect(() => {\n    if (!virtualItems.length) return;\n    const lastItem = virtualItems[virtualItems.length - 1];\n\n    if (\n      lastItem.index >= virtualItems.length - 1 - threshold &&\n      hasNextPage &&\n      !isLoading &&\n      onVisibleItemsScrollEnd\n    ) {\n      onVisibleItemsScrollEnd();\n    }\n  }, [hasNextPage, onVisibleItemsScrollEnd, isLoading, threshold, virtualItems]);\n\n  const showCustomLoadingComponent = !!LoadingComponent;\n\n  return (\n    <div\n      ref={parentRef}\n      style={{ width: \"100%\", height: \"100%\", overflow: \"auto\", scrollbarWidth: \"none\" }}\n    >\n      <div\n        style={{\n          height: `${rowVirtualizer.getTotalSize()}px`,\n          width: \"100%\",\n          position: \"relative\",\n        }}\n      >\n        {rowVirtualizer.getVirtualItems().map((virtualRow: VirtualItem) => (\n          <div\n            key={virtualRow.index}\n            data-index={virtualRow.index}\n            ref={rowVirtualizer.measureElement}\n            style={{\n              position: \"absolute\",\n              top: 0,\n              left: 0,\n              transform: `translateY(${virtualRow.start}px)`,\n              height: `${itemHeight}px`,\n              width: \"100%\",\n            }}\n          >\n            {renderItem(items[virtualRow.index])}\n          </div>\n        ))}\n      </div>\n      {isLoading && (showCustomLoadingComponent ? LoadingComponent : <DefaultLoadingComponent />)}\n    </div>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useEffect, useRef, useCallback } from \"react\";\nimport { useVirtualizer } from \"@tanstack/react-virtual\";\nimport { Flex, InfiniteLoader } from \"../../../components\";\n\ninterface VirtualItem {\n  key: string | number | bigint;\n  index: number;\n  start: number;\n  end: number;\n  size: number;\n}\n\n/**\n * Props for the VirtualList component, which efficiently renders large lists\n * by virtualizing DOM nodes to improve performance.\n */\ntype VirtualListProps<T> = {\n  /**\n   * Height of each item in the list.\n   * This is used to calculate the total height of the list and the position of each item.\n   */\n  itemHeight: number;\n  /**\n   * Number of extra items to render outside the visible viewport for smoother scrolling.\n   * Defaults to 5.\n   */\n  overscan?: number;\n  /**\n   * React component or node to display when the list is loading additional items.\n   * If not provided, a default loading spinner will be used.\n   */\n  LoadingComponent?: React.ReactNode;\n  /**\n   * Indicates whether new items are currently being loaded.\n   */\n  isLoading?: boolean;\n  /**\n   * Indicates if there are more items to load.\n   */\n  hasNextPage?: boolean;\n  /**\n   * Number of items to check before the end of the list to trigger loading more items.\n   * Defaults to 5.\n   */\n  threshold?: number;\n  /**\n   * Callback function to be called when the user scrolls to the end of the visible items.\n   * This can be used to load more items when the user reaches the end of the list.\n   */\n  onVisibleItemsScrollEnd?: () => void;\n  /**\n   * Function to render each item in the list.\n   * Receives a single value from the items array as an argument and should return a React node.\n   */\n  renderItem: (item: T) => React.ReactNode;\n  /**\n   * The array of items which will be rendered\n   */\n  items: T[];\n  /**\n   * When set to true, the list will scroll to the top\n   */\n  scrollToTop?: boolean;\n  /**\n   * React component or node to display at the bottom of the list, after all items.\n   */\n  bottomComponent?: React.ReactNode;\n};\n\nconst DefaultLoadingComponent = () => (\n  <Flex justifyContent=\"center\" alignItems=\"center\" height=\"76px\">\n    <InfiniteLoader />\n  </Flex>\n);\n\nfunction easeInOutCubic(t: number) {\n  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;\n}\n\nexport const VirtualList = <T,>({\n  itemHeight,\n  overscan = 5,\n  LoadingComponent,\n  isLoading,\n  hasNextPage = false,\n  threshold = 5,\n  items,\n  onVisibleItemsScrollEnd,\n  renderItem,\n  scrollToTop = false,\n  bottomComponent,\n}: VirtualListProps<T>) => {\n  const parentRef = useRef<HTMLDivElement>(null);\n\n  const scrollToFn = useCallback(\n    (\n      offset: number,\n      options: { adjustments?: number; behavior?: \"auto\" | \"smooth\" },\n      instance: { scrollElement: HTMLElement | null },\n    ) => {\n      const element = instance.scrollElement;\n      if (!element) return;\n\n      const duration = options.behavior === \"smooth\" ? 100 : 0;\n\n      if (duration === 0) {\n        element.scrollTop = offset;\n        return;\n      }\n\n      const startTime = performance.now();\n      const startTop = element.scrollTop;\n      const distanceToScroll = offset - startTop;\n\n      const scrollStep = (currentTime: number) => {\n        const elapsed = currentTime - startTime;\n        const progress = Math.min(elapsed / duration, 1);\n\n        const easedProgress = easeInOutCubic(progress);\n\n        element.scrollTop = startTop + distanceToScroll * easedProgress;\n\n        if (progress < 1) {\n          requestAnimationFrame(scrollStep);\n        }\n      };\n\n      requestAnimationFrame(scrollStep);\n    },\n    [],\n  );\n\n  const rowVirtualizer = useVirtualizer({\n    count: hasNextPage ? items.length + 1 : items.length,\n    overscan,\n    getScrollElement: () => parentRef.current,\n    estimateSize: () => itemHeight,\n    scrollToFn,\n  });\n\n  const virtualItems = rowVirtualizer.getVirtualItems();\n\n  useEffect(() => {\n    if (scrollToTop && parentRef.current) {\n      scrollToFn(0, { behavior: \"smooth\" }, { scrollElement: parentRef.current });\n    }\n  }, [scrollToTop, scrollToFn]);\n\n  useEffect(() => {\n    if (!virtualItems.length) return;\n    const lastItem = virtualItems[virtualItems.length - 1];\n\n    if (\n      lastItem.index >= virtualItems.length - 1 - threshold &&\n      hasNextPage &&\n      !isLoading &&\n      onVisibleItemsScrollEnd\n    ) {\n      onVisibleItemsScrollEnd();\n    }\n  }, [hasNextPage, onVisibleItemsScrollEnd, isLoading, threshold, virtualItems]);\n\n  const showCustomLoadingComponent = !!LoadingComponent;\n\n  return (\n    <div\n      ref={parentRef}\n      style={{ width: \"100%\", height: \"100%\", overflow: \"auto\", scrollbarWidth: \"none\" }}\n    >\n      <div\n        style={{\n          height: `${rowVirtualizer.getTotalSize()}px`,\n          width: \"100%\",\n          position: \"relative\",\n        }}\n      >\n        {rowVirtualizer.getVirtualItems().map((virtualRow: VirtualItem) => (\n          <div\n            key={virtualRow.index}\n            data-index={virtualRow.index}\n            ref={rowVirtualizer.measureElement}\n            style={{\n              position: \"absolute\",\n              top: 0,\n              left: 0,\n              transform: `translateY(${virtualRow.start}px)`,\n              height: `${itemHeight}px`,\n              width: \"100%\",\n            }}\n          >\n            {renderItem(items[virtualRow.index])}\n          </div>\n        ))}\n        {bottomComponent && (\n          <div\n            style={{\n              position: \"absolute\",\n              top: `${rowVirtualizer.getTotalSize()}px`,\n              left: 0,\n              width: \"100%\",\n            }}\n          >\n            {bottomComponent}\n          </div>\n        )}\n      </div>\n      {isLoading && (showCustomLoadingComponent ? LoadingComponent : <DefaultLoadingComponent />)}\n    </div>\n  );\n};\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.stories.js

@@ -30,6 +30,7 @@ var VirtualList_stories_exports = {};
 __export(VirtualList_stories_exports, {
   Default: () => Default,
   TestVirtualList: () => TestVirtualList,
+  WithCustomLastRow: () => WithCustomLastRow,
   WithPagination: () => WithPagination,
   default: () => VirtualList_stories_default
 });
@@ -117,6 +118,20 @@ const Default = {
     renderItem: ({ i }) => /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 50, backgroundColor: "lightblue", border: "1px solid black" } }, "Item ", i)
   }
 };
+const WithCustomLastRow = {
+  render: (args) => {
+    const items2 = Array.from({ length: 5 }, (_, i) => i + 1);
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_VirtualList.VirtualList,
+      {
+        ...args,
+        items: items2,
+        renderItem: (item) => /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 50, backgroundColor: "lightgreen", border: "1px solid black" } }, "Item ", item),
+        bottomComponent: /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 50, backgroundColor: "lightcoral" } }, "End of List")
+      }
+    );
+  }
+};
 const WithPagination = {
   render: (args) => {
     const [items2, setItems] = (0, import_react.useState)(Array.from({ length: 50 }, (_, i) => i));

package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/VirtualList/VirtualList.stories.tsx"],
-  "sourcesContent": ["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { VirtualList } from \"./VirtualList\";\nimport { action } from \"@storybook/addon-actions\";\nimport { expect, userEvent, waitFor, within } from \"@storybook/test\";\n\nconst items = Array.from({ length: 50 }, (_, i) => ({ i }));\n\nconst meta: Meta<typeof VirtualList<{ i: number }>> = {\n  component: VirtualList,\n  decorators: [\n    Story => (\n      <div style={{ height: \"400px\" }}>\n        <Story />\n      </div>\n    ),\n  ],\n  title: \"PreLdls/Components/VirtualList\",\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"fullscreen\",\n    docs: {\n      description: {\n        component:\n          \"A virtualized list component that renders only the visible items in a scrollable container using the `useVirtualizer` hook from `@tanstack/react-virtual`. It supports pagination and custom item rendering.\",\n      },\n    },\n  },\n  argTypes: {\n    itemHeight: {\n      description: \"Height of each item in the list.\",\n    },\n    overscan: {\n      description:\n        \"Number of extra items to render outside the visible viewport for smoother scrolling.\",\n      table: {\n        defaultValue: {\n          summary: \"5\",\n        },\n      },\n    },\n    LoadingComponent: {\n      description:\n        \"React component or node to display when the list is loading additional items. If not provided, a default loading spinner will be used.\",\n    },\n    isLoading: {\n      description: \"Indicates whether new items are currently being loaded.\",\n    },\n    hasNextPage: {\n      description:\n        \"Indicates if there are more items to load. If true, the list will trigger loading more items when scrolled to the end.\",\n      defaultValue: {\n        summary: \"false\",\n      },\n    },\n    threshold: {\n      description:\n        \"Number of items to check before the end of the list to trigger loading more items.\",\n      defaultValue: {\n        summary: \"5\",\n      },\n    },\n    onVisibleItemsScrollEnd: {\n      description:\n        \"Callback function to be called when the user scrolls to the end of the visible items. This can be used to load more items when the user reaches the end of the list.\",\n    },\n    renderItem: {\n      description:\n        \"Function to render each item in the list. Receives the index of the item as an argument and should return a React node.\",\n    },\n    scrollToTop: {\n      description:\n        \"When set to true, the list will scroll to the top. This is useful when the items change and you want to reset the scroll position.\",\n    },\n  },\n  args: {\n    itemHeight: 64,\n    LoadingComponent: undefined,\n    isLoading: false,\n    overscan: 5,\n    hasNextPage: false,\n    threshold: 5,\n    onVisibleItemsScrollEnd: () => {},\n    items,\n    renderItem: ({ i }: { i: number }) => <h1 tabIndex={i}>Item #{i}</h1>,\n    scrollToTop: false,\n  },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof VirtualList<{ i: number }>>;\n\nexport const Default: Story = {\n  args: {\n    itemHeight: 50,\n    overscan: 5,\n    items,\n    renderItem: ({ i }: { i: number }) => (\n      <div style={{ height: 50, backgroundColor: \"lightblue\", border: \"1px solid black\" }}>\n        Item {i}\n      </div>\n    ),\n  },\n};\n\nexport const WithPagination: Story = {\n  render: args => {\n    const [items, setItems] = useState(Array.from({ length: 50 }, (_, i) => i));\n    const [isFetching, setIsFetching] = useState(false);\n\n    const handleFetchNextPage = async () => {\n      action(\"fetchNextPage\")();\n      if (isFetching) return;\n      setIsFetching(true);\n      await new Promise(resolve => setTimeout(resolve, 1000));\n      setItems(prev => [...prev, ...Array.from({ length: 50 }, (_, i) => prev.length + i)]);\n      setIsFetching(false);\n    };\n\n    return (\n      <VirtualList\n        {...args}\n        isLoading={isFetching}\n        onVisibleItemsScrollEnd={handleFetchNextPage}\n        hasNextPage={true}\n        items={items}\n        renderItem={item => (\n          <div style={{ height: 50, backgroundColor: \"lightgreen\", border: \"1px solid black\" }}>\n            Item {item}\n          </div>\n        )}\n      />\n    );\n  },\n  args: {\n    itemHeight: 50,\n    overscan: 5,\n    hasNextPage: true,\n    isLoading: false,\n  },\n};\n\nexport const TestVirtualList: Story = {\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n\n    const visibleItems = canvas.getAllByText(/Item #/i);\n    const firstVisibleItem = visibleItems[0];\n    const lastVisibleItem = visibleItems[visibleItems.length - 1];\n\n    // need to add 5 due to the overscan set to 5 (it renders 5 items before and after the visible items)\n    await expect(visibleItems.length).toBeLessThanOrEqual(12);\n\n    await expect(firstVisibleItem).toBeInTheDocument();\n\n    await userEvent.pointer([\n      { keys: \"[TouchA>]\", target: lastVisibleItem },\n      { target: firstVisibleItem },\n      { keys: \"[/TouchA]\" },\n    ]);\n\n    await waitFor(() => expect(firstVisibleItem).not.toBeInTheDocument());\n  },\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { VirtualList } from \"./VirtualList\";\nimport { action } from \"@storybook/addon-actions\";\nimport { expect, userEvent, waitFor, within } from \"@storybook/test\";\n\nconst items = Array.from({ length: 50 }, (_, i) => ({ i }));\n\nconst meta: Meta<typeof VirtualList<{ i: number }>> = {\n  component: VirtualList,\n  decorators: [\n    Story => (\n      <div style={{ height: \"400px\" }}>\n        <Story />\n      </div>\n    ),\n  ],\n  title: \"PreLdls/Components/VirtualList\",\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"fullscreen\",\n    docs: {\n      description: {\n        component:\n          \"A virtualized list component that renders only the visible items in a scrollable container using the `useVirtualizer` hook from `@tanstack/react-virtual`. It supports pagination and custom item rendering.\",\n      },\n    },\n  },\n  argTypes: {\n    itemHeight: {\n      description: \"Height of each item in the list.\",\n    },\n    overscan: {\n      description:\n        \"Number of extra items to render outside the visible viewport for smoother scrolling.\",\n      table: {\n        defaultValue: {\n          summary: \"5\",\n        },\n      },\n    },\n    LoadingComponent: {\n      description:\n        \"React component or node to display when the list is loading additional items. If not provided, a default loading spinner will be used.\",\n    },\n    isLoading: {\n      description: \"Indicates whether new items are currently being loaded.\",\n    },\n    hasNextPage: {\n      description:\n        \"Indicates if there are more items to load. If true, the list will trigger loading more items when scrolled to the end.\",\n      defaultValue: {\n        summary: \"false\",\n      },\n    },\n    threshold: {\n      description:\n        \"Number of items to check before the end of the list to trigger loading more items.\",\n      defaultValue: {\n        summary: \"5\",\n      },\n    },\n    onVisibleItemsScrollEnd: {\n      description:\n        \"Callback function to be called when the user scrolls to the end of the visible items. This can be used to load more items when the user reaches the end of the list.\",\n    },\n    renderItem: {\n      description:\n        \"Function to render each item in the list. Receives the index of the item as an argument and should return a React node.\",\n    },\n    scrollToTop: {\n      description:\n        \"When set to true, the list will scroll to the top. This is useful when the items change and you want to reset the scroll position.\",\n    },\n  },\n  args: {\n    itemHeight: 64,\n    LoadingComponent: undefined,\n    isLoading: false,\n    overscan: 5,\n    hasNextPage: false,\n    threshold: 5,\n    onVisibleItemsScrollEnd: () => {},\n    items,\n    renderItem: ({ i }: { i: number }) => <h1 tabIndex={i}>Item #{i}</h1>,\n    scrollToTop: false,\n  },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof VirtualList<{ i: number }>>;\n\nexport const Default: Story = {\n  args: {\n    itemHeight: 50,\n    overscan: 5,\n    items,\n    renderItem: ({ i }: { i: number }) => (\n      <div style={{ height: 50, backgroundColor: \"lightblue\", border: \"1px solid black\" }}>\n        Item {i}\n      </div>\n    ),\n  },\n};\n\nexport const WithCustomLastRow: Story = {\n  render: args => {\n    const items = Array.from({ length: 5 }, (_, i) => i + 1);\n\n    return (\n      <VirtualList\n        {...args}\n        items={items}\n        renderItem={item => (\n          <div style={{ height: 50, backgroundColor: \"lightgreen\", border: \"1px solid black\" }}>\n            Item {item}\n          </div>\n        )}\n        bottomComponent={\n          <div style={{ height: 50, backgroundColor: \"lightcoral\" }}>End of List</div>\n        }\n      />\n    );\n  },\n};\nexport const WithPagination: Story = {\n  render: args => {\n    const [items, setItems] = useState(Array.from({ length: 50 }, (_, i) => i));\n    const [isFetching, setIsFetching] = useState(false);\n\n    const handleFetchNextPage = async () => {\n      action(\"fetchNextPage\")();\n      if (isFetching) return;\n      setIsFetching(true);\n      await new Promise(resolve => setTimeout(resolve, 1000));\n      setItems(prev => [...prev, ...Array.from({ length: 50 }, (_, i) => prev.length + i)]);\n      setIsFetching(false);\n    };\n\n    return (\n      <VirtualList\n        {...args}\n        isLoading={isFetching}\n        onVisibleItemsScrollEnd={handleFetchNextPage}\n        hasNextPage={true}\n        items={items}\n        renderItem={item => (\n          <div style={{ height: 50, backgroundColor: \"lightgreen\", border: \"1px solid black\" }}>\n            Item {item}\n          </div>\n        )}\n      />\n    );\n  },\n  args: {\n    itemHeight: 50,\n    overscan: 5,\n    hasNextPage: true,\n    isLoading: false,\n  },\n};\n\nexport const TestVirtualList: Story = {\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n\n    const visibleItems = canvas.getAllByText(/Item #/i);\n    const firstVisibleItem = visibleItems[0];\n    const lastVisibleItem = visibleItems[visibleItems.length - 1];\n\n    // need to add 5 due to the overscan set to 5 (it renders 5 items before and after the visible items)\n    await expect(visibleItems.length).toBeLessThanOrEqual(12);\n\n    await expect(firstVisibleItem).toBeInTheDocument();\n\n    await userEvent.pointer([\n      { keys: \"[TouchA>]\", target: lastVisibleItem },\n      { target: firstVisibleItem },\n      { keys: \"[/TouchA]\" },\n    ]);\n\n    await waitFor(() => expect(firstVisibleItem).not.toBeInTheDocument());\n  },\n};\n"],
+  "mappings": "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",
   "names": ["React", "items"]
 }

package/lib/cjs/pre-ldls/components/sharedStoryBook.js

@@ -0,0 +1,67 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var sharedStoryBook_exports = {};
+__export(sharedStoryBook_exports, {
+  BalanceContainer: () => BalanceContainer,
+  createRightElement: () => createRightElement,
+  leftElement: () => leftElement
+});
+module.exports = __toCommonJS(sharedStoryBook_exports);
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_components = require("../../components");
+var import_Tag = require("./Tag/Tag");
+const BalanceContainer = import_styled_components.default.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+`;
+const leftElement = /* @__PURE__ */ import_react.default.createElement(import_Tag.Tag, null, "1.34% APY");
+const createRightElement = (discreetMode) => /* @__PURE__ */ import_react.default.createElement(BalanceContainer, null, /* @__PURE__ */ import_react.default.createElement(
+  import_components.Text,
+  {
+    fontSize: "14px",
+    variant: "largeLineHeight",
+    fontWeight: "semiBold",
+    color: "var(--colors-content-default-default)"
+  },
+  discreetMode ? "$***" : "$5,969.83"
+), /* @__PURE__ */ import_react.default.createElement(
+  import_components.Text,
+  {
+    fontSize: "12px",
+    lineHeight: "16px",
+    variant: "bodyLineHeight",
+    fontWeight: "medium",
+    color: "var(--colors-content-subdued-default-default)"
+  },
+  discreetMode ? "*** BTC" : "0.118 BTC"
+));
+//# sourceMappingURL=sharedStoryBook.js.map

package/lib/cjs/pre-ldls/components/sharedStoryBook.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/pre-ldls/components/sharedStoryBook.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { Text } from \"../../components\";\nimport { Tag } from \"./Tag/Tag\";\n\nexport const BalanceContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 4px;\n`;\n\nexport const leftElement = <Tag>{\"1.34% APY\"}</Tag>;\n\nexport const createRightElement = (discreetMode: boolean) => (\n  <BalanceContainer>\n    <Text\n      fontSize=\"14px\"\n      variant=\"largeLineHeight\"\n      fontWeight=\"semiBold\"\n      color=\"var(--colors-content-default-default)\"\n    >\n      {discreetMode ? \"$***\" : \"$5,969.83\"}\n    </Text>\n    <Text\n      fontSize=\"12px\"\n      lineHeight=\"16px\"\n      variant=\"bodyLineHeight\"\n      fontWeight=\"medium\"\n      color=\"var(--colors-content-subdued-default-default)\"\n    >\n      {discreetMode ? \"*** BTC\" : \"0.118 BTC\"}\n    </Text>\n  </BalanceContainer>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,wBAAqB;AACrB,iBAAoB;AAEb,MAAM,mBAAmB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhC,MAAM,cAAc,6BAAAC,QAAA,cAAC,sBAAK,WAAY;AAEtC,MAAM,qBAAqB,CAAC,iBACjC,6BAAAA,QAAA,cAAC,wBACC,6BAAAA,QAAA;AAAA,EAAC;AAAA;AAAA,IACC,UAAS;AAAA,IACT,SAAQ;AAAA,IACR,YAAW;AAAA,IACX,OAAM;AAAA;AAAA,EAEL,eAAe,SAAS;AAC3B,GACA,6BAAAA,QAAA;AAAA,EAAC;AAAA;AAAA,IACC,UAAS;AAAA,IACT,YAAW;AAAA,IACX,SAAQ;AAAA,IACR,YAAW;AAAA,IACX,OAAM;AAAA;AAAA,EAEL,eAAe,YAAY;AAC9B,CACF;",
+  "names": ["styled", "React"]
+}

package/lib/pre-ldls/components/AccountList/AccountList.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { Account } from "../AccountItem/AccountItem";
-export declare const AccountList: ({ accounts, onClick, }: {
+export declare const AccountList: ({ accounts, onClick, bottomComponent, }: {
     accounts: Account[];
     onClick: (networkId: string) => void;
+    bottomComponent?: React.ReactNode;
 }) => React.JSX.Element;
 //# sourceMappingURL=AccountList.d.ts.map

package/lib/pre-ldls/components/AccountList/AccountList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccountList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountList/AccountList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAe,MAAM,4BAA4B,CAAC;AAGlE,eAAO,MAAM,WAAW;cAIZ,OAAO,EAAE;yBACE,MAAM,KAAK,IAAI;uBAQrC,CAAC"}
+{"version":3,"file":"AccountList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountList/AccountList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAe,MAAM,4BAA4B,CAAC;AAGlE,eAAO,MAAM,WAAW;cAKZ,OAAO,EAAE;yBACE,MAAM,KAAK,IAAI;sBAClB,MAAM,SAAS;uBAelC,CAAC"}

package/lib/pre-ldls/components/AccountList/AccountList.js

@@ -1,8 +1,8 @@
 import React, { useCallback } from "react";
 import { AccountItem } from "../AccountItem/AccountItem";
 import { VirtualList } from "../VirtualList/VirtualList";
-export const AccountList = ({ accounts, onClick, }) => {
+export const AccountList = ({ accounts, onClick, bottomComponent, }) => {
     const renderAccountItem = useCallback((account) => React.createElement(AccountItem, { onClick: () => onClick(account.id), account: account }), [onClick]);
-    return React.createElement(VirtualList, { items: accounts, itemHeight: 70, renderItem: renderAccountItem });
+    return (React.createElement(VirtualList, { items: accounts, itemHeight: 70, bottomComponent: bottomComponent, renderItem: renderAccountItem }));
 };
 //# sourceMappingURL=AccountList.js.map

package/lib/pre-ldls/components/AccountList/AccountList.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccountList.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountList/AccountList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAW,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEzD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,OAAO,GAIR,EAAE,EAAE;IACH,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,OAAgB,EAAE,EAAE,CAAC,oBAAC,WAAW,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,GAAI,EAC3F,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,OAAO,oBAAC,WAAW,IAAC,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,iBAAiB,GAAI,CAAC;AACzF,CAAC,CAAC"}
+{"version":3,"file":"AccountList.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountList/AccountList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAW,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEzD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,OAAO,EACP,eAAe,GAKhB,EAAE,EAAE;IACH,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,OAAgB,EAAE,EAAE,CAAC,oBAAC,WAAW,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,GAAI,EAC3F,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,WAAW,IACV,KAAK,EAAE,QAAQ,EACf,UAAU,EAAE,EAAE,EACd,eAAe,EAAE,eAAe,EAChC,UAAU,EAAE,iBAAiB,GAC7B,CACH,CAAC;AACJ,CAAC,CAAC"}

package/lib/pre-ldls/components/AssetItem/AssetItem.d.ts

@@ -3,10 +3,12 @@ export type AssetType = {
     name: string;
     ticker: string;
     id: string;
+    leftElement?: React.ReactNode;
+    rightElement?: React.ReactNode;
 };
 type AssetItemProps = AssetType & {
     onClick: (asset: AssetType) => void;
 };
-export declare const AssetItem: ({ name, ticker, id, onClick }: AssetItemProps) => React.JSX.Element;
+export declare const AssetItem: ({ name, ticker, id, onClick, leftElement, rightElement, }: AssetItemProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=AssetItem.d.ts.map

package/lib/pre-ldls/components/AssetItem/AssetItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AssetItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetItem/AssetItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,KAAK,cAAc,GAAG,SAAS,GAAG;IAChC,OAAO,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACrC,CAAC;AAsCF,eAAO,MAAM,SAAS,kCAAmC,cAAc,sBA4BtE,CAAC"}
+{"version":3,"file":"AssetItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetItem/AssetItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC,CAAC;AAEF,KAAK,cAAc,GAAG,SAAS,GAAG;IAChC,OAAO,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACrC,CAAC;AA4CF,eAAO,MAAM,SAAS,8DAOnB,cAAc,sBAmChB,CAAC"}

package/lib/pre-ldls/components/AssetItem/AssetItem.js

@@ -29,16 +29,24 @@ const InfoWrapper = styled.div `
   overflow: hidden;
   flex: 1;
 `;
-export const AssetItem = ({ name, ticker, id, onClick }) => {
+const LeftElementWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+export const AssetItem = ({ name, ticker, id, onClick, leftElement, rightElement, }) => {
     return (React.createElement(Wrapper, { onClick: () => onClick({ name, ticker, id }) },
         React.createElement(CryptoIcon, { size: "48px", ledgerId: id, ticker: ticker }),
         React.createElement(InfoWrapper, null,
-            React.createElement(Text, { variant: "largeLineHeight", fontWeight: "semiBold", color: "var(--colors-content-default-default)", style: {
+            React.createElement(Text, { fontSize: "14px", variant: "largeLineHeight", fontWeight: "semiBold", color: "var(--colors-content-default-default)", style: {
                     display: "block",
                     whiteSpace: "nowrap",
                     overflow: "hidden",
                     textOverflow: "ellipsis",
                 } }, name),
-            React.createElement(Text, { variant: "bodyLineHeight", fontWeight: "semiBold", color: "var(--colors-content-subdued-default-default)" }, ticker))));
+            React.createElement(LeftElementWrapper, null,
+                React.createElement(Text, { fontSize: "12px", lineHeight: "16px", variant: "bodyLineHeight", fontWeight: "medium", color: "var(--colors-content-subdued-default-default)" }, ticker),
+                leftElement)),
+        rightElement));
 };
 //# sourceMappingURL=AssetItem.js.map

package/lib/pre-ldls/components/AssetItem/AssetItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssetItem.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetItem/AssetItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAYtD,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CACV,aAAa,EACb,UAAU,EACV,UAAU,EACV,wCAAwC,EACxC,gCAAgC,EAChC,kCAAkC,EAClC,oCAAoC,CACrC;;;;;;;;;;;;;;;;CAgBF,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO7B,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAkB,EAAE,EAAE;IACzE,OAAO,CACL,oBAAC,OAAO,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC;QACnD,oBAAC,UAAU,IAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,GAAI;QACxD,oBAAC,WAAW;YACV,oBAAC,IAAI,IACH,OAAO,EAAC,iBAAiB,EACzB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,uCAAuC,EAC7C,KAAK,EAAE;oBACL,OAAO,EAAE,OAAO;oBAChB,UAAU,EAAE,QAAQ;oBACpB,QAAQ,EAAE,QAAQ;oBAClB,YAAY,EAAE,UAAU;iBACzB,IAEA,IAAI,CACA;YACP,oBAAC,IAAI,IACH,OAAO,EAAC,gBAAgB,EACxB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,+CAA+C,IAEpD,MAAM,CACF,CACK,CACN,CACX,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"AssetItem.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetItem/AssetItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AActD,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CACV,aAAa,EACb,UAAU,EACV,UAAU,EACV,wCAAwC,EACxC,gCAAgC,EAChC,kCAAkC,EAClC,oCAAoC,CACrC;;;;;;;;;;;;;;;;CAgBF,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO7B,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIpC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,IAAI,EACJ,MAAM,EACN,EAAE,EACF,OAAO,EACP,WAAW,EACX,YAAY,GACG,EAAE,EAAE;IACnB,OAAO,CACL,oBAAC,OAAO,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC;QACnD,oBAAC,UAAU,IAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,GAAI;QACxD,oBAAC,WAAW;YACV,oBAAC,IAAI,IACH,QAAQ,EAAC,MAAM,EACf,OAAO,EAAC,iBAAiB,EACzB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,uCAAuC,EAC7C,KAAK,EAAE;oBACL,OAAO,EAAE,OAAO;oBAChB,UAAU,EAAE,QAAQ;oBACpB,QAAQ,EAAE,QAAQ;oBAClB,YAAY,EAAE,UAAU;iBACzB,IAEA,IAAI,CACA;YACP,oBAAC,kBAAkB;gBACjB,oBAAC,IAAI,IACH,QAAQ,EAAC,MAAM,EACf,UAAU,EAAC,MAAM,EACjB,OAAO,EAAC,gBAAgB,EACxB,UAAU,EAAC,QAAQ,EACnB,KAAK,EAAC,+CAA+C,IAEpD,MAAM,CACF;gBACN,WAAW,CACO,CACT;QACb,YAAY,CACL,CACX,CAAC;AACJ,CAAC,CAAC"}

package/lib/pre-ldls/components/AssetList/AssetList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AssetList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetList/AssetList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAa,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAG9D,eAAO,MAAM,SAAS;YAOZ,SAAS,EAAE;qBACF,SAAS,KAAK,IAAI;qCACH,IAAI;;;uBAqBrC,CAAC"}
+{"version":3,"file":"AssetList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetList/AssetList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAa,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAG9D,eAAO,MAAM,SAAS;YAOZ,SAAS,EAAE;qBACF,SAAS,KAAK,IAAI;qCACH,IAAI;;;uBAmBrC,CAAC"}

package/lib/pre-ldls/components/AssetList/AssetList.js

@@ -2,7 +2,7 @@ import React, { useCallback } from "react";
 import { AssetItem } from "../AssetItem/AssetItem";
 import { VirtualList } from "../VirtualList/VirtualList";
 export const AssetList = ({ assets, onClick, onVisibleItemsScrollEnd, scrollToTop, hasNextPage, }) => {
-    const renderAssetItem = useCallback(({ name, ticker, id }) => (React.createElement(AssetItem, { name: name, ticker: ticker, id: id, onClick: onClick })), [onClick]);
-    return (React.createElement(VirtualList, { itemHeight: 70, items: assets, onVisibleItemsScrollEnd: onVisibleItemsScrollEnd, renderItem: renderAssetItem, scrollToTop: scrollToTop, hasNextPage: hasNextPage }));
+    const renderAssetItem = useCallback((props) => React.createElement(AssetItem, { ...props, onClick: onClick }), [onClick]);
+    return (React.createElement(VirtualList, { itemHeight: 64, items: assets, onVisibleItemsScrollEnd: onVisibleItemsScrollEnd, renderItem: renderAssetItem, scrollToTop: scrollToTop, hasNextPage: hasNextPage }));
 };
 //# sourceMappingURL=AssetList.js.map

package/lib/pre-ldls/components/AssetList/AssetList.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssetList.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetList/AssetList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAa,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEzD,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,MAAM,EACN,OAAO,EACP,uBAAuB,EACvB,WAAW,EACX,WAAW,GAOZ,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAa,EAAE,EAAE,CAAC,CACnC,oBAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,GAAI,CACpE,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,WAAW,IACV,UAAU,EAAE,EAAE,EACd,KAAK,EAAE,MAAM,EACb,uBAAuB,EAAE,uBAAuB,EAChD,UAAU,EAAE,eAAe,EAC3B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"AssetList.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetList/AssetList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAa,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEzD,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,MAAM,EACN,OAAO,EACP,uBAAuB,EACvB,WAAW,EACX,WAAW,GAOZ,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,KAAgB,EAAE,EAAE,CAAC,oBAAC,SAAS,OAAK,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI,EAChE,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,WAAW,IACV,UAAU,EAAE,EAAE,EACd,KAAK,EAAE,MAAM,EACb,uBAAuB,EAAE,uBAAuB,EAChD,UAAU,EAAE,eAAe,EAC3B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;AACJ,CAAC,CAAC"}

package/lib/pre-ldls/components/NetworkItem/NetworkItem.d.ts

@@ -3,10 +3,12 @@ export type Network = {
     name: string;
     id: string;
     ticker: string;
+    leftElement?: React.ReactNode;
+    rightElement?: React.ReactNode;
 };
 type NetworkItemProps = Network & {
     onClick: () => void;
 };
-export declare const NetworkItem: ({ name, onClick, id, ticker }: NetworkItemProps) => React.JSX.Element;
+export declare const NetworkItem: ({ name, onClick, id, ticker, leftElement, rightElement, }: NetworkItemProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=NetworkItem.d.ts.map

package/lib/pre-ldls/components/NetworkItem/NetworkItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NetworkItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/NetworkItem/NetworkItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,OAAO,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAEnE,KAAK,gBAAgB,GAAG,OAAO,GAAG;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAiCF,eAAO,MAAM,WAAW,kCAAmC,gBAAgB,sBAe1E,CAAC"}
+{"version":3,"file":"NetworkItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/NetworkItem/NetworkItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC,CAAC;AAEF,KAAK,gBAAgB,GAAG,OAAO,GAAG;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAyCF,eAAO,MAAM,WAAW,8DAOrB,gBAAgB,sBAiBlB,CAAC"}

package/lib/pre-ldls/components/NetworkItem/NetworkItem.js

@@ -4,7 +4,8 @@ import { withTokens } from "../../libs";
 import { Text } from "../../../components";
 import { CryptoIcon } from "../CryptoIcon/CryptoIcon";
 const Wrapper = styled.div `
-  ${withTokens("spacing-xxs", "margin-s", "radius-s", "colors-content-default-default", "colors-surface-transparent-hover", "colors-surface-transparent-pressed")}
+  ${withTokens("spacing-xxs", "margin-s", "radius-s", "colors-content-default-default", "colors-content-subdued-default-default", // used by leftElement child
+"colors-surface-transparent-hover", "colors-surface-transparent-pressed")}
   display: flex;
   padding: var(--spacing-xxs);
   cursor: pointer;
@@ -24,11 +25,19 @@ const InfoWrapper = styled.div `
   flex-direction: column;
   justify-content: center;
   margin-left: var(--margin-s);
+  flex: 1;
 `;
-export const NetworkItem = ({ name, onClick, id, ticker }) => {
+const LeftElementWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+export const NetworkItem = ({ name, onClick, id, ticker, leftElement, rightElement, }) => {
     return (React.createElement(Wrapper, { onClick: onClick },
         React.createElement(CryptoIcon, { size: "48px", ledgerId: id, ticker: ticker }),
         React.createElement(InfoWrapper, null,
-            React.createElement(Text, { variant: "largeLineHeight", fontWeight: "semiBold", color: "var(--colors-content-default-default)" }, name))));
+            React.createElement(Text, { variant: "largeLineHeight", fontWeight: "semiBold", color: "var(--colors-content-default-default)" }, name),
+            React.createElement(LeftElementWrapper, null, leftElement)),
+        rightElement));
 };
 //# sourceMappingURL=NetworkItem.js.map

package/lib/pre-ldls/components/NetworkItem/NetworkItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NetworkItem.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/NetworkItem/NetworkItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAQtD,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CACV,aAAa,EACb,UAAU,EACV,UAAU,EACV,gCAAgC,EAChC,kCAAkC,EAClC,oCAAoC,CACrC;;;;;;;;;;;;;;CAcF,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK7B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,EAAoB,EAAE,EAAE;IAC7E,OAAO,CACL,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO;QACvB,oBAAC,UAAU,IAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,GAAI;QACxD,oBAAC,WAAW;YACV,oBAAC,IAAI,IACH,OAAO,EAAC,iBAAiB,EACzB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,uCAAuC,IAE5C,IAAI,CACA,CACK,CACN,CACX,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"NetworkItem.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/NetworkItem/NetworkItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AActD,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CACV,aAAa,EACb,UAAU,EACV,UAAU,EACV,gCAAgC,EAChC,wCAAwC,EAAE,4BAA4B;AACtE,kCAAkC,EAClC,oCAAoC,CACrC;;;;;;;;;;;;;;CAcF,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAM7B,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIpC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,IAAI,EACJ,OAAO,EACP,EAAE,EACF,MAAM,EACN,WAAW,EACX,YAAY,GACK,EAAE,EAAE;IACrB,OAAO,CACL,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO;QACvB,oBAAC,UAAU,IAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,GAAI;QACxD,oBAAC,WAAW;YACV,oBAAC,IAAI,IACH,OAAO,EAAC,iBAAiB,EACzB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,uCAAuC,IAE5C,IAAI,CACA;YACP,oBAAC,kBAAkB,QAAE,WAAW,CAAsB,CAC1C;QACb,YAAY,CACL,CACX,CAAC;AACJ,CAAC,CAAC"}

package/lib/pre-ldls/components/VirtualList/VirtualList.d.ts

@@ -50,7 +50,11 @@ type VirtualListProps<T> = {
      * When set to true, the list will scroll to the top
      */
     scrollToTop?: boolean;
+    /**
+     * React component or node to display at the bottom of the list, after all items.
+     */
+    bottomComponent?: React.ReactNode;
 };
-export declare const VirtualList: <T>({ itemHeight, overscan, LoadingComponent, isLoading, hasNextPage, threshold, items, onVisibleItemsScrollEnd, renderItem, scrollToTop, }: VirtualListProps<T>) => React.JSX.Element;
+export declare const VirtualList: <T>({ itemHeight, overscan, LoadingComponent, isLoading, hasNextPage, threshold, items, onVisibleItemsScrollEnd, renderItem, scrollToTop, bottomComponent, }: VirtualListProps<T>) => React.JSX.Element;
 export {};
 //# sourceMappingURL=VirtualList.d.ts.map

package/lib/pre-ldls/components/VirtualList/VirtualList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAY9D;;;GAGG;AACH,KAAK,gBAAgB,CAAC,CAAC,IAAI;IACzB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAC;IACrC;;;OAGG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACzC;;OAEG;IACH,KAAK,EAAE,CAAC,EAAE,CAAC;IACX;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAYF,eAAO,MAAM,WAAW,+IAWrB,iBAAiB,CAAC,CAAC,sBA0GrB,CAAC"}
+{"version":3,"file":"VirtualList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAY9D;;;GAGG;AACH,KAAK,gBAAgB,CAAC,CAAC,IAAI;IACzB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAC;IACrC;;;OAGG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACzC;;OAEG;IACH,KAAK,EAAE,CAAC,EAAE,CAAC;IACX;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACnC,CAAC;AAYF,eAAO,MAAM,WAAW,gKAYrB,iBAAiB,CAAC,CAAC,sBAsHrB,CAAC"}

package/lib/pre-ldls/components/VirtualList/VirtualList.js

@@ -6,7 +6,7 @@ const DefaultLoadingComponent = () => (React.createElement(Flex, { justifyConten
 function easeInOutCubic(t) {
     return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
 }
-export const VirtualList = ({ itemHeight, overscan = 5, LoadingComponent, isLoading, hasNextPage = false, threshold = 5, items, onVisibleItemsScrollEnd, renderItem, scrollToTop = false, }) => {
+export const VirtualList = ({ itemHeight, overscan = 5, LoadingComponent, isLoading, hasNextPage = false, threshold = 5, items, onVisibleItemsScrollEnd, renderItem, scrollToTop = false, bottomComponent, }) => {
     const parentRef = useRef(null);
     const scrollToFn = useCallback((offset, options, instance) => {
         const element = instance.scrollElement;
@@ -61,14 +61,21 @@ export const VirtualList = ({ itemHeight, overscan = 5, LoadingComponent, isLoad
                 height: `${rowVirtualizer.getTotalSize()}px`,
                 width: "100%",
                 position: "relative",
-            } }, rowVirtualizer.getVirtualItems().map((virtualRow) => (React.createElement("div", { key: virtualRow.index, "data-index": virtualRow.index, ref: rowVirtualizer.measureElement, style: {
-                position: "absolute",
-                top: 0,
-                left: 0,
-                transform: `translateY(${virtualRow.start}px)`,
-                height: `${itemHeight}px`,
-                width: "100%",
-            } }, renderItem(items[virtualRow.index]))))),
+            } },
+            rowVirtualizer.getVirtualItems().map((virtualRow) => (React.createElement("div", { key: virtualRow.index, "data-index": virtualRow.index, ref: rowVirtualizer.measureElement, style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    transform: `translateY(${virtualRow.start}px)`,
+                    height: `${itemHeight}px`,
+                    width: "100%",
+                } }, renderItem(items[virtualRow.index])))),
+            bottomComponent && (React.createElement("div", { style: {
+                    position: "absolute",
+                    top: `${rowVirtualizer.getTotalSize()}px`,
+                    left: 0,
+                    width: "100%",
+                } }, bottomComponent))),
         isLoading && (showCustomLoadingComponent ? LoadingComponent : React.createElement(DefaultLoadingComponent, null))));
 };
 //# sourceMappingURL=VirtualList.js.map

package/lib/pre-ldls/components/VirtualList/VirtualList.js.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualList.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"VirtualList.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],"names":[],"mappings":"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"}

package/lib/pre-ldls/components/sharedStoryBook.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare const BalanceContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const leftElement: React.JSX.Element;
+export declare const createRightElement: (discreetMode: boolean) => React.JSX.Element;
+//# sourceMappingURL=sharedStoryBook.d.ts.map

package/lib/pre-ldls/components/sharedStoryBook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sharedStoryBook.d.ts","sourceRoot":"","sources":["../../../src/pre-ldls/components/sharedStoryBook.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,gBAAgB,yGAK5B,CAAC;AAEF,eAAO,MAAM,WAAW,mBAA2B,CAAC;AAEpD,eAAO,MAAM,kBAAkB,iBAAkB,OAAO,sBAoBvD,CAAC"}

package/lib/pre-ldls/components/sharedStoryBook.js

@@ -0,0 +1,15 @@
+import React from "react";
+import styled from "styled-components";
+import { Text } from "../../components";
+import { Tag } from "./Tag/Tag";
+export const BalanceContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+`;
+export const leftElement = React.createElement(Tag, null, "1.34% APY");
+export const createRightElement = (discreetMode) => (React.createElement(BalanceContainer, null,
+    React.createElement(Text, { fontSize: "14px", variant: "largeLineHeight", fontWeight: "semiBold", color: "var(--colors-content-default-default)" }, discreetMode ? "$***" : "$5,969.83"),
+    React.createElement(Text, { fontSize: "12px", lineHeight: "16px", variant: "bodyLineHeight", fontWeight: "medium", color: "var(--colors-content-subdued-default-default)" }, discreetMode ? "*** BTC" : "0.118 BTC")));
+//# sourceMappingURL=sharedStoryBook.js.map

package/lib/pre-ldls/components/sharedStoryBook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sharedStoryBook.js","sourceRoot":"","sources":["../../../src/pre-ldls/components/sharedStoryBook.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAEhC,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKzC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,oBAAC,GAAG,QAAE,WAAW,CAAO,CAAC;AAEpD,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,YAAqB,EAAE,EAAE,CAAC,CAC3D,oBAAC,gBAAgB;IACf,oBAAC,IAAI,IACH,QAAQ,EAAC,MAAM,EACf,OAAO,EAAC,iBAAiB,EACzB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,uCAAuC,IAE5C,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAC/B;IACP,oBAAC,IAAI,IACH,QAAQ,EAAC,MAAM,EACf,UAAU,EAAC,MAAM,EACjB,OAAO,EAAC,gBAAgB,EACxB,UAAU,EAAC,QAAQ,EACnB,KAAK,EAAC,+CAA+C,IAEpD,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAClC,CACU,CACpB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/react-ui",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "description": "Ledger Live - Desktop UI",
   "author": "Ledger Live Team <team-live@ledger.fr>",
   "repository": {
@@ -75,8 +75,8 @@
     "react-transition-group": "^4.4.2",
     "react-window": "^1.8.6",
     "styled-system": "^5.1.5",
-    "@ledgerhq/crypto-icons-ui": "^1.14.0",
-    "@ledgerhq/icons-ui": "^0.10.0",
+    "@ledgerhq/crypto-icons-ui": "^1.15.0",
+    "@ledgerhq/icons-ui": "^0.11.0",
     "@ledgerhq/ui-shared": "^0.3.0"
   },
   "peerDependencies": {
@@ -85,10 +85,10 @@
     "styled-components": "^5.3.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.8",
-    "@babel/preset-env": "^7.24.3",
-    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1",
+    "@babel/core": "7.27.1",
+    "@babel/preset-env": "7.27.1",
+    "@babel/preset-react": "7.27.1",
+    "@babel/preset-typescript": "7.27.1",
     "@storybook/addon-actions": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
     "@storybook/addon-interactions": "8.6.12",