@utilitywarehouse/hearth-react-native 0.8.1 → 0.9.0

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;

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, fullscreen = false, ...props }) => {
+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 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(() => ({
@@ -98,20 +98,20 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         }
     };
     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 }) }));
+    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) => ({
     container: {
         flex: 1,
-        gap: theme.components.dialog.gap,
+        gap: theme.components.modal.gap,
     },
     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,
@@ -123,40 +123,40 @@ const styles = StyleSheet.create((theme, rt) => ({
         flex: 1,
     },
     textContent: {
-        gap: theme.components.dialog.content.gap,
+        gap: theme.components.modal.content.gap,
     },
     loadingContainer: {
         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/RadioCard/RadioCardGroup.context.d.ts

@@ -0,0 +1,12 @@
+export declare const RadioCardGroupContext: import("react").Context<{
+    flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";
+    flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
+    justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
+    alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+}>;
+export declare const useRadioCardGroupContext: () => {
+    flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";
+    flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
+    justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
+    alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+};

package/build/components/RadioCard/RadioCardGroup.context.js

@@ -0,0 +1,3 @@
+import { createContext, useContext } from 'react';
+export const RadioCardGroupContext = createContext({});
+export const useRadioCardGroupContext = () => useContext(RadioCardGroupContext);

package/build/components/RadioCard/RadioCardGroup.js

@@ -1,18 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Grid } from '../Grid';
+import { RadioCardGroupContext } from './RadioCardGroup.context';
 const RadioCardGroup = ({ children, gap = '200', style, flexDirection = 'row', flexWrap, justifyContent, alignItems, columns, ...props }) => {
-    return columns ? (_jsx(Grid, { ...props, gap: gap, columns: columns, style: style, children: children })) : (_jsx(View, { ...props, style: [
-            styles.containerGap(gap),
-            {
-                flexDirection,
-                flexWrap,
-                justifyContent,
-                alignItems,
-            },
-            style,
-        ], children: children }));
+    const context = useMemo(() => {
+        return { flexDirection, flexWrap, justifyContent, alignItems };
+    }, [flexDirection, flexWrap, justifyContent, alignItems]);
+    return columns ? (_jsx(RadioCardGroupContext.Provider, { value: context, children: _jsx(Grid, { ...props, gap: gap, columns: columns, style: style, children: children }) })) : (_jsx(RadioCardGroupContext.Provider, { value: context, children: _jsx(View, { ...props, style: [
+                styles.containerGap(gap),
+                {
+                    flexDirection,
+                    flexWrap,
+                    justifyContent,
+                    alignItems,
+                },
+                style,
+            ], children: children }) }));
 };
 const styles = StyleSheet.create(theme => ({
     containerGap: (gap) => ({

package/build/components/RadioCard/RadioCardLabel.d.ts

@@ -1,6 +1,6 @@
 import LabelProps from '../Label/Label.props';
 declare const RadioCardLabel: {
-    ({ children, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, style, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default RadioCardLabel;

package/build/components/RadioCard/RadioCardLabel.js

@@ -1,5 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet } from 'react-native-unistyles';
 import { Label } from '../Label';
-const RadioCardLabel = ({ children, ...props }) => _jsx(Label, { ...props, children: children });
+const RadioCardLabel = ({ children, style, ...props }) => (_jsx(Label, { ...props, style: [styles.label, style], children: children }));
+const styles = StyleSheet.create({
+    label: {
+        flexShrink: 1,
+    },
+});
 RadioCardLabel.displayName = 'RadioCardLabel';
 export default RadioCardLabel;

package/build/components/RadioCard/RadioCardRoot.js

@@ -3,14 +3,17 @@ import { useMemo } from 'react';
 import { StyleSheet } from 'react-native-unistyles';
 import { Pressable } from 'react-native';
 import { RadioCardContext } from './RadioCard.context';
+import { useRadioCardGroupContext } from './RadioCardGroup.context';
 const RadioCardRoot = ({ children, style, states, ...props }) => {
     const { checked, active } = states ?? {};
+    const { flexDirection } = useRadioCardGroupContext() ?? {};
     const value = useMemo(() => ({
         checked,
         active,
     }), [checked, active]);
     styles.useVariants({
         selected: checked,
+        flexDirection,
     });
     return (_jsx(RadioCardContext.Provider, { value: value, children: _jsx(Pressable, { ...props, style: [styles.container, style], children: children }) }));
 };
@@ -37,6 +40,16 @@ const styles = StyleSheet.create(theme => ({
                     margin: -theme.components.card.selectable.borderWidthSelected / 2,
                 },
             },
+            flexDirection: {
+                row: {},
+                column: {
+                    width: '100%',
+                },
+                'row-reverse': {},
+                'column-reverse': {
+                    width: '100%',
+                },
+            },
         },
         _web: {
             '_focus-visible': {

package/build/components/index.d.ts

@@ -35,6 +35,7 @@ export * from './Input';
 export * from './Label';
 export * from './Link';
 export * from './List';
+export * from './Menu';
 export * from './Modal';
 export * from './ProgressStepper';
 export * from './Radio';

package/build/components/index.js

@@ -36,6 +36,7 @@ export * from './Input';
 export * from './Label';
 export * from './Link';
 export * from './List';
+export * from './Menu';
 export * from './Modal';
 export * from './ProgressStepper';
 export * from './Radio';

package/build/core/themes.d.ts

@@ -2,6 +2,16 @@ import { DimensionValue } from 'react-native';
 import { components } from '../tokens';
 export declare const lightTheme: {
     readonly helpers: {
+        shadow: {
+            functional: string;
+            brand: string;
+            energy: string;
+            broadband: string;
+            mobile: string;
+            insurance: string;
+            cashback: string;
+            pig: string;
+        };
         focusVisible: {
             outlineStyle: string;
             outlineWidth: number;
@@ -1352,6 +1362,16 @@ export declare const lightTheme: {
 };
 export declare const darkTheme: {
     readonly helpers: {
+        shadow: {
+            functional: string;
+            brand: string;
+            energy: string;
+            broadband: string;
+            mobile: string;
+            insurance: string;
+            cashback: string;
+            pig: string;
+        };
         focusVisible: {
             outlineStyle: string;
             outlineWidth: number;
@@ -2714,6 +2734,16 @@ export declare const darkTheme: {
 export declare const themes: {
     readonly light: {
         readonly helpers: {
+            shadow: {
+                functional: string;
+                brand: string;
+                energy: string;
+                broadband: string;
+                mobile: string;
+                insurance: string;
+                cashback: string;
+                pig: string;
+            };
             focusVisible: {
                 outlineStyle: string;
                 outlineWidth: number;
@@ -4064,6 +4094,16 @@ export declare const themes: {
     };
     readonly dark: {
         readonly helpers: {
+            shadow: {
+                functional: string;
+                brand: string;
+                energy: string;
+                broadband: string;
+                mobile: string;
+                insurance: string;
+                cashback: string;
+                pig: string;
+            };
             focusVisible: {
                 outlineStyle: string;
                 outlineWidth: number;

package/build/core/themes.js

@@ -254,6 +254,16 @@ const shared = {
 };
 const lightHelpers = {
     ...shared.helpers,
+    shadow: {
+        functional: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.default}`,
+        brand: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.brand}`,
+        energy: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.energy}`,
+        broadband: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.broadband}`,
+        mobile: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.mobile}`,
+        insurance: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.insurance}`,
+        cashback: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.cashback}`,
+        pig: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.pig}`,
+    },
     focusVisible: {
         outlineStyle: 'solid',
         outlineWidth: 2,
@@ -286,6 +296,16 @@ export const lightTheme = {
 };
 const darkHelpers = {
     ...shared.helpers,
+    shadow: {
+        functional: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.default}`,
+        brand: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.brand}`,
+        energy: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.energy}`,
+        broadband: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.broadband}`,
+        mobile: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.mobile}`,
+        insurance: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.insurance}`,
+        cashback: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.cashback}`,
+        pig: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.pig}`,
+    },
     focusVisible: {
         outlineStyle: 'solid',
         outlineWidth: 2,

package/build/tokens/components/dark/index.d.ts

@@ -17,7 +17,6 @@ export { default as carouselControl } from './carousel-control';
 export { default as checkbox } from './checkbox';
 export { default as datePicker } from './date-picker';
 export { default as descriptionList } from './description-list';
-export { default as dialog } from './dialog';
 export { default as divider } from './divider';
 export { default as drawer } from './drawer';
 export { default as expandableCard } from './expandable-card';
@@ -40,6 +39,7 @@ export { default as pill } from './pill';
 export { default as progressBar } from './progress-bar';
 export { default as progressStepper } from './progress-stepper';
 export { default as radio } from './radio';
+export { default as rating } from './rating';
 export { default as sectionHeader } from './section-header';
 export { default as segmentedControl } from './segmented-control';
 export { default as select } from './select';
@@ -48,6 +48,8 @@ export { default as spinner } from './spinner';
 export { default as switch } from './switch';
 export { default as table } from './table';
 export { default as tabs } from './tabs';
+export { default as timePicker } from './time-picker';
+export { default as timeline } from './timeline';
 export { default as toast } from './toast';
 export { default as toggleButton } from './toggle-button';
 export { default as tooltip } from './tooltip';

package/build/tokens/components/dark/index.js

@@ -17,7 +17,6 @@ export { default as carouselControl } from './carousel-control';
 export { default as checkbox } from './checkbox';
 export { default as datePicker } from './date-picker';
 export { default as descriptionList } from './description-list';
-export { default as dialog } from './dialog';
 export { default as divider } from './divider';
 export { default as drawer } from './drawer';
 export { default as expandableCard } from './expandable-card';
@@ -40,6 +39,7 @@ export { default as pill } from './pill';
 export { default as progressBar } from './progress-bar';
 export { default as progressStepper } from './progress-stepper';
 export { default as radio } from './radio';
+export { default as rating } from './rating';
 export { default as sectionHeader } from './section-header';
 export { default as segmentedControl } from './segmented-control';
 export { default as select } from './select';
@@ -48,6 +48,8 @@ export { default as spinner } from './spinner';
 export { default as switch } from './switch';
 export { default as table } from './table';
 export { default as tabs } from './tabs';
+export { default as timePicker } from './time-picker';
+export { default as timeline } from './timeline';
 export { default as toast } from './toast';
 export { default as toggleButton } from './toggle-button';
 export { default as tooltip } from './tooltip';

package/build/tokens/components/dark/input.d.ts

@@ -21,6 +21,9 @@ declare const _default: {
     readonly minWidth: 152;
     readonly paddingHorizontal: 16;
     readonly paddingVertical: 12;
+    readonly stepper: {
+        readonly gap: 4;
+    };
     readonly textArea: {
         readonly height: 96;
     };

package/build/tokens/components/dark/input.js

@@ -21,6 +21,9 @@ export default {
     minWidth: 152,
     paddingHorizontal: 16,
     paddingVertical: 12,
+    stepper: {
+        gap: 4,
+    },
     textArea: {
         height: 96,
     },

package/build/tokens/components/dark/modal.d.ts

@@ -10,17 +10,20 @@ declare const _default: {
         readonly gap: 12;
     };
     readonly gap: 24;
-    readonly padding: 48;
+    readonly heading: {
+        readonly gap: 24;
+    };
+    readonly illustration: {
+        readonly padding: 48;
+    };
+    readonly padding: 24;
     readonly mobile: {
-        readonly padding: 16;
         readonly width: 360;
     };
     readonly tablet: {
-        readonly padding: 48;
         readonly width: 504;
     };
     readonly desktop: {
-        readonly padding: 48;
         readonly width: 680;
     };
 };