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

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 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  return (\n    <VirtualList\n      itemHeight={64}\n      count={assets.length}\n      renderItem={(i: number) => (\n        <AssetItem name={assets[i].name} ticker={assets[i].ticker} onClick={onClick} />\n      )}\n    />\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,uBAAqC;AACrC,yBAA4B;AAErB,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AACF,MAGM;AACJ,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,YAAY;AAAA,MACZ,OAAO,OAAO;AAAA,MACd,YAAY,CAAC,MACX,6BAAAA,QAAA,cAAC,8BAAU,MAAM,OAAO,CAAC,EAAE,MAAM,QAAQ,OAAO,CAAC,EAAE,QAAQ,SAAkB;AAAA;AAAA,EAEjF;AAEJ;",
+  "sourcesContent": ["import React, { useCallback } from \"react\";\nimport { AssetItem, AssetType } from \"../AssetItem/AssetItem\";\nimport { VirtualList } from \"../VirtualList/VirtualList\";\n\nexport const AssetList = ({\n  assets,\n  onClick,\n  onVisibleItemsScrollEnd,\n}: {\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-${i}`
+    })),
     onClick: testFn
   }
 };

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-${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;",
   "names": ["React"]
 }

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

@@ -37,26 +37,27 @@ var import_libs = require("../../libs");
 const Wrapper = import_styled_components.default.div`
   ${(0, import_libs.withTokens)(
   "spacing-s",
-  "spacing-xs",
+  "spacing-xxs",
   "radius-s",
   "colors-surface-transparent-subdued-default",
   "colors-content-subdued-default-default"
 )}
 
   display: flex;
-  width: 328px;
   height: 40px;
   min-width: 328px;
   padding: 0px var(--spacing-s, 16px);
   align-items: center;
-  gap: var(--spacing-xs, 8px);
+  gap: var(--spacing-xxs, 8px);
 
   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-xs\",\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-xs, 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

@@ -0,0 +1,92 @@
+"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 NetworkItem_exports = {};
+__export(NetworkItem_exports, {
+  NetworkItem: () => NetworkItem
+});
+module.exports = __toCommonJS(NetworkItem_exports);
+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"
+      }
+    }
+  ))
+);
+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"
+)}
+  display: flex;
+  padding: var(--spacing-xxs);
+  cursor: pointer;
+  border-radius: var(--radius-s, 8px);
+
+  :hover {
+    background-color: var(--colors-surface-transparent-hover);
+  }
+
+  :active {
+    background-color: var(--colors-surface-transparent-pressed);
+  }
+`;
+const InfoWrapper = import_styled_components.default.div`
+  display: flex;
+  flex-direction: column;
+  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(
+    import_components.Text,
+    {
+      variant: "largeLineHeight",
+      fontWeight: "semiBold",
+      color: "var(--colors-content-default-default)"
+    },
+    name
+  )));
+};
+//# sourceMappingURL=NetworkItem.js.map

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

@@ -0,0 +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"]
+}

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

@@ -0,0 +1,43 @@
+"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 NetworkItem_stories_exports = {};
+__export(NetworkItem_stories_exports, {
+  Default: () => Default,
+  TestNetworkItem: () => TestNetworkItem,
+  default: () => NetworkItem_stories_default
+});
+module.exports = __toCommonJS(NetworkItem_stories_exports);
+var import_NetworkItem = require("./NetworkItem");
+var import_test = require("@storybook/test");
+const meta = {
+  component: import_NetworkItem.NetworkItem,
+  title: "PreLdls/Components/NetworkItem",
+  tags: ["autodocs"],
+  args: { name: "Bitcoin" }
+};
+var NetworkItem_stories_default = meta;
+const Default = {};
+const TestNetworkItem = {
+  play: async ({ canvasElement }) => {
+    const canvas = (0, import_test.within)(canvasElement);
+    const name = canvas.getByText("Bitcoin");
+    await (0, import_test.expect)(name).toBeInTheDocument();
+  }
+};
+//# sourceMappingURL=NetworkItem.stories.js.map

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

@@ -0,0 +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;",
+  "names": []
+}

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

@@ -0,0 +1,47 @@
+"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 NetworkList_exports = {};
+__export(NetworkList_exports, {
+  NetworkList: () => NetworkList
+});
+module.exports = __toCommonJS(NetworkList_exports);
+var import_react = __toESM(require("react"));
+var import_NetworkItem = require("../NetworkItem/NetworkItem");
+var import_VirtualList = require("../VirtualList/VirtualList");
+const NetworkList = ({
+  networks,
+  onClick
+}) => {
+  const renderNetworkItem = (0, import_react.useCallback)(
+    ({ name, id }) => /* @__PURE__ */ import_react.default.createElement(import_NetworkItem.NetworkItem, { name, onClick: () => onClick(id) }),
+    [onClick]
+  );
+  return /* @__PURE__ */ import_react.default.createElement(import_VirtualList.VirtualList, { items: networks, itemHeight: 64, renderItem: renderNetworkItem });
+};
+//# sourceMappingURL=NetworkList.js.map

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

@@ -0,0 +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;",
+  "names": ["React"]
+}

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

@@ -0,0 +1,62 @@
+"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 NetworkList_stories_exports = {};
+__export(NetworkList_stories_exports, {
+  Default: () => Default,
+  TestNetworkClick: () => TestNetworkClick,
+  default: () => NetworkList_stories_default
+});
+module.exports = __toCommonJS(NetworkList_stories_exports);
+var import_react = __toESM(require("react"));
+var import_NetworkList = require("./NetworkList");
+var import_test = require("@storybook/test");
+const testFn = (0, import_test.fn)();
+const meta = {
+  component: import_NetworkList.NetworkList,
+  decorators: [
+    (Story) => /* @__PURE__ */ import_react.default.createElement("div", { style: { height: "400px" } }, /* @__PURE__ */ import_react.default.createElement(Story, null))
+  ],
+  title: "PreLdls/Components/NetworkList",
+  tags: ["autodocs"],
+  args: {
+    networks: Array.from({ length: 50 }, (_, i) => ({ name: `Bitcoin ${i}`, id: `btc${i}` })),
+    onClick: testFn
+  }
+};
+var NetworkList_stories_default = meta;
+const Default = {};
+const TestNetworkClick = {
+  play: async ({ canvasElement }) => {
+    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("btc1");
+  }
+};
+//# sourceMappingURL=NetworkList.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/pre-ldls/components/NetworkList/NetworkList.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { NetworkList } from \"./NetworkList\";\nimport { expect, fn, userEvent, within } from \"@storybook/test\";\n\nconst testFn = fn();\n\nconst meta: Meta<typeof NetworkList> = {\n  component: NetworkList,\n  decorators: [\n    Story => (\n      <div style={{ height: \"400px\" }}>\n        <Story />\n      </div>\n    ),\n  ],\n  title: \"PreLdls/Components/NetworkList\",\n  tags: [\"autodocs\"],\n  args: {\n    networks: Array.from({ length: 50 }, (_, i) => ({ name: `Bitcoin ${i}`, id: `btc${i}` })),\n    onClick: testFn,\n  },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof NetworkList>;\n\nexport const Default: Story = {};\n\nexport const TestNetworkClick: 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(\"btc1\");\n  },\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,yBAA4B;AAC5B,kBAA8C;AAE9C,MAAM,aAAS,gBAAG;AAElB,MAAM,OAAiC;AAAA,EACrC,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,UAAU,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,CAAC,GAAG,OAAO,EAAE,MAAM,WAAW,CAAC,IAAI,IAAI,MAAM,CAAC,GAAG,EAAE;AAAA,IACxF,SAAS;AAAA,EACX;AACF;AACA,IAAO,8BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,mBAA0B;AAAA,EACrC,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,MAAM;AAAA,EAClD;AACF;",
+  "names": ["React"]
+}

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

@@ -0,0 +1,54 @@
+"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 Tag_exports = {};
+__export(Tag_exports, {
+  Tag: () => Tag
+});
+module.exports = __toCommonJS(Tag_exports);
+var import_react = __toESM(require("react"));
+var import_components = require("../../../components");
+var import_libs = require("../../libs");
+var import_styled_components = __toESM(require("styled-components"));
+const Wrapper = import_styled_components.default.div`
+  ${(0, import_libs.withTokens)(
+  "colors-surface-transparent-subdued-default",
+  "colors-content-subdued-default-default",
+  "radius-xs",
+  "spacing-xxxs"
+)}
+
+  padding: 1px var(--spacing-xxxs);
+  border-radius: var(--radius-xs);
+  display: inline-flex;
+  background-color: var(--colors-surface-transparent-subdued-default);
+`;
+const Tag = ({ children }) => {
+  return /* @__PURE__ */ import_react.default.createElement(Wrapper, { "data-testid": "tag" }, /* @__PURE__ */ import_react.default.createElement(import_components.Text, { color: "var(--colors-content-subdued-default-default)", fontSize: "10px", lineHeight: "16px" }, children));
+};
+//# sourceMappingURL=Tag.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/pre-ldls/components/Tag/Tag.tsx"],
+  "sourcesContent": ["import React, { ReactNode } from \"react\";\nimport { Text } from \"../../../components\";\nimport { withTokens } from \"../../libs\";\nimport styled from \"styled-components\";\n\nconst Wrapper = styled.div`\n  ${withTokens(\n    \"colors-surface-transparent-subdued-default\",\n    \"colors-content-subdued-default-default\",\n    \"radius-xs\",\n    \"spacing-xxxs\",\n  )}\n\n  padding: 1px var(--spacing-xxxs);\n  border-radius: var(--radius-xs);\n  display: inline-flex;\n  background-color: var(--colors-surface-transparent-subdued-default);\n`;\n\nexport const Tag = ({ children }: { children: ReactNode }) => {\n  return (\n    <Wrapper data-testid=\"tag\">\n      <Text color=\"var(--colors-content-subdued-default-default)\" fontSize=\"10px\" lineHeight=\"16px\">\n        {children}\n      </Text>\n    </Wrapper>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAiC;AACjC,wBAAqB;AACrB,kBAA2B;AAC3B,+BAAmB;AAEnB,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQI,MAAM,MAAM,CAAC,EAAE,SAAS,MAA+B;AAC5D,SACE,6BAAAC,QAAA,cAAC,WAAQ,eAAY,SACnB,6BAAAA,QAAA,cAAC,0BAAK,OAAM,iDAAgD,UAAS,QAAO,YAAW,UACpF,QACH,CACF;AAEJ;",
+  "names": ["styled", "React"]
+}

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

@@ -0,0 +1,43 @@
+"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 Tag_stories_exports = {};
+__export(Tag_stories_exports, {
+  Default: () => Default,
+  TestTag: () => TestTag,
+  default: () => Tag_stories_default
+});
+module.exports = __toCommonJS(Tag_stories_exports);
+var import_Tag = require("./Tag");
+var import_test = require("@storybook/test");
+const meta = {
+  component: import_Tag.Tag,
+  title: "PreLdls/Components/Tag",
+  tags: ["autodocs"],
+  args: { children: "Native Segwit" }
+};
+var Tag_stories_default = meta;
+const Default = {};
+const TestTag = {
+  play: async ({ canvasElement }) => {
+    const canvas = (0, import_test.within)(canvasElement);
+    const input = canvas.getByTestId("tag");
+    await (0, import_test.expect)(input).toHaveTextContent("Native Segwit");
+  }
+};
+//# sourceMappingURL=Tag.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/pre-ldls/components/Tag/Tag.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { Tag } from \"./Tag\";\nimport { within, expect } from \"@storybook/test\";\n\nconst meta: Meta<typeof Tag> = {\n  component: Tag,\n  title: \"PreLdls/Components/Tag\",\n  tags: [\"autodocs\"],\n  args: { children: \"Native Segwit\" },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof Tag>;\n\nexport const Default: Story = {};\n\nexport const TestTag: Story = {\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n    const input = canvas.getByTestId(\"tag\");\n    await expect(input).toHaveTextContent(\"Native Segwit\");\n  },\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iBAAoB;AACpB,kBAA+B;AAE/B,MAAM,OAAyB;AAAA,EAC7B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM,EAAE,UAAU,gBAAgB;AACpC;AACA,IAAO,sBAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,UAAiB;AAAA,EAC5B,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AACnC,UAAM,QAAQ,OAAO,YAAY,KAAK;AACtC,cAAM,oBAAO,KAAK,EAAE,kBAAkB,eAAe;AAAA,EACvD;AACF;",
+  "names": []
+}

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

@@ -32,23 +32,69 @@ __export(VirtualList_exports, {
 });
 module.exports = __toCommonJS(VirtualList_exports);
 var import_react = __toESM(require("react"));
-var import_react_window = require("react-window");
-var import_react_virtualized_auto_sizer = __toESM(require("react-virtualized-auto-sizer"));
+var import_react_virtual = require("@tanstack/react-virtual");
+var import_components = require("../../../components");
+const DefaultLoadingComponent = () => /* @__PURE__ */ import_react.default.createElement(import_components.Flex, { justifyContent: "center", alignItems: "center", height: "76px" }, /* @__PURE__ */ import_react.default.createElement(import_components.InfiniteLoader, null));
 const VirtualList = ({
-  count,
   itemHeight,
+  overscan = 5,
+  LoadingComponent,
+  isLoading,
+  hasNextPage = false,
+  threshold = 5,
+  onVisibleItemsScrollEnd,
+  items,
   renderItem
 }) => {
-  return /* @__PURE__ */ import_react.default.createElement(import_react_virtualized_auto_sizer.default, { style: { height: "100%", width: "100%" } }, ({ height }) => /* @__PURE__ */ import_react.default.createElement(
-    import_react_window.FixedSizeList,
+  const parentRef = (0, import_react.useRef)(null);
+  const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
+    count: hasNextPage ? items.length + 1 : items.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => itemHeight,
+    overscan
+  });
+  (0, import_react.useEffect)(() => {
+    const items2 = rowVirtualizer.getVirtualItems();
+    if (!items2.length)
+      return;
+    const lastItem = items2[items2.length - 1];
+    if (lastItem.index >= items2.length - 1 - threshold && hasNextPage && !isLoading && onVisibleItemsScrollEnd) {
+      onVisibleItemsScrollEnd();
+    }
+  }, [
+    hasNextPage,
+    onVisibleItemsScrollEnd,
+    items.length,
+    isLoading,
+    rowVirtualizer.getVirtualItems()
+  ]);
+  const showCustomLoadingComponent = !!LoadingComponent;
+  return /* @__PURE__ */ import_react.default.createElement("div", { ref: parentRef, style: { width: "100%", height: "100%", overflow: "auto" } }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
     {
-      height,
-      itemCount: count,
-      itemSize: itemHeight,
-      layout: "vertical",
-      width: "100%"
+      style: {
+        height: `${rowVirtualizer.getTotalSize()}px`,
+        width: "100%",
+        position: "relative"
+      }
     },
-    ({ index, style }) => /* @__PURE__ */ import_react.default.createElement("div", { style }, renderItem(index))
-  ));
+    rowVirtualizer.getVirtualItems().map((virtualRow) => /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        key: virtualRow.index,
+        "data-index": virtualRow.index,
+        ref: rowVirtualizer.measureElement,
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          transform: `translateY(${virtualRow.start}px)`,
+          height: `${itemHeight}px`,
+          width: "100%"
+        }
+      },
+      renderItem(items[virtualRow.index])
+    ))
+  ), isLoading && (showCustomLoadingComponent ? LoadingComponent : /* @__PURE__ */ import_react.default.createElement(DefaultLoadingComponent, null)));
 };
 //# sourceMappingURL=VirtualList.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],
-  "sourcesContent": ["import React, { ReactNode } from \"react\";\nimport { FixedSizeList as List } from \"react-window\";\nimport AutoSizer from \"react-virtualized-auto-sizer\";\n\nexport const VirtualList = ({\n  count,\n  itemHeight,\n  renderItem,\n}: {\n  count: number;\n  itemHeight: number;\n  renderItem: (index: number) => ReactNode;\n}) => {\n  return (\n    <AutoSizer style={{ height: \"100%\", width: \"100%\" }}>\n      {({ height }: { height: number }) => (\n        <List\n          height={height}\n          itemCount={count}\n          itemSize={itemHeight}\n          layout=\"vertical\"\n          width=\"100%\"\n        >\n          {({ index, style }) => <div style={style}>{renderItem(index)}</div>}\n        </List>\n      )}\n    </AutoSizer>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAiC;AACjC,0BAAsC;AACtC,0CAAsB;AAEf,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,SACE,6BAAAA,QAAA,cAAC,oCAAAC,SAAA,EAAU,OAAO,EAAE,QAAQ,QAAQ,OAAO,OAAO,KAC/C,CAAC,EAAE,OAAO,MACT,6BAAAD,QAAA;AAAA,IAAC,oBAAAE;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,MACX,UAAU;AAAA,MACV,QAAO;AAAA,MACP,OAAM;AAAA;AAAA,IAEL,CAAC,EAAE,OAAO,MAAM,MAAM,6BAAAF,QAAA,cAAC,SAAI,SAAe,WAAW,KAAK,CAAE;AAAA,EAC/D,CAEJ;AAEJ;",
-  "names": ["React", "AutoSizer", "List"]
+  "sourcesContent": ["import React, { useEffect, useRef } from \"react\";\nimport { useVirtualizer } from \"@tanstack/react-virtual\";\nimport { Flex, InfiniteLoader } from \"../../../components\";\n\ninterface VirtualItem {\n  key: string | number | bigint;\n  index: number;\n  start: number;\n  end: number;\n  size: number;\n}\n\n/**\n * Props for the VirtualList component, which efficiently renders large lists\n * by virtualizing DOM nodes to improve performance.\n */\ntype VirtualListProps<T> = {\n  /**\n   * Height of each item in the list.\n   * This is used to calculate the total height of the list and the position of each item.\n   */\n  itemHeight: number;\n  /**\n   * Number of extra items to render outside the visible viewport for smoother scrolling.\n   * Defaults to 5.\n   */\n  overscan?: number;\n  /**\n   * React component or node to display when the list is loading additional items.\n   * If not provided, a default loading spinner will be used.\n   */\n  LoadingComponent?: React.ReactNode;\n  /**\n   * Indicates whether new items are currently being loaded.\n   */\n  isLoading?: boolean;\n  /**\n   * Indicates if there are more items to load.\n   */\n  hasNextPage?: boolean;\n  /**\n   * Number of items to check before the end of the list to trigger loading more items.\n   * Defaults to 5.\n   */\n  threshold?: number;\n  /**\n   * Callback function to be called when the user scrolls to the end of the visible items.\n   * This can be used to load more items when the user reaches the end of the list.\n   */\n  onVisibleItemsScrollEnd?: () => void;\n  /**\n   * Function to render each item in the list.\n   * Receives a single value from the items array as an argument and should return a React node.\n   */\n  renderItem: (item: T) => React.ReactNode;\n  /**\n   * The array of items which will be rendered\n   */\n  items: T[];\n};\n\nconst DefaultLoadingComponent = () => (\n  <Flex justifyContent=\"center\" alignItems=\"center\" height=\"76px\">\n    <InfiniteLoader />\n  </Flex>\n);\n\nexport const VirtualList = <T,>({\n  itemHeight,\n  overscan = 5,\n  LoadingComponent,\n  isLoading,\n  hasNextPage = false,\n  threshold = 5,\n  onVisibleItemsScrollEnd,\n  items,\n  renderItem,\n}: VirtualListProps<T>) => {\n  const parentRef = useRef<HTMLDivElement>(null);\n\n  const rowVirtualizer = useVirtualizer({\n    count: hasNextPage ? items.length + 1 : items.length,\n    getScrollElement: () => parentRef.current,\n    estimateSize: () => itemHeight,\n    overscan,\n  });\n\n  useEffect(() => {\n    const items = rowVirtualizer.getVirtualItems();\n    if (!items.length) return;\n    const lastItem = items[items.length - 1];\n\n    if (\n      lastItem.index >= items.length - 1 - threshold &&\n      hasNextPage &&\n      !isLoading &&\n      onVisibleItemsScrollEnd\n    ) {\n      onVisibleItemsScrollEnd();\n    }\n  }, [\n    hasNextPage,\n    onVisibleItemsScrollEnd,\n    items.length,\n    isLoading,\n    rowVirtualizer.getVirtualItems(),\n  ]);\n\n  const showCustomLoadingComponent = !!LoadingComponent;\n\n  return (\n    <div ref={parentRef} style={{ width: \"100%\", height: \"100%\", overflow: \"auto\" }}>\n      <div\n        style={{\n          height: `${rowVirtualizer.getTotalSize()}px`,\n          width: \"100%\",\n          position: \"relative\",\n        }}\n      >\n        {rowVirtualizer.getVirtualItems().map((virtualRow: VirtualItem) => (\n          <div\n            key={virtualRow.index}\n            data-index={virtualRow.index}\n            ref={rowVirtualizer.measureElement}\n            style={{\n              position: \"absolute\",\n              top: 0,\n              left: 0,\n              transform: `translateY(${virtualRow.start}px)`,\n              height: `${itemHeight}px`,\n              width: \"100%\",\n            }}\n          >\n            {renderItem(items[virtualRow.index])}\n          </div>\n        ))}\n      </div>\n      {isLoading && (showCustomLoadingComponent ? LoadingComponent : <DefaultLoadingComponent />)}\n    </div>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyC;AACzC,2BAA+B;AAC/B,wBAAqC;AA2DrC,MAAM,0BAA0B,MAC9B,6BAAAA,QAAA,cAAC,0BAAK,gBAAe,UAAS,YAAW,UAAS,QAAO,UACvD,6BAAAA,QAAA,cAAC,sCAAe,CAClB;AAGK,MAAM,cAAc,CAAK;AAAA,EAC9B;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AACzB,QAAM,gBAAY,qBAAuB,IAAI;AAE7C,QAAM,qBAAiB,qCAAe;AAAA,IACpC,OAAO,cAAc,MAAM,SAAS,IAAI,MAAM;AAAA,IAC9C,kBAAkB,MAAM,UAAU;AAAA,IAClC,cAAc,MAAM;AAAA,IACpB;AAAA,EACF,CAAC;AAED,8BAAU,MAAM;AACd,UAAMC,SAAQ,eAAe,gBAAgB;AAC7C,QAAI,CAACA,OAAM;AAAQ;AACnB,UAAM,WAAWA,OAAMA,OAAM,SAAS,CAAC;AAEvC,QACE,SAAS,SAASA,OAAM,SAAS,IAAI,aACrC,eACA,CAAC,aACD,yBACA;AACA,8BAAwB;AAAA,IAC1B;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA,eAAe,gBAAgB;AAAA,EACjC,CAAC;AAED,QAAM,6BAA6B,CAAC,CAAC;AAErC,SACE,6BAAAD,QAAA,cAAC,SAAI,KAAK,WAAW,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAQ,UAAU,OAAO,KAC5E,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,QAAQ,GAAG,eAAe,aAAa,CAAC;AAAA,QACxC,OAAO;AAAA,QACP,UAAU;AAAA,MACZ;AAAA;AAAA,IAEC,eAAe,gBAAgB,EAAE,IAAI,CAAC,eACrC,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,WAAW;AAAA,QAChB,cAAY,WAAW;AAAA,QACvB,KAAK,eAAe;AAAA,QACpB,OAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,WAAW,cAAc,WAAW,KAAK;AAAA,UACzC,QAAQ,GAAG,UAAU;AAAA,UACrB,OAAO;AAAA,QACT;AAAA;AAAA,MAEC,WAAW,MAAM,WAAW,KAAK,CAAC;AAAA,IACrC,CACD;AAAA,EACH,GACC,cAAc,6BAA6B,mBAAmB,6BAAAA,QAAA,cAAC,6BAAwB,EAC1F;AAEJ;",
+  "names": ["React", "items"]
 }