@utilitywarehouse/hearth-react-native 0.1.0 → 0.2.0

package/build/components/Input/InputField.js

@@ -1,47 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useBottomSheetInternal } from '@gorhom/bottom-sheet';
-import { useCallback, useEffect } from 'react';
-import { TextInput as RNTextInput, } from 'react-native';
+import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
+import { TextInput as RNTextInput } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { useInputContext } from './Input.context';
-const InputField = ({ style, onFocus, onBlur, ...props }) => {
+const InputField = ({ style, onFocus, onBlur, inBottomSheet = false, ...props }) => {
     const { disabled, focused = false, type } = useInputContext();
     styles.useVariants({ focused, type });
-    const { components, color } = useTheme();
-    // Copied from @gorhom/bottom-sheet BottomSheetTextInput
-    const bottomSheetContext = useBottomSheetInternal(true);
-    const handleOnFocus = useCallback((args) => {
-        if (bottomSheetContext) {
-            bottomSheetContext.shouldHandleKeyboardEvents.value = true;
-        }
-        if (onFocus) {
-            onFocus(args);
-        }
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [onFocus, bottomSheetContext?.shouldHandleKeyboardEvents]);
-    const handleOnBlur = useCallback((args) => {
-        if (bottomSheetContext) {
-            bottomSheetContext.shouldHandleKeyboardEvents.value = false;
-        }
-        if (onBlur) {
-            onBlur(args);
-        }
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [onBlur, bottomSheetContext?.shouldHandleKeyboardEvents]);
-    useEffect(() => {
-        return () => {
-            // Reset the flag on unmount
-            if (bottomSheetContext) {
-                bottomSheetContext.shouldHandleKeyboardEvents.value = false;
-            }
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [bottomSheetContext?.shouldHandleKeyboardEvents]);
-    // End of copied code
-    return (_jsx(RNTextInput, { placeholderTextColor: components.input.placeholderColor, selectionColor: color.purple[700], cursorColor: color.purple[700], verticalAlign: "middle", "aria-disabled": disabled, onFocus: handleOnFocus, onBlur: handleOnBlur, ...props, style: [styles.input, style] }));
+    const { color } = useTheme();
+    if (inBottomSheet) {
+        return (_jsx(BottomSheetTextInput, { placeholderTextColor: color.text.secondary, selectionColor: color.purple[700], cursorColor: color.purple[700], verticalAlign: "middle", "aria-disabled": disabled, ...props, style: [styles.input, style] }));
+    }
+    return (_jsx(RNTextInput, { placeholderTextColor: color.text.secondary, selectionColor: color.purple[700], cursorColor: color.purple[700], verticalAlign: "middle", "aria-disabled": disabled, ...props, style: [styles.input, style] }));
 };
 InputField.displayName = 'InputField';
 const styles = StyleSheet.create(theme => ({
@@ -51,7 +21,7 @@ const styles = StyleSheet.create(theme => ({
         width: 'auto',
         justifyContent: 'center',
         alignItems: 'center',
-        color: theme.components.text.color,
+        color: theme.color.text.primary,
         fontSize: theme.typography.mobile.bodyText.md.fontSize,
         fontFamily: theme.typography.mobile.bodyText.fontFamily,
         fontWeight: theme.typography.mobile.bodyText.fontWeight,

package/build/components/Input/InputIcon.js

@@ -10,7 +10,7 @@ const InputIcon = ({ children, ...props }) => {
 InputIcon.displayName = 'InputIcon';
 const styles = StyleSheet.create(theme => ({
     icon: {
-        color: theme.components.icon.color,
+        color: theme.color.icon.primary,
     },
 }));
 export default InputIcon;

package/build/components/Input/InputRoot.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { StyleSheet } from 'react-native-unistyles';
 import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 import { InputContext } from './Input.context';
 const InputRoot = ({ children, style, states, validationStatus, type, ...props }) => {
     const { focus = false, disabled = false, readonly = false } = states || {};
@@ -12,18 +12,18 @@ const InputRoot = ({ children, style, states, validationStatus, type, ...props }
 InputRoot.displayName = 'InputRoot';
 const styles = StyleSheet.create(theme => ({
     container: {
-        borderColor: theme.components.input.borderColor,
+        borderColor: theme.color.border.strong,
         height: theme.components.input.height,
         borderRadius: theme.components.input.borderRadius,
         flexDirection: 'row',
         overflow: 'hidden',
         alignContent: 'center',
         paddingHorizontal: theme.components.input.paddingHorizontal,
-        backgroundColor: theme.components.input.backgroundColor,
+        backgroundColor: theme.color.surface.neutral.strong,
         gap: theme.components.input.gap,
         outlineStyle: 'solid',
         outlineWidth: theme.components.input.borderWidth,
-        outlineColor: theme.components.input.borderColor,
+        outlineColor: theme.color.border.strong,
         variants: {
             focus: {
                 true: {
@@ -32,12 +32,12 @@ const styles = StyleSheet.create(theme => ({
             },
             validationStatus: {
                 invalid: {
-                    borderColor: theme.components.input.borderColorInvalid,
-                    outlineColor: theme.components.input.borderColorInvalid,
+                    borderColor: theme.color.feedback.danger.border,
+                    outlineColor: theme.color.feedback.danger.border,
                 },
                 valid: {
-                    borderColor: theme.components.input.borderColorValid,
-                    outlineColor: theme.components.input.borderColorValid,
+                    borderColor: theme.color.feedback.positive.border,
+                    outlineColor: theme.color.feedback.positive.border,
                 },
                 initial: {},
             },
@@ -48,7 +48,7 @@ const styles = StyleSheet.create(theme => ({
             },
             readonly: {
                 true: {
-                    borderColor: theme.components.input.borderColorReadOnly,
+                    borderColor: theme.color.border.subtle,
                 },
             },
             type: {

package/build/components/Label/Label.js

@@ -8,7 +8,7 @@ const Label = ({ children, nested, disabled, style, ...props }) => {
 Label.displayName = 'Label';
 const styles = StyleSheet.create(theme => ({
     text: {
-        color: theme.components.text.color,
+        color: theme.color.text.primary,
         variants: {
             disabled: {
                 true: {

package/build/components/Link/LinkRoot.js

@@ -21,7 +21,7 @@ const styles = StyleSheet.create(theme => ({
                 borderRadius: theme.borderRadius.xs,
                 outlineStyle: 'solid',
                 outlineWidth: 2,
-                outlineColor: theme.components.focus.border,
+                outlineColor: theme.color.focus.primary,
                 outlineOffset: 1,
                 boxShadow: 'none',
             },
@@ -36,7 +36,7 @@ const styles = StyleSheet.create(theme => ({
                 true: {
                     _web: {
                         '_focus-visible': {
-                            outlineColor: theme.components.focus.borderInverted,
+                            outlineColor: theme.color.focus.inverted,
                         },
                     },
                 },

package/build/components/List/List.d.ts

@@ -1,6 +1,6 @@
 import type ListProps from './List.props';
 declare const List: {
-    ({ children, headingText, headingHelperText, headingLinkText, headingLinkHref, headingLinkOnPress, headingLinkTarget, headingLinkDisabled, headingLinkIcon, headingLinkIconPosition, headingLinkShowIcon, ...props }: ListProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, heading, helperText, linkText, linkHref, linkIcon, linkIconPosition, linkOnPress, linkTarget, linkShowIcon, ...props }: ListProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default List;

package/build/components/List/List.js

@@ -4,7 +4,7 @@ import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Card } from '../Card';
 import { ListContext } from './List.context';
-import { ListHeading } from './ListHeading';
+import { SectionHeader } from '../SectionHeader';
 import { ListItem } from './ListItem';
 const markFirstListItem = (children) => {
     let found = false;
@@ -33,16 +33,18 @@ const markFirstListItem = (children) => {
     };
     return recursiveClone(children);
 };
-const List = ({ children, headingText, headingHelperText, headingLinkText, headingLinkHref, headingLinkOnPress, headingLinkTarget, headingLinkDisabled, headingLinkIcon, headingLinkIconPosition, headingLinkShowIcon, ...props }) => {
+const List = ({ children, heading, helperText, linkText, linkHref, linkIcon, linkIconPosition, linkOnPress, linkTarget, linkShowIcon, ...props }) => {
     const { loading, disabled, divider = true, container = 'none' } = props;
     const containerToCard = {
         variant: container === 'subtleWhite' || container === 'subtleWarmWhite' ? 'subtle' : 'emphasis',
-        colorScheme: container === 'subtleWhite' || container === 'emphasisWhite' ? 'white' : 'warmWhite',
+        colorScheme: container === 'subtleWhite' || container === 'emphasisWhite'
+            ? 'neutralStrong'
+            : 'neutralSubtle',
     };
     const updatedChildren = markFirstListItem(children);
     const value = useMemo(() => ({ loading, disabled, divider, container }), [loading, disabled, divider, container]);
     styles.useVariants({ disabled });
-    return (_jsx(ListContext.Provider, { value: value, children: _jsxs(View, { ...props, style: [styles.container, props.style], children: [headingText ? (_jsx(ListHeading, { text: headingText, helperText: headingHelperText, linkText: headingLinkText, linkHref: headingLinkHref, linkOnPress: headingLinkOnPress, linkTarget: headingLinkTarget, linkDisabled: headingLinkDisabled, linkIcon: headingLinkIcon, linkIconPosition: headingLinkIconPosition, linkShowIcon: headingLinkShowIcon })) : null, container === 'none' ? (_jsx(View, { children: updatedChildren })) : (_jsx(Card, { ...containerToCard, noPadding: true, style: styles.card, children: _jsx(_Fragment, { children: updatedChildren }) }))] }) }));
+    return (_jsx(ListContext.Provider, { value: value, children: _jsxs(View, { ...props, style: [styles.container, props.style], children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, linkText: linkText, linkHref: linkHref, linkOnPress: linkOnPress, linkTarget: linkTarget, linkIcon: linkIcon, linkIconPosition: linkIconPosition, linkShowIcon: linkShowIcon })) : null, container === 'none' ? (_jsx(View, { children: updatedChildren })) : (_jsx(Card, { ...containerToCard, noPadding: true, style: styles.card, children: _jsx(_Fragment, { children: updatedChildren }) }))] }) }));
 };
 List.displayName = 'List';
 const styles = StyleSheet.create(theme => ({

package/build/components/List/List.props.d.ts

@@ -2,16 +2,15 @@ import type { ViewProps } from 'react-native';
 import { ComponentType } from 'react';
 interface ListProps extends ViewProps {
     container?: 'none' | 'subtleWhite' | 'emphasisWhite' | 'subtleWarmWhite' | 'emphasisWarmWhite';
-    headingText?: string;
-    headingHelperText?: string;
-    headingLinkText?: string;
-    headingLinkHref?: string;
-    headingLinkOnPress?: () => void;
-    headingLinkTarget?: '_blank' | '_self' | '_parent' | '_top';
-    headingLinkDisabled?: boolean;
-    headingLinkIcon?: ComponentType;
-    headingLinkIconPosition?: 'left' | 'right';
-    headingLinkShowIcon?: boolean;
+    heading?: string;
+    helperText?: string;
+    linkText?: string;
+    linkHref?: string;
+    linkIcon?: ComponentType;
+    linkIconPosition?: 'left' | 'right';
+    linkOnPress?: () => void;
+    linkTarget?: '_blank' | '_self' | '_parent' | '_top';
+    linkShowIcon?: boolean;
     disabled?: boolean;
     loading?: boolean;
     divider?: boolean;

package/build/components/List/ListItem/ListItemHelperText.js

@@ -7,7 +7,7 @@ const ListItemHelperText = ({ children, ...props }) => {
 ListItemHelperText.displayName = 'ListItemHelperText';
 const styles = StyleSheet.create(theme => ({
     text: {
-        color: theme.components.text.colorSecondary,
+        color: theme.color.text.secondary,
     },
 }));
 export default ListItemHelperText;

package/build/components/List/ListItem/ListItemIcon.js

@@ -10,7 +10,7 @@ const ListItemIcon = ({ children, ...props }) => {
 ListItemIcon.displayName = 'ListItemIcon';
 const styles = StyleSheet.create(theme => ({
     icon: {
-        color: theme.components.icon.color,
+        color: theme.color.icon.primary,
         width: 24,
         height: 24,
     },

package/build/components/List/ListItem/ListItemRoot.js

@@ -59,8 +59,8 @@ const ListItemRoot = ({ text, helperText, leadingContent, trailingContent, disab
 ListItemRoot.displayName = 'ListItemRoot';
 const styles = StyleSheet.create(theme => ({
     container: {
-        paddingVertical: theme.components.list.item.padding,
-        paddingHorizontal: theme.components.list.item.padding,
+        paddingVertical: theme.components.list.item.functional.padding,
+        paddingHorizontal: theme.components.list.item.functional.padding,
         flexDirection: 'row',
         gap: theme.components.list.item.gap,
         variants: {
@@ -77,10 +77,10 @@ const styles = StyleSheet.create(theme => ({
             },
             variant: {
                 subtle: {
-                    borderTopColor: theme.components.list.item.subtle.borderColor,
+                    borderTopColor: theme.color.border.subtle,
                 },
                 emphasis: {
-                    borderTopColor: theme.components.list.item.emphasis.borderColor,
+                    borderTopColor: theme.color.border.strong,
                 },
             },
             disabled: {
@@ -94,7 +94,16 @@ const styles = StyleSheet.create(theme => ({
                 },
             },
             showPressed: {
-                true: {},
+                true: {
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
+                        },
+                        _active: {
+                            backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+                        },
+                    },
+                },
                 false: {
                     cursor: 'auto',
                 },
@@ -117,7 +126,7 @@ const styles = StyleSheet.create(theme => ({
                 showPressed: true,
                 active: true,
                 styles: {
-                    backgroundColor: theme.components.list.item.backgroundColorActive,
+                    backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
                 },
             },
         ],

package/build/components/List/ListItem/ListItemTrailingIcon.js

@@ -10,7 +10,7 @@ const ListItemTrailingIcon = ({ children, ...props }) => {
 ListItemTrailingIcon.displayName = 'ListItemTrailingIcon';
 const styles = StyleSheet.create(theme => ({
     icon: {
-        color: theme.components.icon.color,
+        color: theme.color.icon.primary,
         width: 24,
         height: 24,
     },

package/build/components/List/index.d.ts

@@ -1,4 +1,3 @@
 export { default as List } from './List';
 export { useListContext } from './List.context';
 export * from './ListItem';
-export * from './ListHeading';

package/build/components/List/index.js

@@ -1,4 +1,3 @@
 export { default as List } from './List';
 export { useListContext } from './List.context';
 export * from './ListItem';
-export * from './ListHeading';

package/build/components/Modal/Modal.d.ts

@@ -0,0 +1,7 @@
+import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+import ModalProps from './Modal.props';
+type Modal<T = any> = BottomSheetModalMethods<T> & {
+    triggerCloseAnimation?: () => void;
+};
+declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, fullscreen, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export default Modal;

package/build/components/Modal/Modal.js

@@ -0,0 +1,164 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { useCallback, useEffect, useImperativeHandle, useRef } from 'react';
+import { AccessibilityInfo, Image, Platform, View, findNodeHandle } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withDelay, withTiming, } from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
+import { hexWithOpacity } from '../../utils';
+import { BodyText } from '../BodyText';
+import { BottomSheetModal, BottomSheetScrollView } from '../BottomSheet';
+import { Button } from '../Button';
+import { Heading } from '../Heading';
+import { Spinner } from '../Spinner';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, fullscreen = false, ...props }) => {
+    const bottomSheetModalRef = useRef(null);
+    const viewRef = useRef(null);
+    const scrollViewRef = useRef(null);
+    const theme = useTheme();
+    const backgroundOpacity = useSharedValue(0);
+    const pretendContentTranslateY = useSharedValue(20);
+    const triggerCloseAnimation = useCallback(() => {
+        if (Platform.OS === 'android' && fullscreen) {
+            pretendContentTranslateY.value = withTiming(20, {
+                duration: 50,
+                easing: Easing.in(Easing.quad),
+            });
+            backgroundOpacity.value = withTiming(0, {
+                duration: 100,
+                easing: Easing.in(Easing.quad),
+            });
+        }
+    }, [Platform.OS, fullscreen, pretendContentTranslateY, backgroundOpacity]);
+    useImperativeHandle(ref, () => ({
+        ...bottomSheetModalRef.current,
+        triggerCloseAnimation,
+    }));
+    // Trigger animations on render for fullscreen Android modal
+    useEffect(() => {
+        if (Platform.OS === 'android' && fullscreen) {
+            backgroundOpacity.value = withDelay(300, withTiming(1, {
+                duration: 200,
+                easing: Easing.out(Easing.quad),
+            }));
+            pretendContentTranslateY.value = withDelay(500, withTiming(0, {
+                duration: 300,
+                easing: Easing.out(Easing.quad),
+            }));
+        }
+    }, [fullscreen, backgroundOpacity, pretendContentTranslateY]);
+    const animatedBackgroundStyle = useAnimatedStyle(() => ({
+        backgroundColor: hexWithOpacity(theme.components.overlay.backgroundColor, backgroundOpacity.value * (theme.components.overlay.opacity / 100)),
+    }));
+    const animatedFullscreenStyle = useAnimatedStyle(() => ({
+        backgroundColor: hexWithOpacity(theme.components.overlay.backgroundColor, backgroundOpacity.value * (theme.components.overlay.opacity / 100)),
+    }));
+    const animatedPretendContentStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: pretendContentTranslateY.value }],
+    }));
+    const handleChange = (index, position, type) => {
+        if (index > -1) {
+            // Add a small delay to ensure the modal is fully rendered
+            setTimeout(() => {
+                // Announce the modal opening to screen readers
+                AccessibilityInfo.announceForAccessibility('Modal opened.');
+                const scrollViewTargetRef = scrollViewRef.current?.getInnerViewNode();
+                const targetRef = viewRef.current;
+                if ((Platform.OS === 'android' && targetRef) || scrollViewTargetRef) {
+                    const nodeHandle = findNodeHandle(Platform.OS === 'android' ? targetRef : scrollViewTargetRef);
+                    if (nodeHandle) {
+                        AccessibilityInfo.setAccessibilityFocus(nodeHandle);
+                    }
+                }
+            }, 100);
+        }
+        props.onChange?.(index, position, type);
+    };
+    const handleCloseButtonPress = () => {
+        bottomSheetModalRef.current?.dismiss();
+        if (onPressCloseButton) {
+            onPressCloseButton();
+        }
+    };
+    const handlePrimaryButtonPress = () => {
+        if (onPressPrimaryButton) {
+            onPressPrimaryButton();
+        }
+        if (closeOnPrimaryButtonPress) {
+            bottomSheetModalRef.current?.dismiss();
+        }
+    };
+    const handleSecondaryButtonPress = () => {
+        if (onPressSecondaryButton) {
+            onPressSecondaryButton();
+        }
+        if (closeOnSecondaryButtonPress) {
+            bottomSheetModalRef.current?.dismiss();
+        }
+    };
+    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: "Loading..." })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, description && !image ? _jsx(BodyText, { accessible: true, children: description }) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [_jsx(Image, { style: styles.image, ...image }), _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : null] })] })) : null, children, _jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] })] })) }));
+    return fullscreen ? (_jsxs(View, { style: { flex: 1, backgroundColor: theme.color.background.primary }, children: [Platform.OS === 'android' ? (_jsx(Animated.View, { style: [styles.androidContainer, animatedBackgroundStyle], children: _jsx(Animated.View, { style: [styles.pretendContent, animatedPretendContentStyle] }) })) : null, _jsx(Animated.View, { style: [styles.fullscreenContainer, Platform.OS === 'android' && animatedFullscreenStyle], children: _jsx(View, { style: styles.fullscreenContent, children: content }) })] })) : (_jsx(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, ...props, onChange: handleChange, children: _jsx(BottomSheetScrollView, { contentContainerStyle: styles.container, ref: scrollViewRef, children: content }) }));
+};
+const styles = StyleSheet.create((theme, rt) => ({
+    container: {
+        flex: 1,
+        gap: theme.components.dialog.gap,
+    },
+    header: {
+        flexDirection: 'row',
+        gap: theme.components.dialog.gap,
+    },
+    headerTextContent: {
+        flex: 1,
+        gap: theme.components.dialog.content.gap,
+    },
+    image: {
+        width: 260,
+        height: 260,
+    },
+    imageContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        flex: 1,
+    },
+    textContent: {
+        gap: theme.components.dialog.content.gap,
+    },
+    loadingContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: 140,
+        gap: theme.components.dialog.content.gap,
+    },
+    footer: {
+        gap: theme.components.dialog.action.gap,
+    },
+    fullscreenContainer: {
+        flex: 1,
+        ...(Platform.OS === 'ios' ? { backgroundColor: theme.components.overlay.backgroundColor } : {}),
+    },
+    fullscreenContent: {
+        flex: 1,
+        borderTopLeftRadius: theme.components.dialog.borderRadius,
+        borderTopRightRadius: theme.components.dialog.borderRadius,
+        backgroundColor: theme.color.surface.neutral.strong,
+        gap: theme.components.dialog.gap,
+        padding: theme.components.dialog.padding,
+        paddingBottom: theme.components.dialog.padding + rt.insets.bottom,
+    },
+    androidContainer: {
+        height: rt.insets.top + 18,
+        paddingLeft: theme.components.dialog.padding,
+        paddingRight: theme.components.dialog.padding,
+        justifyContent: 'flex-end',
+    },
+    pretendContent: {
+        borderTopLeftRadius: theme.components.dialog.borderRadius,
+        borderTopRightRadius: theme.components.dialog.borderRadius,
+        height: 12,
+        backgroundColor: theme.components.parts.modalStack.backgroundColorCardTop,
+    },
+}));
+export default Modal;

package/build/components/Modal/Modal.props.d.ts

@@ -0,0 +1,24 @@
+import { ImageProps, ViewProps } from 'react-native';
+import { BottomSheetProps } from '../BottomSheet';
+import { ButtonWithoutChildrenProps } from '../Button/Button.props';
+import { UnstyledIconButtonProps } from '../UnstyledIconButton';
+interface ModalProps extends Omit<BottomSheetProps, 'children'> {
+    loading?: boolean;
+    image?: ImageProps;
+    showCloseButton?: boolean;
+    heading?: string;
+    description?: string;
+    fullscreen?: boolean;
+    children?: ViewProps['children'];
+    onPressPrimaryButton?: () => void;
+    primaryButtonText?: string;
+    onPressSecondaryButton?: () => void;
+    closeOnPrimaryButtonPress?: boolean;
+    secondaryButtonText?: string;
+    onPressCloseButton?: () => void;
+    closeOnSecondaryButtonPress?: boolean;
+    primaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
+    secondaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
+    closeButtonProps?: Omit<UnstyledIconButtonProps, 'children'>;
+}
+export default ModalProps;

package/build/components/Modal/Modal.web.d.ts

@@ -0,0 +1,7 @@
+import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+import ModalProps from './Modal.props';
+type Modal<T = any> = BottomSheetModalMethods<T> & {
+    triggerCloseAnimation?: () => void;
+};
+declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, fullscreen, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export default Modal;