@ledgerhq/lumen-ui-rnative 0.0.46 → 0.0.48

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

@@ -1 +1 @@
-{"version":3,"file":"Tile.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tile/Tile.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAavE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAgC3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,IAAI,EAAE,KAuBlB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAwBjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAuBjC,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,KAmC5C,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAwC5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAoB9B,CAAC"}
+{"version":3,"file":"Tile.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tile/Tile.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAIvE,OAAO,EACL,IAAI,EAKL,MAAM,QAAQ,CAAC;AAEhB,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,KAyBlB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAoC9B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KA+BjC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA4C5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KA0B9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KA+ChC,CAAC"}

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

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Settings, Plus, User, Wallet, Cart, Apps, Chart1, } from '../../Symbols';
-import { Spot } from '../Spot/Spot';
+import { Settings, Plus, User, Apps } from '../../Symbols';
 import { Tag } from '../Tag/Tag';
-import { Box } from '../Utility';
-import { Tile } from './Tile';
+import { Box, Text } from '../Utility';
+import { Tile, TileSpot, TileContent, TileTitle, TileDescription, } from './Tile';
 const meta = {
     component: Tile,
     title: 'Containment/Tile',
@@ -16,117 +15,67 @@ const meta = {
             },
         },
     },
-    argTypes: {
-        leadingContent: {
-            control: 'select',
-            options: ['None', 'Settings', 'Plus'],
-            mapping: {
-                None: undefined,
-                Settings: _jsx(Spot, { appearance: 'icon', icon: Settings }),
-                Plus: _jsx(Spot, { appearance: 'icon', icon: Plus }),
-            },
-        },
-        trailingContent: {
-            control: 'select',
-            options: ['None', 'Tag', 'Text'],
-            mapping: {
-                None: undefined,
-                Tag: _jsx(Tag, { label: 'Tag', appearance: 'base' }),
-                Text: _jsx("span", { children: "Text" }),
-            },
-        },
-    },
 };
 export default meta;
 export const Base = {
-    args: {
-        title: 'Item with Spot and Description',
-        description: 'Additional information',
-        leadingContent: _jsx(Spot, { appearance: 'icon', icon: Settings }),
-        lx: { maxWidth: 's256' },
-    },
+    render: () => (_jsxs(Tile, { lx: { maxWidth: 's112' }, children: [_jsx(TileSpot, { appearance: 'icon', icon: Settings }), _jsxs(TileContent, { children: [_jsx(TileTitle, { children: "Item with Spot and Description" }), _jsx(TileDescription, { children: "Additional information" })] })] })),
     parameters: {
         docs: {
             source: {
                 code: `
-<Tile
-  title="Item with Spot and Description"
-  description="Additional information"
-  leadingContent={<Spot appearance="icon" icon={Settings} />}
-  onLongPress={() => console.log('Secondary action')}
-  onPress={() => console.log('Primary action')}
-  lx={{ maxWidth: 's256' }}
-/>
+<Tile lx={{ maxWidth: 's112' }}>
+  <TileSpot appearance="icon" icon={Settings} />
+  <TileContent>
+    <TileTitle>Item with Spot and Description</TileTitle>
+    <TileDescription>Additional information</TileDescription>
+  </TileContent>
+</Tile>
 `,
             },
         },
     },
 };
-export const WithTrailingContent = {
-    args: {
-        title: 'Item with Trailing Content',
-        description: 'Additional information',
-        leadingContent: _jsx(Spot, { appearance: 'icon', icon: Settings }),
-        trailingContent: _jsx(Tag, { label: 'New', appearance: 'base' }),
-        lx: { maxWidth: 's256' },
-    },
-    parameters: {
-        docs: {
-            source: {
-                code: `
-<Tile
-  title="Item with Trailing Content"
-  description="Additional information"
-  leadingContent={<Spot appearance="icon" icon={Settings} />}
-  trailingContent={<Tag label="New" appearance="base" />}
-  onLongPress={() => console.log('Long press - secondary action')}
-  lx={{ maxWidth: 's256' }}
-/>
-`,
-            },
-        },
-    },
+export const VariantsShowcase = {
+    render: () => (_jsxs(Box, { lx: { flexDirection: 'column', gap: 's16' }, children: [_jsxs(Tile, { lx: { maxWidth: 's176' }, children: [_jsx(TileSpot, { appearance: 'icon', icon: User }), _jsxs(TileContent, { children: [_jsx(TileTitle, { children: "User" }), _jsx(TileDescription, { children: "With description" })] })] }), _jsxs(Tile, { lx: { maxWidth: 's176' }, children: [_jsx(TileSpot, { appearance: 'icon', icon: Plus }), _jsx(TileContent, { children: _jsx(TileTitle, { children: "Without Description" }) })] }), _jsxs(Tile, { lx: { maxWidth: 's176' }, children: [_jsx(TileSpot, { appearance: 'icon', icon: Settings }), _jsxs(TileContent, { children: [_jsx(TileTitle, { children: "With Trailing Content" }), _jsx(TileDescription, { children: "Additional information" })] }), _jsx(Tag, { label: 'Custom', appearance: 'base' })] }), _jsxs(Tile, { lx: { maxWidth: 's176' }, children: [_jsx(TileSpot, { appearance: 'icon', icon: Settings }), _jsxs(TileContent, { children: [_jsx(TileTitle, { children: "With Trailing Content" }), _jsx(TileDescription, { children: "Additional information" })] }), _jsx(Text, { typography: 'body2SemiBold', lx: { color: 'success' }, children: "+7.87%" })] })] })),
 };
 export const WithSecondaryAction = {
-    args: {
-        title: 'Item with secondary action',
-        description: 'LongPress to trigger secondary action',
-        leadingContent: _jsx(Spot, { appearance: 'icon', icon: Settings }),
-        onLongPress: () => alert('Long press - secondary action'),
-        lx: { maxWidth: 's256' },
-    },
+    render: () => (_jsxs(Tile, { onLongPress: () => alert('Long press - secondary action triggered!'), lx: { maxWidth: 's176' }, children: [_jsx(TileSpot, { appearance: 'icon', icon: Settings }), _jsxs(TileContent, { children: [_jsx(TileTitle, { children: "Long Press Me" }), _jsx(TileDescription, { children: "Try long pressing this tile" })] })] })),
     parameters: {
         docs: {
             source: {
                 code: `
 <Tile
-  title="Item secondary action"
-  description="Additional information"
-  onLongPress={() => // do stuff}
-  leadingContent={<Spot appearance="icon" icon={Settings} />}
-  lx={{ maxWidth: 's256' }}
-/>
+  onLongPress={() => alert('Long press - secondary action triggered!')}
+  lx={{ maxWidth: 's160' }}
+>
+  <TileSpot appearance="icon" icon={Settings} />
+  <TileContent>
+    <TileTitle>Long Press Me</TileTitle>
+    <TileDescription>Try long pressing this tile</TileDescription>
+  </TileContent>
+</Tile>
 `,
             },
         },
     },
 };
-export const LeadingContentVariantsShowcase = {
-    render: () => (_jsxs(Box, { lx: { flexDirection: 'row' }, children: [_jsx(Tile, { title: 'User', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: User }), lx: { maxWidth: 's128' } }), _jsx(Tile, { title: 'Wallet', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Wallet }), lx: { maxWidth: 's128' } }), _jsx(Tile, { title: 'Cart', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Cart }), lx: { maxWidth: 's128' } }), _jsx(Tile, { title: 'Apps', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps }), lx: { maxWidth: 's128' } }), _jsx(Tile, { title: 'Chart', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Chart1 }), lx: { maxWidth: 's128' } })] })),
-};
 export const HorizontalList = {
     render: () => (_jsxs(Box, { lx: { flexDirection: 'column', gap: 's16' }, children: [_jsx(Box, { lx: {
                     position: 'relative',
                     flexDirection: 'row',
                     width: 's480',
                     backgroundColor: 'base',
-                }, children: Array.from({ length: 12 }).map((_, i) => (_jsx(Tile, { title: `Item ${i + 1}`, description: `Description ${i + 1}`, leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps }) }, `list-1-${i}`))) }), _jsx(Box, { lx: {
+                }, children: Array.from({ length: 3 }).map((_, i) => (_jsxs(Tile, { children: [_jsx(TileSpot, { appearance: 'icon', icon: Apps }), _jsxs(TileContent, { children: [_jsxs(TileTitle, { children: ["Item ", i + 1] }), _jsxs(TileDescription, { children: ["Description ", i + 1] })] })] }, `list-1-${i}`))) }), _jsx(Box, { lx: {
                     flexDirection: 'row',
                     width: 's480',
                     position: 'relative',
                     backgroundColor: 'base',
-                }, children: Array.from({ length: 8 }).map((_, i) => (_jsx(Tile, { title: 'Long Title that should truncate appropriately', description: 'Long description that should truncate appropriately', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps }), lx: { width: 's176', flexShrink: 0 } }, `list-2-${i}`))) })] })),
+                    overflow: 'scroll',
+                }, children: Array.from({ length: 5 }).map((_, i) => (_jsxs(Tile, { lx: { width: 's128', flexShrink: 0 }, children: [_jsx(TileSpot, { appearance: 'icon', icon: Apps }), _jsxs(TileContent, { children: [_jsxs(TileTitle, { children: ["Item ", i + 1] }), _jsx(TileDescription, { children: "Long description that should truncate appropriately" })] })] }, `list-2-${i}`))) })] })),
 };
 export const ResponsiveLayout = {
-    render: () => (_jsxs(Box, { lx: { width: 'full', flexDirection: 'column', gap: 's16' }, children: [_jsx(Box, { children: _jsx(Tile, { title: 'Item fill width', description: 'Description fill width', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps }) }) }), _jsx(Box, { lx: { alignItems: 'center', justifyContent: 'center' }, children: _jsx(Tile, { lx: { width: 's224' }, title: 'Long Item with fixed width', description: 'lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Plus }) }) })] })),
+    render: () => (_jsxs(Box, { lx: { width: 'full', flexDirection: 'column', gap: 's16' }, children: [_jsx(Box, { children: _jsxs(Tile, { children: [_jsx(TileSpot, { appearance: 'icon', icon: Apps }), _jsxs(TileContent, { children: [_jsx(TileTitle, { children: "Item fill width" }), _jsx(TileDescription, { children: "Description fill width" })] })] }) }), _jsx(Box, { lx: { alignItems: 'center', justifyContent: 'center' }, children: _jsxs(Tile, { lx: { width: 's224' }, children: [_jsx(TileSpot, { appearance: 'icon', icon: Plus }), _jsxs(TileContent, { children: [_jsx(TileTitle, { children: "Long Item with fixed width" }), _jsx(TileDescription, { children: "lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos." })] })] }) })] })),
+};
+export const AppearanceShowcase = {
+    render: () => (_jsxs(Box, { lx: { flexDirection: 'column', gap: 's24' }, children: [_jsxs(Box, { children: [_jsx(Box, { lx: { marginBottom: 's8' }, children: _jsx(Text, { typography: 'body2SemiBold', children: "No Background" }) }), _jsxs(Box, { lx: { flexDirection: 'row', gap: 's16' }, children: [_jsxs(Tile, { appearance: 'no-background', lx: { width: 's112' }, children: [_jsx(TileSpot, { appearance: 'icon', icon: Settings }), _jsxs(TileContent, { children: [_jsx(TileTitle, { children: "Press me" }), _jsx(TileDescription, { children: "Press state" })] })] }), _jsxs(Tile, { appearance: 'no-background', disabled: true, lx: { width: 's112' }, children: [_jsx(TileSpot, { appearance: 'icon', icon: Settings }), _jsxs(TileContent, { children: [_jsx(TileTitle, { children: "Disabled" }), _jsx(TileDescription, { children: "Disabled state" })] })] })] })] }), _jsxs(Box, { children: [_jsx(Box, { lx: { marginBottom: 's8' }, children: _jsx(Text, { typography: 'body2SemiBold', children: "Card" }) }), _jsxs(Box, { lx: { flexDirection: 'row', gap: 's16' }, children: [_jsxs(Tile, { appearance: 'card', lx: { width: 's112' }, children: [_jsx(TileSpot, { appearance: 'icon', icon: User }), _jsxs(TileContent, { children: [_jsx(TileTitle, { children: "Press me" }), _jsx(TileDescription, { children: "Press state" })] })] }), _jsxs(Tile, { appearance: 'card', disabled: true, lx: { width: 's112' }, children: [_jsx(TileSpot, { appearance: 'icon', icon: User }), _jsxs(TileContent, { children: [_jsx(TileTitle, { children: "Disabled" }), _jsx(TileDescription, { children: "Disabled state" })] })] })] })] })] })),
 };

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

@@ -1,3 +1,3 @@
-export * from './Tile';
+export { Tile, TileSpot, TileContent, TileTitle, TileDescription, } from './Tile';
 export * from './types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tile/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tile/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,SAAS,EACT,eAAe,GAChB,MAAM,QAAQ,CAAC;AAChB,cAAc,SAAS,CAAC"}

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

@@ -1,2 +1,2 @@
-export * from './Tile';
+export { Tile, TileSpot, TileContent, TileTitle, TileDescription, } from './Tile';
 export * from './types';

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

@@ -1,24 +1,10 @@
 import { ReactNode } from 'react';
-import { StyledPressableProps } from '../../../styles';
+import { StyledPressableProps, StyledTextProps, StyledViewProps } from '../../../styles';
+import { DiscriminatedSpotProps } from '../Spot/types';
+export type TileContextValue = {
+    disabled: boolean;
+};
 export type TileProps = {
-    /**
-     * Custom content to display at the top (leading area) of the tile.
-     * Accepts ReactNode such as <Spot appearance="icon" icon={Settings} />
-     */
-    leadingContent: ReactNode;
-    /**
-     * The title of the tile.
-     */
-    title: string;
-    /**
-     * The description of the tile.
-     */
-    description?: string;
-    /**
-     * Custom content to display at the bottom (trailing area) of the tile.
-     * Accepts ReactNode such as <Tag label="New" appearance="base" />
-     */
-    trailingContent?: ReactNode;
     /**
      * The visual style of the tile.
      * - `no-background`: Transparent background with pressed state
@@ -41,5 +27,29 @@ export type TileProps = {
      * Can be used to perform secondary actions.
      */
     onLongPress?: StyledPressableProps['onLongPress'];
+    /**
+     * The children to display inside the tile.
+     */
+    children: ReactNode;
 } & Omit<StyledPressableProps, 'onPress' | 'onLongPress' | 'disabled'>;
+export type TileSpotProps = DiscriminatedSpotProps;
+export type TileContentProps = {
+    /**
+     * The children to display inside the tile content area.
+     * Typically contains TileTitle and TileDescription.
+     */
+    children: ReactNode;
+} & StyledViewProps;
+export type TileTitleProps = {
+    /**
+     * The title text to display.
+     */
+    children: ReactNode;
+} & StyledViewProps;
+export type TileDescriptionProps = {
+    /**
+     * The description text to display.
+     */
+    children: ReactNode;
+} & StyledTextProps;
 //# 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,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEvD,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,oBAAoB,CAAC,SAAS,CAAC,CAAC;IAC1C;;;OAGG;IACH,WAAW,CAAC,EAAE,oBAAoB,CAAC,aAAa,CAAC,CAAC;CACnD,GAAG,IAAI,CAAC,oBAAoB,EAAE,SAAS,GAAG,aAAa,GAAG,UAAU,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,EACL,oBAAoB,EACpB,eAAe,EACf,eAAe,EAChB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,eAAe,GAAG,MAAM,CAAC;IACtC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;IAC1C;;;OAGG;IACH,WAAW,CAAC,EAAE,oBAAoB,CAAC,aAAa,CAAC,CAAC;IAClD;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,oBAAoB,EAAE,SAAS,GAAG,aAAa,GAAG,UAAU,CAAC,CAAC;AAEvE,MAAM,MAAM,aAAa,GAAG,sBAAsB,CAAC;AAEnD,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,eAAe,CAAC;AAEpB,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,eAAe,CAAC;AAEpB,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,eAAe,CAAC"}

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

@@ -5,6 +5,7 @@ export * from './BottomSheet';
 export * from './Button';
 export * from './CardButton';
 export * from './Checkbox';
+export * from './Divider';
 export * from './IconButton';
 export * from './InteractiveIcon';
 export * from './Link';

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,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,eAAe,CAAC;AAC9B,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"}
+{"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,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,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

@@ -5,6 +5,7 @@ export * from './BottomSheet';
 export * from './Button';
 export * from './CardButton';
 export * from './Checkbox';
+export * from './Divider';
 export * from './IconButton';
 export * from './InteractiveIcon';
 export * from './Link';

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.48",
   "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.14",
     "i18next": "^23.7.0",
     "react-i18next": "^14.0.0"
   },
   "peerDependencies": {
+    "@gorhom/bottom-sheet": "^5.0.0",
+    "@ledgerhq/lumen-design-core": "0.0.38",
     "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';