@ledgerhq/lumen-ui-rnative 0.0.46 → 0.0.47

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

@@ -1,16 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Settings, Plus, User, PenEdit, Cart, Apps, Chart1, Bolt, ChevronRight, } from '../../Symbols';
-import { Spot } from '../Spot/Spot';
+import { useState } from 'react';
+import { Settings, ChevronRight, Wallet } from '../../Symbols';
+import { Switch } from '../Switch/Switch';
 import { Tag } from '../Tag/Tag';
-import { Box, Text } from '../Utility';
-import { ListItem } from './ListItem';
-const Balance = ({ disabled }) => {
-    return (_jsxs(Box, { lx: { alignItems: 'flex-end' }, children: [_jsx(Text, { typography: 'body2SemiBold', lx: { color: disabled ? 'disabled' : 'base' }, children: "42.00" }), _jsx(Text, { typography: 'body3', lx: { color: disabled ? 'disabled' : 'muted' }, children: "USD" })] }));
-};
+import { Box } from '../Utility';
+import { ListItem, ListItemLeading, ListItemContent, ListItemTitle, ListItemDescription, ListItemTrailing, ListItemSpot, ListItemIcon, ListItemTruncate, } from './ListItem';
 const meta = {
     component: ListItem,
     title: 'Containment/ListItem',
+    subcomponents: {
+        ListItemLeading,
+        ListItemContent,
+        ListItemTitle,
+        ListItemDescription,
+        ListItemTrailing,
+        ListItemSpot,
+        ListItemIcon,
+        ListItemTruncate,
+    },
     parameters: {
+        layout: 'padded',
+        backgrounds: { default: 'light' },
         docs: {
             source: {
                 language: 'tsx',
@@ -20,43 +30,9 @@ const meta = {
         },
     },
     argTypes: {
-        title: {
-            control: 'text',
-            description: 'The main title of the list item',
-        },
-        description: {
-            control: 'text',
-            description: 'Optional description',
-        },
-        descriptionTag: {
-            control: 'select',
-            options: ['None', 'Tag'],
-            mapping: {
-                None: undefined,
-                Tag: _jsx(Tag, { label: 'New', appearance: 'accent', icon: Bolt, size: 'sm' }),
-            },
-            if: { arg: 'description', exists: true },
-        },
-        leadingContent: {
-            control: 'select',
-            options: ['None', 'Settings', 'Plus'],
-            mapping: {
-                None: undefined,
-                Settings: _jsx(Spot, { appearance: 'icon', icon: Settings }),
-                Plus: _jsx(Spot, { appearance: 'icon', icon: Plus }),
-            },
-            description: 'Optional leading content',
-        },
-        trailingContent: {
-            control: 'select',
-            description: 'Optional trailing content to display on the right side',
-            options: ['icon', 'value', 'tag', 'none'],
-            mapping: {
-                icon: _jsx(PenEdit, { size: 24 }),
-                value: _jsx(Balance, {}),
-                tag: _jsx(Tag, { label: 'New', appearance: 'accent' }),
-                none: undefined,
-            },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the list item is disabled',
         },
         onPress: {
             action: 'pressed',
@@ -67,50 +43,64 @@ const meta = {
 export default meta;
 export const Base = {
     args: {
-        title: 'Item with Icon and Description',
-        leadingContent: _jsx(Spot, { appearance: 'icon', icon: Settings }),
-        description: 'Additional information',
         lx: { maxWidth: 's320' },
     },
+    render: (args) => (_jsx(ListItem, { ...args, children: _jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Item with Icon and Description" }), _jsx(ListItemDescription, { children: "Additional information" })] })] }) })),
     parameters: {
         docs: {
             source: {
                 code: `
-<ListItem
-  title="Item with Icon and Description"
-  leadingContent={<Spot appearance="icon" icon={Settings} />}
-  description="Additional information"
-/>
+<ListItem>
+  <ListItemLeading>
+    <ListItemSpot appearance="icon" icon={Settings} />
+    <ListItemContent>
+      <ListItemTitle>Item with Icon and Description</ListItemTitle>
+      <ListItemDescription>Additional information</ListItemDescription>
+    </ListItemContent>
+  </ListItemLeading>
+</ListItem>
 `,
             },
         },
     },
 };
-export const WithDescriptionTag = {
-    args: {
-        title: 'Item with Description Tag',
-        leadingContent: _jsx(Spot, { appearance: 'icon', icon: Settings }),
-        description: 'Additional information',
-        descriptionTag: (_jsx(Tag, { label: 'New', appearance: 'accent', icon: Bolt, size: 'sm' })),
-    },
-    render: (args) => (_jsx(Box, { lx: { maxWidth: 's320' }, children: _jsx(ListItem, { ...args }) })),
-};
-export const TrailingContentVariantsShowcase = {
+export const VariantsShowcase = {
     render: () => {
-        return (_jsxs(Box, { lx: { flexDirection: 'column', maxWidth: 's256' }, children: [_jsx(ListItem, { title: 'Caret Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: User }), trailingContent: _jsx(ChevronRight, { size: 24 }) }), _jsx(ListItem, { title: 'Value Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Cart }), trailingContent: _jsx(Balance, {}) }), _jsx(ListItem, { title: 'Tag Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps }), trailingContent: _jsx(Tag, { label: 'New', appearance: 'accent' }) }), _jsx(ListItem, { title: 'Icon Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Settings }), trailingContent: _jsx(PenEdit, { size: 24 }) }), _jsx(ListItem, { title: 'None Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Chart1 }) })] }));
+        const [selected, setSelected] = useState(false);
+        return (_jsxs(Box, { lx: { flexDirection: 'column', maxWidth: 's320', gap: 's8' }, children: [_jsx(ListItem, { children: _jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Simple composition" }), _jsx(ListItemDescription, { children: "With description" })] })] }) }), _jsxs(ListItem, { onPress: () => setSelected(!selected), children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Switch Variant" }), _jsx(ListItemDescription, { children: "With description" })] })] }), _jsx(ListItemTrailing, { children: _jsx(Switch, { checked: selected, onCheckedChange: setSelected }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Content Variant" }), _jsx(ListItemDescription, { children: "With description" })] })] }), _jsx(ListItemTrailing, { children: _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "42.10" }), _jsx(ListItemDescription, { children: "USD" })] }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Content Variant" }), _jsx(ListItemDescription, { children: "Custom style" })] })] }), _jsx(ListItemTrailing, { children: _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "USD" }), _jsx(ListItemDescription, { lx: { color: 'error' }, children: "-7.53%" })] }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Content Variant" }), _jsx(ListItemDescription, { children: "Custom style" })] })] }), _jsx(ListItemTrailing, { children: _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "USD" }), _jsx(ListItemDescription, { lx: { color: 'success' }, children: "+7.53%" })] }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Tag Variant" }), _jsx(ListItemDescription, { children: "Custom style" })] })] }), _jsx(ListItemTrailing, { children: _jsx(Tag, { size: 'sm', label: 'New', appearance: 'accent' }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Icon Variant" }), _jsx(ListItemDescription, { children: "With description" })] })] }), _jsx(ListItemTrailing, { children: _jsx(ListItemIcon, { icon: ChevronRight }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemIcon, { icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Icon without Spot" }), _jsx(ListItemDescription, { children: "Using ListItemIcon" })] })] }), _jsx(ListItemTrailing, { children: _jsx(ListItemIcon, { icon: ChevronRight }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsxs(ListItemTitle, { children: [_jsx(ListItemTruncate, { variant: 'title', children: "Complex 1" }), _jsx(Tag, { size: 'sm', label: 'New', appearance: 'base' })] }), _jsxs(ListItemDescription, { children: [_jsx(ListItemTruncate, { children: "With description" }), _jsx(Tag, { size: 'sm', label: 'Custom Tag', appearance: 'gray' })] })] })] }), _jsx(ListItemTrailing, { children: _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "42.10" }), _jsx(ListItemDescription, { children: "USD" })] }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Complex 2" }), _jsx(ListItemDescription, { children: "With description" })] })] }), _jsx(ListItemTrailing, { children: _jsxs(ListItemContent, { children: [_jsxs(ListItemTitle, { children: [_jsx(Tag, { size: 'sm', label: 'New', appearance: 'base' }), _jsx(ListItemTruncate, { variant: 'title', children: "1200.12" })] }), _jsx(ListItemDescription, { children: _jsx(Tag, { size: 'sm', label: 'BTC', appearance: 'gray' }) })] }) })] })] }));
     },
 };
-export const StateShowcase = {
-    render: () => {
-        return (_jsxs(Box, { lx: { flexDirection: 'row', gap: 's32' }, children: [_jsxs(Box, { lx: { flexDirection: 'column', maxWidth: 's256' }, children: [_jsx(ListItem, { title: 'Caret Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: User }), trailingContent: _jsx(ChevronRight, { size: 24, lx: { color: 'muted' } }) }), _jsx(ListItem, { title: 'Value Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Cart }), trailingContent: _jsx(Balance, {}) }), _jsx(ListItem, { title: 'Tag Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps }), trailingContent: _jsx(Tag, { label: 'New', appearance: 'accent' }) }), _jsx(ListItem, { title: 'Icon Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Settings }), trailingContent: _jsx(PenEdit, { size: 24 }) }), _jsx(ListItem, { title: 'None Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Chart1 }) })] }), _jsxs(Box, { lx: { flexDirection: 'column', maxWidth: 's256' }, children: [_jsx(ListItem, { title: 'Caret Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: User, disabled: true }), disabled: true, trailingContent: _jsx(ChevronRight, { size: 24, lx: { color: 'disabled' } }) }), _jsx(ListItem, { title: 'Tag Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps, disabled: true }), disabled: true, trailingContent: _jsx(Tag, { label: 'New', appearance: 'accent', disabled: true }) }), _jsx(ListItem, { title: 'Icon Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Settings, disabled: true }), disabled: true, trailingContent: _jsx(PenEdit, { size: 24, lx: { color: 'disabled' } }) }), _jsx(ListItem, { title: 'None Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Chart1, disabled: true }), disabled: true })] })] }));
+export const DisabledState = {
+    args: {
+        disabled: true,
+    },
+    render: (args) => (_jsxs(Box, { lx: { flexDirection: 'column', width: 's320' }, children: [_jsxs(ListItem, { ...args, children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Disabled Item" }), _jsx(ListItemDescription, { children: "This item is disabled" })] })] }), _jsx(ListItemTrailing, { children: _jsx(Switch, { checked: false, disabled: args.disabled }) })] }), _jsxs(ListItem, { ...args, children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Disabled Item" }), _jsx(ListItemDescription, { children: "This item is disabled" })] })] }), _jsx(ListItemTrailing, { children: _jsx(ListItemIcon, { icon: ChevronRight }) })] }), _jsxs(ListItem, { ...args, children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Content Variant" }), _jsx(ListItemDescription, { children: "With description" })] })] }), _jsx(ListItemTrailing, { children: _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "42.10" }), _jsx(ListItemDescription, { children: "USD" })] }) })] }), _jsx(ListItem, { ...args, children: _jsxs(ListItemLeading, { children: [_jsx(ListItemIcon, { icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Icon without Spot" }), _jsx(ListItemDescription, { children: "Using ListItemIcon" })] })] }) })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: `
+<ListItem disabled>
+  <ListItemLeading>
+    <ListItemSpot appearance="icon" icon={Settings} />
+    <ListItemContent>
+      <ListItemTitle>Disabled Item</ListItemTitle>
+      <ListItemDescription>This item is disabled</ListItemDescription>
+    </ListItemContent>
+  </ListItemLeading>
+  <ListItemTrailing>
+    <ChevronRight size={24} />
+  </ListItemTrailing>
+</ListItem>
+`,
+            },
+        },
     },
 };
 export const ResponsiveLayout = {
-    render: () => {
-        return (_jsxs(Box, { lx: {
-                width: 's320',
-                backgroundColor: 'mutedPressed',
-                padding: 's16',
-            }, children: [_jsx(Text, { typography: 'body4SemiBold', lx: { marginBottom: 's16', color: 'muted' }, children: "Container: 320px wide" }), _jsxs(Box, { lx: { flexDirection: 'column', gap: 's0' }, children: [_jsx(ListItem, { title: 'Short Title', description: 'Short description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Plus }), trailingContent: _jsx(ChevronRight, { size: 24, lx: { color: 'muted' } }) }), _jsx(ListItem, { title: 'Long Title that should truncate appropriately', description: 'Long description that should truncate appropriately', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Plus }), trailingContent: _jsx(ChevronRight, { size: 24, lx: { color: 'muted' } }) }), _jsx(ListItem, { title: 'Long Title that should truncate appropriately', description: 'Long description that should truncate appropriately', descriptionTag: _jsx(Tag, { label: 'New', appearance: 'accent', size: 'sm' }), leadingContent: _jsx(Spot, { appearance: 'icon', icon: Plus }), trailingContent: _jsx(ChevronRight, { size: 24, lx: { color: 'muted' } }) })] })] }));
-    },
+    render: () => (_jsx(Box, { lx: {
+            width: 's400',
+            borderWidth: 's1',
+            borderColor: 'mutedSubtle',
+            padding: 's16',
+        }, children: _jsxs(Box, { lx: { flexDirection: 'column' }, children: [_jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Short Title" }), _jsx(ListItemDescription, { children: "Short description" })] })] }), _jsx(ListItemTrailing, { children: _jsx(ListItemIcon, { icon: ChevronRight }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Long Title that should truncate appropriately" }), _jsx(ListItemDescription, { children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos." })] })] }), _jsx(ListItemTrailing, { children: _jsx(ListItemIcon, { icon: ChevronRight }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsxs(ListItemTitle, { children: [_jsx(ListItemTruncate, { variant: 'title', children: "Long Title that should truncate appropriately" }), _jsx(Tag, { size: 'sm', label: 'New', appearance: 'base' })] }), _jsxs(ListItemDescription, { children: [_jsx(ListItemTruncate, { children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos." }), _jsx(Tag, { size: 'sm', label: 'Custom Tag', appearance: 'gray' })] })] })] }), _jsx(ListItemTrailing, { children: _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "42.10" }), _jsx(ListItemDescription, { children: "USD" })] }) })] })] }) })),
 };

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

@@ -1,3 +1,3 @@
 export * from './ListItem';
-export * from './ListItem.types';
+export * from './types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/ListItem/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/ListItem/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}

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

@@ -1,2 +1,2 @@
 export * from './ListItem';
-export * from './ListItem.types';
+export * from './types';

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

@@ -0,0 +1,106 @@
+import React from 'react';
+import { LumenTextStyle, StyledPressableProps, StyledTextProps, StyledViewProps } from '../../../styles';
+import { DiscriminatedSpotProps } from '../Spot';
+/**
+ * Context value for passing state to sub-components
+ */
+export type ListItemContextValue = {
+    disabled?: boolean;
+};
+/**
+ * Props for the ListItem root component
+ */
+export type ListItemProps = {
+    /**
+     * The content of the list item (ListItemLeading, ListItemTrailing)
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the list item is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Callback function when the list item is pressed.
+     */
+    onPress?: StyledPressableProps['onPress'];
+} & Omit<StyledPressableProps, 'disabled' | 'children'>;
+/**
+ * Props for the ListItemLeading component
+ */
+export type ListItemLeadingProps = {
+    /**
+     * The content of the leading area (visual element + ListItemContent)
+     */
+    children: React.ReactNode;
+} & Omit<StyledViewProps, 'children'>;
+/**
+ * Props for the ListItemContent component
+ */
+export type ListItemContentProps = {
+    /**
+     * The content (ListItemTitle, ListItemDescription)
+     */
+    children: React.ReactNode;
+} & Omit<StyledViewProps, 'children'>;
+/**
+ * Props for the ListItemTitle component
+ */
+export type ListItemTitleProps = {
+    /**
+     * The title text or custom content
+     */
+    children: React.ReactNode;
+} & Omit<StyledTextProps, 'children'>;
+/**
+ * Props for the ListItemDescription component
+ */
+export type ListItemDescriptionProps = {
+    /**
+     * The description text or custom content
+     */
+    children: React.ReactNode;
+} & Omit<StyledTextProps, 'children'>;
+/**
+ * Props for the ListItemTrailing component
+ */
+export type ListItemTrailingProps = {
+    /**
+     * The trailing content (icons, switches, values, etc.)
+     */
+    children: React.ReactNode;
+} & Omit<StyledViewProps, 'children'>;
+/**
+ * Props for the ListItemTruncate component
+ * Used to truncate text that should when ListItemDescription or ListItemTitle contain custom content
+ */
+export type ListItemTruncateProps = {
+    /**
+     * The text content to truncate
+     */
+    children: string;
+    /**
+     * The variant determines typography and color styling.
+     * Use 'title' inside ListItemTitle and 'description' inside ListItemDescription.
+     * @default 'description'
+     */
+    variant?: 'title' | 'description';
+} & Omit<StyledTextProps, 'children'>;
+/**
+ * Props for the ListItemSpot component
+ * Spot adapter that inherits disabled state from parent ListItem
+ */
+export type ListItemSpotProps = DiscriminatedSpotProps & Omit<StyledViewProps, 'children'>;
+/**
+ * Props for the ListItemIcon component
+ */
+export type ListItemIconProps = {
+    /**
+     * The icon component to render
+     */
+    icon: React.ComponentType<any>;
+    /**
+     * Optional color override. If not provided, uses theme color with disabled state handling.
+     */
+    color?: LumenTextStyle['color'];
+} & Omit<StyledViewProps, 'children'>;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/ListItem/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,eAAe,EAChB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEjD;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;CAC3C,GAAG,IAAI,CAAC,oBAAoB,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;AAExD;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;CACnC,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,sBAAsB,GACpD,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEpC;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;CACjC,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC"}

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

@@ -28,7 +28,7 @@ type StatusSpotProps = {
      */
     appearance: Exclude<SpotAppearance, 'icon' | 'number'>;
 };
-type DiscriminatedSpotProps = IconSpotProps | NumberSpotProps | StatusSpotProps;
+export type DiscriminatedSpotProps = IconSpotProps | NumberSpotProps | StatusSpotProps;
 export type SpotSize = 48 | 56 | 72;
 export type SpotProps = {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spot/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,MAAM,MAAM,cAAc,GACtB,MAAM,GACN,WAAW,GACX,OAAO,GACP,OAAO,GACP,SAAS,GACT,MAAM,GACN,QAAQ,GACR,QAAQ,CAAC;AAEb,KAAK,aAAa,GAAG;IACnB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;CACtC,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB;;OAEG;IACH,UAAU,EAAE,QAAQ,CAAC;IACrB;;OAEG;IACH,MAAM,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC/C,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC,cAAc,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAC;CACxD,CAAC;AAEF,KAAK,sBAAsB,GAAG,aAAa,GAAG,eAAe,GAAG,eAAe,CAAC;AAChF,MAAM,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEpC,MAAM,MAAM,SAAS,GAAG;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,GAAG,sBAAsB,GACxB,eAAe,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spot/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,MAAM,MAAM,cAAc,GACtB,MAAM,GACN,WAAW,GACX,OAAO,GACP,OAAO,GACP,SAAS,GACT,MAAM,GACN,QAAQ,GACR,QAAQ,CAAC;AAEb,KAAK,aAAa,GAAG;IACnB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;CACtC,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB;;OAEG;IACH,UAAU,EAAE,QAAQ,CAAC;IACrB;;OAEG;IACH,MAAM,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC/C,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC,cAAc,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAC;CACxD,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAC9B,aAAa,GACb,eAAe,GACf,eAAe,CAAC;AAEpB,MAAM,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEpC,MAAM,MAAM,SAAS,GAAG;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,GAAG,sBAAsB,GACxB,eAAe,CAAC"}

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

@@ -1,8 +1,7 @@
 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';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,0BAA0B,CAAC;AACzC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,wBAAwB,CAAC;AACvC,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC"}

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

@@ -1,7 +1,6 @@
 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/dist/src/lib/utils/react/{extract-text-from-children.d.ts → extractTextFromChildren.d.ts}

@@ -5,4 +5,4 @@ import React from 'react';
  * ignoring complex React components that don't have text children.
  */
 export declare function extractTextFromChildren(children: React.ReactNode, textComponentType?: React.ComponentType<any>): string;
-//# sourceMappingURL=extract-text-from-children.d.ts.map
+//# sourceMappingURL=extractTextFromChildren.d.ts.map

package/dist/src/lib/utils/react/extractTextFromChildren.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extractTextFromChildren.d.ts","sourceRoot":"","sources":["../../../../../src/lib/utils/react/extractTextFromChildren.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;GAIG;AACH,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,iBAAiB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,GAC3C,MAAM,CAoBR"}

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

@@ -1,2 +1,2 @@
-export * from './extract-text-from-children';
+export * from './extractTextFromChildren';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/lib/utils/react/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/utils/react/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/utils/react/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC"}

package/dist/src/lib/utils/react/index.js

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

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

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

package/dist/src/lib/utils/startTransition/index.d.ts.map

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

package/dist/src/lib/utils/startTransition/index.js

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

package/dist/src/lib/utils/{start-transition/start-transition.d.ts → startTransition/startTransition.d.ts}

@@ -1,2 +1,2 @@
 export declare const startTransition: (callback: React.TransitionFunction) => void;
-//# sourceMappingURL=start-transition.d.ts.map
+//# sourceMappingURL=startTransition.d.ts.map

package/dist/src/lib/utils/startTransition/startTransition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"startTransition.d.ts","sourceRoot":"","sources":["../../../../../src/lib/utils/startTransition/startTransition.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,GAAI,UAAU,KAAK,CAAC,kBAAkB,KAAG,IAQpE,CAAC"}

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

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

package/dist/src/lib/utils/useControllableState/index.d.ts.map

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

package/dist/src/lib/utils/useControllableState/index.js

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

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

@@ -12,4 +12,4 @@ export declare function useControllableState<T>({ prop, defaultProp, onChange, s
     transition?: boolean;
 }): [T, React.Dispatch<React.SetStateAction<T>>];
 export {};
-//# sourceMappingURL=use-controllable-state.d.ts.map
+//# sourceMappingURL=useControllableState.d.ts.map

package/dist/src/lib/utils/useControllableState/useControllableState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControllableState.d.ts","sourceRoot":"","sources":["../../../../../src/lib/utils/useControllableState/useControllableState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,KAAK,QAAQ,CAAC,CAAC,IACX,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC,GACnB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAI5C;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,EACtC,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,QAAsB,EACtB,UAAU,GACX,EAAE;IACD,IAAI,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC;IACrB,WAAW,EAAE,CAAC,CAAC;IACf,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IACvB,QAAQ,CAAC,EAAE,WAAW,GAAG,kBAAkB,CAAC;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAsC/C"}

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

@@ -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';
 const emptyCallbackFn = (_) => _();
 /**
  * Allow to use a controlled or uncontrolled state.

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

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

package/dist/src/lib/utils/useEvent/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/utils/useEvent/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC"}

package/dist/src/lib/utils/useEvent/index.js

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

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

@@ -1,4 +1,4 @@
 type AnyFunction = (...args: any[]) => any;
 export declare function useEvent<T extends AnyFunction>(callback?: T): T;
 export {};
-//# sourceMappingURL=use-event.d.ts.map
+//# sourceMappingURL=useEvent.d.ts.map

package/dist/src/lib/utils/useEvent/useEvent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEvent.d.ts","sourceRoot":"","sources":["../../../../../src/lib/utils/useEvent/useEvent.ts"],"names":[],"mappings":"AAEA,KAAK,WAAW,GAAG,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC;AAE3C,wBAAgB,QAAQ,CAAC,CAAC,SAAS,WAAW,EAAE,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,CAE/D"}

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

@@ -1,4 +1,4 @@
-import { useGet } from './use-get';
+import { useGet } from './useGet';
 export function useEvent(callback) {
     return useGet(callback, defaultValue, true);
 }

package/dist/src/lib/utils/{use-event/use-get.d.ts → useEvent/useGet.d.ts}

@@ -2,4 +2,4 @@
  * keeps a reference to the current value easily
  */
 export declare function useGet<A>(currentValue: A, initialValue?: any, forwardToFunction?: boolean): () => A;
-//# sourceMappingURL=use-get.d.ts.map
+//# sourceMappingURL=useGet.d.ts.map

package/dist/src/lib/utils/useEvent/useGet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGet.d.ts","sourceRoot":"","sources":["../../../../../src/lib/utils/useEvent/useGet.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,wBAAgB,MAAM,CAAC,CAAC,EACtB,YAAY,EAAE,CAAC,EACf,YAAY,CAAC,EAAE,GAAG,EAClB,iBAAiB,CAAC,EAAE,OAAO,GAC1B,MAAM,CAAC,CAYT"}

package/dist/src/styles/provider/LumenStyleSheetProvider.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { ColorSchemeName } from 'react-native';
 import { type LumenStyleSheetTheme } from '../types';
-import { LumenStyleSheetProviderProps } from './types';
+import { type LumenStyleSheetProviderProps } from './types';
 export type LumenStyleSheetContextValue = {
     theme: LumenStyleSheetTheme;
     colorScheme: ColorSchemeName;

package/dist/src/styles/provider/LumenStyleSheetProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LumenStyleSheetProvider.d.ts","sourceRoot":"","sources":["../../../../src/styles/provider/LumenStyleSheetProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAsB,MAAM,OAAO,CAAC;AAC/C,OAAO,EAEL,eAAe,EAEhB,MAAM,cAAc,CAAC;AAItB,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAMvD,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,EAAE,oBAAoB,CAAC;IAC5B,WAAW,EAAE,eAAe,CAAC;IAC7B,cAAc,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAClD,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAKF,eAAO,MAAM,yBAAyB;;;uGAA6B,CAAC;AAEpE,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CA+CpE,CAAC"}
+{"version":3,"file":"LumenStyleSheetProvider.d.ts","sourceRoot":"","sources":["../../../../src/styles/provider/LumenStyleSheetProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAsB,MAAM,OAAO,CAAC;AAC/C,OAAO,EAEL,eAAe,EAEhB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EAAE,KAAK,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAM5D,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,EAAE,oBAAoB,CAAC;IAC5B,WAAW,EAAE,eAAe,CAAC;IAC7B,cAAc,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAClD,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAKF,eAAO,MAAM,yBAAyB;;;uGAA6B,CAAC;AAEpE,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CA+CpE,CAAC"}

package/dist/src/styles/provider/LumenStyleSheetProvider.js

@@ -2,8 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
 import { useEffect, useMemo } from 'react';
 import { Appearance, useColorScheme as useReactNativeColorScheme, } from 'react-native';
-import { RuntimeConstants } from '../../lib/utils';
-import { useControllableState } from '../../lib/utils/use-controllable-state/use-controllable-state';
+import { RuntimeConstants, useControllableState } from '../../lib/utils';
 import { createStylesheetTheme } from '../theme/createStylesheetTheme';
 const DARK_MODE = 'dark';
 const LIGHT_MODE = 'light';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.0.46",
+  "version": "0.0.47",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",
@@ -27,13 +27,17 @@
     "./styles": "./src/styles/index.ts"
   },
   "dependencies": {
-    "@ledgerhq/lumen-utils-shared": "0.0.12",
+    "@ledgerhq/lumen-utils-shared": "0.0.13",
     "i18next": "^23.7.0",
     "react-i18next": "^14.0.0"
   },
   "peerDependencies": {
+    "@gorhom/bottom-sheet": "^5.0.0",
+    "@ledgerhq/lumen-design-core": "0.0.37",
     "react": "~18.3.1",
     "react-native": "~0.77.3",
+    "react-native-reanimated": "^3.0.0",
+    "react-native-safe-area-context": "^4.0.0 || ^5.0.0",
     "react-native-svg": "^15.0.0"
   },
   "nx": {

package/src/lib/Components/Checkbox/Checkbox.mdx

@@ -1,6 +1,7 @@
 import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as CheckboxStories from './Checkbox.stories';
 import { Checkbox } from './Checkbox';
+import { Box } from '../Utility';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
 import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
 import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';

package/src/lib/Components/Icon/Icon.tsx

@@ -20,8 +20,7 @@ const useStyles = (
   color: IconProps['color'],
 ) => {
   const { theme } = useTheme();
-  const resolvedStyle = useResolveTextStyle(lx || {});
-  const resolvedColor = useResolveTextStyle({ color });
+  const resolvedStyle = useResolveTextStyle({ ...(lx || {}), color });
 
   return useMemo(() => {
     return {
@@ -31,10 +30,9 @@ const useStyles = (
         height: theme.icon.height[iconSizeMap[size]],
         strokeWidth: theme.icon.borderWidth[iconSizeMap[size]],
       },
-      color:
-        resolvedColor.color || resolvedStyle.color || theme.colors.text.base,
+      color: resolvedStyle.color || theme.colors.text.base,
     };
-  }, [size, theme, resolvedStyle, resolvedColor.color]);
+  }, [size, theme, resolvedStyle]);
 };
 
 export const Icon = forwardRef<Svg, IconProps>(

package/src/lib/Components/Icon/createIcon.ts

@@ -1,6 +1,6 @@
+import { toPascalCase } from '@ledgerhq/lumen-utils-shared';
 import React, { forwardRef } from 'react';
 import { Svg, SvgProps } from 'react-native-svg';
-import { toPascalCase } from '../../utils';
 import { Icon } from './Icon';
 import { IconProps } from './types';