@ledgerhq/lumen-ui-rnative 0.0.45 → 0.0.46

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

@@ -1,22 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cva } from 'class-variance-authority';
 import React from 'react';
-import { View } from 'react-native';
+import { useStyleSheet } from '../../../styles';
 import { Check } from '../../Symbols';
 import { useControllableState } from '../../utils';
 import { Label } from '../Label';
+import { Box } from '../Utility';
 import { BaseCheckboxIndicator, BaseCheckboxRoot } from './BaseCheckbox';
-const checkboxVariants = {
-    root: cva(['flex flex-row items-center gap-8']),
-    icon: cva('shrink-0', {
-        variants: {
-            disabled: {
-                true: 'text-disabled',
-                false: 'text-black',
-            },
-        },
-    }),
-};
 /**
  * The checkbox follows the design system tokens and supports checked, unchecked,
  * disabled, and focus states with proper hover and active interactions.
@@ -24,11 +13,11 @@ const checkboxVariants = {
  * @see {@link https://ldls.vercel.app/?path=/docs/react-native_selection-checkbox--docs Storybook}
  * @see {@link https://ldls.vercel.app/?path=/docs/react-native_selection-checkbox--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 checkbox's core appearance.
  *
  * @example
- * import { Checkbox } from '@ledgerhq/lumen-ui-react';
+ * import { Checkbox } from '@ledgerhq/lumen-ui-rnative';
  *
  * // Basic controlled checkbox
  * const [checked, setChecked] = useState(false);
@@ -41,12 +30,28 @@ const checkboxVariants = {
  * // Uncontrolled checkbox with default state
  * <Checkbox defaultChecked={true} onCheckedChange={handleChange} />
  */
-export const Checkbox = React.forwardRef(({ className, checked: checkedProp, onCheckedChange: onCheckedChangeProp, defaultChecked = false, disabled = false, label, ...props }, ref) => {
+export const Checkbox = React.forwardRef(({ lx, style, checked: checkedProp, onCheckedChange: onCheckedChangeProp, defaultChecked = false, disabled = false, label, ...props }, ref) => {
     const [checked, onCheckedChange] = useControllableState({
         prop: checkedProp,
         onChange: onCheckedChangeProp,
         defaultProp: defaultChecked,
     });
-    return (_jsxs(View, { className: checkboxVariants.root({ className }), children: [_jsx(BaseCheckboxRoot, { ref: ref, disabled: disabled, checked: checked, onCheckedChange: onCheckedChange, ...props, children: _jsx(BaseCheckboxIndicator, { children: _jsx(Check, { size: 16, className: checkboxVariants.icon({ disabled }) }) }) }), label && (_jsx(Label, { disabled: disabled, onPress: () => onCheckedChange(!checked), children: label }))] }));
+    const styles = useStyles({ disabled });
+    return (_jsxs(Box, { ref: ref, lx: lx, style: [styles.root, style], ...props, children: [_jsx(BaseCheckboxRoot, { disabled: disabled, checked: checked, onCheckedChange: onCheckedChange, children: _jsx(BaseCheckboxIndicator, { children: _jsx(Check, { size: 16, style: styles.icon }) }) }), label && (_jsx(Label, { disabled: disabled, onPress: () => onCheckedChange(!checked), children: label }))] }));
 });
+const useStyles = ({ disabled }) => {
+    return useStyleSheet((t) => {
+        return {
+            root: {
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: t.spacings.s8,
+            },
+            icon: {
+                flexShrink: 0,
+                color: disabled ? t.colors.text.disabled : t.colors.text.black,
+            },
+        };
+    }, [disabled]);
+};
 Checkbox.displayName = 'Checkbox';

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAsC/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,KAQlB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KA+BvB,CAAC"}
+{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAsC/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,KAkBlB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAwCvB,CAAC"}

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

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from '../Utility';
 import { Checkbox } from './Checkbox';
 const meta = {
     title: 'Selection/Checkbox',
     component: Checkbox,
     parameters: {
-        layout: 'centered',
+        layout: 'fullscreen',
         docs: {
             source: {
                 language: 'tsx',
@@ -45,12 +46,27 @@ export default meta;
  */
 export const Base = {
     render: (args) => {
-        return (_jsx("div", { className: 'flex size-80 items-center justify-center', children: _jsx(Checkbox, { ...args }) }));
+        return (_jsx(Box, { style: {
+                flex: 1,
+                minHeight: 96,
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: 24,
+            }, children: _jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsx(Checkbox, { ...args }) }) }));
     },
 };
 /**
  * Interactive example showing all states.
  */
 export const AllStates = {
-    render: () => (_jsxs("div", { className: 'grid grid-cols-3 gap-48 p-16 text-base', children: [_jsxs("div", { className: 'space-y-16', children: [_jsx("h3", { className: 'heading-4', children: "Enabled" }), _jsxs("div", { className: 'space-y-8', children: [_jsx("div", { className: 'flex items-center space-x-8', children: _jsx(Checkbox, { label: 'Unchecked', accessibilityLabel: 'Unchecked', defaultChecked: false }) }), _jsx("div", { className: 'flex items-center space-x-8', children: _jsx(Checkbox, { label: 'Checked', defaultChecked: true }) })] })] }), _jsxs("div", { className: 'space-y-16', children: [_jsx("h3", { className: 'heading-4', children: "Disabled" }), _jsxs("div", { className: 'space-y-8', children: [_jsx("div", { className: 'flex items-center space-x-8', children: _jsx(Checkbox, { label: 'Unchecked', disabled: true, defaultChecked: false }) }), _jsx("div", { className: 'flex items-center space-x-8', children: _jsx(Checkbox, { label: 'Checked', disabled: true, defaultChecked: true }) })] })] })] })),
+    render: () => (_jsx(Box, { style: {
+            flex: 1,
+            minHeight: 96,
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 24,
+        }, children: _jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Box, { style: {
+                    flexDirection: 'row',
+                    gap: 48,
+                }, children: [_jsxs(Box, { style: { gap: 16 }, children: [_jsx(Text, { typography: 'heading4', children: "Enabled" }), _jsxs(Box, { style: { gap: 8 }, children: [_jsx(Checkbox, { label: 'Unchecked', accessibilityLabel: 'Unchecked', defaultChecked: false }), _jsx(Checkbox, { label: 'Checked', defaultChecked: true })] })] }), _jsxs(Box, { style: { gap: 16 }, children: [_jsx(Text, { typography: 'heading4', children: "Disabled" }), _jsxs(Box, { style: { gap: 8 }, children: [_jsx(Checkbox, { label: 'Unchecked', disabled: true, defaultChecked: false }), _jsx(Checkbox, { label: 'Checked', disabled: true, defaultChecked: true })] })] })] }) }) })),
 };

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

@@ -1,4 +1,4 @@
-import { SlottablePressableProps } from '../../types';
+import { StyledViewProps } from '../../../styles';
 export type CheckboxProps = {
     /**
      * The disabled state of the checkbox.
@@ -20,5 +20,5 @@ export type CheckboxProps = {
      * The label of the checkbox.
      */
     label?: React.ReactNode;
-} & SlottablePressableProps;
+} & StyledViewProps;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Checkbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAEtD,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,GAAG,uBAAuB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Checkbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,GAAG,eAAe,CAAC"}

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

@@ -2,9 +2,10 @@ import { Svg } from 'react-native-svg';
 import { IconSize } from './types';
 export declare const Icon: import("react").ForwardRefExoticComponent<{
     size?: IconSize;
-    style?: import("react-native").StyleProp<import("react-native").ViewStyle & {
-        color?: string;
-    }>;
-    children: React.ReactNode;
-} & Omit<import("react-native-svg").SvgProps, "style"> & import("react").RefAttributes<Svg>>;
+    color?: import("../../../styles").LumenTextStyle["color"];
+    children?: React.ReactNode;
+} & {
+    lx?: import("../../../styles").LumenTextStyle;
+    typography?: keyof import("../../../styles").LumenStyleSheetTheme["typographies"];
+} & import("react-native").TextProps & Omit<import("react-native-svg").SvgProps, "style"> & import("react").RefAttributes<Svg>>;
 //# sourceMappingURL=Icon.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Icon/Icon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEvC,OAAO,EAAa,QAAQ,EAAE,MAAM,SAAS,CAAC;AAwB9C,eAAO,MAAM,IAAI;;;aAZD,CAAA;;;4FAiCf,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Icon/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGvC,OAAO,EAAa,QAAQ,EAAE,MAAM,SAAS,CAAC;AAmC9C,eAAO,MAAM,IAAI;;;;;;uBAHsB,8DAGxB;+HAoBd,CAAC"}

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

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useMemo } from 'react';
-import { StyleSheet } from 'react-native';
 import { Svg } from 'react-native-svg';
-import { LumenStyleSheet } from '../../../styles';
+import { useResolveTextStyle, useTheme } from '../../../styles';
 const iconSizeMap = {
     12: 's12',
     16: 's16',
@@ -12,17 +11,24 @@ const iconSizeMap = {
     48: 's48',
     56: 's56',
 };
-const useStyles = (size) => {
-    const { theme } = LumenStyleSheet.useTheme();
-    return useMemo(() => ({
-        width: theme.icon.width[iconSizeMap[size]],
-        height: theme.icon.height[iconSizeMap[size]],
-        strokeWidth: theme.icon.borderWidth[iconSizeMap[size]],
-    }), [size, theme]);
+const useStyles = (lx, size, color) => {
+    const { theme } = useTheme();
+    const resolvedStyle = useResolveTextStyle(lx || {});
+    const resolvedColor = useResolveTextStyle({ color });
+    return useMemo(() => {
+        return {
+            container: {
+                ...resolvedStyle,
+                width: theme.icon.width[iconSizeMap[size]],
+                height: theme.icon.height[iconSizeMap[size]],
+                strokeWidth: theme.icon.borderWidth[iconSizeMap[size]],
+            },
+            color: resolvedColor.color || resolvedStyle.color || theme.colors.text.base,
+        };
+    }, [size, theme, resolvedStyle, resolvedColor.color]);
 };
-export const Icon = forwardRef(({ size = 24, style, children, viewBox, ...props }, ref) => {
-    const styles = useStyles(size);
-    const flatStyle = StyleSheet.flatten(style);
-    return (_jsx(Svg, { ref: ref, width: styles.width, height: styles.height, strokeWidth: styles.strokeWidth, viewBox: viewBox, color: flatStyle?.color ?? 'currentColor', fill: 'none', pointerEvents: 'none', ...props, children: children }));
+export const Icon = forwardRef(({ size = 24, color, lx = {}, children, viewBox, ...props }, ref) => {
+    const styles = useStyles(lx, size, color);
+    return (_jsx(Svg, { ref: ref, width: styles.container.width, height: styles.container.height, strokeWidth: styles.container.strokeWidth, viewBox: viewBox, color: styles.color, fill: 'none', pointerEvents: 'none', ...props, children: children }));
 });
 Icon.displayName = 'Icon';

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Icon/Icon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAIvE,OAAO,KAAK,KAAK,MAAM,eAAe,CAAC;AAGvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,QAAA,MAAM,IAAI,EAAE,IAEX,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,KAAK,QAAQ,GAAG,MAAM,OAAO,KAAK,CAAC;AAGnC,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAoEF,eAAO,MAAM,IAAI,EAAE,QAAQ,CAAC,cAAc,CA4CzC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,QA0CvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,QA+ErB,CAAC"}
+{"version":3,"file":"Icon.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Icon/Icon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,KAAK,KAAK,MAAM,eAAe,CAAC;AAGvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,QAAA,MAAM,IAAI,EAAE,IAEX,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,KAAK,QAAQ,GAAG,MAAM,OAAO,KAAK,CAAC;AAGnC,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAoEF,eAAO,MAAM,IAAI,EAAE,QAAQ,CAAC,cAAc,CA4CzC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,QA0CvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,QA+ErB,CAAC"}

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

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { View } from 'react-native';
-import { LumenStyleSheet } from '../../../styles';
+import { useTheme } from '../../../styles';
 import * as Icons from '../../Symbols';
-import { Search } from '../Search/Search';
+import { SearchInput } from '../SearchInput/SearchInput';
 import { Box, Text, Pressable } from '../Utility';
 const meta = {
     title: 'Symbols/Interface Icons',
@@ -12,7 +11,7 @@ export default meta;
 const sizes = [12, 16, 20, 24, 40, 48, 56];
 const iconNames = Object.keys(Icons);
 const IconCard = ({ name, size = 24, color }) => {
-    const { theme } = LumenStyleSheet.useTheme();
+    const { theme } = useTheme();
     const [copied, setCopied] = useState(false);
     const IconComponent = Icons[name];
     const iconColor = color ?? theme.colors.text.base;
@@ -33,19 +32,19 @@ const IconCard = ({ name, size = 24, color }) => {
             gap: 's8',
             borderRadius: 'sm',
             padding: 's16',
-            width: 's144',
+            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(View, { style: {
+        }), children: [_jsx(IconComponent, { size: size, style: { color: iconColor } }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: name }), copied && (_jsx(Box, { lx: {
                     position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
+                    top: 's0',
+                    left: 's0',
+                    right: 's0',
+                    bottom: 's0',
                     alignItems: 'center',
                     justifyContent: 'center',
-                    borderRadius: theme.borderRadius.sm,
-                    backgroundColor: theme.colors.bg.muted,
+                    borderRadius: 'sm',
+                    backgroundColor: 'muted',
                 }, children: _jsx(Text, { typography: 'body4', lx: { color: 'onAccent' }, children: "Copied!" }) }))] }, name));
 };
 export const Icon = {
@@ -70,7 +69,7 @@ export const Icon = {
         },
     },
     render: (args) => {
-        const { theme } = LumenStyleSheet.useTheme();
+        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 })] }) }));
@@ -87,13 +86,13 @@ export const Icon = {
 };
 export const IconSizes = {
     render: () => {
-        const { theme } = LumenStyleSheet.useTheme();
+        const { theme } = useTheme();
         return (_jsx(Box, { lx: { flexDirection: 'column', gap: 's16' }, children: sizes.map((size) => (_jsxs(Box, { lx: { flexDirection: 'column' }, children: [_jsxs(Text, { typography: 'heading3', lx: { marginBottom: 's16' }, children: ["Size ", size, "px"] }), _jsx(Box, { lx: {
                             flexDirection: 'row',
                             flexWrap: 'wrap',
-                            gap: 's16',
+                            gap: 's8',
                             borderRadius: 'sm',
-                            padding: 's16',
+                            padding: 's8',
                         }, style: {
                             borderWidth: 1,
                             borderColor: theme.colors.border.mutedSubtle,
@@ -114,7 +113,7 @@ export const Gallery = {
         layout: 'fullscreen',
     },
     render: () => {
-        const { theme } = LumenStyleSheet.useTheme();
+        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()));
@@ -123,7 +122,7 @@ export const Gallery = {
                 flexDirection: 'column',
                 alignItems: 'stretch',
                 padding: 's8',
-            }, children: [_jsxs(Box, { lx: { marginBottom: 's32' }, children: [_jsx(Box, { lx: { marginBottom: 's8', maxWidth: 's320' }, children: _jsx(Search, { 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: {
+            }, 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',

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

@@ -1,5 +1,6 @@
-import { StyleProp, ViewStyle } from 'react-native';
 import { SvgProps } from 'react-native-svg';
+import { LumenTextStyle } from '../../../styles';
+import { TextProps } from '../Utility';
 export type IconSize = 12 | 16 | 20 | 24 | 40 | 48 | 56;
 export type IconProps = {
     /**
@@ -7,14 +8,12 @@ export type IconProps = {
      */
     size?: IconSize;
     /**
-     * Style object to apply to the icon (supports color via color property).
+     * The color of the icon.
      */
-    style?: StyleProp<ViewStyle & {
-        color?: string;
-    }>;
+    color?: LumenTextStyle['color'];
     /**
      * The children of the icon.
      */
-    children: React.ReactNode;
-} & Omit<SvgProps, 'style'>;
+    children?: React.ReactNode;
+} & TextProps & Omit<SvgProps, 'style'>;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Icon/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,MAAM,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAExD,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Icon/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,MAAM,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAExD,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,GAAG,SAAS,GACX,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC"}

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

@@ -1,19 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { View } from 'react-native';
-import { LumenStyleSheet, mergeStyles } from '../../../styles';
+import { StyleSheet, View } from 'react-native';
+import { useStyleSheet } from '../../../styles';
 import { InjectStylesIntoChildren } from '../../utils/components/InjectStylesIntoChildren';
 import { Pressable } from '../Utility';
 const useStyles = ({ iconType, pressed, disabled, }) => {
-    return LumenStyleSheet.useCreate((t) => {
+    return useStyleSheet((t) => {
         const backgroundStyle = {
             filled: { backgroundColor: t.colors.bg.base },
             stroked: { backgroundColor: t.colors.bg.baseTransparent },
         };
         return {
-            container: mergeStyles({
-                borderRadius: t.borderRadius.full,
-            }, backgroundStyle[iconType], iconType === 'stroked' &&
-                pressed && { backgroundColor: t.colors.bg.baseTransparentPressed }),
+            container: StyleSheet.flatten([
+                {
+                    borderRadius: t.borderRadius.full,
+                },
+                backgroundStyle[iconType],
+                iconType === 'stroked' &&
+                    pressed && { backgroundColor: t.colors.bg.baseTransparentPressed },
+            ]),
             icon: {
                 color: disabled
                     ? t.colors.text.disabled

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

@@ -1 +1 @@
-{"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;AAS9D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,eAAe,CA0BtC,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"}
+{"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,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LUMEN_VIEW_STYLE_PROPS } from '../../../styles/resolveStyle/resolveConfig';
 import { Settings, PenEdit, DeleteCircleFill, MoreVertical, } from '../../Symbols';
 import { Box, Text } from '../Utility';
 import { InteractiveIcon } from './InteractiveIcon';
@@ -14,9 +13,6 @@ const meta = {
                 type: 'code',
             },
         },
-        controls: {
-            exclude: Array.from(LUMEN_VIEW_STYLE_PROPS),
-        },
     },
     argTypes: {
         children: {

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Text } from 'react-native';
 /**
  * A label that should be used to describe a form field.
  *
@@ -8,5 +7,5 @@ import { Text } from 'react-native';
  */
 export declare const Label: React.ForwardRefExoticComponent<{
     disabled?: boolean;
-} & import("react-native").TextProps & React.RefAttributes<Text>>;
+} & Omit<import("../../../styles").StyledTextProps, "typography"> & React.RefAttributes<import("react-native").Text>>;
 //# sourceMappingURL=Label.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Label/Label.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAapC;;;;;GAKG;AACH,eAAO,MAAM,KAAK;;iEAkBjB,CAAC"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Label/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAiB1C;;;;;GAKG;AACH,eAAO,MAAM,KAAK;;qHA6BjB,CAAC"}

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

@@ -1,23 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cva } from 'class-variance-authority';
 import { forwardRef } from 'react';
-import { Text } from 'react-native';
-import { cn } from '../../utils';
-const labelVariants = cva(['body-2'], {
-    variants: {
-        disabled: {
-            true: 'text-disabled',
-            false: 'text-base',
+import { useStyleSheet } from '../../../styles';
+import { Text } from '../Utility';
+const useStyles = ({ disabled }) => {
+    return useStyleSheet((t) => ({
+        label: {
+            color: disabled ? t.colors.text.disabled : t.colors.text.base,
+            ...t.typographies.body2,
         },
-    },
-});
+    }), [disabled]);
+};
 /**
  * A label that should be used to describe a form field.
  *
  * Either choices fields like checkbox, switch or radio.
  * Or text fields like input, textarea, select, etc.
  */
-export const Label = forwardRef(({ className, disabled = false, children, onPress, onLongPress, ...props }, ref) => {
-    return (_jsx(Text, { ref: ref, disabled: disabled, onPress: disabled ? undefined : onPress, onLongPress: disabled ? undefined : onLongPress, className: cn(labelVariants({ disabled }), className), ...props, children: children }));
+export const Label = forwardRef(({ style, lx = {}, disabled = false, children, onPress, onLongPress, ...props }, ref) => {
+    const styles = useStyles({ disabled });
+    return (_jsx(Text, { lx: lx, ref: ref, style: [styles.label, style], disabled: disabled, onPress: disabled ? undefined : onPress, onLongPress: disabled ? undefined : onLongPress, ...props, children: children }));
 });
 Label.displayName = 'Label';

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

@@ -1,8 +1,8 @@
-import { TextProps } from 'react-native';
+import { TextProps } from '../Utility';
 export type LabelProps = {
     /**
      * The disabled state of the label.
      */
     disabled?: boolean;
-} & TextProps;
+} & Omit<TextProps, 'typography'>;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Label/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,SAAS,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Label/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC"}

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":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAiB,IAAI,EAAE,MAAM,cAAc,CAAC;AAGnD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAiEnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,IAAI;;;;;YAhFI,CAAC;aACd,CAAA;;;;;;;6GAmIP,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,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Linking, Text, View } from 'react-native';
-import { LumenStyleSheet, mergeStyles } from '../../../styles';
+import { Linking, StyleSheet, Text, View } from 'react-native';
+import { useStyleSheet } from '../../../styles';
 import { ExternalLink } from '../../Symbols';
 import { Pressable } from '../Utility';
 const iconSizeMap = {
@@ -9,7 +9,7 @@ const iconSizeMap = {
     md: 20,
 };
 const useStyles = ({ appearance, size, underline, pressed }) => {
-    return LumenStyleSheet.useCreate((t) => {
+    return useStyleSheet((t) => {
         const textColors = {
             base: t.colors.text.base,
             accent: t.colors.text.interactive,
@@ -31,12 +31,15 @@ const useStyles = ({ appearance, size, underline, pressed }) => {
             textWrapper: {
                 flexShrink: 1,
             },
-            text: mergeStyles(typography, {
-                color: pressed
-                    ? pressedTextColors[appearance]
-                    : textColors[appearance],
-                textDecorationLine: underline ? 'underline' : 'none',
-            }),
+            text: StyleSheet.flatten([
+                typography,
+                {
+                    color: pressed
+                        ? pressedTextColors[appearance]
+                        : textColors[appearance],
+                    textDecorationLine: underline ? 'underline' : 'none',
+                },
+            ]),
             icon: {
                 flexShrink: 0,
                 color: pressed

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"}