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

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

@@ -37,7 +37,7 @@ 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"
@@ -49,7 +49,7 @@ const Wrapper = import_styled_components.default.div`
   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));

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

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

@@ -52,14 +52,14 @@ const TempAssetBadge = () => (
 );
 const Wrapper = import_styled_components.default.div`
   ${(0, import_libs.withTokens)(
-  "spacing-xs",
-  "marging-s",
+  "spacing-xxs",
+  "margin-s",
   "colors-content-default-default",
   "colors-surface-transparent-hover",
   "colors-surface-transparent-pressed"
 )}
   display: flex;
-  padding: var(--spacing-xs);
+  padding: var(--spacing-xxs);
   cursor: pointer;
 
   :hover {
@@ -74,7 +74,7 @@ const InfoWrapper = import_styled_components.default.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin-left: var(--marging-s);
+  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(

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-xs\",\n    \"marging-s\",\n    \"colors-content-default-default\",\n    \"colors-surface-transparent-hover\",\n    \"colors-surface-transparent-pressed\",\n  )}\n  display: flex;\n  padding: var(--spacing-xs);\n  cursor: pointer;\n\n  :hover {\n    background-color: var(--colors-surface-transparent-hover);\n  }\n\n  :active {\n    background-color: var(--colors-surface-transparent-pressed);\n  }\n`;\n\nconst InfoWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin-left: var(--marging-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"],
+  "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    \"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\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;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcH,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/NetworkList/NetworkList.js

@@ -38,13 +38,10 @@ const NetworkList = ({
   networks,
   onClick
 }) => {
-  return /* @__PURE__ */ import_react.default.createElement(
-    import_VirtualList.VirtualList,
-    {
-      itemHeight: 64,
-      count: networks.length,
-      renderItem: (i) => /* @__PURE__ */ import_react.default.createElement(import_NetworkItem.NetworkItem, { name: networks[i].name, onClick: () => onClick(networks[i].id) })
-    }
+  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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/NetworkList/NetworkList.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport { NetworkItem } from \"../NetworkItem/NetworkItem\";\nimport { VirtualList } from \"../VirtualList/VirtualList\";\n\nexport const NetworkList = ({\n  networks,\n  onClick,\n}: {\n  networks: { name: string; id: string }[];\n  onClick: (networkId: string) => void;\n}) => {\n  return (\n    <VirtualList\n      itemHeight={64}\n      count={networks.length}\n      renderItem={(i: number) => (\n        <NetworkItem name={networks[i].name} onClick={() => onClick(networks[i].id)} />\n      )}\n    />\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,yBAA4B;AAC5B,yBAA4B;AAErB,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AACF,MAGM;AACJ,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,YAAY;AAAA,MACZ,OAAO,SAAS;AAAA,MAChB,YAAY,CAAC,MACX,6BAAAA,QAAA,cAAC,kCAAY,MAAM,SAAS,CAAC,EAAE,MAAM,SAAS,MAAM,QAAQ,SAAS,CAAC,EAAE,EAAE,GAAG;AAAA;AAAA,EAEjF;AAEJ;",
+  "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/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

@@ -36,7 +36,6 @@ 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,
@@ -44,24 +43,31 @@ const VirtualList = ({
   hasNextPage = false,
   threshold = 5,
   onVisibleItemsScrollEnd,
+  items,
   renderItem
 }) => {
   const parentRef = (0, import_react.useRef)(null);
   const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
-    count: hasNextPage ? count + 1 : count,
+    count: hasNextPage ? items.length + 1 : items.length,
     getScrollElement: () => parentRef.current,
     estimateSize: () => itemHeight,
     overscan
   });
   (0, import_react.useEffect)(() => {
-    const items = rowVirtualizer.getVirtualItems();
-    if (!items.length)
+    const items2 = rowVirtualizer.getVirtualItems();
+    if (!items2.length)
       return;
-    const lastItem = items[items.length - 1];
-    if (lastItem.index >= count - 1 - threshold && hasNextPage && !isLoading && onVisibleItemsScrollEnd) {
+    const lastItem = items2[items2.length - 1];
+    if (lastItem.index >= items2.length - 1 - threshold && hasNextPage && !isLoading && onVisibleItemsScrollEnd) {
       onVisibleItemsScrollEnd();
     }
-  }, [hasNextPage, onVisibleItemsScrollEnd, count, isLoading, rowVirtualizer.getVirtualItems()]);
+  }, [
+    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",
@@ -87,7 +93,7 @@ const VirtualList = ({
           width: "100%"
         }
       },
-      renderItem(virtualRow.index)
+      renderItem(items[virtualRow.index])
     ))
   ), isLoading && (showCustomLoadingComponent ? LoadingComponent : /* @__PURE__ */ import_react.default.createElement(DefaultLoadingComponent, null)));
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],
-  "sourcesContent": ["import React, { useEffect, useRef } 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 = {\n  /**\n   * Total number of items in the list.\n   * This is used to calculate the total height of the list.\n   */\n  count: number;\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 the index of the item as an argument and should return a React node.\n   */\n  renderItem: (index: number) => React.ReactNode;\n};\n\nconst DefaultLoadingComponent = () => (\n  <Flex justifyContent=\"center\" alignItems=\"center\" height=\"76px\">\n    <InfiniteLoader />\n  </Flex>\n);\n\nexport const VirtualList = ({\n  count,\n  itemHeight,\n  overscan = 5,\n  LoadingComponent,\n  isLoading,\n  hasNextPage = false,\n  threshold = 5,\n  onVisibleItemsScrollEnd,\n  renderItem,\n}: VirtualListProps) => {\n  const parentRef = useRef<HTMLDivElement>(null);\n\n  const rowVirtualizer = useVirtualizer({\n    count: hasNextPage ? count + 1 : count,\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 >= count - 1 - threshold &&\n      hasNextPage &&\n      !isLoading &&\n      onVisibleItemsScrollEnd\n    ) {\n      onVisibleItemsScrollEnd();\n    }\n  }, [hasNextPage, onVisibleItemsScrollEnd, count, isLoading, rowVirtualizer.getVirtualItems()]);\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(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;AA4DrC,MAAM,0BAA0B,MAC9B,6BAAAA,QAAA,cAAC,0BAAK,gBAAe,UAAS,YAAW,UAAS,QAAO,UACvD,6BAAAA,QAAA,cAAC,sCAAe,CAClB;AAGK,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,YAAY;AAAA,EACZ;AAAA,EACA;AACF,MAAwB;AACtB,QAAM,gBAAY,qBAAuB,IAAI;AAE7C,QAAM,qBAAiB,qCAAe;AAAA,IACpC,OAAO,cAAc,QAAQ,IAAI;AAAA,IACjC,kBAAkB,MAAM,UAAU;AAAA,IAClC,cAAc,MAAM;AAAA,IACpB;AAAA,EACF,CAAC;AAED,8BAAU,MAAM;AACd,UAAM,QAAQ,eAAe,gBAAgB;AAC7C,QAAI,CAAC,MAAM;AAAQ;AACnB,UAAM,WAAW,MAAM,MAAM,SAAS,CAAC;AAEvC,QACE,SAAS,SAAS,QAAQ,IAAI,aAC9B,eACA,CAAC,aACD,yBACA;AACA,8BAAwB;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,aAAa,yBAAyB,OAAO,WAAW,eAAe,gBAAgB,CAAC,CAAC;AAE7F,QAAM,6BAA6B,CAAC,CAAC;AAErC,SACE,6BAAAA,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,WAAW,KAAK;AAAA,IAC9B,CACD;AAAA,EACH,GACC,cAAc,6BAA6B,mBAAmB,6BAAAA,QAAA,cAAC,6BAAwB,EAC1F;AAEJ;",
-  "names": ["React"]
+  "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"]
 }

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

@@ -38,6 +38,7 @@ var import_react = __toESM(require("react"));
 var import_VirtualList = require("./VirtualList");
 var import_addon_actions = require("@storybook/addon-actions");
 var import_test = require("@storybook/test");
+const items = Array.from({ length: 50 }, (_, i) => ({ i }));
 const meta = {
   component: import_VirtualList.VirtualList,
   decorators: [
@@ -54,9 +55,6 @@ const meta = {
     }
   },
   argTypes: {
-    count: {
-      description: "Total number of items in the list."
-    },
     itemHeight: {
       description: "Height of each item in the list."
     },
@@ -95,7 +93,6 @@ const meta = {
   },
   args: {
     itemHeight: 64,
-    count: 50,
     LoadingComponent: void 0,
     isLoading: false,
     overscan: 5,
@@ -103,21 +100,22 @@ const meta = {
     threshold: 5,
     onVisibleItemsScrollEnd: () => {
     },
-    renderItem: (index) => /* @__PURE__ */ import_react.default.createElement("h1", { tabIndex: index }, "Item #", index)
+    items,
+    renderItem: ({ i }) => /* @__PURE__ */ import_react.default.createElement("h1", { tabIndex: i }, "Item #", i)
   }
 };
 var VirtualList_stories_default = meta;
 const Default = {
   args: {
-    count: 20,
     itemHeight: 50,
     overscan: 5,
-    renderItem: (index) => /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 50, backgroundColor: "lightblue", border: "1px solid black" } }, "Item ", index)
+    items,
+    renderItem: ({ i }) => /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 50, backgroundColor: "lightblue", border: "1px solid black" } }, "Item ", i)
   }
 };
 const WithPagination = {
   render: (args) => {
-    const [items, setItems] = (0, import_react.useState)(Array.from({ length: args.count }, (_, i) => i));
+    const [items2, setItems] = (0, import_react.useState)(Array.from({ length: 50 }, (_, i) => i));
     const [isFetching, setIsFetching] = (0, import_react.useState)(false);
     const handleFetchNextPage = async () => {
       (0, import_addon_actions.action)("fetchNextPage")();
@@ -132,16 +130,15 @@ const WithPagination = {
       import_VirtualList.VirtualList,
       {
         ...args,
-        count: items.length,
         isLoading: isFetching,
         onVisibleItemsScrollEnd: handleFetchNextPage,
         hasNextPage: true,
-        renderItem: (index) => /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 50, backgroundColor: "lightgreen", border: "1px solid black" } }, "Item ", items[index])
+        items: items2,
+        renderItem: (item) => /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 50, backgroundColor: "lightgreen", border: "1px solid black" } }, "Item ", item)
       }
     );
   },
   args: {
-    count: 50,
     itemHeight: 50,
     overscan: 5,
     hasNextPage: true,

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

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

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

@@ -15,11 +15,15 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var components_exports = {};
 module.exports = __toCommonJS(components_exports);
+__reExport(components_exports, require("./AccountItem/AccountItem"), module.exports);
+__reExport(components_exports, require("./AccountList/AccountList"), module.exports);
+__reExport(components_exports, require("./Address/Address"), module.exports);
 __reExport(components_exports, require("./AssetItem/AssetItem"), module.exports);
 __reExport(components_exports, require("./AssetList/AssetList"), module.exports);
 __reExport(components_exports, require("./Input/Input"), module.exports);
 __reExport(components_exports, require("./NetworkItem/NetworkItem"), module.exports);
 __reExport(components_exports, require("./NetworkList/NetworkList"), module.exports);
 __reExport(components_exports, require("./Search/Search"), module.exports);
+__reExport(components_exports, require("./Tag/Tag"), module.exports);
 __reExport(components_exports, require("./VirtualList/VirtualList"), module.exports);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/pre-ldls/components/index.ts"],
-  "sourcesContent": ["export * from \"./AssetItem/AssetItem\";\nexport * from \"./AssetList/AssetList\";\nexport * from \"./Input/Input\";\nexport * from \"./NetworkItem/NetworkItem\";\nexport * from \"./NetworkList/NetworkList\";\nexport * from \"./Search/Search\";\nexport * from \"./VirtualList/VirtualList\";\n"],
-  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,kCAAd;AACA,+BAAc,kCADd;AAEA,+BAAc,0BAFd;AAGA,+BAAc,sCAHd;AAIA,+BAAc,sCAJd;AAKA,+BAAc,4BALd;AAMA,+BAAc,sCANd;",
+  "sourcesContent": ["export * from \"./AccountItem/AccountItem\";\nexport * from \"./AccountList/AccountList\";\nexport * from \"./Address/Address\";\nexport * from \"./AssetItem/AssetItem\";\nexport * from \"./AssetList/AssetList\";\nexport * from \"./Input/Input\";\nexport * from \"./NetworkItem/NetworkItem\";\nexport * from \"./NetworkList/NetworkList\";\nexport * from \"./Search/Search\";\nexport * from \"./Tag/Tag\";\nexport * from \"./VirtualList/VirtualList\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,sCAAd;AACA,+BAAc,sCADd;AAEA,+BAAc,8BAFd;AAGA,+BAAc,kCAHd;AAIA,+BAAc,kCAJd;AAKA,+BAAc,0BALd;AAMA,+BAAc,sCANd;AAOA,+BAAc,sCAPd;AAQA,+BAAc,4BARd;AASA,+BAAc,sBATd;AAUA,+BAAc,sCAVd;",
   "names": []
 }

package/lib/cjs/pre-ldls/libs/index.js

@@ -34,8 +34,23 @@ module.exports = __toCommonJS(libs_exports);
 var import_memoize = __toESM(require("lodash/memoize"));
 var import_styled_components = require("styled-components");
 var import_design_tokens = require("./design-tokens");
-const extraOther = {
-  "radius-s": "8px"
+const overrideOther = {
+  "radius-s": "8px",
+  // missing from tokens
+  "radius-xs": "4px",
+  // missing from tokens
+  "margin-xs": "8px",
+  // redefines marging-xs
+  "margin-s": "16px",
+  // redefines marging-s
+  "margin-m": "24px",
+  // redefines marging-m
+  "margin-l": "32px",
+  // redefines marging-l
+  "spacing-xs": "12px",
+  // override from "spacing-xxs": "12px"
+  "spacing-xxs": "8px"
+  // override from "spacing-xs": "8px"
 };
 const overrideColor = {
   light: {
@@ -56,7 +71,7 @@ const withTokens = (...usedTokens) => {
         return [];
       return [[`--${color}`, value]];
     });
-    const otherEntries = [import_design_tokens.spacing, extraOther].flatMap(Object.entries).flatMap(([key, value]) => {
+    const otherEntries = [import_design_tokens.spacing, overrideOther].flatMap(Object.entries).flatMap(([key, value]) => {
       if (!usedTokens.includes(key))
         return [];
       return [[`--${key}`, value]];

package/lib/cjs/pre-ldls/libs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/pre-ldls/libs/index.ts"],
-  "sourcesContent": ["import memoize from \"lodash/memoize\";\nimport { css, DefaultTheme } from \"styled-components\";\nimport { dark, light, ModeColors, spacing, SpacingScale } from \"./design-tokens\";\n\n// Add temporarily missing tokens here\nconst extraOther = {\n  \"radius-s\": \"8px\",\n} as const;\n\n// override colours based on Figma differing from design-tokens.ts\nconst overrideColor = {\n  light: {\n    \"surface-transparent-hover\": \"#0000000D\",\n    \"surface-transparent-pressed\": \"#0000001A\",\n  },\n  dark: {},\n} as const;\n\ntype ColorToken = `colors-${keyof ModeColors}`;\ntype OtherToken = keyof (SpacingScale & typeof extraOther);\n\nexport const withTokens = (...usedTokens: Array<ColorToken | OtherToken>) => {\n  const filterTokens = memoize((theme: DefaultTheme[\"theme\"]) => {\n    const colors = {\n      dark: { ...dark, ...overrideColor.dark },\n      light: { ...light, ...overrideColor.light },\n    }[theme];\n\n    const colorEntries = Object.entries(colors).flatMap(([key, value]) => {\n      const color = `colors-${key}` as ColorToken;\n      if (!usedTokens.includes(color)) return [];\n      return [[`--${color}`, value]];\n    });\n    const otherEntries = [spacing, extraOther].flatMap(Object.entries).flatMap(([key, value]) => {\n      if (!usedTokens.includes(key as OtherToken)) return [];\n      return [[`--${key}`, value]];\n    });\n\n    return Object.fromEntries([...colorEntries, ...otherEntries]);\n  });\n\n  return css(({ theme }) => filterTokens(theme.colors.type as DefaultTheme[\"theme\"]));\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAoB;AACpB,+BAAkC;AAClC,2BAA+D;AAG/D,MAAM,aAAa;AAAA,EACjB,YAAY;AACd;AAGA,MAAM,gBAAgB;AAAA,EACpB,OAAO;AAAA,IACL,6BAA6B;AAAA,IAC7B,+BAA+B;AAAA,EACjC;AAAA,EACA,MAAM,CAAC;AACT;AAKO,MAAM,aAAa,IAAI,eAA+C;AAC3E,QAAM,mBAAe,eAAAA,SAAQ,CAAC,UAAiC;AAC7D,UAAM,SAAS;AAAA,MACb,MAAM,EAAE,GAAG,2BAAM,GAAG,cAAc,KAAK;AAAA,MACvC,OAAO,EAAE,GAAG,4BAAO,GAAG,cAAc,MAAM;AAAA,IAC5C,EAAE,KAAK;AAEP,UAAM,eAAe,OAAO,QAAQ,MAAM,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AACpE,YAAM,QAAQ,UAAU,GAAG;AAC3B,UAAI,CAAC,WAAW,SAAS,KAAK;AAAG,eAAO,CAAC;AACzC,aAAO,CAAC,CAAC,KAAK,KAAK,IAAI,KAAK,CAAC;AAAA,IAC/B,CAAC;AACD,UAAM,eAAe,CAAC,8BAAS,UAAU,EAAE,QAAQ,OAAO,OAAO,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AAC3F,UAAI,CAAC,WAAW,SAAS,GAAiB;AAAG,eAAO,CAAC;AACrD,aAAO,CAAC,CAAC,KAAK,GAAG,IAAI,KAAK,CAAC;AAAA,IAC7B,CAAC;AAED,WAAO,OAAO,YAAY,CAAC,GAAG,cAAc,GAAG,YAAY,CAAC;AAAA,EAC9D,CAAC;AAED,aAAO,8BAAI,CAAC,EAAE,MAAM,MAAM,aAAa,MAAM,OAAO,IAA6B,CAAC;AACpF;",
+  "sourcesContent": ["import memoize from \"lodash/memoize\";\nimport { css, DefaultTheme } from \"styled-components\";\nimport { dark, light, ModeColors, spacing, SpacingScale } from \"./design-tokens\";\n\n// Add temporarily missing and override incorrect tokens here\nconst overrideOther = {\n  \"radius-s\": \"8px\", // missing from tokens\n  \"radius-xs\": \"4px\", // missing from tokens\n  \"margin-xs\": \"8px\", // redefines marging-xs\n  \"margin-s\": \"16px\", // redefines marging-s\n  \"margin-m\": \"24px\", // redefines marging-m\n  \"margin-l\": \"32px\", // redefines marging-l\n\n  \"spacing-xs\": \"12px\", // override from \"spacing-xxs\": \"12px\"\n  \"spacing-xxs\": \"8px\", // override from \"spacing-xs\": \"8px\"\n} as const;\n\n// override colours based on Figma differing from design-tokens.ts\nconst overrideColor = {\n  light: {\n    \"surface-transparent-hover\": \"#0000000D\",\n    \"surface-transparent-pressed\": \"#0000001A\",\n  },\n  dark: {},\n} as const;\n\ntype ColorToken = `colors-${keyof ModeColors}`;\ntype OtherToken = keyof (SpacingScale & typeof overrideOther);\n\nexport const withTokens = (...usedTokens: Array<ColorToken | OtherToken>) => {\n  const filterTokens = memoize((theme: DefaultTheme[\"theme\"]) => {\n    const colors = {\n      dark: { ...dark, ...overrideColor.dark },\n      light: { ...light, ...overrideColor.light },\n    }[theme];\n\n    const colorEntries = Object.entries(colors).flatMap(([key, value]) => {\n      const color = `colors-${key}` as ColorToken;\n      if (!usedTokens.includes(color)) return [];\n      return [[`--${color}`, value]];\n    });\n    const otherEntries = [spacing, overrideOther]\n      .flatMap(Object.entries)\n      .flatMap(([key, value]) => {\n        if (!usedTokens.includes(key as OtherToken)) return [];\n        return [[`--${key}`, value]];\n      });\n\n    return Object.fromEntries([...colorEntries, ...otherEntries]);\n  });\n\n  return css(({ theme }) => filterTokens(theme.colors.type as DefaultTheme[\"theme\"]));\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAoB;AACpB,+BAAkC;AAClC,2BAA+D;AAG/D,MAAM,gBAAgB;AAAA,EACpB,YAAY;AAAA;AAAA,EACZ,aAAa;AAAA;AAAA,EACb,aAAa;AAAA;AAAA,EACb,YAAY;AAAA;AAAA,EACZ,YAAY;AAAA;AAAA,EACZ,YAAY;AAAA;AAAA,EAEZ,cAAc;AAAA;AAAA,EACd,eAAe;AAAA;AACjB;AAGA,MAAM,gBAAgB;AAAA,EACpB,OAAO;AAAA,IACL,6BAA6B;AAAA,IAC7B,+BAA+B;AAAA,EACjC;AAAA,EACA,MAAM,CAAC;AACT;AAKO,MAAM,aAAa,IAAI,eAA+C;AAC3E,QAAM,mBAAe,eAAAA,SAAQ,CAAC,UAAiC;AAC7D,UAAM,SAAS;AAAA,MACb,MAAM,EAAE,GAAG,2BAAM,GAAG,cAAc,KAAK;AAAA,MACvC,OAAO,EAAE,GAAG,4BAAO,GAAG,cAAc,MAAM;AAAA,IAC5C,EAAE,KAAK;AAEP,UAAM,eAAe,OAAO,QAAQ,MAAM,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AACpE,YAAM,QAAQ,UAAU,GAAG;AAC3B,UAAI,CAAC,WAAW,SAAS,KAAK;AAAG,eAAO,CAAC;AACzC,aAAO,CAAC,CAAC,KAAK,KAAK,IAAI,KAAK,CAAC;AAAA,IAC/B,CAAC;AACD,UAAM,eAAe,CAAC,8BAAS,aAAa,EACzC,QAAQ,OAAO,OAAO,EACtB,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AACzB,UAAI,CAAC,WAAW,SAAS,GAAiB;AAAG,eAAO,CAAC;AACrD,aAAO,CAAC,CAAC,KAAK,GAAG,IAAI,KAAK,CAAC;AAAA,IAC7B,CAAC;AAEH,WAAO,OAAO,YAAY,CAAC,GAAG,cAAc,GAAG,YAAY,CAAC;AAAA,EAC9D,CAAC;AAED,aAAO,8BAAI,CAAC,EAAE,MAAM,MAAM,aAAa,MAAM,OAAO,IAA6B,CAAC;AACpF;",
   "names": ["memoize"]
 }

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

@@ -0,0 +1,19 @@
+import React from "react";
+export type Account = {
+    name: string;
+    id: string;
+    balance: string;
+    fiatValue: string;
+    address: string;
+    protocol?: string;
+    cryptoId?: string;
+    ticker?: string;
+};
+type AccountItemProps = {
+    onClick: () => void;
+    showIcon?: boolean;
+    account: Account;
+};
+export declare const AccountItem: ({ onClick, account, showIcon }: AccountItemProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=AccountItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AA4BF,eAAO,MAAM,WAAW,mCAA2C,gBAAgB,sBA4ClF,CAAC"}

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

@@ -0,0 +1,46 @@
+import React from "react";
+import styled from "styled-components";
+import { withTokens } from "../../libs";
+import { Text } from "../../../components";
+import { Tag } from "../Tag/Tag";
+import { Address } from "../Address/Address";
+const Wrapper = styled.div `
+  ${withTokens("spacing-xxxs", "spacing-xxs", "spacing-xs", "colors-content-default-default", "colors-surface-transparent-hover", "colors-surface-transparent-pressed", "colors-content-subdued-default-default")}
+
+  display: flex;
+  padding: var(--spacing-xs) var(--spacing-xxs);
+  cursor: pointer;
+  justify-content: space-between;
+  align-items: center;
+
+  :hover {
+    background-color: var(--colors-surface-transparent-hover);
+  }
+
+  :active {
+    background-color: var(--colors-surface-transparent-pressed);
+  }
+`;
+export const AccountItem = ({ onClick, account, showIcon = true }) => {
+    const { name, balance, fiatValue, protocol, address, ticker, cryptoId } = account;
+    return (React.createElement(Wrapper, { onClick: onClick },
+        React.createElement("div", { style: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+            } },
+            React.createElement("div", { style: { display: "flex", flexDirection: "column", justifyContent: "center" } },
+                React.createElement("div", { style: {
+                        display: "flex",
+                        flexDirection: "row",
+                        alignItems: "center",
+                        marginBottom: "var(--spacing-xxxs)",
+                    } },
+                    React.createElement(Text, { variant: "largeLineHeight", fontWeight: "semiBold", color: "var(--colors-content-default-default)", marginRight: "var(--spacing-xxs)", fontSize: "14px", lineHeight: "20px" }, name),
+                    protocol && React.createElement(Tag, null, protocol)),
+                React.createElement(Address, { address: address, cryptoId: cryptoId, ticker: ticker, showIcon: showIcon }))),
+        React.createElement("div", { style: { display: "flex", flexDirection: "column", textAlign: "right" } },
+            React.createElement(Text, { fontSize: "14px" }, fiatValue),
+            React.createElement(Text, { fontSize: "12px", color: "var(--colors-content-subdued-default-default)" }, balance))));
+};
+//# sourceMappingURL=AccountItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountItem.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAmB7C,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CACV,cAAc,EACd,aAAa,EACb,YAAY,EACZ,gCAAgC,EAChC,kCAAkC,EAClC,oCAAoC,EACpC,wCAAwC,CACzC;;;;;;;;;;;;;;;CAeF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,GAAG,IAAI,EAAoB,EAAE,EAAE;IACrF,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC;IAElF,OAAO,CACL,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO;QACvB,6BACE,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;gBACf,cAAc,EAAE,eAAe;gBAC/B,UAAU,EAAE,QAAQ;aACrB;YAED,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE;gBAChF,6BACE,KAAK,EAAE;wBACL,OAAO,EAAE,MAAM;wBACf,aAAa,EAAE,KAAK;wBACpB,UAAU,EAAE,QAAQ;wBACpB,YAAY,EAAE,qBAAqB;qBACpC;oBAED,oBAAC,IAAI,IACH,OAAO,EAAC,iBAAiB,EACzB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,uCAAuC,EAC7C,WAAW,EAAC,oBAAoB,EAChC,QAAQ,EAAC,MAAM,EACf,UAAU,EAAC,MAAM,IAEhB,IAAI,CACA;oBACN,QAAQ,IAAI,oBAAC,GAAG,QAAE,QAAQ,CAAO,CAC9B;gBACN,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAI,CACjF,CACF;QACN,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE;YAC1E,oBAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,IAAE,SAAS,CAAQ;YACxC,oBAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,EAAC,KAAK,EAAC,+CAA+C,IACxE,OAAO,CACH,CACH,CACE,CACX,CAAC;AACJ,CAAC,CAAC"}