@ledgerhq/native-ui 0.6.1 → 0.6.2

package/README.md

@@ -211,10 +211,7 @@ export default function App() {
         <Text variant="h2" color="neutral.c100" my={10}>
           Hello, world!
         </Text>
-        <Switch
-          checked={isLight}
-          onChange={() => setPalette(() => (isLight ? "dark" : "light"))}
-        />
+        <Switch checked={isLight} onChange={() => setPalette(() => (isLight ? "dark" : "light"))} />
       </Flex>
     </StyleProvider>
   );

package/components/Carousel/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef, useCallback } from "react";
-import { Platform, } from "react-native";
+import { Platform } from "react-native";
 import styled from "styled-components/native";
 import { Flex, SlideIndicator } from "../index";
 const HorizontalScrollView = styled.ScrollView.attrs({ horizontal: true }) `
@@ -14,9 +14,7 @@ function Carousel({ activeIndex, autoDelay, containerProps, slideIndicatorContai
     const slidesLength = React.Children.count(children);
     const scrollRef = useRef(null);
     const fullWidth = 100 * slidesLength;
-    const itemWidth = !dimensions.current
-        ? 0
-        : dimensions.current.contentWidth / slidesLength;
+    const itemWidth = !dimensions.current ? 0 : dimensions.current.contentWidth / slidesLength;
     const scrollToIndex = useCallback((index, animated = true) => {
         if (scrollRef.current && dimensions.current) {
             scrollRef.current.scrollTo({

package/components/Form/Checkbox/index.d.ts

@@ -5,5 +5,5 @@ declare type CheckboxProps = {
     disabled?: boolean;
     label?: BaseTextProps["children"];
 };
-declare const Checkbox: ({ checked, onChange, disabled, label, }: CheckboxProps) => JSX.Element;
+declare const Checkbox: ({ checked, onChange, disabled, label }: CheckboxProps) => JSX.Element;
 export default Checkbox;

package/components/Form/Checkbox/index.js

@@ -16,7 +16,7 @@ const Square = styled(Flex).attrs({
     ? `background-color: ${theme.colors.primary.c90};`
     : `border: 1px solid ${theme.colors.neutral.c50};`}
 `;
-const Checkbox = ({ checked, onChange, disabled, label, }) => {
+const Checkbox = ({ checked, onChange, disabled, label }) => {
     const { colors, space } = useTheme();
     return (React.createElement(Pressable, { onPress: onChange, disabled: disabled },
         React.createElement(Flex, { flexDirection: "row", alignItems: "center" },

package/components/Form/Input/BaseInput/index.js

@@ -89,6 +89,6 @@ function Input(props, ref) {
             typeof renderLeft === "function" ? renderLeft(props) : renderLeft,
             React.createElement(BaseInput, Object.assign({ ref: ref }, textInputProps, { value: inputValue, onChange: onChangeEvent, onChangeText: handleChange, editable: !disabled, disabled: disabled, error: error, onFocus: () => setFocus(true), onBlur: () => setFocus(false) })),
             typeof renderRight === "function" ? renderRight(props) : renderRight),
-        !!error && !disabled && (React.createElement(InputErrorContainer, null, error))));
+        !!error && !disabled && React.createElement(InputErrorContainer, null, error)));
 }
 export default React.forwardRef(Input);

package/components/Form/Input/NumberInput/index.js

@@ -16,8 +16,8 @@ import Input from "../BaseInput";
 import FlexBox from "../../../Layout/Flex";
 import Text from "../../../Text";
 const PercentButton = styled(TouchableOpacity) `
-  color: ${(p) => p.active ? p.theme.colors.neutral.c00 : p.theme.colors.neutral.c70};
-  background-color: ${(p) => p.active ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c00};
+  color: ${(p) => (p.active ? p.theme.colors.neutral.c00 : p.theme.colors.neutral.c70)};
+  background-color: ${(p) => (p.active ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c00)};
   border-radius: 100px;
   border-width: 0;
   height: 31px;

package/components/Form/SelectableList.js

@@ -14,7 +14,7 @@ function Element(props) {
             Icon && (React.createElement(Flex, { mr: 6, flexShrink: 0 },
                 React.createElement(Icon, { size: 24, color: disabled ? "neutral.c50" : "neutral.c100" }))),
             React.createElement(Text, { variant: "large", flex: 1, color: disabled ? "neutral.c50" : "neutral.c100" }, children || value),
-            RenderRight && (React.createElement(Flex, { pl: 6, flexShrink: 0 }, React.isValidElement(RenderRight) ? (RenderRight) : (React.createElement(RenderRight, Object.assign({}, props))))))));
+            RenderRight && (React.createElement(Flex, { pl: 6, flexShrink: 0 }, React.isValidElement(RenderRight) ? RenderRight : React.createElement(RenderRight, Object.assign({}, props)))))));
 }
 function SelectableList({ currentValue, onChange, children }) {
     return (React.createElement(Flex, { accessible: true, accessibilityRole: "radiogroup" }, React.Children.map(children, (child, index) => {

package/components/Form/Slider/index.native.js

@@ -2,7 +2,7 @@ import React, { useCallback } from "react";
 import styled from "styled-components/native";
 import RnRangeSlider from "rn-range-slider";
 import Text from "../../Text";
-import { Label, MinMaxTextContainer, Notch, Rail, RailSelected, Thumb, } from "./components";
+import { Label, MinMaxTextContainer, Notch, Rail, RailSelected, Thumb } from "./components";
 const SliderContainer = styled.View `
   display: flex;
   flex-direction: column;

package/components/Form/Switch/index.d.ts

@@ -4,5 +4,5 @@ declare type SwitchProps = {
     disabled?: boolean;
     label?: string;
 };
-declare const Switch: ({ checked, onChange, disabled, label, }: SwitchProps) => JSX.Element;
+declare const Switch: ({ checked, onChange, disabled, label }: SwitchProps) => JSX.Element;
 export default Switch;

package/components/Form/Switch/index.js

@@ -3,7 +3,7 @@ import { Switch as NativeSwitch } from "react-native";
 import { useTheme } from "styled-components/native";
 import Text from "../../Text";
 import Flex from "../../Layout/Flex";
-const Switch = ({ checked, onChange, disabled, label, }) => {
+const Switch = ({ checked, onChange, disabled, label }) => {
     const { colors, space } = useTheme();
     return (React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
         React.createElement(NativeSwitch, { trackColor: {

package/components/Form/Toggle/index.d.ts

@@ -4,5 +4,5 @@ declare type ToggleProps = {
     onPress: () => void;
     children: ButtonProps["children"];
 };
-export default function Toggle({ active, children, onPress, }: ToggleProps): JSX.Element;
+export default function Toggle({ active, children, onPress }: ToggleProps): JSX.Element;
 export {};

package/components/Form/Toggle/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { TouchableOpacity } from "react-native";
 import Button from "../../cta/Button";
-export default function Toggle({ active = false, children, onPress, }) {
+export default function Toggle({ active = false, children, onPress }) {
     return (React.createElement(TouchableOpacity, { onPress: onPress },
         React.createElement(Button, { disabled: !active, type: "main" }, children)));
 }

package/components/Icon/BoxedIcon.d.ts

@@ -1,16 +1,13 @@
-import React from "react";
+import { IconOrElementType, IconType } from "./type";
 export declare const DEFAULT_BOX_SIZE = 40;
 export declare const DEFAULT_ICON_SIZE = 16;
 export declare const DEFAULT_BADGE_SIZE = 20;
-export declare type IconProps = {
-    size?: number;
-    color?: string;
-};
+export declare type Variant = "square" | "circle";
 export declare type IconBoxProps = {
     /**
      * Component that takes `{size?: number; color?: string}` as props. Will be rendered at the top right with the size provided in `badgeSize` or a default size.
      */
-    Badge?: React.ComponentType<IconProps>;
+    Badge?: IconType;
     /**
      * Color of the border
      */
@@ -28,12 +25,16 @@ export declare type IconBoxProps = {
      * Box size for preview
      */
     size?: number;
+    /**
+     * Box variant (box or circled)
+     */
+    variant?: Variant;
 };
 export declare type BoxedIconProps = IconBoxProps & {
     /**
      * Component that takes `{size?: number; color?: string}` as props. Will be rendered at the top right with the size provided in `iconSize` or a default size.
      */
-    Icon: React.ComponentType<IconProps> | ((props: IconProps) => JSX.Element);
+    Icon: IconOrElementType;
     /**
      * Icon size, will be applied to the component provided in the `Icon` prop
      */
@@ -43,6 +44,6 @@ export declare type BoxedIconProps = IconBoxProps & {
      */
     iconColor?: string;
 };
-export declare const IconBox: ({ Badge, size, children, borderColor, badgeColor, badgeSize, }: IconBoxProps) => JSX.Element;
+export declare const IconBox: ({ Badge, size, children, borderColor, badgeColor, badgeSize, variant, }: IconBoxProps) => JSX.Element;
 declare const BoxedIcon: ({ Icon, iconSize, iconColor, ...iconBoxProps }: BoxedIconProps) => JSX.Element;
 export default BoxedIcon;

package/components/Icon/BoxedIcon.js

@@ -34,7 +34,7 @@ const IconBoxBackground = styled(Flex) `
   position: absolute;
   height: ${(p) => p.size}px;
   width: ${(p) => p.size}px;
-  border-radius: ${(p) => p.theme.radii[BORDER_RADIUS]}px;
+  border-radius: ${(p) => (p.variant === "circle" ? p.size : p.theme.radii[BORDER_RADIUS])}px;
 `;
 const BadgeContainer = styled.View `
   position: absolute;
@@ -46,15 +46,14 @@ const BadgeContainer = styled.View `
     width: ${p.badgeSize}px;`}
 `;
 /** This component is needed to draw a border that is clipped behind the badge icon */
-const IconBoxBackgroundSVG = ({ size, borderColor, badgeSize, }) => {
+const IconBoxBackgroundSVG = ({ size, borderColor, badgeSize, variant = "square", }) => {
     const { colors, radii } = useTheme();
     const borderRadius = radii[BORDER_RADIUS];
     const borderWidth = 1;
     const paletteStr = borderColor.split(".")[0];
     // @ts-expect-error idk how to handle this properly pls help
     const palette = colors[paletteStr];
-    const strokeColor = (palette ? palette[borderColor.split(".")[1]] : borderColor) ||
-        colors.neutral.c40;
+    const strokeColor = (palette ? palette[borderColor.split(".")[1]] : borderColor) || colors.neutral.c40;
     const squareSize = getClipRectangleSize(badgeSize);
     /**
      * The following adjustments are necessary to have visual consistency
@@ -62,7 +61,7 @@ const IconBoxBackgroundSVG = ({ size, borderColor, badgeSize, }) => {
      */
     const svgSize = size + borderWidth;
     const rectSize = size - borderWidth;
-    const rectRadius = borderRadius - borderWidth / 2;
+    const rectRadius = variant === "circle" ? size : borderRadius - borderWidth / 2;
     return (React.createElement(Box, { position: "absolute", overflow: "hidden" },
         React.createElement(Svg, { height: svgSize, width: svgSize },
             React.createElement(Defs, null,
@@ -71,17 +70,16 @@ const IconBoxBackgroundSVG = ({ size, borderColor, badgeSize, }) => {
                     React.createElement(Rect, { x: "0", y: squareSize, width: "100%", height: svgSize - squareSize }))),
             React.createElement(Rect, { strokeWidth: PixelRatio.roundToNearestPixel(borderWidth), stroke: strokeColor, x: borderWidth, y: borderWidth, rx: rectRadius, ry: rectRadius, width: rectSize, height: rectSize, fill: "transparent", clipPath: "url(#clip)" }))));
 };
-export const IconBox = ({ Badge, size = DEFAULT_BOX_SIZE, children, borderColor = "neutral.c40", badgeColor, badgeSize = DEFAULT_BADGE_SIZE, }) => {
+export const IconBox = ({ Badge, size = DEFAULT_BOX_SIZE, children, borderColor = "neutral.c40", badgeColor, badgeSize = DEFAULT_BADGE_SIZE, variant = "square", }) => {
     const hasBadge = !!Badge;
     return (React.createElement(Container, { size: size },
-        hasBadge ? (React.createElement(IconBoxBackgroundSVG, { size: size, badgeSize: badgeSize, borderColor: borderColor })) : (React.createElement(IconBoxBackground, { border: "1px solid", size: size, borderColor: borderColor })),
+        hasBadge ? (React.createElement(IconBoxBackgroundSVG, { size: size, badgeSize: badgeSize, borderColor: borderColor, variant: variant })) : (React.createElement(IconBoxBackground, { border: "1px solid", size: size, borderColor: borderColor, variant: variant })),
         children,
         hasBadge && (React.createElement(BadgeContainer, { badgeSize: badgeSize },
             React.createElement(Badge, { size: badgeSize, color: badgeColor })))));
 };
 const BoxedIcon = (_a) => {
     var { Icon, iconSize = DEFAULT_ICON_SIZE, iconColor } = _a, iconBoxProps = __rest(_a, ["Icon", "iconSize", "iconColor"]);
-    return (React.createElement(IconBox, Object.assign({}, iconBoxProps),
-        React.createElement(Icon, { size: iconSize || DEFAULT_ICON_SIZE, color: iconColor })));
+    return (React.createElement(IconBox, Object.assign({}, iconBoxProps), React.isValidElement(Icon) ? (Icon) : (React.createElement(Icon, { size: iconSize || DEFAULT_ICON_SIZE, color: iconColor }))));
 };
 export default BoxedIcon;

package/components/Icon/Icon.d.ts

@@ -0,0 +1,9 @@
+export declare type Props = {
+    name: string;
+    size?: number;
+    weight?: "Regular" | "Thin" | "Light" | "Medium" | "UltraLight";
+    color?: string;
+};
+export declare const iconNames: string[];
+declare const Icon: ({ name, size, color, weight, }: Props) => JSX.Element | null;
+export default Icon;

package/components/Icon/Icon.js

@@ -0,0 +1,20 @@
+import * as icons from "@ledgerhq/icons-ui/native";
+import React from "react";
+export const iconNames = Array.from(Object.keys(icons).reduce((set, rawKey) => {
+    const key = rawKey
+        .replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, "$1")
+        .replace(/(.+)(Ultra)+$/g, "$1");
+    if (!set.has(key))
+        set.add(key);
+    return set;
+}, new Set()));
+const Icon = ({ name, size = 16, color = "currentColor", weight = "Medium", }) => {
+    const maybeIconName = `${name}${weight}`;
+    if (maybeIconName in icons) {
+        // @ts-expect-error FIXME I don't know how to make you happy ts
+        const Component = icons[maybeIconName];
+        return React.createElement(Component, { size: size, color: color });
+    }
+    return null;
+};
+export default Icon;

package/components/Icon/index.d.ts

@@ -1,2 +1,3 @@
 export { default as IconBox } from "./IconBox";
 export { default as BoxedIcon } from "./BoxedIcon";
+export { default as Icon } from "./Icon";

package/components/Icon/index.js

@@ -1,2 +1,3 @@
 export { default as IconBox } from "./IconBox";
 export { default as BoxedIcon } from "./BoxedIcon";
+export { default as Icon } from "./Icon";

package/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/native";
 import { View } from "react-native";
 const Accordion = ({ collapsed = false, children, title, onPress, }) => {
     const animationHeight = useSharedValue(collapsed ? "0%" : "100%");

package/components/Layout/ScrollContainer/index.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
+import { BaseStyledProps } from "../../styled";
 import type { NativeSyntheticEvent, NativeScrollEvent, ScrollViewProps } from "react-native";
-declare type ScrollContainerProps = ScrollViewProps & SpaceProps & {
+declare type ScrollContainerProps = BaseStyledProps & ScrollViewProps & SpaceProps & {
     children: React.ReactNode;
     onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
     horizontal?: boolean;

package/components/Layout/ScrollContainer/index.js

@@ -11,9 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from "react";
 import { space } from "styled-system";
-import styled from "styled-components/native";
+import baseStyled from "../../styled";
 import Animated from "react-native-reanimated";
-const ScrollView = styled(Animated.ScrollView) `
+const ScrollView = baseStyled(Animated.ScrollView) `
   ${space};
 `;
 const ScrollContainer = (_a) => {

package/components/Layout/ScrollContainerHeader/Header.d.ts

@@ -7,5 +7,5 @@ export declare type HeaderProps = {
     BottomSection?: JSX.Element;
     currentPositionY: Animated.SharedValue<number>;
 };
-declare const Header: ({ TopLeftSection, TopRightSection, MiddleSection, BottomSection, currentPositionY, }: HeaderProps) => JSX.Element;
+declare const Header: ({ TopLeftSection, TopRightSection, TopMiddleSection, MiddleSection, BottomSection, currentPositionY, }: HeaderProps) => JSX.Element;
 export default Header;

package/components/Layout/ScrollContainerHeader/Header.js

@@ -1,7 +1,6 @@
 import React, { useCallback, useState } from "react";
-import { View } from "react-native";
 import styled from "styled-components/native";
-import Animated, { useAnimatedStyle, interpolate, Extrapolate, } from "react-native-reanimated";
+import Animated, { useAnimatedStyle, interpolate, Extrapolate } from "react-native-reanimated";
 import Flex from "../Flex";
 const Container = styled(Flex).attrs({
     paddingHorizontal: 16,
@@ -10,7 +9,7 @@ const Container = styled(Flex).attrs({
   width: 100%;
 `;
 const SCROLL_BREAKPOINT = 80;
-const Header = ({ TopLeftSection, TopRightSection, MiddleSection, BottomSection, currentPositionY, }) => {
+const Header = ({ TopLeftSection, TopRightSection, TopMiddleSection, MiddleSection, BottomSection, currentPositionY, }) => {
     const [topSectionHeight, setTopSectionHeight] = useState(0);
     const [topSectionWidth, setTopSectionWidth] = useState(0);
     const [topMiddleWidth, setTopMiddleWidth] = useState(0);
@@ -29,34 +28,42 @@ const Header = ({ TopLeftSection, TopRightSection, MiddleSection, BottomSection,
     const onLayoutMiddle = useCallback(({ nativeEvent: { layout } }) => {
         setMiddleWidth(layout.width);
     }, []);
+    const TopMiddleStyle = useAnimatedStyle(() => {
+        const scaleRatio = middleWidth ? Math.min(topMiddleWidth / middleWidth, 0.9) : 0.7;
+        /** scale the animated content to fit in the available space on the top header section */
+        const scale = interpolate(currentPositionY.value, [0, SCROLL_BREAKPOINT], [1, scaleRatio], Extrapolate.CLAMP);
+        /** offset horizontaly given the scale transformation and potential top left header section */
+        const translateX = interpolate(currentPositionY.value, [0, SCROLL_BREAKPOINT], [0, -(topMiddleWidth - topMiddleWidth * scaleRatio) / 2], Extrapolate.CLAMP);
+        const opacity = interpolate(currentPositionY.value, [SCROLL_BREAKPOINT - 1, SCROLL_BREAKPOINT + 40], [0, 1], Extrapolate.CLAMP);
+        return {
+            transform: [{ translateX }, { scale }],
+            flex: 1,
+            opacity,
+            justifyContent: "center", // needed to ensure vertical centering of animated content
+        };
+    }, [topLeftWidth, topSectionHeight, middleWidth, topMiddleWidth, topSectionWidth]);
     const MiddleStyle = useAnimatedStyle(() => {
-        const scaleRatio = middleWidth
-            ? Math.min(topMiddleWidth / middleWidth, 0.9)
-            : 0.7;
+        const scaleRatio = middleWidth ? Math.min(topMiddleWidth / middleWidth, 0.9) : 0.7;
         /** scale the animated content to fit in the available space on the top header section */
         const scale = interpolate(currentPositionY.value, [0, SCROLL_BREAKPOINT], [1, scaleRatio], Extrapolate.CLAMP);
         /** translate verticaly to the middle of the top header section */
         const translateY = interpolate(currentPositionY.value, [0, SCROLL_BREAKPOINT], [0, -topSectionHeight + topSectionHeight / 2], Extrapolate.CLAMP);
         /** offset horizontaly given the scale transformation and potential top left header section */
-        const translateX = interpolate(currentPositionY.value, [0, SCROLL_BREAKPOINT], [0, -(topSectionWidth - topMiddleWidth) / 2 + topLeftWidth], Extrapolate.CLAMP);
+        const translateX = interpolate(currentPositionY.value, [0, SCROLL_BREAKPOINT], [0, -(topSectionWidth - topSectionWidth * scaleRatio) / 2 + topLeftWidth], Extrapolate.CLAMP);
         /** allow for content to move upward as animation is taking place */
         const maxHeight = interpolate(currentPositionY.value, [0, SCROLL_BREAKPOINT], [70, 0], Extrapolate.CLAMP);
+        const opacity = interpolate(currentPositionY.value, [SCROLL_BREAKPOINT - 1, SCROLL_BREAKPOINT + 40], [1, 0], Extrapolate.CLAMP);
         return {
             maxHeight,
             transform: [{ translateY }, { translateX }, { scale }],
+            opacity,
             justifyContent: "center", // needed to ensure vertical centering of animated content
         };
-    }, [
-        topLeftWidth,
-        topSectionHeight,
-        middleWidth,
-        topMiddleWidth,
-        topSectionWidth,
-    ]);
+    }, [topLeftWidth, topSectionHeight, middleWidth, topMiddleWidth, topSectionWidth]);
     return (React.createElement(Container, null,
         React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", onLayout: onLayout },
-            React.createElement(View, { onLayout: onLayoutTopLeft }, TopLeftSection),
-            React.createElement(Flex, { flex: 1, onLayout: onLayoutTopMiddle }),
+            React.createElement(Flex, { onLayout: onLayoutTopLeft }, TopLeftSection),
+            React.createElement(Animated.View, { style: [TopMiddleStyle], onLayout: topMiddleWidth ? () => { } : onLayoutTopMiddle }, TopMiddleSection || MiddleSection),
             TopRightSection),
         React.createElement(Animated.View, { onLayout: middleWidth ? () => { } : onLayoutMiddle, style: MiddleStyle }, MiddleSection),
         BottomSection ? React.createElement(Flex, null, BottomSection) : null));

package/components/Layout/ScrollContainerHeader/index.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
-import type { ScrollViewProps } from "react-native";
+import { FlatListProps } from "react-native";
 import type { HeaderProps } from "./Header";
-declare type ScrollContainerHeaderProps = Omit<HeaderProps, "currentPositionY"> & Omit<ScrollViewProps, "onScroll"> & {
+import { BaseStyledProps } from "../../styled";
+declare type ScrollContainerHeaderProps = BaseStyledProps & Omit<HeaderProps, "currentPositionY"> & Omit<FlatListProps<any>, "onScroll" | "data" | "renderItem" | "stickyHeaderIndices"> & {
     children?: React.ReactNode;
     onScroll?: (y: number) => void;
 };

package/components/Layout/ScrollContainerHeader/index.js

@@ -10,8 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from "react";
-import Animated, { useAnimatedScrollHandler, useSharedValue, } from "react-native-reanimated";
+import { View } from "react-native";
+import Animated, { useAnimatedScrollHandler, useSharedValue } from "react-native-reanimated";
 import Header from "./Header";
+import baseStyled from "../../styled";
+const StyledFlatList = baseStyled.FlatList ``;
+const AnimatedFlatList = Animated.createAnimatedComponent(StyledFlatList);
 const ScrollContainerHeader = (_a) => {
     var { TopLeftSection, TopRightSection, TopMiddleSection, MiddleSection, BottomSection, children, onScroll } = _a, props = __rest(_a, ["TopLeftSection", "TopRightSection", "TopMiddleSection", "MiddleSection", "BottomSection", "children", "onScroll"]);
     const currentPositionY = useSharedValue(0);
@@ -20,8 +24,9 @@ const ScrollContainerHeader = (_a) => {
         if (onScroll)
             onScroll(event.contentOffset.y);
     });
-    return (React.createElement(Animated.ScrollView, Object.assign({}, props, { onScroll: handleScroll, scrollEventThrottle: 16, stickyHeaderIndices: [0] }),
-        React.createElement(Header, { TopLeftSection: TopLeftSection, TopRightSection: TopRightSection, TopMiddleSection: TopMiddleSection, MiddleSection: MiddleSection, BottomSection: BottomSection, currentPositionY: currentPositionY }),
-        children));
+    return (React.createElement(AnimatedFlatList, Object.assign({}, props, { onScroll: handleScroll, scrollEventThrottle: 16, stickyHeaderIndices: [0], data: [
+            React.createElement(Header, { TopLeftSection: TopLeftSection, TopRightSection: TopRightSection, TopMiddleSection: TopMiddleSection, MiddleSection: MiddleSection, BottomSection: BottomSection, currentPositionY: currentPositionY }),
+            children,
+        ], renderItem: ({ item, index }) => (React.createElement(View, { key: index }, item)) })));
 };
 export default ScrollContainerHeader;

package/components/Loader/InfiniteLoader/index.js

@@ -39,15 +39,11 @@ export default function InfiniteLoader(_a) {
         rotation.value = withRepeat(withTiming(360, {
             duration: 1000,
             easing: Easing.linear,
-        }), -1 //Infinite
-        );
+        }), -1);
         return () => cancelAnimation(rotation);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return (React.createElement(Animated.View, { style: [
-            { display: "flex", justifyContent: "center", alignItems: "center" },
-            animatedStyles,
-        ] },
+    return (React.createElement(Animated.View, { style: [{ display: "flex", justifyContent: "center", alignItems: "center" }, animatedStyles] },
         React.createElement(Loader, Object.assign({ size: size, stroke: color, viewBox: "0 0 38 38", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, extraProps),
             React.createElement(LinearGradient, { id: "gradient-start", gradientUnits: "userSpaceOnUse", gradientTransform: "rotate(-20)" },
                 React.createElement(Stop, { offset: 0, stopColor: "white", stopOpacity: 0.5 }),

package/components/Loader/ProgressLoader/index.d.ts

@@ -7,5 +7,5 @@ declare type Props = {
         size: number;
     }>;
 };
-declare const ProgressLoader: ({ progress, onPress, Icon, }: Props) => React.ReactElement;
+declare const ProgressLoader: ({ progress, onPress, Icon }: Props) => React.ReactElement;
 export default ProgressLoader;

package/components/Loader/ProgressLoader/index.js

@@ -8,7 +8,7 @@ const normalizedRadius = radius - strokeWidth / 2;
 const circumference = normalizedRadius * 2 * Math.PI;
 const iconSize = radius * 0.88;
 const iconOffset = radius - iconSize / 2;
-const ProgressLoader = ({ progress = 0, onPress, Icon, }) => {
+const ProgressLoader = ({ progress = 0, onPress, Icon }) => {
     const { colors } = useTheme();
     const backgroundColor = colors.primary.c20;
     const progressColor = colors.primary.c90;

package/components/Navigation/FlowStepper/index.js

@@ -2,7 +2,7 @@ import React, { useRef, useEffect } from "react";
 import { SafeAreaView } from "react-native";
 import Flex from "../../Layout/Flex";
 import ProgressBar from "../../ProgressBar";
-import { Transition, } from "../../transitions";
+import { Transition } from "../../transitions";
 function FlowStepper({ activeIndex, header, footer, extraProps, progressBarProps, renderTransition, transitionDuration = 0, children, }) {
     const previousActiveIndex = useRef(null);
     const stepsLength = React.Children.count(children);
@@ -10,8 +10,7 @@ function FlowStepper({ activeIndex, header, footer, extraProps, progressBarProps
         previousActiveIndex.current = activeIndex;
     }, [activeIndex]);
     return (React.createElement(Flex, { flex: 1 },
-        header &&
-            header(Object.assign(Object.assign({}, extraProps), { activeIndex, stepsLength })),
+        header && header(Object.assign(Object.assign({}, extraProps), { activeIndex, stepsLength })),
         React.createElement(SafeAreaView, { style: { flex: 1 } },
             React.createElement(ProgressBar, Object.assign({ index: activeIndex, length: stepsLength }, progressBarProps)),
             React.createElement(Flex, { flex: 1 }, React.Children.map(children, (child, index) => {
@@ -32,7 +31,6 @@ function FlowStepper({ activeIndex, header, footer, extraProps, progressBarProps
                     return index === activeIndex ? child : null;
                 }
             })),
-            footer &&
-                footer(Object.assign(Object.assign({}, extraProps), { activeIndex, stepsLength })))));
+            footer && footer(Object.assign(Object.assign({}, extraProps), { activeIndex, stepsLength })))));
 }
 export default FlowStepper;

package/components/Navigation/SlideIndicator/index.d.ts

@@ -4,5 +4,5 @@ declare type Props = {
     activeIndex: number;
     onChange: (index: number) => void;
 };
-declare function SlideIndicator({ slidesLength, activeIndex, onChange, }: Props): React.ReactElement;
+declare function SlideIndicator({ slidesLength, activeIndex, onChange }: Props): React.ReactElement;
 export default SlideIndicator;

package/components/Navigation/SlideIndicator/index.js

@@ -30,11 +30,10 @@ const config = {
     duration: 200,
     easing: Easing.bezier(0.5, 0.01, 0, 1),
 };
-function SlideIndicator({ slidesLength, activeIndex = 0, onChange, }) {
+function SlideIndicator({ slidesLength, activeIndex = 0, onChange }) {
     const slidesArray = useMemo(() => new Array(slidesLength).fill(0), [slidesLength]);
     const activeSize = useDerivedValue(() => {
-        const size = (Math.max(0, Math.min(slidesLength - 1, activeIndex)) + 1) * (6 + 12) -
-            12;
+        const size = (Math.max(0, Math.min(slidesLength - 1, activeIndex)) + 1) * (6 + 12) - 12;
         return size;
     }, [activeIndex, slidesLength]);
     const animatedStyles = useAnimatedStyle(() => ({

package/components/Navigation/Stepper/index.d.ts

@@ -13,5 +13,5 @@ export declare type StepperProps = {
      */
     errored?: boolean;
 };
-declare function Stepper({ steps, activeIndex, errored, }: StepperProps): React.ReactElement;
+declare function Stepper({ steps, activeIndex, errored }: StepperProps): React.ReactElement;
 export default Stepper;

package/components/Navigation/Stepper/index.js

@@ -15,7 +15,7 @@ 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 Animated, { useAnimatedStyle, withTiming, withDelay, Easing, } from "react-native-reanimated";
+import Animated, { useAnimatedStyle, withTiming, withDelay, Easing } from "react-native-reanimated";
 const Separator = styled.View `
   flex: 1;
   height: 1px;
@@ -75,8 +75,8 @@ const StepIcon = {
     border-radius: ${(p) => p.theme.space[1]}px;
     background-color: ${(p) => p.theme.colors.neutral.c70};
   `,
-    Completed: ({ color }) => (React.createElement(CheckAlone, { size: 16, color: color })),
-    Errored: ({ color }) => (React.createElement(CloseMedium, { size: 16, color: color })),
+    Completed: ({ color }) => React.createElement(CheckAlone, { size: 16, color: color }),
+    Errored: ({ color }) => React.createElement(CloseMedium, { size: 16, color: color }),
 };
 // #endregion
 // #region Step
@@ -133,7 +133,7 @@ const Container = styled.View `
   flex-direction: row;
   width: 100%;
 `;
-function Stepper({ steps, activeIndex, errored, }) {
+function Stepper({ steps, activeIndex, errored }) {
     const { space } = useTheme();
     const separatorMarginTop = useMemo(() => Math.floor(space[5] / 2), [space]);
     return (React.createElement(Container, null, steps.map((label, i) => (React.createElement(React.Fragment, { key: i },

package/components/ProgressBar/index.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from "react";
 import styled from "styled-components/native";
 import Flex from "../Layout/Flex";
-import Animated, { useDerivedValue, useAnimatedStyle, withTiming, } from "react-native-reanimated";
+import Animated, { useDerivedValue, useAnimatedStyle, withTiming } from "react-native-reanimated";
 const ActiveBar = styled.View `
   background-color: ${(p) => p.theme.colors.neutral.c100};
   position: absolute;

package/components/Tabs/Chip/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import { BaseTabsProps, TabItemProps } from "../TemplateTabs";
-export declare const ChipTab: ({ onPress, isActive, label, }: TabItemProps) => React.ReactElement;
+export declare const ChipTab: ({ onPress, isActive, label }: TabItemProps) => React.ReactElement;
 declare const ChipTabs: (props: BaseTabsProps) => React.ReactElement;
 export default ChipTabs;

package/components/Tabs/Chip/index.js

@@ -9,10 +9,10 @@ const TabBox = styled(TouchableOpacity) `
   flex: 1;
   padding: ${(p) => p.theme.space[5]}px 0;
   border-radius: 8px;
-  background-color: ${(p) => p.isActive ? p.theme.colors.palette.primary.c20 : "transparent"};
+  background-color: ${(p) => (p.isActive ? p.theme.colors.palette.primary.c20 : "transparent")};
 `;
 const StyledTabs = styled(TemplateTabs) ``;
-export const ChipTab = ({ onPress, isActive, label, }) => {
+export const ChipTab = ({ onPress, isActive, label }) => {
     return (React.createElement(TabBox, { isActive: isActive, onPress: onPress },
         React.createElement(Text, { variant: "small", fontWeight: "semiBold", color: isActive ? "palette.neutral.c100" : "palette.neutral.c80", textAlign: "center" }, label)));
 };

package/components/Tabs/Graph/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import { BaseTabsProps, TabItemProps } from "../TemplateTabs";
-export declare const GraphTab: ({ onPress, isActive, label, }: TabItemProps) => React.ReactElement;
+export declare const GraphTab: ({ onPress, isActive, label }: TabItemProps) => React.ReactElement;
 declare const GraphTabs: (props: BaseTabsProps) => React.ReactElement;
 export default GraphTabs;

package/components/Tabs/Graph/index.js

@@ -14,7 +14,7 @@ const StyledTabs = styled(TemplateTabs) `
   border-radius: 35px;
   padding: 4px;
 `;
-export const GraphTab = ({ onPress, isActive, label, }) => {
+export const GraphTab = ({ onPress, isActive, label }) => {
     return (React.createElement(TabBbx, { onPress: onPress }, isActive ? (React.createElement(Button, { type: "main" }, label)) : (React.createElement(Text, { lineHeight: 36, textAlign: "center" }, label))));
 };
 const GraphTabs = (props) => (React.createElement(StyledTabs, Object.assign({}, props, { Item: GraphTab })));

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

@@ -7,6 +7,7 @@ export declare type ButtonProps = TouchableOpacityProps & BaseStyledProps & {
         size: number;
         color: string;
     }> | null;
+    iconName?: string;
     type?: "main" | "shade" | "error" | "color" | "default";
     size?: "small" | "medium" | "large";
     iconPosition?: "right" | "left";

package/components/cta/Button/index.js

@@ -7,19 +7,16 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useState, useMemo } from "react";
 import styled, { useTheme } from "styled-components/native";
-import { ActivityIndicator, TouchableOpacity, } from "react-native";
-import { buttonSizeStyle, getButtonColorStyle, } from "../../cta/Button/getButtonStyle";
+import { ActivityIndicator, TouchableOpacity } from "react-native";
+import { buttonSizeStyle, getButtonColorStyle } from "../../cta/Button/getButtonStyle";
 import { ctaIconSize, ctaTextType } from "../../cta/getCtaStyle";
 import Text from "../../Text";
+import { Icon as IconComponent } from "../../Icon";
 import baseStyled from "../../styled";
 const IconContainer = styled.View `
-  ${(p) => p.iconButton
-    ? ""
-    : p.iconPosition === "left"
-        ? `margin-right: 10px;`
-        : `margin-left: 10px;`}
+  ${(p) => p.iconButton ? "" : p.iconPosition === "left" ? `margin-right: 10px;` : `margin-left: 10px;`}
 `;
 export const Base = baseStyled(TouchableOpacity).attrs((p) => (Object.assign(Object.assign({}, getButtonColorStyle(p.theme.colors, p).button), { 
     // Avoid conflict with styled-system's size property by nulling size and renaming it
@@ -58,13 +55,14 @@ const SpinnerContainer = styled.View `
   justify-content: center;
 `;
 const ButtonContainer = (props) => {
-    const { Icon, iconPosition = "right", children, hide = false, size = "medium", } = props;
+    const { Icon, iconPosition = "right", children, hide = false, size = "medium", iconName } = 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]);
     return (React.createElement(Container, { hide: hide },
         iconPosition === "right" && children ? (React.createElement(Text, { variant: ctaTextType[size], fontWeight: "semiBold", color: text.color }, children)) : null,
-        Icon ? (React.createElement(IconContainer, { iconButton: !children, iconPosition: iconPosition },
-            React.createElement(Icon, { size: ctaIconSize[size], color: text.color }))) : null,
+        IconNode && (React.createElement(IconContainer, { iconButton: !children, iconPosition: iconPosition }, IconNode)),
         iconPosition === "left" && children ? (React.createElement(Text, { variant: ctaTextType[size], fontWeight: "semiBold", color: text.color }, children)) : null));
 };
 const Button = (props) => {

package/components/cta/Link/index.js

@@ -5,11 +5,7 @@ import Text from "../../Text";
 import { getLinkColors } from "./getLinkStyle";
 import { ctaIconSize, ctaTextType } from "../getCtaStyle";
 const IconContainer = styled.View `
-  ${(p) => p.iconLink
-    ? ""
-    : p.iconPosition === "left"
-        ? `margin-right: 6px;`
-        : `margin-left: 6px;`}
+  ${(p) => p.iconLink ? "" : p.iconPosition === "left" ? `margin-right: 6px;` : `margin-left: 6px;`}
 `;
 export const Base = styled(TouchableOpacity) `
   flex-direction: row;

package/components/message/Alert/index.d.ts

@@ -4,5 +4,5 @@ export interface AlertProps {
     title: string;
     showIcon?: boolean;
 }
-export default function Alert({ type, title, showIcon, }: AlertProps): JSX.Element;
+export default function Alert({ type, title, showIcon }: AlertProps): JSX.Element;
 export {};

package/components/message/Alert/index.js

@@ -39,7 +39,7 @@ const StyledAlertContainer = styled(FlexBox).attrs((p) => ({
   flex-direction: row;
   align-items: center;
 `;
-export default function Alert({ type = "info", title, showIcon = true, }) {
+export default function Alert({ type = "info", title, showIcon = true }) {
     const theme = useTheme();
     const textColor = getColor(theme, alertColors[type || "info"].color);
     return (React.createElement(StyledAlertContainer, { type: type },

package/components/message/Notification/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import styled, { useTheme } from "styled-components/native";
 import FlexBox from "../../Layout/Flex";
-import { TouchableOpacity, } from "react-native";
+import { TouchableOpacity } from "react-native";
 import Text from "../../Text";
 import CloseMedium from "@ledgerhq/icons-ui/native/CloseMedium";
 import { Flex } from "../../Layout";

package/components/transitions/Slide.d.ts

@@ -8,4 +8,4 @@ export interface SlideProps extends TransitionProps {
 /**
  * A slide left/right transition translating its children based on their status and a given direction.
  */
-export declare function Slide({ status, duration, style, direction, children, }: SlideProps): JSX.Element;
+export declare function Slide({ status, duration, style, direction, children }: SlideProps): JSX.Element;

package/components/transitions/Slide.js

@@ -4,7 +4,7 @@ const WEB = Platform.OS === "web";
 /**
  * A slide left/right transition translating its children based on their status and a given direction.
  */
-export function Slide({ status, duration, style, direction = "left", children, }) {
+export function Slide({ status, duration, style, direction = "left", children }) {
     const [width, setWidth] = useState(Dimensions.get("window").width);
     const styleRef = useRef(new Animated.Value(0)).current;
     const previousStatus = useRef(null);

package/components/transitions/Transition.js

@@ -10,8 +10,7 @@ export function Transition({ in: inValue, timeout, mountOnEnter, unmountOnExit,
     const canMount = useRef(!mountOnEnter);
     canMount.current = canMount.current || inValue;
     useEffect(() => {
-        if ((inValue && status === "entered") ||
-            (!inValue && status === "exited")) {
+        if ((inValue && status === "entered") || (!inValue && status === "exited")) {
             return;
         }
         if (inValue && !enter) {
@@ -20,9 +19,7 @@ export function Transition({ in: inValue, timeout, mountOnEnter, unmountOnExit,
         if (!inValue && !exit) {
             return setStatus("exited");
         }
-        const timeoutValue = typeof timeout === "number"
-            ? timeout
-            : timeout[inValue ? "enter" : "exit"];
+        const timeoutValue = typeof timeout === "number" ? timeout : timeout[inValue ? "enter" : "exit"];
         setStatus(inValue ? "entering" : "exiting");
         const timeoutRef = setTimeout(() => {
             setStatus(inValue ? "entered" : "exited");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Ledger Live - Desktop UI",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",
@@ -15,8 +15,8 @@
     "index.js"
   ],
   "dependencies": {
-    "@ledgerhq/icons-ui": "^0.2.1",
-    "@ledgerhq/ui-shared": "^0.1.4",
+    "@ledgerhq/icons-ui": "^0.2.2",
+    "@ledgerhq/ui-shared": "^0.1.5",
     "@types/color": "^3.0.2",
     "@types/react": "^17.0.37",
     "@types/react-native": "^0.65.9",

package/styles/StyleProvider.d.ts

@@ -9,5 +9,5 @@ declare module "styled-components" {
     interface DefaultTheme extends Theme {
     }
 }
-export declare const StyleProvider: ({ children, selectedPalette, }: Props) => React.ReactElement;
+export declare const StyleProvider: ({ children, selectedPalette }: Props) => React.ReactElement;
 export {};

package/styles/StyleProvider.js

@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
 import { ThemeProvider } from "styled-components/native";
 import defaultTheme from "./theme";
 import { palettes } from "@ledgerhq/ui-shared";
-export const StyleProvider = ({ children, selectedPalette, }) => {
+export const StyleProvider = ({ children, selectedPalette }) => {
     const theme = useMemo(() => (Object.assign(Object.assign({}, defaultTheme), { colors: Object.assign(Object.assign(Object.assign({}, defaultTheme.colors), palettes[selectedPalette]), { palette: palettes[selectedPalette] }), theme: selectedPalette })), [selectedPalette]);
     return React.createElement(ThemeProvider, { theme: theme }, children);
 };

package/styles/helpers.js

@@ -5,9 +5,7 @@ export const darken = (c, a) => Color(c).darken(a).toString();
 export const lighten = (c, a) => Color(c).lighten(a).toString();
 export const mix = (c, b, a) => Color(c).mix(Color(b), a).toString();
 const get = (object, path) => {
-    const p = typeof path === "string"
-        ? path.split(".").filter((key) => key.length)
-        : path;
+    const p = typeof path === "string" ? path.split(".").filter((key) => key.length) : path;
     return p.reduce((dive, key) => dive && dive[key], object);
 };
 export const getColor = (p, color) => {