@utilitywarehouse/hearth-react-native 0.7.0 → 0.8.1

package/.turbo/turbo-build.log

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

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.7.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.8.1 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,23 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.8.1
+
+### Patch Changes
+
+- [#641](https://github.com/utilitywarehouse/hearth/pull/641) [`251242e`](https://github.com/utilitywarehouse/hearth/commit/251242e218c0b24589c3fb6fb6963b53bda8a367) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes `HighlightBanner` when no image is provided
+
+## 0.8.0
+
+### Minor Changes
+
+- [#635](https://github.com/utilitywarehouse/hearth/pull/635) [`4cac2f2`](https://github.com/utilitywarehouse/hearth/commit/4cac2f28c12279557e2133d67cd75783f30c89ff) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `Expandable` component
+
+- [#631](https://github.com/utilitywarehouse/hearth/pull/631) [`57b4991`](https://github.com/utilitywarehouse/hearth/commit/57b49912c90dce3d88a699bd50217df08dab601a) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `Banner` component
+
+- [#636](https://github.com/utilitywarehouse/hearth/pull/636) [`a363352`](https://github.com/utilitywarehouse/hearth/commit/a363352dbfbc44245c64e2a16347463b89ff519a) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `ExpandableCard` component
+
+- [#631](https://github.com/utilitywarehouse/hearth/pull/631) [`57b4991`](https://github.com/utilitywarehouse/hearth/commit/57b49912c90dce3d88a699bd50217df08dab601a) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `HighlightBanner` component
+
 ## 0.7.0
 
 ### Minor Changes

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

@@ -0,0 +1,6 @@
+import type BannerProps from './Banner.props';
+declare const Banner: {
+    ({ icon, iconContainerVariant, iconContainerSize, iconContainerColor, illustration, image, heading, description, direction, link, button, onPress, onClose, variant, colorScheme, style, ...props }: BannerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Banner;

package/build/components/Banner/Banner.js

@@ -0,0 +1,161 @@
+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 { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { Card } from '../Card';
+import { Heading } from '../Heading';
+import { IconContainer } from '../IconContainer';
+import { ThemedImage } from '../ThemedImage';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+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 });
+    const renderIconOrImage = () => {
+        if (icon) {
+            return (_jsx(IconContainer, { icon: icon, variant: iconContainerVariant, size: iconContainerSize, color: iconContainerColor, style: styles.media }));
+        }
+        if (illustration) {
+            return (_jsx(ThemedImage, { light: illustration.light, dark: illustration.dark, style: styles.image, accessible: true, accessibilityLabel: heading }));
+        }
+        if (image) {
+            return (_jsx(View, { style: [styles.media, styles.imageWrapper], children: _jsx(ThemedImage, { light: image.light, dark: image.dark, style: styles.image, accessible: true, accessibilityLabel: heading }) }));
+        }
+        return null;
+    };
+    const renderAction = () => {
+        if (link) {
+            return _jsx(View, { style: styles.action, children: link });
+        }
+        if (button) {
+            return _jsx(View, { style: styles.action, children: button });
+        }
+        return null;
+    };
+    const content = (_jsxs(View, { style: styles.container, children: [renderIconOrImage(), _jsxs(View, { style: styles.contentContainer, 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" }))] })] }));
+    if (onPress) {
+        return (_jsx(Card, { variant: variant, style: [styles.card, style], ...props, children: _jsx(Pressable, { onPress: onPress, accessibilityRole: "button", style: styles.pressable, children: content }) }));
+    }
+    return (_jsx(Card, { variant: variant, style: [styles.card, style], ...props, children: content }));
+};
+Banner.displayName = 'Banner';
+const styles = StyleSheet.create(theme => ({
+    card: {},
+    pressable: {
+        width: '100%',
+    },
+    container: {
+        flexDirection: 'row',
+        gap: theme.space.lg,
+        variants: {
+            direction: {
+                horizontal: {
+                    flexDirection: 'row',
+                    alignItems: 'flex-start',
+                },
+                vertical: {
+                    flexDirection: 'column',
+                    alignItems: 'stretch',
+                },
+            },
+            hasIllustration: {
+                true: {},
+                false: {},
+            },
+        },
+        compoundVariants: [
+            {
+                direction: 'vertical',
+                hasIllustration: false,
+                styles: {
+                    alignItems: 'flex-start',
+                },
+            },
+            {
+                direction: 'vertical',
+                hasIllustration: true,
+                styles: {
+                    alignItems: 'center',
+                },
+            },
+        ],
+    },
+    media: {
+        flexShrink: 0,
+        variants: {
+            direction: {
+                horizontal: {},
+                vertical: {
+                    alignSelf: 'flex-start',
+                },
+            },
+        },
+    },
+    imageWrapper: {
+        variants: {
+            direction: {
+                horizontal: {},
+                vertical: {
+                    width: '100%',
+                },
+            },
+        },
+    },
+    image: {
+        borderRadius: theme.borderRadius.md,
+        borderWidth: theme.borderWidth[1],
+        borderColor: theme.color.border.strong,
+        variants: {
+            direction: {
+                horizontal: { width: 160, height: 95 },
+                vertical: {
+                    width: '100%',
+                    height: 160,
+                },
+            },
+        },
+    },
+    contentContainer: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        justifyContent: 'space-between',
+        gap: theme.space.lg,
+    },
+    textContainer: {
+        flex: 1,
+        gap: theme.space.lg,
+    },
+    heading: {
+        compoundVariants: [
+            {
+                direction: 'vertical',
+                hasIllustration: true,
+                styles: {
+                    textAlign: 'center',
+                },
+            },
+        ],
+    },
+    description: {
+        compoundVariants: [
+            {
+                direction: 'vertical',
+                hasIllustration: true,
+                styles: {
+                    textAlign: 'center',
+                },
+            },
+        ],
+    },
+    action: {
+        alignSelf: 'flex-start',
+    },
+    chevron: {
+        alignSelf: 'center',
+    },
+    closeButton: {
+        alignSelf: 'flex-start',
+    },
+}));
+export default Banner;

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

@@ -0,0 +1,82 @@
+import type { ComponentType, ReactElement } from 'react';
+import type { ImageSourcePropType } from 'react-native';
+import type CardProps from '../Card/Card.props';
+export type BannerDirection = 'horizontal' | 'vertical';
+export interface BannerProps extends Omit<CardProps, 'noPadding' | 'variant' | 'colorScheme' | 'space' | 'gap' | 'rowGap' | 'columnGap' | 'flexDirection' | 'flexWrap' | 'alignItems' | 'justifyContent'> {
+    /**
+     * Icon component to display in the banner
+     * Mutually exclusive with image
+     */
+    icon?: ComponentType;
+    /**
+     * Icon container variant
+     * @default 'subtle'
+     */
+    iconContainerVariant?: 'subtle' | 'emphasis';
+    /**
+     * Icon container size
+     * @default 'md'
+     */
+    iconContainerSize?: 'sm' | 'md' | 'lg';
+    /**
+     * Icon container color
+     * @default 'pig'
+     */
+    iconContainerColor?: 'pig' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'highlight';
+    /**
+     * Illustration to display in the banner
+     * Mutually exclusive with icon and image
+     */
+    illustration?: {
+        light: ImageSourcePropType | ReactElement | ComponentType;
+        dark: ImageSourcePropType | ReactElement | ComponentType;
+    };
+    /**
+     * Image to display in the banner
+     * Mutually exclusive with icon and illustration
+     */
+    image?: {
+        light: ImageSourcePropType | ReactElement | ComponentType;
+        dark: ImageSourcePropType | ReactElement | ComponentType;
+    };
+    /**
+     * Heading text
+     */
+    heading: string;
+    /**
+     * Description text
+     */
+    description: string;
+    /**
+     * Layout direction for icon/image and content
+     * @default 'horizontal'
+     */
+    direction?: BannerDirection;
+    /**
+     * Link element to display
+     */
+    link?: ReactElement;
+    /**
+     * Button element to display
+     */
+    button?: ReactElement;
+    /**
+     * Makes the entire banner pressable
+     */
+    onPress?: () => void;
+    /**
+     * Close button handler
+     */
+    onClose?: () => void;
+    /**
+     * Card variant
+     * @default 'subtle'
+     */
+    variant?: 'subtle' | 'emphasis';
+    /**
+     * Color scheme for the banner
+     * @default 'pig'
+     */
+    colorScheme?: 'pig' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'highlight';
+}
+export default BannerProps;

package/build/components/Banner/Banner.props.js

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

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

@@ -0,0 +1,2 @@
+export { default as Banner } from './Banner';
+export type { default as BannerProps } from './Banner.props';

package/build/components/Banner/index.js

@@ -0,0 +1 @@
+export { default as Banner } from './Banner';

package/build/components/BottomSheet/BottomSheetBackdrop.js

@@ -5,11 +5,7 @@ import { useTheme } from '../../hooks';
 const StyledBottomSheetBackdrop = withUnistyles(Backdrop);
 const BottomSheetBackdrop = ({ style, ...props }) => {
     const theme = useTheme();
-    return (_jsx(StyledBottomSheetBackdrop
-    // @ts-expect-error - style prop type issue
-    , { 
-        // @ts-expect-error - style prop type issue
-        style: [styles.backdrop, style], opacity: theme.components.overlay.opacity / 100, appearsOnIndex: 0, disappearsOnIndex: -1, ...props }));
+    return (_jsx(StyledBottomSheetBackdrop, { style: [styles.backdrop, style], opacity: theme.components.overlay.opacity / 100, appearsOnIndex: 0, disappearsOnIndex: -1, ...props }));
 };
 const styles = StyleSheet.create(theme => ({
     backdrop: {

package/build/components/BottomSheet/BottomSheetFlatList.js

@@ -9,11 +9,7 @@ const BottomSheetFlatList = ({ style, contentContainerStyle, isModal = true, ...
         isModal,
         handle,
     });
-    return (_jsx(StyledBottomSheetFlatList
-    // @ts-expect-error - style prop type issue
-    , { 
-        // @ts-expect-error - style prop type issue
-        style: [styles.container, style], contentContainerStyle: [styles.contentContainer, contentContainerStyle], ...props }));
+    return (_jsx(StyledBottomSheetFlatList, { style: [styles.container, style], contentContainerStyle: [styles.contentContainer, contentContainerStyle], ...props }));
 };
 const styles = StyleSheet.create((theme, rt) => ({
     container: {},

package/build/components/BottomSheet/BottomSheetHandle.js

@@ -3,11 +3,7 @@ import { BottomSheetHandle as Handle } from '@gorhom/bottom-sheet';
 import { StyleSheet, withUnistyles } from 'react-native-unistyles';
 const StyledBottomSheetHandle = withUnistyles(Handle);
 const BottomSheetHandle = ({ style, indicatorStyle, ...props }) => {
-    return (_jsx(StyledBottomSheetHandle
-    // @ts-expect-error - style prop type issue
-    , { 
-        // @ts-expect-error - style prop type issue
-        style: [styles.handle, style], indicatorStyle: [styles.indicator, indicatorStyle], ...props }));
+    return (_jsx(StyledBottomSheetHandle, { style: [styles.handle, style], indicatorStyle: [styles.indicator, indicatorStyle], ...props }));
 };
 const styles = StyleSheet.create(theme => ({
     handle: {

package/build/components/BottomSheet/useBottomSheetLogic.d.ts

@@ -9,7 +9,7 @@ interface UseBottomSheetLogicProps<T = any> {
     handleStyle?: ViewStyle;
 }
 declare const useBottomSheetLogic: <T = any>(props: UseBottomSheetLogicProps<T>) => {
-    renderBackdrop: (backDropProps: BottomSheetBackdropProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<React.ReactNode> | null | undefined;
+    renderBackdrop: (backDropProps: BottomSheetBackdropProps) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
     renderHandle: (handleProps: BottomSheetHandleProps) => import("react/jsx-runtime").JSX.Element | null;
 };
 export default useBottomSheetLogic;

package/build/components/Expandable/Expandable.d.ts

@@ -0,0 +1,6 @@
+import { ExpandableProps } from './Expandable.props';
+declare const Expandable: {
+    ({ expanded, onExpandedChange, children, duration, style, accessibilityLabel, testID, animateOpacity, ...props }: ExpandableProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Expandable;

package/build/components/Expandable/Expandable.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { View } from 'react-native';
+import Animated, { useAnimatedStyle, useDerivedValue, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
+const Expandable = ({ expanded = false, onExpandedChange, children, duration = 200, style, accessibilityLabel, testID, animateOpacity = true, ...props }) => {
+    const height = useSharedValue(0);
+    const open = useSharedValue(expanded);
+    // Update open value when expanded prop changes and call callback
+    useEffect(() => {
+        if (open.value !== expanded) {
+            open.value = expanded;
+            onExpandedChange?.(expanded);
+        }
+    }, [expanded, onExpandedChange, open]);
+    const derivedHeight = useDerivedValue(() => withTiming(height.value * Number(open.value), {
+        duration,
+    }));
+    const derivedOpacity = useDerivedValue(() => animateOpacity
+        ? withTiming(Number(open.value), {
+            duration,
+        })
+        : 1);
+    const heightStyle = useAnimatedStyle(() => ({
+        height: derivedHeight.value,
+    }));
+    const opacityStyle = useAnimatedStyle(() => ({
+        opacity: derivedOpacity.value,
+    }));
+    return (_jsx(Animated.View, { style: [styles.container, heightStyle, style], accessible: true, accessibilityLabel: accessibilityLabel, accessibilityRole: "none", accessibilityState: { expanded }, testID: testID, ...props, children: _jsx(Animated.View, { style: opacityStyle, children: _jsx(View, { onLayout: e => {
+                    height.value = e.nativeEvent.layout.height;
+                }, style: styles.content, children: children }) }) }));
+};
+Expandable.displayName = 'Expandable';
+const styles = StyleSheet.create(() => ({
+    container: {
+        overflow: 'hidden',
+    },
+    content: {
+        position: 'absolute',
+        width: '100%',
+    },
+}));
+export default Expandable;

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

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+import { ViewProps, ViewStyle } from 'react-native';
+export interface ExpandableProps extends ViewProps {
+    /**
+     * Whether the content is expanded
+     */
+    expanded?: boolean;
+    /**
+     * Callback when expanded state changes
+     */
+    onExpandedChange?: (expanded: boolean) => void;
+    /**
+     * The content to expand/collapse
+     */
+    children: ReactNode;
+    /**
+     * Duration of the animation in milliseconds
+     * @default 200
+     */
+    duration?: number;
+    /**
+     * Additional style for the container
+     */
+    style?: ViewStyle;
+    /**
+     * Accessibility label for screen readers
+     */
+    accessibilityLabel?: string;
+    /**
+     * Test ID for testing
+     */
+    testID?: string;
+    /**
+     * Whether to animate opacity during expansion/collapse
+     * @default true
+     */
+    animateOpacity?: boolean;
+}

package/build/components/Expandable/Expandable.props.js

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

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

@@ -0,0 +1,2 @@
+export { default as Expandable } from './Expandable';
+export type { ExpandableProps } from './Expandable.props';

package/build/components/Expandable/index.js

@@ -0,0 +1 @@
+export { default as Expandable } from './Expandable';

package/build/components/ExpandableCard/ExpandableCard.d.ts

@@ -0,0 +1,6 @@
+import type ExpandableCardProps from './ExpandableCard.props';
+declare const ExpandableCard: {
+    ({ expanded: controlledExpanded, onExpandedChange, heading, helperText, leadingIcon, leadingContent, badge, badgePosition, numericValue, expandedContent, duration, animateOpacity, disabled, testID, children, ...cardProps }: ExpandableCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ExpandableCard;

package/build/components/ExpandableCard/ExpandableCard.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Card } from '../Card';
+import ExpandableCardExpandedContent from './ExpandableCardExpandedContent';
+import ExpandableCardTrigger from './ExpandableCardTrigger';
+const ExpandableCard = ({ expanded: controlledExpanded, onExpandedChange, heading, helperText, leadingIcon, leadingContent, badge, badgePosition = 'bottom', numericValue, expandedContent, duration = 200, animateOpacity = true, disabled = false, testID = 'expandable-card', children, ...cardProps }) => {
+    const [internalExpanded, setInternalExpanded] = useState(false);
+    // Use controlled or uncontrolled state
+    const isExpanded = controlledExpanded !== undefined ? controlledExpanded : internalExpanded;
+    const handlePress = () => {
+        if (disabled)
+            return;
+        const newExpanded = !isExpanded;
+        if (controlledExpanded === undefined) {
+            setInternalExpanded(newExpanded);
+        }
+        onExpandedChange?.(newExpanded);
+    };
+    const renderDefaultContent = () => (_jsxs(_Fragment, { children: [_jsx(ExpandableCardTrigger, { onPress: handlePress, disabled: disabled, heading: heading, helperText: helperText, leadingIcon: leadingIcon, leadingContent: leadingContent, badge: badge, badgePosition: badgePosition, numericValue: numericValue, isExpanded: isExpanded, testID: `${testID}-trigger` }), _jsx(ExpandableCardExpandedContent, { isExpanded: isExpanded, duration: duration, animateOpacity: animateOpacity, children: expandedContent })] }));
+    return (_jsx(Card, { noPadding: true, ...cardProps, testID: testID, children: children || renderDefaultContent() }));
+};
+ExpandableCard.displayName = 'ExpandableCard';
+export default ExpandableCard;

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

@@ -0,0 +1,69 @@
+import type { ComponentType, ReactNode } from 'react';
+import type BadgeProps from '../Badge/Badge.props';
+import type CardProps from '../Card/Card.props';
+export interface ExpandableCardProps extends Omit<CardProps, 'children'> {
+    /**
+     * Whether the card is expanded
+     */
+    expanded?: boolean;
+    /**
+     * Callback when expanded state changes
+     */
+    onExpandedChange?: (expanded: boolean) => void;
+    /**
+     * The heading text displayed in the trigger
+     */
+    heading?: string;
+    /**
+     * Optional helper text displayed below the heading
+     */
+    helperText?: string;
+    /**
+     * Leading icon component
+     */
+    leadingIcon?: ComponentType;
+    /**
+     * Leading content (icon or custom element)
+     */
+    leadingContent?: ReactNode;
+    /**
+     * Badge to display
+     */
+    badge?: BadgeProps;
+    /**
+     * Badge position
+     * @default 'bottom'
+     */
+    badgePosition?: 'top' | 'bottom';
+    /**
+     * Numeric value to display on the right
+     */
+    numericValue?: string | number;
+    /**
+     * The content to show when expanded
+     */
+    expandedContent?: ReactNode;
+    /**
+     * Duration of the expansion animation in milliseconds
+     * @default 200
+     */
+    duration?: number;
+    /**
+     * Whether to animate opacity during expansion
+     * @default true
+     */
+    animateOpacity?: boolean;
+    /**
+     * Whether the card is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Test ID for testing
+     */
+    testID?: string;
+    /**
+     * Custom children for advanced composition
+     */
+    children?: ReactNode;
+}
+export default ExpandableCardProps;

package/build/components/ExpandableCard/ExpandableCard.props.js

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

package/build/components/ExpandableCard/ExpandableCardContent.d.ts

@@ -0,0 +1,6 @@
+import { type ViewProps } from 'react-native';
+declare const ExpandableCardContent: {
+    ({ children, ...props }: ViewProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ExpandableCardContent;

package/build/components/ExpandableCard/ExpandableCardContent.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+const ExpandableCardContent = ({ children, ...props }) => {
+    return (_jsx(View, { ...props, style: [styles.container, props.style], children: children }));
+};
+ExpandableCardContent.displayName = 'ExpandableCardContent';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        gap: theme.components.expandableCard.gapVertical,
+        flex: 1,
+    },
+}));
+export default ExpandableCardContent;

package/build/components/ExpandableCard/ExpandableCardExpandedContent.d.ts

@@ -0,0 +1,11 @@
+interface ExpandableCardExpandedContentProps {
+    children: React.ReactNode;
+    isExpanded: boolean;
+    duration?: number;
+    animateOpacity?: boolean;
+}
+declare const ExpandableCardExpandedContent: {
+    ({ children, isExpanded, duration, animateOpacity, }: ExpandableCardExpandedContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ExpandableCardExpandedContent;

package/build/components/ExpandableCard/ExpandableCardExpandedContent.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+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 })] }) }) }));
+};
+ExpandableCardExpandedContent.displayName = 'ExpandableCardExpandedContent';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        width: '100%',
+    },
+    content: {
+        padding: theme.components.card.mobile.padding,
+    },
+}));
+export default ExpandableCardExpandedContent;

package/build/components/ExpandableCard/ExpandableCardGroup.d.ts

@@ -0,0 +1,6 @@
+import type ExpandableCardGroupProps from './ExpandableCardGroup.props';
+declare const ExpandableCardGroup: {
+    ({ heading, helperText, headerTrailingContent, children, style, testID, ...props }: ExpandableCardGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ExpandableCardGroup;

package/build/components/ExpandableCard/ExpandableCardGroup.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { SectionHeader } from '../SectionHeader';
+const ExpandableCardGroup = ({ heading, helperText, headerTrailingContent, children, style, testID = 'expandable-card-group', ...props }) => {
+    return (_jsxs(View, { style: [styles.container, style], testID: testID, ...props, children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, trailingContent: headerTrailingContent })) : null, _jsx(View, { style: styles.cardsContainer, children: children })] }));
+};
+ExpandableCardGroup.displayName = 'ExpandableCardGroup';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        gap: theme.components.expandableCard.group.gap,
+    },
+    cardsContainer: {
+        gap: theme.components.expandableCard.group.gap,
+    },
+}));
+export default ExpandableCardGroup;