@ledgerhq/lumen-ui-rnative 0.0.43 → 0.0.45

package/dist/src/lib/Components/Tile/types.d.ts

@@ -19,6 +19,19 @@ export type TileProps = {
      * Accepts ReactNode such as <Tag label="New" appearance="base" />
      */
     trailingContent?: ReactNode;
+    /**
+     * The visual style of the tile.
+     * - `no-background`: Transparent background with pressed state
+     * - `card`: Surface background with pressed state
+     * @default 'no-background'
+     */
+    appearance?: 'no-background' | 'card';
+    /**
+     * Whether the tile is disabled.
+     * When disabled, the tile will not respond to press events and will appear dimmed.
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * Callback function when the tile is pressed.
      */
@@ -28,5 +41,5 @@ export type TileProps = {
      * Can be used to perform secondary actions.
      */
     onLongPress?: PressableProps['onLongPress'];
-} & Omit<PressableProps, 'onPress' | 'onLongPress'>;
+} & Omit<PressableProps, 'onPress' | 'onLongPress' | 'disabled'>;
 //# sourceMappingURL=types.d.ts.map

package/dist/src/lib/Components/Tile/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tile/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,SAAS,GAAG;IACtB;;;OAGG;IACH,cAAc,EAAE,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;CAC7C,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,aAAa,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tile/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,SAAS,GAAG;IACtB;;;OAGG;IACH,cAAc,EAAE,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,eAAe,GAAG,MAAM,CAAC;IACtC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;CAC7C,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,aAAa,GAAG,UAAU,CAAC,CAAC"}

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

@@ -15,10 +15,10 @@ export const Base = {
     render: () => (_jsxs(_Fragment, { children: [_jsx(View, { className: 'flex min-h-400 items-center justify-center p-24', children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Press me" }) }), _jsx(TooltipContent, { title: 'My tooltip title', content: _jsx(Text, { children: "This is a helpful tooltip" }) })] }) }), _jsx(GlobalTooltipBottomSheet, {})] })),
 };
 export const WithCustomContent = {
-    render: () => (_jsxs(_Fragment, { children: [_jsx(View, { className: 'flex min-h-400 items-center justify-center p-24', children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Press me" }) }), _jsx(TooltipContent, { title: 'My tooltip title', content: _jsxs(View, { className: 'flex items-start gap-12', children: [_jsx(Text, { className: 'text-muted', children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }), _jsx(Button, { size: 'xs', appearance: 'accent', children: "Custom tooltip action" })] }) })] }) }), _jsx(GlobalTooltipBottomSheet, {})] })),
+    render: () => (_jsxs(_Fragment, { children: [_jsx(View, { className: 'flex min-h-400 items-center justify-center p-24', children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Press me" }) }), _jsx(TooltipContent, { title: 'My tooltip title', content: _jsxs(View, { className: 'flex items-start gap-12', children: [_jsx(Text, { className: 'text-muted', children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }), _jsx(Button, { size: 'sm', appearance: 'accent', children: "Custom tooltip action" })] }) })] }) }), _jsx(GlobalTooltipBottomSheet, {})] })),
 };
 export const WithMultipleTooltips = {
-    render: () => (_jsxs(_Fragment, { children: [_jsxs(View, { className: 'flex min-h-400 flex-row items-center justify-center gap-16 p-24', children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Tooltip 1" }) }), _jsx(TooltipContent, { title: 'First', content: _jsx(Text, { children: "First tooltip content" }) })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Tooltip 2" }) }), _jsx(TooltipContent, { title: 'Second', content: _jsx(Text, { children: "Second tooltip content" }) })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(InteractiveIcon, { iconType: 'filled', "aria-label": 'Info', children: _jsx(Information, {}) }) }), _jsx(TooltipContent, { title: 'Third', content: _jsx(Text, { children: "Third tooltip content" }) })] })] }), _jsx(GlobalTooltipBottomSheet, {})] })),
+    render: () => (_jsxs(_Fragment, { children: [_jsxs(View, { className: 'flex min-h-400 flex-row items-center justify-center gap-16 p-24', children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Tooltip 1" }) }), _jsx(TooltipContent, { title: 'First', content: _jsx(Text, { children: "First tooltip content" }) })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Tooltip 2" }) }), _jsx(TooltipContent, { title: 'Second', content: _jsx(Text, { children: "Second tooltip content" }) })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(InteractiveIcon, { iconType: 'filled', accessibilityLabel: 'Info', children: _jsx(Information, {}) }) }), _jsx(TooltipContent, { title: 'Third', content: _jsx(Text, { children: "Third tooltip content" }) })] })] }), _jsx(GlobalTooltipBottomSheet, {})] })),
 };
 export const WithChangeCallback = {
     render: () => {

package/dist/src/lib/Components/Utility/Box/Box.d.ts

@@ -0,0 +1,39 @@
+import { View } from 'react-native';
+import { type StyledViewProps } from '../../../../styles';
+/**
+ * Box - A layout primitive component with token-constrained style props.
+ *
+ * Box is a View wrapper that accepts design token-based style props directly,
+ * providing type-safe styling with autocomplete for spacing, sizes, colors, etc.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/layout-box--docs Storybook}
+ *
+ * @example
+ * ```tsx
+ * import { Box } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * // Basic usage with token props
+ * <Box lx={{ width: 's400', marginTop: 's4', gap: 's12', alignItems: 'center' }}>
+ *   <Text>Content</Text>
+ * </Box>
+ *
+ * // With background and border
+ * <Box
+ *   lx={{
+ *    padding: 's16',
+ *    backgroundColor: 'surface',
+ *    borderRadius: 'md',
+ *    borderColor: 'muted',
+ *    borderWidth: 1
+ *   }}
+ * >
+ *   <Text>Card content</Text>
+ * </Box>
+ *
+ * // style prop for complete override
+ * <Box lx={{ marginTop: 's4' }} style={{ width: 127 }} />
+ * ```
+ */
+export declare const Box: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("../../../../styles").LumenViewStyleLX & import("react-native").ViewProps & import("react").RefAttributes<View>>>;
+export type BoxProps = StyledViewProps;
+//# sourceMappingURL=Box.d.ts.map

package/dist/src/lib/Components/Utility/Box/Box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,GAAG,wMAAyB,CAAC;AAE1C,MAAM,MAAM,QAAQ,GAAG,eAAe,CAAC"}

package/dist/src/lib/Components/{Box → Utility/Box}/Box.js

@@ -1,5 +1,5 @@
 import { View } from 'react-native';
-import { createStyledView } from '../../../styles';
+import { createStyledView } from '../../../../styles';
 /**
  * Box - A layout primitive component with token-constrained style props.
  *
@@ -13,26 +13,25 @@ import { createStyledView } from '../../../styles';
  * import { Box } from '@ledgerhq/lumen-ui-rnative';
  *
  * // Basic usage with token props
- * <Box width='s400' marginTop='s4' gap='s12' alignItems='center'>
+ * <Box lx={{ width: 's400', marginTop: 's4', gap: 's12', alignItems: 'center' }}>
  *   <Text>Content</Text>
  * </Box>
  *
  * // With background and border
  * <Box
- *   padding='s16'
- *   backgroundColor='surface'
- *   borderRadius='md'
- *   borderColor='muted'
- *   borderWidth={1}
+ *   lx={{
+ *    padding: 's16',
+ *    backgroundColor: 'surface',
+ *    borderRadius: 'md',
+ *    borderColor: 'muted',
+ *    borderWidth: 1
+ *   }}
  * >
  *   <Text>Card content</Text>
  * </Box>
  *
- * // Raw numbers allowed as escape hatch
- * <Box width={127} marginTop='s4' />
- *
  * // style prop for complete override
- * <Box marginTop='s4' style={{ width: 127 }} />
+ * <Box lx={{ marginTop: 's4' }} style={{ width: 127 }} />
  * ```
  */
 export const Box = createStyledView(View);

package/dist/src/lib/Components/Utility/Box/Box.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Box/Box.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAY1B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,GAAG,CAAC,CAAC;AAElC,eAAO,MAAM,IAAI,EAAE,KA0BlB,CAAC"}

package/dist/src/lib/Components/{Box → Utility/Box}/Box.stories.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from './Box';
 const meta = {
     component: Box,
@@ -16,23 +15,25 @@ const meta = {
 export default meta;
 export const Base = {
     args: {
-        height: 's48',
-        width: 's48',
-        backgroundColor: 'accent',
-        borderRadius: 'md',
-        alignSelf: 'center',
+        lx: {
+            height: 's48',
+            width: 's48',
+            backgroundColor: 'accent',
+            borderRadius: 'md',
+        },
     },
-    render: (args) => _jsx(Box, { ...args }),
     parameters: {
         docs: {
             source: {
                 code: `
 <Box
-  height='s48'
-  width='s48'
-  backgroundColor='accent'
-  borderRadius='md'
-  alignSelf='center'
+  lx={{
+    height: 's48',
+    width: 's48',
+    backgroundColor: 'accent',
+    borderRadius: 'md',
+    alignSelf: 'center',
+  }}
 />
 `,
             },

package/dist/src/lib/Components/Utility/Box/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Box';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/lib/Components/Utility/Box/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Box/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC"}

package/dist/src/lib/Components/Utility/Pressable/Pressable.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Pressable - An interactive layout primitive with token-constrained style props.
+ *
+ * Pressable is a wrapper around React Native's Pressable that accepts design
+ * token-based style props directly, providing type-safe styling with autocomplete
+ * for spacing, sizes, colors, etc. Use the `style` prop for pressed-state styling.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/utility-pressable--docs Storybook}
+ *
+ * @example
+ * ```tsx
+ * import { Pressable } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * // Basic usage with token props
+ * <Pressable
+ *   lx={{ width: 's400', marginTop: 's4', gap: 's12', alignItems: 'center' }}
+ *   onPress={handlePress}
+ * >
+ *   <Text>Content</Text>
+ * </Pressable>
+ *
+ * // With function-based style for pressed state
+ * <Pressable
+ *   lx={{ padding: 's16', backgroundColor: 'surface' }}
+ *   style={({ pressed }) => ({ opacity: pressed ? 0.8 : 1 })}
+ * >
+ *   <Text>Press me</Text>
+ * </Pressable>
+ * ```
+ */
+export declare const Pressable: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("../../../../styles").LumenPressableStyleLX & Omit<import("react-native").PressableProps, "style"> & {
+    style?: import("react-native").ViewStyle | ((state: import("react-native").PressableStateCallbackType) => import("react-native").ViewStyle) | (import("react-native").ViewStyle | ((state: import("react-native").PressableStateCallbackType) => import("react-native").ViewStyle) | (import("react-native").ViewStyle | ((state: import("react-native").PressableStateCallbackType) => import("react-native").ViewStyle) | (import("react-native").ViewStyle | ((state: import("react-native").PressableStateCallbackType) => import("react-native").ViewStyle) | (import("react-native").ViewStyle | ((state: import("react-native").PressableStateCallbackType) => import("react-native").ViewStyle) | (import("react-native").ViewStyle | ((state: import("react-native").PressableStateCallbackType) => import("react-native").ViewStyle) | (import("react-native").ViewStyle | ((state: import("react-native").PressableStateCallbackType) => import("react-native").ViewStyle) | (import("react-native").ViewStyle | ((state: import("react-native").PressableStateCallbackType) => import("react-native").ViewStyle) | (import("react-native").ViewStyle | ((state: import("react-native").PressableStateCallbackType) => import("react-native").ViewStyle) | (import("react-native").ViewStyle | ((state: import("react-native").PressableStateCallbackType) => import("react-native").ViewStyle) | (import("react-native").ViewStyle | ((state: import("react-native").PressableStateCallbackType) => import("react-native").ViewStyle) | (import("react-native").ViewStyle | ((state: import("react-native").PressableStateCallbackType) => import("react-native").ViewStyle) | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+} & import("react").RefAttributes<import("react-native").View>>>;
+//# sourceMappingURL=Pressable.d.ts.map

package/dist/src/lib/Components/Utility/Pressable/Pressable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pressable.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Pressable/Pressable.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,SAAS;;gEAAqC,CAAC"}

package/dist/src/lib/Components/Utility/Pressable/Pressable.js

@@ -0,0 +1,33 @@
+import { Pressable as RNPressable } from 'react-native';
+import { createStyledPressable } from '../../../../styles';
+/**
+ * Pressable - An interactive layout primitive with token-constrained style props.
+ *
+ * Pressable is a wrapper around React Native's Pressable that accepts design
+ * token-based style props directly, providing type-safe styling with autocomplete
+ * for spacing, sizes, colors, etc. Use the `style` prop for pressed-state styling.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/utility-pressable--docs Storybook}
+ *
+ * @example
+ * ```tsx
+ * import { Pressable } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * // Basic usage with token props
+ * <Pressable
+ *   lx={{ width: 's400', marginTop: 's4', gap: 's12', alignItems: 'center' }}
+ *   onPress={handlePress}
+ * >
+ *   <Text>Content</Text>
+ * </Pressable>
+ *
+ * // With function-based style for pressed state
+ * <Pressable
+ *   lx={{ padding: 's16', backgroundColor: 'surface' }}
+ *   style={({ pressed }) => ({ opacity: pressed ? 0.8 : 1 })}
+ * >
+ *   <Text>Press me</Text>
+ * </Pressable>
+ * ```
+ */
+export const Pressable = createStyledPressable(RNPressable);

package/dist/src/lib/Components/Utility/Pressable/Pressable.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { Pressable } from './Pressable';
+declare const meta: Meta<typeof Pressable>;
+export default meta;
+type Story = StoryObj<typeof Pressable>;
+export declare const Base: Story;
+//# sourceMappingURL=Pressable.stories.d.ts.map

package/dist/src/lib/Components/Utility/Pressable/Pressable.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pressable.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Pressable/Pressable.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAYhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,IAAI,EAAE,KA8BlB,CAAC"}

package/dist/src/lib/Components/Utility/Pressable/Pressable.stories.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pressable } from './Pressable';
+const meta = {
+    component: Pressable,
+    title: 'Utility/Pressable',
+    parameters: {
+        docs: {
+            source: {
+                language: 'tsx',
+                format: true,
+                type: 'code',
+            },
+        },
+    },
+};
+export default meta;
+export const Base = {
+    args: {
+        lx: {
+            height: 's48',
+            width: 's48',
+            backgroundColor: 'accent',
+            borderRadius: 'md',
+            alignSelf: 'center',
+        },
+        style: ({ pressed }) => ({ opacity: pressed ? 0.5 : 1 }),
+    },
+    render: (args) => _jsx(Pressable, { ...args }),
+    parameters: {
+        docs: {
+            source: {
+                code: `
+<Pressable
+  style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })}
+  lx={{
+    height: 's48',
+    width: 's48',
+    backgroundColor: 'accent',
+    borderRadius: 'md',
+    alignSelf: 'center',
+  }}
+/>
+`,
+            },
+        },
+    },
+};

package/dist/src/lib/Components/Utility/Pressable/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Pressable';
+export type { PressableProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/lib/Components/Utility/Pressable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Pressable/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,YAAY,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC"}

package/dist/src/lib/Components/Utility/Pressable/index.js

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

package/dist/src/lib/Components/Utility/Pressable/types.d.ts

@@ -0,0 +1,3 @@
+import { StyledPressableProps } from '../../../../styles';
+export type PressableProps = StyledPressableProps;
+//# sourceMappingURL=types.d.ts.map

package/dist/src/lib/Components/Utility/Pressable/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Pressable/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE1D,MAAM,MAAM,cAAc,GAAG,oBAAoB,CAAC"}

package/dist/src/lib/Components/Utility/Pressable/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/Components/Utility/Text/Text.d.ts

@@ -0,0 +1,40 @@
+import { Text as RNText } from 'react-native';
+import { type StyledTextProps } from '../../../../styles';
+/**
+ * Text - A typography component with typography support and token-constrained style props.
+ *
+ * Text is a wrapper around React Native's Text that accepts a `typography` prop for
+ * typography presets, plus design token-based style props for colors, spacing, etc.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/typography-text--docs Storybook}
+ *
+ * @example
+ * ```tsx
+ * import { Text } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * // Basic usage with typography typography
+ * <Text typography='body1'>Hello World</Text>
+ *
+ * // With custom color
+ * <Text typography='heading2SemiBold' lx={{ color: 'muted' }}>
+ *   Subtitle
+ * </Text>
+ *
+ * // With spacing
+ * <Text typography='body2' lx={{ marginTop: 's8', color: 'base' }}>
+ *   Description text
+ * </Text>
+ *
+ * // Style prop for complete override
+ * <Text
+ *  typography='body1'
+ *  lx={{ marginTop: 's8' }}
+ *  style={{ letterSpacing: 127 }}
+ * />
+ * ```
+ */
+export declare const Text: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("../../../../styles").LumenTextStyleLX & import("react-native").TextProps & {
+    typography?: keyof import("../../../../styles").LumenStyleSheetTheme["typographies"];
+} & import("react").RefAttributes<RNText>>>;
+export type TextProps = StyledTextProps;
+//# sourceMappingURL=Text.d.ts.map

package/dist/src/lib/Components/Utility/Text/Text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,IAAI;uBArBV,iEAAqC;2CAqBA,CAAC;AAE7C,MAAM,MAAM,SAAS,GAAG,eAAe,CAAC"}

package/dist/src/lib/Components/{Text → Utility/Text}/Text.js

@@ -1,9 +1,9 @@
 import { Text as RNText } from 'react-native';
-import { createStyledText } from '../../../styles';
+import { createStyledText } from '../../../../styles';
 /**
- * Text - A typography component with typo support and token-constrained style props.
+ * Text - A typography component with typography support and token-constrained style props.
  *
- * Text is a wrapper around React Native's Text that accepts a `typo` prop for
+ * Text is a wrapper around React Native's Text that accepts a `typography` prop for
  * typography presets, plus design token-based style props for colors, spacing, etc.
  *
  * @see {@link https://ldls.vercel.app/?path=/docs/typography-text--docs Storybook}
@@ -12,21 +12,25 @@ import { createStyledText } from '../../../styles';
  * ```tsx
  * import { Text } from '@ledgerhq/lumen-ui-rnative';
  *
- * // Basic usage with typography typo
- * <Text typo='body1'>Hello World</Text>
+ * // Basic usage with typography typography
+ * <Text typography='body1'>Hello World</Text>
  *
  * // With custom color
- * <Text typo='heading2SemiBold' color='muted'>
+ * <Text typography='heading2SemiBold' lx={{ color: 'muted' }}>
  *   Subtitle
  * </Text>
  *
  * // With spacing
- * <Text typo='body2' marginTop='s8' color='base'>
+ * <Text typography='body2' lx={{ marginTop: 's8', color: 'base' }}>
  *   Description text
  * </Text>
  *
- * // style prop for complete override
- * <Text typo='body1' style={{ letterSpacing: 127 }} />
+ * // Style prop for complete override
+ * <Text
+ *  typography='body1'
+ *  lx={{ marginTop: 's8' }}
+ *  style={{ letterSpacing: 127 }}
+ * />
  * ```
  */
 export const Text = createStyledText(RNText);

package/dist/src/lib/Components/Utility/Text/Text.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Text/Text.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAY3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,IAAI,EAAE,KAiBlB,CAAC"}

package/dist/src/lib/Components/{Text → Utility/Text}/Text.stories.js

@@ -15,15 +15,15 @@ const meta = {
 export default meta;
 export const Base = {
     args: {
-        typo: 'body1',
-        color: 'base',
+        typography: 'body1',
+        lx: { color: 'base' },
         children: 'Hello World',
     },
     parameters: {
         docs: {
             source: {
                 code: `
-<Text typo='body1' color='base'>
+<Text typography='body1' lx={{ color: 'base' }}>
   Hello World
 </Text>
 `,

package/dist/src/lib/Components/Utility/Text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Text/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}

package/dist/src/lib/Components/Utility/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Pressable';
+export * from './Box';
+export * from './Text';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/lib/Components/Utility/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Utility/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC"}

package/dist/src/lib/Components/Utility/index.js

@@ -0,0 +1,3 @@
+export * from './Pressable';
+export * from './Box';
+export * from './Text';

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

@@ -1,9 +1,7 @@
-export * from './_ToRemove/ToRemove';
 export * from './AddressInput';
 export * from './AmountInput';
 export * from './Banner';
 export * from './BottomSheet';
-export * from './Box';
 export * from './Button';
 export * from './CardButton';
 export * from './Checkbox';
@@ -16,7 +14,7 @@ export * from './Select';
 export * from './Spot';
 export * from './Switch';
 export * from './Tag';
-export * from './Text';
+export * from './Utility';
 export * from './TextInput';
 export * from './ThemeProvider';
 export * from './Tile';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC"}

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

@@ -1,9 +1,7 @@
-export * from './_ToRemove/ToRemove';
 export * from './AddressInput';
 export * from './AmountInput';
 export * from './Banner';
 export * from './BottomSheet';
-export * from './Box';
 export * from './Button';
 export * from './CardButton';
 export * from './Checkbox';
@@ -16,7 +14,7 @@ export * from './Select';
 export * from './Spot';
 export * from './Switch';
 export * from './Tag';
-export * from './Text';
+export * from './Utility';
 export * from './TextInput';
 export * from './ThemeProvider';
 export * from './Tile';

package/dist/src/lib/utils/components/InjectStylesIntoChildren.d.ts

@@ -1,7 +1,8 @@
-import { PropsWithChildren } from 'react';
-declare function _InjectStylesIntoChildren({ styles, children, }: PropsWithChildren<{
-    styles: string;
-}>): string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined;
-export declare const InjectStylesIntoChildren: import("react").MemoExoticComponent<typeof _InjectStylesIntoChildren>;
+import { PropsWithChildren, ReactElement } from 'react';
+import { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+type StyleValue = ViewStyle | TextStyle | ImageStyle;
+export declare const InjectStylesIntoChildren: import("react").MemoExoticComponent<({ style, children }: PropsWithChildren<{
+    style: StyleValue;
+}>) => string | number | boolean | ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined>;
 export {};
 //# sourceMappingURL=InjectStylesIntoChildren.d.ts.map

package/dist/src/lib/utils/components/InjectStylesIntoChildren.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InjectStylesIntoChildren.d.ts","sourceRoot":"","sources":["../../../../../src/lib/utils/components/InjectStylesIntoChildren.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsC,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE9E,iBAAS,yBAAyB,CAAC,EACjC,MAAM,EACN,QAAQ,GACT,EAAE,iBAAiB,CAAC;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,+KAOvC;AAED,eAAO,MAAM,wBAAwB,uEAAkC,CAAC"}
+{"version":3,"file":"InjectStylesIntoChildren.d.ts","sourceRoot":"","sources":["../../../../../src/lib/utils/components/InjectStylesIntoChildren.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,iBAAiB,EACjB,YAAY,EACb,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,EAAa,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE3E,KAAK,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAIrD,eAAO,MAAM,wBAAwB,4DACb,iBAAiB,CAAC;IAAE,KAAK,EAAE,UAAU,CAAA;CAAE,CAAC,iKAS/D,CAAC"}

package/dist/src/lib/utils/components/InjectStylesIntoChildren.js

@@ -1,11 +1,11 @@
-import { cn } from '@ledgerhq/lumen-utils-shared';
-import { cloneElement, isValidElement, memo } from 'react';
-function _InjectStylesIntoChildren({ styles, children, }) {
+import { cloneElement, isValidElement, memo, } from 'react';
+export const InjectStylesIntoChildren = memo(({ style, children }) => {
     if (!isValidElement(children)) {
         return children;
     }
+    const childProps = children.props;
     return cloneElement(children, {
-        className: cn(children.props.className, styles),
+        style: childProps.style ? [childProps.style, style] : style,
     });
-}
-export const InjectStylesIntoChildren = memo(_InjectStylesIntoChildren);
+});
+InjectStylesIntoChildren.displayName = 'InjectStylesIntoChildren';

package/dist/src/styles/LumenStyleSheet.d.ts

@@ -15,7 +15,7 @@ declare class HybridLumenStyleSheet {
     absoluteFill: import("react-native").RegisteredStyle<NativeStyleSheet.AbsoluteFillStyle>;
     flatten: typeof NativeStyleSheet.flatten;
     compose: typeof NativeStyleSheet.compose;
-    useCreate: <S extends import("./types").LumenStyleSheet>(styleCreator: import("./types").LumenStyleSheetExtended<S>) => S;
+    useCreate: <S extends import("./types").LumenStyleSheet>(styleCreator: import("./types").LumenStyleSheetExtended<S>, deps?: import("react").DependencyList) => S;
     useTheme: () => import("./Provider/LumenStyleSheetProvider").LumenStyleSheetContextValue;
 }
 export declare const LumenStyleSheet: HybridLumenStyleSheet;

package/dist/src/styles/LumenStyleSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LumenStyleSheet.d.ts","sourceRoot":"","sources":["../../../src/styles/LumenStyleSheet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,KAAK,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEvE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,MAAM,MAAM,mBAAmB,GAAG;IAChC,kBAAkB,EAAE,OAAO,oBAAoB,CAAC,kBAAkB,CAAC;IACnE,YAAY,EAAE,OAAO,oBAAoB,CAAC,YAAY,CAAC;IACvD,OAAO,EAAE,OAAO,oBAAoB,CAAC,OAAO,CAAC;IAC7C,OAAO,EAAE,OAAO,oBAAoB,CAAC,OAAO,CAAC;IAC7C,SAAS,EAAE,OAAO,SAAS,CAAC;IAC5B,QAAQ,EAAE,OAAO,QAAQ,CAAC;CAC3B,CAAC;AAEF,cAAM,qBAAqB;IACzB,kBAAkB,qCAAuC;IACzD,YAAY,6EAAiC;IAC7C,OAAO,kCAA4B;IACnC,OAAO,kCAA4B;IACnC,SAAS,iHAAa;IACtB,QAAQ,iFAAY;CACrB;AAED,eAAO,MAAM,eAAe,uBAA8B,CAAC"}
+{"version":3,"file":"LumenStyleSheet.d.ts","sourceRoot":"","sources":["../../../src/styles/LumenStyleSheet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,KAAK,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEvE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,MAAM,MAAM,mBAAmB,GAAG;IAChC,kBAAkB,EAAE,OAAO,oBAAoB,CAAC,kBAAkB,CAAC;IACnE,YAAY,EAAE,OAAO,oBAAoB,CAAC,YAAY,CAAC;IACvD,OAAO,EAAE,OAAO,oBAAoB,CAAC,OAAO,CAAC;IAC7C,OAAO,EAAE,OAAO,oBAAoB,CAAC,OAAO,CAAC;IAC7C,SAAS,EAAE,OAAO,SAAS,CAAC;IAC5B,QAAQ,EAAE,OAAO,QAAQ,CAAC;CAC3B,CAAC;AAEF,cAAM,qBAAqB;IACzB,kBAAkB,qCAAuC;IACzD,YAAY,6EAAiC;IAC7C,OAAO,kCAA4B;IACnC,OAAO,kCAA4B;IACnC,SAAS,wJAAa;IACtB,QAAQ,iFAAY;CACrB;AAED,eAAO,MAAM,eAAe,uBAA8B,CAAC"}

package/dist/src/styles/Provider/createStylesheetTheme.d.ts

@@ -4,7 +4,6 @@ import { AddEntriesNegative } from '../types/utility.types';
  *
  */
 export declare const getNegativeSpacings: <Input extends LumenTheme["spacings"], Output = AddEntriesNegative<Input>>(spacings?: Input) => Output;
-/**
 /**
  * The theme object from design-core is not directly compatible with React Native's StyleSheet.
  *

package/dist/src/styles/Provider/createStylesheetTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createStylesheetTheme.d.ts","sourceRoot":"","sources":["../../../../src/styles/Provider/createStylesheetTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAC9B,KAAK,SAAS,UAAU,CAAC,UAAU,CAAC,EACpC,MAAM,GAAG,kBAAkB,CAAC,KAAK,CAAC,EAElC,WAAU,KAAmB,KAC5B,MAIF,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB,GAChC,OAAO,UAAU,KAChB,oBASF,CAAC"}
+{"version":3,"file":"createStylesheetTheme.d.ts","sourceRoot":"","sources":["../../../../src/styles/Provider/createStylesheetTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAC9B,KAAK,SAAS,UAAU,CAAC,UAAU,CAAC,EACpC,MAAM,GAAG,kBAAkB,CAAC,KAAK,CAAC,EAElC,WAAU,KAAmB,KAC5B,MAIF,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,qBAAqB,GAChC,OAAO,UAAU,KAChB,oBASF,CAAC"}

package/dist/src/styles/Provider/createStylesheetTheme.js

@@ -4,7 +4,6 @@
 export const getNegativeSpacings = (spacings = {}) => {
     return Object.fromEntries(Object.entries(spacings).map(([key, value]) => [`-${key}`, value * -1]));
 };
-/**
 /**
  * The theme object from design-core is not directly compatible with React Native's StyleSheet.
  *