@ledgerhq/native-ui 0.22.0 → 0.22.1-nightly.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/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/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/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",
+  "version": "0.22.1-nightly.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -46,8 +46,8 @@
     "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.5.2-nightly.0",
+    "@ledgerhq/icons-ui": "^0.6.2-nightly.0",
     "@ledgerhq/ui-shared": "^0.2.1"
   },
   "peerDependencies": {
@@ -100,7 +100,7 @@
     "@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": "^18.2.21",
     "@types/react-native": "0.71.5",
     "@types/styled-components": "^5.1.3",
     "@types/styled-components-react-native": "^5.1.3",
@@ -133,8 +133,8 @@
     "metro-transform-worker": "^0.76.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",