@utilitywarehouse/hearth-react-native 0.6.0 → 0.8.0

package/build/components/Card/CardAction/CardActionIcon.d.ts

@@ -0,0 +1,9 @@
+import { ComponentType } from 'react';
+import { IconProps } from '../../Icon';
+declare const CardActionIcon: {
+    ({ children, ...props }: IconProps & {
+        as?: ComponentType;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default CardActionIcon;

package/build/components/Card/CardAction/CardActionIcon.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Platform } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Icon } from '../../Icon';
+const CardActionIcon = ({ children, ...props }) => {
+    return (_jsx(Icon, { ...props, style: Platform.OS === 'web'
+            ? // @ts-expect-error - style prop type issue
+                { ...styles.icon, ...props.style }
+            : [styles.icon, props.style], children: children }));
+};
+CardActionIcon.displayName = 'CardActionIcon';
+const styles = StyleSheet.create(theme => ({
+    icon: {
+        color: theme.color.icon.primary,
+        width: 24,
+        height: 24,
+    },
+}));
+export default CardActionIcon;

package/build/components/Card/CardAction/CardActionLeadingContent.d.ts

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

package/build/components/Card/CardAction/CardActionLeadingContent.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+const CardActionLeadingContent = ({ children, ...props }) => (_jsx(View, { ...props, children: children }));
+CardActionLeadingContent.displayName = 'CardActionLeadingContent';
+export default CardActionLeadingContent;

package/build/components/Card/CardAction/CardActionRoot.d.ts

@@ -0,0 +1,12 @@
+import type CardActionProps from './CardAction.props';
+declare const CardActionRoot: {
+    ({ heading, helperText, leadingContent, trailingContent, disabled, loading, children, states, badge, badgePosition, iconContainer, iconContainerColor, iconContainerVariant, leadingIcon, trailingIcon, size, ...props }: CardActionProps & {
+        states?: {
+            active?: boolean;
+            disabled?: boolean;
+        };
+        isFirst?: boolean;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default CardActionRoot;

package/build/components/Card/CardAction/CardActionRoot.js

@@ -0,0 +1,155 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { useMemo } from 'react';
+import { Pressable, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Badge } from '../../Badge';
+import { IconContainer } from '../../IconContainer';
+import { Skeleton } from '../../Skeleton';
+import { useCardContext } from '../Card.context';
+import { CardActionContext } from './CardAction.context';
+import CardActionContent from './CardActionContent';
+import CardActionHelperText from './CardActionHelperText';
+import CardActionIcon from './CardActionIcon';
+import CardActionLeadingContent from './CardActionLeadingContent';
+import CardActionText from './CardActionText';
+import CardActionTrailingContent from './CardActionTrailingContent';
+import CardActionTrailingIcon from './CardActionTrailingIcon';
+const CardActionRoot = ({ heading, helperText, leadingContent, trailingContent, disabled, loading, children, states, badge, badgePosition = 'bottom', iconContainer = true, iconContainerColor, iconContainerVariant, leadingIcon, trailingIcon = ChevronRightSmallIcon, size = 'md', ...props }) => {
+    const { onPress } = props;
+    const { active } = states || { active: false };
+    const isLoading = loading;
+    const showPressed = isLoading ? false : !!onPress;
+    const isDisabled = disabled || false;
+    const testID = props.testID || 'card-action';
+    const loadingTestID = isLoading ? `${testID}-loading` : testID;
+    const { variant, hasOnlyActions } = useCardContext();
+    const isFirst = props.isFirst;
+    styles.useVariants({
+        showPressed,
+        active,
+        disabled: isDisabled || isLoading,
+        showDisabled: disabled,
+        hasIconContainer: !loading && iconContainer,
+        variant,
+        isFirst: hasOnlyActions && isFirst,
+    });
+    const value = useMemo(() => {
+        return {
+            showPressed,
+            active: active || false,
+            loading: isLoading || false,
+            disabled: isDisabled,
+            size,
+        };
+    }, [active, showPressed, isLoading, isDisabled, size]);
+    if (loading) {
+        return (_jsxs(Pressable, { ...props, testID: loadingTestID, style: [styles.container, styles.alignCenter, props.style], disabled: isDisabled, children: [leadingContent || leadingIcon ? (_jsx(Skeleton, { width: 24, height: 24, style: styles.alignCenter })) : null, _jsxs(CardActionContent, { children: [_jsx(Skeleton, { width: "80%", height: 24, borderRadius: "xs" }), _jsx(Skeleton, { width: "100%", height: 24, borderRadius: "xs" })] }), trailingIcon || trailingContent ? (_jsx(Skeleton, { width: 24, height: 24, borderRadius: "xs", style: styles.alignCenter })) : null] }));
+    }
+    return (_jsx(CardActionContext.Provider, { value: value, children: _jsx(Pressable, { ...props, testID: testID, style: [styles.container, props.style], disabled: isDisabled, accessibilityRole: onPress ? 'button' : undefined, children: children ? (children) : (_jsxs(_Fragment, { children: [leadingIcon && iconContainer ? (_jsx(View, { style: styles.iconContainerWrap, children: _jsx(IconContainer, { style: styles.iconContainer, icon: leadingIcon, variant: iconContainerVariant, color: iconContainerColor, radiusNone: true }) })) : null, _jsxs(View, { style: styles.withIconContainer, children: [leadingContent ? (_jsx(CardActionLeadingContent, { children: leadingContent })) : null, leadingIcon && !iconContainer && !leadingContent ? (_jsx(CardActionLeadingContent, { children: _jsx(CardActionIcon, { as: leadingIcon }) })) : null, _jsxs(CardActionContent, { children: [badgePosition === 'top' && badge ? _jsx(Badge, { ...badge }) : null, _jsx(CardActionText, { children: heading }), badgePosition === 'middle' && badge ? _jsx(Badge, { ...badge }) : null, helperText ? _jsx(CardActionHelperText, { children: helperText }) : null, badgePosition === 'bottom' && badge ? _jsx(Badge, { ...badge }) : null] }), badgePosition === 'right' && badge ? (_jsx(Badge, { ...badge, style: [badge.style, styles.alignCenter] })) : null, trailingContent ? (_jsx(CardActionTrailingContent, { children: trailingContent })) : null, trailingIcon && !trailingContent ? (_jsx(CardActionTrailingContent, { children: _jsx(CardActionTrailingIcon, { as: trailingIcon }) })) : null] })] })) }) }));
+};
+CardActionRoot.displayName = 'CardActionRoot';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        paddingVertical: theme.components.cardAction.content.paddingVertical,
+        paddingHorizontal: theme.components.cardAction.content.paddingHorizontal,
+        flexDirection: 'row',
+        gap: theme.components.cardAction.content.gap,
+        borderTopWidth: theme.borderWidth[1],
+        borderColor: theme.color.border.strong,
+        width: '100%',
+        variants: {
+            isFirst: {
+                true: {
+                    borderTopWidth: 0,
+                },
+            },
+            disabled: {
+                true: {
+                    cursor: 'auto',
+                },
+            },
+            variant: {
+                subtle: {
+                    borderColor: theme.color.border.subtle,
+                },
+                emphasis: {
+                    borderColor: theme.color.border.strong,
+                },
+            },
+            hasIconContainer: {
+                true: {
+                    paddingHorizontal: 0,
+                    paddingVertical: 0,
+                    gap: 0,
+                },
+            },
+            showDisabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                },
+            },
+            showPressed: {
+                true: {
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
+                        },
+                        _active: {
+                            backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+                        },
+                    },
+                },
+                false: {
+                    cursor: 'auto',
+                },
+            },
+            active: {
+                true: {},
+            },
+        },
+        compoundVariants: [
+            {
+                showPressed: true,
+                active: true,
+                styles: {
+                    backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+                },
+            },
+        ],
+    },
+    withIconContainer: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        paddingVertical: theme.components.list.item.functional.padding,
+        paddingHorizontal: theme.components.list.item.functional.padding,
+        gap: theme.components.list.item.gap,
+        flex: 1,
+        variants: {
+            hasIconContainer: {
+                true: {},
+                false: {
+                    flex: 1,
+                    paddingHorizontal: 0,
+                    paddingVertical: 0,
+                    alignItems: 'center',
+                },
+            },
+        },
+    },
+    alignCenter: {
+        alignSelf: 'center',
+        alignItems: 'center',
+    },
+    iconContainer: {
+        flex: 1,
+        _web: {
+            overflow: 'visible',
+            height: '100%',
+        },
+    },
+    iconContainerWrap: {
+        flexDirection: 'column',
+    },
+}));
+export default CardActionRoot;

package/build/components/Card/CardAction/CardActionText.d.ts

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

package/build/components/Card/CardAction/CardActionText.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BodyText } from '../../BodyText';
+import { useCardActionContext } from './CardAction.context';
+const CardActionText = ({ children, ...props }) => {
+    const { size } = useCardActionContext();
+    return (_jsx(BodyText, { size: size, weight: "semibold", ...props, children: children }));
+};
+CardActionText.displayName = 'CardActionText';
+export default CardActionText;

package/build/components/Card/CardAction/CardActionTrailingContent.d.ts

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

package/build/components/Card/CardAction/CardActionTrailingContent.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+const CardActionTrailingContent = ({ children, ...props }) => (_jsx(View, { ...props, children: children }));
+CardActionTrailingContent.displayName = 'CardActionTrailingContent';
+export default CardActionTrailingContent;

package/build/components/Card/CardAction/CardActionTrailingIcon.d.ts

@@ -0,0 +1,9 @@
+import { ComponentType } from 'react';
+import { IconProps } from '../../Icon';
+declare const CardActionTrailingIcon: {
+    ({ children, ...props }: IconProps & {
+        as?: ComponentType;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default CardActionTrailingIcon;

package/build/components/Card/CardAction/CardActionTrailingIcon.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Platform } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Icon } from '../../Icon';
+const CardActionTrailingIcon = ({ children, ...props }) => {
+    return (_jsx(Icon, { ...props, style: Platform.OS === 'web'
+            ? // @ts-expect-error - style prop type issue
+                { ...styles.icon, ...props.style }
+            : [styles.icon, props.style], children: children }));
+};
+CardActionTrailingIcon.displayName = 'CardActionTrailingIcon';
+const styles = StyleSheet.create(theme => ({
+    icon: {
+        color: theme.color.icon.primary,
+        minWidth: 20,
+        minHeight: 20,
+    },
+}));
+export default CardActionTrailingIcon;

package/build/components/Card/CardAction/index.d.ts

@@ -0,0 +1,10 @@
+export { default as CardAction } from './CardAction';
+export { useCardActionContext } from './CardAction.context';
+export type { default as CardActionProps } from './CardAction.props';
+export { default as CardActionContent } from './CardActionContent';
+export { default as CardActionHelperText } from './CardActionHelperText';
+export { default as CardActionIcon } from './CardActionIcon';
+export { default as CardActionLeadingContent } from './CardActionLeadingContent';
+export { default as CardActionText } from './CardActionText';
+export { default as CardActionTrailingContent } from './CardActionTrailingContent';
+export { default as CardActionTrailingIcon } from './CardActionTrailingIcon';

package/build/components/Card/CardAction/index.js

@@ -0,0 +1,9 @@
+export { default as CardAction } from './CardAction';
+export { useCardActionContext } from './CardAction.context';
+export { default as CardActionContent } from './CardActionContent';
+export { default as CardActionHelperText } from './CardActionHelperText';
+export { default as CardActionIcon } from './CardActionIcon';
+export { default as CardActionLeadingContent } from './CardActionLeadingContent';
+export { default as CardActionText } from './CardActionText';
+export { default as CardActionTrailingContent } from './CardActionTrailingContent';
+export { default as CardActionTrailingIcon } from './CardActionTrailingIcon';

package/build/components/Card/CardContent.d.ts

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

package/build/components/Card/CardContent.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { useCardContext } from './Card.context';
+const CardContent = ({ children, style, ...props }) => {
+    const { noPadding, space } = useCardContext();
+    styles.useVariants({
+        noPadding,
+        space,
+    });
+    return (_jsx(View, { style: [styles.container, style], ...props, children: children }));
+};
+CardContent.displayName = 'CardContent';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        variants: {
+            space: theme.globalStyle.variants.space,
+            noPadding: {
+                true: {
+                    padding: theme.components.card.mobile.paddingNone,
+                },
+                false: {
+                    padding: {
+                        base: theme.components.card.mobile.padding,
+                        md: theme.components.card.tablet.padding,
+                        lg: theme.components.card.desktop.padding,
+                    },
+                },
+            },
+        },
+    },
+}));
+export default CardContent;

package/build/components/Card/CardPressHandler.context.d.ts

@@ -0,0 +1,6 @@
+interface CardPressHandlerContextProps {
+    pressed?: boolean;
+}
+export declare const CardPressHandlerContext: import("react").Context<CardPressHandlerContextProps>;
+export declare const useCardPressHandlerContext: () => CardPressHandlerContextProps;
+export {};

package/build/components/Card/CardPressHandler.context.js

@@ -0,0 +1,6 @@
+import { createContext, useContext } from 'react';
+export const CardPressHandlerContext = createContext({});
+export const useCardPressHandlerContext = () => {
+    const context = useContext(CardPressHandlerContext);
+    return context;
+};

package/build/components/Card/{CardAction.d.ts → CardPressHandler.d.ts}

@@ -1,8 +1,8 @@
 import { PropsWithChildren } from 'react';
-declare const CardAction: {
+declare const CardPressHandler: {
     ({ children }: PropsWithChildren<{
-        actionToInherit?: string;
+        handlerToInherit?: string;
     }>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export default CardAction;
+export default CardPressHandler;

package/build/components/Card/CardPressHandler.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useCardContext } from './Card.context';
+import { CardPressHandlerContext } from './CardPressHandler.context';
+const CardPressHandler = ({ children }) => {
+    const { pressed } = useCardContext();
+    const context = useMemo(() => ({
+        pressed,
+    }), [pressed]);
+    return (_jsx(CardPressHandlerContext.Provider, { value: context, children: children }));
+};
+CardPressHandler.displayName = 'CardPressHandler';
+export default CardPressHandler;

package/build/components/Card/CardRoot.js

@@ -1,21 +1,80 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useMemo } from 'react';
 import { Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useStyleProps } from '../../hooks';
 import { CardContext } from './Card.context';
+import CardContent from './CardContent';
+// Helper to check if children contain specific component types
+const checkForComponentType = (children, displayName) => {
+    return React.Children.toArray(children).some(child => {
+        if (React.isValidElement(child)) {
+            // @ts-expect-error - type
+            if (child.type.displayName === displayName) {
+                return true;
+            }
+            const childProps = child.props;
+            if (childProps.children) {
+                return checkForComponentType(childProps.children, displayName);
+            }
+        }
+        return false;
+    });
+};
+// Helper to filter out specific component types from children
+const filterChildren = (children, excludeDisplayName) => {
+    return React.Children.map(children, child => {
+        if (React.isValidElement(child)) {
+            // @ts-expect-error - type
+            if (child.type.displayName === excludeDisplayName) {
+                return null;
+            }
+            const childProps = child.props;
+            if (childProps.children) {
+                return React.cloneElement(child, {
+                    ...childProps,
+                    children: filterChildren(childProps.children, excludeDisplayName),
+                });
+            }
+        }
+        return child;
+    });
+};
+// Helper to extract specific component types from children
+const extractChildren = (children, includeDisplayName, markFirst = false) => {
+    let isFirstFound = false;
+    return React.Children.map(children, child => {
+        if (React.isValidElement(child)) {
+            // @ts-expect-error - type
+            if (child.type.displayName === includeDisplayName) {
+                const isFirst = markFirst && !isFirstFound;
+                if (isFirst) {
+                    isFirstFound = true;
+                }
+                return markFirst
+                    ? React.cloneElement(child, { ...(child.props || {}), isFirst })
+                    : child;
+            }
+            const childProps = child.props;
+            if (childProps.children) {
+                return extractChildren(childProps.children, includeDisplayName, markFirst);
+            }
+        }
+        return null;
+    });
+};
 // Helper that recursively collects onPress or other defined handlers from descendants
 const collectChildActionHandlers = (children) => React.Children.toArray(children).reduce((handlers, child) => {
     if (React.isValidElement(child)) {
         const childProps = child.props;
         // @ts-expect-error - type
-        if (child.type.displayName === 'CardAction') {
+        if (child.type.displayName === 'CardPressHandler') {
             const actionChildren = React.Children.toArray(childProps.children);
-            const actionToInherit = childProps['actionToInherit'] || 'onPress';
+            const handlerToInherit = childProps['handlerToInherit'] || 'onPress';
             const firstChild = actionChildren[0];
             if (React.isValidElement(firstChild) &&
-                typeof firstChild.props[actionToInherit] === 'function') {
-                handlers.push(firstChild.props[actionToInherit]);
+                typeof firstChild.props[handlerToInherit] === 'function') {
+                handlers.push(firstChild.props[handlerToInherit]);
             }
         }
         if (childProps.children) {
@@ -27,6 +86,8 @@ const collectChildActionHandlers = (children) => React.Children.toArray(children
 const Card = ({ children, variant = 'subtle', colorScheme = 'neutralStrong', noPadding = false, style, states, space, disabled = false, onPress, ...rest }) => {
     const { active } = states || { active: false };
     const childActionHandlers = collectChildActionHandlers(children);
+    const hasActions = checkForComponentType(children, 'CardAction');
+    const hasContent = checkForComponentType(children, 'CardContent');
     // Extract style props using our custom hook
     const { computedStyles, remainingProps } = useStyleProps(rest);
     const handlePress = (e) => {
@@ -37,19 +98,50 @@ const Card = ({ children, variant = 'subtle', colorScheme = 'neutralStrong', noP
     };
     const inheritChildAction = childActionHandlers.length > 0;
     const showPressed = inheritChildAction || !!onPress;
+    const filteredChildren = !hasContent && hasActions ? filterChildren(children, 'CardAction') : null;
+    // Check if there's any content besides CardActions
+    const hasOnlyActions = hasActions &&
+        !hasContent &&
+        React.Children.toArray(filteredChildren).filter(child => child != null).length === 0;
+    const filteredCardActions = !hasContent && hasActions
+        ? extractChildren(children, 'CardAction', hasOnlyActions)
+        : null;
+    const context = useMemo(() => ({
+        pressed: showPressed && active,
+        noPadding,
+        hasActions,
+        hasContent,
+        hasOnlyActions,
+        space,
+        variant,
+    }), [showPressed, active, hasActions, hasContent, hasOnlyActions, noPadding, space, variant]);
     styles.useVariants({
         variant,
         colorScheme,
-        noPadding,
+        noPadding: noPadding || hasActions || hasContent,
         active,
         showPressed,
         disabled,
-        space,
+        space: hasActions || hasContent ? 'none' : space,
     });
-    const context = useMemo(() => ({
-        pressed: showPressed && active,
-    }), [showPressed, active]);
-    return (_jsx(CardContext.Provider, { value: context, children: _jsx(Pressable, { ...remainingProps, disabled: disabled, style: [styles.card, computedStyles, style], onPress: handlePress, accessible: showPressed, importantForAccessibility: showPressed ? 'yes' : 'no', children: children }) }));
+    const renderChildren = () => {
+        // Default: render children as-is
+        if (hasContent || !hasActions) {
+            return children;
+        }
+        // Card has actions but no explicit CardContent
+        if (hasOnlyActions) {
+            // Only CardActions, no other content - render actions directly
+            return filteredCardActions;
+        }
+        if (filteredChildren) {
+            // Has both actions and other content - wrap content and render actions below
+            return (_jsxs(_Fragment, { children: [_jsx(CardContent, { children: filteredChildren }), filteredCardActions] }));
+        }
+        // Fallback
+        return children;
+    };
+    return (_jsx(CardContext.Provider, { value: context, children: _jsx(Pressable, { ...remainingProps, disabled: disabled, style: [styles.card, computedStyles, style], onPress: handlePress, accessible: showPressed, importantForAccessibility: showPressed ? 'yes' : 'no', children: renderChildren() }) }));
 };
 Card.displayName = 'Card';
 const styles = StyleSheet.create(theme => ({

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

@@ -1,4 +1,5 @@
 export { default as Card } from './Card';
 export { useCardContext } from './Card.context';
-export { useCardActionContext } from './CardAction.context';
-export { default as CardAction } from './CardAction';
+export * from './CardAction';
+export { default as CardPressHandler } from './CardPressHandler';
+export { useCardPressHandlerContext } from './CardPressHandler.context';

package/build/components/Card/index.js

@@ -1,4 +1,5 @@
 export { default as Card } from './Card';
 export { useCardContext } from './Card.context';
-export { useCardActionContext } from './CardAction.context';
-export { default as CardAction } from './CardAction';
+export * from './CardAction';
+export { default as CardPressHandler } from './CardPressHandler';
+export { useCardPressHandlerContext } from './CardPressHandler.context';

package/build/components/Checkbox/CheckboxIcon.js

@@ -5,7 +5,8 @@ import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
 const CheckboxIcon = ({ style, ...props }) => {
     return (_jsx(Icon, { as: TickSmallIcon, ...props, style: Platform.OS === 'web'
-            ? StyleSheet.compose(styles.icon, style)
+            ? // @ts-expect-error - style prop type issue
+                { ...styles.icon, ...props.style }
             : [styles.icon, style] }));
 };
 const styles = StyleSheet.create(theme => ({

package/build/components/Container/Container.js

@@ -26,9 +26,9 @@ const styles = StyleSheet.create(theme => ({
             : undefined,
         marginHorizontal: typeof extra.margin === 'undefined' && typeof extra.marginHorizontal === 'undefined'
             ? {
-                base: theme.layout.mobile.container.margin,
-                md: theme.layout.tablet.container.margin,
-                lg: theme.layout.desktop.container.margin,
+                base: theme.layout.mobile.container.marginHorizontal,
+                md: theme.layout.tablet.container.marginHorizontal,
+                lg: theme.layout.desktop.container.marginHorizontal,
             }
             : undefined,
         ...extra,

package/build/components/CurrencyInput/CurrencyInput.js

@@ -38,7 +38,7 @@ const styles = StyleSheet.create(theme => ({
     input: {
         fontSize: theme.typography.mobile.detailText['4xl'].fontSize,
         fontFamily: theme.typography.mobile.detailText.fontFamily,
-        fontWeight: theme.typography.mobile.detailText.fontWeight,
+        fontWeight: `${theme.typography.mobile.detailText.fontWeight}`,
         paddingTop: 0,
         paddingBottom: 0,
         paddingLeft: 0,

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;