@utilitywarehouse/hearth-react-native 0.8.2 → 0.10.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.8.2 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.10.0 build /home/runner/work/hearth/hearth/packages/react-native
 > tsc
 

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.8.2 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.10.0 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint --max-warnings 0
 
 Rule | Time (ms) | Relative

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.10.0
+
+### Minor Changes
+
+- [#659](https://github.com/utilitywarehouse/hearth/pull/659) [`99afbed`](https://github.com/utilitywarehouse/hearth/commit/99afbed95df550d5d5a8bb6e04f7640077bf4883) Thanks [@MichalCiesliczka](https://github.com/MichalCiesliczka)! - Adds `Pill` and `PillGroup` components
+
+- [#671](https://github.com/utilitywarehouse/hearth/pull/671) [`706448d`](https://github.com/utilitywarehouse/hearth/commit/706448d91f354cb96a71a5f3acc9d17aaa767078) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `Toast` component
+
+## 0.9.0
+
+### Minor Changes
+
+- [#658](https://github.com/utilitywarehouse/hearth/pull/658) [`2ac2366`](https://github.com/utilitywarehouse/hearth/commit/2ac2366aaa7f3b253fd9336664a73a64f1ab91a5) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `Menu` component
+
+- [#656](https://github.com/utilitywarehouse/hearth/pull/656) [`a01a49a`](https://github.com/utilitywarehouse/hearth/commit/a01a49a49ec1dd3c04684ce010281030d45c77a1) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `fullscreen` and `inNavModal` props to `Modal`
+
 ## 0.8.2
 
 ### Patch Changes

package/build/components/Banner/Banner.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronRightSmallIcon, CloseSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { Pressable, View } from 'react-native';
+import { Image, Pressable, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { Card } from '../Card';
@@ -8,6 +8,9 @@ import { Heading } from '../Heading';
 import { IconContainer } from '../IconContainer';
 import { ThemedImage } from '../ThemedImage';
 import { UnstyledIconButton } from '../UnstyledIconButton';
+const isThemedImageProps = (props) => {
+    return 'light' in props && 'dark' in props;
+};
 const Banner = ({ icon, iconContainerVariant = 'subtle', iconContainerSize = 'md', iconContainerColor = 'pig', illustration, image, heading, description, direction = 'horizontal', link, button, onPress, onClose, variant = 'subtle', colorScheme = 'pig', style, ...props }) => {
     const hasIllustration = Boolean(illustration);
     styles.useVariants({ direction, hasIllustration });
@@ -16,10 +19,16 @@ const Banner = ({ icon, iconContainerVariant = 'subtle', iconContainerSize = 'md
             return (_jsx(IconContainer, { icon: icon, variant: iconContainerVariant, size: iconContainerSize, color: iconContainerColor, style: styles.media }));
         }
         if (illustration) {
-            return (_jsx(ThemedImage, { ...illustration, resizeMode: "cover", style: [styles.media, styles.imageWrapper, illustration.style] }));
+            if (isThemedImageProps(illustration)) {
+                return (_jsx(ThemedImage, { ...illustration, resizeMode: "cover", style: [styles.media, styles.imageWrapper, illustration.style] }));
+            }
+            return (_jsx(Image, { ...illustration, resizeMode: "cover", style: [styles.media, styles.imageWrapper, illustration.style] }));
         }
         if (image) {
-            return (_jsx(View, { style: [styles.media, styles.imageWrapper], children: _jsx(ThemedImage, { ...image, style: [styles.image, image.style] }) }));
+            if (isThemedImageProps(image)) {
+                return (_jsx(View, { style: [styles.media, styles.imageWrapper], children: _jsx(ThemedImage, { ...image, style: [styles.image, image.style] }) }));
+            }
+            return (_jsx(View, { style: [styles.media, styles.imageWrapper], children: _jsx(Image, { ...image, style: [styles.image, image.style] }) }));
         }
         return null;
     };
@@ -32,7 +41,7 @@ const Banner = ({ icon, iconContainerVariant = 'subtle', iconContainerSize = 'md
         }
         return null;
     };
-    const content = (_jsxs(View, { style: styles.container, children: [renderIconOrImage(), _jsxs(View, { style: styles.contentContainer, children: [_jsxs(View, { style: styles.contentTextContainer, children: [_jsxs(View, { style: styles.textContainer, children: [_jsx(Heading, { size: "sm", style: styles.heading, textAlign: hasIllustration && direction === 'vertical' ? 'center' : 'left', children: heading }), _jsx(BodyText, { size: "md", style: styles.description, textAlign: hasIllustration && direction === 'vertical' ? 'center' : 'left', children: description })] }), renderAction()] }), onPress && (_jsx(UnstyledIconButton, { icon: ChevronRightSmallIcon, size: "sm", onPress: onPress, style: styles.chevron })), onClose && (_jsx(UnstyledIconButton, { icon: CloseSmallIcon, size: "sm", onPress: onClose, style: styles.closeButton, accessibilityLabel: "Close banner" }))] })] }));
+    const content = (_jsxs(View, { style: styles.container, children: [onClose && direction === 'vertical' && (_jsx(UnstyledIconButton, { icon: CloseSmallIcon, size: "sm", onPress: onClose, style: styles.closeButton, accessibilityLabel: "Close banner" })), renderIconOrImage(), _jsxs(View, { style: styles.contentContainer, children: [_jsxs(View, { style: styles.contentTextContainer, children: [_jsxs(View, { style: styles.textContainer, children: [_jsx(Heading, { size: "sm", style: styles.heading, textAlign: hasIllustration && direction === 'vertical' ? 'center' : 'left', children: heading }), _jsx(BodyText, { size: "md", style: styles.description, textAlign: hasIllustration && direction === 'vertical' ? 'center' : 'left', children: description })] }), renderAction()] }), onPress && (_jsx(UnstyledIconButton, { icon: ChevronRightSmallIcon, size: "sm", onPress: onPress, style: styles.chevron })), onClose && direction === 'horizontal' && (_jsx(UnstyledIconButton, { icon: CloseSmallIcon, size: "sm", onPress: onClose, style: styles.closeButton, accessibilityLabel: "Close banner" }))] })] }));
     if (onPress) {
         return (_jsx(Card, { variant: variant, style: [styles.card, style], ...props, children: _jsx(Pressable, { onPress: onPress, accessibilityRole: "button", style: styles.pressable, children: content }) }));
     }
@@ -40,9 +49,9 @@ const Banner = ({ icon, iconContainerVariant = 'subtle', iconContainerSize = 'md
 };
 Banner.displayName = 'Banner';
 const styles = StyleSheet.create(theme => ({
-    card: {},
+    card: { flexDirection: 'row', _web: { flexDirection: 'column' } },
     pressable: {
-        width: '100%',
+        flex: 1,
     },
     container: {
         flexDirection: 'row',
@@ -176,6 +185,16 @@ const styles = StyleSheet.create(theme => ({
     },
     closeButton: {
         alignSelf: 'flex-start',
+        variants: {
+            direction: {
+                vertical: {
+                    position: 'absolute',
+                    top: 0,
+                    right: 0,
+                },
+                horizontal: {},
+            },
+        },
     },
 }));
 export default Banner;

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

@@ -28,12 +28,12 @@ export interface BannerProps extends Omit<CardProps, 'noPadding' | 'variant' | '
      * Illustration to display in the banner
      * Mutually exclusive with icon and image
      */
-    illustration?: ThemedImageProps & ImageProps;
+    illustration?: ThemedImageProps | ImageProps;
     /**
      * Image to display in the banner
      * Mutually exclusive with icon and illustration
      */
-    image?: ThemedImageProps & ImageProps;
+    image?: ThemedImageProps | ImageProps;
     /**
      * Heading text
      */

package/build/components/BottomSheet/BottomSheetHandle.js

@@ -1,8 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { BottomSheetHandle as Handle } from '@gorhom/bottom-sheet';
+import { Platform, View } from 'react-native';
 import { StyleSheet, withUnistyles } from 'react-native-unistyles';
 const StyledBottomSheetHandle = withUnistyles(Handle);
 const BottomSheetHandle = ({ style, indicatorStyle, ...props }) => {
+    if (Platform.OS === 'web') {
+        return (_jsx(View, { style: [styles.handle, style], children: _jsx(View, { style: [styles.indicator, indicatorStyle] }) }));
+    }
     return (_jsx(StyledBottomSheetHandle, { style: [styles.handle, style], indicatorStyle: [styles.indicator, indicatorStyle], ...props }));
 };
 const styles = StyleSheet.create(theme => ({
@@ -13,6 +17,10 @@ const styles = StyleSheet.create(theme => ({
         paddingTop: theme.components.bottomSheet.padding,
         paddingHorizontal: theme.components.bottomSheet.padding,
         paddingBottom: theme.components.bottomSheet.gap,
+        _web: {
+            alignItems: 'center',
+            cursor: 'grab',
+        },
     },
     indicator: {
         width: theme.components.bottomSheet.handle.width,

package/build/components/Menu/Menu.context.d.ts

@@ -0,0 +1,5 @@
+export interface IMenuContext {
+    close: () => void;
+}
+export declare const MenuContext: import("react").Context<IMenuContext | undefined>;
+export declare const useMenuContext: () => IMenuContext;

package/build/components/Menu/Menu.context.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+export const MenuContext = createContext(undefined);
+export const useMenuContext = () => {
+    const context = useContext(MenuContext);
+    if (!context) {
+        throw new Error('useMenuContext must be used within a Menu component');
+    }
+    return context;
+};

package/build/components/Menu/Menu.d.ts

@@ -0,0 +1,4 @@
+import type MenuProps from './Menu.props';
+import type { MenuMethods } from './Menu.props';
+declare const Menu: import("react").ForwardRefExoticComponent<MenuProps & import("react").RefAttributes<MenuMethods>>;
+export default Menu;

package/build/components/Menu/Menu.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { BottomSheetModal, BottomSheetScrollView } from '../BottomSheet';
+import { MenuContext } from './Menu.context';
+const Menu = forwardRef(({ heading, children, bottomSheetProps }, ref) => {
+    const bottomSheetModalRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        present: () => bottomSheetModalRef.current?.present(),
+        dismiss: () => bottomSheetModalRef.current?.dismiss(),
+    }), []);
+    const handleClose = useCallback(() => {
+        bottomSheetModalRef.current?.dismiss();
+    }, []);
+    const contextValue = useMemo(() => ({ close: handleClose }), [handleClose]);
+    return (_jsx(BottomSheetModal, { ref: bottomSheetModalRef, ...bottomSheetProps, children: _jsx(BottomSheetScrollView, { contentContainerStyle: styles.container, children: _jsxs(MenuContext.Provider, { value: contextValue, children: [heading && (_jsx(BodyText, { size: "md", weight: "semibold", children: heading })), children] }) }) }));
+});
+Menu.displayName = 'Menu';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        gap: theme.components.bottomSheet.gap,
+    },
+}));
+export default Menu;

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

@@ -0,0 +1,21 @@
+import type { BottomSheetModalProps } from '@gorhom/bottom-sheet';
+import type { ReactNode } from 'react';
+export interface MenuMethods {
+    present: () => void;
+    dismiss: () => void;
+}
+export interface MenuProps {
+    /**
+     * Heading text displayed at the top of the menu
+     */
+    heading?: string;
+    /**
+     * Menu items to display
+     */
+    children: ReactNode;
+    /**
+     * Optional bottom sheet modal props to customise the menu behavior
+     */
+    bottomSheetProps?: Partial<BottomSheetModalProps>;
+}
+export default MenuProps;

package/build/components/Menu/Menu.props.js

@@ -0,0 +1 @@
+export {};

package/build/components/Menu/MenuItem.d.ts

@@ -0,0 +1,18 @@
+import type MenuItemProps from './MenuItem.props';
+declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & {
+    states?: {
+        active?: boolean;
+        disabled?: boolean;
+    };
+} & Omit<import("react-native").PressableProps, "children"> & {
+    tabIndex?: 0 | -1 | undefined;
+} & {
+    children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {
+        hovered?: boolean | undefined;
+        pressed?: boolean | undefined;
+        focused?: boolean | undefined;
+        focusVisible?: boolean | undefined;
+        disabled?: boolean | undefined;
+    }) => import("react").ReactNode);
+} & import("react").RefAttributes<unknown>>;
+export default MenuItem;

package/build/components/Menu/MenuItem.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createPressable } from '@gluestack-ui/pressable';
+import { Pressable } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { Icon } from '../Icon';
+import { useMenuContext } from './Menu.context';
+const MenuItemRoot = ({ icon, iconPosition = 'left', text, colorScheme = 'functional', disabled = false, onPress, states = {}, ...props }) => {
+    const { active } = states;
+    const { close } = useMenuContext();
+    styles.useVariants({ colorScheme, disabled, iconPosition, active });
+    const handlePress = (event) => {
+        if (disabled)
+            return;
+        onPress?.(event);
+        close();
+    };
+    return (_jsxs(Pressable, { ...props, onPress: handlePress, disabled: disabled, style: styles.container, accessibilityRole: "button", accessibilityState: { disabled }, children: [!!icon && _jsx(Icon, { as: icon, style: styles.icon }), _jsx(BodyText, { size: "lg", style: styles.text, children: text })] }));
+};
+const MenuItem = createPressable({ Root: MenuItemRoot });
+MenuItem.displayName = 'MenuItem';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: theme.components.menu.item.padding,
+        paddingHorizontal: theme.components.menu.mobile.item.padding,
+        gap: theme.components.menu.item.gap,
+        borderRadius: theme.components.menu.item.borderRadius,
+        variants: {
+            active: {
+                true: {
+                    backgroundColor: theme.color.interactive.functional.surface.subtle.active,
+                },
+            },
+            disabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                    cursor: 'auto',
+                },
+                false: {
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
+                        },
+                        _active: {
+                            backgroundColor: theme.color.interactive.functional.surface.subtle.active,
+                        },
+                    },
+                },
+            },
+            iconPosition: {
+                left: {
+                    flexDirection: 'row',
+                },
+                right: {
+                    flexDirection: 'row-reverse',
+                },
+            },
+            colorScheme: {
+                functional: {},
+                destructive: {},
+            },
+        },
+        compoundVariants: [
+            {
+                colorScheme: 'destructive',
+                active: true,
+                styles: {
+                    backgroundColor: theme.color.interactive.destructive.surface.subtle.active,
+                },
+            },
+            {
+                colorScheme: 'destructive',
+                disabled: false,
+                styles: {
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.color.interactive.destructive.surface.subtle.hover,
+                        },
+                        _active: {
+                            backgroundColor: theme.color.interactive.destructive.surface.subtle.active,
+                        },
+                    },
+                },
+            },
+        ],
+    },
+    text: {
+        flex: 1,
+        variants: {
+            colorScheme: {
+                functional: {
+                    color: theme.color.text.primary,
+                },
+                destructive: {
+                    color: theme.color.interactive.destructive.foreground.subtle,
+                },
+            },
+        },
+    },
+    icon: {
+        variants: {
+            colorScheme: {
+                functional: {
+                    color: theme.color.icon.primary,
+                },
+                destructive: {
+                    color: theme.color.interactive.destructive.foreground.subtle,
+                },
+            },
+        },
+    },
+}));
+export default MenuItem;

package/build/components/Menu/MenuItem.props.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentType } from 'react';
+import type { PressableProps } from 'react-native';
+export interface MenuItemProps extends Omit<PressableProps, 'children'> {
+    /**
+     * Icon component to display
+     */
+    icon?: ComponentType;
+    /**
+     * Position of the icon
+     * @default 'left'
+     */
+    iconPosition?: 'left' | 'right';
+    /**
+     * Text to display in the menu item
+     */
+    text: string;
+    /**
+     * Color scheme for the menu item
+     * @default 'functional'
+     */
+    colorScheme?: 'functional' | 'destructive';
+    /**
+     * Whether the menu item is disabled
+     */
+    disabled?: boolean;
+}
+export default MenuItemProps;

package/build/components/Menu/MenuItem.props.js

@@ -0,0 +1 @@
+export {};

package/build/components/Menu/MenuTrigger.d.ts

@@ -0,0 +1,9 @@
+import type MenuTriggerProps from './MenuTrigger.props';
+interface MenuTriggerInternalProps extends MenuTriggerProps {
+    onPress: () => void;
+}
+declare const MenuTrigger: {
+    ({ children, onPress }: MenuTriggerInternalProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+    displayName: string;
+};
+export default MenuTrigger;

package/build/components/Menu/MenuTrigger.js

@@ -0,0 +1,11 @@
+import { cloneElement, isValidElement } from 'react';
+const MenuTrigger = ({ children, onPress }) => {
+    if (!isValidElement(children)) {
+        throw new Error('MenuTrigger: children must be a valid React element');
+    }
+    return cloneElement(children, {
+        onPress,
+    });
+};
+MenuTrigger.displayName = 'MenuTrigger';
+export default MenuTrigger;

package/build/components/Menu/MenuTrigger.props.d.ts

@@ -0,0 +1,12 @@
+import type { ReactElement } from 'react';
+export interface MenuTriggerProps {
+    /**
+     * The child element that triggers the menu (should be a single pressable element like Button)
+     */
+    children: ReactElement;
+    /**
+     * Called when the trigger is pressed.
+     */
+    onPress?: () => void;
+}
+export default MenuTriggerProps;

package/build/components/Menu/MenuTrigger.props.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,7 @@
+export { default as Menu } from './Menu';
+export { useMenuContext } from './Menu.context';
+export type { MenuMethods, default as MenuProps } from './Menu.props';
+export { default as MenuItem } from './MenuItem';
+export type { default as MenuItemProps } from './MenuItem.props';
+export { default as MenuTrigger } from './MenuTrigger';
+export type { default as MenuTriggerProps } from './MenuTrigger.props';

package/build/components/Menu/index.js

@@ -0,0 +1,4 @@
+export { default as Menu } from './Menu';
+export { useMenuContext } from './Menu.context';
+export { default as MenuItem } from './MenuItem';
+export { default as MenuTrigger } from './MenuTrigger';

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

@@ -3,5 +3,5 @@ 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;
+declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, fullscreen, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export default Modal;

package/build/components/Modal/Modal.js

@@ -12,7 +12,7 @@ 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 Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, fullscreen = false, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal = false, ...props }) => {
     const bottomSheetModalRef = useRef(null);
     const viewRef = useRef(null);
     const scrollViewRef = useRef(null);
@@ -20,7 +20,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
     const backgroundOpacity = useSharedValue(0);
     const pretendContentTranslateY = useSharedValue(20);
     const triggerCloseAnimation = useCallback(() => {
-        if (Platform.OS === 'android' && fullscreen) {
+        if (Platform.OS === 'android' && inNavModal) {
             pretendContentTranslateY.value = withTiming(20, {
                 duration: 50,
                 easing: Easing.in(Easing.quad),
@@ -30,14 +30,14 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
                 easing: Easing.in(Easing.quad),
             });
         }
-    }, [Platform.OS, fullscreen, pretendContentTranslateY, backgroundOpacity]);
+    }, [Platform.OS, inNavModal, pretendContentTranslateY, backgroundOpacity]);
     useImperativeHandle(ref, () => ({
         ...bottomSheetModalRef.current,
         triggerCloseAnimation,
     }));
-    // Trigger animations on render for fullscreen Android modal
+    // Trigger animations on render for inNavModal Android modal
     useEffect(() => {
-        if (Platform.OS === 'android' && fullscreen) {
+        if (Platform.OS === 'android' && inNavModal) {
             backgroundOpacity.value = withDelay(300, withTiming(1, {
                 duration: 200,
                 easing: Easing.out(Easing.quad),
@@ -47,11 +47,11 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
                 easing: Easing.out(Easing.quad),
             }));
         }
-    }, [fullscreen, backgroundOpacity, pretendContentTranslateY]);
+    }, [inNavModal, backgroundOpacity, pretendContentTranslateY]);
     const animatedBackgroundStyle = useAnimatedStyle(() => ({
         backgroundColor: hexWithOpacity(theme.components.overlay.backgroundColor, backgroundOpacity.value * (theme.components.overlay.opacity / 100)),
     }));
-    const animatedFullscreenStyle = useAnimatedStyle(() => ({
+    const animatedInNavModalStyle = useAnimatedStyle(() => ({
         backgroundColor: hexWithOpacity(theme.components.overlay.backgroundColor, backgroundOpacity.value * (theme.components.overlay.opacity / 100)),
     }));
     const animatedPretendContentStyle = useAnimatedStyle(() => ({
@@ -99,12 +99,15 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
     };
     styles.useVariants({ loading });
     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 }) })] })) : (_jsxs(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, ...props, onChange: handleChange, children: [loading ? _jsx(View, { style: styles.loadingTop }) : null, _jsx(BottomSheetScrollView, { contentContainerStyle: styles.container, ref: scrollViewRef, children: content })] }));
+    return inNavModal ? (_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.inNavModalContainer, Platform.OS === 'android' && animatedInNavModalStyle], children: _jsx(View, { style: styles.inNavModalContent, children: content }) })] })) : (_jsxs(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image || fullscreen ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, style: styles.modal, ...props, onChange: handleChange, children: [loading ? _jsx(View, { style: styles.loadingTop }) : null, _jsx(BottomSheetScrollView, { contentContainerStyle: styles.container, ref: scrollViewRef, children: content })] }));
 };
 const styles = StyleSheet.create((theme, rt) => ({
+    modal: {
+        gap: theme.components.modal.content.gap - theme.components.bottomSheet.gap,
+    },
     container: {
         flex: 1,
-        gap: theme.components.dialog.gap,
+        gap: theme.components.modal.gap,
         variants: {
             loading: {
                 true: {
@@ -115,11 +118,11 @@ const styles = StyleSheet.create((theme, rt) => ({
     },
     header: {
         flexDirection: 'row',
-        gap: theme.components.dialog.gap,
+        gap: theme.components.modal.gap,
     },
     headerTextContent: {
         flex: 1,
-        gap: theme.components.dialog.content.gap,
+        gap: theme.components.modal.content.gap,
     },
     image: {
         width: 260,
@@ -127,52 +130,51 @@ const styles = StyleSheet.create((theme, rt) => ({
     },
     imageContainer: {
         alignItems: 'center',
-        justifyContent: 'center',
         flex: 1,
     },
     textContent: {
-        gap: theme.components.dialog.content.gap,
+        gap: theme.components.modal.content.gap,
     },
     loadingTop: {
-        borderTopLeftRadius: theme.components.dialog.borderRadius,
-        borderTopRightRadius: theme.components.dialog.borderRadius,
+        borderTopLeftRadius: theme.components.modal.borderRadius,
+        borderTopRightRadius: theme.components.modal.borderRadius,
         height: 16,
         backgroundColor: theme.color.surface.neutral.strong,
     },
     loadingContainer: {
-        borderTopLeftRadius: theme.components.dialog.borderRadius,
-        borderTopRightRadius: theme.components.dialog.borderRadius,
+        borderTopLeftRadius: theme.components.modal.borderRadius,
+        borderTopRightRadius: theme.components.modal.borderRadius,
         flex: 1,
         alignItems: 'center',
         justifyContent: 'center',
         minHeight: 140,
-        gap: theme.components.dialog.content.gap,
+        gap: theme.components.modal.content.gap,
     },
     footer: {
-        gap: theme.components.dialog.action.gap,
+        gap: theme.components.modal.action.gap,
     },
-    fullscreenContainer: {
+    inNavModalContainer: {
         flex: 1,
         ...(Platform.OS === 'ios' ? { backgroundColor: theme.components.overlay.backgroundColor } : {}),
     },
-    fullscreenContent: {
+    inNavModalContent: {
         flex: 1,
-        borderTopLeftRadius: theme.components.dialog.borderRadius,
-        borderTopRightRadius: theme.components.dialog.borderRadius,
+        borderTopLeftRadius: theme.components.modal.borderRadius,
+        borderTopRightRadius: theme.components.modal.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,
+        gap: theme.components.modal.gap,
+        padding: theme.components.modal.padding,
+        paddingBottom: theme.components.modal.padding + rt.insets.bottom,
     },
     androidContainer: {
         height: rt.insets.top + 18,
-        paddingLeft: theme.components.dialog.padding,
-        paddingRight: theme.components.dialog.padding,
+        paddingLeft: theme.components.modal.padding,
+        paddingRight: theme.components.modal.padding,
         justifyContent: 'flex-end',
     },
     pretendContent: {
-        borderTopLeftRadius: theme.components.dialog.borderRadius,
-        borderTopRightRadius: theme.components.dialog.borderRadius,
+        borderTopLeftRadius: theme.components.modal.borderRadius,
+        borderTopRightRadius: theme.components.modal.borderRadius,
         height: 12,
         backgroundColor: theme.components.parts.modalStack.backgroundColorCardTop,
     },

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

@@ -8,6 +8,7 @@ interface ModalProps extends Omit<BottomSheetProps, 'children'> {
     showCloseButton?: boolean;
     heading?: string;
     description?: string;
+    inNavModal?: boolean;
     fullscreen?: boolean;
     children?: ViewProps['children'];
     onPressPrimaryButton?: () => void;

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

@@ -3,5 +3,5 @@ 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;
+declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export default Modal;