@utilitywarehouse/hearth-react-native 0.18.0 → 0.19.1

package/build/components/Divider/Divider.js

@@ -4,8 +4,8 @@ import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { getFlattenedColorValue } from '../../utils';
-const Divider = ({ orientation = 'horizontal', color, space, height, width, flexItem, ...props }) => {
-    styles.useVariants({ orientation, space, flexItem });
+const Divider = ({ orientation = 'horizontal', color, spacing, space, height, width, flexItem, ...props }) => {
+    styles.useVariants({ orientation, spacing: space ?? spacing, flexItem });
     const { color: themeColor, colorMode } = useTheme();
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const colorValue = useMemo(() => getFlattenedColorValue(color, themeColor), [color, colorMode]);
@@ -26,7 +26,7 @@ const styles = StyleSheet.create(theme => ({
                     width: theme.components.divider.borderWidth,
                 },
             },
-            space: {
+            spacing: {
                 none: {},
                 '2xs': {},
                 xs: {},
@@ -45,14 +45,14 @@ const styles = StyleSheet.create(theme => ({
         compoundVariants: [
             {
                 orientation: 'horizontal',
-                space: 'none',
+                spacing: 'none',
                 styles: {
                     marginVertical: 0,
                 },
             },
             {
                 orientation: 'horizontal',
-                space: '2xs',
+                spacing: '2xs',
                 styles: {
                     marginVertical: {
                         base: theme.layout.mobile.spacing['2xs'],
@@ -63,7 +63,7 @@ const styles = StyleSheet.create(theme => ({
             },
             {
                 orientation: 'horizontal',
-                space: 'xs',
+                spacing: 'xs',
                 styles: {
                     marginVertical: {
                         base: theme.layout.mobile.spacing.xs,
@@ -74,7 +74,7 @@ const styles = StyleSheet.create(theme => ({
             },
             {
                 orientation: 'horizontal',
-                space: 'sm',
+                spacing: 'sm',
                 styles: {
                     marginVertical: {
                         base: theme.layout.mobile.spacing.sm,
@@ -85,7 +85,7 @@ const styles = StyleSheet.create(theme => ({
             },
             {
                 orientation: 'horizontal',
-                space: 'md',
+                spacing: 'md',
                 styles: {
                     marginVertical: {
                         base: theme.layout.mobile.spacing.md,
@@ -96,7 +96,7 @@ const styles = StyleSheet.create(theme => ({
             },
             {
                 orientation: 'horizontal',
-                space: 'lg',
+                spacing: 'lg',
                 styles: {
                     marginVertical: {
                         base: theme.layout.mobile.spacing.lg,
@@ -107,7 +107,7 @@ const styles = StyleSheet.create(theme => ({
             },
             {
                 orientation: 'horizontal',
-                space: 'xl',
+                spacing: 'xl',
                 styles: {
                     marginVertical: {
                         base: theme.layout.mobile.spacing.xl,
@@ -118,7 +118,7 @@ const styles = StyleSheet.create(theme => ({
             },
             {
                 orientation: 'horizontal',
-                space: '2xl',
+                spacing: '2xl',
                 styles: {
                     marginVertical: {
                         base: theme.layout.mobile.spacing['2xl'],
@@ -129,14 +129,14 @@ const styles = StyleSheet.create(theme => ({
             },
             {
                 orientation: 'vertical',
-                space: 'none',
+                spacing: 'none',
                 styles: {
                     marginHorizontal: 0,
                 },
             },
             {
                 orientation: 'vertical',
-                space: '2xs',
+                spacing: '2xs',
                 styles: {
                     marginHorizontal: {
                         base: theme.layout.mobile.spacing['2xs'],
@@ -147,7 +147,7 @@ const styles = StyleSheet.create(theme => ({
             },
             {
                 orientation: 'vertical',
-                space: 'xs',
+                spacing: 'xs',
                 styles: {
                     marginHorizontal: {
                         base: theme.layout.mobile.spacing.xs,
@@ -158,7 +158,7 @@ const styles = StyleSheet.create(theme => ({
             },
             {
                 orientation: 'vertical',
-                space: 'sm',
+                spacing: 'sm',
                 styles: {
                     marginHorizontal: {
                         base: theme.layout.mobile.spacing.sm,
@@ -169,7 +169,7 @@ const styles = StyleSheet.create(theme => ({
             },
             {
                 orientation: 'vertical',
-                space: 'md',
+                spacing: 'md',
                 styles: {
                     marginHorizontal: {
                         base: theme.layout.mobile.spacing.md,
@@ -180,7 +180,7 @@ const styles = StyleSheet.create(theme => ({
             },
             {
                 orientation: 'vertical',
-                space: 'lg',
+                spacing: 'lg',
                 styles: {
                     marginHorizontal: {
                         base: theme.layout.mobile.spacing.lg,
@@ -191,7 +191,7 @@ const styles = StyleSheet.create(theme => ({
             },
             {
                 orientation: 'vertical',
-                space: 'xl',
+                spacing: 'xl',
                 styles: {
                     marginHorizontal: {
                         base: theme.layout.mobile.spacing.xl,
@@ -202,7 +202,7 @@ const styles = StyleSheet.create(theme => ({
             },
             {
                 orientation: 'vertical',
-                space: '2xl',
+                spacing: '2xl',
                 styles: {
                     marginHorizontal: {
                         base: theme.layout.mobile.spacing['2xl'],

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

@@ -2,6 +2,12 @@ import type { DimensionValue, ViewProps } from 'react-native';
 import type { ColorValue, SpacingValues } from '../../types';
 interface DividerProps extends Omit<ViewProps, 'children'> {
     color?: ColorValue;
+    backgroundColor?: ColorValue;
+    spacing?: SpacingValues;
+    /**
+     * The space between child elements (gap).
+     * @deprecated Use `spacing` instead. The `space` prop will be removed in a future release.
+     */
     space?: SpacingValues;
     orientation?: 'horizontal' | 'vertical';
     height?: DimensionValue;

package/build/components/ExpandableCard/ExpandableCardExpandedContent.js

@@ -4,7 +4,7 @@ import { StyleSheet } from 'react-native-unistyles';
 import { Divider } from '../Divider';
 import { Expandable } from '../Expandable';
 const ExpandableCardExpandedContent = ({ children, isExpanded, duration = 200, animateOpacity = true, }) => {
-    return (_jsx(View, { style: styles.container, children: _jsx(Expandable, { expanded: isExpanded, duration: duration, animateOpacity: animateOpacity, children: _jsxs(View, { children: [_jsx(Divider, { space: "none" }), _jsx(View, { style: styles.content, children: children })] }) }) }));
+    return (_jsx(View, { style: styles.container, children: _jsx(Expandable, { expanded: isExpanded, duration: duration, animateOpacity: animateOpacity, children: _jsxs(View, { children: [_jsx(Divider, { spacing: "none" }), _jsx(View, { style: styles.content, children: children })] }) }) }));
 };
 ExpandableCardExpandedContent.displayName = 'ExpandableCardExpandedContent';
 const styles = StyleSheet.create(theme => ({

package/build/components/Flex/Flex.d.ts

@@ -1,6 +1,6 @@
 import FlexProps from './Flex.props';
 declare const Flex: {
-    ({ style, children, direction, align, justify, wrap, space, ...rest }: FlexProps): import("react/jsx-runtime").JSX.Element;
+    ({ style, children, direction, align, justify, wrap, spacing, space, ...rest }: FlexProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Flex;

package/build/components/Flex/Flex.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-const Flex = ({ style, children, direction = 'column', align = 'flex-start', justify = 'flex-start', wrap = 'nowrap', space = 'md', ...rest }) => {
+const Flex = ({ style, children, direction = 'column', align = 'flex-start', justify = 'flex-start', wrap = 'nowrap', spacing = 'md', space, ...rest }) => {
     const propStyle = {
         flexDirection: direction,
         alignItems: align,
         justifyContent: justify,
         flexWrap: wrap,
     };
-    styles.useVariants({ space });
+    styles.useVariants({ spacing: space ?? spacing });
     return (_jsx(View, { style: [propStyle, styles.flex, style], ...rest, children: children }));
 };
 Flex.displayName = 'Flex';
@@ -16,7 +16,7 @@ const styles = StyleSheet.create(theme => ({
     flex: {
         display: 'flex',
         variants: {
-            space: theme.globalStyle.variants.space,
+            spacing: theme.globalStyle.variants.spacing,
         },
     },
 }));

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

@@ -5,6 +5,11 @@ interface FlexProps extends ViewProps {
     align?: FlexAlignType;
     justify?: ViewStyle['justifyContent'];
     wrap?: ViewStyle['flexWrap'];
+    spacing?: SpacingValues;
+    /**
+     * The space between child elements (gap).
+     * @deprecated Use `spacing` instead. The `space` prop will be removed in a future release.
+     */
     space?: SpacingValues;
 }
 export default FlexProps;

package/build/components/Grid/Grid.d.ts

@@ -1,6 +1,6 @@
 import type { GridProps } from './Grid.props';
 declare const Grid: {
-    ({ columns, containerStyle, itemStyle, rowStyle, space, children, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
+    ({ columns, containerStyle, itemStyle, rowStyle, spacing, space, children, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Grid;

package/build/components/Grid/Grid.js

@@ -3,13 +3,13 @@ import React, { useMemo } from 'react';
 import { useWindowDimensions, View } from 'react-native';
 import { StyleSheet, UnistylesRuntime } from 'react-native-unistyles';
 import { useStyleProps, useTheme } from '../../hooks';
-const Grid = ({ columns = 2, containerStyle, itemStyle, rowStyle, space, children, ...props }) => {
+const Grid = ({ columns = 2, containerStyle, itemStyle, rowStyle, spacing, space, children, ...props }) => {
     const { breakpoints } = useTheme();
     const { computedStyles, remainingProps } = useStyleProps(props);
     const childrenArray = React.Children.toArray(children).filter(Boolean);
     const { width } = useWindowDimensions();
     const { gap, columnGap, rowGap } = { ...remainingProps, ...computedStyles };
-    styles.useVariants({ space });
+    styles.useVariants({ spacing: space ?? spacing });
     const getColumnsForWidth = useMemo(() => {
         // If columns is a number, use that number
         if (typeof columns === 'number') {
@@ -78,14 +78,14 @@ const styles = StyleSheet.create(theme => ({
     rowsContainer: {
         width: '100%',
         variants: {
-            space: theme.globalStyle.variants.space,
+            spacing: theme.globalStyle.variants.spacing,
         },
     },
     row: {
         flexDirection: 'row',
         width: '100%',
         variants: {
-            space: theme.globalStyle.variants.space,
+            spacing: theme.globalStyle.variants.spacing,
         },
     },
     item: {

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

@@ -13,6 +13,11 @@ export interface GridProps extends ViewProps {
     /**
      * Spacing between grid items (applies to both rows and columns)
      */
+    spacing?: SpacingValues;
+    /**
+     * Spacing between grid items (applies to both rows and columns)
+     * @deprecated Use `spacing` instead. The `space` prop will be removed in a future release.
+     */
     space?: SpacingValues;
     /**
      * Gap between items (overrides spacing if provided)

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

@@ -1,4 +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>>;
+declare const Menu: import("react").ForwardRefExoticComponent<Omit<MenuProps, "ref"> & import("react").RefAttributes<MenuMethods>>;
 export default Menu;

package/build/components/Menu/Menu.js

@@ -4,7 +4,7 @@ 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 Menu = forwardRef(({ heading, children, ...props }, ref) => {
     const bottomSheetModalRef = useRef(null);
     useImperativeHandle(ref, () => ({
         present: () => bottomSheetModalRef.current?.present(),
@@ -14,7 +14,7 @@ const Menu = forwardRef(({ heading, children, bottomSheetProps }, ref) => {
         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] }) }) }));
+    return (_jsx(BottomSheetModal, { ref: bottomSheetModalRef, ...props, 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 => ({

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

@@ -1,10 +1,10 @@
-import type { BottomSheetModalProps } from '@gorhom/bottom-sheet';
 import type { ReactNode } from 'react';
+import { BottomSheetProps } from '../BottomSheet';
 export interface MenuMethods {
     present: () => void;
     dismiss: () => void;
 }
-export interface MenuProps {
+export interface MenuProps extends BottomSheetProps {
     /**
      * Heading text displayed at the top of the menu
      */
@@ -13,9 +13,5 @@ export interface MenuProps {
      * 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/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, fullscreen, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal, stickyFooter, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, loadingHeading, fullscreen, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal, stickyFooter, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export default Modal;

package/build/components/Modal/Modal.js

@@ -13,7 +13,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, fullscreen = false, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal = false, stickyFooter = true, ...props }) => {
+const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, loadingHeading = 'Loading...', fullscreen = false, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal = false, stickyFooter = true, ...props }) => {
     const bottomSheetModalRef = useRef(null);
     const viewRef = useRef(null);
     const scrollViewRef = useRef(null);
@@ -107,7 +107,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         showHandle: props.showHandle,
     });
     const footer = (_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] }));
-    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: [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, !stickyFooter && !noButtons ? footer : null] })) }));
+    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: loadingHeading })] })) : (_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: [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, !stickyFooter && !noButtons ? footer : null] })) }));
     const renderFooter = useCallback((props) => (_jsx(BottomSheetFooter, { ...props, children: _jsx(View, { style: styles.footerWrap, children: footer }) })), [
         onPressPrimaryButton,
         primaryButtonText,
@@ -138,21 +138,31 @@ const styles = StyleSheet.create((theme, rt) => ({
         variants: {
             bothButtons: {
                 true: {
-                    paddingBottom: 166 + rt.insets.bottom - theme.components.modal.padding,
+                    paddingBottom: 166 +
+                        rt.insets.bottom -
+                        theme.components.modal.padding +
+                        theme.components.bottomSheet.padding,
                 },
                 false: {
-                    paddingBottom: 102 + rt.insets.bottom - theme.components.modal.padding,
+                    paddingBottom: 102 +
+                        rt.insets.bottom -
+                        theme.components.modal.padding +
+                        theme.components.bottomSheet.padding,
                 },
             },
             noButtons: {
                 true: {
-                    paddingBottom: rt.insets.bottom + theme.components.modal.padding,
+                    paddingBottom: rt.insets.bottom +
+                        theme.components.modal.padding +
+                        theme.components.bottomSheet.padding,
                 },
             },
             stickyFooter: {
                 true: {},
                 false: {
-                    paddingBottom: rt.insets.bottom + theme.components.modal.padding,
+                    paddingBottom: rt.insets.bottom +
+                        theme.components.modal.padding +
+                        theme.components.bottomSheet.padding,
                 },
             },
         },

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

@@ -8,6 +8,7 @@ interface ModalProps extends Omit<BottomSheetProps, 'children'> {
     image?: ReactNode;
     showCloseButton?: boolean;
     heading?: string;
+    loadingHeading?: string;
     description?: string;
     inNavModal?: boolean;
     fullscreen?: boolean;

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

package/build/components/Modal/Modal.web.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, inNavModal = false, ...props }) => {
+const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, loadingHeading = 'Loading...', image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal = false, ...props }) => {
     const bottomSheetModalRef = useRef(null);
     const viewRef = useRef(null);
     const scrollViewRef = useRef(null);
@@ -97,7 +97,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
             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: [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] })] })) }));
+    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: loadingHeading })] })) : (_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: [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 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 }) })] })) : (_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) => ({

package/build/components/Radio/RadioGroupTextContent.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Flex } from '../Flex';
 const RadioGroupTextContent = ({ children, ...props }) => {
-    return (_jsx(Flex, { direction: "column", space: "none", ...props, children: children }));
+    return (_jsx(Flex, { direction: "column", spacing: "none", ...props, children: children }));
 };
 RadioGroupTextContent.displayName = 'RadioGroupTextContent';
 export default RadioGroupTextContent;

package/build/components/Radio/RadioTextContent.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { StyleSheet } from 'react-native-unistyles';
 import { Flex } from '../Flex';
 const RadioTextContent = ({ children, style, ...props }) => {
-    return (_jsx(Flex, { direction: "column", space: "none", style: [styles.content, style], ...props, children: children }));
+    return (_jsx(Flex, { direction: "column", spacing: "none", style: [styles.content, style], ...props, children: children }));
 };
 const styles = StyleSheet.create({
     content: {

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

@@ -1,9 +1,7 @@
 import React from 'react';
-import type { ToastContextValue } from './Toast.props';
+import type { ToastContextValue, ToastProviderProps } from './Toast.props';
 declare const ToastContext: React.Context<ToastContextValue | undefined>;
 export declare const useToastContext: () => ToastContextValue;
-export declare const ToastProvider: React.FC<{
-    children: React.ReactNode;
-}>;
+export declare const ToastProvider: React.FC<ToastProviderProps>;
 export declare const useToast: () => ToastContextValue;
 export default ToastContext;

package/build/components/Toast/Toast.context.js

@@ -10,7 +10,7 @@ export const useToastContext = () => {
         throw new Error('useToastContext must be used within ToastProvider');
     return ctx;
 };
-export const ToastProvider = ({ children }) => {
+export const ToastProvider = ({ children, safeAreaPadding = true, }) => {
     const [toasts, setToasts] = useState([]);
     const timers = useRef({});
     const toastRefs = useRef({});
@@ -53,6 +53,9 @@ export const ToastProvider = ({ children }) => {
         }
         return id;
     }, [removeToast]);
+    styles.useVariants({
+        safeAreaPadding,
+    });
     useEffect(() => {
         return () => {
             // cleanup timers on unmount
@@ -71,7 +74,7 @@ export const useToast = () => {
     return ctx;
 };
 export default ToastContext;
-const styles = StyleSheet.create(theme => ({
+const styles = StyleSheet.create((theme, rt) => ({
     container: {
         position: 'absolute',
         left: 0,
@@ -80,6 +83,15 @@ const styles = StyleSheet.create(theme => ({
         alignItems: 'stretch',
         paddingBottom: theme.space['200'],
         pointerEvents: 'box-none',
+        variants: {
+            safeAreaPadding: {
+                true: {
+                    paddingBottom: theme.space['200'] + rt.insets.bottom,
+                    paddingTop: rt.insets.top,
+                },
+                false: {},
+            },
+        },
     },
     stack: {
         width: '100%',

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

@@ -22,6 +22,10 @@ export interface ToastInstance extends ToastOptions {
     /** resolved duration */
     duration: number;
 }
+export interface ToastProviderProps {
+    children: ReactNode;
+    safeAreaPadding?: boolean;
+}
 export interface ToastContextValue {
     addToast: (opts: ToastOptions) => string;
     removeToast: (id: string) => void;

package/build/components/Toast/ToastItem.js

@@ -81,7 +81,7 @@ const ToastItem = forwardRef(({ toast, onClose }, ref) => {
             }
         }
     };
-    const toastContent = (_jsxs(View, { style: styles.inner, children: [_jsxs(View, { style: styles.content, children: [IconComp ? (_jsx(View, { style: styles.iconWrap, children: _jsx(Icon, { as: IconComp, style: styles.icon }) })) : null, _jsx(BodyText, { inverted: true, children: toast.text })] }), toast.actionText ? (_jsx(Link, { onPress: handlePress, showIcon: false, inverted: true, children: toast.actionText })) : null, showDismissIcon ? (_jsx(View, { style: styles.actions, children: _jsx(UnstyledIconButton, { icon: CloseSmallIcon, accessibilityLabel: "Dismiss", inverted: true, onPress: () => handleDismiss(false) }) })) : null] }));
+    const toastContent = (_jsxs(View, { style: styles.inner, children: [_jsxs(View, { style: styles.content, children: [IconComp ? (_jsx(View, { style: styles.iconWrap, children: _jsx(Icon, { as: IconComp, style: styles.icon }) })) : null, _jsx(BodyText, { inverted: true, style: styles.text, children: toast.text })] }), toast.actionText ? (_jsx(Link, { onPress: handlePress, showIcon: false, inverted: true, children: toast.actionText })) : null, showDismissIcon ? (_jsx(View, { style: styles.actions, children: _jsx(UnstyledIconButton, { icon: CloseSmallIcon, accessibilityLabel: "Dismiss", inverted: true, onPress: () => handleDismiss(false) }) })) : null] }));
     return (_jsx(GestureDetector, { gesture: panGesture, children: _jsx(AnimatedView, { style: [styles.toast, animatedStyle], ...(Platform.OS === 'ios' && {
                 accessible: true,
                 accessibilityRole: 'alert',
@@ -109,7 +109,8 @@ const styles = StyleSheet.create(theme => ({
         width: 24,
         height: 24,
         justifyContent: 'center',
-        alignItems: 'center',
+        alignSelf: 'flex-start',
+        alignItems: 'flex-start',
         flexShrink: 0,
     },
     icon: {
@@ -122,8 +123,10 @@ const styles = StyleSheet.create(theme => ({
         alignItems: 'center',
         minWidth: 0,
     },
+    text: { flexShrink: 1 },
     actions: {
         flexShrink: 0,
+        alignSelf: 'flex-start',
     },
 }));
 export default ToastItem;

package/build/components/VerificationInput/VerificationInput.d.ts

@@ -1,6 +1,3 @@
-import VerificationInputProps from './VerificationInput.props';
-declare const VerificationInput: {
-    ({ value, onChangeText, label, labelVariant, helperText, helperIcon, validationStatus, validText, invalidText, disabled, readonly, secureTextEntry, style, ...props }: VerificationInputProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+import type { VerificationInputHandle, VerificationInputProps } from './VerificationInput.props';
+declare const VerificationInput: import("react").ForwardRefExoticComponent<VerificationInputProps & import("react").RefAttributes<VerificationInputHandle>>;
 export default VerificationInput;

package/build/components/VerificationInput/VerificationInput.js

@@ -1,24 +1,37 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle } from 'react';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { FormField } from '../FormField';
 import { useVerificationInput } from './useVerificationInput';
 import { VerificationInputSlot } from './VerificationInputSlot';
-const VerificationInput = ({ value = '', onChangeText, label, labelVariant = 'body', helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled = false, readonly = false, secureTextEntry = false, style, ...props }) => {
+const VerificationInput = forwardRef(({ value = '', onChangeText, label, labelVariant = 'body', helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled = false, readonly = false, secureTextEntry = false, autoFocus = false, style, ...props }, ref) => {
     const length = 6;
-    const { inputRefs, focusedIndex, handleFocus, handleBlur, handleChangeText, handleKeyPress } = useVerificationInput({
+    const { inputRefs, displayValue, focusedIndex, handleFocus, handleBlur, handleChangeText, handleKeyPress, } = useVerificationInput({
         value,
         onChangeText,
     });
+    useImperativeHandle(ref, () => ({
+        focus: () => inputRefs.current[0]?.focus(),
+        blur: () => {
+            inputRefs.current.forEach(input => input?.blur());
+        },
+        clear: () => onChangeText?.(''),
+        focusIndex: (index) => {
+            if (index >= 0 && index < length) {
+                inputRefs.current[index]?.focus();
+            }
+        },
+    }), [length, onChangeText]);
     const slots = Array.from({ length }, (_, index) => index);
     return (_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatus, validText: validText, invalidText: invalidText, disabled: disabled, readonly: readonly, style: [styles.root, style], ...props, children: _jsx(View, { style: styles.slotsContainer, children: slots.map(index => {
-                const char = value[index] || '';
+                const char = displayValue[index] || '';
                 const isActive = focusedIndex === index;
-                return (_jsx(VerificationInputSlot, { ref: ref => {
-                        inputRefs.current[index] = ref;
-                    }, value: char, isActive: isActive, validationStatus: validationStatus, disabled: disabled, readonly: readonly, secureTextEntry: secureTextEntry, onChangeText: text => handleChangeText(text, index), onKeyPress: e => handleKeyPress(e, index), onFocus: () => handleFocus(index), onBlur: handleBlur }, index));
+                return (_jsx(VerificationInputSlot, { ref: inputRef => {
+                        inputRefs.current[index] = inputRef;
+                    }, autoFocus: index === 0 && autoFocus, value: char, isActive: isActive, validationStatus: validationStatus, disabled: disabled, readonly: readonly, secureTextEntry: secureTextEntry, onChangeText: text => handleChangeText(text, index), onKeyPress: e => handleKeyPress(e, index), onFocus: () => handleFocus(index), onBlur: handleBlur }, index));
             }) }) }));
-};
+});
 const styles = StyleSheet.create(theme => ({
     root: {
         gap: theme.components.input.verification.gap,