@ledgerhq/native-ui 0.39.0 → 0.40.0-nightly.0

package/lib/components/Form/TabSelector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/TabSelector/index.tsx"],"names":[],"mappings":";AA8BA,KAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,IAAI;IACxC,MAAM,EAAE;QAAE,EAAE,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACnC,UAAU,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;IAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,EACpD,MAAM,EACN,UAAU,EACV,QAAQ,EACR,aAAqB,GACtB,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAyEnC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/TabSelector/index.tsx"],"names":[],"mappings":";AA8BA,KAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,IAAI;IACxC,MAAM,EAAE;QAAE,EAAE,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACnC,UAAU,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;IAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,EACpD,MAAM,EACN,UAAU,EACV,QAAQ,EACR,aAAqB,GACtB,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA0EnC"}

package/lib/components/Form/TabSelector/index.js

@@ -66,7 +66,7 @@ export default function TabSelector({ labels, initialTab, onToggle, filledVarian
             labels.map((label, index) => (React.createElement(Pressable, { hitSlop: 6, key: label.id, onPress: () => handlePress(label.id, index), style: ({ pressed }) => ({
                     opacity: pressed && selectedIndex !== index ? 0.5 : 1,
                     flex: 1,
-                }) },
+                }), testID: `tab-selector-${label.id}` },
                 React.createElement(Tab, { "$radius": tabRadius },
                     React.createElement(Text, { fontSize: 14, fontWeight: "semiBold", flexShrink: 1, numberOfLines: 1 }, label.value))))))));
 }

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

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

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

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

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

@@ -0,0 +1,50 @@
+import React from "react";
+import { Pressable, View } from "react-native";
+import styled, { useTheme } from "styled-components/native";
+import Text from "../../../components/Text";
+import { CryptoIcon } from "../CryptoIcon/CryptoIcon";
+import { useTokens } from "../../libs";
+const Wrapper = styled(Pressable) `
+  flex-direction: row;
+  align-items: center;
+  overflow: hidden;
+  width: 100%;
+`;
+const InfoWrapper = styled(View) `
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  flex: 1;
+  gap: 4px;
+  margin-left: 16px;
+`;
+const LeftElementWrapper = styled(View) `
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+`;
+export const AssetItem = ({ name, ticker, id, onClick, leftElement, rightElement, }) => {
+    const theme = useTheme();
+    const colorType = theme.colors.type === "dark" ? "dark" : "light";
+    const tokens = useTokens(colorType, [
+        "spacing-xxs",
+        "margin-s",
+        "radius-s",
+        "colors-content-default-default",
+        "colors-content-subdued-default-default",
+        "colors-surface-transparent-default",
+    ]);
+    return (React.createElement(Wrapper, { onPress: () => onClick({ name, ticker, id }), style: ({ pressed }) => ({
+            padding: Number(tokens["spacing-xxs"]),
+            borderRadius: Number(tokens["radius-s"]),
+            backgroundColor: String(tokens["colors-surface-transparent-default"]),
+            opacity: pressed ? 0.7 : 1,
+        }) },
+        React.createElement(CryptoIcon, { size: 48, ledgerId: id, ticker: ticker }),
+        React.createElement(InfoWrapper, null,
+            React.createElement(Text, { fontSize: "14px", variant: "largeLineHeight", fontWeight: "semiBold", color: String(tokens["colors-content-default-default"]), numberOfLines: 1, ellipsizeMode: "tail" }, name),
+            React.createElement(LeftElementWrapper, null,
+                React.createElement(Text, { fontSize: "12px", lineHeight: "16px", variant: "bodyLineHeight", fontWeight: "medium", color: String(tokens["colors-content-subdued-default-default"]) }, ticker),
+                leftElement)),
+        rightElement));
+};

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AssetItem } from "./AssetItem";
+declare const meta: Meta<typeof AssetItem>;
+export default meta;
+type Story = StoryObj<typeof AssetItem>;
+export declare const Default: Story;
+export declare const WithBalance: Story;
+export declare const WithTag: Story;
+export declare const WithLeftTagAndRightBalance: Story;
+export declare const WithDiscreetModeEnabled: Story;
+//# sourceMappingURL=AssetItem.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetItem.stories.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetItem/AssetItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAkBhC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,KAQxC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAOrC,CAAC"}

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

@@ -0,0 +1,55 @@
+import { AssetItem } from "./AssetItem";
+import { createRightElement, leftElement } from "../sharedStoryBook";
+const meta = {
+    component: AssetItem,
+    title: "PreLdls/Components/AssetItem",
+    tags: ["autodocs"],
+    args: {
+        name: "Bitcoin",
+        ticker: "BTC",
+        id: "bitcoin",
+        onClick: () => { },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: "AssetItem displays a crypto asset with its name, ticker, icon, and optionally fiat value and balance. Use it to represent selectable assets in lists.",
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {};
+export const WithBalance = {
+    args: {
+        name: "Bitcoin",
+        ticker: "BTC",
+        id: "bitcoin",
+        rightElement: createRightElement(false),
+    },
+};
+export const WithTag = {
+    args: {
+        name: "Bitcoin",
+        ticker: "BTC",
+        id: "bitcoin",
+        leftElement: leftElement,
+    },
+};
+export const WithLeftTagAndRightBalance = {
+    args: {
+        name: "Bitcoin",
+        ticker: "BTC",
+        id: "bitcoin",
+        leftElement: leftElement,
+        rightElement: createRightElement(false),
+    },
+};
+export const WithDiscreetModeEnabled = {
+    args: {
+        name: "Bitcoin",
+        ticker: "BTC",
+        id: "bitcoin",
+        rightElement: createRightElement(true),
+    },
+};

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { AssetType } from "../AssetItem/AssetItem";
+export declare const AssetList: ({ assets, onClick, onVisibleItemsScrollEnd, scrollToTop, hasNextPage, }: {
+    assets: AssetType[];
+    onClick: (asset: AssetType) => void;
+    onVisibleItemsScrollEnd?: (() => void) | undefined;
+    scrollToTop?: boolean | undefined;
+    hasNextPage?: boolean | undefined;
+}) => React.JSX.Element;
+//# sourceMappingURL=AssetList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetTypeList/AssetList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAa,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAK9D,eAAO,MAAM,SAAS;YAOZ,SAAS,EAAE;qBACF,SAAS,KAAK,IAAI;qCACH,IAAI;;;uBA0CrC,CAAC"}

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

@@ -0,0 +1,36 @@
+import React, { useCallback, useEffect, useRef } from "react";
+import { FlatList } from "react-native";
+import { AssetItem } from "../AssetItem/AssetItem";
+const ITEM_PADDING = 8;
+const ITEM_HEIGHT = 48 + ITEM_PADDING * 2;
+export const AssetList = ({ assets, onClick, onVisibleItemsScrollEnd, scrollToTop, hasNextPage, }) => {
+    const flatListRef = useRef(null);
+    const renderAssetItem = useCallback(({ item }) => React.createElement(AssetItem, { ...item, onClick: onClick }), [onClick]);
+    const keyExtractor = useCallback((item, index) => `${item.id}-${index}`, []);
+    useEffect(() => {
+        if (scrollToTop && flatListRef.current) {
+            flatListRef.current.scrollToOffset({ offset: 0, animated: true });
+        }
+    }, [scrollToTop]);
+    const handleEndReached = useCallback(() => {
+        if (hasNextPage && onVisibleItemsScrollEnd) {
+            onVisibleItemsScrollEnd();
+        }
+    }, [hasNextPage, onVisibleItemsScrollEnd]);
+    const flatListProps = {
+        data: assets,
+        renderItem: renderAssetItem,
+        initialNumToRender: 15,
+        keyExtractor,
+        getItemLayout: (data, index) => ({
+            length: ITEM_HEIGHT,
+            offset: ITEM_HEIGHT * index,
+            index,
+        }),
+        ...(hasNextPage && {
+            onEndReached: handleEndReached,
+            onEndReachedThreshold: 0.1,
+        }),
+    };
+    return React.createElement(FlatList, { ref: flatListRef, ...flatListProps });
+};

package/lib/pre-ldls/components/AssetTypeList/AssetList.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AssetList } from "./AssetList";
+declare const meta: Meta<typeof AssetList>;
+export default meta;
+type Story = StoryObj<typeof AssetList>;
+export declare const Default: Story;
+export declare const WithFiatValue: Story;
+export declare const WithDiscreetModeEnabled: Story;
+export declare const WithLeftTagAndRightBalance: Story;
+//# sourceMappingURL=AssetList.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetList.stories.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetTypeList/AssetList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA4BhC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,aAAa,EAAE,KAS3B,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KASrC,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,KAUxC,CAAC"}

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

@@ -0,0 +1,62 @@
+import React from "react";
+import { View } from "react-native";
+import { AssetList } from "./AssetList";
+import { createRightElement, leftElement } from "../sharedStoryBook";
+const meta = {
+    component: AssetList,
+    title: "PreLdls/Components/AssetList",
+    tags: ["autodocs"],
+    args: {
+        assets: Array.from({ length: 50 }).map((_, i) => ({
+            name: `Bitcoin ${i}`,
+            ticker: "BTC",
+            id: "bitcoin",
+        })),
+        onClick: () => { },
+        scrollToTop: false,
+    },
+    decorators: [
+        (Story) => (React.createElement(View, { style: { height: 600, width: "100%" } },
+            React.createElement(Story, null))),
+    ],
+    parameters: {
+        docs: {
+            description: {
+                component: "AssetList displays a list of crypto assets. It supports virtual scrolling for performance with large datasets. Use it to represent selectable assets in lists.",
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {};
+export const WithFiatValue = {
+    args: {
+        assets: Array.from({ length: 50 }).map((_, i) => ({
+            name: `Bitcoin ${i}`,
+            ticker: "BTC",
+            id: "bitcoin",
+            rightElement: createRightElement(false),
+        })),
+    },
+};
+export const WithDiscreetModeEnabled = {
+    args: {
+        assets: Array.from({ length: 50 }).map((_, i) => ({
+            name: `Bitcoin ${i}`,
+            ticker: "BTC",
+            id: "bitcoin",
+            rightElement: createRightElement(true),
+        })),
+    },
+};
+export const WithLeftTagAndRightBalance = {
+    args: {
+        assets: Array.from({ length: 50 }).map((_, i) => ({
+            name: `Bitcoin ${i}`,
+            ticker: "BTC",
+            id: "bitcoin",
+            leftElement: leftElement,
+            rightElement: createRightElement(false),
+        })),
+    },
+};

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

@@ -1,4 +1,4 @@
 import React from "react";
-import { CryptoIcon as Icon } from "@ledgerhq/crypto-icons";
+import Icon from "@ledgerhq/crypto-icons/native";
 export declare function CryptoIcon(props: Parameters<typeof Icon>[0]): React.JSX.Element;
 //# sourceMappingURL=CryptoIcon.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CryptoIcon.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/CryptoIcon/CryptoIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAE5D,wBAAgB,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,qBAE3D"}
+{"version":3,"file":"CryptoIcon.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/CryptoIcon/CryptoIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,+BAA+B,CAAC;AAEjD,wBAAgB,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,qBAE3D"}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { CryptoIcon as Icon } from "@ledgerhq/crypto-icons";
+import Icon from "@ledgerhq/crypto-icons/native";
 export function CryptoIcon(props) {
     return React.createElement(Icon, { ...props });
 }

package/lib/pre-ldls/components/CryptoIcon/CryptoIcon.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CryptoIcon.stories.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/CryptoIcon/CryptoIcon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAmBjC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC"}
+{"version":3,"file":"CryptoIcon.stories.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/CryptoIcon/CryptoIcon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAoBjC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC"}

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

@@ -7,6 +7,7 @@ const meta = {
         ledgerId: "bitcoin",
         ticker: "BTC",
         size: 56,
+        backgroundColor: "red",
         network: "",
     },
     argTypes: {

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/NetworkItem/NetworkItem.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,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC,CAAC;AAEF,KAAK,gBAAgB,GAAG,OAAO,GAAG;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAiCF,eAAO,MAAM,WAAW,8DAOrB,gBAAgB,sBA4BlB,CAAC"}

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

@@ -0,0 +1,46 @@
+import React from "react";
+import { Pressable, View } from "react-native";
+import styled, { useTheme } from "styled-components/native";
+import { useTokens } from "../../libs";
+import Text from "../../../components/Text";
+import { CryptoIcon } from "../CryptoIcon/CryptoIcon";
+const Wrapper = styled(Pressable) `
+  flex-direction: row;
+  padding: ${({ tokens }) => tokens["spacing-xxs"]}px;
+  border-radius: ${({ tokens }) => tokens["radius-s"]}px;
+  align-items: center;
+  width: 100%;
+`;
+const InfoWrapper = styled(View) `
+  flex-direction: column;
+  justify-content: center;
+  margin-left: 16px;
+  flex: 1;
+`;
+const LeftElementWrapper = styled(View) `
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+`;
+const TOKEN_KEYS = [
+    "spacing-xxs",
+    "margin-s",
+    "radius-s",
+    "colors-content-default-default",
+    "colors-content-subdued-default-default",
+    "colors-surface-transparent-hover",
+    "colors-surface-transparent-pressed",
+];
+export const NetworkItem = ({ name, onClick, id, ticker, leftElement, rightElement, }) => {
+    const theme = useTheme();
+    const colorType = theme.colors.type === "dark" ? "dark" : "light";
+    const tokens = useTokens(colorType, [...TOKEN_KEYS]);
+    return (React.createElement(Wrapper, { tokens: tokens, onPress: onClick, style: ({ pressed }) => ({
+            opacity: pressed ? 0.7 : 1,
+        }) },
+        React.createElement(CryptoIcon, { size: 48, ledgerId: id, ticker: ticker }),
+        React.createElement(InfoWrapper, { tokens: tokens },
+            React.createElement(Text, { variant: "largeLineHeight", fontWeight: "semiBold", color: String(tokens["colors-content-default-default"]) }, name),
+            React.createElement(LeftElementWrapper, null, leftElement)),
+        rightElement));
+};

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { NetworkItem } from "./NetworkItem";
+declare const meta: Meta<typeof NetworkItem>;
+export default meta;
+type Story = StoryObj<typeof NetworkItem>;
+export declare const Default: Story;
+export declare const TestNetworkItem: Story;
+export declare const NetworkItemWithLeftElement: Story;
+export declare const NetworkItemWithRightElement: Story;
+//# sourceMappingURL=NetworkItem.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkItem.stories.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/NetworkItem/NetworkItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAUlC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,eAAe,EAAE,KAAU,CAAC;AAEzC,eAAO,MAAM,0BAA0B,EAAE,KAOxC,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KAOzC,CAAC"}

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

@@ -0,0 +1,32 @@
+import { NetworkItem } from "./NetworkItem";
+import { createRightElement, leftElement } from "../sharedStoryBook";
+const meta = {
+    component: NetworkItem,
+    title: "PreLdls/Components/NetworkItem",
+    tags: ["autodocs"],
+    args: {
+        name: "Bitcoin",
+        id: "bitcoin",
+        ticker: "btc",
+        onClick: () => console.log("NetworkItem clicked"),
+    },
+};
+export default meta;
+export const Default = {};
+export const TestNetworkItem = {};
+export const NetworkItemWithLeftElement = {
+    args: {
+        name: "Bitcoin",
+        id: "bitcoin",
+        ticker: "btc",
+        leftElement,
+    },
+};
+export const NetworkItemWithRightElement = {
+    args: {
+        name: "Bitcoin",
+        id: "bitcoin",
+        ticker: "btc",
+        rightElement: createRightElement(true),
+    },
+};

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { Network } from "../NetworkItem/NetworkItem";
+export declare const NetworkList: ({ networks, onClick, onVisibleItemsScrollEnd, scrollToTop, hasNextPage, }: {
+    networks: Network[];
+    onClick: (networkId: string) => void;
+    onVisibleItemsScrollEnd?: (() => void) | undefined;
+    scrollToTop?: boolean | undefined;
+    hasNextPage?: boolean | undefined;
+}) => React.JSX.Element;
+//# sourceMappingURL=NetworkList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/NetworkList/NetworkList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAe,MAAM,4BAA4B,CAAC;AAMlE,eAAO,MAAM,WAAW;cAOZ,OAAO,EAAE;yBACE,MAAM,KAAK,IAAI;qCACJ,IAAI;;;uBAyCrC,CAAC"}

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

@@ -0,0 +1,35 @@
+import React, { useCallback, useEffect, useRef } from "react";
+import { NetworkItem } from "../NetworkItem/NetworkItem";
+import { FlatList } from "react-native";
+const ITEM_PADDING = 8;
+const ITEM_HEIGHT = 48 + ITEM_PADDING * 2;
+export const NetworkList = ({ networks, onClick, onVisibleItemsScrollEnd, scrollToTop, hasNextPage, }) => {
+    const flatListRef = useRef(null);
+    const renderNetworkItem = useCallback(({ item }) => React.createElement(NetworkItem, { ...item, onClick: () => onClick(item.id) }), [onClick]);
+    const keyExtractor = useCallback((item, index) => `${item.id}-${index}`, []);
+    useEffect(() => {
+        if (scrollToTop && flatListRef.current) {
+            flatListRef.current.scrollToOffset({ offset: 0, animated: true });
+        }
+    }, [scrollToTop]);
+    const handleEndReached = useCallback(() => {
+        if (hasNextPage && onVisibleItemsScrollEnd) {
+            onVisibleItemsScrollEnd();
+        }
+    }, [hasNextPage, onVisibleItemsScrollEnd]);
+    const flatListProps = {
+        data: networks,
+        renderItem: renderNetworkItem,
+        keyExtractor,
+        getItemLayout: (data, index) => ({
+            length: ITEM_HEIGHT,
+            offset: ITEM_HEIGHT * index,
+            index,
+        }),
+        ...(hasNextPage && {
+            onEndReached: handleEndReached,
+            onEndReachedThreshold: 0.1,
+        }),
+    };
+    return React.createElement(FlatList, { ref: flatListRef, ...flatListProps });
+};

package/lib/pre-ldls/components/NetworkList/NetwrokList.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { NetworkList } from "./NetworkList";
+declare const meta: Meta<typeof NetworkList>;
+export default meta;
+type Story = StoryObj<typeof NetworkList>;
+export declare const Default: Story;
+export declare const TestNetworkClick: Story;
+//# sourceMappingURL=NetwrokList.stories.d.ts.map

package/lib/pre-ldls/components/NetworkList/NetwrokList.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NetwrokList.stories.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/NetworkList/NetwrokList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAkBlC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAC"}

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

@@ -0,0 +1,30 @@
+import { NetworkList } from "./NetworkList";
+import React from "react";
+import { View } from "react-native";
+const meta = {
+    component: NetworkList,
+    title: "PreLdls/Components/NetworkList",
+    tags: ["autodocs"],
+    args: {
+        networks: Array.from({ length: 50 }, (_, i) => ({
+            name: `Bitcoin ${i}`,
+            id: `bitcoin`,
+            ticker: "btc",
+        })),
+    },
+    decorators: [
+        (Story) => (React.createElement(View, { style: { height: 600, width: "100%" } },
+            React.createElement(Story, null))),
+    ],
+};
+export default meta;
+export const Default = {};
+export const TestNetworkClick = {
+    args: {
+        networks: Array.from({ length: 3 }, (_, i) => ({
+            name: `Bitcoin ${i}`,
+            id: `bitcoin`,
+            ticker: "btc",
+        })),
+    },
+};

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

@@ -0,0 +1,9 @@
+import React from "react";
+import { TextInputProps } from "react-native";
+type Props = Readonly<TextInputProps & {
+    onDebouncedChange?: (current: string, prev: string) => void;
+    debounceTime?: number;
+}>;
+export declare function Search({ onDebouncedChange, debounceTime, onChange, ...props }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=Search.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAI/C,OAAO,EAAkD,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9F,KAAK,KAAK,GAAG,QAAQ,CACnB,cAAc,GAAG;IACf,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CACF,CAAC;AAEF,wBAAgB,MAAM,CAAC,EAAE,iBAAiB,EAAE,YAAkB,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,qBAyB1F"}

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

@@ -0,0 +1,26 @@
+import React, { useMemo, useRef } from "react";
+import { Icons } from "../../../assets";
+import { useDebouncedCallback } from "../../hooks";
+import { Input } from "..";
+export function Search({ onDebouncedChange, debounceTime = 500, onChange, ...props }) {
+    const initialValue = props.value ?? props.defaultValue ?? "";
+    const prevValue = useRef(String(initialValue));
+    const handleDebouncedChange = useDebouncedCallback(useMemo(() => {
+        if (!onDebouncedChange)
+            return;
+        return (current) => {
+            onDebouncedChange(current, prevValue.current);
+            prevValue.current = current;
+        };
+    }, [onDebouncedChange]), debounceTime);
+    const handleChange = useMemo(() => {
+        if (!handleDebouncedChange && !onChange)
+            return;
+        return (e) => {
+            const current = e.nativeEvent.text;
+            onChange?.(e);
+            handleDebouncedChange?.(current);
+        };
+    }, [handleDebouncedChange, onChange]);
+    return React.createElement(Input, { ...props, icon: Icons.Search, onChange: handleChange });
+}

package/lib/pre-ldls/components/Search/Search.stories.d.ts

@@ -0,0 +1,8 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { Search } from "./Search";
+declare const meta: Meta<typeof Search>;
+export default meta;
+type Story = StoryObj<typeof Search>;
+export declare const Default: Story;
+export declare const WithInteraction: Story;
+//# sourceMappingURL=Search.stories.d.ts.map

package/lib/pre-ldls/components/Search/Search.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Search.stories.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Search/Search.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAOlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAU7B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAGjC,eAAO,MAAM,eAAe,EAAE,KAU7B,CAAC"}

package/lib/pre-ldls/components/Search/Search.stories.js

@@ -0,0 +1,29 @@
+import { Search } from "./Search";
+import { expect, jest } from "@storybook/jest";
+import { within, userEvent } from "@storybook/testing-library";
+const onDebouncedChange = jest.fn();
+const onChange = jest.fn();
+const meta = {
+    component: Search,
+    title: "PreLdls/Components/Search",
+    tags: ["autodocs"],
+    args: {
+        debounceTime: 500,
+        placeholder: "Search",
+        onDebouncedChange,
+        onChange,
+    },
+};
+export default meta;
+export const Default = {};
+// Interaction Testing
+export const WithInteraction = {
+    args: {},
+    controls: { expanded: true },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const input = canvas.getByRole("textbox");
+        await userEvent.type(input, "Write something");
+        await expect(input).toHaveValue("Write something");
+    },
+};

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

@@ -0,0 +1,7 @@
+import React, { ReactNode } from "react";
+import { TextStyle } from "react-native";
+export declare const Tag: ({ textTransform, children, }: {
+    textTransform?: TextStyle["textTransform"];
+    children: ReactNode;
+}) => React.JSX.Element;
+//# sourceMappingURL=Tag.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAWzC,eAAO,MAAM,GAAG;oBAIE,SAAS,CAAC,eAAe,CAAC;cAChC,SAAS;uBAcpB,CAAC"}

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

@@ -0,0 +1,14 @@
+import React from "react";
+import styled from "styled-components/native";
+import { Text } from "../../../components";
+const Wrapper = styled.View `
+  padding: 1px 4px;
+  border-radius: 4px;
+  background-color: ${(props) => props.theme.colors.palette.neutral.c30};
+  flex-shrink: 0;
+  align-self: flex-start;
+`;
+export const Tag = ({ textTransform = "none", children, }) => {
+    return (React.createElement(Wrapper, { testID: "tag" },
+        React.createElement(Text, { color: "palette.neutral.c70", fontSize: "10px", lineHeight: "16px", textTransform: textTransform }, children)));
+};

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

@@ -1,2 +1,8 @@
 export * from "./Input/Input";
+export * from "./AssetItem/AssetItem";
+export * from "./AssetTypeList/AssetList";
+export * from "./NetworkItem/NetworkItem";
+export * from "./NetworkList/NetworkList";
+export * from "./Tag/Tag";
+export * from "./Search/Search";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pre-ldls/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pre-ldls/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC"}

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

@@ -1 +1,7 @@
 export * from "./Input/Input";
+export * from "./AssetItem/AssetItem";
+export * from "./AssetTypeList/AssetList";
+export * from "./NetworkItem/NetworkItem";
+export * from "./NetworkList/NetworkList";
+export * from "./Tag/Tag";
+export * from "./Search/Search";

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

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

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

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

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

@@ -0,0 +1,13 @@
+import React from "react";
+import styled from "styled-components/native";
+import { Text } from "../../components";
+import { Tag } from "./Tag/Tag";
+export const BalanceContainer = styled.View `
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+`;
+export const leftElement = React.createElement(Tag, null, "1.34% APY");
+export const createRightElement = (discreetMode) => (React.createElement(BalanceContainer, null,
+    React.createElement(Text, { fontSize: "14px", variant: "largeLineHeight", fontWeight: "semiBold", color: "palette.neutral.c100" }, discreetMode ? "$***" : "$5,969.83"),
+    React.createElement(Text, { fontSize: "12px", lineHeight: "16px", variant: "bodyLineHeight", fontWeight: "medium", color: "palette.neutral.c70" }, discreetMode ? "*** BTC" : "0.118 BTC")));

package/lib/pre-ldls/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./useDebouncedCallback";
+//# sourceMappingURL=index.d.ts.map

package/lib/pre-ldls/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pre-ldls/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}

package/lib/pre-ldls/hooks/index.js

@@ -0,0 +1 @@
+export * from "./useDebouncedCallback";

package/lib/pre-ldls/hooks/useDebouncedCallback.d.ts

@@ -0,0 +1,2 @@
+export declare function useDebouncedCallback<T extends unknown[]>(callback: ((...args: T) => void) | undefined, delay?: number): ((...args: T) => void) | undefined;
+//# sourceMappingURL=useDebouncedCallback.d.ts.map

package/lib/pre-ldls/hooks/useDebouncedCallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebouncedCallback.d.ts","sourceRoot":"","sources":["../../../src/pre-ldls/hooks/useDebouncedCallback.ts"],"names":[],"mappings":"AAEA,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,OAAO,EAAE,EACtD,QAAQ,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,EAC5C,KAAK,CAAC,EAAE,MAAM,cAEuD,CAAC,KAAK,IAAI,cAehF"}

package/lib/pre-ldls/hooks/useDebouncedCallback.js

@@ -0,0 +1,15 @@
+import { useEffect, useRef, useState } from "react";
+export function useDebouncedCallback(callback, delay) {
+    const [debouncedCallback, setDebouncedCallback] = useState();
+    const timeout = useRef();
+    useEffect(() => {
+        if (!callback)
+            return setDebouncedCallback(undefined);
+        setDebouncedCallback(() => (...args) => {
+            clearTimeout(timeout.current);
+            timeout.current = setTimeout(() => callback(...args), delay);
+        });
+        return () => clearTimeout(timeout.current);
+    }, [callback, delay]);
+    return debouncedCallback;
+}

package/lib/pre-ldls/hooks/useDebouncedCallback.stories.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { jest } from "@storybook/jest";
+declare const meta: Meta<typeof Template>;
+export default meta;
+type TemplateProps = {
+    delay: number;
+    callback1: typeof jest.fn;
+    callback2: typeof jest.fn;
+};
+declare function Template({ callback1, callback2, delay }: TemplateProps): React.JSX.Element;
+export declare const Default: StoryObj<typeof Template>;
+export declare const WithInteraction: StoryObj<typeof Template>;
+//# sourceMappingURL=useDebouncedCallback.stories.d.ts.map

package/lib/pre-ldls/hooks/useDebouncedCallback.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebouncedCallback.stories.d.ts","sourceRoot":"","sources":["../../../src/pre-ldls/hooks/useDebouncedCallback.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAU,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAM/C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAS/B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,IAAI,CAAC,EAAE,CAAC;IAC1B,SAAS,EAAE,OAAO,IAAI,CAAC,EAAE,CAAC;CAC3B,CAAC;AACF,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,aAAa,qBAoB/D;AAED,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,QAAQ,CAAM,CAAC;AAErD,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAC,OAAO,QAAQ,CAUrD,CAAC"}

package/lib/pre-ldls/hooks/useDebouncedCallback.stories.js

@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import { useDebouncedCallback } from ".";
+import { expect, jest } from "@storybook/jest";
+import { within, userEvent } from "@storybook/testing-library";
+const callback1 = jest.fn();
+const callback2 = jest.fn();
+const meta = {
+    component: Template,
+    title: "PreLdls/Hooks/useDebouncedCallback",
+    tags: ["!autodocs"],
+    args: {
+        delay: 1000,
+        callback1,
+        callback2,
+    },
+};
+export default meta;
+function Template({ callback1, callback2, delay }) {
+    const [callback, setCallback] = useState(() => callback1);
+    const debouncedCallback = useDebouncedCallback(callback, delay);
+    const [value, setValue] = useState("");
+    return (React.createElement("div", null,
+        React.createElement("input", { type: "text", value: value, onChange: (event) => {
+                const value = event.target.value;
+                setValue(value);
+                debouncedCallback?.(value);
+            } }),
+        React.createElement("button", { onClick: () => setCallback(() => callback1) }, "Use Callback 1"),
+        React.createElement("button", { onClick: () => setCallback(() => callback2) }, "Use Callback 2")));
+}
+export const Default = {};
+export const WithInteraction = {
+    args: {},
+    controls: { expanded: true },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const input = canvas.getByRole("textbox");
+        await userEvent.type(input, "Write something");
+        await expect(input).toHaveValue("Write something");
+    },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.39.0",
+  "version": "0.40.0-nightly.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -35,13 +35,13 @@
     "lib/**/*"
   ],
   "dependencies": {
-    "@ledgerhq/crypto-icons": "1.1.1",
+    "@ledgerhq/crypto-icons": "1.1.2",
     "color": "^4.0.0",
     "react-native-modal": "14.0.0-rc.1",
     "rn-range-slider": "2.1.1",
     "styled-system": "^5.1.5",
     "@ledgerhq/crypto-icons-ui": "^1.16.0",
-    "@ledgerhq/icons-ui": "^0.12.0",
+    "@ledgerhq/icons-ui": "^0.13.0-nightly.0",
     "@ledgerhq/ui-shared": "^0.3.0"
   },
   "peerDependencies": {