@ledgerhq/native-ui 0.40.0 → 0.41.0-nightly.1

package/lib/components/Layout/Modals/BaseModal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Layout/Modals/BaseModal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AACtD,OAAyB,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAElE,OAAO,EAAE,SAAS,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAC;AAItE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AASvD,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;CAC9D,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;AA0DxB,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,SAAS,EACT,KAAK,EACL,WAAW,EACX,QAAQ,GACT,EAAE,IAAI,CACL,cAAc,EACd,MAAM,GAAG,WAAW,GAAG,OAAO,GAAG,aAAa,GAAG,UAAU,CAC5D,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAsB5B;AAED,wBAAgB,sBAAsB,CAAC,EACrC,OAAO,GACR,EAAE,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,YAAY,CAUtD;AAED,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,GACP,EAAE,IAAI,CAAC,cAAc,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,YAAY,CAUrD;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,MAAM,EACN,OAAkB,EAClB,MAAiB,EACjB,aAAa,EACb,aAAa,EACb,kBAAuB,EACvB,cAAmB,EACnB,UAAe,EACf,oBAAoB,EACpB,IAAI,EACJ,SAAS,EACT,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,GAAG,IAAI,EACR,EAAE,cAAc,GAAG,KAAK,CAAC,YAAY,CAkErC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Layout/Modals/BaseModal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AACtD,OAAyB,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAElE,OAAO,EAAE,SAAS,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAC;AAItE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AASvD,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;CAC9D,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;AA0DxB,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,SAAS,EACT,KAAK,EACL,WAAW,EACX,QAAQ,GACT,EAAE,IAAI,CACL,cAAc,EACd,MAAM,GAAG,WAAW,GAAG,OAAO,GAAG,aAAa,GAAG,UAAU,CAC5D,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAsB5B;AAED,wBAAgB,sBAAsB,CAAC,EACrC,OAAO,GACR,EAAE,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,YAAY,CAUtD;AAED,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,GACP,EAAE,IAAI,CAAC,cAAc,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,YAAY,CAUrD;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,MAAM,EACN,OAAkB,EAClB,MAAiB,EACjB,aAAa,EACb,aAAa,EACb,kBAAuB,EACvB,cAAmB,EACnB,UAAe,EACf,oBAAoB,EACpB,IAAI,EACJ,SAAS,EACT,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,GAAG,IAAI,EACR,EAAE,cAAc,GAAG,KAAK,CAAC,YAAY,CAiErC"}

package/lib/components/Layout/Modals/BaseModal/index.js

@@ -90,9 +90,8 @@ export default function BaseModal({ isOpen, onClose = () => { }, onBack = () =>
     // The real fix would be to have onModalHide={onModalHide} and make sure every usage on onClose in the consumers of this component
     // expect the correct behavior
     const onModalHideWithClose = useCallback(() => {
-        onClose();
-        onModalHide && onModalHide();
-    }, [onClose, onModalHide]);
+        onModalHide?.();
+    }, [onModalHide]);
     return (React.createElement(ReactNativeModal, { ...backDropProps, ...rest, isVisible: !!isOpen, deviceWidth: width, deviceHeight: height, useNativeDriver: true, useNativeDriverForBackdrop: true, hideModalContentWhileAnimating: true, onModalHide: onModalHideWithClose, style: [defaultModalStyle, modalStyle] },
         React.createElement(SafeContainer, { style: safeContainerStyle },
             CustomHeader && (React.createElement(CustomHeader, null, !noCloseButton && React.createElement(ModalHeaderCloseButton, { onClose: onClose }))),

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

@@ -35,7 +35,7 @@ export const AssetItem = ({ name, ticker, id, onClick, leftElement, rightElement
         "colors-surface-transparent-default",
     ]);
     return (React.createElement(Wrapper, { onPress: () => onClick({ name, ticker, id }), style: ({ pressed }) => ({
-            padding: Number(tokens["spacing-xxs"]),
+            paddingVertical: Number(tokens["spacing-xxs"]),
             borderRadius: Number(tokens["radius-s"]),
             backgroundColor: String(tokens["colors-surface-transparent-default"]),
             opacity: pressed ? 0.7 : 1,

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

@@ -1,9 +1,11 @@
 import React from "react";
 import { AssetType } from "../AssetItem/AssetItem";
-export declare const AssetList: ({ assets, onClick, onVisibleItemsScrollEnd, scrollToTop, hasNextPage, }: {
+export declare const AssetList: ({ assets, onClick, onVisibleItemsScrollEnd, onScrollDown, onScrollUp, scrollToTop, hasNextPage, }: {
     assets: AssetType[];
     onClick: (asset: AssetType) => void;
     onVisibleItemsScrollEnd?: (() => void) | undefined;
+    onScrollDown?: (() => void) | undefined;
+    onScrollUp?: (() => void) | undefined;
     scrollToTop?: boolean | undefined;
     hasNextPage?: boolean | undefined;
 }) => React.JSX.Element;

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

@@ -1 +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"}
+{"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;YASZ,SAAS,EAAE;qBACF,SAAS,KAAK,IAAI;qCACH,IAAI;0BACf,IAAI;wBACN,IAAI;;;uBA+DxB,CAAC"}

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

@@ -3,7 +3,7 @@ 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, }) => {
+export const AssetList = ({ assets, onClick, onVisibleItemsScrollEnd, onScrollDown, onScrollUp, 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}`, []);
@@ -17,6 +17,18 @@ export const AssetList = ({ assets, onClick, onVisibleItemsScrollEnd, scrollToTo
             onVisibleItemsScrollEnd();
         }
     }, [hasNextPage, onVisibleItemsScrollEnd]);
+    const handleViewableItemsChanged = useCallback((info) => {
+        if (info.changed.length === 0)
+            return;
+        const isScrollingDown = info.changed[0].index > info.changed[info.changed.length - 1].index;
+        const isScrollingUp = info.changed[0].index < info.changed[info.changed.length - 1].index;
+        if (onScrollDown && isScrollingDown) {
+            onScrollDown();
+        }
+        if (onScrollUp && isScrollingUp) {
+            onScrollUp();
+        }
+    }, [onScrollUp, onScrollDown]);
     const flatListProps = {
         data: assets,
         renderItem: renderAssetItem,
@@ -31,6 +43,7 @@ export const AssetList = ({ assets, onClick, onVisibleItemsScrollEnd, scrollToTo
             onEndReached: handleEndReached,
             onEndReachedThreshold: 0.1,
         }),
+        onViewableItemsChanged: handleViewableItemsChanged,
     };
     return React.createElement(FlatList, { ref: flatListRef, ...flatListProps });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAQ,MAAM,cAAc,CAAC;AAI/C,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAkCF,eAAO,MAAM,KAAK;uBA/BE,SAAS,KAAK,WAAW;mCA2C3C,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,SAAS,EAAQ,MAAM,cAAc,CAAC;AAI/C,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAyCF,eAAO,MAAM,KAAK;uBAtCE,SAAS,KAAK,WAAW;mCAsE5C,CAAC"}

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

@@ -1,11 +1,12 @@
-import React, { useContext } from "react";
+import React, { useContext, useState } from "react";
 import { TextInput, View } from "react-native";
 import styled, { ThemeContext } from "styled-components/native";
 import { useTokens } from "../../libs";
 const Wrapper = styled(View) `
   height: 40px;
   min-width: 328px;
-  padding-horizontal: ${({ tokens }) => tokens["spacing-s"]}px;
+  padding-left: ${({ isFocused, tokens }) => isFocused ? Number(tokens["spacing-s"]) - 2 : Number(tokens["spacing-s"])}px;
+  padding-right: ${({ isFocused, tokens }) => isFocused ? Number(tokens["spacing-s"]) - 2 : Number(tokens["spacing-s"])}px;
   align-items: center;
   flex-direction: row;
   gap: ${({ tokens }) => tokens["spacing-xxs"]}px;
@@ -13,6 +14,8 @@ const Wrapper = styled(View) `
   background-color: ${({ tokens }) => tokens["colors-surface-transparent-subdued-default"]};
   overflow: hidden;
   color: ${({ tokens }) => tokens["colors-content-subdued-default-default"]};
+  border-width: ${({ isFocused }) => (isFocused ? "2px" : "0px")};
+  border-color: ${({ isFocused, tokens }) => isFocused ? tokens["colors-border-active"] : "transparent"};
 `;
 const StyledInput = styled(TextInput) `
   flex: 1;
@@ -26,13 +29,23 @@ const TOKEN_KEYS = [
     "radius-s",
     "colors-surface-transparent-subdued-default",
     "colors-content-subdued-default-default",
+    "colors-border-active",
 ];
-export const Input = React.forwardRef(({ icon: Icon, ...props }, ref) => {
+export const Input = React.forwardRef(({ icon: Icon, onFocus, onBlur, ...props }, ref) => {
+    const [isFocused, setIsFocused] = useState(false);
     const theme = useContext(ThemeContext);
     const themeType = theme?.colors?.type ?? "light";
     const tokens = useTokens(themeType, [...TOKEN_KEYS]);
-    return (React.createElement(Wrapper, { tokens: tokens },
+    const handleFocus = (e) => {
+        setIsFocused(true);
+        onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+        setIsFocused(false);
+        onBlur?.(e);
+    };
+    return (React.createElement(Wrapper, { tokens: tokens, isFocused: isFocused },
         !!Icon && React.createElement(Icon, { color: String(tokens["colors-content-subdued-default-default"]) }),
-        React.createElement(StyledInput, { ...props, ref: ref, tokens: tokens })));
+        React.createElement(StyledInput, { ...props, ref: ref, tokens: tokens, onFocus: handleFocus, onBlur: handleBlur, placeholderTextColor: String(tokens["colors-content-subdued-default-default"]) })));
 });
 Input.displayName = "Input";

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

@@ -6,7 +6,7 @@ import Text from "../../../components/Text";
 import { CryptoIcon } from "../CryptoIcon/CryptoIcon";
 const Wrapper = styled(Pressable) `
   flex-direction: row;
-  padding: ${({ tokens }) => tokens["spacing-xxs"]}px;
+  padding-vertical: ${({ tokens }) => tokens["spacing-xxs"]}px;
   border-radius: ${({ tokens }) => tokens["radius-s"]}px;
   align-items: center;
   width: 100%;

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

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

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

@@ -1 +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"}
+{"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;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CACF,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,iBAAiB,EACjB,YAAkB,EAClB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,qBAiCP"}

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

@@ -2,7 +2,7 @@ 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 }) {
+export function Search({ onDebouncedChange, debounceTime = 500, onChange, onPressIn, ...props }) {
     const initialValue = props.value ?? props.defaultValue ?? "";
     const prevValue = useRef(String(initialValue));
     const handleDebouncedChange = useDebouncedCallback(useMemo(() => {
@@ -22,5 +22,5 @@ export function Search({ onDebouncedChange, debounceTime = 500, onChange, ...pro
             handleDebouncedChange?.(current);
         };
     }, [handleDebouncedChange, onChange]);
-    return React.createElement(Input, { ...props, icon: Icons.Search, onChange: handleChange });
+    return (React.createElement(Input, { ...props, style: { height: "100%" }, icon: Icons.Search, onChange: handleChange, onPressIn: onPressIn }));
 }

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

@@ -18,14 +18,17 @@ declare const overrideColor: {
         readonly "surface-transparent-pressed": "#0000001A";
         readonly "border-subdued-default-hover": "#D5D5D5";
         readonly "border-subdued-default-pressed": "#C1C1C1";
+        readonly "border-active": "#D4A0FF";
     };
     readonly dark: {
         readonly "opacity-default-10": "#FFFFFF1A";
+        readonly "border-active": "#D4A0FF";
     };
 };
 export type Tokens = Record<string, string | number>;
 type ColorToken = `colors-${keyof ModeColors}` | `colors-${keyof typeof overrideColor.light}` | `colors-${keyof typeof overrideColor.dark}`;
 type OtherToken = keyof (SpacingScale & typeof overrideOther);
-export declare const useTokens: ((theme: "dark" | "light", usedTokens: Array<ColorToken | OtherToken>) => Tokens) & import("lodash").MemoizedFunction;
+type Theme = "dark" | "light";
+export declare const useTokens: ((theme: Theme, usedTokens: Array<ColorToken | OtherToken>) => Tokens) & import("lodash").MemoizedFunction;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pre-ldls/libs/index.ts"],"names":[],"mappings":";AACA,OAAO,EAAe,UAAU,EAAW,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGjF,QAAA,MAAM,aAAa;;;;;;;;;;;CAWT,CAAC;AAEX,QAAA,MAAM,aAAa;;;;;;;;;;CAUT,CAAC;AAEX,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAErD,KAAK,UAAU,GACX,UAAU,MAAM,UAAU,EAAE,GAC5B,UAAU,MAAM,OAAO,aAAa,CAAC,KAAK,EAAE,GAC5C,UAAU,MAAM,OAAO,aAAa,CAAC,IAAI,EAAE,CAAC;AAChD,KAAK,UAAU,GAAG,MAAM,CAAC,YAAY,GAAG,OAAO,aAAa,CAAC,CAAC;AAM9D,eAAO,MAAM,SAAS,WACZ,MAAM,GAAG,OAAO,cAAc,MAAM,UAAU,GAAG,UAAU,CAAC,gDA2BrE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pre-ldls/libs/index.ts"],"names":[],"mappings":";AACA,OAAO,EAAe,UAAU,EAAW,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGjF,QAAA,MAAM,aAAa;;;;;;;;;;;CAWT,CAAC;AAEX,QAAA,MAAM,aAAa;;;;;;;;;;;;CAYT,CAAC;AAEX,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AACrD,KAAK,UAAU,GACX,UAAU,MAAM,UAAU,EAAE,GAC5B,UAAU,MAAM,OAAO,aAAa,CAAC,KAAK,EAAE,GAC5C,UAAU,MAAM,OAAO,aAAa,CAAC,IAAI,EAAE,CAAC;AAEhD,KAAK,UAAU,GAAG,MAAM,CAAC,YAAY,GAAG,OAAO,aAAa,CAAC,CAAC;AAC9D,KAAK,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;AAY9B,eAAO,MAAM,SAAS,WACZ,KAAK,cAAc,MAAM,UAAU,GAAG,UAAU,CAAC,gDA2B1D,CAAC"}

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

@@ -1,6 +1,6 @@
 import memoize from "lodash/memoize";
 import { dark, light, spacing } from "./design-tokens";
-// Override manquants
+// Missing overrides
 const overrideOther = {
     "radius-s": "8px",
     "radius-xs": "4px",
@@ -19,27 +19,34 @@ const overrideColor = {
         "surface-transparent-pressed": "#0000001A",
         "border-subdued-default-hover": "#D5D5D5",
         "border-subdued-default-pressed": "#C1C1C1",
+        "border-active": "#D4A0FF",
     },
     dark: {
         "opacity-default-10": "#FFFFFF1A",
+        "border-active": "#D4A0FF",
     },
 };
 function pxToNumber(value) {
     return Number(value.replace("px", ""));
 }
+function getThemeColors(theme) {
+    const baseColors = theme === "dark" ? dark : light;
+    const overrides = overrideColor[theme];
+    return { ...baseColors, ...overrides };
+}
 export const useTokens = memoize((theme, usedTokens) => {
+    if (!usedTokens.length)
+        return {};
     const usedSet = new Set(usedTokens);
-    const colors = {
-        dark: { ...dark, ...overrideColor.dark },
-        light: { ...light, ...overrideColor.light },
-    }[theme];
     const tokens = {};
+    const colors = getThemeColors(theme);
     Object.entries(colors).forEach(([key, value]) => {
         const colorKey = `colors-${key}`;
         if (usedSet.has(colorKey)) {
             tokens[colorKey] = value;
         }
     });
+    // Add spacing and other tokens
     [spacing, overrideOther].forEach((obj) => {
         Object.entries(obj).forEach(([key, value]) => {
             if (usedSet.has(key)) {
@@ -48,4 +55,6 @@ export const useTokens = memoize((theme, usedTokens) => {
         });
     });
     return tokens;
-});
+}, 
+// Simple cache key
+(theme, usedTokens) => `${theme}-${usedTokens.sort().join(",")}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.40.0",
+  "version": "0.41.0-nightly.1",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",