@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.46

package/src/lib/Symbols/Icons/UserAdd.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';
  * <UserAdd />
  *
  * @example
- * // With custom size and className (NativeWind)
- * <UserAdd size={40} className="text-warning" />
+ * // With custom size and style
+ * <UserAdd size={40} color="warning" lx={{ marginTop: 's4' }} />
  *
  * @example
  * // Used within a Button component

package/src/lib/Symbols/Icons/UserArrowRight.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';
  * <UserArrowRight />
  *
  * @example
- * // With custom size and className (NativeWind)
- * <UserArrowRight size={40} className="text-warning" />
+ * // With custom size and style
+ * <UserArrowRight size={40} color="warning" lx={{ marginTop: 's4' }} />
  *
  * @example
  * // Used within a Button component

package/src/lib/Symbols/Icons/UserCheck.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';
  * <UserCheck />
  *
  * @example
- * // With custom size and className (NativeWind)
- * <UserCheck size={40} className="text-warning" />
+ * // With custom size and style
+ * <UserCheck size={40} color="warning" lx={{ marginTop: 's4' }} />
  *
  * @example
  * // Used within a Button component

package/src/lib/Symbols/Icons/UserCircle.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';
  * <UserCircle />
  *
  * @example
- * // With custom size and className (NativeWind)
- * <UserCircle size={40} className="text-warning" />
+ * // With custom size and style
+ * <UserCircle size={40} color="warning" lx={{ marginTop: 's4' }} />
  *
  * @example
  * // Used within a Button component

package/src/lib/Symbols/Icons/UserDelete.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';
  * <UserDelete />
  *
  * @example
- * // With custom size and className (NativeWind)
- * <UserDelete size={40} className="text-warning" />
+ * // With custom size and style
+ * <UserDelete size={40} color="warning" lx={{ marginTop: 's4' }} />
  *
  * @example
  * // Used within a Button component

package/src/lib/Symbols/Icons/UserLock.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';
  * <UserLock />
  *
  * @example
- * // With custom size and className (NativeWind)
- * <UserLock size={40} className="text-warning" />
+ * // With custom size and style
+ * <UserLock size={40} color="warning" lx={{ marginTop: 's4' }} />
  *
  * @example
  * // Used within a Button component

package/src/lib/Symbols/Icons/UserShield.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';
  * <UserShield />
  *
  * @example
- * // With custom size and className (NativeWind)
- * <UserShield size={40} className="text-warning" />
+ * // With custom size and style
+ * <UserShield size={40} color="warning" lx={{ marginTop: 's4' }} />
  *
  * @example
  * // Used within a Button component

package/src/lib/Symbols/Icons/Wallet.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';
  * <Wallet />
  *
  * @example
- * // With custom size and className (NativeWind)
- * <Wallet size={40} className="text-warning" />
+ * // With custom size and style
+ * <Wallet size={40} color="warning" lx={{ marginTop: 's4' }} />
  *
  * @example
  * // Used within a Button component

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/components/InjectStylesIntoChildren.tsx

@@ -1,16 +1,25 @@
-import { cn } from '@ledgerhq/lumen-utils-shared';
-import { cloneElement, isValidElement, memo, PropsWithChildren } from 'react';
+import {
+  cloneElement,
+  isValidElement,
+  memo,
+  PropsWithChildren,
+  ReactElement,
+} from 'react';
+import { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native';
 
-function _InjectStylesIntoChildren({
-  styles,
-  children,
-}: PropsWithChildren<{ styles: string }>) {
-  if (!isValidElement(children)) {
-    return children;
-  }
-  return cloneElement(children, {
-    className: cn((children.props as { className?: string }).className, styles),
-  } as Partial<{ className: string }>);
-}
+type StyleValue = ViewStyle | TextStyle | ImageStyle;
 
-export const InjectStylesIntoChildren = memo(_InjectStylesIntoChildren);
+type StylableProps = { style?: StyleProp<StyleValue> };
+
+export const InjectStylesIntoChildren = memo(
+  ({ style, children }: PropsWithChildren<{ style: StyleValue }>) => {
+    if (!isValidElement(children)) {
+      return children;
+    }
+    const childProps = children.props as StylableProps;
+    return cloneElement(children as ReactElement<StylableProps>, {
+      style: childProps.style ? [childProps.style, style] : style,
+    });
+  },
+);
+InjectStylesIntoChildren.displayName = 'InjectStylesIntoChildren';

package/src/lib/utils/index.ts

@@ -1,4 +1,3 @@
-export * from './cn';
 export * from './constants';
 export * from './components';
 export * from './react';

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({