@ledgerhq/lumen-ui-rnative 0.0.59 → 0.0.60

package/.storybook/Decorator.tsx

@@ -8,7 +8,7 @@ import {
   DocsContainerProps,
 } from '@storybook/addon-docs/blocks';
 import type { Decorator } from '@storybook/react-native-web-vite';
-import { PropsWithChildren, ReactNode } from 'react';
+import { FC, PropsWithChildren, ReactNode } from 'react';
 
 import { ColorSchemeName } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
@@ -35,11 +35,11 @@ type StorybookProvidersProps = PropsWithChildren<{
   theme: BrandThemes;
 }>;
 
-const StorybookProviders = ({
+const StorybookProviders: FC<StorybookProvidersProps> = ({
   mode,
   theme,
   children,
-}: StorybookProvidersProps) => (
+}) => (
   <ThemeProvider colorScheme={mode} themes={theme}>
     <GestureHandlerRootView
       style={{ flex: 1, width: '100%', alignItems: 'flex-start' }}

package/.storybook/components/CustomTabs.tsx

@@ -11,7 +11,7 @@ type CustomTabsProps = {
   children: React.ReactNode;
 };
 
-export const CustomTabs = ({ children }: CustomTabsProps) => {
+export const CustomTabs: React.FC<CustomTabsProps> = ({ children }) => {
   const [active, setActive] = React.useState<number>(0);
 
   // Extract Tab components from children
@@ -80,6 +80,6 @@ export const CustomTabs = ({ children }: CustomTabsProps) => {
   );
 };
 
-export const Tab = ({ children }: TabProps) => {
+export const Tab: React.FC<TabProps> = ({ children }) => {
   return <Box>{children}</Box>;
 };

package/.storybook/components/DoVsDont/DoBlock.tsx

@@ -1,16 +1,17 @@
-import { PropsWithChildren } from 'react';
+import React from 'react';
 import { Box, Text } from '../../../src/lib/Components/Utility';
 
 type DoBlockItemProps = {
   title?: string;
   description?: string;
-} & PropsWithChildren;
+  children: React.ReactNode;
+};
 
-export const DoBlockItem = ({
+export const DoBlockItem: React.FC<DoBlockItemProps> = ({
   title,
   description,
   children,
-}: DoBlockItemProps) => {
+}) => {
   return (
     <Box lx={{ gap: 's12' }} {...{ 'data-type': 'do-item' }}>
       {/* Header */}

package/.storybook/components/DoVsDont/DoVsDontRow.tsx

@@ -1,9 +1,11 @@
-import { PropsWithChildren } from 'react';
+import React from 'react';
 import { Box } from '../../../src/lib/Components/Utility';
 
-type DoVsDontRowProps = PropsWithChildren & {};
+type DoVsDontRowProps = {
+  children: React.ReactNode;
+};
 
-export const DoVsDontRow = ({ children }: DoVsDontRowProps) => {
+export const DoVsDontRow: React.FC<DoVsDontRowProps> = ({ children }) => {
   return (
     <Box lx={{ gap: 's16' }}>
       <Box lx={{ flexDirection: 'row', gap: 's16', flexWrap: 'wrap' }}>

package/.storybook/components/DoVsDont/DontBlock.tsx

@@ -1,16 +1,17 @@
-import { PropsWithChildren } from 'react';
+import React from 'react';
 import { Box, Text } from '../../../src/lib/Components/Utility';
 
 type DontBlockItemProps = {
   title?: string;
   description?: string;
-} & PropsWithChildren;
+  children: React.ReactNode;
+};
 
-export const DontBlockItem = ({
+export const DontBlockItem: React.FC<DontBlockItemProps> = ({
   title,
   description,
   children,
-}: DontBlockItemProps) => {
+}) => {
   return (
     <Box lx={{ gap: 's12' }} {...{ 'data-type': 'dont-item' }}>
       {/* Header */}

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.0.58",
+  "version": "0.0.59",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",
@@ -27,19 +27,15 @@
     "./styles": "./src/styles/index.ts"
   },
   "dependencies": {
-    "@ledgerhq/lumen-utils-shared": "0.0.17-0",
+    "@ledgerhq/lumen-utils-shared": "0.0.16",
     "i18next": "^23.7.0",
     "react-i18next": "^14.0.0"
   },
-  "devDependencies": {
-    "@types/react": "^19.0.0"
-  },
   "peerDependencies": {
-    "@types/react": "^19.0.0",
     "@gorhom/bottom-sheet": "^5.0.0",
-    "@ledgerhq/lumen-design-core": "0.0.44-0",
-    "react": "19.0.0",
-    "react-native": "~0.79.7",
+    "@ledgerhq/lumen-design-core": "0.0.44",
+    "react": "~18.3.1",
+    "react-native": "~0.77.3",
     "react-native-reanimated": "^3.0.0",
     "react-native-safe-area-context": "^4.0.0 || ^5.0.0",
     "react-native-svg": "^15.0.0"

package/dist/src/i18n/I18nProvider.d.ts

@@ -1,8 +1,8 @@
-import { PropsWithChildren } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { type SupportedLocale } from './languages';
 type I18nProviderProps = PropsWithChildren & {
     locale?: SupportedLocale;
 };
-export declare const I18nProvider: ({ locale, children, }: I18nProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const I18nProvider: FC<I18nProviderProps>;
 export {};
 //# sourceMappingURL=I18nProvider.d.ts.map

package/dist/src/i18n/I18nProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"I18nProvider.d.ts","sourceRoot":"","sources":["../../../src/i18n/I18nProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAa,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,aAAa,CAAC;AAErE,KAAK,iBAAiB,GAAG,iBAAiB,GAAG;IAC3C,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,YAAY,0BAGtB,iBAAiB,4CAMnB,CAAC"}
+{"version":3,"file":"I18nProvider.d.ts","sourceRoot":"","sources":["../../../src/i18n/I18nProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,iBAAiB,EAAa,MAAM,OAAO,CAAC;AAGzD,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,aAAa,CAAC;AAErE,KAAK,iBAAiB,GAAG,iBAAiB,GAAG;IAC3C,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAS9C,CAAC"}

package/dist/src/i18n/i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../src/i18n/i18n.ts"],"names":[],"mappings":"AAAA,OAAgB,EAAE,KAAK,IAAI,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAE7D,OAAO,EAGL,eAAe,EAChB,MAAM,aAAa,CAAC;AAsDrB,eAAO,MAAM,IAAI,cAAmB,CAAC;AAErC;;;GAGG;AACH,eAAO,MAAM,UAAU,WAAkB,eAAe,KAAG,OAAO,CAAC,IAAI,CAoBtE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,WACjB,eAAe,KACtB,OAAO,CAAC,IAAI,CAGd,CAAC"}
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../src/i18n/i18n.ts"],"names":[],"mappings":"AAAA,OAAgB,EAAE,KAAK,IAAI,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAE7D,OAAO,EAGL,eAAe,EAChB,MAAM,aAAa,CAAC;AAsDrB,eAAO,MAAM,IAAI,cAAmB,CAAC;AAErC;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAU,QAAQ,eAAe,KAAG,OAAO,CAAC,IAAI,CAoBtE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GACzB,QAAQ,eAAe,KACtB,OAAO,CAAC,IAAI,CAGd,CAAC"}

package/dist/src/lib/Components/AddressInput/AddressInput.d.ts

@@ -1,6 +1,10 @@
-import { type AddressInputProps } from './types';
-export declare const AddressInput: {
-    ({ prefix, suffix, onQrCodeClick, ref, ...props }: AddressInputProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+import React from 'react';
+import { TextInput } from 'react-native';
+export declare const AddressInput: React.ForwardRefExoticComponent<Omit<import("../BaseInput").BaseInputProps, "label" | "prefix"> & {
+    suffix?: React.ReactNode;
+    prefix?: string;
+    onQrCodeClick?: () => void;
+} & {
+    lx?: import("../../../styles").LumenViewStyle;
+} & import("react-native").ViewProps & React.RefAttributes<TextInput>>;
 //# sourceMappingURL=AddressInput.d.ts.map

package/dist/src/lib/Components/AddressInput/AddressInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddressInput.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AddressInput/AddressInput.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD,eAAO,MAAM,YAAY;uDAMtB,iBAAiB;;CA8BnB,CAAC"}
+{"version":3,"file":"AddressInput.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AddressInput/AddressInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAC;AAQ/C,eAAO,MAAM,YAAY;;;;;;sEAiCvB,CAAC"}

package/dist/src/lib/Components/AddressInput/AddressInput.js

@@ -1,18 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { Text } from 'react-native';
 import { useCommonTranslation } from '../../../i18n';
 import { useStyleSheet } from '../../../styles';
 import { QrCode } from '../../Symbols';
 import { BaseInput } from '../BaseInput';
 import { InteractiveIcon } from '../InteractiveIcon';
-export const AddressInput = ({ prefix = 'To:', suffix, onQrCodeClick, ref, ...props }) => {
+export const AddressInput = React.forwardRef(({ prefix = 'To:', suffix, onQrCodeClick, ...props }, ref) => {
     const { t } = useCommonTranslation();
     const styles = useStyles();
     const actualPrefix = (_jsx(Text, { accessible: false, style: styles.prefix, children: prefix }));
     const actualSuffix = suffix ||
         (onQrCodeClick && (_jsx(InteractiveIcon, { iconType: 'stroked', onPress: onQrCodeClick, accessibilityLabel: t('components.addressInput.qrCodeAriaLabel'), children: _jsx(QrCode, { size: 20 }) })));
     return (_jsx(BaseInput, { ref: ref, prefix: actualPrefix, suffix: actualSuffix, ...props }));
-};
+});
 const useStyles = () => {
     return useStyleSheet((t) => {
         return {

package/dist/src/lib/Components/AmountInput/AmountInput.d.ts

@@ -1,11 +1,22 @@
-import { type AmountInputProps } from './types';
+import React from 'react';
+import { TextInput } from 'react-native';
 /**
  * AmountInput component for handling numeric input with currency display.
  * This is a controlled component - both `value` and `onChange` props are required.
  * The currency text can be positioned either on the left or right side of the input.
  */
-export declare const AmountInput: {
-    ({ lx, style, currencyText, currencyPosition, editable, maxIntegerLength, maxDecimalLength, allowDecimals, thousandsSeparator, value, onChangeText, isInvalid, ref, ...props }: AmountInputProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const AmountInput: React.ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "value" | "onChangeText"> & {
+    value: string | number;
+    onChangeText: (text: string) => void;
+    currencyText?: string;
+    currencyPosition?: "left" | "right";
+    maxIntegerLength?: number;
+    maxDecimalLength?: number;
+    allowDecimals?: boolean;
+    style?: import("react-native").ViewStyle;
+    thousandsSeparator?: boolean;
+    isInvalid?: boolean;
+} & {
+    lx?: import("../../../styles").LumenViewStyle;
+} & import("react-native").ViewProps & React.RefAttributes<TextInput>>;
 //# sourceMappingURL=AmountInput.d.ts.map

package/dist/src/lib/Components/AmountInput/AmountInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AmountInput.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AmountInput/AmountInput.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;;;GAIG;AACH,eAAO,MAAM,WAAW;oLAerB,gBAAgB;;CA0IlB,CAAC"}
+{"version":3,"file":"AmountInput.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AmountInput/AmountInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,EAAyB,SAAS,EAAE,MAAM,cAAc,CAAC;AAahE;;;;GAIG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;sEA+JvB,CAAC"}

package/dist/src/lib/Components/AmountInput/AmountInput.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getFontSize, textFormatter } from '@ledgerhq/lumen-utils-shared';
-import { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { Pressable, StyleSheet, TextInput } from 'react-native';
 import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withSequence, withTiming, } from 'react-native-reanimated';
 import { useStyleSheet } from '../../../styles';
@@ -10,7 +10,7 @@ import { Box } from '../Utility';
  * This is a controlled component - both `value` and `onChange` props are required.
  * The currency text can be positioned either on the left or right side of the input.
  */
-export const AmountInput = ({ lx = {}, style, currencyText, currencyPosition = 'left', editable = true, maxIntegerLength = 9, maxDecimalLength = 9, allowDecimals = true, thousandsSeparator = true, value, onChangeText, isInvalid = false, ref, ...props }) => {
+export const AmountInput = React.forwardRef(({ lx = {}, style, currencyText, currencyPosition = 'left', editable = true, maxIntegerLength = 9, maxDecimalLength = 9, allowDecimals = true, thousandsSeparator = true, value, onChangeText, isInvalid = false, ...props }, ref) => {
     const inputRef = useRef(null);
     const inputValue = String(value);
     const [isFocused, setIsFocused] = useState(false);
@@ -77,7 +77,7 @@ export const AmountInput = ({ lx = {}, style, currencyText, currencyPosition = '
                     setIsFocused(false);
                     props.onBlur?.(e);
                 }, style: styles.hiddenInput, ...props }), _jsxs(Pressable, { onPress: handlePress, style: styles.pressable, accessibilityLabel: props.accessibilityLabel || 'Amount input', children: [currencyPosition === 'left' && CurrencyText, _jsx(Animated.Text, { style: [styles.displayText, animatedInputStyle, style], children: inputValue || '0' }), _jsx(Animated.View, { style: [styles.caret, animatedCaretStyle] }), currencyPosition === 'right' && CurrencyText] })] }));
-};
+});
 const useStyles = ({ hasValue, isEditable, isInvalid, }) => {
     return useStyleSheet((t) => ({
         container: {

package/dist/src/lib/Components/Banner/Banner.d.ts

@@ -1,4 +1,5 @@
-import { BannerProps } from './types';
+import React from 'react';
+import { View } from 'react-native';
 /**
  * A banner component for displaying informational, success, warning, or error messages with optional description, action buttons, and close button.
  *
@@ -33,8 +34,15 @@ import { BannerProps } from './types';
  *   closeAriaLabel="Close banner"
  * />
  */
-export declare const Banner: {
-    ({ appearance, title, description, primaryAction, secondaryAction, lx, style, onClose, closeAriaLabel, ref, ...props }: BannerProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const Banner: React.ForwardRefExoticComponent<{
+    appearance?: "info" | "success" | "warning" | "error";
+    title?: string;
+    description?: React.ReactNode;
+    primaryAction?: React.ReactNode;
+    secondaryAction?: React.ReactNode;
+    onClose?: () => void;
+    closeAriaLabel?: string;
+} & {
+    lx?: import("../../../styles").LumenViewStyle;
+} & import("react-native").ViewProps & React.RefAttributes<View>>;
 //# sourceMappingURL=Banner.d.ts.map

package/dist/src/lib/Components/Banner/Banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Banner/Banner.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAgFtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,MAAM;4HAYhB,WAAW;;CAyDb,CAAC"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Banner/Banner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAoB,IAAI,EAAE,MAAM,cAAc,CAAC;AA+FtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;iEAyElB,CAAC"}

package/dist/src/lib/Components/Banner/Banner.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isTextChildren } from '@ledgerhq/lumen-utils-shared';
+import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { useCommonTranslation } from '../../../i18n';
 import { useStyleSheet } from '../../../styles';
@@ -107,11 +108,11 @@ const iconsMap = {
  *   closeAriaLabel="Close banner"
  * />
  */
-export const Banner = ({ appearance = 'info', title, description, primaryAction, secondaryAction, lx = {}, style, onClose, closeAriaLabel, ref, ...props }) => {
+export const Banner = React.forwardRef(({ appearance = 'info', title, description, primaryAction, secondaryAction, lx = {}, style, onClose, closeAriaLabel, ...props }, ref) => {
     const { t } = useCommonTranslation();
     const styles = useStyles({ appearance });
     const IconComponent = iconsMap[appearance];
     const iconColor = iconColorMap[appearance];
-    return (_jsxs(Box, { ref: ref, lx: lx, style: StyleSheet.flatten([styles.root, style]), ...props, children: [_jsx(View, { style: styles.iconWrapper, children: _jsx(IconComponent, { lx: { color: iconColor } }) }), _jsxs(View, { style: styles.contentWrapper, children: [_jsxs(View, { style: styles.textWrapper, children: [title && (_jsx(Text, { style: styles.title, numberOfLines: 2, children: title })), description && (_jsx(View, { children: _jsx(Wrap, { if: isTextChildren(description), with: (children) => (_jsx(Text, { style: styles.description, children: children })), children: description }) }))] }), (primaryAction || secondaryAction) && (_jsxs(View, { style: styles.actionsWrapper, children: [primaryAction, secondaryAction] }))] }), onClose && (_jsx(IconButton, { testID: 'banner-close-button', appearance: 'transparent', size: 'xs', icon: Close, onPress: () => onClose(), accessibilityLabel: closeAriaLabel || t('components.banner.closeAriaLabel') }))] }));
-};
+    return (_jsxs(Box, { ref: ref, lx: lx, style: StyleSheet.flatten([styles.root, style]), ...props, children: [_jsx(View, { style: styles.iconWrapper, children: _jsx(IconComponent, { color: iconColor }) }), _jsxs(View, { style: styles.contentWrapper, children: [_jsxs(View, { style: styles.textWrapper, children: [title && (_jsx(Text, { style: styles.title, numberOfLines: 2, children: title })), description && (_jsx(View, { children: _jsx(Wrap, { if: isTextChildren(description), with: (children) => (_jsx(Text, { style: styles.description, children: children })), children: description }) }))] }), (primaryAction || secondaryAction) && (_jsxs(View, { style: styles.actionsWrapper, children: [primaryAction, secondaryAction] }))] }), onClose && (_jsx(IconButton, { testID: 'banner-close-button', appearance: 'transparent', size: 'xs', icon: Close, onPress: () => onClose(), accessibilityLabel: closeAriaLabel || t('components.banner.closeAriaLabel') }))] }));
+});
 Banner.displayName = 'Banner';

package/dist/src/lib/Components/BaseInput/BaseInput.d.ts

@@ -1,6 +1,17 @@
-import { type BaseInputProps } from './types';
-export declare const BaseInput: {
-    ({ lx, style, containerStyle, inputStyle, labelStyle, label, errorMessage, hideClearButton, onChangeText: onChangeTextProp, editable, prefix, suffix, ref, ...props }: BaseInputProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+import React from 'react';
+import { TextInput } from 'react-native';
+export declare const BaseInput: React.ForwardRefExoticComponent<{
+    label?: string;
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    containerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    inputStyle?: import("react-native").StyleProp<import("react-native").TextStyle>;
+    labelStyle?: import("react-native").StyleProp<import("react-native").TextStyle>;
+    errorMessage?: string;
+    suffix?: React.ReactNode;
+    prefix?: React.ReactNode;
+    onClear?: () => void;
+    hideClearButton?: boolean;
+} & Omit<import("react-native").TextInputProps, "style"> & {
+    lx?: import("../../../styles").LumenViewStyle;
+} & import("react-native").ViewProps & React.RefAttributes<TextInput>>;
 //# sourceMappingURL=BaseInput.d.ts.map

package/dist/src/lib/Components/BaseInput/BaseInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInput.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BaseInput/BaseInput.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,eAAO,MAAM,SAAS;2KAenB,cAAc;;CAuIhB,CAAC"}
+{"version":3,"file":"BaseInput.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BaseInput/BaseInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,EAA8B,SAAS,EAAQ,MAAM,cAAc,CAAC;AAQ3E,eAAO,MAAM,SAAS;;;;;;;;;;;;;sEA0JrB,CAAC"}

package/dist/src/lib/Components/BaseInput/BaseInput.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useImperativeHandle, useRef, useState, } from 'react';
+import React, { useCallback, useEffect, useImperativeHandle, useRef, useState, } from 'react';
 import { Animated, StyleSheet, Text, TextInput, View } from 'react-native';
 import { useCommonTranslation } from '../../../i18n';
 import { useStyleSheet, useTheme } from '../../../styles';
 import { DeleteCircleFill } from '../../Symbols/Icons/DeleteCircleFill';
 import { InteractiveIcon } from '../InteractiveIcon';
 import { Box, Pressable } from '../Utility';
-export const BaseInput = ({ lx, style, containerStyle, inputStyle, labelStyle, label, errorMessage, hideClearButton, onChangeText: onChangeTextProp, editable = true, prefix, suffix, ref, ...props }) => {
+export const BaseInput = React.forwardRef(({ lx, style, containerStyle, inputStyle, labelStyle, label, errorMessage, hideClearButton, onChangeText: onChangeTextProp, editable = true, prefix, suffix, ...props }, ref) => {
     const { t } = useCommonTranslation();
     const { theme } = useTheme();
     const inputRef = useRef(null);
@@ -65,7 +65,7 @@ export const BaseInput = ({ lx, style, containerStyle, inputStyle, labelStyle, l
                             floatingLabelStyles.animatedLabel,
                             labelStyle,
                         ], numberOfLines: 1, children: label })), (suffix || (!hideClearButton && editable)) && (_jsx(View, { style: styles.suffixContainer, children: showClearButton ? (_jsx(InteractiveIcon, { iconType: 'stroked', onPress: handleClear, accessibilityLabel: t('components.baseInput.clearInputAriaLabel'), children: _jsx(DeleteCircleFill, { size: 20 }) })) : (suffix) }))] }), errorMessage && (_jsxs(View, { style: styles.errorContainer, children: [_jsx(DeleteCircleFill, { size: 16, color: 'error' }), _jsx(Text, { style: styles.errorText, children: errorMessage })] }))] }));
-};
+});
 const useStyles = ({ hasError, isFocused, isEditable, hasLabel, }) => {
     return useStyleSheet((t) => {
         return {

package/dist/src/lib/Components/BottomSheet/BottomSheet.d.ts

@@ -3,9 +3,26 @@ declare const useBottomSheetContext: <ContextRequired extends boolean = boolean>
     consumerName: string;
     contextRequired: ContextRequired;
 }) => ContextRequired extends true ? Pick<BottomSheetProps, "onBack" | "hideCloseButton"> : Partial<Pick<BottomSheetProps, "onBack" | "hideCloseButton">>;
-declare const BottomSheet: {
-    ({ onOpen, onClose, onBack, onAnimate, children, hideCloseButton, enablePanDownToClose, enableDynamicSizing, enableBlurKeyboardOnGesture, enableHandlePanningGesture, maxDynamicContentSize, detached, hideBackdrop, backdropPressBehavior, onBackdropPress, onChange, snapPoints, ref, ...props }: BottomSheetProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const BottomSheet: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode | undefined;
+} & {
+    testID?: string;
+    snapPoints?: "full" | "fullWithOffset" | "medium" | "small" | string[] | number[] | null;
+    enableDynamicSizing?: boolean;
+    maxDynamicContentSize?: "full" | "fullWithOffset" | number;
+    onChange?: (index: number, position: number, type: 0 | 1) => void;
+    onAnimate?: (fromIndex: number, toIndex: number, fromPosition: number, toPosition: number) => void;
+    onBack?: () => void;
+    hideCloseButton?: boolean;
+    onClose?: () => void;
+    onOpen?: () => void;
+    hideBackdrop?: boolean;
+    backdropPressBehavior?: "none" | "close" | number;
+    onBackdropPress?: () => void;
+    enableHandlePanningGesture?: boolean;
+    enablePanDownToClose?: boolean;
+    detached?: boolean;
+    enableBlurKeyboardOnGesture?: boolean;
+} & import("react").RefAttributes<import("@gorhom/bottom-sheet/lib/typescript/types").BottomSheetMethods>>;
 export { BottomSheet, useBottomSheetContext };
 //# sourceMappingURL=BottomSheet.d.ts.map

package/dist/src/lib/Components/BottomSheet/BottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AA2C3C,QAAA,MAA4B,qBAAqB;;;yJAG9C,CAAC;AAEJ,QAAA,MAAM,WAAW;wSAoBd,gBAAgB;;CAqHlB,CAAC;AAGF,OAAO,EAAE,WAAW,EAAE,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AA2C3C,QAAA,MAA4B,qBAAqB;;;yJAG9C,CAAC;AAEJ,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;0GAgJhB,CAAC;AAGF,OAAO,EAAE,WAAW,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/src/lib/Components/BottomSheet/BottomSheet.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import GorghomBottomSheet from '@gorhom/bottom-sheet';
 import { createSafeContext, useMergedRef } from '@ledgerhq/lumen-utils-shared';
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
 import { StyleSheet } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import { RuntimeConstants } from '../../utils';
@@ -42,7 +42,7 @@ const useStyles = ({ shadow }) => {
     }), [shadow]);
 };
 const [BottomSheetProvider, useBottomSheetContext] = createSafeContext('BottomSheet');
-const BottomSheet = ({ onOpen, onClose, onBack, onAnimate, children, hideCloseButton = false, enablePanDownToClose = true, enableDynamicSizing = false, enableBlurKeyboardOnGesture = true, enableHandlePanningGesture = true, maxDynamicContentSize = undefined, detached = false, hideBackdrop = false, backdropPressBehavior = 'close', onBackdropPress, onChange, snapPoints = 'fullWithOffset', ref, ...props }) => {
+const BottomSheet = forwardRef(({ onOpen, onClose, onBack, onAnimate, children, hideCloseButton = false, enablePanDownToClose = true, enableDynamicSizing = false, enableBlurKeyboardOnGesture = true, enableHandlePanningGesture = true, maxDynamicContentSize = undefined, detached = false, hideBackdrop = false, backdropPressBehavior = 'close', onBackdropPress, onChange, snapPoints = 'fullWithOffset', ...props }, ref) => {
     // ref
     const innerRef = useRef(null);
     const mergedRefs = useMergedRef(ref, innerRef);
@@ -104,6 +104,6 @@ const BottomSheet = ({ onOpen, onClose, onBack, onAnimate, children, hideCloseBu
              * Components
              */
             handleComponent: CustomHandle, backdropComponent: hideBackdrop ? undefined : renderBackdrop, index: -1, children: children }) }));
-};
+});
 BottomSheet.displayName = 'BottomSheet';
 export { BottomSheet, useBottomSheetContext };

package/dist/src/lib/Components/BottomSheet/BottomSheet.stories.d.ts

@@ -1,15 +1,29 @@
 import type { StoryObj } from '@storybook/react-vite';
 import { BottomSheet } from './BottomSheet';
 declare const meta: {
-    component: {
-        ({ onOpen, onClose, onBack, onAnimate, children, hideCloseButton, enablePanDownToClose, enableDynamicSizing, enableBlurKeyboardOnGesture, enableHandlePanningGesture, maxDynamicContentSize, detached, hideBackdrop, backdropPressBehavior, onBackdropPress, onChange, snapPoints, ref, ...props }: import("./types").BottomSheetProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
+    component: import("react").ForwardRefExoticComponent<{
+        children?: import("react").ReactNode | undefined;
+    } & {
+        testID?: string;
+        snapPoints?: "full" | "fullWithOffset" | "medium" | "small" | string[] | number[] | null;
+        enableDynamicSizing?: boolean;
+        maxDynamicContentSize?: "full" | "fullWithOffset" | number;
+        onChange?: (index: number, position: number, type: 0 | 1) => void;
+        onAnimate?: (fromIndex: number, toIndex: number, fromPosition: number, toPosition: number) => void;
+        onBack?: () => void;
+        hideCloseButton?: boolean;
+        onClose?: () => void;
+        onOpen?: () => void;
+        hideBackdrop?: boolean;
+        backdropPressBehavior?: "none" | "close" | number;
+        onBackdropPress?: () => void;
+        enableHandlePanningGesture?: boolean;
+        enablePanDownToClose?: boolean;
+        detached?: boolean;
+        enableBlurKeyboardOnGesture?: boolean;
+    } & import("react").RefAttributes<import("@gorhom/bottom-sheet/lib/typescript/types").BottomSheetMethods>>;
     subcomponents: {
-        BottomSheetHeader: {
-            ({ lx, style, title, description, appearance, spacing, ...props }: import("./types").BottomSheetHeaderProps): import("react/jsx-runtime").JSX.Element | null;
-            displayName: string;
-        };
+        BottomSheetHeader: import("react").FC<import("./types").BottomSheetHeaderProps>;
     };
     title: string;
     parameters: {

package/dist/src/lib/Components/BottomSheet/BottomSheet.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/BottomSheet.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAU5C,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgE0B,CAAC;AAErC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,IAAI,EAAE,KAmDlB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAiD3B,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,KAwC5C,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KA2CzC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA4C1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA2CxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAoEzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAkF7B,CAAC"}
+{"version":3,"file":"BottomSheet.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/BottomSheet.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAU5C,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgE0B,CAAC;AAErC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,IAAI,EAAE,KAmDlB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAiD3B,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,KAwC5C,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KA2CzC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA4C1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA2CxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAoEzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAkF7B,CAAC"}

package/dist/src/lib/Components/BottomSheet/BottomSheetHeader.d.ts

@@ -1,6 +1,4 @@
+import { FC } from 'react';
 import { BottomSheetHeaderProps } from './types';
-export declare const BottomSheetHeader: {
-    ({ lx, style, title, description, appearance, spacing, ...props }: BottomSheetHeaderProps): import("react/jsx-runtime").JSX.Element | null;
-    displayName: string;
-};
+export declare const BottomSheetHeader: FC<BottomSheetHeaderProps>;
 //# sourceMappingURL=BottomSheetHeader.d.ts.map

package/dist/src/lib/Components/BottomSheet/BottomSheetHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetHeader.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/BottomSheetHeader.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AA+EjD,eAAO,MAAM,iBAAiB;uEAQ3B,sBAAsB;;CAkExB,CAAC"}
+{"version":3,"file":"BottomSheetHeader.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/BottomSheetHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAe,MAAM,OAAO,CAAC;AAQxC,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AA+EjD,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA0ExD,CAAC"}

package/dist/src/lib/Components/BottomSheet/CustomHandle.d.ts

@@ -1,10 +1,4 @@
 import { BottomSheetVariables } from '@gorhom/bottom-sheet/lib/typescript/types';
-import React, { Ref } from 'react';
 import { View } from 'react-native';
-export declare const CustomHandle: {
-    ({ ref, ...props }: BottomSheetVariables & {
-        ref?: Ref<React.ElementRef<typeof View>>;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const CustomHandle: import("react").ForwardRefExoticComponent<BottomSheetVariables & import("react").RefAttributes<View>>;
 //# sourceMappingURL=CustomHandle.d.ts.map

package/dist/src/lib/Components/BottomSheet/CustomHandle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomHandle.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/CustomHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,KAAK,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAyBpC,eAAO,MAAM,YAAY;wBAGtB,oBAAoB,GAAG;QAAE,GAAG,CAAC,EAAE,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC,CAAA;KAAE;;CAQrE,CAAC"}
+{"version":3,"file":"CustomHandle.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/CustomHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AAEjF,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAyBpC,eAAO,MAAM,YAAY,uGAWvB,CAAC"}

package/dist/src/lib/Components/BottomSheet/CustomHandle.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 const useStyles = () => {
@@ -19,8 +20,8 @@ const useStyles = () => {
         },
     }), []);
 };
-export const CustomHandle = ({ ref, ...props }) => {
+export const CustomHandle = forwardRef((props, ref) => {
     const styles = useStyles();
     return (_jsx(View, { ...props, ref: ref, style: styles.container, children: _jsx(View, { style: styles.handle }) }));
-};
+});
 CustomHandle.displayName = 'CustomHandle';

package/dist/src/lib/Components/BottomSheet/Scrollables.d.ts

@@ -1,22 +1,8 @@
-import { BottomSheetViewProps, BottomSheetFlatListProps, BottomSheetSectionListProps, BottomSheetScrollViewProps, BottomSheetVirtualizedListProps } from './types';
-export declare const BottomSheetView: {
-    ({ children, style, ...props }: BottomSheetViewProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export declare const BottomSheetFlatList: {
-    ({ children, style, ref, ...props }: BottomSheetFlatListProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export declare const BottomSheetSectionList: {
-    ({ children, style, ref, ...props }: BottomSheetSectionListProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export declare const BottomSheetScrollView: {
-    ({ children, style, ref, ...props }: BottomSheetScrollViewProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export declare const BottomSheetVirtualizedList: {
-    ({ children, style, ref, ...props }: BottomSheetVirtualizedListProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+import { FC } from 'react';
+import { BottomSheetViewProps } from './types';
+export declare const BottomSheetView: FC<BottomSheetViewProps>;
+export declare const BottomSheetFlatList: import("react").ForwardRefExoticComponent<Omit<import("@gorhom/bottom-sheet/lib/typescript/components/bottomSheetScrollable/types").BottomSheetFlatListProps<unknown>, "ref"> & import("react").RefAttributes<import("@gorhom/bottom-sheet").BottomSheetFlatListMethods>>;
+export declare const BottomSheetSectionList: import("react").ForwardRefExoticComponent<Omit<import("@gorhom/bottom-sheet/lib/typescript/components/bottomSheetScrollable/types").BottomSheetSectionListProps<unknown, unknown>, "ref"> & import("react").RefAttributes<import("@gorhom/bottom-sheet").BottomSheetSectionListMethods>>;
+export declare const BottomSheetScrollView: import("react").ForwardRefExoticComponent<Omit<import("@gorhom/bottom-sheet/lib/typescript/components/bottomSheetScrollable/types").BottomSheetScrollViewProps, "ref"> & import("react").RefAttributes<import("@gorhom/bottom-sheet").BottomSheetScrollViewMethods>>;
+export declare const BottomSheetVirtualizedList: import("react").ForwardRefExoticComponent<Omit<import("@gorhom/bottom-sheet/lib/typescript/components/bottomSheetScrollable/types").BottomSheetVirtualizedListProps<unknown>, "ref"> & import("react").RefAttributes<import("@gorhom/bottom-sheet").BottomSheetVirtualizedListMethods>>;
 //# sourceMappingURL=Scrollables.d.ts.map

package/dist/src/lib/Components/BottomSheet/Scrollables.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Scrollables.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/Scrollables.tsx"],"names":[],"mappings":"AASA,OAAO,EACL,oBAAoB,EACpB,wBAAwB,EACxB,2BAA2B,EAC3B,0BAA0B,EAC1B,+BAA+B,EAChC,MAAM,SAAS,CAAC;AAejB,eAAO,MAAM,eAAe;oCAIzB,oBAAoB;;CAWtB,CAAC;AAGF,eAAO,MAAM,mBAAmB;yCAK7B,wBAAwB;;CAY1B,CAAC;AAGF,eAAO,MAAM,sBAAsB;yCAKhC,2BAA2B;;CAY7B,CAAC;AAGF,eAAO,MAAM,qBAAqB;yCAK/B,0BAA0B;;CAY5B,CAAC;AAGF,eAAO,MAAM,0BAA0B;yCAKpC,+BAA+B;;CAYjC,CAAC"}
+{"version":3,"file":"Scrollables.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/Scrollables.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;AAGvC,OAAO,EACL,oBAAoB,EAKrB,MAAM,SAAS,CAAC;AAejB,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAepD,CAAC;AAGF,eAAO,MAAM,mBAAmB,2QAe9B,CAAC;AAGH,eAAO,MAAM,sBAAsB,0RAejC,CAAC;AAGH,eAAO,MAAM,qBAAqB,sQAehC,CAAC;AAGH,eAAO,MAAM,0BAA0B,yRAerC,CAAC"}