@ledgerhq/lumen-ui-rnative 0.0.45 → 0.0.47

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

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn, getFontSize, textFormatter } from '@ledgerhq/lumen-utils-shared';
+import { getFontSize, textFormatter } from '@ledgerhq/lumen-utils-shared';
 import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { Pressable, TextInput, View } from 'react-native';
-import Animated, { Easing, useAnimatedStyle, useSharedValue, withSequence, withTiming, withRepeat, } from 'react-native-reanimated';
-const inputStyles = cn('heading-0 h-56 bg-transparent text-base outline-none items-start');
-const currencyStyles = cn('heading-0 text-base');
+import { Pressable, StyleSheet, TextInput } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withSequence, withTiming, } from 'react-native-reanimated';
+import { useStyleSheet } from '../../../styles';
+import { Box } from '../Utility';
 /**
  * AmountInput component for handling numeric input with currency display.
  * This is a controlled component - both `value` and `onChange` props are required.
  * The currency text can be positioned either on the left or right side of the input.
  */
-export const AmountInput = React.forwardRef(({ className, currencyText, currencyPosition = 'left', editable = true, maxIntegerLength = 9, maxDecimalLength = 9, allowDecimals = true, thousandsSeparator = true, value, onChangeText, isInvalid = false, ...props }, ref) => {
+export const AmountInput = React.forwardRef(({ lx = {}, style, currencyText, currencyPosition = 'left', editable = true, maxIntegerLength = 9, maxDecimalLength = 9, allowDecimals = true, thousandsSeparator = true, value, onChangeText, isInvalid = false, ...props }, ref) => {
     const inputRef = useRef(null);
     const inputValue = String(value);
     const [isFocused, setIsFocused] = useState(false);
@@ -18,6 +18,11 @@ export const AmountInput = React.forwardRef(({ className, currencyText, currency
     const animatedFontSize = useSharedValue(getFontSize(inputValue));
     const caretOpacity = useSharedValue(0);
     useImperativeHandle(ref, () => inputRef.current, []);
+    const styles = useStyles({
+        hasValue: !!inputValue,
+        isEditable: editable,
+        isInvalid,
+    });
     const animatedInputStyle = useAnimatedStyle(() => ({
         transform: [{ translateX: translateX.value }],
         fontSize: animatedFontSize.value,
@@ -44,7 +49,6 @@ export const AmountInput = React.forwardRef(({ className, currencyText, currency
     }, [inputValue, animatedFontSize, translateX]);
     useEffect(() => {
         if (isFocused && editable) {
-            // custom caret animation
             caretOpacity.value = withRepeat(withSequence(withTiming(1, { duration: 150, easing: Easing.ease }), withTiming(1, { duration: 500 }), withTiming(0, { duration: 150, easing: Easing.ease }), withTiming(0, { duration: 500 })), -1, false);
         }
         else {
@@ -60,27 +64,74 @@ export const AmountInput = React.forwardRef(({ className, currencyText, currency
         });
         onChangeText(formatted);
     };
-    const CurrencyText = currencyText ? (_jsx(Animated.Text, { className: cn(currencyStyles, !inputValue && 'text-muted-subtle', !editable && 'text-disabled', isInvalid && 'text-error'), style: animatedCurrencyStyle, children: currencyText })) : null;
+    const CurrencyText = currencyText ? (_jsx(Animated.Text, { style: [styles.currency, animatedCurrencyStyle], children: currencyText })) : null;
     const handlePress = () => {
         if (editable) {
             inputRef.current?.focus();
         }
     };
-    return (_jsxs(View, { className: 'relative', children: [_jsx(TextInput, { ref: inputRef, keyboardType: 'decimal-pad', editable: editable, value: inputValue, onChangeText: handleChangeText, onFocus: (e) => {
+    return (_jsxs(Box, { lx: lx, style: styles.container, children: [_jsx(TextInput, { ref: inputRef, keyboardType: 'decimal-pad', editable: editable, value: inputValue, onChangeText: handleChangeText, onFocus: (e) => {
                     setIsFocused(true);
                     props.onFocus?.(e);
                 }, onBlur: (e) => {
                     setIsFocused(false);
                     props.onBlur?.(e);
-                }, className: 'absolute size-full opacity-0', ...props }), _jsxs(Pressable, { onPress: handlePress, className: 'flex-row items-center justify-center', accessibilityLabel: props.accessibilityLabel || 'Amount input', children: [currencyPosition === 'left' && CurrencyText, _jsx(Animated.Text, { className: cn(inputStyles, isInvalid && 'text-error', !editable && 'text-disabled', !inputValue && 'text-muted-subtle', className), style: animatedInputStyle, children: inputValue || '0' }), _jsx(Animated.View, { className: 'mx-2', 
-                        // TODO: use theme object here
-                        style: [
-                            animatedCaretStyle,
-                            {
-                                width: 3,
-                                borderRadius: 1.5,
-                                backgroundColor: '#007AFF',
-                            },
-                        ] }), currencyPosition === 'right' && CurrencyText] })] }));
+                }, style: styles.hiddenInput, ...props }), _jsxs(Pressable, { onPress: handlePress, style: styles.pressable, accessibilityLabel: props.accessibilityLabel || 'Amount input', children: [currencyPosition === 'left' && CurrencyText, _jsx(Animated.Text, { style: [styles.displayText, animatedInputStyle, style], children: inputValue || '0' }), _jsx(Animated.View, { style: [styles.caret, animatedCaretStyle] }), currencyPosition === 'right' && CurrencyText] })] }));
 });
+const useStyles = ({ hasValue, isEditable, isInvalid, }) => {
+    return useStyleSheet((t) => ({
+        container: {
+            position: 'relative',
+        },
+        hiddenInput: {
+            position: 'absolute',
+            width: t.sizes.full,
+            height: t.sizes.full,
+            opacity: 0,
+        },
+        pressable: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        displayText: StyleSheet.flatten([
+            {
+                height: t.sizes.s56,
+                backgroundColor: 'transparent',
+                color: t.colors.text.base,
+                alignItems: 'flex-start',
+                ...t.typographies.heading0SemiBold,
+            },
+            !hasValue && {
+                color: t.colors.text.mutedSubtle,
+            },
+            !isEditable && {
+                color: t.colors.text.disabled,
+            },
+            isInvalid && {
+                color: t.colors.text.error,
+            },
+        ]),
+        currency: StyleSheet.flatten([
+            {
+                color: t.colors.text.base,
+                ...t.typographies.heading0SemiBold,
+            },
+            !hasValue && {
+                color: t.colors.text.mutedSubtle,
+            },
+            !isEditable && {
+                color: t.colors.text.disabled,
+            },
+            isInvalid && {
+                color: t.colors.text.error,
+            },
+        ]),
+        caret: {
+            marginHorizontal: t.spacings.s2,
+            width: t.sizes.s2,
+            backgroundColor: t.colors.text.active,
+        },
+    }), [hasValue, isEditable, isInvalid]);
+};
 AmountInput.displayName = 'AmountInput';

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

@@ -1 +1 @@
-{"version":3,"file":"AmountInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AmountInput/AmountInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAC;AAEnE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CA+ClC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAc1C,eAAO,MAAM,IAAI,EAAE,KAYlB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAWvB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAWlC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAWnC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAWzB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAWpC,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAWvC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAWjC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAahC,CAAC"}
+{"version":3,"file":"AmountInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AmountInput/AmountInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CA+ClC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAsB1C,eAAO,MAAM,IAAI,EAAE,KAYlB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAWvB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAWlC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAWnC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAWzB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAWpC,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAWvC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAWjC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAahC,CAAC"}

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

@@ -53,7 +53,13 @@ const meta = {
 export default meta;
 const AmountInputStory = (args) => {
     const [value, setValue] = useState(args.value?.toString() ?? '');
-    return (_jsx(View, { className: 'flex min-h-400 items-center justify-center p-24', children: _jsx(View, { className: 'w-full max-w-320', children: _jsx(AmountInput, { ...args, value: value, onChangeText: setValue }) }) }));
+    return (_jsx(View, { style: {
+            flex: 1,
+            minHeight: 96,
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 24,
+        }, children: _jsx(View, { style: { width: '100%', maxWidth: 320 }, children: _jsx(AmountInput, { ...args, value: value, onChangeText: setValue }) }) }));
 };
 export const Base = {
     render: (args) => _jsx(AmountInputStory, { ...args }),

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

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

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

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

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

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

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

@@ -0,0 +1,53 @@
+import { TextInputProps, ViewStyle } from 'react-native';
+import { BoxProps } from '../Utility';
+export type AmountInputProps = Omit<TextInputProps, 'value' | 'onChangeText'> & {
+    /**
+     * The controlled value of the input
+     * @required
+     */
+    value: string | number;
+    /**
+     * Change handler
+     * @required
+     */
+    onChangeText: (text: string) => void;
+    /**
+     * The currency text (e.g. USD, EUR)
+     */
+    currencyText?: string;
+    /**
+     * Position of the currency text.
+     * @default 'left'
+     */
+    currencyPosition?: 'left' | 'right';
+    /**
+     * Maximum length for integer part (before decimal)
+     * @default 9
+     */
+    maxIntegerLength?: number;
+    /**
+     * Maximum length for decimal part (after decimal)
+     * @default 9
+     */
+    maxDecimalLength?: number;
+    /**
+     * Allow decimal values
+     * @default true
+     */
+    allowDecimals?: boolean;
+    /**
+     * Additional style
+     */
+    style?: ViewStyle;
+    /**
+     * Whether to use thousands separator (e.g. 1 000 for 1000)
+     * @default true
+     */
+    thousandsSeparator?: boolean;
+    /**
+     * Mark input as invalid (e.g. for error display)
+     * @default false
+     */
+    isInvalid?: boolean;
+} & BoxProps;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AmountInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,cAAc,EACd,OAAO,GAAG,cAAc,CACzB,GAAG;IACF;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;OAGG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,QAAQ,CAAC"}

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

@@ -8,11 +8,11 @@ import { View } from 'react-native';
  * @see {@link https://ldls.vercel.app/?path=/docs/communication-banner-overview--docs Storybook}
  * @see {@link https://ldls.vercel.app/?path=/docs/communication-banner-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 banner's core appearance (colors, padding, etc). Use the `appearance` prop instead.
  *
  * @example
- * import { Banner } from '@ledgerhq/lumen-ui-react';
+ * import { Banner } from '@ledgerhq/lumen-ui-rnative';
  *
  * // Basic info banner
  * <Banner title="Information" appearance="info" />
@@ -34,7 +34,7 @@ import { View } from 'react-native';
  *   closeAriaLabel="Close banner"
  * />
  */
-export declare const Banner: React.ForwardRefExoticComponent<import("react-native").ViewProps & {
+export declare const Banner: React.ForwardRefExoticComponent<{
     appearance?: "info" | "success" | "warning" | "error";
     title?: string;
     description?: React.ReactNode;
@@ -42,5 +42,7 @@ export declare const Banner: React.ForwardRefExoticComponent<import("react-nativ
     secondaryAction?: React.ReactNode;
     onClose?: () => void;
     closeAriaLabel?: string;
-} & React.RefAttributes<View>>;
+} & {
+    lx?: import("../../../styles").LumenViewStyle;
+} & import("react-native").ViewProps & React.RefAttributes<View>>;
 //# sourceMappingURL=Banner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Banner/Banner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,IAAI,EAAE,MAAM,cAAc,CAAC;AAqC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,MAAM;;;;;;;;8BAmElB,CAAC"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Banner/Banner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAoB,IAAI,EAAE,MAAM,cAAc,CAAC;AA+FtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;iEAyElB,CAAC"}

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

@@ -1,29 +1,78 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn, isTextChildren } from '@ledgerhq/lumen-utils-shared';
-import { cva } from 'class-variance-authority';
+import { isTextChildren } from '@ledgerhq/lumen-utils-shared';
 import React from 'react';
-import { Text, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 import { useCommonTranslation } from '../../../i18n';
+import { useStyleSheet } from '../../../styles';
 import { InformationFill, CheckmarkCircleFill, WarningFill, DeleteCircleFill, Close, } from '../../Symbols';
 import { IconButton } from '../IconButton';
+import { Box } from '../Utility';
 import { Wrap } from '../Wrap';
-const iconMap = {
-    info: _jsx(InformationFill, { className: 'text-base' }),
-    success: _jsx(CheckmarkCircleFill, { className: 'text-success' }),
-    warning: _jsx(WarningFill, { className: 'text-warning' }),
-    error: _jsx(DeleteCircleFill, { className: 'text-error' }),
+const iconColorMap = {
+    info: 'base',
+    success: 'success',
+    warning: 'warning',
+    error: 'error',
 };
-const bannerVariants = {
-    root: cva('flex w-full flex-row items-start gap-8 rounded-md p-16 text-base', {
-        variants: {
-            appearance: {
-                info: 'bg-surface',
-                success: 'bg-success',
-                warning: 'bg-warning',
-                error: 'bg-error',
+const useStyles = ({ appearance }) => {
+    return useStyleSheet((t) => {
+        const bgColors = {
+            info: t.colors.bg.surface,
+            success: t.colors.bg.success,
+            warning: t.colors.bg.warning,
+            error: t.colors.bg.error,
+        };
+        return {
+            root: {
+                flexDirection: 'row',
+                width: t.sizes.full,
+                alignItems: 'flex-start',
+                gap: t.spacings.s8,
+                borderRadius: t.borderRadius.md,
+                padding: t.spacings.s16,
+                backgroundColor: bgColors[appearance],
             },
-        },
-    }),
+            iconWrapper: {
+                flexShrink: 0,
+                flexDirection: 'row',
+                alignItems: 'flex-start',
+                paddingVertical: t.spacings.s4,
+            },
+            contentWrapper: {
+                marginRight: t.spacings.s8,
+                flex: 1,
+                flexDirection: 'column',
+                gap: t.spacings.s8,
+                paddingVertical: t.spacings.s4,
+            },
+            textWrapper: {
+                flexDirection: 'column',
+                gap: t.spacings.s4,
+            },
+            title: StyleSheet.flatten([
+                t.typographies.body1SemiBold,
+                {
+                    color: t.colors.text.base,
+                },
+            ]),
+            description: StyleSheet.flatten([
+                t.typographies.body2,
+                {
+                    color: t.colors.text.base,
+                },
+            ]),
+            actionsWrapper: {
+                flexDirection: 'row',
+                gap: t.spacings.s4,
+            },
+        };
+    }, [appearance]);
+};
+const iconsMap = {
+    info: InformationFill,
+    success: CheckmarkCircleFill,
+    warning: WarningFill,
+    error: DeleteCircleFill,
 };
 /**
  * A banner component for displaying informational, success, warning, or error messages with optional description, action buttons, and close button.
@@ -33,11 +82,11 @@ const bannerVariants = {
  * @see {@link https://ldls.vercel.app/?path=/docs/communication-banner-overview--docs Storybook}
  * @see {@link https://ldls.vercel.app/?path=/docs/communication-banner-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 banner's core appearance (colors, padding, etc). Use the `appearance` prop instead.
  *
  * @example
- * import { Banner } from '@ledgerhq/lumen-ui-react';
+ * import { Banner } from '@ledgerhq/lumen-ui-rnative';
  *
  * // Basic info banner
  * <Banner title="Information" appearance="info" />
@@ -59,8 +108,11 @@ const bannerVariants = {
  *   closeAriaLabel="Close banner"
  * />
  */
-export const Banner = React.forwardRef(({ appearance = 'info', title, description, primaryAction, secondaryAction, className, onClose, closeAriaLabel, ...props }, ref) => {
+export const Banner = React.forwardRef(({ appearance = 'info', title, description, primaryAction, secondaryAction, lx = {}, style, onClose, closeAriaLabel, ...props }, ref) => {
     const { t } = useCommonTranslation();
-    const icon = iconMap[appearance];
-    return (_jsxs(View, { ref: ref, className: cn(className, bannerVariants.root({ appearance })), ...props, children: [_jsx(View, { className: 'flex shrink-0 flex-row items-start py-4', children: icon }), _jsxs(View, { className: 'mr-8 flex flex-1 flex-col gap-8 py-4', children: [_jsxs(View, { className: 'flex flex-col gap-4', children: [title && (_jsx(Text, { className: 'line-clamp-2 text-base body-1-semi-bold', children: title })), description && (_jsx(View, { className: 'line-clamp-5 body-2', children: _jsx(Wrap, { if: isTextChildren(description), with: (children) => (_jsx(Text, { className: 'text-base', children: children })), children: description }) }))] }), (primaryAction || secondaryAction) && (_jsxs(View, { className: 'flex flex-row gap-4', children: [primaryAction, secondaryAction] }))] }), onClose && (_jsx(IconButton, { testID: 'banner-close-button', appearance: 'transparent', size: 'xs', icon: Close, onPress: () => onClose(), accessibilityLabel: closeAriaLabel || t('components.banner.closeAriaLabel') }))] }));
+    const styles = useStyles({ appearance });
+    const IconComponent = iconsMap[appearance];
+    const iconColor = iconColorMap[appearance];
+    return (_jsxs(Box, { ref: ref, lx: lx, style: StyleSheet.flatten([styles.root, style]), ...props, children: [_jsx(View, { style: styles.iconWrapper, children: _jsx(IconComponent, { lx: { color: iconColor } }) }), _jsxs(View, { style: styles.contentWrapper, children: [_jsxs(View, { style: styles.textWrapper, children: [title && (_jsx(Text, { style: styles.title, numberOfLines: 2, children: title })), description && (_jsx(View, { children: _jsx(Wrap, { if: isTextChildren(description), with: (children) => (_jsx(Text, { style: styles.description, children: children })), children: description }) }))] }), (primaryAction || secondaryAction) && (_jsxs(View, { style: styles.actionsWrapper, children: [primaryAction, secondaryAction] }))] }), onClose && (_jsx(IconButton, { testID: 'banner-close-button', appearance: 'transparent', size: 'xs', icon: Close, onPress: () => onClose(), accessibilityLabel: closeAriaLabel || t('components.banner.closeAriaLabel') }))] }));
 });
+Banner.displayName = 'Banner';

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Banner/Banner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CA4E7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,IAAI,EAAE,KA8BlB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA0B7B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA6CzB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAgE9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAyBhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KA0E/B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAuB1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KA0B9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAiBhC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAsDhC,CAAC"}
+{"version":3,"file":"Banner.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Banner/Banner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAIvE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CA4E7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,IAAI,EAAE,KA8BlB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA0B7B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA6CzB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAgE9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAgChC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAgF/B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAuB1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAkC9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAiBhC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAsDhC,CAAC"}

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Button } from '../Button';
+import { Box, Text } from '../Utility';
 import { Banner } from './Banner';
 const meta = {
     component: Banner,
@@ -72,8 +73,8 @@ export const Base = {
         secondaryAction: 'None',
     },
     render: (args) => (
-    // max-w-md container for visual presentation - not required for Banner component
-    _jsx("div", { className: 'max-w-md', children: _jsx(Banner, { ...args, description: 'This is additional information about the banner.' }) })),
+    // maxWidth container for visual presentation - not required for Banner component
+    _jsx(Box, { lx: { maxWidth: 's400' }, children: _jsx(Banner, { ...args, description: 'This is additional information about the banner.' }) })),
     parameters: {
         docs: {
             source: {
@@ -95,7 +96,7 @@ export const WithDescription = {
         title: 'Banner with Description',
         description: 'This is additional information about the banner.',
     },
-    render: (args) => (_jsx("div", { className: 'max-w-md', children: _jsx(Banner, { ...args }) })),
+    render: (args) => (_jsx(Box, { lx: { maxWidth: 's400' }, children: _jsx(Banner, { ...args }) })),
     parameters: {
         docs: {
             source: {
@@ -119,7 +120,7 @@ export const WithActions = {
         primaryAction: 'Button',
         secondaryAction: 'Button',
     },
-    render: (args) => (_jsx("div", { className: 'max-w-md', children: _jsx(Banner, { ...args }) })),
+    render: (args) => (_jsx(Box, { lx: { maxWidth: 's400' }, children: _jsx(Banner, { ...args }) })),
     parameters: {
         docs: {
             source: {
@@ -164,7 +165,7 @@ export const WithFullFeatures = {
         onClose: () => console.log('Closed'),
         closeAriaLabel: 'Close banner',
     },
-    render: (args) => (_jsx("div", { className: 'max-w-md', children: _jsx(Banner, { ...args }) })),
+    render: (args) => (_jsx(Box, { lx: { maxWidth: 's400' }, children: _jsx(Banner, { ...args }) })),
     parameters: {
         docs: {
             source: {
@@ -208,27 +209,41 @@ export const AppearanceShowcase = {
             { name: 'Error', appearance: 'error' },
         ];
         return (
-        // max-w-md container for visual presentation - not required for Banner component
-        _jsx("div", { className: 'flex max-w-md flex-col gap-16 p-8', children: appearances.map(({ name, appearance }) => (_jsx(Banner, { appearance: appearance, title: `${name} Banner`, description: `${name} Banner Description`, onClose: () => console.log('Closed'), closeAriaLabel: `Close ${name} banner` }, appearance))) }));
+        // maxWidth container for visual presentation - not required for Banner component
+        _jsx(Box, { lx: {
+                flexDirection: 'column',
+                maxWidth: 's400',
+                gap: 's16',
+                padding: 's8',
+            }, children: appearances.map(({ name, appearance }) => (_jsx(Banner, { appearance: appearance, title: `${name} Banner`, description: `${name} Banner Description`, onClose: () => console.log('Closed'), closeAriaLabel: `Close ${name} banner` }, appearance))) }));
     },
 };
 export const ContentVariations = {
-    render: () => (
-    // max-w-md container for visual presentation - not required for Banner component
-    _jsxs("div", { className: 'flex max-w-md flex-col gap-16 p-8', children: [_jsx(Banner, { title: 'Title Only' }), _jsx(Banner, { description: 'Description only without title' }), _jsx(Banner, { title: 'With Description', description: 'Additional details here.' }), _jsx(Banner, { title: 'With Primary Action', primaryAction: _jsx(Button, { appearance: 'gray', size: 'sm', onPress: () => console.log('Primary clicked'), children: "Primary" }) }), _jsx(Banner, { title: 'With Close', description: 'Can be dismissed', onClose: () => console.log('Closed'), closeAriaLabel: 'Close banner' }), _jsx(Banner, { title: 'With Actions and Description', description: 'Details', primaryAction: _jsx(Button, { appearance: 'gray', size: 'sm', onPress: () => console.log('Primary clicked'), children: "Primary" }), secondaryAction: _jsx(Button, { appearance: 'no-background', size: 'sm', onPress: () => console.log('Secondary clicked'), children: "Secondary" }) }), _jsx(Banner, { appearance: 'info', title: 'Banner with Full Features', description: 'This is additional information about the banner.', primaryAction: _jsx(Button, { appearance: 'gray', size: 'sm', onPress: () => console.log('Primary clicked'), children: "Primary" }), secondaryAction: _jsx(Button, { appearance: 'no-background', size: 'sm', onPress: () => console.log('Secondary clicked'), children: "Secondary" }), onClose: () => console.log('Closed'), closeAriaLabel: 'Close banner' })] })),
+    render: () => (_jsxs(Box, { lx: {
+            flexDirection: 'column',
+            maxWidth: 's400',
+            gap: 's16',
+            padding: 's8',
+        }, children: [_jsx(Banner, { title: 'Title Only' }), _jsx(Banner, { description: 'Description only without title' }), _jsx(Banner, { title: 'With Description', description: 'Additional details here.' }), _jsx(Banner, { title: 'With Primary Action', primaryAction: _jsx(Button, { appearance: 'gray', size: 'sm', onPress: () => console.log('Primary clicked'), children: "Primary" }) }), _jsx(Banner, { title: 'With Close', description: 'Can be dismissed', onClose: () => console.log('Closed'), closeAriaLabel: 'Close banner' }), _jsx(Banner, { title: 'With Actions and Description', description: 'Details', primaryAction: _jsx(Button, { appearance: 'gray', size: 'sm', onPress: () => console.log('Primary clicked'), children: "Primary" }), secondaryAction: _jsx(Button, { appearance: 'no-background', size: 'sm', onPress: () => console.log('Secondary clicked'), children: "Secondary" }) }), _jsx(Banner, { appearance: 'info', title: 'Banner with Full Features', description: 'This is additional information about the banner.', primaryAction: _jsx(Button, { appearance: 'gray', size: 'sm', onPress: () => console.log('Primary clicked'), children: "Primary" }), secondaryAction: _jsx(Button, { appearance: 'no-background', size: 'sm', onPress: () => console.log('Secondary clicked'), children: "Secondary" }), onClose: () => console.log('Closed'), closeAriaLabel: 'Close banner' })] })),
 };
 export const NaturalWidth = {
-    render: () => (_jsxs("div", { className: 'space-y-4', children: [_jsx("p", { className: 'text-muted body-3', children: "Banner without container constraints - takes full parent width:" }), _jsx(Banner, { title: 'Full Width Banner', description: 'This banner demonstrates natural width behavior - it fills the full width of its parent container.', primaryAction: _jsx(Button, { appearance: 'transparent', size: 'sm', onPress: () => console.log('Action clicked'), children: "Action" }), onClose: () => console.log('Closed'), closeAriaLabel: 'Close full width banner' })] })),
+    render: () => (_jsxs(Box, { lx: { flexDirection: 'column', gap: 's16' }, children: [_jsx(Text, { typography: 'body3', lx: { color: 'muted' }, children: "Banner without container constraints - takes full parent width:" }), _jsx(Banner, { title: 'Full Width Banner', description: 'This banner demonstrates natural width behavior - it fills the full width of its parent container.', primaryAction: _jsx(Button, { appearance: 'transparent', size: 'sm', onPress: () => console.log('Action clicked'), children: "Action" }), onClose: () => console.log('Closed'), closeAriaLabel: 'Close full width banner' })] })),
 };
 export const ResponsiveLayout = {
-    render: () => (_jsxs("div", { className: 'grid w-400 grid-cols-1 gap-16 bg-muted-pressed p-16', children: [_jsx("div", { className: 'text-muted body-4-semi-bold', children: "Container with a fixed width" }), _jsx(Banner, { title: 'Short Title', description: 'Short description', onClose: () => console.log('Closed'), closeAriaLabel: 'Close short banner' }), _jsx(Banner, { title: 'Constrained Width', description: 'Banner width is controlled by a fixed width container', onClose: () => console.log('Closed'), closeAriaLabel: 'Close constrained width banner' }), _jsx(Banner, { title: 'Longer Title That Might Overflow When Container is Smaller', description: 'This is a longer description that demonstrates how the banner handles longer content within its constraints. It should be truncated at 5 lines with an ellipsis, so this line should not be visible.', onClose: () => console.log('Closed'), closeAriaLabel: 'Close overflow banner' })] })),
+    render: () => (_jsxs(Box, { lx: {
+            width: 's400',
+            flexDirection: 'column',
+            gap: 's16',
+            backgroundColor: 'mutedPressed',
+            padding: 's16',
+        }, children: [_jsx(Text, { typography: 'body4SemiBold', lx: { color: 'muted' }, children: "Container with a fixed width" }), _jsx(Banner, { title: 'Short Title', description: 'Short description', onClose: () => console.log('Closed'), closeAriaLabel: 'Close short banner' }), _jsx(Banner, { title: 'Constrained Width', description: 'Banner width is controlled by a fixed width container', onClose: () => console.log('Closed'), closeAriaLabel: 'Close constrained width banner' }), _jsx(Banner, { title: 'Longer Title That Might Overflow When Container is Smaller', description: 'This is a longer description that demonstrates how the banner handles longer content within its constraints. It should be truncated at 5 lines with an ellipsis, so this line should not be visible.', onClose: () => console.log('Closed'), closeAriaLabel: 'Close overflow banner' })] })),
 };
 export const InteractiveDismiss = {
     render: (args) => {
         const [visible, setVisible] = React.useState(true);
         if (!visible)
-            return _jsx("p", { children: "Banner dismissed" });
-        return (_jsx("div", { className: 'max-w-md', children: _jsx(Banner, { ...args, title: 'Click close to dismiss', onClose: () => setVisible(false), closeAriaLabel: 'Dismiss interactive banner' }) }));
+            return _jsx(Text, { typography: 'body2', children: "Banner dismissed" });
+        return (_jsx(Box, { lx: { maxWidth: 's400' }, children: _jsx(Banner, { ...args, title: 'Click close to dismiss', onClose: () => setVisible(false), closeAriaLabel: 'Dismiss interactive banner' }) }));
     },
 };
 export const InteractiveActions = {
@@ -240,7 +255,7 @@ export const InteractiveActions = {
         const handleReject = () => {
             setState('error');
         };
-        return (_jsx("div", { className: 'max-w-md', children: _jsx(Banner, { ...args, appearance: state === 'success'
+        return (_jsx(Box, { lx: { maxWidth: 's400' }, children: _jsx(Banner, { ...args, appearance: state === 'success'
                     ? 'success'
                     : state === 'error'
                         ? 'error'

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { ViewProps } from 'react-native';
-export type BannerProps = ViewProps & {
+import { StyledViewProps } from '../../../styles';
+export type BannerProps = {
     /**
      * The type of banner which affects color and icon.
      */
@@ -29,5 +29,5 @@ export type BannerProps = ViewProps & {
      * Optional aria label for the close button.
      */
     closeAriaLabel?: string;
-};
+} & StyledViewProps;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Banner/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG;IACpC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACtD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Banner/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACtD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,GAAG,eAAe,CAAC"}

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

@@ -1,83 +1,16 @@
 import React from 'react';
-import { TextInput, type TextInputProps } from 'react-native';
-export type BaseInputProps = TextInputProps & {
-    /**
-     *  The label text that floats above the input when focused or filled.
-     */
+import { TextInput } from 'react-native';
+export declare const BaseInput: React.ForwardRefExoticComponent<{
     label?: string;
-    /**
-     *  Additional class names to apply to the container element.
-     */
-    className?: string;
-    /**
-     *  Additional class names to apply to the input element.
-     */
-    inputClassName?: string;
-    /**
-     *  Additional class names to apply to the label element.
-     */
-    labelClassName?: string;
-    /**
-     * An optional error message displayed below the input.
-     */
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    inputStyle?: import("react-native").StyleProp<import("react-native").TextStyle>;
+    labelStyle?: import("react-native").StyleProp<import("react-native").TextStyle>;
     errorMessage?: string;
-    /**
-     * Custom content to render after the input (right side in LTR).
-     * @example suffix={<Icon />}
-     */
     suffix?: React.ReactNode;
-    /**
-     * Custom content to render before the input (left side in LTR).
-     * @example prefix={<Icon />}
-     */
     prefix?: React.ReactNode;
-    /**
-     * Optional function to extend the default clear behavior with custom logic.
-     */
     onClear?: () => void;
-    /**
-     * Hide the clear button (shown by default when input has content).
-     */
     hideClearButton?: boolean;
-};
-export declare const BaseInput: React.ForwardRefExoticComponent<TextInputProps & {
-    /**
-     *  The label text that floats above the input when focused or filled.
-     */
-    label?: string;
-    /**
-     *  Additional class names to apply to the container element.
-     */
-    className?: string;
-    /**
-     *  Additional class names to apply to the input element.
-     */
-    inputClassName?: string;
-    /**
-     *  Additional class names to apply to the label element.
-     */
-    labelClassName?: string;
-    /**
-     * An optional error message displayed below the input.
-     */
-    errorMessage?: string;
-    /**
-     * Custom content to render after the input (right side in LTR).
-     * @example suffix={<Icon />}
-     */
-    suffix?: React.ReactNode;
-    /**
-     * Custom content to render before the input (left side in LTR).
-     * @example prefix={<Icon />}
-     */
-    prefix?: React.ReactNode;
-    /**
-     * Optional function to extend the default clear behavior with custom logic.
-     */
-    onClear?: () => void;
-    /**
-     * Hide the clear button (shown by default when input has content).
-     */
-    hideClearButton?: boolean;
-} & React.RefAttributes<TextInput>>;
+} & Omit<import("react-native").TextInputProps, "style"> & {
+    lx?: import("../../../styles").LumenViewStyle;
+} & import("react-native").ViewProps & React.RefAttributes<TextInput>>;
 //# sourceMappingURL=BaseInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BaseInput.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BaseInput/BaseInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAKN,MAAM,OAAO,CAAC;AACf,OAAO,EAGL,SAAS,EACT,KAAK,cAAc,EAEpB,MAAM,cAAc,CAAC;AAKtB,MAAM,MAAM,cAAc,GAAG,cAAc,GAAG;IAC5C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAUF,eAAO,MAAM,SAAS;IAhDpB;;OAEG;YACK,MAAM;IACd;;OAEG;gBACS,MAAM;IAClB;;OAEG;qBACc,MAAM;IACvB;;OAEG;qBACc,MAAM;IACvB;;OAEG;mBACY,MAAM;IACrB;;;OAGG;aACM,KAAK,CAAC,SAAS;IACxB;;;OAGG;aACM,KAAK,CAAC,SAAS;IACxB;;OAEG;cACO,MAAM,IAAI;IACpB;;OAEG;sBACe,OAAO;mCA2I1B,CAAC"}
+{"version":3,"file":"BaseInput.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BaseInput/BaseInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,EAA8B,SAAS,EAAQ,MAAM,cAAc,CAAC;AAQ3E,eAAO,MAAM,SAAS;;;;;;;;;;;;sEAqJrB,CAAC"}