@ledgerhq/lumen-ui-rnative 0.0.45 → 0.0.47

package/src/lib/Symbols/Icons/WalletInput.tsx

@@ -10,7 +10,7 @@ import createIcon from '../../Components/Icon/createIcon';
  *
  * @component
  * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
- * @param {string} [className] - Additional CSS classes to apply to the icon (via NativeWind).
+ * @param {string} [color] - The color of the icon.
  * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
  *
  * @example
@@ -20,8 +20,8 @@ import createIcon from '../../Components/Icon/createIcon';
  * <WalletInput />
  *
  * @example
- * // With custom size and className (NativeWind)
- * <WalletInput size={40} className="text-warning" />
+ * // With custom size and style
+ * <WalletInput size={40} color="warning" lx={{ marginTop: 's4' }} />
  *
  * @example
  * // Used within a Button component

package/src/lib/Symbols/Icons/WalletSearch.tsx

@@ -10,7 +10,7 @@ import createIcon from '../../Components/Icon/createIcon';
  *
  * @component
  * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
- * @param {string} [className] - Additional CSS classes to apply to the icon (via NativeWind).
+ * @param {string} [color] - The color of the icon.
  * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
  *
  * @example
@@ -20,8 +20,8 @@ import createIcon from '../../Components/Icon/createIcon';
  * <WalletSearch />
  *
  * @example
- * // With custom size and className (NativeWind)
- * <WalletSearch size={40} className="text-warning" />
+ * // With custom size and style
+ * <WalletSearch size={40} color="warning" lx={{ marginTop: 's4' }} />
  *
  * @example
  * // Used within a Button component

package/src/lib/Symbols/Icons/Warning.tsx

@@ -10,7 +10,7 @@ import createIcon from '../../Components/Icon/createIcon';
  *
  * @component
  * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
- * @param {string} [className] - Additional CSS classes to apply to the icon (via NativeWind).
+ * @param {string} [color] - The color of the icon.
  * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
  *
  * @example
@@ -20,8 +20,8 @@ import createIcon from '../../Components/Icon/createIcon';
  * <Warning />
  *
  * @example
- * // With custom size and className (NativeWind)
- * <Warning size={40} className="text-warning" />
+ * // With custom size and style
+ * <Warning size={40} color="warning" lx={{ marginTop: 's4' }} />
  *
  * @example
  * // Used within a Button component

package/src/lib/Symbols/Icons/WarningFill.tsx

@@ -10,7 +10,7 @@ import createIcon from '../../Components/Icon/createIcon';
  *
  * @component
  * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
- * @param {string} [className] - Additional CSS classes to apply to the icon (via NativeWind).
+ * @param {string} [color] - The color of the icon.
  * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
  *
  * @example
@@ -20,8 +20,8 @@ import createIcon from '../../Components/Icon/createIcon';
  * <WarningFill />
  *
  * @example
- * // With custom size and className (NativeWind)
- * <WarningFill size={40} className="text-warning" />
+ * // With custom size and style
+ * <WarningFill size={40} color="warning" lx={{ marginTop: 's4' }} />
  *
  * @example
  * // Used within a Button component

package/src/lib/Symbols/Icons/Whatsapp.tsx

@@ -10,7 +10,7 @@ import createIcon from '../../Components/Icon/createIcon';
  *
  * @component
  * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
- * @param {string} [className] - Additional CSS classes to apply to the icon (via NativeWind).
+ * @param {string} [color] - The color of the icon.
  * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
  *
  * @example
@@ -20,8 +20,8 @@ import createIcon from '../../Components/Icon/createIcon';
  * <Whatsapp />
  *
  * @example
- * // With custom size and className (NativeWind)
- * <Whatsapp size={40} className="text-warning" />
+ * // With custom size and style
+ * <Whatsapp size={40} color="warning" lx={{ marginTop: 's4' }} />
  *
  * @example
  * // Used within a Button component

package/src/lib/Symbols/Icons/Windows.tsx

@@ -10,7 +10,7 @@ import createIcon from '../../Components/Icon/createIcon';
  *
  * @component
  * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
- * @param {string} [className] - Additional CSS classes to apply to the icon (via NativeWind).
+ * @param {string} [color] - The color of the icon.
  * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
  *
  * @example
@@ -20,8 +20,8 @@ import createIcon from '../../Components/Icon/createIcon';
  * <Windows />
  *
  * @example
- * // With custom size and className (NativeWind)
- * <Windows size={40} className="text-warning" />
+ * // With custom size and style
+ * <Windows size={40} color="warning" lx={{ marginTop: 's4' }} />
  *
  * @example
  * // Used within a Button component

package/src/lib/Symbols/Icons/WirelessCharging.tsx

@@ -10,7 +10,7 @@ import createIcon from '../../Components/Icon/createIcon';
  *
  * @component
  * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
- * @param {string} [className] - Additional CSS classes to apply to the icon (via NativeWind).
+ * @param {string} [color] - The color of the icon.
  * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
  *
  * @example
@@ -20,8 +20,8 @@ import createIcon from '../../Components/Icon/createIcon';
  * <WirelessCharging />
  *
  * @example
- * // With custom size and className (NativeWind)
- * <WirelessCharging size={40} className="text-warning" />
+ * // With custom size and style
+ * <WirelessCharging size={40} color="warning" lx={{ marginTop: 's4' }} />
  *
  * @example
  * // Used within a Button component

package/src/lib/Symbols/Icons/Youtube.tsx

@@ -10,7 +10,7 @@ import createIcon from '../../Components/Icon/createIcon';
  *
  * @component
  * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
- * @param {string} [className] - Additional CSS classes to apply to the icon (via NativeWind).
+ * @param {string} [color] - The color of the icon.
  * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
  *
  * @example
@@ -20,8 +20,8 @@ import createIcon from '../../Components/Icon/createIcon';
  * <Youtube />
  *
  * @example
- * // With custom size and className (NativeWind)
- * <Youtube size={40} className="text-warning" />
+ * // With custom size and style
+ * <Youtube size={40} color="warning" lx={{ marginTop: 's4' }} />
  *
  * @example
  * // Used within a Button component

package/src/lib/utils/index.ts

@@ -1,8 +1,6 @@
-export * from './cn';
 export * from './constants';
 export * from './components';
 export * from './react';
-export * from './use-controllable-state';
-export * from './string-utils';
-export * from './use-event';
-export * from './start-transition';
+export * from './useControllableState';
+export * from './useEvent';
+export * from './startTransition';

package/src/lib/utils/react/index.ts

@@ -1 +1 @@
-export * from './extract-text-from-children';
+export * from './extractTextFromChildren';

package/src/lib/utils/startTransition/index.ts

@@ -0,0 +1 @@
+export * from './startTransition';

package/src/lib/utils/useControllableState/index.ts

@@ -0,0 +1 @@
+export * from './useControllableState';

package/src/lib/utils/{use-controllable-state/use-controllable-state.ts → useControllableState/useControllableState.ts}

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { startTransition } from '../start-transition';
-import { useEvent } from '../use-event';
+import { startTransition } from '../startTransition';
+import { useEvent } from '../useEvent';
 
 // can configure to allow most-recent-wins or prop-wins
 // defaults to prop-wins

package/src/lib/utils/useEvent/index.ts

@@ -0,0 +1,2 @@
+export * from './useEvent';
+export * from './useGet';

package/src/lib/utils/{use-event/use-event.ts → useEvent/useEvent.ts}

@@ -1,4 +1,4 @@
-import { useGet } from './use-get';
+import { useGet } from './useGet';
 
 type AnyFunction = (...args: any[]) => any;
 

package/src/styles/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useTheme } from './useTheme';
+export { useStyleSheet } from './useStyleSheet';

package/src/styles/{create/useCreate.test.tsx → hooks/useStyleSheet.test.tsx}

@@ -2,9 +2,9 @@ import { describe, expect, it } from '@jest/globals';
 import { fireEvent, render, userEvent } from '@testing-library/react-native';
 import React, { useState } from 'react';
 import { ColorSchemeName, Pressable, Text, View } from 'react-native';
-import { LumenStyleSheetProvider } from '../Provider/LumenStyleSheetProvider';
-import { useTheme } from '../Provider/useTheme';
-import { useCreate } from './useCreate';
+import { LumenStyleSheetProvider } from '../provider/LumenStyleSheetProvider';
+import { useStyleSheet } from './useStyleSheet';
+import { useTheme } from './useTheme';
 
 // Wrapper that allows testing uncontrolled theme switching
 const TestProviderWrapper = ({
@@ -94,20 +94,23 @@ const testThemes: any = {
   },
 };
 
-describe('useCreate', () => {
+describe('useStyleSheet', () => {
   describe('Static styles', () => {
     it('creates static styles with theme tokens', () => {
       const TestComponent = (): React.JSX.Element => {
-        const styles = useCreate((theme: any) => ({
-          container: {
-            backgroundColor: theme.colors.bg.base,
-            padding: theme.spacings.s8,
-          },
-          text: {
-            color: theme.colors.text.base,
-            fontSize: 16,
-          },
-        }));
+        const styles = useStyleSheet(
+          (theme: any) => ({
+            container: {
+              backgroundColor: theme.colors.bg.base,
+              padding: theme.spacings.s8,
+            },
+            text: {
+              color: theme.colors.text.base,
+              fontSize: 16,
+            },
+          }),
+          [],
+        );
 
         return (
           <View style={styles.container} testID='container'>
@@ -140,12 +143,15 @@ describe('useCreate', () => {
     it('updates styles when theme changes', async () => {
       const TestComponent = (): React.JSX.Element => {
         const { toggleColorScheme } = useTheme();
-        const styles = useCreate((theme: any) => ({
-          container: {
-            backgroundColor: theme.colors.bg.base,
-            borderColor: theme.colors.border.base,
-          },
-        }));
+        const styles = useStyleSheet(
+          (theme: any) => ({
+            container: {
+              backgroundColor: theme.colors.bg.base,
+              borderColor: theme.colors.border.base,
+            },
+          }),
+          [],
+        );
 
         return (
           <View testID='wrapper'>
@@ -188,14 +194,17 @@ describe('useCreate', () => {
 
     it('handles nested theme properties', () => {
       const TestComponent = (): React.JSX.Element => {
-        const styles = useCreate((theme: any) => ({
-          card: {
-            backgroundColor: theme.colors.bg.surface,
-            padding: theme.spacings.s24,
-            borderWidth: 1,
-            borderColor: theme.colors.border.accent,
-          },
-        }));
+        const styles = useStyleSheet(
+          (theme: any) => ({
+            card: {
+              backgroundColor: theme.colors.bg.surface,
+              padding: theme.spacings.s24,
+              borderWidth: 1,
+              borderColor: theme.colors.border.accent,
+            },
+          }),
+          [],
+        );
 
         return <View style={styles.card} testID='card' />;
       };
@@ -218,16 +227,19 @@ describe('useCreate', () => {
   describe('Dynamic functions', () => {
     it('creates dynamic styles with function parameters', () => {
       const TestComponent = (): React.JSX.Element => {
-        const styles = useCreate((theme: any) => ({
-          container: (width: number, highlighted: boolean) => ({
-            backgroundColor: highlighted
-              ? theme.colors.bg.accent
-              : theme.colors.bg.base,
-            width,
-            borderWidth: highlighted ? 2 : 1,
-            borderColor: theme.colors.border.accent,
+        const styles = useStyleSheet(
+          (theme: any) => ({
+            container: (width: number, highlighted: boolean) => ({
+              backgroundColor: highlighted
+                ? theme.colors.bg.accent
+                : theme.colors.bg.base,
+              width,
+              borderWidth: highlighted ? 2 : 1,
+              borderColor: theme.colors.border.accent,
+            }),
           }),
-        }));
+          [],
+        );
 
         return (
           <View testID='wrapper'>
@@ -261,14 +273,17 @@ describe('useCreate', () => {
     it('updates dynamic styles when theme changes', () => {
       const TestComponent = (): React.JSX.Element => {
         const { setColorScheme } = useTheme();
-        const styles = useCreate((theme: any) => ({
-          container: (isActive: boolean) => ({
-            backgroundColor: isActive
-              ? theme.colors.bg.accent
-              : theme.colors.bg.base,
-            borderColor: theme.colors.border.base,
+        const styles = useStyleSheet(
+          (theme: any) => ({
+            container: (isActive: boolean) => ({
+              backgroundColor: isActive
+                ? theme.colors.bg.accent
+                : theme.colors.bg.base,
+              borderColor: theme.colors.border.base,
+            }),
           }),
-        }));
+          [],
+        );
 
         return (
           <View testID='wrapper'>
@@ -313,15 +328,18 @@ describe('useCreate', () => {
 
     it('handles multiple parameters in dynamic functions', () => {
       const TestComponent = (): React.JSX.Element => {
-        const styles = useCreate((theme: any) => ({
-          box: (size: number, color: string, rounded: boolean) => ({
-            width: size,
-            height: size,
-            backgroundColor: color,
-            borderRadius: rounded ? size / 2 : 0,
-            padding: theme.spacings.s8,
+        const styles = useStyleSheet(
+          (theme: any) => ({
+            box: (size: number, color: string, rounded: boolean) => ({
+              width: size,
+              height: size,
+              backgroundColor: color,
+              borderRadius: rounded ? size / 2 : 0,
+              padding: theme.spacings.s8,
+            }),
           }),
-        }));
+          [],
+        );
 
         return (
           <View testID='wrapper'>
@@ -358,17 +376,20 @@ describe('useCreate', () => {
   describe('Mixed static and dynamic styles', () => {
     it('supports both static and dynamic styles in the same stylesheet', () => {
       const TestComponent = (): React.JSX.Element => {
-        const styles = useCreate((theme: any) => ({
-          staticContainer: {
-            backgroundColor: theme.colors.bg.base,
-            padding: theme.spacings.s16,
-          },
-          dynamicText: (size: number, bold: boolean) => ({
-            color: theme.colors.text.base,
-            fontSize: size,
-            fontWeight: bold ? '700' : '400',
+        const styles = useStyleSheet(
+          (theme: any) => ({
+            staticContainer: {
+              backgroundColor: theme.colors.bg.base,
+              padding: theme.spacings.s16,
+            },
+            dynamicText: (size: number, bold: boolean) => ({
+              color: theme.colors.text.base,
+              fontSize: size,
+              fontWeight: bold ? '700' : '400',
+            }),
           }),
-        }));
+          [],
+        );
 
         return (
           <View style={styles.staticContainer} testID='container'>
@@ -413,14 +434,14 @@ describe('useCreate', () => {
 
       const TestComponent = (): React.JSX.Element => {
         const { setColorScheme, colorScheme } = useTheme();
-        const styles = useCreate((theme: any) => {
+        const styles = useStyleSheet((theme: any) => {
           styleCreationCount++;
           return {
             container: {
               backgroundColor: theme.colors.bg.base,
             },
           };
-        });
+        }, []);
 
         return (
           <View testID='wrapper'>

package/src/styles/hooks/useStyleSheet.ts

@@ -0,0 +1,25 @@
+import { DependencyList, useMemo, useRef } from 'react';
+import type {
+  LumenStyleSheet,
+  LumenStyleSheetExtended,
+  LumenStyleSheetTheme,
+} from '../types';
+import { useTheme } from './useTheme';
+
+export const useStyleSheet = <S extends LumenStyleSheet>(
+  styleCreator: LumenStyleSheetExtended<S>,
+  deps: DependencyList,
+): S => {
+  const { theme } = useTheme();
+  const styleCreatorRef = useRef(styleCreator);
+  styleCreatorRef.current = styleCreator;
+
+  return useMemo(() => {
+    const isFunction = typeof styleCreatorRef.current === 'function';
+    const styles = isFunction
+      ? (styleCreatorRef.current as (theme: LumenStyleSheetTheme) => S)(theme)
+      : styleCreatorRef.current;
+
+    return styles as S;
+  }, [theme, ...deps]);
+};

package/src/styles/{Provider → hooks}/useTheme.ts

@@ -1,7 +1,7 @@
 import {
   useLumenStyleSheetContext,
   type LumenStyleSheetContextValue,
-} from './LumenStyleSheetProvider';
+} from '../provider/LumenStyleSheetProvider';
 
 export const useTheme = (): LumenStyleSheetContextValue => {
   const context = useLumenStyleSheetContext({

package/src/styles/index.ts

@@ -1,5 +1,4 @@
-export { LumenStyleSheetProvider } from './Provider/LumenStyleSheetProvider';
-export { LumenStyleSheet } from './LumenStyleSheet';
+export { LumenStyleSheetProvider } from './provider/LumenStyleSheetProvider';
+export { useTheme, useStyleSheet } from './hooks';
 export * from './types';
-export * from './factories';
-export * from './utils';
+export * from './lx';

package/src/styles/{factories → lx}/areLxPropsEqual.ts

@@ -1,7 +1,7 @@
 import {
-  LumenViewStyleLX,
-  LumenTextStyleLX,
-  LumenPressableStyleLX,
+  StyledPressableProps,
+  StyledTextProps,
+  StyledViewProps,
 } from '../types';
 
 type UnknownRecord = Record<string, unknown>;
@@ -16,8 +16,8 @@ const shallowEqual = (a: UnknownRecord, b: UnknownRecord): boolean => {
 };
 
 export const areLxPropsEqual = (
-  prevProps: LumenViewStyleLX | LumenTextStyleLX | LumenPressableStyleLX,
-  nextProps: LumenViewStyleLX | LumenTextStyleLX | LumenPressableStyleLX,
+  prevProps: StyledViewProps | StyledTextProps | StyledPressableProps,
+  nextProps: StyledViewProps | StyledTextProps | StyledPressableProps,
 ): boolean => {
   const { lx: prevLx = {}, ...prevRest } = prevProps;
   const { lx: nextLx = {}, ...nextRest } = nextProps;

package/src/styles/{factories → lx}/createStyledPressable.test.tsx

@@ -7,7 +7,7 @@ import {
   PressableStateCallbackType,
   View,
 } from 'react-native';
-import { LumenStyleSheetProvider } from '../Provider/LumenStyleSheetProvider';
+import { LumenStyleSheetProvider } from '../provider/LumenStyleSheetProvider';
 import { createStyledPressable } from './createStyledPressable';
 
 const testThemes: any = {

package/src/styles/{factories → lx}/createStyledPressable.tsx

@@ -1,29 +1,18 @@
-import React, { forwardRef, memo } from 'react';
+import { ElementRef, forwardRef, memo } from 'react';
 import { StyleSheet } from 'react-native';
 import type {
   Pressable,
-  PressableProps,
   PressableStateCallbackType,
   ViewStyle,
 } from 'react-native';
-import { useTheme } from '../Provider/useTheme';
-import { resolveViewStyle } from '../resolveStyle/resolveStyle';
-import { LumenPressableStyleLX } from '../types';
+import { StyledPressableProps, PressableStyleItem } from '../types';
 import { areLxPropsEqual } from './areLxPropsEqual';
-
-type PressableRef = React.ElementRef<typeof Pressable>;
-type StyleFn = (state: PressableStateCallbackType) => ViewStyle;
-type StyleItem = ViewStyle | StyleFn | StyleItem[] | null | undefined;
-
-export type StyledPressableProps = LumenPressableStyleLX &
-  Omit<PressableProps, 'style'> & {
-    style?: StyleItem;
-  };
+import { useResolveViewStyle } from './resolveStyle';
 
 /**
  * Check if any style item (including nested arrays) is a function
  */
-const hasStyleFunction = (style: StyleItem): boolean => {
+const hasStyleFunction = (style: PressableStyleItem): boolean => {
   if (Array.isArray(style)) {
     return style.some((s) => hasStyleFunction(s));
   }
@@ -34,7 +23,7 @@ const hasStyleFunction = (style: StyleItem): boolean => {
  * Resolve all style functions in a style tree
  */
 const resolveStyleFunctions = (
-  style: StyleItem,
+  style: PressableStyleItem,
   state: PressableStateCallbackType,
 ): ViewStyle | (ViewStyle | null | undefined)[] | null | undefined => {
   if (Array.isArray(style)) {
@@ -62,22 +51,21 @@ const resolveStyleFunctions = (
  */
 export const createStyledPressable = (Component: typeof Pressable) => {
   const StyledComponent = memo(
-    forwardRef<PressableRef, StyledPressableProps>(
+    forwardRef<ElementRef<typeof Pressable>, StyledPressableProps>(
       ({ lx = {}, style, ...props }, ref) => {
-        const { theme } = useTheme();
-        const resolvedLxStyle = resolveViewStyle(theme, lx);
+        const resolvedStyle = useResolveViewStyle(lx);
 
         if (!hasStyleFunction(style)) {
           const finalStyle = StyleSheet.flatten([
-            resolvedLxStyle,
             style as ViewStyle,
+            resolvedStyle,
           ]);
           return <Component ref={ref} {...props} style={finalStyle} />;
         }
 
         const mergedStyle = (state: PressableStateCallbackType): ViewStyle => {
-          const resolvedStyle = resolveStyleFunctions(style, state);
-          return StyleSheet.flatten([resolvedLxStyle, resolvedStyle]);
+          const resolvedBareStyle = resolveStyleFunctions(style, state);
+          return StyleSheet.flatten([resolvedBareStyle, resolvedStyle]);
         };
 
         return <Component ref={ref} {...props} style={mergedStyle} />;

package/src/styles/{factories → lx}/createStyledText.test.tsx

@@ -2,7 +2,7 @@ import { describe, expect, it, jest } from '@jest/globals';
 import { render, screen } from '@testing-library/react-native';
 import React, { createRef } from 'react';
 import { Text, TextProps } from 'react-native';
-import { LumenStyleSheetProvider } from '../Provider/LumenStyleSheetProvider';
+import { LumenStyleSheetProvider } from '../provider/LumenStyleSheetProvider';
 import { createStyledText } from './createStyledText';
 
 const testThemes: any = {

package/src/styles/{factories → lx}/createStyledText.tsx

@@ -1,19 +1,10 @@
-import React, { forwardRef, memo } from 'react';
+import { ElementRef, forwardRef, memo } from 'react';
 import { StyleSheet } from 'react-native';
-import type { Text, TextProps, TextStyle } from 'react-native';
-import { useTheme } from '../Provider/useTheme';
-import { resolveTextStyle } from '../resolveStyle/resolveStyle';
-import type { LumenStyleSheetTheme, LumenTextStyleLX } from '../types';
+import type { Text, TextStyle } from 'react-native';
+import { useTheme } from '../hooks/useTheme';
+import { StyledTextProps } from '../types';
 import { areLxPropsEqual } from './areLxPropsEqual';
-
-type TextRef = React.ElementRef<typeof Text>;
-export type StyledTextProps = LumenTextStyleLX &
-  TextProps & {
-    /**
-     * Typography preset
-     */
-    typography?: keyof LumenStyleSheetTheme['typographies'];
-  };
+import { useResolveTextStyle } from './resolveStyle';
 
 /**
  * Factory function to create a styled Text component.
@@ -25,18 +16,16 @@ export type StyledTextProps = LumenTextStyleLX &
  */
 export const createStyledText = (Component: typeof Text) => {
   const StyledComponent = memo(
-    forwardRef<TextRef, StyledTextProps>(
+    forwardRef<ElementRef<typeof Text>, StyledTextProps>(
       ({ typography = 'body3', lx = {}, style, ...props }, ref) => {
         const { theme } = useTheme();
-        const resolvedStyle = resolveTextStyle(theme, lx);
-        const resolvedTypographyStyles = theme.typographies[
-          typography
-        ] as TextStyle;
+        const resolvedStyle = useResolveTextStyle(lx);
+        const typographyStyle = theme.typographies[typography] as TextStyle;
 
         const finalStyle = StyleSheet.flatten([
-          resolvedStyle,
-          resolvedTypographyStyles,
+          typographyStyle,
           style,
+          resolvedStyle,
         ]);
 
         return <Component ref={ref} {...props} style={finalStyle} />;