@ledgerhq/react-ui 0.25.0 → 0.26.0

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

@@ -35,24 +35,7 @@ var import_react = __toESM(require("react"));
 var import_components = require("../../../components");
 var import_styled_components = __toESM(require("styled-components"));
 var import_libs = require("../../libs");
-const TempAssetBadge = ({
-  ledgerId: _ledgerId,
-  ticker: _ticker
-}) => (
-  // TODO: To be replaced with LIVE-18221
-  /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", alignItems: "center" }, "data-testid": "address-icon" }, /* @__PURE__ */ import_react.default.createElement(
-    "span",
-    {
-      style: {
-        height: 20,
-        width: 20,
-        borderRadius: 20,
-        backgroundColor: "grey",
-        display: "inline-block"
-      }
-    }
-  ))
-);
+var import_CryptoIcon = require("../CryptoIcon/CryptoIcon");
 const Wrapper = import_styled_components.default.div`
   ${(0, import_libs.withTokens)("spacing-xxxs", "colors-content-subdued-default-default")}
 
@@ -74,6 +57,6 @@ const Address = ({
       color: "var(--colors-content-subdued-default-default)"
     },
     address
-  ), showIcon && /* @__PURE__ */ import_react.default.createElement(TempAssetBadge, { ledgerId: cryptoId, ticker }));
+  ), showIcon && /* @__PURE__ */ import_react.default.createElement(import_CryptoIcon.CryptoIcon, { ledgerId: cryptoId, ticker }));
 };
 //# sourceMappingURL=Address.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/Address/Address.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport { Text } from \"../../../components\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\n\nconst TempAssetBadge = ({\n  ledgerId: _ledgerId,\n  ticker: _ticker,\n}: {\n  ledgerId?: string;\n  ticker?: string;\n}) => (\n  // TODO: To be replaced with LIVE-18221\n  <div style={{ display: \"flex\", alignItems: \"center\" }} data-testid=\"address-icon\">\n    <span\n      style={{\n        height: 20,\n        width: 20,\n        borderRadius: 20,\n        backgroundColor: \"grey\",\n        display: \"inline-block\",\n      }}\n    />\n  </div>\n);\n\nconst Wrapper = styled.div`\n  ${withTokens(\"spacing-xxxs\", \"colors-content-subdued-default-default\")}\n\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nexport const Address = ({\n  address,\n  showIcon,\n  cryptoId,\n  ticker,\n}: {\n  address: string;\n  showIcon: boolean;\n  cryptoId?: string;\n  ticker?: string;\n}) => {\n  return (\n    <Wrapper>\n      <Text\n        marginRight=\"var(--spacing-xxxs)\"\n        fontSize=\"12px\"\n        color=\"var(--colors-content-subdued-default-default)\"\n      >\n        {address}\n      </Text>\n      {showIcon && <TempAssetBadge ledgerId={cryptoId} ticker={ticker} />}\n    </Wrapper>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,wBAAqB;AACrB,+BAAmB;AACnB,kBAA2B;AAE3B,MAAM,iBAAiB,CAAC;AAAA,EACtB,UAAU;AAAA,EACV,QAAQ;AACV;AAAA;AAAA,EAKE,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,GAAG,eAAY,kBACjE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,cAAc;AAAA,QACd,iBAAiB;AAAA,QACjB,SAAS;AAAA,MACX;AAAA;AAAA,EACF,CACF;AAAA;AAGF,MAAM,UAAU,yBAAAC,QAAO;AAAA,QACnB,wBAAW,gBAAgB,wCAAwC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjE,MAAM,UAAU,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAKM;AACJ,SACE,6BAAAD,QAAA,cAAC,eACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAY;AAAA,MACZ,UAAS;AAAA,MACT,OAAM;AAAA;AAAA,IAEL;AAAA,EACH,GACC,YAAY,6BAAAA,QAAA,cAAC,kBAAe,UAAU,UAAU,QAAgB,CACnE;AAEJ;",
-  "names": ["React", "styled"]
+  "sourcesContent": ["import React from \"react\";\nimport { Text } from \"../../../components\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { CryptoIcon } from \"../CryptoIcon/CryptoIcon\";\n\nconst Wrapper = styled.div`\n  ${withTokens(\"spacing-xxxs\", \"colors-content-subdued-default-default\")}\n\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nexport const Address = ({\n  address,\n  showIcon,\n  cryptoId,\n  ticker,\n}: {\n  address: string;\n  showIcon: boolean;\n  cryptoId?: string;\n  ticker?: string;\n}) => {\n  return (\n    <Wrapper>\n      <Text\n        marginRight=\"var(--spacing-xxxs)\"\n        fontSize=\"12px\"\n        color=\"var(--colors-content-subdued-default-default)\"\n      >\n        {address}\n      </Text>\n      {showIcon && <CryptoIcon ledgerId={cryptoId} ticker={ticker} />}\n    </Wrapper>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,wBAAqB;AACrB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAA2B;AAE3B,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB,wBAAW,gBAAgB,wCAAwC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjE,MAAM,UAAU,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAKM;AACJ,SACE,6BAAAC,QAAA,cAAC,eACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAY;AAAA,MACZ,UAAS;AAAA,MACT,OAAM;AAAA;AAAA,IAEL;AAAA,EACH,GACC,YAAY,6BAAAA,QAAA,cAAC,gCAAW,UAAU,UAAU,QAAgB,CAC/D;AAEJ;",
+  "names": ["styled", "React"]
 }

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

@@ -35,25 +35,12 @@ var import_react = __toESM(require("react"));
 var import_styled_components = __toESM(require("styled-components"));
 var import_libs = require("../../libs");
 var import_components = require("../../../components");
-const TempAssetBadge = () => (
-  // TODO: To be replaced with LIVE-18221
-  /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ import_react.default.createElement(
-    "span",
-    {
-      style: {
-        height: 48,
-        width: 48,
-        borderRadius: 48,
-        backgroundColor: "grey",
-        display: "inline-block"
-      }
-    }
-  ))
-);
+var import_CryptoIcon = require("../CryptoIcon/CryptoIcon");
 const Wrapper = import_styled_components.default.div`
   ${(0, import_libs.withTokens)(
   "spacing-xxs",
   "margin-s",
+  "radius-s",
   "colors-content-subdued-default-default",
   "colors-content-default-default",
   "colors-surface-transparent-hover",
@@ -63,6 +50,8 @@ const Wrapper = import_styled_components.default.div`
   display: flex;
   padding: var(--spacing-xxs);
   cursor: pointer;
+  border-radius: var(--radius-s, 8px);
+  align-items: center;
 
   :hover {
     background-color: var(--colors-surface-transparent-hover);
@@ -78,8 +67,8 @@ const InfoWrapper = import_styled_components.default.div`
   justify-content: center;
   margin-left: var(--margin-s);
 `;
-const AssetItem = ({ name, ticker, onClick }) => {
-  return /* @__PURE__ */ import_react.default.createElement(Wrapper, { onClick: () => onClick({ name, ticker }) }, /* @__PURE__ */ import_react.default.createElement(TempAssetBadge, null), /* @__PURE__ */ import_react.default.createElement(InfoWrapper, null, /* @__PURE__ */ import_react.default.createElement(
+const AssetItem = ({ name, ticker, id, onClick }) => {
+  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,
     {
       variant: "largeLineHeight",

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\";\n\nexport type AssetType = {\n  name: string;\n  ticker: string;\n};\n\ntype AssetItemProps = AssetType & {\n  onClick: (asset: AssetType) => void;\n};\n\nconst TempAssetBadge = () => (\n  // TODO: To be replaced with LIVE-18221\n  <div style={{ display: \"flex\", alignItems: \"center\" }}>\n    <span\n      style={{\n        height: 48,\n        width: 48,\n        borderRadius: 48,\n        backgroundColor: \"grey\",\n        display: \"inline-block\",\n      }}\n    />\n  </div>\n);\n\nconst Wrapper = styled.div`\n  ${withTokens(\n    \"spacing-xxs\",\n    \"margin-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\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 AssetItem = ({ name, ticker, onClick }: AssetItemProps) => {\n  return (\n    <Wrapper onClick={() => onClick({ name, ticker })}>\n      <TempAssetBadge />\n      <InfoWrapper>\n        <Text\n          variant=\"largeLineHeight\"\n          fontWeight=\"semiBold\"\n          color=\"var(--colors-content-default-default)\"\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;AAWrB,MAAM,iBAAiB;AAAA;AAAA,EAErB,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,KAClD,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,cAAc;AAAA,QACd,iBAAiB;AAAA,QACjB,SAAS;AAAA,MACX;AAAA;AAAA,EACF,CACF;AAAA;AAGF,MAAM,UAAU,yBAAAC,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;AAeH,MAAM,cAAc,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOpB,MAAM,YAAY,CAAC,EAAE,MAAM,QAAQ,QAAQ,MAAsB;AACtE,SACE,6BAAAD,QAAA,cAAC,WAAQ,SAAS,MAAM,QAAQ,EAAE,MAAM,OAAO,CAAC,KAC9C,6BAAAA,QAAA,cAAC,oBAAe,GAChB,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;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA;AAAA,IAEL;AAAA,EACH,CACF,CACF;AAEJ;",
-  "names": ["React", "styled"]
+  "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\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 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        >\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;AAiBH,MAAM,cAAc,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOpB,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;AAAA,IAEL;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;",
+  "names": ["styled", "React"]
 }

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

@@ -29,7 +29,7 @@ const meta = {
   component: import_AssetItem.AssetItem,
   title: "PreLdls/Components/AssetItem",
   tags: ["autodocs"],
-  args: { name: "Bitcoin", ticker: "BTC" }
+  args: { name: "Bitcoin", ticker: "BTC", id: "bitcoin" }
 };
 var AssetItem_stories_default = meta;
 const Default = {};

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\" },\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,MAAM;AACzC;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\";\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;",
   "names": []
 }

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

@@ -36,12 +36,21 @@ var import_AssetItem = require("../AssetItem/AssetItem");
 var import_VirtualList = require("../VirtualList/VirtualList");
 const AssetList = ({
   assets,
-  onClick
+  onClick,
+  onVisibleItemsScrollEnd
 }) => {
   const renderAssetItem = (0, import_react.useCallback)(
-    ({ name, ticker }) => /* @__PURE__ */ import_react.default.createElement(import_AssetItem.AssetItem, { name, ticker, onClick }),
+    ({ name, ticker, id }) => /* @__PURE__ */ import_react.default.createElement(import_AssetItem.AssetItem, { name, ticker, id, onClick }),
     [onClick]
   );
-  return /* @__PURE__ */ import_react.default.createElement(import_VirtualList.VirtualList, { itemHeight: 64, items: assets, renderItem: renderAssetItem });
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_VirtualList.VirtualList,
+    {
+      itemHeight: 64,
+      items: assets,
+      onVisibleItemsScrollEnd,
+      renderItem: renderAssetItem
+    }
+  );
 };
 //# sourceMappingURL=AssetList.js.map

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}: {\n  assets: AssetType[];\n  onClick: (asset: AssetType) => void;\n}) => {\n  const renderAssetItem = useCallback(\n    ({ name, ticker }: AssetType) => <AssetItem name={name} ticker={ticker} onClick={onClick} />,\n    [onClick],\n  );\n\n  return <VirtualList itemHeight={64} items={assets} renderItem={renderAssetItem} />;\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AACnC,uBAAqC;AACrC,yBAA4B;AAErB,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AACF,MAGM;AACJ,QAAM,sBAAkB;AAAA,IACtB,CAAC,EAAE,MAAM,OAAO,MAAiB,6BAAAA,QAAA,cAAC,8BAAU,MAAY,QAAgB,SAAkB;AAAA,IAC1F,CAAC,OAAO;AAAA,EACV;AAEA,SAAO,6BAAAA,QAAA,cAAC,kCAAY,YAAY,IAAI,OAAO,QAAQ,YAAY,iBAAiB;AAClF;",
+  "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}: {\n  assets: AssetType[];\n  onClick: (asset: AssetType) => void;\n  onVisibleItemsScrollEnd?: () => void;\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={64}\n      items={assets}\n      onVisibleItemsScrollEnd={onVisibleItemsScrollEnd}\n      renderItem={renderAssetItem}\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;AACF,MAIM;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;AAAA,EACd;AAEJ;",
   "names": ["React"]
 }

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

@@ -45,7 +45,11 @@ const meta = {
   title: "PreLdls/Components/AssetList",
   tags: ["autodocs"],
   args: {
-    assets: Array.from({ length: 50 }).map((_, i) => ({ name: `Bitcoin ${i}`, ticker: "BTC" })),
+    assets: Array.from({ length: 50 }).map((_, i) => ({
+      name: `Bitcoin ${i}`,
+      ticker: "BTC",
+      id: "bitcoin"
+    })),
     onClick: testFn
   }
 };
@@ -56,7 +60,7 @@ const TestAssetClick = {
     const canvas = (0, import_test.within)(canvasElement);
     const input = canvas.getByText("Bitcoin 1");
     await import_test.userEvent.click(input);
-    await (0, import_test.expect)(testFn).toHaveBeenCalledWith({ name: "Bitcoin 1", ticker: "BTC" });
+    await (0, import_test.expect)(testFn).toHaveBeenCalledWith({ name: "Bitcoin 1", ticker: "BTC", id: "bitcoin" });
   }
 };
 //# sourceMappingURL=AssetList.stories.js.map

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) => ({ name: `Bitcoin ${i}`, ticker: \"BTC\" })),\n    onClick: testFn,\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\" });\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,EAAE,MAAM,WAAW,CAAC,IAAI,QAAQ,MAAM,EAAE;AAAA,IAC1F,SAAS;AAAA,EACX;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,MAAM,CAAC;AAAA,EAChF;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\";\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  },\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,EACX;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;",
   "names": ["React"]
 }

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

@@ -0,0 +1,91 @@
+"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 CardButton_exports = {};
+__export(CardButton_exports, {
+  CardButton: () => CardButton
+});
+module.exports = __toCommonJS(CardButton_exports);
+var import_react = __toESM(require("react"));
+var import_libs = require("../../libs");
+var import_styled_components = __toESM(require("styled-components"));
+const Button = import_styled_components.default.button`
+  ${(0, import_libs.withTokens)(
+  "colors-content-default-default",
+  "colors-surface-transparent-hover",
+  "colors-surface-transparent-pressed",
+  "colors-border-light-default",
+  "colors-opacity-default-10",
+  "colors-border-subdued-default-hover",
+  "colors-border-subdued-default-pressed",
+  "colors-border-focus-default",
+  "radius-s",
+  "border-width-default",
+  "border-width-focus",
+  "spacing-xs"
+)}
+
+  display: flex;
+  padding: var(--spacing-xs);
+  flex-grow: 1;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+
+  background-color: transparent;
+  color: var(--colors-content-default-default);
+  font-weight: 600;
+
+  border-width: var(--border-width-default);
+  border-radius: var(--radius-s);
+  border-color: ${({ theme: { theme } }) => theme === "light" ? "var(--colors-border-light-default);" : "var(--colors-opacity-default-10);"}
+
+  :hover {
+    background-color: var(--colors-surface-transparent-hover);
+    ${({ theme: { theme } }) => theme === "light" && "border-color: var(--colors-border-subdued-default-hover);"}
+  }
+
+  :active {
+    background-color: var(--colors-surface-transparent-pressed);
+    ${({ theme: { theme } }) => theme === "light" && "border-color: var(--colors-border-subdued-default-pressed);"}
+  }
+
+  :focus-visible {
+    border-color: var(--colors-border-focus-default);
+    border-width: var(--border-width-focus);
+  }
+`;
+const CardButton = ({
+  onClick,
+  title,
+  iconRight,
+  variant = "default"
+}) => {
+  return /* @__PURE__ */ import_react.default.createElement(Button, { onClick, style: { borderStyle: variant === "default" ? "solid" : "dashed" } }, title, " ", iconRight);
+};
+//# sourceMappingURL=CardButton.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/pre-ldls/components/CardButton/CardButton.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport { withTokens } from \"../../libs\";\nimport styled from \"styled-components\";\n\nconst Button = styled.button`\n  ${withTokens(\n    \"colors-content-default-default\",\n    \"colors-surface-transparent-hover\",\n    \"colors-surface-transparent-pressed\",\n    \"colors-border-light-default\",\n    \"colors-opacity-default-10\",\n    \"colors-border-subdued-default-hover\",\n    \"colors-border-subdued-default-pressed\",\n    \"colors-border-focus-default\",\n    \"radius-s\",\n    \"border-width-default\",\n    \"border-width-focus\",\n    \"spacing-xs\",\n  )}\n\n  display: flex;\n  padding: var(--spacing-xs);\n  flex-grow: 1;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n\n  background-color: transparent;\n  color: var(--colors-content-default-default);\n  font-weight: 600;\n\n  border-width: var(--border-width-default);\n  border-radius: var(--radius-s);\n  border-color: ${({ theme: { theme } }) =>\n    theme === \"light\" ? \"var(--colors-border-light-default);\" : \"var(--colors-opacity-default-10);\"}\n\n  :hover {\n    background-color: var(--colors-surface-transparent-hover);\n    ${({ theme: { theme } }) =>\n      theme === \"light\" && \"border-color: var(--colors-border-subdued-default-hover);\"}\n  }\n\n  :active {\n    background-color: var(--colors-surface-transparent-pressed);\n    ${({ theme: { theme } }) => theme === \"light\" && \"border-color: var(--colors-border-subdued-default-pressed);\"}\n  }\n\n  :focus-visible {\n    border-color: var(--colors-border-focus-default);\n    border-width: var(--border-width-focus);\n  }\n`;\n\nexport const CardButton = ({\n  onClick,\n  title,\n  iconRight,\n  variant = \"default\",\n}: {\n  onClick: () => void;\n  title: string;\n  iconRight?: JSX.Element;\n  variant?: \"default\" | \"dashed\";\n}) => {\n  return (\n    <Button onClick={onClick} style={{ borderStyle: variant === \"default\" ? \"solid\" : \"dashed\" }}>\n      {title} {iconRight}\n    </Button>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,kBAA2B;AAC3B,+BAAmB;AAEnB,MAAM,SAAS,yBAAAA,QAAO;AAAA,QAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;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,kBAee,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,MAClC,UAAU,UAAU,wCAAwC,mCAAmC;AAAA;AAAA;AAAA;AAAA,MAI7F,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,MACpB,UAAU,WAAW,2DAA2D;AAAA;AAAA;AAAA;AAAA;AAAA,MAKhF,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,WAAW,6DAA6D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3G,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,MAKM;AACJ,SACE,6BAAAC,QAAA,cAAC,UAAO,SAAkB,OAAO,EAAE,aAAa,YAAY,YAAY,UAAU,SAAS,KACxF,OAAM,KAAE,SACX;AAEJ;",
+  "names": ["styled", "React"]
+}

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

@@ -0,0 +1,84 @@
+"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 CardButton_stories_exports = {};
+__export(CardButton_stories_exports, {
+  Dashed: () => Dashed,
+  Default: () => Default,
+  IconRight: () => IconRight,
+  TestOnClick: () => TestOnClick,
+  default: () => CardButton_stories_default
+});
+module.exports = __toCommonJS(CardButton_stories_exports);
+var import_react = __toESM(require("react"));
+var import_CardButton = require("./CardButton");
+var import_test = require("@storybook/test");
+var import_assets = require("../../../assets");
+const meta = {
+  component: import_CardButton.CardButton,
+  title: "PreLdls/Components/CardButton",
+  decorators: [
+    (Story) => /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ import_react.default.createElement(Story, null))
+  ],
+  tags: ["autodocs"],
+  args: {
+    onClick: () => null,
+    title: "Title",
+    variant: "default"
+  }
+};
+var CardButton_stories_default = meta;
+const Default = {};
+const Dashed = {
+  args: {
+    onClick: () => null,
+    title: "Title",
+    variant: "dashed"
+  }
+};
+const IconRight = {
+  args: {
+    onClick: () => null,
+    title: "Title",
+    iconRight: /* @__PURE__ */ import_react.default.createElement(import_assets.Icons.Plus, { size: "S" })
+  }
+};
+const onClick = (0, import_test.fn)();
+const TestOnClick = {
+  args: {
+    onClick,
+    title: "Title"
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = (0, import_test.within)(canvasElement);
+    const button = canvas.getByText(/title/i);
+    await import_test.userEvent.click(button);
+    await (0, import_test.expect)(onClick).toHaveBeenCalled();
+  }
+};
+//# sourceMappingURL=CardButton.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/pre-ldls/components/CardButton/CardButton.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { CardButton } from \"./CardButton\";\nimport { expect, fn, userEvent, within } from \"@storybook/test\";\nimport { Icons } from \"../../../assets\";\n\nconst meta: Meta<typeof CardButton> = {\n  component: CardButton,\n  title: \"PreLdls/Components/CardButton\",\n  decorators: [\n    Story => (\n      <div style={{ display: \"flex\" }}>\n        <Story />\n      </div>\n    ),\n  ],\n  tags: [\"autodocs\"],\n  args: {\n    onClick: () => null,\n    title: \"Title\",\n    variant: \"default\",\n  },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof CardButton>;\n\nexport const Default: Story = {};\n\nexport const Dashed: Story = {\n  args: {\n    onClick: () => null,\n    title: \"Title\",\n    variant: \"dashed\",\n  },\n};\n\nexport const IconRight: Story = {\n  args: {\n    onClick: () => null,\n    title: \"Title\",\n    iconRight: <Icons.Plus size=\"S\" />,\n  },\n};\n\nconst onClick = fn();\n\nexport const TestOnClick: Story = {\n  args: {\n    onClick,\n    title: \"Title\",\n  },\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n    const button = canvas.getByText(/title/i);\n\n    await userEvent.click(button);\n\n    await expect(onClick).toHaveBeenCalled();\n  },\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,wBAA2B;AAC3B,kBAA8C;AAC9C,oBAAsB;AAEtB,MAAM,OAAgC;AAAA,EACpC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,YAAY;AAAA,IACV,WACE,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,OAAO,KAC5B,6BAAAA,QAAA,cAAC,WAAM,CACT;AAAA,EAEJ;AAAA,EACA,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM;AAAA,IACJ,SAAS,MAAM;AAAA,IACf,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AACF;AACA,IAAO,6BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,SAAgB;AAAA,EAC3B,MAAM;AAAA,IACJ,SAAS,MAAM;AAAA,IACf,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AACF;AAEO,MAAM,YAAmB;AAAA,EAC9B,MAAM;AAAA,IACJ,SAAS,MAAM;AAAA,IACf,OAAO;AAAA,IACP,WAAW,6BAAAA,QAAA,cAAC,oBAAM,MAAN,EAAW,MAAK,KAAI;AAAA,EAClC;AACF;AAEA,MAAM,cAAU,gBAAG;AAEZ,MAAM,cAAqB;AAAA,EAChC,MAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,EACT;AAAA,EACA,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AACnC,UAAM,SAAS,OAAO,UAAU,QAAQ;AAExC,UAAM,sBAAU,MAAM,MAAM;AAE5B,cAAM,oBAAO,OAAO,EAAE,iBAAiB;AAAA,EACzC;AACF;",
+  "names": ["React"]
+}

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

@@ -0,0 +1,39 @@
+"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 CryptoIcon_exports = {};
+__export(CryptoIcon_exports, {
+  CryptoIcon: () => CryptoIcon
+});
+module.exports = __toCommonJS(CryptoIcon_exports);
+var import_react = __toESM(require("react"));
+var import_crypto_icons = require("@ledgerhq/crypto-icons");
+function CryptoIcon(props) {
+  return /* @__PURE__ */ import_react.default.createElement(import_crypto_icons.CryptoIcon, { ...props });
+}
+//# sourceMappingURL=CryptoIcon.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/pre-ldls/components/CryptoIcon/CryptoIcon.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport { CryptoIcon as Icon } from \"@ledgerhq/crypto-icons\";\n\nexport function CryptoIcon(props: Parameters<typeof Icon>[0]) {\n  return <Icon {...props} />;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,0BAAmC;AAE5B,SAAS,WAAW,OAAmC;AAC5D,SAAO,6BAAAA,QAAA,cAAC,oBAAAC,YAAA,EAAM,GAAG,OAAO;AAC1B;",
+  "names": ["React", "Icon"]
+}

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

@@ -0,0 +1,47 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var CryptoIcon_stories_exports = {};
+__export(CryptoIcon_stories_exports, {
+  Default: () => Default,
+  default: () => CryptoIcon_stories_default
+});
+module.exports = __toCommonJS(CryptoIcon_stories_exports);
+var import_CryptoIcon = require("./CryptoIcon");
+const meta = {
+  component: import_CryptoIcon.CryptoIcon,
+  title: "PreLdls/Components/CryptoIcon",
+  tags: ["autodocs"],
+  args: {
+    ledgerId: "bitcoin",
+    ticker: "BTC",
+    size: "56px",
+    network: ""
+  },
+  argTypes: {
+    size: { options: ["16px", "24px", "32px", "40px", "48px", "56px"], control: "select" },
+    ledgerId: {
+      description: "A chain eg algorand, aptos, bitcoin, cardano, casper"
+    }
+  }
+};
+var CryptoIcon_stories_default = meta;
+const Default = {
+  name: "CryptoIcon"
+};
+//# sourceMappingURL=CryptoIcon.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/pre-ldls/components/CryptoIcon/CryptoIcon.stories.tsx"],
+  "sourcesContent": ["import { type Meta, type StoryObj } from \"@storybook/react\";\nimport { CryptoIcon } from \"./CryptoIcon\";\n\nconst meta: Meta<typeof CryptoIcon> = {\n  component: CryptoIcon,\n  title: \"PreLdls/Components/CryptoIcon\",\n  tags: [\"autodocs\"],\n  args: {\n    ledgerId: \"bitcoin\",\n    ticker: \"BTC\",\n    size: \"56px\",\n    network: \"\",\n  },\n  argTypes: {\n    size: { options: [\"16px\", \"24px\", \"32px\", \"40px\", \"48px\", \"56px\"], control: \"select\" },\n    ledgerId: {\n      description: \"A chain eg algorand, aptos, bitcoin, cardano, casper\",\n    },\n  },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof CryptoIcon>;\n\nexport const Default: Story = {\n  name: \"CryptoIcon\",\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,wBAA2B;AAE3B,MAAM,OAAgC;AAAA,EACpC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,MAAM,EAAE,SAAS,CAAC,QAAQ,QAAQ,QAAQ,QAAQ,QAAQ,MAAM,GAAG,SAAS,SAAS;AAAA,IACrF,UAAU;AAAA,MACR,aAAa;AAAA,IACf;AAAA,EACF;AACF;AACA,IAAO,6BAAQ;AAIR,MAAM,UAAiB;AAAA,EAC5B,MAAM;AACR;",
+  "names": []
+}

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

@@ -44,7 +44,6 @@ const Wrapper = import_styled_components.default.div`
 )}
 
   display: flex;
-  width: 328px;
   height: 40px;
   min-width: 328px;
   padding: 0px var(--spacing-s, 16px);
@@ -54,9 +53,11 @@ const Wrapper = import_styled_components.default.div`
   border-radius: var(--radius-s, 8px);
   background: var(--colors-surface-transparent-subdued-default, rgba(0, 0, 0, 0.03));
   color: var(--colors-content-subdued-default-default);
+  overflow: hidden;
 `;
 const StyledInput = import_styled_components.default.input`
   background: none;
+  cursor: text;
   border: none;
   width: 100%;
 `;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/Input/Input.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\n\ntype Props = Readonly<React.ComponentProps<\"input\"> & { icon?: React.ReactNode }>;\n\nconst Wrapper = styled.div`\n  ${withTokens(\n    \"spacing-s\",\n    \"spacing-xxs\",\n    \"radius-s\",\n    \"colors-surface-transparent-subdued-default\",\n    \"colors-content-subdued-default-default\",\n  )}\n\n  display: flex;\n  width: 328px;\n  height: 40px;\n  min-width: 328px;\n  padding: 0px var(--spacing-s, 16px);\n  align-items: center;\n  gap: var(--spacing-xxs, 8px);\n\n  border-radius: var(--radius-s, 8px);\n  background: var(--colors-surface-transparent-subdued-default, rgba(0, 0, 0, 0.03));\n  color: var(--colors-content-subdued-default-default);\n`;\n\nconst StyledInput = styled.input`\n  background: none;\n  border: none;\n  width: 100%;\n`;\n\nexport const Input = React.forwardRef<HTMLInputElement, Props>(\n  ({ type = \"text\", icon = null, ...props }, ref) => {\n    return (\n      <Wrapper>\n        {icon}\n        <StyledInput {...props} type={type} ref={ref} />\n      </Wrapper>\n    );\n  },\n);\nInput.displayName = \"Input\";\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAI3B,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;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;AAeH,MAAM,cAAc,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAMpB,MAAM,QAAQ,aAAAC,QAAM;AAAA,EACzB,CAAC,EAAE,OAAO,QAAQ,OAAO,MAAM,GAAG,MAAM,GAAG,QAAQ;AACjD,WACE,6BAAAA,QAAA,cAAC,eACE,MACD,6BAAAA,QAAA,cAAC,eAAa,GAAG,OAAO,MAAY,KAAU,CAChD;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;",
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\n\ntype Props = Readonly<React.ComponentProps<\"input\"> & { icon?: React.ReactNode }>;\n\nconst Wrapper = styled.div`\n  ${withTokens(\n    \"spacing-s\",\n    \"spacing-xxs\",\n    \"radius-s\",\n    \"colors-surface-transparent-subdued-default\",\n    \"colors-content-subdued-default-default\",\n  )}\n\n  display: flex;\n  height: 40px;\n  min-width: 328px;\n  padding: 0px var(--spacing-s, 16px);\n  align-items: center;\n  gap: var(--spacing-xxs, 8px);\n\n  border-radius: var(--radius-s, 8px);\n  background: var(--colors-surface-transparent-subdued-default, rgba(0, 0, 0, 0.03));\n  color: var(--colors-content-subdued-default-default);\n  overflow: hidden;\n`;\n\nconst StyledInput = styled.input`\n  background: none;\n  cursor: text;\n  border: none;\n  width: 100%;\n`;\n\nexport const Input = React.forwardRef<HTMLInputElement, Props>(\n  ({ type = \"text\", icon = null, ...props }, ref) => {\n    return (\n      <Wrapper>\n        {icon}\n        <StyledInput {...props} type={type} ref={ref} />\n      </Wrapper>\n    );\n  },\n);\nInput.displayName = \"Input\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAI3B,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;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;AAeH,MAAM,cAAc,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOpB,MAAM,QAAQ,aAAAC,QAAM;AAAA,EACzB,CAAC,EAAE,OAAO,QAAQ,OAAO,MAAM,GAAG,MAAM,GAAG,QAAQ;AACjD,WACE,6BAAAA,QAAA,cAAC,eACE,MACD,6BAAAA,QAAA,cAAC,eAAa,GAAG,OAAO,MAAY,KAAU,CAChD;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;",
   "names": ["styled", "React"]
 }

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

@@ -35,25 +35,12 @@ var import_react = __toESM(require("react"));
 var import_styled_components = __toESM(require("styled-components"));
 var import_libs = require("../../libs");
 var import_components = require("../../../components");
-const TempAssetBadge = () => (
-  // TODO: To be replaced with LIVE-18221
-  /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ import_react.default.createElement(
-    "span",
-    {
-      style: {
-        height: 48,
-        width: 48,
-        borderRadius: 48,
-        backgroundColor: "grey",
-        display: "inline-block"
-      }
-    }
-  ))
-);
+var import_CryptoIcon = require("../CryptoIcon/CryptoIcon");
 const Wrapper = import_styled_components.default.div`
   ${(0, import_libs.withTokens)(
   "spacing-xxs",
   "margin-s",
+  "radius-s",
   "colors-content-default-default",
   "colors-surface-transparent-hover",
   "colors-surface-transparent-pressed"
@@ -61,6 +48,8 @@ const Wrapper = import_styled_components.default.div`
   display: flex;
   padding: var(--spacing-xxs);
   cursor: pointer;
+  border-radius: var(--radius-s, 8px);
+  align-items: center;
 
   :hover {
     background-color: var(--colors-surface-transparent-hover);
@@ -76,8 +65,8 @@ const InfoWrapper = import_styled_components.default.div`
   justify-content: center;
   margin-left: var(--margin-s);
 `;
-const NetworkItem = ({ name, onClick }) => {
-  return /* @__PURE__ */ import_react.default.createElement(Wrapper, { onClick }, /* @__PURE__ */ import_react.default.createElement(TempAssetBadge, null), /* @__PURE__ */ import_react.default.createElement(InfoWrapper, null, /* @__PURE__ */ import_react.default.createElement(
+const NetworkItem = ({ name, onClick, id, ticker }) => {
+  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,
     {
       variant: "largeLineHeight",