@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.46

package/dist/src/lib/Components/BottomSheet/BottomSheetHeader.js

@@ -1,60 +1,74 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useBottomSheet } from '@gorhom/bottom-sheet';
-import { cva } from 'class-variance-authority';
 import { useCallback } from 'react';
-import { Text, View } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { useCommonTranslation } from '../../../i18n';
+import { useStyleSheet } from '../../../styles';
 import { ArrowLeft, Close } from '../../Symbols';
-import { cn } from '../../utils';
 import { IconButton } from '../IconButton';
+import { Box, Text } from '../Utility';
 import { useBottomSheetContext } from './BottomSheet';
-const bottomSheetHeaderVariants = {
-    root: cva('sticky top-0 z-dialog-content bg-canvas-sheet pb-12', {
-        variants: {
-            spacing: {
-                true: 'px-16',
-                false: '',
+const Z_INDEX_DIALOG_CONTENT = 1000;
+const useStyles = ({ appearance, spacing, hidden, }) => {
+    return useStyleSheet((t) => ({
+        root: StyleSheet.flatten([
+            {
+                position: 'relative',
+                zIndex: Z_INDEX_DIALOG_CONTENT,
+                backgroundColor: t.colors.bg.canvasSheet,
+                paddingBottom: t.spacings.s12,
             },
-        },
-    }),
-    inner: cva('flex flex-row items-center justify-between gap-16', {
-        variants: {
-            appearance: {
-                compact: '',
-                expanded: 'mb-16',
+            spacing && {
+                paddingHorizontal: t.spacings.s16,
             },
-            hidden: {
-                true: 'hidden',
-                false: '',
+        ]),
+        inner: StyleSheet.flatten([
+            {
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: t.spacings.s16,
             },
-        },
-    }),
-    textWrapper: cva('flex flex-1 text-center', {
-        variants: {
-            appearance: {
-                compact: '',
-                expanded: 'gap-4',
+            appearance === 'expanded' && {
+                marginBottom: t.spacings.s16,
             },
-        },
-    }),
-    title: cva('text-base', {
-        variants: {
-            appearance: {
-                compact: 'text-center heading-4-semi-bold',
-                expanded: 'heading-2-semi-bold',
+            hidden && {
+                display: 'none',
             },
-        },
-    }),
-    desc: cva('text-muted body-2', {
-        variants: {
-            appearance: {
-                compact: 'text-center',
-                expanded: 'text-left',
+        ]),
+        textWrapper: StyleSheet.flatten([
+            {
+                flex: 1,
+            },
+            appearance === 'expanded' && {
+                gap: t.spacings.s4,
             },
+        ]),
+        title: StyleSheet.flatten([
+            appearance === 'compact'
+                ? t.typographies.heading4SemiBold
+                : t.typographies.heading2SemiBold,
+            {
+                color: t.colors.text.base,
+            },
+            appearance === 'compact' && {
+                textAlign: 'center',
+            },
+        ]),
+        description: StyleSheet.flatten([
+            t.typographies.body2,
+            {
+                color: t.colors.text.muted,
+                textAlign: appearance === 'compact' ? 'center' : 'left',
+            },
+        ]),
+        iconPlaceholder: {
+            width: t.sizes.s32,
+            height: t.sizes.s32,
         },
-    }),
+    }), [appearance, spacing, hidden]);
 };
-export const BottomSheetHeader = ({ className, title, description, appearance = 'compact', spacing = false, ...props }) => {
+export const BottomSheetHeader = ({ lx, style, title, description, appearance = 'compact', spacing = false, ...props }) => {
     const { t } = useCommonTranslation();
     const { close } = useBottomSheet();
     const { onBack, hideCloseButton } = useBottomSheetContext({
@@ -66,13 +80,15 @@ export const BottomSheetHeader = ({ className, title, description, appearance =
     }, [close]);
     const hasTitleSection = Boolean(title || description);
     const hasIcons = Boolean(onBack || !hideCloseButton);
+    const styles = useStyles({
+        appearance,
+        spacing,
+        hidden: !hasIcons && appearance !== 'compact',
+    });
     if (!title && !description && !onBack && hideCloseButton) {
         return null;
     }
-    const titleComponent = hasTitleSection ? (_jsxs(View, { className: bottomSheetHeaderVariants.textWrapper({ appearance }), children: [title && (_jsx(Text, { className: bottomSheetHeaderVariants.title({ appearance }), children: title })), description && (_jsx(Text, { className: bottomSheetHeaderVariants.desc({ appearance }), children: description }))] })) : null;
-    return (_jsxs(View, { ...props, className: cn(bottomSheetHeaderVariants.root({ spacing }), className), children: [_jsxs(View, { className: bottomSheetHeaderVariants.inner({
-                    appearance,
-                    hidden: !hasIcons && appearance !== 'compact',
-                }), children: [_jsx(View, { className: 'size-32', children: onBack && (_jsx(IconButton, { accessibilityLabel: t('components.bottomSheetHeader.goBackAriaLabel'), size: 'xs', onPress: onBack, icon: ArrowLeft, appearance: 'transparent' })) }), appearance === 'compact' && titleComponent, _jsx(View, { className: 'size-32', children: !hideCloseButton && (_jsx(IconButton, { accessibilityLabel: t('components.bottomSheetHeader.closeAriaLabel'), size: 'xs', onPress: handleClose, icon: Close, appearance: 'transparent' })) })] }), appearance === 'expanded' && titleComponent] }));
+    const titleComponent = hasTitleSection ? (_jsxs(Box, { style: styles.textWrapper, children: [title && _jsx(Text, { style: styles.title, children: title }), description && _jsx(Text, { style: styles.description, children: description })] })) : null;
+    return (_jsxs(Box, { ...props, lx: lx, style: [styles.root, style], children: [_jsxs(Box, { style: styles.inner, children: [_jsx(Box, { style: styles.iconPlaceholder, children: onBack && (_jsx(IconButton, { accessibilityLabel: t('components.bottomSheetHeader.goBackAriaLabel'), size: 'xs', onPress: onBack, icon: ArrowLeft, appearance: 'transparent' })) }), appearance === 'compact' && titleComponent, _jsx(Box, { style: styles.iconPlaceholder, children: !hideCloseButton && (_jsx(IconButton, { accessibilityLabel: t('components.bottomSheetHeader.closeAriaLabel'), size: 'xs', onPress: handleClose, icon: Close, appearance: 'transparent' })) })] }), appearance === 'expanded' && titleComponent] }));
 };
 BottomSheetHeader.displayName = 'BottomSheetHeader';

package/dist/src/lib/Components/BottomSheet/CustomBackdrop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomBackdrop.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/CustomBackdrop.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,IAAI,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAExF,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAM3C,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,yBAAyB,CAAC,GAAG;IAC5E,qBAAqB,CAAC,EAAE,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;IAClE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,cAAc;mDAIxB,aAAa;;CAef,CAAC"}
+{"version":3,"file":"CustomBackdrop.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/CustomBackdrop.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,IAAI,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AACxF,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,yBAAyB,CAAC,GAAG;IAC5E,qBAAqB,CAAC,EAAE,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;IAClE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAaF,eAAO,MAAM,cAAc;mDAIxB,aAAa;;CAiBf,CAAC"}

package/dist/src/lib/Components/BottomSheet/CustomBackdrop.js

@@ -1,11 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { BottomSheetBackdrop as GorhomBottomSheetBackdrop } from '@gorhom/bottom-sheet';
-import { cssInterop } from 'nativewind';
-const StyledCustomBackdrop = cssInterop(GorhomBottomSheetBackdrop, {
-    className: 'style',
-});
+import { useStyleSheet } from '../../../styles';
+const useStyles = () => {
+    return useStyleSheet((t) => ({
+        backdrop: {
+            backgroundColor: t.colors.bg.canvasOverlay,
+        },
+    }), []);
+};
 export const CustomBackdrop = ({ backdropPressBehavior, onPress, ...props }) => {
-    return (_jsx(StyledCustomBackdrop, { ...props, className: 'bg-canvas-overlay', opacity: 1, appearsOnIndex: 0, disappearsOnIndex: -1, pressBehavior: backdropPressBehavior, onPress: () => {
+    const styles = useStyles();
+    return (_jsx(GorhomBottomSheetBackdrop, { ...props, style: styles.backdrop, opacity: 1, appearsOnIndex: 0, disappearsOnIndex: -1, pressBehavior: backdropPressBehavior, onPress: () => {
             console.log('onPress');
             onPress?.();
         } }));

package/dist/src/lib/Components/BottomSheet/CustomHandle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomHandle.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/CustomHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AAEjF,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,eAAO,MAAM,YAAY,uGAavB,CAAC"}
+{"version":3,"file":"CustomHandle.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/CustomHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AAEjF,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAyBpC,eAAO,MAAM,YAAY,uGAWvB,CAAC"}

package/dist/src/lib/Components/BottomSheet/CustomHandle.js

@@ -1,7 +1,27 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { View } from 'react-native';
+import { useStyleSheet } from '../../../styles';
+const useStyles = () => {
+    return useStyleSheet((t) => ({
+        container: {
+            height: t.spacings.s16,
+            width: t.sizes.s80,
+            alignItems: 'center',
+            justifyContent: 'center',
+            alignSelf: 'center',
+            backgroundColor: t.colors.bg.canvasSheet,
+        },
+        handle: {
+            height: t.spacings.s4,
+            width: t.sizes.s36,
+            borderRadius: t.borderRadius.full,
+            backgroundColor: t.colors.bg.mutedPressed,
+        },
+    }), []);
+};
 export const CustomHandle = forwardRef((props, ref) => {
-    return (_jsx(View, { ...props, ref: ref, className: 'h-16 w-80 items-center justify-center self-center bg-canvas-sheet', children: _jsx(View, { className: 'h-4 w-36 rounded-full bg-muted-pressed' }) }));
+    const styles = useStyles();
+    return (_jsx(View, { ...props, ref: ref, style: styles.container, children: _jsx(View, { style: styles.handle }) }));
 });
 CustomHandle.displayName = 'CustomHandle';

package/dist/src/lib/Components/BottomSheet/Scrollables.d.ts

@@ -1,10 +1,5 @@
-import { BottomSheetView as GorhomBottomSheetView, BottomSheetFlatList as GorhomBottomSheetFlatList, BottomSheetSectionList as GorhomBottomSheetSectionList, BottomSheetScrollView as GorhomBottomSheetScrollView, BottomSheetVirtualizedList as GorhomBottomSheetVirtualizedList } from '@gorhom/bottom-sheet';
 import { FC } from 'react';
-export type BottomSheetViewProps = Parameters<typeof GorhomBottomSheetView>[0];
-export type BottomSheetFlatListProps = Parameters<typeof GorhomBottomSheetFlatList>[0];
-export type BottomSheetSectionListProps = Parameters<typeof GorhomBottomSheetSectionList>[0];
-export type BottomSheetScrollViewProps = Parameters<typeof GorhomBottomSheetScrollView>[0];
-export type BottomSheetVirtualizedListProps = Parameters<typeof GorhomBottomSheetVirtualizedList>[0];
+import { BottomSheetViewProps } from './types';
 export declare const BottomSheetView: FC<BottomSheetViewProps>;
 export declare const BottomSheetFlatList: import("react").ForwardRefExoticComponent<Omit<import("@gorhom/bottom-sheet/lib/typescript/components/bottomSheetScrollable/types").BottomSheetFlatListProps<unknown>, "ref"> & import("react").RefAttributes<import("@gorhom/bottom-sheet").BottomSheetFlatListMethods>>;
 export declare const BottomSheetSectionList: import("react").ForwardRefExoticComponent<Omit<import("@gorhom/bottom-sheet/lib/typescript/components/bottomSheetScrollable/types").BottomSheetSectionListProps<unknown, unknown>, "ref"> & import("react").RefAttributes<import("@gorhom/bottom-sheet").BottomSheetSectionListMethods>>;

package/dist/src/lib/Components/BottomSheet/Scrollables.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Scrollables.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/Scrollables.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,IAAI,qBAAqB,EACxC,mBAAmB,IAAI,yBAAyB,EAChD,sBAAsB,IAAI,4BAA4B,EACtD,qBAAqB,IAAI,2BAA2B,EACpD,0BAA0B,IAAI,gCAAgC,EAC/D,MAAM,sBAAsB,CAAC;AAI9B,OAAO,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;AAIvC,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC;AAC/E,MAAM,MAAM,wBAAwB,GAAG,UAAU,CAC/C,OAAO,yBAAyB,CACjC,CAAC,CAAC,CAAC,CAAC;AACL,MAAM,MAAM,2BAA2B,GAAG,UAAU,CAClD,OAAO,4BAA4B,CACpC,CAAC,CAAC,CAAC,CAAC;AACL,MAAM,MAAM,0BAA0B,GAAG,UAAU,CACjD,OAAO,2BAA2B,CACnC,CAAC,CAAC,CAAC,CAAC;AACL,MAAM,MAAM,+BAA+B,GAAG,UAAU,CACtD,OAAO,gCAAgC,CACxC,CAAC,CAAC,CAAC,CAAC;AAoBL,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAUpD,CAAC;AAGF,eAAO,MAAM,mBAAmB,2QAa9B,CAAC;AAGH,eAAO,MAAM,sBAAsB,0RAajC,CAAC;AAGH,eAAO,MAAM,qBAAqB,sQAahC,CAAC;AAGH,eAAO,MAAM,0BAA0B,yRAarC,CAAC"}
+{"version":3,"file":"Scrollables.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/Scrollables.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;AAGvC,OAAO,EACL,oBAAoB,EAKrB,MAAM,SAAS,CAAC;AAejB,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAepD,CAAC;AAGF,eAAO,MAAM,mBAAmB,2QAe9B,CAAC;AAGH,eAAO,MAAM,sBAAsB,0RAejC,CAAC;AAGH,eAAO,MAAM,qBAAqB,sQAehC,CAAC;AAGH,eAAO,MAAM,0BAA0B,yRAerC,CAAC"}

package/dist/src/lib/Components/BottomSheet/Scrollables.js

@@ -1,41 +1,38 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { BottomSheetView as GorhomBottomSheetView, BottomSheetFlatList as GorhomBottomSheetFlatList, BottomSheetSectionList as GorhomBottomSheetSectionList, BottomSheetScrollView as GorhomBottomSheetScrollView, BottomSheetVirtualizedList as GorhomBottomSheetVirtualizedList, } from '@gorhom/bottom-sheet';
-import { cn } from '@ledgerhq/lumen-utils-shared';
-import { cva } from 'class-variance-authority';
-import { cssInterop } from 'nativewind';
 import { forwardRef } from 'react';
-const styles = cva('flex-1 px-16 pb-16');
-// Apply cssInterop to map className to style prop for Gorhom components
-const StyledBottomSheetView = cssInterop(GorhomBottomSheetView, {
-    className: 'style',
-});
-const StyledBottomSheetFlatList = cssInterop(GorhomBottomSheetFlatList, {
-    className: 'style',
-});
-const StyledBottomSheetSectionList = cssInterop(GorhomBottomSheetSectionList, {
-    className: 'style',
-});
-const StyledBottomSheetScrollView = cssInterop(GorhomBottomSheetScrollView, {
-    className: 'style',
-});
-const StyledBottomSheetVirtualizedList = cssInterop(GorhomBottomSheetVirtualizedList, { className: 'style' });
-export const BottomSheetView = ({ children, className, ...props }) => {
-    return (_jsx(StyledBottomSheetView, { className: cn(className, styles()), ...props, children: children }));
+import { useStyleSheet } from '../../../styles';
+const useScrollableStyles = () => {
+    return useStyleSheet((t) => ({
+        container: {
+            flex: 1,
+            paddingHorizontal: t.spacings.s16,
+            paddingBottom: t.spacings.s16,
+        },
+    }), []);
+};
+export const BottomSheetView = ({ children, style, ...props }) => {
+    const styles = useScrollableStyles();
+    return (_jsx(GorhomBottomSheetView, { style: [styles.container, style], ...props, children: children }));
 };
 BottomSheetView.displayName = 'BottomSheetView';
-export const BottomSheetFlatList = forwardRef(({ children, className, ...props }, ref) => {
-    return (_jsx(StyledBottomSheetFlatList, { ref: ref, className: cn(className, styles()), ...props, children: children }));
+export const BottomSheetFlatList = forwardRef(({ children, style, ...props }, ref) => {
+    const styles = useScrollableStyles();
+    return (_jsx(GorhomBottomSheetFlatList, { ref: ref, style: [styles.container, style], ...props, children: children }));
 });
 BottomSheetFlatList.displayName = 'BottomSheetFlatList';
-export const BottomSheetSectionList = forwardRef(({ children, className, ...props }, ref) => {
-    return (_jsx(StyledBottomSheetSectionList, { ref: ref, className: cn(className, styles()), ...props, children: children }));
+export const BottomSheetSectionList = forwardRef(({ children, style, ...props }, ref) => {
+    const styles = useScrollableStyles();
+    return (_jsx(GorhomBottomSheetSectionList, { ref: ref, style: [styles.container, style], ...props, children: children }));
 });
 BottomSheetSectionList.displayName = 'BottomSheetSectionList';
-export const BottomSheetScrollView = forwardRef(({ children, className, ...props }, ref) => {
-    return (_jsx(StyledBottomSheetScrollView, { ref: ref, className: cn(className, styles()), ...props, children: children }));
+export const BottomSheetScrollView = forwardRef(({ children, style, ...props }, ref) => {
+    const styles = useScrollableStyles();
+    return (_jsx(GorhomBottomSheetScrollView, { ref: ref, style: [styles.container, style], ...props, children: children }));
 });
 BottomSheetScrollView.displayName = 'BottomSheetScrollView';
-export const BottomSheetVirtualizedList = forwardRef(({ children, className, ...props }, ref) => {
-    return (_jsx(StyledBottomSheetVirtualizedList, { ref: ref, className: cn(className, styles()), ...props, children: children }));
+export const BottomSheetVirtualizedList = forwardRef(({ children, style, ...props }, ref) => {
+    const styles = useScrollableStyles();
+    return (_jsx(GorhomBottomSheetVirtualizedList, { ref: ref, style: [styles.container, style], ...props, children: children }));
 });
 BottomSheetVirtualizedList.displayName = 'BottomSheetVirtualizedList';

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

@@ -1,5 +1,6 @@
+import { BottomSheetView as GorhomBottomSheetView, BottomSheetFlatList as GorhomBottomSheetFlatList, BottomSheetSectionList as GorhomBottomSheetSectionList, BottomSheetScrollView as GorhomBottomSheetScrollView, BottomSheetVirtualizedList as GorhomBottomSheetVirtualizedList } from '@gorhom/bottom-sheet';
 import { PropsWithChildren, ReactNode } from 'react';
-import { ViewProps } from 'react-native';
+import { StyledViewProps } from '../../../styles';
 export type BottomSheetProps = PropsWithChildren & {
     /**
      * Used to locate this view in end-to-end tests.
@@ -96,7 +97,7 @@ export type BottomSheetProps = PropsWithChildren & {
      */
     enableBlurKeyboardOnGesture?: boolean;
 };
-export type BottomSheetHeaderProps = ViewProps & {
+export type BottomSheetHeaderProps = {
     /**
      * The appearance of the header.
      * @default 'compact'
@@ -116,5 +117,10 @@ export type BottomSheetHeaderProps = ViewProps & {
      * @default false
      */
     spacing?: boolean;
-};
+} & Omit<StyledViewProps, 'children'>;
+export type BottomSheetViewProps = Parameters<typeof GorhomBottomSheetView>[0];
+export type BottomSheetFlatListProps = Parameters<typeof GorhomBottomSheetFlatList>[0];
+export type BottomSheetSectionListProps = Parameters<typeof GorhomBottomSheetSectionList>[0];
+export type BottomSheetScrollViewProps = Parameters<typeof GorhomBottomSheetScrollView>[0];
+export type BottomSheetVirtualizedListProps = Parameters<typeof GorhomBottomSheetVirtualizedList>[0];
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,GAAG;IACjD;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,UAAU,CAAC,EACP,MAAM,GACN,gBAAgB,GAChB,QAAQ,GACR,OAAO,GACP,MAAM,EAAE,GACR,MAAM,EAAE,GACR,IAAI,CAAC;IACT;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,MAAM,GAAG,gBAAgB,GAAG,MAAM,CAAC;IAC3D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IAClE;;;OAGG;IACH,SAAS,CAAC,EAAE,CACV,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,MAAM,EACf,YAAY,EAAE,MAAM,EACpB,UAAU,EAAE,MAAM,KACf,IAAI,CAAC;IACV;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IAClD;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B;;;;OAIG;IACH,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,SAAS,GAAG;IAC/C;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACpC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,IAAI,qBAAqB,EACxC,mBAAmB,IAAI,yBAAyB,EAChD,sBAAsB,IAAI,4BAA4B,EACtD,qBAAqB,IAAI,2BAA2B,EACpD,0BAA0B,IAAI,gCAAgC,EAC/D,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,GAAG;IACjD;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,UAAU,CAAC,EACP,MAAM,GACN,gBAAgB,GAChB,QAAQ,GACR,OAAO,GACP,MAAM,EAAE,GACR,MAAM,EAAE,GACR,IAAI,CAAC;IACT;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,MAAM,GAAG,gBAAgB,GAAG,MAAM,CAAC;IAC3D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IAClE;;;OAGG;IACH,SAAS,CAAC,EAAE,CACV,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,MAAM,EACf,YAAY,EAAE,MAAM,EACpB,UAAU,EAAE,MAAM,KACf,IAAI,CAAC;IACV;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IAClD;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B;;;;OAIG;IACH,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACpC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC;AAC/E,MAAM,MAAM,wBAAwB,GAAG,UAAU,CAC/C,OAAO,yBAAyB,CACjC,CAAC,CAAC,CAAC,CAAC;AACL,MAAM,MAAM,2BAA2B,GAAG,UAAU,CAClD,OAAO,4BAA4B,CACpC,CAAC,CAAC,CAAC,CAAC;AACL,MAAM,MAAM,0BAA0B,GAAG,UAAU,CACjD,OAAO,2BAA2B,CACnC,CAAC,CAAC,CAAC,CAAC;AACL,MAAM,MAAM,+BAA+B,GAAG,UAAU,CACtD,OAAO,gCAAgC,CACxC,CAAC,CAAC,CAAC,CAAC"}

package/dist/src/lib/Components/Button/BaseButton.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { View } from 'react-native';
 import { IconSize } from '../Icon';
 /**
  * Base button component
@@ -12,10 +13,9 @@ export declare const BaseButton: React.ForwardRefExoticComponent<{
     loading?: boolean;
     icon?: React.ComponentType<{
         size?: IconSize;
-        className?: string;
+        style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
     }>;
     disabled?: boolean;
-    className?: string;
     children?: React.ReactNode;
-} & Omit<import("react-native").PressableProps, "children" | "disabled"> & React.RefAttributes<import("react-native").View>>;
+} & Omit<import("../../../styles").StyledPressableProps, "children"> & React.RefAttributes<View>>;
 //# sourceMappingURL=BaseButton.d.ts.map

package/dist/src/lib/Components/Button/BaseButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Button/BaseButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAgHnC;;;;GAIG;AACH,eAAO,MAAM,UAAU;;;;;;YAvGX,CAAA;iBAAsB,CAAA;;;;;4HAyKjC,CAAC"}
+{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Button/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AACrD,OAAO,EAAoB,IAAI,EAAE,MAAM,cAAc,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAoInC;;;;GAIG;AACH,eAAO,MAAM,UAAU;;;;;;YA5Gf,CAAC;aAEL,CAAC;;;;iGAyJJ,CAAC"}

package/dist/src/lib/Components/Button/BaseButton.js

@@ -1,132 +1,122 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cva } from 'class-variance-authority';
 import React from 'react';
-import { Text, Pressable } from 'react-native';
-import { cn } from '../../utils';
+import { StyleSheet, Text, View } from 'react-native';
+import { useStyleSheet } from '../../../styles';
 import { Spinner } from '../Spinner';
-const buttonVariants = {
-    root: cva('inline-flex size-fit flex-row items-center justify-center rounded-full transition-colors body-1-semi-bold', {
-        variants: {
-            appearance: {
-                base: 'bg-interactive active:bg-interactive-pressed',
-                gray: 'bg-muted active:bg-muted-pressed',
-                accent: 'bg-accent active:bg-accent-pressed',
-                transparent: 'bg-muted-transparent active:bg-muted-transparent-pressed',
-                'no-background': 'bg-transparent active:bg-base-transparent-pressed',
-                red: 'bg-error active:bg-error-pressed',
-            },
-            size: {
-                xs: 'px-12 py-8 body-2-semi-bold',
-                sm: 'px-16 py-10 body-2-semi-bold',
-                md: 'px-16 py-12',
-                lg: 'p-16',
-            },
-            isFull: {
-                true: 'w-full',
-            },
-            loading: {
-                true: '',
-            },
-            iconOnly: {
-                true: '',
-                false: '',
-            },
-            disabled: {
-                true: 'bg-disabled text-disabled active:bg-disabled',
-                false: '',
-            },
-        },
-        compoundVariants: [
-            {
-                size: 'xs',
-                iconOnly: true,
-                className: 'p-8',
-            },
-            {
-                size: 'sm',
-                iconOnly: true,
-                className: 'p-12',
-            },
-            {
-                size: 'md',
-                iconOnly: true,
-                className: 'p-12',
-            },
-            {
-                size: 'lg',
-                iconOnly: true,
-                className: 'p-16',
-            },
-            {
-                iconOnly: false,
-                className: 'gap-8',
-            },
-            {
-                appearance: 'no-background',
-                disabled: true,
-                className: 'bg-base-transparent',
-            },
-        ],
-        defaultVariants: {
-            appearance: 'base',
-            size: 'md',
-            isFull: false,
-            iconOnly: false,
-            disabled: false,
-        },
-    }),
-    label: cva('line-clamp-2 text-left text-inherit body-1-semi-bold', {
-        variants: {
-            appearance: {
-                base: 'text-on-interactive',
-                accent: 'text-on-accent',
-                red: 'text-error',
-                gray: 'text-base',
-                'no-background': 'text-base',
-                transparent: 'text-base',
+import { Pressable } from '../Utility';
+const iconSizeMap = {
+    xs: 16,
+    sm: 20,
+    md: 24,
+    lg: 24,
+};
+const useRootStyles = ({ isFull }) => {
+    return useStyleSheet((t) => {
+        return {
+            root: {
+                width: isFull ? t.sizes.full : 'auto',
             },
-            disabled: {
-                true: 'text-disabled',
+        };
+    }, [isFull]);
+};
+const useStyles = ({ appearance, size, disabled, pressed, iconOnly, isFull, }) => {
+    return useStyleSheet((t) => {
+        const bgColors = {
+            base: t.colors.bg.interactive,
+            gray: t.colors.bg.muted,
+            accent: t.colors.bg.accent,
+            transparent: t.colors.bg.mutedTransparent,
+            'no-background': 'transparent',
+            red: t.colors.bg.error,
+        };
+        const pressedBgColors = {
+            base: t.colors.bg.interactivePressed,
+            gray: t.colors.bg.mutedPressed,
+            accent: t.colors.bg.accentPressed,
+            transparent: t.colors.bg.mutedTransparentPressed,
+            'no-background': t.colors.bg.baseTransparentPressed,
+            red: t.colors.bg.errorPressed,
+        };
+        const textColors = {
+            base: t.colors.text.onInteractive,
+            accent: t.colors.text.onAccent,
+            red: t.colors.text.error,
+            gray: t.colors.text.base,
+            'no-background': t.colors.text.base,
+            transparent: t.colors.text.base,
+        };
+        const sizeStyles = {
+            xs: { paddingH: t.spacings.s12, paddingV: t.spacings.s8 },
+            sm: { paddingH: t.spacings.s16, paddingV: t.spacings.s10 },
+            md: { paddingH: t.spacings.s16, paddingV: t.spacings.s12 },
+            lg: { paddingH: t.spacings.s16, paddingV: t.spacings.s16 },
+        };
+        const iconOnlyPadding = {
+            xs: t.spacings.s8,
+            sm: t.spacings.s10,
+            md: t.spacings.s12,
+            lg: t.spacings.s16,
+        };
+        const typography = size === 'xs' || size === 'sm'
+            ? t.typographies.body2SemiBold
+            : t.typographies.body1SemiBold;
+        const currentSizeStyle = sizeStyles[size];
+        return {
+            container: StyleSheet.flatten([
+                {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderRadius: t.borderRadius.full,
+                    backgroundColor: bgColors[appearance],
+                },
+                iconOnly
+                    ? { padding: iconOnlyPadding[size] }
+                    : {
+                        paddingHorizontal: currentSizeStyle.paddingH,
+                        paddingVertical: currentSizeStyle.paddingV,
+                        gap: t.spacings.s8,
+                    },
+                isFull && { width: t.sizes.full },
+                pressed && { backgroundColor: pressedBgColors[appearance] },
+                disabled && { backgroundColor: t.colors.bg.disabled },
+                appearance === 'no-background' &&
+                    disabled && { backgroundColor: 'transparent' },
+            ]),
+            label: StyleSheet.flatten([
+                typography,
+                {
+                    color: disabled ? t.colors.text.disabled : textColors[appearance],
+                    textAlign: 'left',
+                },
+            ]),
+            icon: {
+                flexShrink: 0,
+                color: disabled ? t.colors.text.disabled : textColors[appearance],
             },
-        },
-    }),
+        };
+    }, [appearance, size, disabled, pressed, iconOnly, isFull]);
 };
-const iconVariants = cva('shrink-0', {
-    variants: {
-        appearance: {
-            base: 'text-on-interactive',
-            accent: 'text-on-accent',
-            red: 'text-error',
-            gray: 'text-base',
-            'no-background': 'text-base',
-            transparent: 'text-base',
-        },
-        disabled: {
-            true: 'text-disabled',
-        },
-    },
-});
 /**
  * Base button component
  * @default appearance 'base'
  * @default size 'md'
  */
-export const BaseButton = React.forwardRef(({ className, children, appearance = 'base', size = 'md', isFull, loading, icon: IconProp, disabled, ...props }, ref) => {
-    const iconOnly = Boolean(IconProp && !children);
-    const iconSizeMap = {
-        xs: 16,
-        sm: 20,
-        md: 24,
-        lg: 24,
-    };
-    const calculatedIconSize = size ? iconSizeMap[size] : 24;
-    return (_jsxs(Pressable, { ref: ref, className: cn(className, buttonVariants.root({
-            appearance,
-            size,
-            isFull,
-            loading,
-            iconOnly,
-            disabled,
-        })), disabled: disabled ?? false, ...props, children: [loading && (_jsx(Spinner, { size: calculatedIconSize, className: iconVariants({ appearance, disabled }) })), !loading && IconProp && (_jsx(IconProp, { size: calculatedIconSize, className: iconVariants({ appearance, disabled }) })), children && (_jsx(Text, { className: buttonVariants.label({ appearance, disabled }), children: children }))] }));
+export const BaseButton = React.forwardRef(({ lx, style, children, appearance = 'base', size = 'md', isFull = false, loading = false, icon: IconProp, disabled = false, ...props }, ref) => {
+    const rootStyles = useRootStyles({ isFull });
+    return (_jsx(Pressable, { ref: ref, lx: lx, style: StyleSheet.flatten([style, rootStyles.root]), disabled: disabled, accessibilityRole: 'button', accessibilityState: { disabled }, ...props, children: ({ pressed }) => (_jsx(BaseButtonContent, { appearance: appearance, size: size, disabled: disabled, pressed: pressed, isFull: isFull, loading: loading, IconProp: IconProp, children: children })) }));
 });
+const BaseButtonContent = ({ appearance, size, disabled, pressed, isFull, loading, IconProp, children, }) => {
+    const calculatedIconSize = iconSizeMap[size];
+    const iconOnly = Boolean(IconProp && !children);
+    const styles = useStyles({
+        appearance,
+        size,
+        disabled,
+        pressed,
+        iconOnly,
+        isFull,
+    });
+    return (_jsxs(View, { style: styles.container, testID: 'base-button-content', children: [loading && (_jsx(Spinner, { size: calculatedIconSize, style: { color: styles.icon.color } })), !loading && IconProp && (_jsx(IconProp, { size: calculatedIconSize, style: styles.icon })), children && (_jsx(Text, { style: styles.label, numberOfLines: 2, children: children }))] }));
+};
 BaseButton.displayName = 'BaseButton';