@ledgerhq/lumen-ui-rnative 0.1.4 → 0.1.6

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

@@ -1,137 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { useTheme } from '../../../styles';
-import * as Icons from '../../Symbols';
-import { SearchInput } from '../SearchInput/SearchInput';
-import { Box, Text, Pressable } from '../Utility';
-const meta = {
-    title: 'Symbols/Interface Icons',
-};
-export default meta;
-const sizes = [12, 16, 20, 24, 32, 40, 48, 56];
-const iconNames = Object.keys(Icons);
-const IconCard = ({ name, size = 24, color }) => {
-    const { theme } = useTheme();
-    const [copied, setCopied] = useState(false);
-    const IconComponent = Icons[name];
-    const iconColor = color ?? theme.colors.text.base;
-    const handleClick = async () => {
-        try {
-            await navigator.clipboard.writeText(name);
-            setCopied(true);
-            setTimeout(() => setCopied(false), 1500);
-        }
-        catch (err) {
-            console.error('Failed to copy:', err);
-        }
-    };
-    return (_jsxs(Pressable, { onPress: handleClick, lx: {
-            position: 'relative',
-            flexDirection: 'column',
-            alignItems: 'center',
-            gap: 's8',
-            borderRadius: 'sm',
-            padding: 's16',
-            width: 's96',
-        }, style: ({ pressed }) => ({
-            backgroundColor: pressed ? theme.colors.bg.mutedPressed : 'transparent',
-        }), children: [_jsx(IconComponent, { size: size, style: { color: iconColor } }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: name }), copied && (_jsx(Box, { lx: {
-                    position: 'absolute',
-                    top: 's0',
-                    left: 's0',
-                    right: 's0',
-                    bottom: 's0',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    borderRadius: 'sm',
-                    backgroundColor: 'muted',
-                }, children: _jsx(Text, { typography: 'body4', lx: { color: 'onAccent' }, children: "Copied!" }) }))] }, name));
-};
-export const Icon = {
-    args: {
-        size: 24,
-        name: 'Home',
-    },
-    argTypes: {
-        size: {
-            control: 'select',
-            options: sizes,
-            description: 'The size of the icon in pixels',
-        },
-        name: {
-            control: 'select',
-            options: iconNames,
-            description: 'The name of the icon to display',
-        },
-        color: {
-            control: 'color',
-            description: 'The color of the icon',
-        },
-    },
-    render: (args) => {
-        const { theme } = useTheme();
-        const IconComponent = Icons[args.name];
-        const iconColor = args.color ?? theme.colors.text.base;
-        return (_jsx(Box, { lx: { padding: 's8' }, children: _jsxs(Box, { lx: { flexDirection: 'column', alignItems: 'center', gap: 's4' }, children: [_jsx(IconComponent, { size: args.size, style: { color: iconColor } }), _jsx(Text, { lx: { color: 'base' }, children: args.name })] }) }));
-    },
-    parameters: {
-        docs: {
-            source: {
-                code: `
-        <Information size={24} style={{ color: theme.colors.text.base }} />
-      `,
-            },
-        },
-    },
-};
-export const IconSizes = {
-    render: () => {
-        const { theme } = useTheme();
-        return (_jsx(Box, { lx: { flexDirection: 'column', gap: 's16' }, children: sizes.map((size) => (_jsxs(Box, { lx: { flexDirection: 'column' }, children: [_jsxs(Text, { typography: 'heading4', lx: { marginBottom: 's16' }, children: ["Size ", size, "px"] }), _jsx(Box, { lx: {
-                            flexDirection: 'row',
-                            flexWrap: 'wrap',
-                            gap: 's8',
-                            borderRadius: 'sm',
-                            padding: 's8',
-                        }, style: {
-                            borderWidth: 1,
-                            borderColor: theme.colors.border.mutedSubtle,
-                        }, children: [
-                            'Home',
-                            'Settings',
-                            'Heart',
-                            'Star',
-                            'ArrowDown',
-                            'ArrowLeft',
-                            'ArrowRight',
-                            'ArrowUp',
-                        ].map((iconName) => (_jsx(IconCard, { name: iconName, size: size }, iconName))) })] }, size))) }));
-    },
-};
-export const Gallery = {
-    parameters: {
-        layout: 'fullscreen',
-    },
-    render: () => {
-        const { theme } = useTheme();
-        const [searchTerm, setSearchTerm] = useState('');
-        // Filter icons based on search term
-        const filteredIcons = Object.entries(Icons).filter(([name]) => name.toLowerCase().includes(searchTerm.toLowerCase()));
-        return (_jsxs(Box, { lx: {
-                width: 'full',
-                flexDirection: 'column',
-                alignItems: 'stretch',
-                padding: 's8',
-            }, children: [_jsxs(Box, { lx: { marginBottom: 's32' }, children: [_jsx(Box, { lx: { marginBottom: 's8', maxWidth: 's320' }, children: _jsx(SearchInput, { placeholder: 'Search icons...', value: searchTerm, onChangeText: setSearchTerm }) }), _jsx(Box, { lx: { marginBottom: 's4' }, children: _jsxs(Text, { typography: 'body3', lx: { marginLeft: 's8', color: 'muted' }, children: [filteredIcons.length, " of ", Object.keys(Icons).length, " icons", searchTerm && ` matching "${searchTerm}"`] }) })] }), _jsx(Box, { lx: { flexDirection: 'row', flexWrap: 'wrap', gap: 's8' }, children: filteredIcons.map(([name]) => (_jsx(IconCard, { name: name }, name))) }), filteredIcons.length === 0 && searchTerm && (_jsxs(Box, { lx: {
-                        flexDirection: 'column',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        paddingVertical: 's16',
-                    }, children: [_jsxs(Text, { typography: 'body2', lx: { color: 'muted' }, children: ["No icons found matching \"", searchTerm, "\""] }), _jsx(Pressable, { onPress: () => setSearchTerm(''), style: ({ pressed }) => ({
-                                marginTop: 16,
-                                color: pressed
-                                    ? theme.colors.text.interactivePressed
-                                    : theme.colors.text.interactive,
-                            }), children: _jsx(Text, { typography: 'body2', lx: { color: 'interactive' }, children: "Clear search" }) })] }))] }));
-    },
-};

package/dist/src/lib/Components/IconButton/IconButton.stories.d.ts

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"IconButton.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/IconButton/IconButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAU1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAyCjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC,eAAO,MAAM,IAAI,EAAE,KAOlB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAmBhC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAyB3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAoB5B,CAAC"}

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

@@ -1,74 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Close, Heart, Plus, Settings, Share } from '../../Symbols';
-import { Box } from '../Utility';
-import { IconButton } from './IconButton';
-const iconMap = {
-    Heart,
-    Plus,
-    Settings,
-    Share,
-    Close,
-};
-const meta = {
-    title: 'Action/IconButton',
-    component: IconButton,
-    argTypes: {
-        icon: {
-            options: Object.keys(iconMap),
-            mapping: iconMap,
-            control: {
-                type: 'select',
-                labels: {
-                    Heart: 'Heart',
-                    Plus: 'Plus',
-                    Settings: 'Settings',
-                    Share: 'Share',
-                    Close: 'Close',
-                },
-            },
-        },
-        accessibilityLabel: {
-            control: 'text',
-            description: 'Accessibility label for screen readers',
-        },
-        appearance: {
-            control: 'select',
-            options: [
-                'base',
-                'gray',
-                'accent',
-                'transparent',
-                'no-background',
-                'red',
-            ],
-        },
-        size: {
-            control: 'select',
-            options: ['xs', 'sm', 'md', 'lg'],
-        },
-        disabled: {
-            control: 'boolean',
-        },
-    },
-};
-export default meta;
-export const Base = {
-    args: {
-        accessibilityLabel: 'Settings',
-        icon: Settings,
-        size: 'md',
-        appearance: 'base',
-    },
-};
-export const AppearanceShowcase = {
-    render: () => (_jsxs(Box, { lx: { flexDirection: 'row', gap: 's8' }, children: [_jsx(IconButton, { accessibilityLabel: 'Add', icon: Plus, appearance: 'accent' }), _jsx(IconButton, { accessibilityLabel: 'Add', icon: Plus, appearance: 'base' }), _jsx(IconButton, { accessibilityLabel: 'Add', icon: Plus, appearance: 'gray' }), _jsx(IconButton, { accessibilityLabel: 'Add', icon: Plus, appearance: 'transparent' }), _jsx(IconButton, { accessibilityLabel: 'Add', icon: Plus, appearance: 'no-background' }), _jsx(IconButton, { accessibilityLabel: 'Add', icon: Plus, appearance: 'red' })] })),
-};
-export const SizesShowcase = {
-    render: () => (_jsxs(Box, { lx: { flexDirection: 'row', alignItems: 'center', gap: 's8' }, children: [_jsx(IconButton, { accessibilityLabel: 'Add to favorites', icon: Heart, size: 'xs' }), _jsx(IconButton, { accessibilityLabel: 'Add to favorites', icon: Heart, size: 'sm' }), _jsx(IconButton, { accessibilityLabel: 'Add to favorites', icon: Heart, size: 'md' }), _jsx(IconButton, { accessibilityLabel: 'Add to favorites', icon: Heart, size: 'lg' })] })),
-};
-export const StatesShowcase = {
-    args: {
-        appearance: 'base',
-    },
-    render: ({ appearance }) => (_jsxs(Box, { lx: { flexDirection: 'row', alignItems: 'flex-start', gap: 's8' }, children: [_jsx(IconButton, { accessibilityLabel: 'Settings', appearance: appearance, icon: Settings, disabled: true }), _jsx(IconButton, { accessibilityLabel: 'Settings', appearance: appearance, icon: Settings, loading: true })] })),
-};

package/dist/src/lib/Components/InteractiveIcon/InteractiveIcon.stories.d.ts

@@ -1,11 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-native';
-import { InteractiveIcon } from './InteractiveIcon';
-declare const meta: Meta<typeof InteractiveIcon>;
-export default meta;
-type Story = StoryObj<typeof InteractiveIcon>;
-export declare const Base: Story;
-export declare const Stroked: Story;
-export declare const IconTypeShowcase: Story;
-export declare const SizesShowcase: Story;
-export declare const StatesShowcase: Story;
-//# sourceMappingURL=InteractiveIcon.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"InteractiveIcon.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/InteractiveIcon/InteractiveIcon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAQ9D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,eAAe,CAuBtC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,eAAe,CAAC,CAAC;AAE9C,eAAO,MAAM,IAAI,EAAE,KAiBlB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAuB9B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA8B3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAsD5B,CAAC"}

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

@@ -1,90 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Settings, PenEdit, DeleteCircleFill, MoreVertical, } from '../../Symbols';
-import { Box, Text } from '../Utility';
-import { InteractiveIcon } from './InteractiveIcon';
-const meta = {
-    component: InteractiveIcon,
-    title: 'Action/InteractiveIcon',
-    parameters: {
-        docs: {
-            source: {
-                language: 'tsx',
-                format: true,
-                type: 'code',
-            },
-        },
-    },
-    argTypes: {
-        children: {
-            control: 'select',
-            options: ['Settings', 'PenEdit', 'DeleteCircleFill'],
-            mapping: {
-                Settings: _jsx(Settings, {}),
-                PenEdit: _jsx(PenEdit, {}),
-                DeleteCircleFill: _jsx(DeleteCircleFill, {}),
-            },
-        },
-    },
-};
-export default meta;
-export const Base = {
-    args: {
-        iconType: 'filled',
-        children: _jsx(DeleteCircleFill, {}),
-        accessibilityLabel: 'Delete',
-    },
-    parameters: {
-        docs: {
-            source: {
-                code: `
-<InteractiveIcon iconType="filled" accessibilityLabel="Delete">
-  <DeleteCircleFill />
-</InteractiveIcon>
-`,
-            },
-        },
-    },
-};
-export const Stroked = {
-    args: {
-        iconType: 'stroked',
-        children: _jsx(MoreVertical, {}),
-        accessibilityLabel: 'More actions',
-    },
-    parameters: {
-        docs: {
-            source: {
-                code: `
-<InteractiveIcon iconType="stroked" accessibilityLabel="More actions">
-  <MoreVertical />
-</InteractiveIcon>
-`,
-            },
-        },
-    },
-};
-export const IconTypeShowcase = {
-    render: () => {
-        return (_jsxs(Box, { lx: { flexDirection: 'row', gap: 's16', padding: 's8' }, children: [_jsxs(Box, { lx: { flexDirection: 'column', alignItems: 'center', gap: 's4' }, children: [_jsx(Text, { lx: { color: 'muted' }, typography: 'body3', children: "Filled" }), _jsx(InteractiveIcon, { iconType: 'filled', accessibilityLabel: 'Delete', children: _jsx(DeleteCircleFill, {}) })] }), _jsxs(Box, { lx: { flexDirection: 'column', alignItems: 'center', gap: 's4' }, children: [_jsx(Text, { lx: { color: 'muted' }, typography: 'body3', children: "Stroked" }), _jsx(InteractiveIcon, { iconType: 'stroked', accessibilityLabel: 'More actions', children: _jsx(MoreVertical, {}) })] })] }));
-    },
-};
-export const SizesShowcase = {
-    render: () => {
-        const iconSizes = [16, 20, 24, 40];
-        return (_jsx(Box, { lx: { flexDirection: 'row', gap: 's12', padding: 's8' }, children: iconSizes.map((size) => (_jsxs(Box, { lx: { flexDirection: 'column', gap: 's16' }, children: [_jsx(Box, { lx: {
-                            width: 's72',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                        }, children: _jsx(InteractiveIcon, { iconType: 'stroked', accessibilityLabel: 'More', children: _jsx(DeleteCircleFill, { size: size }) }, size) }), _jsxs(Text, { lx: { textAlign: 'center' }, typography: 'body3', children: [size, "px"] })] }, size))) }));
-    },
-};
-export const StatesShowcase = {
-    render: () => {
-        return (_jsxs(Box, { lx: {
-                flexDirection: 'row',
-                gap: 's16',
-                backgroundColor: 'base',
-                padding: 's8',
-            }, children: [_jsxs(Box, { lx: { flexDirection: 'column', alignItems: 'center', gap: 's4' }, children: [_jsx(Text, { lx: { color: 'muted' }, typography: 'body3', children: "Filled enabled" }), _jsx(InteractiveIcon, { iconType: 'filled', accessibilityLabel: 'Delete', children: _jsx(DeleteCircleFill, {}) })] }), _jsxs(Box, { lx: { flexDirection: 'column', alignItems: 'center', gap: 's4' }, children: [_jsx(Text, { lx: { color: 'muted' }, typography: 'body3', children: "Stroked enabled" }), _jsx(InteractiveIcon, { iconType: 'stroked', accessibilityLabel: 'More actions', children: _jsx(MoreVertical, {}) })] }), _jsxs(Box, { lx: { flexDirection: 'column', alignItems: 'center', gap: 's4' }, children: [_jsx(Text, { lx: { color: 'muted' }, typography: 'body3', children: "Filled disabled" }), _jsx(InteractiveIcon, { iconType: 'filled', accessibilityLabel: 'Delete', disabled: true, children: _jsx(DeleteCircleFill, {}) })] }), _jsxs(Box, { lx: { flexDirection: 'column', alignItems: 'center', gap: 's4' }, children: [_jsx(Text, { lx: { color: 'muted' }, typography: 'body3', children: "Stroked disabled" }), _jsx(InteractiveIcon, { iconType: 'stroked', accessibilityLabel: 'More actions', disabled: true, children: _jsx(MoreVertical, {}) })] })] }));
-    },
-};

package/dist/src/lib/Components/Link/Link.stories.d.ts

@@ -1,17 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import { Link } from './Link';
-declare const meta: Meta<typeof Link>;
-export default meta;
-type Story = StoryObj<typeof Link>;
-export declare const Base: Story;
-export declare const WithIcon: Story;
-export declare const External: Story;
-export declare const ExternalLinkWithIcon: Story;
-export declare const AppearanceShowcase: Story;
-export declare const UnderlineShowcase: Story;
-export declare const SizesShowcase: Story;
-export declare const StatesShowcase: Story;
-export declare const ResponsiveLayout: Story;
-export declare const WithCustomNavigation: Story;
-export declare const InTextUsage: Story;
-//# sourceMappingURL=Link.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Link/Link.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CA+C3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,IAAI,EAAE,KAkBlB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAsBtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAsBtB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KA0BlC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAwBhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAgB/B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA2D3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAkB5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KA8B9B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAyDlC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA2EzB,CAAC"}

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

@@ -1,275 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Settings, Information, ArrowRight } from '../../Symbols';
-import { Box, Text } from '../Utility';
-import { Link } from './Link';
-const meta = {
-    component: Link,
-    title: 'Action/Link',
-    parameters: {
-        docs: {
-            source: {
-                language: 'tsx',
-                format: true,
-                type: 'code',
-            },
-        },
-    },
-    argTypes: {
-        appearance: {
-            control: 'select',
-            options: ['base', 'accent'],
-            description: 'The visual style appearance of the link',
-        },
-        size: {
-            control: 'select',
-            options: ['sm', 'md'],
-            description: 'The size of the link',
-        },
-        underline: {
-            control: 'boolean',
-            description: 'Whether to underline the link text',
-        },
-        icon: {
-            control: 'select',
-            description: 'Optional icon component to display',
-            options: ['None', 'Information', 'Settings', 'ArrowRight'],
-            mapping: {
-                None: undefined,
-                Information: Information,
-                Settings: Settings,
-                ArrowRight: ArrowRight,
-            },
-        },
-        isExternal: {
-            control: 'boolean',
-            description: 'Whether to display external link icon',
-        },
-        children: {
-            control: 'text',
-            description: 'The content to be displayed inside the link',
-        },
-    },
-};
-export default meta;
-export const Base = {
-    args: {
-        appearance: 'base',
-        size: 'md',
-        children: 'Base Link',
-        href: 'https://ledger.com',
-    },
-    parameters: {
-        docs: {
-            source: {
-                code: `
-<Link appearance="base" href="https://ledger.com">
-  Base Link
-</Link>
-`,
-            },
-        },
-    },
-};
-export const WithIcon = {
-    args: {
-        appearance: 'base',
-        children: 'Link with Icon',
-        icon: Information,
-        href: 'https://ledger.com',
-    },
-    parameters: {
-        docs: {
-            source: {
-                code: `
-<Link
-  appearance="base"
-  icon={Information}
-  href="https://ledger.com"
->
-  Link with Icon
-</Link>
-`,
-            },
-        },
-    },
-};
-export const External = {
-    args: {
-        appearance: 'base',
-        children: 'External Link',
-        isExternal: true,
-        href: 'https://ledger.com',
-    },
-    parameters: {
-        docs: {
-            source: {
-                code: `
-<Link
-  appearance="base"
-  isExternal
-  href="https://ledger.com"
->
-  External Link
-</Link>
-`,
-            },
-        },
-    },
-};
-export const ExternalLinkWithIcon = {
-    args: {
-        appearance: 'base',
-        size: 'md',
-        children: 'External Link with Icon',
-        icon: Information,
-        isExternal: true,
-        href: 'https://ledger.com',
-    },
-    parameters: {
-        docs: {
-            source: {
-                code: `
-<Link
-  appearance="base"
-  size="md"
-  icon={Information}
-  isExternal
-  href="https://ledger.com"
->
-  External Link with Icon
-</Link>
-`,
-            },
-        },
-    },
-};
-export const AppearanceShowcase = {
-    render: () => {
-        const appearances = [
-            { name: 'Base', appearance: 'base' },
-            { name: 'Accent', appearance: 'accent' },
-        ];
-        return (_jsx(Box, { lx: { flexDirection: 'row', gap: 's32', padding: 's8' }, children: appearances.map(({ name, appearance }) => (_jsx(Link, { size: 'md', appearance: appearance, href: 'https://ledger.com', icon: Information, isExternal: true, children: name }, appearance))) }));
-    },
-};
-export const UnderlineShowcase = {
-    render: () => (_jsxs(Box, { lx: { flexDirection: 'column', gap: 's16', padding: 's8' }, children: [_jsx(Link, { appearance: 'accent', size: 'md', href: 'https://ledger.com', children: "With underline" }), _jsx(Link, { appearance: 'accent', size: 'md', underline: false, href: 'https://ledger.com', children: "Without underline" })] })),
-};
-export const SizesShowcase = {
-    render: () => (_jsxs(Box, { lx: { flexDirection: 'column', gap: 's16' }, children: [_jsxs(Box, { lx: {
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 's32',
-                    padding: 's8',
-                }, children: [_jsx(Link, { appearance: 'base', size: 'sm', href: 'https://ledger.com', icon: Information, isExternal: true, children: "Small" }), _jsx(Link, { appearance: 'base', size: 'md', href: 'https://ledger.com', icon: Information, isExternal: true, children: "Medium" })] }), _jsxs(Box, { lx: {
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 's32',
-                    padding: 's8',
-                }, children: [_jsx(Link, { appearance: 'accent', size: 'sm', href: 'https://ledger.com', icon: Information, isExternal: true, children: "Small Accent" }), _jsx(Link, { appearance: 'accent', size: 'md', href: 'https://ledger.com', icon: Information, isExternal: true, children: "Medium Accent" })] })] })),
-};
-export const StatesShowcase = {
-    render: () => (_jsxs(Box, { lx: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 's16',
-            padding: 's8',
-        }, children: [_jsx(Link, { appearance: 'base', href: 'https://ledger.com', children: "Default" }), _jsx(Link, { appearance: 'accent', href: 'https://ledger.com', icon: ArrowRight, children: "With Icon" })] })),
-};
-export const ResponsiveLayout = {
-    render: () => (_jsxs(Box, { lx: {
-            width: 's256',
-            flexDirection: 'column',
-            gap: 's8',
-            borderRadius: 'sm',
-            borderColor: 'mutedSubtle',
-            borderWidth: 's1',
-            padding: 's8',
-        }, children: [_jsx(Link, { underline: true, href: 'https://ledger.com', children: "Short Link" }), _jsx(Link, { appearance: 'base', href: 'https://ledger.com', children: "This is a longer link text that will be truncated with ellipsis when it exceeds the container width" }), _jsx(Link, { appearance: 'base', href: 'https://ledger.com', icon: Information, isExternal: true, children: "Base with long text that is cut off" })] })),
-};
-export const WithCustomNavigation = {
-    render: () => {
-        const handlePress = () => {
-            console.log('Custom navigation triggered');
-            // In a real app: navigation.navigate('Dashboard')
-        };
-        return (_jsxs(Box, { lx: { flexDirection: 'column', gap: 's16', padding: 's8' }, children: [_jsx(Link, { appearance: 'base', size: 'md', onPress: handlePress, children: "Navigate to Dashboard" }), _jsx(Link, { appearance: 'accent', size: 'md', icon: ArrowRight, onPress: handlePress, children: "Continue to Next Screen" })] }));
-    },
-    parameters: {
-        docs: {
-            source: {
-                code: `
-import { useNavigation } from '@react-navigation/native';
-
-function MyComponent() {
-  const navigation = useNavigation();
-  
-  return (
-    <>
-      <Link
-        appearance="base"
-        size="md"
-        onPress={() => navigation.navigate('Dashboard')}
-      >
-        Navigate to Dashboard
-      </Link>
-      
-      <Link
-        appearance="accent"
-        size="md"
-        icon={ArrowRight}
-        onPress={() => navigation.navigate('Next')}
-      >
-        Continue to Next Screen
-      </Link>
-    </>
-  );
-}
-`,
-            },
-        },
-    },
-};
-export const InTextUsage = {
-    render: () => (_jsxs(Box, { lx: { flexDirection: 'column', gap: 's32', padding: 's8' }, children: [_jsxs(Text, { typography: 'body2', lx: { color: 'base' }, children: ["By continuing, you agree to our", ' ', _jsx(Link, { appearance: 'base', size: 'sm', href: 'https://ledger.com/terms', children: "Terms & Conditions" }), ' ', "and", ' ', _jsx(Link, { appearance: 'base', size: 'sm', href: 'https://ledger.com/privacy', children: "Privacy Policy" }), "."] }), _jsxs(Text, { typography: 'body1SemiBold', lx: { color: 'interactive' }, children: ["Need help?", ' ', _jsx(Link, { appearance: 'accent', size: 'md', href: 'https://ledger.com/support', children: "Contact Support" })] }), _jsxs(Text, { typography: 'body1SemiBold', lx: { color: 'base' }, children: ["Already have an account?", ' ', _jsx(Link, { appearance: 'accent', size: 'md', underline: false, href: 'https://ledger.com/signin', children: "Sign in" })] })] })),
-    parameters: {
-        docs: {
-            source: {
-                code: `
-// Links within text content
-<Text typography='body2' lx={{ color: 'base' }}>
-  By continuing, you agree to our{' '}
-  <Link appearance='base' size='sm' href='https://ledger.com/terms'>
-    Terms & Conditions
-  </Link>{' '}
-  and{' '}
-  <Link appearance='base' size='sm' href='https://ledger.com/privacy'>
-    Privacy Policy
-  </Link>.
-</Text>
-
-// Heading with inline link
-<Text typography='body1SemiBold' lx={{ color: 'interactive' }}>
-  Need help?{' '}
-  <Link appearance='accent' size='md' href='https://ledger.com/support'>
-    Contact Support
-  </Link>
-</Text>
-
-// Bold text with ununderlined link
-<Text typography='body1SemiBold' lx={{ color: 'base' }}>
-  Already have an account?{' '}
-  <Link
-    appearance='accent'
-    size='md'
-    underline={false}
-    href='https://ledger.com/signin'
-  >
-    Sign in
-  </Link>
-</Text>
-`,
-            },
-        },
-    },
-};

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"ListItem.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/ListItem/ListItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAMvE,OAAO,EACL,QAAQ,EAST,MAAM,YAAY,CAAC;AAEpB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAkC/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEvC,eAAO,MAAM,IAAI,EAAE,KAgClB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAqK9B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA+E3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAuE9B,CAAC"}