@ledgerhq/native-ui 0.7.18-updater.0 → 0.8.0-next.1

package/lib/components/Carousel/index.d.ts

@@ -14,6 +14,10 @@ export declare type Props = React.PropsWithChildren<{
      * Called when the active carousel index is updated.
      */
     onChange?: (index: number) => void;
+    /**
+     * Called when Carousel try to scroll before the first or after the last item (if restartAfterEnd is false).
+     */
+    onOverflow?: (side: "start" | "end", fromAutoDelay: boolean) => void;
     /**
      * This number in milliseconds will enable automatic scrolling when defined.
      *
@@ -24,6 +28,14 @@ export declare type Props = React.PropsWithChildren<{
      * manually change the carousel item displayed.
      */
     autoDelay?: number;
+    /**
+     * When the delay is elasped, if the Carousel is at the last item, it will scroll back to the beginning.
+     */
+    restartAfterEnd?: boolean;
+    /**
+     * When the user tap on one side of an item, it will scroll to the next or precedent item. Same behavior as Instagram or Snapchat. Default: false.
+     */
+    scrollOnSidePress?: boolean;
     /**
      * Additional props to pass to the outer container.
      * This container is a Flex element.
@@ -39,7 +51,17 @@ export declare type Props = React.PropsWithChildren<{
      * This container is a Flex element.
      */
     slideIndicatorContainerProps?: FlexboxProps & ViewProps;
+    IndicatorComponent?: React.ComponentType<{
+        activeIndex: number;
+        slidesLength: number;
+        onChange?: (index: number) => void;
+        duration?: number;
+    }> | React.ReactElement;
+    /**
+     * Number of milliseconds a tap should not exceed to scroll to the netxt or precedent item.
+     */
+    maxDurationOfTap?: number;
 }>;
-declare function Carousel({ activeIndex, autoDelay, containerProps, slideIndicatorContainerProps, scrollViewProps, onChange, children, }: Props): JSX.Element;
+declare function Carousel({ activeIndex, autoDelay, restartAfterEnd, scrollOnSidePress, containerProps, slideIndicatorContainerProps, scrollViewProps, onChange, onOverflow, IndicatorComponent, maxDurationOfTap, children, }: Props): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Carousel>;
 export default _default;

package/lib/components/Carousel/index.js

@@ -5,7 +5,7 @@ import { Flex, SlideIndicator } from "../index";
 const HorizontalScrollView = styled.ScrollView.attrs({ horizontal: true }) `
   flex: 1;
 `;
-function Carousel({ activeIndex, autoDelay, containerProps, slideIndicatorContainerProps, scrollViewProps, onChange, children, }) {
+function Carousel({ activeIndex = 0, autoDelay, restartAfterEnd = true, scrollOnSidePress = false, containerProps, slideIndicatorContainerProps, scrollViewProps, onChange, onOverflow, IndicatorComponent = SlideIndicator, maxDurationOfTap, children, }) {
     const [init, setInit] = useState(false);
     const [activeIndexState, setActiveIndexState] = useState(activeIndex);
     const disableTimer = useRef(false);
@@ -25,8 +25,9 @@ function Carousel({ activeIndex, autoDelay, containerProps, slideIndicatorContai
     }, [itemWidth]);
     useEffect(() => {
         // On init scroll to the active index prop location - if specified.
-        if (init && activeIndex)
+        if (init && activeIndex) {
             scrollToIndex(activeIndex, false);
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [init]);
     useEffect(() => {
@@ -39,6 +40,23 @@ function Carousel({ activeIndex, autoDelay, containerProps, slideIndicatorContai
         dimensions.current = { contentWidth, contentHeight };
         setInit(true);
     };
+    const onTap = useCallback((event) => {
+        const tapPositionXPercent = event.nativeEvent.locationX / itemWidth;
+        if (tapPositionXPercent > 0.25) {
+            if (slidesLength > activeIndexState + 1) {
+                scrollToIndex(activeIndexState + 1, false);
+            }
+            else {
+                onOverflow && onOverflow("end", false);
+            }
+        }
+        else if (activeIndexState > 0) {
+            scrollToIndex(activeIndexState - 1, false);
+        }
+        else {
+            onOverflow && onOverflow("start", false);
+        }
+    }, [slidesLength, activeIndexState, scrollToIndex, onOverflow, itemWidth]);
     const onScroll = ({ nativeEvent: { contentOffset, contentSize }, }) => {
         const newIndex = Math.abs(Math.round((contentOffset.x / contentSize.width) * slidesLength));
         setActiveIndexState(newIndex);
@@ -47,28 +65,50 @@ function Carousel({ activeIndex, autoDelay, containerProps, slideIndicatorContai
     useEffect(() => {
         if (!autoDelay)
             return;
-        const interval = setInterval(() => {
+        const interval = setTimeout(() => {
             if (!disableTimer.current) {
-                setActiveIndexState((index) => {
-                    const newIndex = typeof index !== "undefined" ? (index + 1) % slidesLength : 0;
+                const newIndex = typeof activeIndexState !== "undefined" ? (activeIndexState + 1) % slidesLength : 0;
+                if (restartAfterEnd || newIndex !== 0) {
                     scrollToIndex(newIndex);
-                    onChange && onChange(newIndex);
-                    return newIndex;
-                });
+                }
+                else {
+                    onOverflow && onOverflow("end", true);
+                }
             }
         }, autoDelay);
-        return () => clearInterval(interval);
-    }, [resetTimer, slidesLength, scrollToIndex, onChange, autoDelay]);
+        return () => {
+            return clearTimeout(interval);
+        };
+    }, [
+        resetTimer,
+        slidesLength,
+        scrollToIndex,
+        onChange,
+        autoDelay,
+        activeIndexState,
+        onOverflow,
+        restartAfterEnd,
+    ]);
+    // Timestamp of start of click on the Carrousel
+    const [tapTime, setTapTime] = useState(0);
+    const onStartTap = useCallback(() => {
+        setTapTime(new Date().getTime());
+    }, []);
+    const onEndTap = useCallback((event) => {
+        const currentTime = new Date().getTime();
+        if (!maxDurationOfTap || currentTime - tapTime <= maxDurationOfTap) {
+            onTap(event);
+        }
+    }, [maxDurationOfTap, onTap, tapTime]);
     return (React.createElement(Flex, Object.assign({ flex: 1, width: "100%", alignItems: "center", justifyContent: "center" }, containerProps),
         React.createElement(HorizontalScrollView, Object.assign({ ref: scrollRef, onScroll: onScroll, onContentSizeChange: onContentSizeChange, onScrollBeginDrag: () => {
                 disableTimer.current = true;
             }, onScrollEndDrag: () => {
                 disableTimer.current = false;
-            }, pagingEnabled: Platform.OS !== "web", showsHorizontalScrollIndicator: false, scrollEventThrottle: 200, contentContainerStyle: { width: `${fullWidth}%` }, decelerationRate: "fast" }, scrollViewProps), React.Children.map(children, (child, index) => (React.createElement(Flex, { key: index, flex: 1 }, child)))),
-        React.createElement(Flex, Object.assign({ my: 8 }, slideIndicatorContainerProps),
-            React.createElement(SlideIndicator, { activeIndex: activeIndexState || 0, onChange: (index) => {
-                    scrollToIndex(index);
-                    setResetTimer({});
-                }, slidesLength: slidesLength }))));
+            }, pagingEnabled: Platform.OS !== "web", showsHorizontalScrollIndicator: false, scrollEventThrottle: 200, contentContainerStyle: { width: `${fullWidth}%` }, decelerationRate: "fast", onTouchStart: scrollOnSidePress ? onStartTap : undefined, onTouchEnd: scrollOnSidePress ? onEndTap : undefined }, scrollViewProps), React.Children.map(children, (child, index) => (React.createElement(Flex, { key: index, flex: 1 }, child)))),
+        React.createElement(Flex, Object.assign({ my: 8 }, slideIndicatorContainerProps), React.isValidElement(IndicatorComponent) ? (IndicatorComponent) : (React.createElement(IndicatorComponent, { activeIndex: activeIndexState || 0, onChange: (index) => {
+                scrollToIndex(index);
+                setResetTimer({});
+            }, slidesLength: slidesLength, duration: autoDelay })))));
 }
 export default React.memo(Carousel);

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

@@ -9,6 +9,10 @@ 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?: IconType;
+    /**
+     * Color of the background, only applied if no Badge is provided
+     */
+    backgroundColor?: string;
     /**
      * Color of the border
      */
@@ -45,6 +49,6 @@ export declare type BoxedIconProps = IconBoxProps & {
      */
     iconColor?: string;
 };
-export declare const IconBox: ({ Badge, size, children, borderColor, badgeColor, badgeSize, variant, }: IconBoxProps) => JSX.Element;
+export declare const IconBox: ({ Badge, size, children, borderColor, backgroundColor, badgeColor, badgeSize, variant, }: IconBoxProps) => JSX.Element;
 declare const BoxedIcon: ({ Icon, iconSize, iconColor, ...iconBoxProps }: BoxedIconProps) => JSX.Element;
 export default BoxedIcon;

package/lib/components/Icon/BoxedIcon.js

@@ -70,10 +70,10 @@ const IconBoxBackgroundSVG = ({ size, borderColor, badgeSize, variant = "square"
                     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, variant = "square", }) => {
+export const IconBox = ({ Badge, size = DEFAULT_BOX_SIZE, children, borderColor = "neutral.c40", backgroundColor = "transparent", 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, variant: variant })) : (React.createElement(IconBoxBackground, { border: "1px solid", size: size, borderColor: borderColor, variant: variant })),
+        hasBadge ? (React.createElement(IconBoxBackgroundSVG, { size: size, badgeSize: badgeSize, borderColor: borderColor, variant: variant })) : (React.createElement(IconBoxBackground, { border: "1px solid", size: size, borderColor: borderColor, variant: variant, backgroundColor: backgroundColor })),
         children,
         hasBadge && (React.createElement(BadgeContainer, { badgeSize: badgeSize },
             React.createElement(Badge, { size: badgeSize, color: badgeColor })))));

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

@@ -6,5 +6,7 @@ export declare type IconBoxListItemProps = Omit<BaseListItemProps, "bullet"> & {
 };
 export declare type IconBoxListProps = Omit<BaseListProps, "items"> & {
     items: IconBoxListItemProps[];
+    iconVariants?: "outlined" | "plain";
+    iconShapes?: "square" | "circle";
 };
-export default function IconBoxList({ items, ...props }: IconBoxListProps): React.ReactElement;
+export default function IconBoxList({ items, iconVariants, iconShapes, ...props }: IconBoxListProps): React.ReactElement;

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

@@ -11,9 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { useMemo } from "react";
 import List from "../List";
-import { IconBox } from "../../../Icon";
+import BoxedIcon from "../../../Icon/BoxedIcon";
 export default function IconBoxList(_a) {
-    var { items } = _a, props = __rest(_a, ["items"]);
-    const iconBoxItems = useMemo(() => items.map((item) => (Object.assign(Object.assign({}, item), { bullet: React.createElement(IconBox, { Icon: item.Icon, boxSize: 48, iconSize: 20 }) }))), [items]);
+    var { items, iconVariants, iconShapes } = _a, props = __rest(_a, ["items", "iconVariants", "iconShapes"]);
+    const iconBoxItems = useMemo(() => items.map((item) => (Object.assign(Object.assign({}, item), { bullet: (React.createElement(BoxedIcon, { variant: iconShapes, iconColor: iconVariants === "plain" ? "primary.c70" : undefined, backgroundColor: iconVariants === "plain" ? "primary.c10" : undefined, borderColor: iconVariants === "plain" ? "transparent" : undefined, Icon: item.Icon, iconSize: 20 })) }))), [items]);
     return React.createElement(List, Object.assign({ items: iconBoxItems }, props));
 }

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

@@ -18,4 +18,5 @@ export declare type BaseModalProps = {
     noCloseButton?: boolean;
 } & Partial<ModalProps>;
 export declare function ModalHeader({ Icon, iconColor, title, description, subtitle, }: Pick<BaseModalProps, "Icon" | "iconColor" | "title" | "description" | "subtitle">): React.ReactElement | null;
+export declare function ModalHeaderCloseButton({ onClose, }: Pick<BaseModalProps, "onClose">): React.ReactElement;
 export default function BaseModal({ isOpen, onClose, noCloseButton, safeContainerStyle, containerStyle, modalStyle, preventBackdropClick, Icon, iconColor, title, description, subtitle, children, ...rest }: BaseModalProps): React.ReactElement;

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

@@ -20,10 +20,10 @@ import { space } from "styled-system";
 import { Icons } from "../../../../assets";
 const { width, height } = sizes;
 const SafeContainer = styled.SafeAreaView `
-  background-color: ${(p) => p.theme.colors.background.main};
+  background-color: ${(p) => p.theme.colors.background.drawer};
 `;
 const Container = styled.View `
-  background-color: ${(p) => p.theme.colors.background.main};
+  background-color: ${(p) => p.theme.colors.background.drawer};
   width: 100%;
   padding: 16px;
   min-height: 350px;
@@ -35,7 +35,7 @@ const ContentContainer = styled.View `
 const CloseContainer = styled.View `
   display: flex;
   align-items: flex-end;
-  margin-bottom: ${(p) => p.theme.space[7]}px;
+  margin-bottom: ${(p) => p.theme.space[6]}px;
 `;
 const ClosePressableExtendedBounds = styled.TouchableOpacity.attrs({
     p: 3,
@@ -68,6 +68,11 @@ export function ModalHeader({ Icon, iconColor, title, description, subtitle, })
         title && React.createElement(StyledTitle, { textAlign: "center" }, title),
         description && (React.createElement(Text, { variant: "body", color: "neutral.c70", textAlign: "center", mt: 6 }, description))));
 }
+export function ModalHeaderCloseButton({ onClose, }) {
+    return (React.createElement(CloseContainer, null,
+        React.createElement(ClosePressableExtendedBounds, { onPress: onClose },
+            React.createElement(Icons.CloseMedium, { color: "neutral.c100", size: "20px" }))));
+}
 export default function BaseModal(_a) {
     var { isOpen, onClose = () => { }, noCloseButton, safeContainerStyle = {}, containerStyle = {}, modalStyle = {}, preventBackdropClick, Icon, iconColor, title, description, subtitle, children } = _a, rest = __rest(_a, ["isOpen", "onClose", "noCloseButton", "safeContainerStyle", "containerStyle", "modalStyle", "preventBackdropClick", "Icon", "iconColor", "title", "description", "subtitle", "children"]);
     const backDropProps = preventBackdropClick
@@ -80,9 +85,7 @@ export default function BaseModal(_a) {
     return (React.createElement(ReactNativeModal, Object.assign({}, rest, backDropProps, { isVisible: isOpen, deviceWidth: width, deviceHeight: height, useNativeDriver: true, useNativeDriverForBackdrop: true, hideModalContentWhileAnimating: true, onModalHide: onClose, style: [defaultModalStyle, modalStyle] }),
         React.createElement(SafeContainer, { style: safeContainerStyle },
             React.createElement(Container, { style: containerStyle },
-                !noCloseButton && (React.createElement(CloseContainer, null,
-                    React.createElement(ClosePressableExtendedBounds, { onPress: onClose },
-                        React.createElement(Icons.CloseMedium, { color: "neutral.c100", size: "20px" })))),
+                !noCloseButton && React.createElement(ModalHeaderCloseButton, { onClose: onClose }),
                 React.createElement(ModalHeader, { Icon: Icon, iconColor: iconColor, title: title, description: description, subtitle: subtitle }),
                 React.createElement(ContentContainer, null, children)))));
 }

package/lib/components/Layout/ScrollListContainer/index.d.ts

@@ -1,10 +1,15 @@
 import React from "react";
-import { FlatListProps, NativeSyntheticEvent, NativeScrollEvent } from "react-native";
-import { BaseStyledProps } from "../../styled";
-declare type ScrollListContainerProps = BaseStyledProps & Omit<FlatListProps<any>, "onScroll" | "data" | "renderItem"> & {
+import { FlatListProps, NativeSyntheticEvent, NativeScrollEvent, FlatList } from "react-native";
+declare const ScrollListContainer: React.ForwardRefExoticComponent<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;
+    rowGap?: string | number | undefined;
+    color?: string | undefined;
+    display?: string | undefined;
+    position?: string | undefined;
+    maxHeight?: number | undefined;
+} & Omit<FlatListProps<any>, "data" | "onScroll" | "renderItem"> & {
     children: React.ReactNode;
-    onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
-    horizontal?: boolean;
-};
-declare const ScrollListContainer: ({ children, onScroll, horizontal, ...props }: ScrollListContainerProps) => JSX.Element;
+    onScroll?: ((event: NativeSyntheticEvent<NativeScrollEvent>) => void) | undefined;
+    horizontal?: boolean | undefined;
+} & React.RefAttributes<FlatList<any>>>;
 export default ScrollListContainer;

package/lib/components/Layout/ScrollListContainer/index.js

@@ -9,8 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from "react";
-import { View } from "react-native";
+import React, { forwardRef } from "react";
+import { View, } from "react-native";
 import Animated from "react-native-reanimated";
 import baseStyled from "../../styled";
 const StyledFlatList = baseStyled.FlatList ``;
@@ -19,8 +19,8 @@ const AnimatedFlatList = Animated.createAnimatedComponent(StyledFlatList);
  ** This Layout is a wrapper for FlatList that accepts
  ** complex onScroll callback for react-native-reanimated.
  */
-const ScrollListContainer = (_a) => {
+const ScrollListContainer = forwardRef((_a, ref) => {
     var { children, onScroll, horizontal = false } = _a, props = __rest(_a, ["children", "onScroll", "horizontal"]);
-    return (React.createElement(AnimatedFlatList, Object.assign({ data: [...React.Children.toArray(children)], renderItem: ({ item }) => React.createElement(View, null, item), onScroll: onScroll, horizontal: horizontal }, props)));
-};
+    return (React.createElement(AnimatedFlatList, Object.assign({ ref: ref, data: [...React.Children.toArray(children)], renderItem: ({ item }) => React.createElement(View, null, item), onScroll: onScroll, horizontal: horizontal }, props)));
+});
 export default ScrollListContainer;

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

@@ -2,7 +2,7 @@ import React from "react";
 declare type Props = {
     slidesLength: number;
     activeIndex: number;
-    onChange: (index: number) => void;
+    onChange?: (index: number) => void;
 };
 declare function SlideIndicator({ slidesLength, activeIndex, onChange }: Props): React.ReactElement;
 export default SlideIndicator;

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

@@ -40,7 +40,7 @@ function SlideIndicator({ slidesLength, activeIndex = 0, onChange }) {
         width: withTiming(activeSize.value, config),
     }));
     return (React.createElement(Container, null,
-        slidesArray.map((_, index) => (React.createElement(Bullet, { key: index, onPress: () => onChange(index) }))),
+        slidesArray.map((_, index) => (React.createElement(Bullet, { key: index, onPress: () => onChange && onChange(index) }))),
         React.createElement(AnimatedBullet, { style: [animatedStyles] })));
 }
 export default SlideIndicator;

package/lib/components/Navigation/StoriesIndicator/index.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import { FlexBoxProps } from "../../Layout/Flex";
+export interface StoryBarProps {
+    /**
+     * Is this step active.
+     */
+    isActive?: boolean;
+    /**
+     * Has this step been completed.
+     */
+    full?: boolean;
+    /**
+     * The duration of this step.
+     */
+    duration?: number;
+}
+export interface StoriesIndicatorProps extends FlexBoxProps {
+    /**
+     * The index of the active step.
+     */
+    activeIndex: number;
+    /**
+     * The total number of steps.
+     */
+    slidesLength: number;
+    onChange?: (index: number) => void;
+    /**
+     * The duration of each step.
+     */
+    duration?: number;
+}
+declare function StoriesIndicator({ activeIndex, slidesLength, duration }: StoriesIndicatorProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof StoriesIndicator>;
+export default _default;

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

@@ -0,0 +1,32 @@
+import React, { useEffect, useMemo } from "react";
+import styled from "styled-components/native";
+import Animated, { useAnimatedStyle, withTiming, useSharedValue, Easing, } from "react-native-reanimated";
+import { Flex } from "../../Layout";
+const ProgressBar = styled.View `
+  background-color: ${(p) => p.theme.colors.primary.c100};
+  height: 100%;
+  width: 100%;
+  border-radius: ${(p) => p.theme.radii[2]}px;
+`;
+const AnimatedProgressBar = Animated.createAnimatedComponent(ProgressBar);
+function ActiveProgressBar({ duration }) {
+    const width = useSharedValue(0);
+    useEffect(() => {
+        width.value = 100;
+    }, [width]);
+    const animatedStyles = useAnimatedStyle(() => ({
+        width: withTiming(`${width.value}%`, {
+            duration: duration || 200,
+            easing: Easing.linear,
+        }),
+    }), [width, duration]);
+    return React.createElement(AnimatedProgressBar, { style: animatedStyles });
+}
+function StoryBar({ full = false, isActive, duration }) {
+    return (React.createElement(Flex, { height: 4, backgroundColor: "neutral.c50", margin: "auto", borderRadius: 2, flex: 1, mx: 1 }, isActive ? React.createElement(ActiveProgressBar, { duration: duration }) : full ? React.createElement(ProgressBar, null) : null));
+}
+function StoriesIndicator({ activeIndex, slidesLength, duration }) {
+    const storiesArray = useMemo(() => new Array(slidesLength).fill(0), [slidesLength]);
+    return (React.createElement(Flex, { flexDirection: "row", alignItems: "stretch", width: "100%" }, storiesArray.map((_, storyIndex) => (React.createElement(StoryBar, { key: storyIndex, full: activeIndex > storyIndex, isActive: activeIndex === storyIndex, duration: duration })))));
+}
+export default React.memo(StoriesIndicator);

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

@@ -1,3 +1,4 @@
 export { default as SlideIndicator } from "./SlideIndicator";
 export { default as Stepper } from "./Stepper";
 export { default as FlowStepper } from "./FlowStepper";
+export { default as StoriesIndicator } from "./StoriesIndicator";

package/lib/components/Navigation/index.js

@@ -1,3 +1,4 @@
 export { default as SlideIndicator } from "./SlideIndicator";
 export { default as Stepper } from "./Stepper";
 export { default as FlowStepper } from "./FlowStepper";
+export { default as StoriesIndicator } from "./StoriesIndicator";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.7.18-updater.0",
+  "version": "0.8.0-next.1",
   "description": "Ledger Live - Mobile UI",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",
@@ -26,7 +26,7 @@
   ],
   "dependencies": {
     "@ledgerhq/icons-ui": "^0.2.4",
-    "@ledgerhq/ui-shared": "^0.1.8-updater.0",
+    "@ledgerhq/ui-shared": "^0.1.8",
     "@types/color": "^3.0.3",
     "@types/react": "^17.0.39",
     "@types/react-native": "^0.65.9",