@ledgerhq/native-ui 0.20.2 → 0.20.3-nightly.0

package/lib/assets/icons.d.ts

@@ -1 +1,2 @@
+export * from "@ledgerhq/icons-ui/nativeLegacy";
 export * from "@ledgerhq/icons-ui/native";

package/lib/assets/icons.js

@@ -1 +1,2 @@
+export * from "@ledgerhq/icons-ui/nativeLegacy";
 export * from "@ledgerhq/icons-ui/native";

package/lib/assets/index.d.ts

@@ -1,3 +1,4 @@
+export * as IconsLegacy from "@ledgerhq/icons-ui/nativeLegacy";
 export * as Icons from "@ledgerhq/icons-ui/native";
 export * as Logos from "./logos";
 export * as CryptoIcons from "@ledgerhq/crypto-icons-ui/native";

package/lib/assets/index.js

@@ -1,3 +1,5 @@
+import * as IconsLegacy_1 from "@ledgerhq/icons-ui/nativeLegacy";
+export { IconsLegacy_1 as IconsLegacy };
 import * as Icons_1 from "@ledgerhq/icons-ui/native";
 export { Icons_1 as Icons };
 import * as Logos_1 from "./logos";

package/lib/components/Cards/NotificationCard/index.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { ExternalLinkMedium } from "@ledgerhq/icons-ui/native";
+import { ExternalLinkMedium } from "@ledgerhq/icons-ui/nativeLegacy";
 import Text from "../../Text";
 import Flex from "../../Layout/Flex";
 import Box from "../../Layout/Box";

package/lib/components/Cards/SideImageCard/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { ArrowRightMedium, CloseMedium } from "@ledgerhq/icons-ui/native";
+import { ArrowRightMedium, CloseMedium } from "@ledgerhq/icons-ui/nativeLegacy";
 import { TouchableOpacity, Image } from "react-native";
 import styled, { useTheme } from "styled-components/native";
 import Text from "../../Text";

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

@@ -3,7 +3,7 @@ import { Pressable } from "react-native";
 import styled, { useTheme } from "styled-components/native";
 import Text from "../../Text";
 import Flex from "../../Layout/Flex";
-import CheckAlone from "@ledgerhq/icons-ui/native/CheckAloneMedium";
+import CheckAlone from "@ledgerhq/icons-ui/nativeLegacy/CheckAloneMedium";
 const Square = styled(Flex).attrs({
     justifyContent: "center",
     alignItems: "center",

package/lib/components/Form/Input/QrCodeInput/index.js

@@ -14,7 +14,7 @@ import { TouchableOpacity } from "react-native";
 import styled from "styled-components/native";
 import Input from "../BaseInput";
 import FlexBox from "../../../Layout/Flex";
-import QrCodeMedium from "@ledgerhq/icons-ui/native/QrCodeMedium";
+import QrCodeMedium from "@ledgerhq/icons-ui/nativeLegacy/QrCodeMedium";
 const QrCodeButton = styled(TouchableOpacity) `
   background-color: ${(p) => p.theme.colors.neutral.c100};
   display: flex;

package/lib/components/Form/Input/SearchInput/index.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { useCallback } from "react";
 import styled from "styled-components/native";
 import Input, { InputRenderLeftContainer } from "../BaseInput";
-import SearchMedium from "@ledgerhq/icons-ui/native/SearchMedium";
+import SearchMedium from "@ledgerhq/icons-ui/nativeLegacy/SearchMedium";
 import Button from "../../../cta/Button";
 const Icon = styled(SearchMedium).attrs((p) => ({
     color: p.theme.colors.neutral.c70,

package/lib/components/Form/Slider/components.js

@@ -1,7 +1,7 @@
 import React from "react";
 import styled, { useTheme } from "styled-components/native";
 import Text from "../../Text";
-import { ArrowsHMedium } from "@ledgerhq/icons-ui/native";
+import { ArrowsHMedium } from "@ledgerhq/icons-ui/nativeLegacy";
 export const MinMaxTextContainer = styled.View `
   flex-direction: row;
   justify-content: space-between;

package/lib/components/Icon/Icon.js

@@ -1,4 +1,4 @@
-import * as icons from "@ledgerhq/icons-ui/native";
+import * as icons from "@ledgerhq/icons-ui/nativeLegacy";
 import React from "react";
 export const iconNames = Array.from(Object.keys(icons).reduce((set, rawKey) => {
     const key = rawKey

package/lib/components/Icon/IconBadge.d.ts

@@ -2,6 +2,7 @@
 import { FlexBoxProps } from "../Layout/Flex";
 import { IconOrElementType } from "./type";
 export declare const DEFAULT_ICON_SIZE = 16;
+export declare const DEFAULT_BACKGROUND_COLOR = "neutral.c40";
 export type IconBadgeProps = FlexBoxProps & {
     /**
      * Component that takes `{size?: number; color?: string}` as props.
@@ -16,6 +17,10 @@ export type IconBadgeProps = FlexBoxProps & {
      * Icon color, will be applied to the component provided in the `Icon` prop
      */
     iconColor?: string;
+    /**
+     * Background color, will define the color of the round background part of the badge
+     */
+    backgroundColor?: string;
 };
-declare const IconBadge: ({ Icon, iconSize, iconColor, ...rest }: IconBadgeProps) => JSX.Element;
+declare const IconBadge: ({ Icon, iconSize, backgroundColor, iconColor, ...rest }: IconBadgeProps) => JSX.Element;
 export default IconBadge;

package/lib/components/Icon/IconBadge.js

@@ -12,10 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from "react";
 import Flex from "../Layout/Flex";
 export const DEFAULT_ICON_SIZE = 16;
+export const DEFAULT_BACKGROUND_COLOR = "neutral.c40";
 const BORDER_RADIUS = 999999;
 const IconBadge = (_a) => {
-    var { Icon, iconSize = DEFAULT_ICON_SIZE, iconColor } = _a, rest = __rest(_a, ["Icon", "iconSize", "iconColor"]);
-    return (React.createElement(Flex, Object.assign({ height: iconSize * 2, width: iconSize * 2, backgroundColor: "neutral.c40", borderRadius: BORDER_RADIUS, alignItems: "center", justifyContent: "center" }, rest), React.isValidElement(Icon) ? (Icon) : (
+    var { Icon, iconSize = DEFAULT_ICON_SIZE, backgroundColor = DEFAULT_BACKGROUND_COLOR, iconColor } = _a, rest = __rest(_a, ["Icon", "iconSize", "backgroundColor", "iconColor"]);
+    return (React.createElement(Flex, Object.assign({ height: iconSize * 2, width: iconSize * 2, backgroundColor: backgroundColor, borderRadius: BORDER_RADIUS, alignItems: "center", justifyContent: "center" }, rest), React.isValidElement(Icon) ? (Icon) : (
     /* @ts-expect-error TS 5 can't seem to be able to prove this is a react comopnent here */
     React.createElement(Icon, { size: iconSize, color: iconColor }))));
 };

package/lib/components/Layout/Collapse/Accordion/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import Animated, { useSharedValue, withTiming, useAnimatedStyle, Easing, } from "react-native-reanimated";
 import Link from "../../../cta/Link";
-import { ChevronBottomMedium, ChevronTopMedium } from "@ledgerhq/icons-ui/native";
+import { ChevronBottomMedium, ChevronTopMedium } from "@ledgerhq/icons-ui/nativeLegacy";
 import { View } from "react-native";
 const Accordion = ({ collapsed = false, children, title, onPress, }) => {
     const animationHeight = useSharedValue(collapsed ? "0%" : "100%");

package/lib/components/Layout/List/TipList/index.js

@@ -11,8 +11,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { useMemo } from "react";
 import List from "../List";
-import Check from "@ledgerhq/icons-ui/native/CheckAloneMedium";
-import Close from "@ledgerhq/icons-ui/native/CloseMedium";
+import Check from "@ledgerhq/icons-ui/nativeLegacy/CheckAloneMedium";
+import Close from "@ledgerhq/icons-ui/nativeLegacy/CloseMedium";
 export default function TipList(_a) {
     var { items } = _a, props = __rest(_a, ["items"]);
     const tipItems = useMemo(() => items.map((item) => (Object.assign(Object.assign({}, item), { bullet: item.isPositive ? (React.createElement(Check, { size: 20, color: "success.c50" })) : (React.createElement(Close, { size: 20, color: "error.c50" })) }))), [items]);

package/lib/components/Layout/List/VerticalStepper/StepperItem.js

@@ -2,7 +2,7 @@ import React, { useCallback } from "react";
 import { Pressable } from "react-native";
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
 import styled from "styled-components/native";
-import { CheckAloneMedium } from "@ledgerhq/icons-ui/native";
+import { CheckAloneMedium } from "@ledgerhq/icons-ui/nativeLegacy";
 import Flex from "../../Flex";
 import Text from "../../../Text";
 import ProgressLoader from "../../../Loader/ProgressLoader";

package/lib/components/Layout/List/VerticalTimeline/TimelineIndicator.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from "react";
 import { Dimensions, PixelRatio, Platform, StyleSheet } from "react-native";
-import { CircledCheckSolidMedium } from "@ledgerhq/icons-ui/native";
+import { CircledCheckSolidMedium } from "@ledgerhq/icons-ui/nativeLegacy";
 import styled, { useTheme } from "styled-components/native";
 import Svg, { Line } from "react-native-svg";
 import Flex from "../../Flex";

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

@@ -17,7 +17,7 @@ import Text from "../../../Text";
 import { BoxedIcon } from "../../../Icon";
 import { Flex } from "../../index";
 import { space } from "styled-system";
-import { Icons } from "../../../../assets";
+import { Close } from "@ledgerhq/icons-ui/native";
 const { width, height } = sizes;
 const SafeContainer = styled.SafeAreaView `
   background-color: ${(p) => p.theme.colors.background.drawer};
@@ -72,7 +72,7 @@ export function ModalHeader({ Icon, iconColor, title, description, subtitle, })
 export function ModalHeaderCloseButton({ onClose, }) {
     return (React.createElement(CloseContainer, null,
         React.createElement(ClosePressableExtendedBounds, { onPress: onClose },
-            React.createElement(Icons.CloseMedium, { color: "neutral.c100", size: "20px" }))));
+            React.createElement(Close, { color: "neutral.c100", size: "S" }))));
 }
 export default function BaseModal(_a) {
     var { isOpen, onClose = () => { }, noCloseButton, safeContainerStyle = {}, containerStyle = {}, modalStyle = {}, preventBackdropClick, Icon, iconColor, title, description, subtitle, children, onModalHide, CustomHeader } = _a, rest = __rest(_a, ["isOpen", "onClose", "noCloseButton", "safeContainerStyle", "containerStyle", "modalStyle", "preventBackdropClick", "Icon", "iconColor", "title", "description", "subtitle", "children", "onModalHide", "CustomHeader"]);

package/lib/components/Navigation/Stepper/index.js

@@ -13,8 +13,8 @@ import React, { useMemo } from "react";
 import styled, { useTheme } from "styled-components/native";
 import { space, color } from "styled-system";
 import Text from "../../Text";
-import CheckAlone from "@ledgerhq/icons-ui/native/CheckAloneMedium";
-import CloseMedium from "@ledgerhq/icons-ui/native/CloseMedium";
+import CheckAlone from "@ledgerhq/icons-ui/nativeLegacy/CheckAloneMedium";
+import CloseMedium from "@ledgerhq/icons-ui/nativeLegacy/CloseMedium";
 import Animated, { useAnimatedStyle, withTiming, withDelay, Easing } from "react-native-reanimated";
 const Separator = styled.View `
   flex: 1;

package/lib/components/cta/Button/index.d.ts

@@ -15,7 +15,7 @@ export type ButtonProps = TouchableOpacityProps & BaseStyledProps & {
     children?: React.ReactNode;
     pending?: boolean;
     displayContentWhenPending?: boolean;
-    testID?: string;
+    buttonTestId?: string;
 };
 export declare const Base: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, {
     iconButton?: boolean | undefined;

package/lib/components/cta/Button/index.js

@@ -55,14 +55,14 @@ const SpinnerContainer = styled.View `
   justify-content: center;
 `;
 const ButtonContainer = (props) => {
-    const { Icon, iconPosition = "right", children, hide = false, size = "medium", iconName, pending, displayContentWhenPending, } = props;
+    const { Icon, iconPosition = "right", children, hide = false, size = "medium", iconName, pending, displayContentWhenPending, buttonTestId, } = props;
     const theme = useTheme();
     const { text } = getButtonColorStyle(theme.colors, props);
     const IconNode = useMemo(() => (iconName && React.createElement(IconComponent, { name: iconName, size: ctaIconSize[size], color: text.color })) ||
         (Icon && React.createElement(Icon, { size: ctaIconSize[size], color: text.color })), [iconName, size, Icon, text.color]);
     const textColor = useMemo(() => (pending ? theme.colors.neutral.c50 : text.color), [pending, theme.colors.neutral.c50, text.color]);
     return (React.createElement(Container, { hide: hide },
-        iconPosition === "right" && children ? (React.createElement(Text, { variant: ctaTextType[size], fontWeight: "semiBold", color: textColor }, children)) : null,
+        iconPosition === "right" && children ? (React.createElement(Text, { testID: buttonTestId, variant: ctaTextType[size], fontWeight: "semiBold", color: textColor }, children)) : null,
         pending && displayContentWhenPending ? (React.createElement(IconContainer, { iconPosition: iconPosition },
             React.createElement(SpinnerContainer, { displayContentWhenPending: true },
                 React.createElement(ActivityIndicator, { color: theme.colors.neutral.c50, animating: true })))) : IconNode ? (React.createElement(IconContainer, { iconButton: !children, iconPosition: iconPosition }, IconNode)) : null,

package/lib/components/message/Alert/index.js

@@ -1,9 +1,9 @@
 import React from "react";
 import styled, { useTheme } from "styled-components/native";
-import InfoAltFillMedium from "@ledgerhq/icons-ui/native/InfoAltFillMedium";
-import CircledCheckSolidMedium from "@ledgerhq/icons-ui/native/CircledCheckSolidMedium";
-import WarningSolidMedium from "@ledgerhq/icons-ui/native/WarningSolidMedium";
-import CircledCrossSolidMedium from "@ledgerhq/icons-ui/native/CircledCrossSolidMedium";
+import InfoAltFillMedium from "@ledgerhq/icons-ui/nativeLegacy/InfoAltFillMedium";
+import CircledCheckSolidMedium from "@ledgerhq/icons-ui/nativeLegacy/CircledCheckSolidMedium";
+import WarningSolidMedium from "@ledgerhq/icons-ui/nativeLegacy/WarningSolidMedium";
+import CircledCrossSolidMedium from "@ledgerhq/icons-ui/nativeLegacy/CircledCrossSolidMedium";
 import Text from "../../Text";
 import FlexBox from "../../Layout/Flex";
 import { getColor } from "../../../styles";

package/lib/components/message/Notification/index.js

@@ -3,10 +3,10 @@ import styled, { useTheme } from "styled-components/native";
 import FlexBox from "../../Layout/Flex";
 import { TouchableOpacity } from "react-native";
 import Text from "../../Text";
-import CloseMedium from "@ledgerhq/icons-ui/native/CloseMedium";
+import CloseMedium from "@ledgerhq/icons-ui/nativeLegacy/CloseMedium";
 import { Flex } from "../../Layout";
 import { space } from "styled-system";
-import { ExternalLinkMedium } from "@ledgerhq/icons-ui/native";
+import { ExternalLinkMedium } from "@ledgerhq/icons-ui/nativeLegacy";
 const variantProps = {
     primary: {
         bg: "primary.c90",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.20.2",
+  "version": "0.20.3-nightly.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -47,7 +47,7 @@
     "styled-system": "^5.1.5",
     "victory-native": "^35.5.5",
     "@ledgerhq/crypto-icons-ui": "^0.4.0",
-    "@ledgerhq/icons-ui": "^0.4.1",
+    "@ledgerhq/icons-ui": "^0.4.2-nightly.0",
     "@ledgerhq/ui-shared": "^0.2.0"
   },
   "peerDependencies": {
@@ -61,7 +61,7 @@
     "styled-components": "^5.3.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.0",
+    "@babel/core": "^7.22.8",
     "@babel/generator": "^7.17.2",
     "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/plugin-proposal-export-namespace-from": "^7.16.0",
@@ -76,7 +76,7 @@
     "@emotion/native": "^10.0.27",
     "@expo/metro-config": "^0.7.1",
     "@expo/webpack-config": "^18.0.1",
-    "@react-native-async-storage/async-storage": "1.17.11",
+    "@react-native-async-storage/async-storage": "1.17.12",
     "@react-native-community/cli-server-api": "^7.0.3",
     "@react-native-community/datetimepicker": "6.7.3",
     "@react-native-community/slider": "^4.4.2",