@ledgerhq/lumen-ui-rnative 0.0.43 → 0.0.45

package/.storybook/Decorator.tsx

@@ -3,12 +3,52 @@ import {
   ledgerLiveThemes,
   websitesThemes,
 } from '@ledgerhq/lumen-design-core';
+import {
+  DocsContainer,
+  DocsContainerProps,
+} from '@storybook/addon-docs/blocks';
 import type { Decorator } from '@storybook/react-native-web-vite';
+import { FC, PropsWithChildren, ReactNode } from 'react';
 
 import { ColorSchemeName } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { ThemeProvider } from '../src/lib/Components';
 
+type BrandThemes = typeof ledgerLiveThemes;
+
+const mappingThemes: Record<string, BrandThemes> = {
+  'ledger-live': ledgerLiveThemes,
+  enterprise: enterpriseThemes as unknown as BrandThemes,
+  websites: websitesThemes as unknown as BrandThemes,
+};
+
+const getThemeFromGlobals = (
+  mode?: ColorSchemeName | string,
+  brand?: string,
+): { mode: ColorSchemeName; theme: BrandThemes } => ({
+  mode: (mode as ColorSchemeName) ?? 'light',
+  theme: mappingThemes[brand ?? 'ledger-live'] ?? mappingThemes['ledger-live'],
+});
+
+type StorybookProvidersProps = PropsWithChildren<{
+  mode: ColorSchemeName;
+  theme: BrandThemes;
+}>;
+
+const StorybookProviders: FC<StorybookProvidersProps> = ({
+  mode,
+  theme,
+  children,
+}) => (
+  <ThemeProvider colorScheme={mode} themes={theme}>
+    <GestureHandlerRootView
+      style={{ flex: 1, width: '100%', alignItems: 'flex-start' }}
+    >
+      {children}
+    </GestureHandlerRootView>
+  </ThemeProvider>
+);
+
 const createThemeDecorator = (
   globalName: string,
   themeClasses: string[],
@@ -38,21 +78,46 @@ export const withModeDecorator = createThemeDecorator('mode', [
   'dark',
 ]);
 
-const mappingThemes = {
-  'ledger-live': ledgerLiveThemes,
-  enterprise: enterpriseThemes,
-  websites: websitesThemes,
-} as any;
-
 export const withProvidersDecorator: Decorator = (Story, context) => {
-  const mode = context.globals.mode as ColorSchemeName;
-  const currentTheme = mappingThemes[context.globals.brand];
+  const { mode, theme } = getThemeFromGlobals(
+    context.globals.mode,
+    context.globals.brand,
+  );
+
+  return (
+    <StorybookProviders mode={mode} theme={theme}>
+      <Story />
+    </StorybookProviders>
+  );
+};
+
+type DocsContainerContext = {
+  store: {
+    globals: {
+      globals: {
+        mode?: ColorSchemeName;
+        brand?: string;
+      };
+    };
+  };
+};
+
+export const withProvidersDocsContainer = ({
+  children,
+  context,
+  ...rest
+}: PropsWithChildren<DocsContainerProps>): ReactNode => {
+  const docsContext = context as unknown as DocsContainerContext;
+  const { mode, theme } = getThemeFromGlobals(
+    docsContext.store?.globals?.globals?.mode,
+    docsContext.store?.globals?.globals?.brand,
+  );
 
   return (
-    <ThemeProvider colorScheme={mode} themes={currentTheme}>
-      <GestureHandlerRootView style={{ flex: 1, width: '100%' }}>
-        <Story />
-      </GestureHandlerRootView>
-    </ThemeProvider>
+    <DocsContainer context={context} {...rest}>
+      <StorybookProviders mode={mode} theme={theme}>
+        {children}
+      </StorybookProviders>
+    </DocsContainer>
   );
 };

package/.storybook/docs/getting-started/ThemeProvider.mdx

@@ -47,7 +47,7 @@ If not provided, the theme will follow the device settings.
 
 ## Changing Theme Mode
 
-If the ThemeProvider is uncontrolled, you can use the `LumenStyleSheet.useTheme` hook to control theme mode at runtime:
+If the ThemeProvider is uncontrolled, you can use the [`LumenStyleSheet.useTheme`](/?path=/docs/style-system-usetheme--docs) hook to control theme mode at runtime:
 
 ```tsx
 import { LumenStyleSheet } from '@ledgerhq/lumen-ui-rnative/styles';

package/.storybook/docs/style-system/lx.mdx

@@ -0,0 +1,144 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Style System/lx" />
+
+# lx Property
+
+The `lx` prop is a type-safe styling API that provides autocomplete for design tokens directly on components.
+
+## Overview
+
+Instead of writing raw style values, `lx` constrains you to design system tokens, ensuring consistency across your app.
+
+The `lx` prop is available on utility components that already integrate it:
+- [**Box**](/?path=/docs/utility-box--docs) - Layout container (wraps `View`)
+- [**Text**](/?path=/docs/utility-text--docs) - Typography (wraps `Text`)
+- [**Pressable**](/?path=/docs/utility-pressable--docs) - Interactive container (wraps `Pressable`)
+
+```tsx
+import { Box, Text } from '@ledgerhq/lumen-ui-rnative';
+
+<Box lx={{ padding: 's16', backgroundColor: 'accent', borderRadius: 'md' }}>
+  <Text typography='body1' lx={{ color: 'onAccent' }}>Hello</Text>
+</Box>
+```
+
+---
+
+## View Style Tokens
+
+These tokens are available on `Box` and `Pressable` (and the `lx` prop of `Text` for layout).
+
+### Spacing
+
+Used for `padding`, `margin`, `gap`, and positioning (`top`, `left`, etc.):
+
+```tsx
+<Box lx={{ 
+  padding: 's16',
+  marginTop: 's8',
+  gap: 's12',
+  paddingHorizontal: 's24',
+}} />
+```
+
+### Sizes
+
+Used for `width`, `height`, `minWidth`, `maxWidth`, `minHeight`, `maxHeight`:
+
+```tsx
+<Box lx={{ width: 's48', height: 's48', maxWidth: 's320' }} />
+```
+
+### Background Colors
+
+```tsx
+<Box lx={{ backgroundColor: 'accent' }} />
+<Box lx={{ backgroundColor: 'surface' }} />
+<Box lx={{ backgroundColor: 'muted' }} />
+```
+
+### Border
+
+```tsx
+<Box lx={{ 
+  borderRadius: 'md',
+  borderWidth: 's1',
+  borderColor: 'base',
+}} />
+```
+
+### Flex Layout
+
+Standard React Native flex properties are passed through:
+
+```tsx
+<Box lx={{
+  flex: 1,
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+}} />
+```
+
+---
+
+## Text Style Tokens
+
+These tokens are **only available on the `Text` component**, in addition to view tokens.
+
+### Text Color
+
+```tsx
+<Text lx={{ color: 'base' }} />
+<Text lx={{ color: 'muted' }} />
+<Text lx={{ color: 'interactive' }} />
+<Text lx={{ color: 'onAccent' }} />
+```
+
+### Typography
+
+Preset font size, weight, line height, and letter spacing:
+
+```tsx
+<Text typography='heading1' />
+<Text typography='body1' />
+<Text typography='body2SemiBold' />
+```
+
+### Text Decoration
+
+```tsx
+<Text lx={{ textDecorationLine: 'underline' }} />
+<Text lx={{ textAlign: 'center' }} />
+<Text lx={{ textTransform: 'uppercase' }} />
+```
+
+---
+
+## Escape Hatch
+
+For values not covered by tokens, use the `style` prop:
+
+```tsx
+<Box 
+  lx={{ padding: 's16', borderRadius: 'md' }}
+  style={{ width: 127, shadowOpacity: 0.1 }}
+/>
+```
+
+## Pressable and Pressed State
+
+For `Pressable`, the `lx` prop only accepts static objects. Use the `style` prop for pressed-state styling:
+
+```tsx
+<Pressable
+  lx={{ padding: 's16', backgroundColor: 'accent' }}
+  style={({ pressed }) => ({ opacity: pressed ? 0.8 : 1 })}
+>
+  <Text>Press me</Text>
+</Pressable>
+```
+
+See [Pressable documentation](/?path=/docs/utility-pressable--docs) for more details.
+

package/.storybook/docs/style-system/useCreate.mdx

@@ -0,0 +1,95 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Style System/useCreate" />
+
+# useCreate
+
+`LumenStyleSheet.useCreate` is a hook for creating memoized, theme-aware stylesheets in React Native.
+
+## Basic Usage
+
+```tsx
+import { LumenStyleSheet } from '@ledgerhq/lumen-ui-rnative/styles';
+import { View, Text } from 'react-native';
+
+const MyComponent = () => {
+  const styles = LumenStyleSheet.useCreate((theme) => ({
+    container: {
+      backgroundColor: theme.colors.bg.base,
+      padding: theme.spacings.s16,
+      borderRadius: theme.borderRadius.md,
+    },
+    text: {
+      ...theme.typographies.body1,
+      color: theme.colors.text.base,
+    },
+  }));
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>Hello World</Text>
+    </View>
+  );
+};
+```
+
+## Memoization
+
+Styles are memoized based on the dependency array (second argument). Re-renders only create new styles when dependencies change:
+
+```tsx
+const styles = LumenStyleSheet.useCreate(
+  (theme) => ({
+    container: {
+      backgroundColor: isActive ? theme.colors.bg.accent : theme.colors.bg.base,
+      padding: theme.spacings.s16,
+    },
+  }),
+  [isActive] // Only recreate when isActive changes
+);
+```
+
+## Pressed State Pattern
+
+For Pressable components, pass `pressed` state to `useCreate`:
+
+```tsx
+import { LumenStyleSheet } from '@ledgerhq/lumen-ui-rnative/styles';
+import { Pressable } from '@ledgerhq/lumen-ui-rnative';
+
+const InteractiveCard = () => {
+  return (
+    <Pressable lx={{ borderRadius: 'md' }}>
+      {({ pressed }) => <CardContent pressed={pressed} />}
+    </Pressable>
+  );
+};
+
+const CardContent = ({ pressed }: { pressed: boolean }) => {
+  const styles = LumenStyleSheet.useCreate(
+    (theme) => ({
+      container: {
+        backgroundColor: pressed 
+          ? theme.colors.bg.accentPressed 
+          : theme.colors.bg.accent,
+        padding: theme.spacings.s16,
+      },
+    }),
+    [pressed]
+  );
+
+  return <View style={styles.container}>...</View>;
+};
+```
+
+## When to Use
+
+Use `useCreate` when you need:
+
+- Complex conditional styling based on props/state
+- Access to raw theme values for calculations
+- Building custom components with multiple style objects
+- Performance-critical components with memoized styles
+
+For simpler cases, prefer the [lx prop](/?path=/docs/style-system-lx--docs) directly on components.
+

package/.storybook/docs/style-system/useTheme.mdx

@@ -0,0 +1,52 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Style System/useTheme" />
+
+# useTheme
+
+The `useTheme` hook provides access to the current theme and color scheme controls.
+
+## Basic Usage
+
+```tsx
+import { LumenStyleSheet } from '@ledgerhq/lumen-ui-rnative/styles';
+
+const MyComponent = () => {
+  const { theme, colorScheme } = LumenStyleSheet.useTheme();
+
+  return (
+    <View style={{ backgroundColor: theme.colors.bg.base }}>
+      <Text style={{ color: theme.colors.text.base }}>
+        Current mode: {colorScheme}
+      </Text>
+    </View>
+  );
+};
+```
+
+## Theme Toggle Example
+
+```tsx
+import { LumenStyleSheet } from '@ledgerhq/lumen-ui-rnative/styles';
+
+const ThemeToggle = () => {
+  const { colorScheme, toggleColorScheme } = LumenStyleSheet.useTheme();
+
+  return (
+    <Button onPress={toggleColorScheme}>
+      Current: {colorScheme}
+    </Button>
+  );
+};
+```
+
+## When to Use
+
+Use `useTheme` when you need to:
+
+- Access raw theme values for calculations
+- Control the color scheme programmatically
+- Access tokens not available through `lx`
+
+For most styling needs, prefer [useCreate](/?path=/docs/style-system-usecreate--docs) or the [lx prop](/?path=/docs/style-system-lx--docs).
+

package/.storybook/preview-head.html

@@ -1,6 +1,6 @@
 <style>
   body {
-    background-color: #f2f2f2;
+    background-color: #ffffff;
   }
 
   .dark body {
@@ -8,7 +8,7 @@
   }
 
   .sbdocs-preview {
-    background-color: #f2f2f2;
+    background-color: #ffffff;
   }
 
   .dark .sbdocs-preview {

package/.storybook/{preview.ts → preview.tsx}

@@ -4,6 +4,7 @@ import {
   withBrandDecorator,
   withModeDecorator,
   withProvidersDecorator,
+  withProvidersDocsContainer,
 } from './Decorator';
 import './font.css';
 
@@ -50,13 +51,14 @@ const preview: Preview = {
         order: [
           'Getting Started',
           ['Introduction', 'Quick Start'],
+          'Style System',
+          ['lx', 'useCreate', 'useTheme'],
           'Tailwind',
           ['Introduction', 'Setup guide', 'Configuration'],
           'Foundations',
           ['Docs', 'Colors', 'Border', 'Spacing', 'Size', 'Height', 'Width'],
           'Symbols',
           'Action',
-          ['CardButton', 'InteractiveIcon', 'Link', 'Input', 'Search'],
           'Communication',
           'Containment',
           'Selection',
@@ -65,6 +67,9 @@ const preview: Preview = {
       },
     },
     tags: ['autodocs'],
+    docs: {
+      container: withProvidersDocsContainer,
+    },
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.0.42",
+  "version": "0.0.44",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",
@@ -25,8 +25,7 @@
       "import": "./src/lib/Symbols/index.ts",
       "default": "./src/lib/Symbols/index.ts"
     },
-    "./styles": "./src/styles/index.ts",
-    "./ToRemove": "./src/lib/Components/_ToRemove/ToRemove.tsx"
+    "./styles": "./src/styles/index.ts"
   },
   "dependencies": {
     "@ledgerhq/lumen-utils-shared": "0.0.11",

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

@@ -11,7 +11,7 @@ export const AddressInput = React.forwardRef(({ prefix = 'To:', suffix, onQrCode
         // TODO: use theme object here
         style: { fontSize: 16, fontWeight: '500' }, children: prefix }));
     const actualSuffix = suffix ||
-        (onQrCodeClick && (_jsx(InteractiveIcon, { iconType: 'filled', onPress: onQrCodeClick, accessibilityLabel: t('components.addressInput.qrCodeAriaLabel'), children: _jsx(QrCode, { size: 20 }) })));
+        (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, 
         // TODO: use theme object here
         style: { fontSize: 16, fontWeight: '500' }, ...props }));

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

@@ -3,5 +3,11 @@ import { AddressInput } from './AddressInput';
 declare const meta: Meta<typeof AddressInput>;
 export default meta;
 type Story = StoryObj<typeof AddressInput>;
-export declare const WebPreviewWarning: Story;
+export declare const Base: Story;
+export declare const WithContent: Story;
+export declare const WithCustomPrefix: Story;
+export declare const WithoutQrCode: Story;
+export declare const WithError: Story;
+export declare const DisabledAddressInput: Story;
+export declare const WithHiddenClearButton: Story;
 //# sourceMappingURL=AddressInput.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AddressInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AddressInput/AddressInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAYnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAE3C,eAAO,MAAM,iBAAiB,EAAE,KAgB/B,CAAC"}
+{"version":3,"file":"AddressInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AddressInput/AddressInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,YAAY,EAA0B,MAAM,gBAAgB,CAAC;AAEtE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAkCnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAqB3C,eAAO,MAAM,IAAI,EAAE,KAQlB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KASzB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAC;AAmBF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KASlC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KASnC,CAAC"}

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Banner } from '../Banner';
+import { useState } from 'react';
+import { View } from 'react-native';
 import { AddressInput } from './AddressInput';
 const meta = {
     component: AddressInput,
@@ -13,15 +14,103 @@ const meta = {
             },
         },
     },
+    argTypes: {
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text when input is empty',
+        },
+        prefix: {
+            control: 'text',
+            description: 'Custom prefix text (default: "To:")',
+        },
+        errorMessage: {
+            control: 'text',
+            description: 'Error message to display below input',
+        },
+        editable: {
+            control: 'boolean',
+            description: 'Whether the input is editable',
+        },
+        hideClearButton: {
+            control: 'boolean',
+            description: 'Hide the clear button',
+        },
+    },
 };
 export default meta;
-export const WebPreviewWarning = {
-    render: () => (_jsx(Banner, { appearance: 'warning', title: 'Unsupported previews on web', description: 'For this component, previewing stories is currently only supported on mobile. Reanimated causes compatibility issues with the web preview, so for now, please test on-device. We plan to add screenshots or embed Expo Snack in the future.' })),
-    parameters: {
-        docs: {
-            description: {
-                story: '⚠️ This component requires testing on a physical device or emulator due to Reanimated compatibility issues with web previews.',
-            },
-        },
+const AddressInputStory = (args) => {
+    const [address, setAddress] = useState(args.value?.toString() ?? '');
+    return (_jsx(View, { className: 'flex min-h-400 items-center justify-center p-24', children: _jsx(View, { className: 'w-full max-w-320', children: _jsx(AddressInput, { ...args, value: address, onChangeText: setAddress, onQrCodeClick: args.onQrCodeClick ?? (() => alert('QR code scanner opened')) }) }) }));
+};
+export const Base = {
+    render: (args) => _jsx(AddressInputStory, { ...args }),
+    args: {
+        placeholder: 'Enter address or ENS',
+        prefix: 'To:',
+        editable: true,
+        hideClearButton: false,
+    },
+};
+export const WithContent = {
+    render: (args) => _jsx(AddressInputStory, { ...args }),
+    args: {
+        placeholder: 'Enter address or ENS',
+        value: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb27',
+        prefix: 'To:',
+        editable: true,
+        hideClearButton: false,
+    },
+};
+export const WithCustomPrefix = {
+    render: (args) => _jsx(AddressInputStory, { ...args }),
+    args: {
+        placeholder: 'Enter sender address',
+        prefix: 'From:',
+        editable: true,
+        hideClearButton: false,
+    },
+};
+const AddressInputWithoutQrStory = (args) => {
+    const [address, setAddress] = useState(args.value?.toString() ?? '');
+    return (_jsx(View, { className: 'flex min-h-400 items-center justify-center p-24', children: _jsx(View, { className: 'w-full max-w-320', children: _jsx(AddressInput, { ...args, value: address, onChangeText: setAddress, onQrCodeClick: undefined }) }) }));
+};
+export const WithoutQrCode = {
+    render: (args) => _jsx(AddressInputWithoutQrStory, { ...args }),
+    args: {
+        placeholder: 'Enter address or ENS',
+        prefix: 'To:',
+        editable: true,
+        hideClearButton: false,
+    },
+};
+export const WithError = {
+    render: (args) => _jsx(AddressInputStory, { ...args }),
+    args: {
+        placeholder: 'Enter address or ENS',
+        value: 'invalid-address',
+        errorMessage: 'Invalid address format',
+        prefix: 'To:',
+        editable: true,
+        hideClearButton: false,
+    },
+};
+export const DisabledAddressInput = {
+    render: (args) => _jsx(AddressInputStory, { ...args }),
+    args: {
+        placeholder: 'Enter address or ENS',
+        value: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb27',
+        prefix: 'To:',
+        editable: false,
+        hideClearButton: false,
+    },
+};
+export const WithHiddenClearButton = {
+    render: (args) => _jsx(AddressInputStory, { ...args }),
+    args: {
+        placeholder: 'Enter address or ENS',
+        value: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb27',
+        prefix: 'To:',
+        editable: true,
+        hideClearButton: true,
     },
 };

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":"AACA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,EAAa,SAAS,EAAQ,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAU/E,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,cAAc,EACd,OAAO,GAAG,cAAc,CACzB,GAAG;IACF;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;OAGG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAOF;;;;GAIG;AACH,eAAO,MAAM,WAAW;IA5DtB;;;OAGG;WACI,MAAM,GAAG,MAAM;IACtB;;;OAGG;kBACW,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;IACpC;;OAEG;mBACY,MAAM;IACrB;;;OAGG;uBACgB,MAAM,GAAG,OAAO;IACnC;;;OAGG;uBACgB,MAAM;IACzB;;;OAGG;uBACgB,MAAM;IACzB;;;OAGG;oBACa,OAAO;IACvB;;OAEG;gBACS,MAAM;IAClB;;;OAGG;yBACkB,OAAO;IAC5B;;;OAGG;gBACS,OAAO;mCAuLpB,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,EAAa,SAAS,EAAQ,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAU/E,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,cAAc,EACd,OAAO,GAAG,cAAc,CACzB,GAAG;IACF;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;OAGG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAOF;;;;GAIG;AACH,eAAO,MAAM,WAAW;IA5DtB;;;OAGG;WACI,MAAM,GAAG,MAAM;IACtB;;;OAGG;kBACW,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;IACpC;;OAEG;mBACY,MAAM;IACrB;;;OAGG;uBACgB,MAAM,GAAG,OAAO;IACnC;;;OAGG;uBACgB,MAAM;IACzB;;;OAGG;uBACgB,MAAM;IACzB;;;OAGG;oBACa,OAAO;IACvB;;OAEG;gBACS,MAAM;IAClB;;;OAGG;yBACkB,OAAO;IAC5B;;;OAGG;gBACS,OAAO;mCAgMpB,CAAC"}

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

@@ -22,15 +22,15 @@ export const AmountInput = React.forwardRef(({ className, currencyText, currency
         transform: [{ translateX: translateX.value }],
         fontSize: animatedFontSize.value,
         letterSpacing: 0,
-    }));
+    }), [translateX, animatedFontSize]);
     const animatedCurrencyStyle = useAnimatedStyle(() => ({
         fontSize: animatedFontSize.value,
         letterSpacing: 0,
-    }));
+    }), [animatedFontSize]);
     const animatedCaretStyle = useAnimatedStyle(() => ({
         opacity: caretOpacity.value,
         height: animatedFontSize.value,
-    }));
+    }), [caretOpacity, animatedFontSize]);
     useEffect(() => {
         const newSize = getFontSize(inputValue);
         translateX.value = withSequence(withTiming(4, { duration: 0 }), withTiming(0, {

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

@@ -3,5 +3,14 @@ import { AmountInput } from './AmountInput';
 declare const meta: Meta<typeof AmountInput>;
 export default meta;
 type Story = StoryObj<typeof AmountInput>;
-export declare const WebPreviewWarning: Story;
+export declare const Base: Story;
+export declare const WithValue: Story;
+export declare const CurrencyPositionLeft: Story;
+export declare const CurrencyPositionRight: Story;
+export declare const IntegerOnly: Story;
+export declare const WithThousandsSeparator: Story;
+export declare const WithoutThousandsSeparator: Story;
+export declare const ErrorState: Story;
+export declare const DisabledAmountInput: Story;
+export declare const CustomLengthLimits: Story;
 //# sourceMappingURL=AmountInput.stories.d.ts.map