@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.46

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

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Link/Link.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAsB,cAAc,EAAQ,IAAI,EAAE,MAAM,cAAc,CAAC;AAE9E,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAmDnC,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,UAAU,CAAC,GAAG;IACrE;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC/B;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpE;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,IAAI;IA1Ef;;;OAGG;iBACU,MAAM,GAAG,QAAQ;IAC9B;;;OAGG;WACI,IAAI,GAAG,IAAI;IAClB;;;OAGG;gBACS,OAAO;IACnB;;;OAGG;WACI,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnE;;;OAGG;iBACU,OAAO;IACpB;;OAEG;WACI,MAAM;IACb;;OAEG;cACO,MAAM,IAAI;IACpB;;OAEG;cACO,KAAK,CAAC,SAAS;8BAuI1B,CAAC"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA6B,IAAI,EAAE,MAAM,cAAc,CAAC;AAG/D,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAoEnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,IAAI;;;;;YAlFb,CAAH;aACQ,CAAC;;;;;;;6GAqIT,CAAC"}

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

@@ -1,57 +1,54 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '@ledgerhq/lumen-utils-shared';
-import { cva } from 'class-variance-authority';
 import React from 'react';
-import { Linking, Pressable, Text, View } from 'react-native';
+import { Linking, StyleSheet, Text, View } from 'react-native';
+import { useStyleSheet } from '../../../styles';
 import { ExternalLink } from '../../Symbols';
-const linkTextVariants = cva('', {
-    variants: {
-        appearance: {
-            base: '',
-            accent: '',
-        },
-        underline: {
-            true: 'underline underline-offset-2',
-            false: '',
-        },
-        size: {
-            sm: 'body-2-semi-bold',
-            md: 'body-1-semi-bold',
-        },
-        pressed: {
-            true: '',
-            false: '',
-        },
-    },
-    compoundVariants: [
-        {
-            appearance: 'base',
-            pressed: false,
-            className: 'text-base',
-        },
-        {
-            appearance: 'base',
-            pressed: true,
-            className: 'text-base-pressed',
-        },
-        {
-            appearance: 'accent',
-            pressed: false,
-            className: 'text-interactive',
-        },
-        {
-            appearance: 'accent',
-            pressed: true,
-            className: 'text-interactive-pressed',
-        },
-    ],
-    defaultVariants: {
-        appearance: 'base',
-        size: 'md',
-        underline: true,
-        pressed: false,
-    },
-});
+import { Pressable } from '../Utility';
+const iconSizeMap = {
+    sm: 16,
+    md: 20,
+};
+const useStyles = ({ appearance, size, underline, pressed }) => {
+    return useStyleSheet((t) => {
+        const textColors = {
+            base: t.colors.text.base,
+            accent: t.colors.text.interactive,
+        };
+        const pressedTextColors = {
+            base: t.colors.text.basePressed,
+            accent: t.colors.text.interactivePressed,
+        };
+        const typography = size === 'sm'
+            ? t.typographies.body2SemiBold
+            : t.typographies.body1SemiBold;
+        const gap = size === 'sm' ? t.spacings.s4 : t.spacings.s8;
+        return {
+            container: {
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap,
+            },
+            textWrapper: {
+                flexShrink: 1,
+            },
+            text: StyleSheet.flatten([
+                typography,
+                {
+                    color: pressed
+                        ? pressedTextColors[appearance]
+                        : textColors[appearance],
+                    textDecorationLine: underline ? 'underline' : 'none',
+                },
+            ]),
+            icon: {
+                flexShrink: 0,
+                color: pressed
+                    ? pressedTextColors[appearance]
+                    : textColors[appearance],
+            },
+        };
+    }, [appearance, size, underline, pressed]);
+};
 /**
  * A customizable link component that supports base and accent color appearances, optional underline, sizes, icons, and external link handling.
  * Opens URLs using React Native's Linking API.
@@ -59,7 +56,7 @@ const linkTextVariants = cva('', {
  * @see {@link https://ldls.vercel.app/?path=/docs/components-link-overview--docs Storybook}
  * @see {@link https://ldls.vercel.app/?path=/docs/components-link-implementation--docs#dos-and-donts Guidelines}
  *
- * @warning The `className` prop should only be used for layout adjustments like margins or positioning.
+ * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
  * Do not use it to modify the link's core appearance (colors, padding, etc). Use the `appearance` and `underline` props instead.
  *
  * @example
@@ -87,13 +84,7 @@ const linkTextVariants = cva('', {
  *   Dashboard
  * </Link>
  */
-export const Link = React.forwardRef(({ className, children, appearance, size, underline = true, icon, isExternal = false, href, onPress, ...props }, ref) => {
-    const iconSizeMap = {
-        sm: 16,
-        md: 20,
-    };
-    const calculatedIconSize = size ? iconSizeMap[size] : 20;
-    const IconComponent = icon;
+export const Link = React.forwardRef(({ lx, style, children, appearance = 'base', size = 'md', underline = true, icon, isExternal = false, href, onPress, ...props }, ref) => {
     const handlePress = async () => {
         if (onPress) {
             onPress();
@@ -102,21 +93,17 @@ export const Link = React.forwardRef(({ className, children, appearance, size, u
             await Linking.openURL(href);
         }
     };
-    return (_jsx(Pressable, { ref: ref, className: cn('shrink', className), onPress: handlePress, accessibilityRole: 'link', ...props, children: ({ pressed }) => (_jsxs(View, { className: cn('flex-row items-center gap-8', size === 'sm' && 'gap-4'), children: [IconComponent && (_jsx(IconComponent, { className: cn('flex-shrink-0', linkTextVariants({
-                        appearance,
-                        size,
-                        underline,
-                        pressed,
-                    })), size: calculatedIconSize })), _jsx(View, { className: 'shrink', children: _jsx(Text, { numberOfLines: 1, className: linkTextVariants({
-                            appearance,
-                            size,
-                            underline,
-                            pressed,
-                        }), children: children }) }), isExternal && (_jsx(ExternalLink, { size: calculatedIconSize, className: cn('flex-shrink-0', linkTextVariants({
-                        appearance,
-                        size,
-                        underline,
-                        pressed,
-                    })), accessible: false }))] })) }));
+    return (_jsx(Pressable, { ref: ref, lx: lx, style: [style, { flexShrink: 1 }], onPress: handlePress, accessibilityRole: 'link', ...props, children: ({ pressed }) => (_jsx(LinkContent, { appearance: appearance, size: size, underline: underline, pressed: pressed, icon: icon, isExternal: isExternal, children: children })) }));
 });
+const LinkContent = ({ appearance, size, underline, pressed, icon, isExternal, children, }) => {
+    const calculatedIconSize = iconSizeMap[size];
+    const IconComponent = icon;
+    const styles = useStyles({
+        appearance,
+        size,
+        underline,
+        pressed,
+    });
+    return (_jsxs(View, { style: styles.container, testID: 'link-content', children: [IconComponent && (_jsx(IconComponent, { size: calculatedIconSize, style: styles.icon })), _jsx(View, { style: styles.textWrapper, children: _jsx(Text, { style: styles.text, numberOfLines: 1, children: children }) }), isExternal && (_jsx(ExternalLink, { size: calculatedIconSize, style: styles.icon, accessible: false }))] }));
+};
 Link.displayName = 'Link';

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

@@ -1 +1 @@
-{"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,KA6C3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAW5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAoB9B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAyDlC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA2EzB,CAAC"}
+{"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,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { View, Text } from 'react-native';
 import { Settings, Information, ArrowRight } from '../../Symbols';
+import { Box, Text } from '../Utility';
 import { Link } from './Link';
 const meta = {
     component: Link,
@@ -149,20 +149,43 @@ export const AppearanceShowcase = {
             { name: 'Base', appearance: 'base' },
             { name: 'Accent', appearance: 'accent' },
         ];
-        return (_jsx(View, { className: 'flex-row gap-32 p-8', children: appearances.map(({ name, appearance }) => (_jsx(Link, { size: 'md', appearance: appearance, href: 'https://ledger.com', icon: Information, isExternal: true, children: name }, appearance))) }));
+        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(View, { className: 'flex-col gap-16 p-8', 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" })] })),
+    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(View, { className: 'flex-col gap-16', children: [_jsxs(View, { className: 'flex-row items-center gap-32 p-8', 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(View, { className: 'flex-row items-center gap-32 p-8', 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" })] })] })),
+    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(View, { className: 'flex-row items-center gap-16 p-8', children: [_jsx(Link, { appearance: 'base', href: 'https://ledger.com', children: "Default" }), _jsx(Link, { appearance: 'accent', href: 'https://ledger.com', icon: ArrowRight, children: "With Icon" })] })),
+    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(View, { className: 'w-256 flex-col gap-8 rounded-sm bg-muted p-8', 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" })] })),
+    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: () => {
@@ -170,7 +193,7 @@ export const WithCustomNavigation = {
             console.log('Custom navigation triggered');
             // In a real app: navigation.navigate('Dashboard')
         };
-        return (_jsxs(View, { className: 'flex-col gap-16 p-8', 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" })] }));
+        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: {
@@ -208,13 +231,13 @@ function MyComponent() {
     },
 };
 export const InTextUsage = {
-    render: () => (_jsxs(View, { className: 'flex-col gap-32 p-8', children: [_jsxs(Text, { className: 'text-base body-2', 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, { className: 'text-interactive body-1-semi-bold', children: ["Need help?", ' ', _jsx(Link, { appearance: 'accent', size: 'md', href: 'https://ledger.com/support', children: "Contact Support" })] }), _jsxs(Text, { className: 'text-base body-1-semi-bold', children: ["Already have an account?", ' ', _jsx(Link, { appearance: 'accent', size: 'md', underline: false, href: 'https://ledger.com/signin', children: "Sign in" })] })] })),
+    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 className='text-base body-2'>
+<Text typography='body2' lx={{ color: 'base' }}>
   By continuing, you agree to our{' '}
   <Link appearance='base' size='sm' href='https://ledger.com/terms'>
     Terms & Conditions
@@ -226,7 +249,7 @@ export const InTextUsage = {
 </Text>
 
 // Heading with inline link
-<Text className='text-interactive body-1-semi-bold'>
+<Text typography='body1SemiBold' lx={{ color: 'interactive' }}>
   Need help?{' '}
   <Link appearance='accent' size='md' href='https://ledger.com/support'>
     Contact Support
@@ -234,7 +257,7 @@ export const InTextUsage = {
 </Text>
 
 // Bold text with ununderlined link
-<Text className='text-base body-1-semi-bold'>
+<Text typography='body1SemiBold' lx={{ color: 'base' }}>
   Already have an account?{' '}
   <Link
     appearance='accent'

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

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

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

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

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

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

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

@@ -0,0 +1,43 @@
+import { PropsWithChildren } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { StyledPressableProps } from '../../../styles';
+import { IconSize } from '../Icon';
+export type LinkProps = {
+    /**
+     * The visual style of the link.
+     * @default base
+     */
+    appearance?: 'base' | 'accent';
+    /**
+     * The size variant of the link.
+     * @default md
+     */
+    size?: 'sm' | 'md';
+    /**
+     * Whether to underline the link text.
+     * @default true
+     */
+    underline?: boolean;
+    /**
+     * An optional icon component to render inside the link.
+     * The icon styles are defined by the link. Please do not override them.
+     */
+    icon?: React.ComponentType<{
+        size?: IconSize;
+        style?: StyleProp<ViewStyle>;
+    }>;
+    /**
+     * If true, displays an external link icon next to the link text.
+     * @default false
+     */
+    isExternal?: boolean;
+    /**
+     * The URL to navigate to
+     */
+    href?: string;
+    /**
+     * Custom press handler (overrides default href navigation)
+     */
+    onPress?: () => void;
+} & PropsWithChildren & Omit<StyledPressableProps, 'onPress' | 'children'>;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Link/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,MAAM,MAAM,SAAS,GAAG;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC/B;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACzB,IAAI,CAAC,EAAE,QAAQ,CAAC;QAChB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC9B,CAAC,CAAC;IACH;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,iBAAiB,GACnB,IAAI,CAAC,oBAAoB,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC"}

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

@@ -7,7 +7,7 @@ import { View } from 'react-native';
  * @see {@link https://ldls.vercel.app/?path=/docs/react-native_containment-listitem--docs Storybook}
  * @see {@link https://ldls.vercel.app/?path=/docs/react-native_containment-listitem--docs#dos-and-donts Guidelines}
  *
- * @warning The `className` prop should only be used for layout adjustments like margins or positioning.
+ * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
  * Do not use it to modify the list item's core appearance (colors, padding, etc).
  *
  * @example
@@ -45,5 +45,6 @@ export declare const ListItem: React.ForwardRefExoticComponent<{
     leadingContent?: React.ReactNode;
     descriptionTag?: React.ReactNode;
     trailingContent?: React.ReactNode;
-} & Omit<import("react-native").PressableProps, "children"> & React.RefAttributes<View>>;
+    disabled?: boolean;
+} & Omit<import("../../../styles").StyledPressableProps, "disabled"> & React.RefAttributes<View>>;
 //# sourceMappingURL=ListItem.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/ListItem/ListItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAa,IAAI,EAAQ,MAAM,cAAc,CAAC;AAoCrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,QAAQ;;;;;;wFA0DnB,CAAC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/ListItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,IAAI,EAAE,MAAM,cAAc,CAAC;AAsFtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,QAAQ;;;;;;;iGA0CpB,CAAC"}

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

@@ -1,34 +1,77 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cva } from 'class-variance-authority';
 import React from 'react';
-import { Pressable, View, Text } from 'react-native';
-const listItemVariants = {
-    root: cva([
-        'flex h-64 w-full flex-row items-center gap-16 rounded-md bg-base-transparent px-8 py-12 transition-colors',
-    ], {
-        variants: {
-            disabled: {
-                true: 'cursor-default bg-base-transparent active:bg-base-transparent',
-                false: 'cursor-pointer bg-base-transparent active:bg-base-transparent-pressed',
+import { StyleSheet, Text, View } from 'react-native';
+import { useStyleSheet } from '../../../styles';
+import { Pressable } from '../Utility';
+const useStyles = ({ disabled, pressed, }) => {
+    return useStyleSheet((t) => {
+        return {
+            container: StyleSheet.flatten([
+                {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    height: t.sizes.s64,
+                    width: t.sizes.full,
+                    gap: t.spacings.s16,
+                    borderRadius: t.borderRadius.md,
+                    backgroundColor: 'transparent',
+                    paddingHorizontal: t.spacings.s8,
+                    paddingVertical: t.spacings.s12,
+                },
+                pressed && {
+                    backgroundColor: t.colors.bg.baseTransparentPressed,
+                },
+                disabled && {
+                    backgroundColor: 'transparent',
+                },
+            ]),
+            contentWrapper: {
+                flex: 1,
+                minWidth: 0,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: t.spacings.s12,
             },
-        },
-    }),
-    title: cva('body-2-semi-bold', {
-        variants: {
-            disabled: {
-                true: 'text-disabled',
-                false: 'text-base',
+            textWrapper: {
+                flex: 1,
+                minWidth: 0,
+                flexDirection: 'column',
+                gap: t.spacings.s4,
             },
-        },
-    }),
-    description: cva('min-w-0 shrink body-3', {
-        variants: {
-            disabled: {
-                true: 'text-disabled',
-                false: 'text-muted',
+            title: StyleSheet.flatten([
+                t.typographies.body2SemiBold,
+                {
+                    color: disabled ? t.colors.text.disabled : t.colors.text.base,
+                },
+            ]),
+            descriptionRow: {
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: t.spacings.s4,
             },
-        },
-    }),
+            descriptionTextWrapper: {
+                minWidth: 0,
+                flexShrink: 1,
+            },
+            description: StyleSheet.flatten([
+                t.typographies.body3,
+                {
+                    color: disabled ? t.colors.text.disabled : t.colors.text.muted,
+                    minWidth: 0,
+                    flexShrink: 1,
+                },
+            ]),
+            descriptionTagWrapper: {
+                height: t.sizes.s16,
+                flexShrink: 0,
+                flexDirection: 'row',
+                alignItems: 'center',
+            },
+            trailingWrapper: {
+                flexShrink: 0,
+            },
+        };
+    }, [disabled, pressed]);
 };
 /**
  * A flexible list item component that displays a required title and optional description (with possible tag), leading and trailing content.
@@ -37,7 +80,7 @@ const listItemVariants = {
  * @see {@link https://ldls.vercel.app/?path=/docs/react-native_containment-listitem--docs Storybook}
  * @see {@link https://ldls.vercel.app/?path=/docs/react-native_containment-listitem--docs#dos-and-donts Guidelines}
  *
- * @warning The `className` prop should only be used for layout adjustments like margins or positioning.
+ * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
  * Do not use it to modify the list item's core appearance (colors, padding, etc).
  *
  * @example
@@ -69,8 +112,11 @@ const listItemVariants = {
  *   trailingContent={<ChevronRight size={24} />}
  * />
  */
-export const ListItem = React.forwardRef((props, ref) => {
-    const { title, description, leadingContent, descriptionTag, trailingContent, style, disabled = false, className, ...touchableProps } = props;
-    return (_jsxs(Pressable, { ref: ref, disabled: disabled, className: listItemVariants.root({ disabled, className }), style: style, ...touchableProps, children: [_jsxs(View, { className: 'flex min-w-0 flex-1 flex-row items-center gap-12', children: [leadingContent, _jsxs(View, { className: 'flex min-w-0 flex-1 flex-col gap-4', children: [_jsx(Text, { numberOfLines: 1, ellipsizeMode: 'tail', className: listItemVariants.title({ disabled }), children: title }), description && (_jsxs(View, { className: 'flex flex-row items-center gap-4', children: [_jsx(View, { className: 'min-w-0 shrink', children: _jsx(Text, { numberOfLines: 1, ellipsizeMode: 'tail', className: listItemVariants.description({ disabled }), children: description }) }), descriptionTag && (_jsx(View, { className: 'flex h-16 shrink-0 flex-row items-center', children: descriptionTag }))] }))] })] }), trailingContent && _jsx(View, { className: 'shrink-0', children: trailingContent })] }));
+export const ListItem = React.forwardRef(({ title, description, leadingContent, descriptionTag, trailingContent, lx = {}, style, disabled = false, ...touchableProps }, ref) => {
+    return (_jsx(Pressable, { ref: ref, lx: lx, style: style, disabled: disabled, accessibilityRole: 'button', accessibilityState: { disabled }, ...touchableProps, children: ({ pressed }) => (_jsx(ListItemContent, { disabled: disabled, pressed: pressed, title: title, description: description, leadingContent: leadingContent, descriptionTag: descriptionTag, trailingContent: trailingContent })) }));
 });
+const ListItemContent = ({ disabled, pressed, title, description, leadingContent, descriptionTag, trailingContent, }) => {
+    const styles = useStyles({ disabled, pressed });
+    return (_jsxs(View, { style: styles.container, testID: 'list-item-content', children: [_jsxs(View, { style: styles.contentWrapper, children: [leadingContent, _jsxs(View, { style: styles.textWrapper, children: [_jsx(Text, { style: styles.title, numberOfLines: 1, ellipsizeMode: 'tail', children: title }), description && (_jsxs(View, { style: styles.descriptionRow, children: [_jsx(View, { style: styles.descriptionTextWrapper, children: _jsx(Text, { numberOfLines: 1, ellipsizeMode: 'tail', style: styles.description, children: description }) }), descriptionTag && (_jsx(View, { style: styles.descriptionTagWrapper, children: descriptionTag }))] }))] })] }), trailingContent && (_jsx(View, { style: styles.trailingWrapper, children: trailingContent }))] }));
+};
 ListItem.displayName = 'ListItem';

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

@@ -1 +1 @@
-{"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;AAgBvE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAetC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAwD/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEvC,eAAO,MAAM,IAAI,EAAE,KAoBlB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAchC,CAAC;AAEF,eAAO,MAAM,+BAA+B,EAAE,KAoC7C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAkF3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KA6B9B,CAAC"}
+{"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;AAevE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAkBtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAwD/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEvC,eAAO,MAAM,IAAI,EAAE,KAoBlB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAchC,CAAC;AAEF,eAAO,MAAM,+BAA+B,EAAE,KAoC7C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAqE3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAwC9B,CAAC"}

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

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { View, Text } from 'react-native';
 import { Settings, Plus, User, PenEdit, Cart, Apps, Chart1, Bolt, ChevronRight, } from '../../Symbols';
-import { cn } from '../../utils';
 import { Spot } from '../Spot/Spot';
 import { Tag } from '../Tag/Tag';
+import { Box, Text } from '../Utility';
 import { ListItem } from './ListItem';
 const Balance = ({ disabled }) => {
-    return (_jsxs(View, { className: 'items-end', children: [_jsx(Text, { className: cn('body-2-semi-bold', disabled && 'text-disabled'), children: "42.00" }), _jsx(Text, { className: cn('text-muted body-3', disabled && 'text-disabled'), children: "USD" })] }));
+    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" })] }));
 };
 const meta = {
     component: ListItem,
@@ -71,7 +70,7 @@ export const Base = {
         title: 'Item with Icon and Description',
         leadingContent: _jsx(Spot, { appearance: 'icon', icon: Settings }),
         description: 'Additional information',
-        className: 'max-w-320',
+        lx: { maxWidth: 's320' },
     },
     parameters: {
         docs: {
@@ -94,18 +93,24 @@ export const WithDescriptionTag = {
         description: 'Additional information',
         descriptionTag: (_jsx(Tag, { label: 'New', appearance: 'accent', icon: Bolt, size: 'sm' })),
     },
-    render: (args) => (_jsx(View, { className: 'max-w-320', children: _jsx(ListItem, { ...args }) })),
+    render: (args) => (_jsx(Box, { lx: { maxWidth: 's320' }, children: _jsx(ListItem, { ...args }) })),
 };
 export const TrailingContentVariantsShowcase = {
     render: () => {
-        return (_jsxs(View, { className: 'flex max-w-256 flex-col', 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 }) })] }));
+        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 }) })] }));
     },
 };
 export const StateShowcase = {
     render: () => {
-        return (_jsxs(View, { className: 'flex flex-row gap-32', children: [_jsxs(View, { className: 'flex max-w-256 flex-col', children: [_jsx(ListItem, { title: 'Caret Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: User }), trailingContent: _jsx(ChevronRight, { size: 24, className: 'text-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(View, { className: 'flex max-w-256 flex-col', 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, className: 'text-disabled' }) }), _jsx(ListItem, { title: 'Value Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Cart, disabled: true }), disabled: true, trailingContent: _jsx(Balance, { disabled: true }) }), _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', className: '!bg-muted-transparent !text-disabled' }) }), _jsx(ListItem, { title: 'Icon Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Settings, disabled: true }), disabled: true, trailingContent: _jsx(PenEdit, { size: 24, className: 'text-disabled' }) }), _jsx(ListItem, { title: 'None Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Chart1, disabled: true }), disabled: true })] })] }));
+        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 ResponsiveLayout = {
-    render: () => (_jsxs(View, { className: 'w-320 bg-muted-pressed p-16', children: [_jsx(Text, { className: 'mb-16 text-muted body-4-semi-bold', children: "Container: 320px wide" }), _jsxs(View, { className: 'flex flex-col gap-0', children: [_jsx(ListItem, { title: 'Short Title', description: 'Short description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Plus }), trailingContent: _jsx(ChevronRight, { size: 24, className: 'text-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, className: 'text-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, className: 'text-muted' }) })] })] })),
+    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' } }) })] })] }));
+    },
 };

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

@@ -1,4 +1,4 @@
-import { PressableProps } from 'react-native';
+import { StyledPressableProps } from '../../../styles';
 export type ListItemProps = {
     /**
      * The main title of the list item.
@@ -23,5 +23,9 @@ export type ListItemProps = {
      * @example trailingContent={<Icon />}
      */
     trailingContent?: React.ReactNode;
-} & Omit<PressableProps, 'children'>;
+    /**
+     * Whether the list item is disabled.
+     */
+    disabled?: boolean;
+} & Omit<StyledPressableProps, 'disabled'>;
 //# sourceMappingURL=ListItem.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/ListItem/ListItem.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;;OAGG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACnC,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"ListItem.types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/ListItem/ListItem.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;;OAGG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC"}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TextInput } from 'react-native';
+export declare const SearchInput: React.ForwardRefExoticComponent<Omit<import("../BaseInput").BaseInputProps, "label" | "prefix"> & {
+    lx?: import("../../../styles").LumenViewStyle;
+} & import("react-native").ViewProps & React.RefAttributes<TextInput>>;
+//# sourceMappingURL=SearchInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKzC,eAAO,MAAM,WAAW;;sEAWtB,CAAC"}