@ledgerhq/native-ui 0.22.0-nightly.0 → 0.22.1-next.0

package/lib/components/Cards/BannerCard/index.d.ts

@@ -21,6 +21,6 @@ export declare const ChevronContainer: import("styled-components").StyledCompone
     position?: string | undefined;
     maxHeight?: string | number | undefined;
 }, never>;
-export declare const CloseButton: ({ onPressDismiss }: CloseProps) => JSX.Element;
+export declare const CloseButton: ({ onPressDismiss }: CloseProps) => React.JSX.Element;
 declare const BannerCard: (props: CardProps) => React.ReactElement;
 export default BannerCard;

package/lib/components/Cards/SideImageCard/index.d.ts

@@ -27,6 +27,6 @@ export declare const ImageContainer: import("styled-components").StyledComponent
 }, never>;
 export declare const ImageContent: import("styled-components").StyledComponent<typeof Image, import("styled-components").DefaultTheme, {}, never>;
 export declare const CloseContainer: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, {}, never>;
-export declare const CloseButton: (props: CardProps) => JSX.Element;
+export declare const CloseButton: (props: CardProps) => React.JSX.Element;
 declare const SideImageCard: (props: CardProps) => React.ReactElement;
 export default SideImageCard;

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

@@ -70,6 +70,6 @@ export type Props = React.PropsWithChildren<{
      */
     onManualChange?: (index: number) => void;
 }>;
-declare function Carousel({ activeIndex, autoDelay, restartAfterEnd, scrollOnSidePress, containerProps, slideIndicatorContainerProps, scrollViewProps, onChange, onOverflow, IndicatorComponent, maxDurationOfTap, children, onAutoChange, onManualChange, }: Props): JSX.Element;
+declare function Carousel({ activeIndex, autoDelay, restartAfterEnd, scrollOnSidePress, containerProps, slideIndicatorContainerProps, scrollViewProps, onChange, onOverflow, IndicatorComponent, maxDurationOfTap, children, onAutoChange, onManualChange, }: Props): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Carousel>;
 export default _default;

package/lib/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";
 import { I18nManager } from "react-native";

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

@@ -15,5 +15,5 @@ declare const ChartCard: ({ Header, Footer, range, isLoading, refreshChart, char
     }[];
     yAxisFormatter: (value: number) => string;
     valueFormatter: (value: number) => string;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default ChartCard;

package/lib/components/Form/SelectableList.d.ts

@@ -20,8 +20,8 @@ export type Props<V> = React.PropsWithChildren<{
     currentValue?: V;
     onChange: (newValue: V) => void;
 }>;
-declare function SelectableList<V>({ currentValue, onChange, children }: Props<V>): JSX.Element;
+declare function SelectableList<V>({ currentValue, onChange, children }: Props<V>): React.JSX.Element;
 declare namespace SelectableList {
-    var Element: <V>(props: ElementProps<V>) => JSX.Element;
+    var Element: <V extends React.ReactNode>(props: ElementProps<V>) => React.JSX.Element;
 }
 export default SelectableList;

package/lib/components/Form/Slider/components.d.ts

@@ -4,7 +4,7 @@ export declare const MinMaxTextContainer: import("styled-components").StyledComp
 export declare const Notch: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, {}, never>;
 export declare const RailSelected: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, {}, never>;
 export declare const Rail: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, {}, never>;
-export declare const Thumb: () => JSX.Element;
+export declare const Thumb: () => React.JSX.Element;
 export declare const Label: ({ children }: {
     children: React.ReactNode;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/Form/Slider/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import type { SliderProps } from "./index.native";
-declare const SliderScreen: (_props: SliderProps) => JSX.Element;
+declare const SliderScreen: (_props: SliderProps) => React.JSX.Element;
 export default SliderScreen;

package/lib/components/Form/Slider/index.native.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 export type SliderProps = {
     step: number;
     min: number;
@@ -9,5 +9,5 @@ export type SliderProps = {
     onTouchEnd?: (low: number, high: number) => void;
     disabled?: boolean;
 };
-declare const Slider: ({ value, min, max, step, onChange, onTouchEnd, onTouchStart, disabled, }: SliderProps) => JSX.Element;
+declare const Slider: ({ value, min, max, step, onChange, onTouchEnd, onTouchStart, disabled, }: SliderProps) => React.JSX.Element;
 export default Slider;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { IconOrElementType, NewIconOrElementType, NewIconProps, IconType } from "./type";
 export declare const DEFAULT_BOX_SIZE = 40;
 export declare const DEFAULT_ICON_SIZE = 16;
@@ -49,6 +49,6 @@ export type BoxedIconProps = IconBoxProps & {
      */
     iconColor?: string;
 };
-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 declare const IconBox: ({ Badge, size, children, borderColor, backgroundColor, badgeColor, badgeSize, variant, }: IconBoxProps) => React.JSX.Element;
+declare const BoxedIcon: ({ Icon, iconSize, iconColor, ...iconBoxProps }: BoxedIconProps) => React.JSX.Element;
 export default BoxedIcon;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { FlexBoxProps } from "../Layout/Flex";
 import { IconOrElementType } from "./type";
 export declare const DEFAULT_ICON_SIZE = 16;
@@ -22,5 +22,5 @@ export type IconBadgeProps = FlexBoxProps & {
      */
     backgroundColor?: string;
 };
-declare const IconBadge: ({ Icon, iconSize, backgroundColor, iconColor, ...rest }: IconBadgeProps) => JSX.Element;
+declare const IconBadge: ({ Icon, iconSize, backgroundColor, iconColor, ...rest }: IconBadgeProps) => React.JSX.Element;
 export default IconBadge;

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

@@ -11,7 +11,7 @@ const Accordion = ({ collapsed = false, children, title, onPress, }) => {
     };
     const style = useAnimatedStyle(() => {
         return {
-            maxHeight: withTiming(animationHeight.value, config),
+            maxHeight: withTiming(animationHeight.value, config), // patch for
         };
     });
     useEffect(() => {

package/lib/components/Layout/List/VerticalStepper/StepperItem.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { Item } from "../types";
 export type Props = {
     item: Item;
@@ -8,4 +8,4 @@ export type Props = {
     onTapIndex?: (_: number) => void;
     index: number;
 };
-export default function StepperItem({ item, progress, nested, isLastItem, onTapIndex, index, }: Props): JSX.Element;
+export default function StepperItem({ item, progress, nested, isLastItem, onTapIndex, index, }: Props): React.JSX.Element;

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

@@ -6,16 +6,5 @@ export type Props = BaseStyledProps & {
     onTapIndex?: (arg0: number) => void;
     nested?: boolean;
 };
-declare const _default: React.NamedExoticComponent<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?: string | number | undefined;
-} & {
-    steps?: Item[] | undefined;
-    onTapIndex?: ((arg0: number) => void) | undefined;
-    nested?: boolean | undefined;
-}>;
+declare const _default: React.NamedExoticComponent<Props>;
 export default _default;

package/lib/components/Layout/List/VerticalTimeline/TimelineIndicator.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { Props as FlexProps } from "../../Flex";
 import { ItemStatus } from "../types";
 export type Props = FlexProps & {
@@ -7,7 +7,7 @@ export type Props = FlexProps & {
     isLastItem?: boolean;
     topHeight?: number;
 };
-declare function TimelineIndicator({ status, isFirstItem, isLastItem, topHeight, ...props }: Props): JSX.Element;
+declare function TimelineIndicator({ status, isFirstItem, isLastItem, topHeight, ...props }: Props): React.JSX.Element;
 declare namespace TimelineIndicator {
     var topSegmentDefaultHeight: number;
 }

package/lib/components/Layout/List/VerticalTimeline/TimelineItem.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { Item } from "../types";
 export type Props = {
     item: Item;
@@ -9,4 +9,4 @@ export type Props = {
     index: number;
     withExtraMarginOnActiveStep?: boolean;
 };
-export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, isLastItem, setActiveIndex, index, withExtraMarginOnActiveStep, }: Props): JSX.Element;
+export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, isLastItem, setActiveIndex, index, withExtraMarginOnActiveStep, }: Props): React.JSX.Element;

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

@@ -15,7 +15,7 @@ export type Props = BaseStyledProps & {
     autoScroll?: boolean;
     contentContainerStyle?: StyleProp<ViewStyle>;
 };
-declare function VerticalTimeline({ steps, formatEstimatedTime, setActiveIndex, header, autoScroll, contentContainerStyle, ...props }: Props): JSX.Element;
+declare function VerticalTimeline({ steps, formatEstimatedTime, setActiveIndex, header, autoScroll, contentContainerStyle, ...props }: Props): React.JSX.Element;
 declare namespace VerticalTimeline {
     var BodyText: React.FC<BaseTextProps>;
     var SubtitleText: React.FC<BaseTextProps>;

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import { ModalProps } from "react-native-modal";
 import { StyleProp, ViewStyle } from "react-native";
 import { IconOrElementType } from "../../../Icon/type";
@@ -16,7 +16,9 @@ export type BaseModalProps = {
     subtitle?: string;
     children?: React.ReactNode;
     noCloseButton?: boolean;
-    CustomHeader?: React.ComponentType;
+    CustomHeader?: React.ComponentType<{
+        children?: ReactNode;
+    }>;
 } & 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;

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

@@ -1,14 +1,14 @@
 import React from "react";
-import { FlatListProps } from "react-native";
+import { FlatListProps, ScrollViewProps } from "react-native";
 import type { HeaderProps } from "./Header";
 import { BaseStyledProps } from "../../styled";
-type ScrollContainerHeaderProps = BaseStyledProps & Omit<HeaderProps, "currentPositionY"> & Omit<FlatListProps<any>, "onScroll" | "data" | "renderItem"> & {
+type ScrollContainerHeaderProps<ItemType> = BaseStyledProps & Omit<HeaderProps, "currentPositionY"> & Omit<FlatListProps<ItemType>, "onScroll" | "data" | "renderItem"> & {
     children?: React.ReactNode;
     onScroll?: (y: number) => void;
     containerProps?: BaseStyledProps;
-};
+} & Pick<ScrollViewProps, "stickyHeaderIndices">;
 declare const ScrollContainerHeader: {
-    ({ TopLeftSection, TopRightSection, TopMiddleSection, MiddleSection, BottomSection, children, onScroll, containerProps, ...props }: ScrollContainerHeaderProps): JSX.Element;
+    <ItemType>({ TopLeftSection, TopRightSection, TopMiddleSection, MiddleSection, BottomSection, children, onScroll, containerProps, ...props }: ScrollContainerHeaderProps<ItemType>): JSX.Element;
     Header: {
         ({ TopLeftSection, TopRightSection, TopMiddleSection, MiddleSection, BottomSection, currentPositionY, }: HeaderProps): JSX.Element;
         PADDING_HORIZONTAL: number;

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

@@ -10,12 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from "react";
-import { View } from "react-native";
+import { FlatList, 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 StyledFlatList = baseStyled(FlatList) ``;
 const AnimatedFlatList = Animated.createAnimatedComponent(StyledFlatList);
 const ScrollContainerHeader = (_a) => {
     var { TopLeftSection, TopRightSection, TopMiddleSection, MiddleSection, BottomSection, children, onScroll, containerProps } = _a, props = __rest(_a, ["TopLeftSection", "TopRightSection", "TopMiddleSection", "MiddleSection", "BottomSection", "children", "onScroll", "containerProps"]);
@@ -27,7 +27,7 @@ const ScrollContainerHeader = (_a) => {
     });
     return (React.createElement(Flex, Object.assign({ flex: 1 }, containerProps),
         React.createElement(Header, { TopLeftSection: TopLeftSection, TopRightSection: TopRightSection, TopMiddleSection: TopMiddleSection, MiddleSection: MiddleSection, BottomSection: BottomSection, currentPositionY: currentPositionY }),
-        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 }))));
+        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.toString() }))));
 };
 ScrollContainerHeader.Header = Header;
 export default ScrollContainerHeader;

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

@@ -66,5 +66,5 @@ export interface Props<ExtraProps> {
      */
     children: React.ReactNode;
 }
-declare function FlowStepper<ExtraProps>({ activeIndex, header, footer, extraProps, progressBarProps, renderTransition, transitionDuration, children, }: Props<ExtraProps>): JSX.Element;
+declare function FlowStepper<ExtraProps>({ activeIndex, header, footer, extraProps, progressBarProps, renderTransition, transitionDuration, children, }: Props<ExtraProps>): React.JSX.Element;
 export default FlowStepper;

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

@@ -29,6 +29,6 @@ export interface StoriesIndicatorProps extends FlexBoxProps {
      */
     duration?: number;
 }
-declare function StoriesIndicator({ activeIndex, slidesLength, duration }: StoriesIndicatorProps): JSX.Element;
+declare function StoriesIndicator({ activeIndex, slidesLength, duration }: StoriesIndicatorProps): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof StoriesIndicator>;
 export default _default;

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

@@ -15,6 +15,6 @@ export interface Props extends FlexBoxProps {
      */
     activeBarProps?: BaseStyledProps;
 }
-declare function ProgressBar({ index, length, activeBarProps, ...props }: Props): JSX.Element;
+declare function ProgressBar({ index, length, activeBarProps, ...props }: Props): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof ProgressBar>;
 export default _default;

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

@@ -17,5 +17,5 @@ export interface BaseTextProps extends TextProps, BaseStyledProps, FontSizeProps
     uppercase?: boolean;
     children?: React.ReactNode;
 }
-declare const Text: ({ children, bracket, textAlign, testID, ...props }: BaseTextProps) => JSX.Element;
+declare const Text: ({ children, bracket, textAlign, testID, ...props }: BaseTextProps) => React.JSX.Element;
 export default Text;

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

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import React, { useCallback, useState, useMemo } from "react";
 import styled, { useTheme } from "styled-components/native";
-import { ActivityIndicator, TouchableOpacity, View } from "react-native";
+import { ActivityIndicator, TouchableOpacity, View, } from "react-native";
 import { buttonSizeStyle, getButtonColorStyle } from "../../cta/Button/getButtonStyle";
 import { ctaIconSize, ctaTextType } from "../../cta/getCtaStyle";
 import Text from "../../Text";

package/lib/components/cta/QuickAction/QuickActionButton/index.d.ts

@@ -11,7 +11,7 @@ export type QuickActionButtonProps = TouchableOpacityProps & BaseStyledProps & {
     textVariant?: TextVariants;
     variant?: Variant;
 };
-export declare const StyledText: import("styled-components").StyledComponent<({ children, bracket, textAlign, testID, ...props }: import("../../../Text").BaseTextProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledText: import("styled-components").StyledComponent<({ children, bracket, textAlign, testID, ...props }: import("../../../Text").BaseTextProps) => React.JSX.Element, import("styled-components").DefaultTheme, {}, never>;
 export declare const Base: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, TouchableOpacityProps & {
     visuallyDisabled?: boolean | undefined;
     variant: Variant;

package/lib/components/cta/QuickAction/QuickActionList/index.js

@@ -17,6 +17,6 @@ const QuickActionList = (_a) => {
     const renderItem = useCallback(({ item, index }) => {
         return (React.createElement(QuickActionButton, Object.assign({}, item, { flex: 1, mr: (index + 1) % numColumns > 0 && data && index !== data.length - 1 ? 4 : 0, mb: (data === null || data === void 0 ? void 0 : data.length) && index + numColumns < data.length ? 4 : 0 })));
     }, []);
-    return (React.createElement(FlatList, Object.assign({}, otherProps, { data: data, keyExtractor: (_item, index) => `${id}${index}`, horizontal: false, renderItem: renderItem, numColumns: numColumns, style: { width: "100%" } })));
+    return (React.createElement(FlatList, Object.assign({}, otherProps, { data: data, keyExtractor: (_item, index) => `${id}${index}`, horizontal: false, renderItem: renderItem, numColumns: numColumns })));
 };
 export default QuickActionList;

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

@@ -19,12 +19,12 @@ export interface AlertProps {
 }
 declare function Alert({ type, Icon, title, showIcon, children }: AlertProps): JSX.Element;
 declare namespace Alert {
-    var BodyText: import("styled-components").StyledComponent<({ children, bracket, textAlign, testID, ...props }: import("../../Text").BaseTextProps) => JSX.Element, import("styled-components").DefaultTheme, {
+    var BodyText: import("styled-components").StyledComponent<({ children, bracket, textAlign, testID, ...props }: import("../../Text").BaseTextProps) => React.JSX.Element, import("styled-components").DefaultTheme, {
         flexShrink: 1;
         variant: "bodyLineHeight";
         fontWeight: "semiBold";
     }, "fontWeight" | "flexShrink" | "variant">;
-    var UnderlinedText: import("styled-components").StyledComponent<({ children, bracket, textAlign, testID, ...props }: import("../../Text").BaseTextProps) => JSX.Element, import("styled-components").DefaultTheme, {
+    var UnderlinedText: import("styled-components").StyledComponent<({ children, bracket, textAlign, testID, ...props }: import("../../Text").BaseTextProps) => React.JSX.Element, import("styled-components").DefaultTheme, {
         flexShrink: 1;
         variant: "bodyLineHeight";
         fontWeight: "semiBold";

package/lib/components/message/Log/Brackets.d.ts

@@ -8,8 +8,8 @@ type BaseBracketProps = FlexBoxProps & BracketProps & {
     style?: ViewStyle;
 };
 export declare const Bracket: ({ color, style, mb, mt }: BaseBracketProps) => React.ReactElement;
-export declare const BracketTopLeft: ({ color }: BracketProps) => JSX.Element;
-export declare const BracketTopRight: ({ color }: BracketProps) => JSX.Element;
-export declare const BracketBottomLeft: ({ color }: BracketProps) => JSX.Element;
-export declare const BracketBottomRight: ({ color }: BracketProps) => JSX.Element;
+export declare const BracketTopLeft: ({ color }: BracketProps) => React.JSX.Element;
+export declare const BracketTopRight: ({ color }: BracketProps) => React.JSX.Element;
+export declare const BracketBottomLeft: ({ color }: BracketProps) => React.JSX.Element;
+export declare const BracketBottomRight: ({ color }: BracketProps) => React.JSX.Element;
 export {};

package/lib/components/transitions/Fade.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { TransitionProps } from "./types";
 export interface FadeProps extends TransitionProps {
     /**
@@ -9,4 +9,4 @@ export interface FadeProps extends TransitionProps {
 /**
  * A fade-in / fade-out transition changing the opacity of its children based on their status.
  */
-export declare function Fade({ status, delay, duration, style, children }: FadeProps): JSX.Element;
+export declare function Fade({ status, delay, duration, style, children }: FadeProps): React.JSX.Element;

package/lib/components/transitions/Slide.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { TransitionProps } from "./types";
 export interface SlideProps extends TransitionProps {
     /**
@@ -9,4 +9,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): React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.22.0-nightly.0",
+  "version": "0.22.1-next.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -36,46 +36,39 @@
     "lib/**/*"
   ],
   "dependencies": {
-    "@types/color": "^3.0.3",
-    "@types/styled-system": "^5.1.13",
     "color": "^4.0.0",
-    "moment": "^2.29.1",
-    "react-native-animatable": "^1.3.3",
     "react-native-modal": "^13.0.0",
     "react-native-svg": "^13.11.0",
     "rn-range-slider": "2.1.1",
     "styled-system": "^5.1.5",
     "victory-native": "^35.5.5",
-    "@ledgerhq/crypto-icons-ui": "^0.5.1",
-    "@ledgerhq/icons-ui": "^0.6.1",
+    "@ledgerhq/crypto-icons-ui": "^0.6.0-next.0",
+    "@ledgerhq/icons-ui": "^0.6.2-next.0",
     "@ledgerhq/ui-shared": "^0.2.1"
   },
   "peerDependencies": {
-    "@types/react": "*",
-    "@types/react-native": "*",
-    "@types/styled-components": "^5.3.3",
-    "@types/styled-components-react-native": "^5.3.3",
     "react": ">=17",
     "react-native": ">=0.64.0",
-    "react-native-reanimated": "^3.0.0",
+    "react-native-reanimated": "~3.3.0",
     "styled-components": "^5.3.3"
   },
   "devDependencies": {
+    "@types/color": "^3.0.3",
     "@babel/core": "^7.22.8",
     "@babel/generator": "^7.17.2",
     "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/plugin-proposal-export-namespace-from": "^7.16.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/plugin-transform-arrow-functions": "^7.20.7",
-    "@babel/plugin-transform-shorthand-properties": "^7.18.6",
-    "@babel/plugin-transform-template-literals": "^7.18.9",
+    "@babel/plugin-transform-arrow-functions": "^7.22.5",
+    "@babel/plugin-transform-shorthand-properties": "^7.22.5",
+    "@babel/plugin-transform-template-literals": "^7.22.5",
     "@babel/preset-env": "^7.15.8",
     "@babel/runtime": "^7.17.2",
     "@emotion/core": "^11.0.0",
     "@emotion/native": "^11.0.0",
-    "@expo/metro-config": "^0.7.1",
-    "@expo/webpack-config": "^18.0.1",
+    "@expo/metro-config": "^0.10.7",
+    "@expo/webpack-config": "^18.1.2",
     "@react-native-async-storage/async-storage": "1.17.12",
     "@react-native-community/cli-server-api": "^7.0.3",
     "@react-native-community/datetimepicker": "6.7.5",
@@ -100,46 +93,47 @@
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/node": "^18.0.0",
     "@types/prop-types": "^15.7.5",
-    "@types/react": "^17.0.53",
-    "@types/react-native": "0.71.5",
+    "@types/react": "^18.2.21",
+    "@types/react-native": "0.72.5",
     "@types/styled-components": "^5.1.3",
     "@types/styled-components-react-native": "^5.1.3",
+    "@types/styled-system": "^5.1.13",
     "assert": "^2.0.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-react-docgen-typescript": "^1.5.1",
     "babel-plugin-react-native-web": "^0.19.0",
-    "babel-preset-expo": "^9.3.0",
+    "babel-preset-expo": "^9.5.0",
     "camelcase": "^6.2.1",
     "csstype": "^3.0.11",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "expo": "~48.0.9",
-    "expo-asset": "^8.9.1",
-    "expo-constants": "^14.2.1",
-    "expo-font": "^11.1.1",
-    "expo-modules-core": "^1.2.2",
+    "expo": "^49.0.7",
+    "expo-asset": "8.10.1",
+    "expo-constants": "^14.4.2",
+    "expo-font": "^11.4.0",
+    "expo-modules-core": "1.5.11",
     "fs-extra": "^10.0.1",
     "glob": "^7.2.0",
-    "metro": "^0.76.0",
-    "metro-config": "^0.76.0",
-    "metro-core": "^0.77.0",
-    "metro-minify-uglify": "^0.76.0",
-    "metro-react-native-babel-preset": "^0.76.0",
-    "metro-react-native-babel-transformer": "^0.76.0",
-    "metro-resolver": "^0.76.0",
-    "metro-runtime": "^0.76.0",
-    "metro-source-map": "^0.76.0",
-    "metro-transform-worker": "^0.76.0",
+    "metro": "^0.79.0",
+    "metro-config": "^0.79.0",
+    "metro-core": "^0.79.0",
+    "metro-minify-uglify": "^0.76.8",
+    "metro-react-native-babel-preset": "^0.77.0",
+    "metro-react-native-babel-transformer": "^0.77.0",
+    "metro-resolver": "^0.79.0",
+    "metro-runtime": "^0.79.0",
+    "metro-source-map": "^0.79.0",
+    "metro-transform-worker": "^0.79.0",
     "minimatch": "^5.1.0",
     "prop-types": "^15.8.1",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-is": "^18",
-    "react-native": "0.71.6",
-    "react-native-reanimated": "^3.1.0",
+    "react-native": "0.72.6",
+    "react-native-reanimated": "~3.3.0",
     "react-native-safe-area-context": "^4.5.0",
-    "react-native-web": "~0.19.0",
+    "react-native-web": "~0.19.6",
     "regenerator-runtime": "^0.14.0",
     "rimraf": "^4.4.1",
     "styled-components": "^5.3.3",
@@ -151,7 +145,7 @@
     "victory": "^35.5.5",
     "webpack": "^5.76.1",
     "webpack-dev-server": "^4.12.0",
-    "metro-extra-config": "1.0.0"
+    "metro-extra-config": "1.0.1-next.0"
   },
   "scripts": {
     "android": "expo start --android",
@@ -166,10 +160,11 @@
     "lint:fix": "pnpm lint --fix",
     "lint:css": "stylelint './src/**/*.{js,jsx,ts,tsx}'",
     "release": "yarn publish ./lib --access public",
-    "expo": "expo start",
+    "expo-start": "expo start",
     "storybook": "start-storybook  -c .storybook-web -p 6006",
     "typecheck": "tsc --noEmit -p tsconfig.json",
     "test": "exit 0",
-    "web": "expo start --web"
+    "web": "expo start --web",
+    "unimported": "unimported"
   }
 }

package/lib/components/Layout/types.d.ts

@@ -1,30 +0,0 @@
-export type SpacingProps = {
-    margin?: string | number;
-    marginTop?: string | number;
-    marginRight?: string | number;
-    marginBottom?: string | number;
-    marginLeft?: string | number;
-    marginX?: string | number;
-    marginY?: string | number;
-    m?: string | number;
-    mt?: string | number;
-    mr?: string | number;
-    mb?: string | number;
-    ml?: string | number;
-    mx?: string | number;
-    my?: string | number;
-    padding?: string | number;
-    paddingTop?: string | number;
-    paddingRight?: string | number;
-    paddingBottom?: string | number;
-    paddingLeft?: string | number;
-    paddingX?: string | number;
-    paddingY?: string | number;
-    p?: string | number;
-    pt?: string | number;
-    pr?: string | number;
-    pb?: string | number;
-    pl?: string | number;
-    px?: string | number;
-    py?: string | number;
-};

package/lib/components/Layout/types.js

@@ -1,2 +0,0 @@
-// Nb Aligns with @styled-system/space
-export {};