@ledgerhq/react-ui 0.25.0-nightly.0 → 0.25.0-nightly.2

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,21 +35,7 @@ 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",
@@ -65,6 +51,7 @@ const Wrapper = import_styled_components.default.div`
   padding: var(--spacing-xxs);
   cursor: pointer;
   border-radius: var(--radius-s, 8px);
+  align-items: center;
 
   :hover {
     background-color: var(--colors-surface-transparent-hover);
@@ -81,7 +68,7 @@ const InfoWrapper = import_styled_components.default.div`
   margin-left: var(--margin-s);
 `;
 const AssetItem = ({ name, ticker, id, onClick }) => {
-  return /* @__PURE__ */ import_react.default.createElement(Wrapper, { onClick: () => onClick({ name, ticker, id }) }, /* @__PURE__ */ import_react.default.createElement(TempAssetBadge, null), /* @__PURE__ */ import_react.default.createElement(InfoWrapper, null, /* @__PURE__ */ import_react.default.createElement(
+  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  id: 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    \"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\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      <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;AAYrB,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;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,YAAY,CAAC,EAAE,MAAM,QAAQ,IAAI,QAAQ,MAAsB;AAC1E,SACE,6BAAAD,QAAA,cAAC,WAAQ,SAAS,MAAM,QAAQ,EAAE,MAAM,QAAQ,GAAG,CAAC,KAClD,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.stories.js

@@ -48,7 +48,7 @@ const meta = {
     assets: Array.from({ length: 50 }).map((_, i) => ({
       name: `Bitcoin ${i}`,
       ticker: "BTC",
-      id: `bitcoin-${i}`
+      id: "bitcoin"
     })),
     onClick: testFn
   }
@@ -60,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) => ({\n      name: `Bitcoin ${i}`,\n      ticker: \"BTC\",\n      id: `bitcoin-${i}`,\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\" });\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,WAAW,CAAC;AAAA,IAClB,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,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/NetworkItem/NetworkItem.js

@@ -35,21 +35,7 @@ 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",
@@ -63,6 +49,7 @@ const Wrapper = import_styled_components.default.div`
   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 +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",

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\";\n\ntype NetworkItemProps = {\n  name: string;\n  onClick: () => 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    \"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\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 }: NetworkItemProps) => {\n  return (\n    <Wrapper onClick={onClick}>\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      </InfoWrapper>\n    </Wrapper>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAAqB;AAOrB,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,cAAc,CAAC,EAAE,MAAM,QAAQ,MAAwB;AAClE,SACE,6BAAAD,QAAA,cAAC,WAAQ,WACP,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,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 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;",
+  "names": ["styled", "React"]
 }

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

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

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

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

@@ -39,7 +39,7 @@ const NetworkList = ({
   onClick
 }) => {
   const renderNetworkItem = (0, import_react.useCallback)(
-    ({ name, id }) => /* @__PURE__ */ import_react.default.createElement(import_NetworkItem.NetworkItem, { name, onClick: () => onClick(id) }),
+    (network) => /* @__PURE__ */ import_react.default.createElement(import_NetworkItem.NetworkItem, { ...network, onClick: () => onClick(network.id) }),
     [onClick]
   );
   return /* @__PURE__ */ import_react.default.createElement(import_VirtualList.VirtualList, { items: networks, itemHeight: 64, renderItem: renderNetworkItem });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/NetworkList/NetworkList.tsx"],
-  "sourcesContent": ["import React, { useCallback } from \"react\";\nimport { NetworkItem } from \"../NetworkItem/NetworkItem\";\nimport { VirtualList } from \"../VirtualList/VirtualList\";\n\ntype Network = { name: string; id: string };\n\nexport const NetworkList = ({\n  networks,\n  onClick,\n}: {\n  networks: Network[];\n  onClick: (networkId: string) => void;\n}) => {\n  const renderNetworkItem = useCallback(\n    ({ name, id }: Network) => <NetworkItem name={name} onClick={() => onClick(id)} />,\n    [onClick],\n  );\n\n  return <VirtualList items={networks} itemHeight={64} renderItem={renderNetworkItem} />;\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AACnC,yBAA4B;AAC5B,yBAA4B;AAIrB,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AACF,MAGM;AACJ,QAAM,wBAAoB;AAAA,IACxB,CAAC,EAAE,MAAM,GAAG,MAAe,6BAAAA,QAAA,cAAC,kCAAY,MAAY,SAAS,MAAM,QAAQ,EAAE,GAAG;AAAA,IAChF,CAAC,OAAO;AAAA,EACV;AAEA,SAAO,6BAAAA,QAAA,cAAC,kCAAY,OAAO,UAAU,YAAY,IAAI,YAAY,mBAAmB;AACtF;",
+  "sourcesContent": ["import React, { useCallback } from \"react\";\nimport { Network, NetworkItem } from \"../NetworkItem/NetworkItem\";\nimport { VirtualList } from \"../VirtualList/VirtualList\";\n\nexport const NetworkList = ({\n  networks,\n  onClick,\n}: {\n  networks: Network[];\n  onClick: (networkId: string) => void;\n}) => {\n  const renderNetworkItem = useCallback(\n    (network: Network) => <NetworkItem {...network} onClick={() => onClick(network.id)} />,\n    [onClick],\n  );\n\n  return <VirtualList items={networks} itemHeight={64} renderItem={renderNetworkItem} />;\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,kCAAa,GAAG,SAAS,SAAS,MAAM,QAAQ,QAAQ,EAAE,GAAG;AAAA,IACpF,CAAC,OAAO;AAAA,EACV;AAEA,SAAO,6BAAAA,QAAA,cAAC,kCAAY,OAAO,UAAU,YAAY,IAAI,YAAY,mBAAmB;AACtF;",
   "names": ["React"]
 }