@ledgerhq/native-ui 0.6.0 → 0.6.4

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

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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";
+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.c100" })) : (React.createElement(Close, { size: 20, color: "error.c100" })) }))), [items]);
+    return React.createElement(List, Object.assign({ items: tipItems }, props));
+}

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

@@ -0,0 +1,4 @@
+export { default as List } from "./List";
+export { default as IconBoxList } from "./IconBoxList";
+export { default as TipList } from "./TipList";
+export { default as NumberedList } from "./NumberedList";

package/components/Layout/List/index.js

@@ -0,0 +1,4 @@
+export { default as List } from "./List";
+export { default as IconBoxList } from "./IconBoxList";
+export { default as TipList } from "./TipList";
+export { default as NumberedList } from "./NumberedList";

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,9 +1,11 @@
 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"> & {
     children?: React.ReactNode;
     onScroll?: (y: number) => void;
+    containerProps?: BaseStyledProps;
 };
-declare const ScrollContainerHeader: ({ TopLeftSection, TopRightSection, TopMiddleSection, MiddleSection, BottomSection, children, onScroll, ...props }: ScrollContainerHeaderProps) => JSX.Element;
+declare const ScrollContainerHeader: ({ TopLeftSection, TopRightSection, TopMiddleSection, MiddleSection, BottomSection, children, onScroll, containerProps, ...props }: ScrollContainerHeaderProps) => JSX.Element;
 export default ScrollContainerHeader;

package/components/Layout/ScrollContainerHeader/index.js

@@ -10,18 +10,23 @@ 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 Flex from "../Flex";
 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"]);
+    var { TopLeftSection, TopRightSection, TopMiddleSection, MiddleSection, BottomSection, children, onScroll, containerProps } = _a, props = __rest(_a, ["TopLeftSection", "TopRightSection", "TopMiddleSection", "MiddleSection", "BottomSection", "children", "onScroll", "containerProps"]);
     const currentPositionY = useSharedValue(0);
     const handleScroll = useAnimatedScrollHandler((event) => {
         currentPositionY.value = event.contentOffset.y;
         if (onScroll)
             onScroll(event.contentOffset.y);
     });
-    return (React.createElement(Animated.ScrollView, Object.assign({}, props, { onScroll: handleScroll, scrollEventThrottle: 16, stickyHeaderIndices: [0] }),
+    return (React.createElement(Flex, Object.assign({ flex: 1 }, containerProps),
         React.createElement(Header, { TopLeftSection: TopLeftSection, TopRightSection: TopRightSection, TopMiddleSection: TopMiddleSection, MiddleSection: MiddleSection, BottomSection: BottomSection, currentPositionY: currentPositionY }),
-        children));
+        React.createElement(AnimatedFlatList, Object.assign({}, props, { onScroll: handleScroll, scrollEventThrottle: 16, data: [...React.Children.toArray(children)], renderItem: ({ item }) => React.createElement(View, null, item), keyExtractor: (_, index) => index }))));
 };
 export default ScrollContainerHeader;

package/components/Layout/index.d.ts

@@ -5,3 +5,4 @@ export * from "./Modals";
 export { default as ScrollContainer } from "./ScrollContainer";
 export { default as ScrollContainerHeader } from "./ScrollContainerHeader";
 export { default as Row } from "./Table/Row";
+export * from "./List";

package/components/Layout/index.js

@@ -5,3 +5,4 @@ export * from "./Modals";
 export { default as ScrollContainer } from "./ScrollContainer";
 export { default as ScrollContainerHeader } from "./ScrollContainerHeader";
 export { default as Row } from "./Table/Row";
+export * from "./List";

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

@@ -0,0 +1,9 @@
+/// <reference types="styled-components-react-native" />
+import React from "react";
+import { SizeProps } from "styled-system";
+declare const Loader: import("styled-components").StyledComponent<import("react").ComponentClass<import("react-native-svg").SvgProps, any>, import("styled-components").DefaultTheme, SizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>>, never>;
+export declare type Props = React.ComponentProps<typeof Loader> & {
+    color?: string;
+};
+export default function InfiniteLoader({ size, color, ...extraProps }: Props): JSX.Element;
+export {};

package/components/Loader/InfiniteLoader/index.js

@@ -0,0 +1,58 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect } from "react";
+import Svg, { LinearGradient, Stop, Mask, Path, Rect } from "react-native-svg";
+import styled from "styled-components/native";
+import { system, size } from "styled-system";
+import Animated, { useAnimatedStyle, useSharedValue, withRepeat, withTiming, cancelAnimation, Easing, } from "react-native-reanimated";
+const strokeSystem = system({
+    stroke: {
+        property: "stroke",
+        scale: "colors",
+    },
+});
+const Loader = styled(Svg).attrs((props) => (Object.assign({}, strokeSystem(props)))) `
+  ${size}
+`;
+export default function InfiniteLoader(_a) {
+    var { size = 38, color = "primary.c50" } = _a, extraProps = __rest(_a, ["size", "color"]);
+    const rotation = useSharedValue(0);
+    const animatedStyles = useAnimatedStyle(() => {
+        return {
+            transform: [
+                {
+                    rotateZ: `${rotation.value}deg`,
+                },
+            ],
+        };
+    }, [rotation.value]);
+    useEffect(() => {
+        rotation.value = withRepeat(withTiming(360, {
+            duration: 1000,
+            easing: Easing.linear,
+        }), -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] },
+        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 }),
+                React.createElement(Stop, { offset: 1, stopColor: "white", stopOpacity: 1 })),
+            React.createElement(LinearGradient, { id: "gradient-end", gradientUnits: "userSpaceOnUse", gradientTransform: "rotate(-20)" },
+                React.createElement(Stop, { offset: 0, stopColor: "white", stopOpacity: 0.5 }),
+                React.createElement(Stop, { offset: 1, stopColor: "white", stopOpacity: 0 })),
+            React.createElement(Mask, { id: "gradient-mask" },
+                React.createElement(Rect, { x: 0, y: -4, width: 44, height: 22, strokeWidth: 0, fill: "url(#gradient-start)", transform: "rotate(10)" }),
+                React.createElement(Rect, { x: 0, y: 18, width: 44, height: 21, strokeWidth: 0, fill: "url(#gradient-end)", transform: "rotate(10)" })),
+            React.createElement(Path, { d: "M34.8807 20.9499C35.3608 17.0398 34.3815 13.09 32.1304 9.85712C29.8793 6.6242 26.5146 4.33541 22.6808 3.42914C18.847 2.52287 14.8136 3.06283 11.3532 4.94559C7.89277 6.82836 5.24858 9.92158 3.92708 13.6328C2.60558 17.344 2.69968 21.4123 4.19135 25.0584C5.68302 28.7045 8.4674 31.6722 12.0112 33.3929C15.5549 35.1137 19.609 35.4666 23.3968 34.384C27.1846 33.3015 30.4398 30.8596 32.5391 27.526", strokeWidth: 6, strokeLinecap: "round", strokeLinejoin: "round", mask: "url(#gradient-mask)" }))));
+}

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

@@ -0,0 +1,11 @@
+import React from "react";
+declare type Props = {
+    progress?: number;
+    onPress?: () => void;
+    Icon?: React.ComponentType<{
+        color: string;
+        size: number;
+    }>;
+};
+declare const ProgressLoader: ({ progress, onPress, Icon }: Props) => React.ReactElement;
+export default ProgressLoader;

package/components/Loader/ProgressLoader/index.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { Svg, Circle, G } from "react-native-svg";
+import { useTheme } from "styled-components/native";
+import { TouchableOpacity } from "react-native";
+const radius = 25;
+const strokeWidth = 2;
+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 { colors } = useTheme();
+    const backgroundColor = colors.primary.c20;
+    const progressColor = colors.primary.c90;
+    const strokeDashoffset = circumference - progress * circumference;
+    return (React.createElement(TouchableOpacity, { disabled: !onPress, onPress: onPress },
+        React.createElement(Svg, { width: radius * 2, height: radius * 2 },
+            React.createElement(Circle, { cx: radius, cy: radius, r: radius * 0.92, fill: "transparent", stroke: backgroundColor, strokeDashoffset: 0, strokeWidth: strokeWidth }),
+            React.createElement(G, { transform: `rotate(-90) translate(-${radius * 2}, 0)` },
+                React.createElement(Circle, { cx: radius, cy: radius, r: radius * 0.92, fill: "transparent", stroke: progressColor, strokeWidth: strokeWidth, strokeDasharray: `${circumference} ${circumference}`, strokeDashoffset: strokeDashoffset })),
+            Icon ? (React.createElement(G, { transform: `translate(${iconOffset}, ${iconOffset})` },
+                React.createElement(Icon, { color: progressColor, size: iconSize }))) : null)));
+};
+export default ProgressLoader;

package/components/Loader/index.d.ts

@@ -1,11 +1,2 @@
-import React from "react";
-declare type Props = {
-    progress?: number;
-    onPress?: () => void;
-    Icon?: React.ComponentType<{
-        color: string;
-        size: number;
-    }>;
-};
-declare const ProgressLoader: ({ progress, onPress, Icon, }: Props) => React.ReactElement;
-export default ProgressLoader;
+export { default as Loader } from "./ProgressLoader";
+export { default as InfiniteLoader } from "./InfiniteLoader";

package/components/Loader/index.js

@@ -1,24 +1,2 @@
-import React from "react";
-import { Svg, Circle, G } from "react-native-svg";
-import { useTheme } from "styled-components/native";
-import { TouchableOpacity } from "react-native";
-const radius = 25;
-const strokeWidth = 2;
-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 { colors } = useTheme();
-    const backgroundColor = colors.primary.c20;
-    const progressColor = colors.primary.c90;
-    const strokeDashoffset = circumference - progress * circumference;
-    return (React.createElement(TouchableOpacity, { disabled: !onPress, onPress: onPress },
-        React.createElement(Svg, { width: radius * 2, height: radius * 2 },
-            React.createElement(Circle, { cx: radius, cy: radius, r: radius * 0.92, fill: "transparent", stroke: backgroundColor, strokeDashoffset: 0, strokeWidth: strokeWidth }),
-            React.createElement(G, { transform: `rotate(-90) translate(-${radius * 2}, 0)` },
-                React.createElement(Circle, { cx: radius, cy: radius, r: radius * 0.92, fill: "transparent", stroke: progressColor, strokeWidth: strokeWidth, strokeDasharray: `${circumference} ${circumference}`, strokeDashoffset: strokeDashoffset })),
-            Icon ? (React.createElement(G, { transform: `translate(${iconOffset}, ${iconOffset})` },
-                React.createElement(Icon, { color: progressColor, size: iconSize }))) : null)));
-};
-export default ProgressLoader;
+export { default as Loader } from "./ProgressLoader";
+export { default as InfiniteLoader } from "./InfiniteLoader";

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { FlexBoxProps } from "../../Layout/Flex";
 import { TransitionProps } from "../../transitions";
 interface InnerProps {
     /**
@@ -37,6 +38,11 @@ export interface Props<ExtraProps> {
      * Extra props that are passed to the header and footer render functions.
      */
     extraProps?: ExtraProps;
+    /**
+     * Additional props to pass to the progressbar component.
+     * This component is a Flex element.
+     */
+    progressBarProps?: FlexBoxProps;
     /**
      * **Use this prop in combination with `transitionDuration`.**
      *
@@ -60,5 +66,5 @@ export interface Props<ExtraProps> {
      */
     children: React.ReactNode;
 }
-declare function FlowStepper<ExtraProps>({ activeIndex, header, footer, extraProps, renderTransition, transitionDuration, children, }: Props<ExtraProps>): JSX.Element;
+declare function FlowStepper<ExtraProps>({ activeIndex, header, footer, extraProps, progressBarProps, renderTransition, transitionDuration, children, }: Props<ExtraProps>): JSX.Element;
 export default FlowStepper;

package/components/Navigation/FlowStepper/index.js

@@ -2,18 +2,17 @@ import React, { useRef, useEffect } from "react";
 import { SafeAreaView } from "react-native";
 import Flex from "../../Layout/Flex";
 import ProgressBar from "../../ProgressBar";
-import { Transition, } from "../../transitions";
-function FlowStepper({ activeIndex, header, footer, extraProps, renderTransition, transitionDuration = 0, children, }) {
+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);
     useEffect(() => () => {
         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, { index: activeIndex, length: stepsLength }),
+            React.createElement(ProgressBar, Object.assign({ index: activeIndex, length: stepsLength }, progressBarProps)),
             React.createElement(Flex, { flex: 1 }, React.Children.map(children, (child, index) => {
                 if (renderTransition && transitionDuration) {
                     return (React.createElement(Transition, { in: index === activeIndex, timeout: transitionDuration, mountOnEnter: true, unmountOnExit: true }, (status) => {
@@ -32,7 +31,6 @@ function FlowStepper({ activeIndex, header, footer, extraProps, renderTransition
                     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, activeColor, activeBg, }: TabItemProps) => React.ReactElement;
 declare const GraphTabs: (props: BaseTabsProps) => React.ReactElement;
 export default GraphTabs;

package/components/Tabs/Graph/index.js

@@ -2,20 +2,26 @@ import React from "react";
 import styled from "styled-components/native";
 import Text from "../../Text";
 import { TouchableOpacity } from "react-native";
-import Button from "../../cta/Button";
 import TemplateTabs from "../TemplateTabs";
 const TabBbx = styled(TouchableOpacity) `
   text-align: center;
   margin: auto;
   flex: 1;
 `;
+const TabText = styled(Text).attrs({
+    lineHeight: "48px",
+    textAlign: "center",
+    borderRadius: 48,
+    px: 24,
+    height: 48,
+}) ``;
 const StyledTabs = styled(TemplateTabs) `
   border: ${(p) => `1px solid ${p.theme.colors.palette.neutral.c40}`};
   border-radius: 35px;
   padding: 4px;
 `;
-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))));
+export const GraphTab = ({ onPress, isActive, label, activeColor = "neutral.c100", activeBg = "primary.c20", }) => {
+    return (React.createElement(TabBbx, { onPress: onPress }, isActive ? (React.createElement(TabText, { variant: "body", bg: activeBg, color: activeColor, fontWeight: "semiBold" }, label)) : (React.createElement(TabText, { variant: "body" }, label))));
 };
 const GraphTabs = (props) => (React.createElement(StyledTabs, Object.assign({}, props, { Item: GraphTab })));
 export default GraphTabs;

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

@@ -4,15 +4,21 @@ export declare type BaseTabsProps = {
     labels: string[];
     activeIndex: number;
     onChange: (newIndex: number) => void;
+    activeColor?: string;
+    activeBg?: string;
 };
 export declare type TabItemProps = Partial<BaseTabsProps> & {
     label: string;
     isActive: boolean;
     index: number;
     onPress: () => void;
+    activeColor?: string;
+    activeBg?: string;
 };
 export declare type TabsProps = BaseTabsProps & {
     Item: (props: TabItemProps) => React.ReactElement;
+    activeColor?: string;
+    activeBg?: string;
 };
 export declare const TabsContainer: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & {
     columnGap?: string | number | undefined;

package/components/Tabs/TemplateTabs/index.js

@@ -8,7 +8,7 @@ export const TabsContainer = styled(FlexBox).attrs({
   width: 100%;
 `;
 const TemplateTabsGroup = (props) => {
-    const { labels, activeIndex, onChange, Item } = props;
-    return (React.createElement(TabsContainer, Object.assign({}, props), labels.map((label, index) => (React.createElement(Item, Object.assign({ key: index }, props, { label: label, index: index, isActive: index === activeIndex, onPress: () => onChange(index) }))))));
+    const { labels, activeIndex, onChange, Item, activeColor, activeBg } = props;
+    return (React.createElement(TabsContainer, Object.assign({}, props), labels.map((label, index) => (React.createElement(Item, Object.assign({ key: index }, props, { label: label, index: index, isActive: index === activeIndex, onPress: () => onChange(index), activeColor: activeColor, activeBg: activeBg }))))));
 };
 export default TemplateTabsGroup;

package/components/Text/getTextStyle.d.ts

@@ -7,6 +7,7 @@ export declare function getTextTypeStyle({ bracket }: {
     fontFamily: string;
     lineHeight?: number;
     paddingTop?: number;
+    textTransform?: string;
 }>;
 export declare function getTextStyle({ variant, bracket, fontWeight, }: Partial<BaseTextProps>): {
     fontFamily: string;

package/components/Text/getTextStyle.js

@@ -4,19 +4,23 @@ export function getTextTypeStyle({ bracket }) {
             fontFamily: "Alpha",
             lineHeight: 32,
             paddingTop: bracket ? 15 : 0,
+            textTransform: "uppercase",
         },
         h2: {
             fontFamily: "Alpha",
             lineHeight: 28,
             paddingTop: bracket ? 10 : 0,
+            textTransform: "uppercase",
         },
         h3: {
             fontFamily: "Alpha",
             lineHeight: 20,
             paddingTop: bracket ? 5 : 0,
+            textTransform: "uppercase",
         },
         h4: {
             fontFamily: "Inter",
+            textTransform: "uppercase",
         },
         large: {
             fontFamily: "Inter",
@@ -40,6 +44,7 @@ export function getTextTypeStyle({ bracket }) {
         },
         subtitle: {
             fontFamily: "Inter",
+            textTransform: "uppercase",
         },
         tiny: {
             fontFamily: "Inter",