@utilitywarehouse/hearth-react-native 0.6.0 → 0.7.0

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/Helper/HelperIcon.js

@@ -7,7 +7,8 @@ const HelperIcon = (props) => {
     const { validationStatus } = useHelperContext();
     styles.useVariants({ validationStatus });
     return (_jsx(Icon, { style: Platform.OS === 'web'
-            ? StyleSheet.compose(styles.icon, props.style)
+            ? // @ts-expect-error - style prop type issue
+                { ...styles.icon, ...props.style }
             : [styles.icon, props.style], ...props }));
 };
 HelperIcon.displayName = 'HelperIcon';

package/build/components/Icon/Icon.d.ts

@@ -1,8 +1,4 @@
+import type React from 'react';
 import type IconProps from './Icon.props';
-export declare const Icon: import("@gluestack-ui/icon/lib/typescript/createIcon").IIconComponentType<(Partial<IconProps> & {
-    uniProps?: import("react-native-unistyles/lib/typescript/src/core/withUnistyles/types").Mappings<IconProps> | undefined;
-} & import("react").RefAttributes<never>) | {
-    fill?: import("react-native").ColorValue | undefined;
-    stroke?: import("react-native").ColorValue | undefined;
-}>;
+export declare const Icon: React.ForwardRefExoticComponent<IconProps>;
 export default Icon;

package/build/components/IconButton/IconButtonIcon.js

@@ -13,7 +13,8 @@ const IconButtonIcon = (props) => {
         size,
     });
     return (_jsx(Icon, { ...props, style: Platform.OS === 'web'
-            ? StyleSheet.compose(styles.icon, props.style)
+            ? // @ts-expect-error - style prop type issue
+                { ...styles.icon, ...props.style }
             : [styles.icon, props.style], children: props.children }));
 };
 IconButtonIcon.displayName = 'IconButtonIcon';

package/build/components/IconContainer/IconContainer.d.ts

@@ -1,5 +1,6 @@
 import type IconContainerProps from './IconContainer.props';
-declare const IconContainer: import("react").ForwardRefExoticComponent<Partial<IconContainerProps> & {
-    uniProps?: import("react-native-unistyles/lib/typescript/src/core/withUnistyles/types").Mappings<IconContainerProps> | undefined;
-} & import("react").RefAttributes<never>>;
+declare const IconContainer: {
+    ({ icon: IconComp, size, radiusNone, variant, color, style, ...props }: IconContainerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default IconContainer;

package/build/components/IconContainer/IconContainer.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from 'react-native';
-import { StyleSheet, withUnistyles } from 'react-native-unistyles';
+import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
-const IconContainer = withUnistyles(({ icon: IconComp, size = 'md', radiusNone = false, variant = 'subtle', color = 'pig', style, ...props }) => {
+const IconContainer = ({ icon: IconComp, size = 'md', radiusNone = false, variant = 'subtle', color = 'pig', style, ...props }) => {
     styles.useVariants({ size, radiusNone, variant, color });
     return (_jsx(View, { style: [styles.container, style], ...props, children: IconComp ? _jsx(Icon, { as: IconComp, style: styles.icon }) : null }));
-});
+};
 IconContainer.displayName = 'IconContainer';
 const styles = StyleSheet.create(theme => ({
     container: {

package/build/components/Input/InputField.js

@@ -9,7 +9,9 @@ const InputField = ({ style, inBottomSheet = false, ...props }) => {
     styles.useVariants({ focused, type });
     const { color } = useTheme();
     if (inBottomSheet) {
-        return (_jsx(BottomSheetTextInput, { placeholderTextColor: color.text.secondary, selectionColor: color.purple[700], cursorColor: color.purple[700], verticalAlign: "middle", "aria-disabled": disabled, ...props, style: [styles.input, style] }));
+        return (
+        // @ts-expect-error - BottomSheetTextInput type issue
+        _jsx(BottomSheetTextInput, { placeholderTextColor: color.text.secondary, selectionColor: color.purple[700], cursorColor: color.purple[700], verticalAlign: "middle", "aria-disabled": disabled, ...props, style: [styles.input, style] }));
     }
     return (_jsx(RNTextInput, { placeholderTextColor: color.text.secondary, selectionColor: color.purple[700], cursorColor: color.purple[700], verticalAlign: "middle", "aria-disabled": disabled, ...props, style: [styles.input, style] }));
 };
@@ -24,7 +26,7 @@ const styles = StyleSheet.create(theme => ({
         color: theme.color.text.primary,
         fontSize: theme.typography.mobile.bodyText.md.fontSize,
         fontFamily: theme.typography.mobile.bodyText.fontFamily,
-        fontWeight: theme.typography.mobile.bodyText.fontWeight,
+        fontWeight: `${theme.typography.mobile.bodyText.fontWeight}`,
         borderWidth: 0,
         variants: {
             focused: {

package/build/components/Input/InputIcon.js

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

package/build/components/Link/LinkIcon.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Platform } from 'react-native';
-import { useLinkContext } from './Link.context';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
+import { useLinkContext } from './Link.context';
 const LinkIcon = ({ children, ...props }) => {
     const { active, inverted, disabled } = useLinkContext();
     styles.useVariants({ active, inverted, disabled });
     return (_jsx(Icon, { ...props, style: Platform.OS === 'web'
-            ? StyleSheet.compose(styles.icon, props.style)
+            ? // @ts-expect-error - style prop type issue
+                { ...styles.icon, ...props.style }
             : [styles.icon, props.style], children: children }));
 };
 LinkIcon.displayName = 'LinkIcon';

package/build/components/List/ListAction/ListActionTrailingIcon.js

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

package/build/components/List/ListItem/ListItemIcon.js

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

package/build/components/List/ListItem/ListItemTrailingIcon.js

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

package/build/components/Radio/RadioIcon.js

@@ -1,11 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Platform } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
 import { CircleIcon } from '../Icons';
-import { Platform } from 'react-native';
 const RadioIcon = ({ style, ...props }) => {
     return (_jsx(Icon, { as: CircleIcon, ...props, style: Platform.OS === 'web'
-            ? StyleSheet.compose(styles.container, style)
+            ? {
+                // @ts-expect-error - style prop type issue
+                ...styles.container,
+                // @ts-expect-error - style prop type issue
+                ...props.style,
+            }
             : [styles.container, style] }));
 };
 RadioIcon.displayName = 'RadioIcon';

package/build/components/RadioCard/RadioCardIcon.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Platform } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
 import { CircleIcon } from '../Icons';
-import { Platform } from 'react-native';
 const RadioCardIcon = ({ style, ...props }) => {
     return (_jsx(Icon, { as: CircleIcon, ...props, style: Platform.OS === 'web'
-            ? StyleSheet.compose(styles.container, style)
+            ? // @ts-expect-error - style prop type issue
+                { ...styles.container, ...props.style }
             : [styles.container, style] }));
 };
 RadioCardIcon.displayName = 'RadioCardIcon';

package/build/components/Spinner/Spinner.js

@@ -7,7 +7,9 @@ import { Circle, G, Svg } from 'react-native-svg';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { getFlattenedColorValue } from '../../utils';
+// @ts-expect-error - Animated.View type issue
 const AnimatedSvg = Animated.createAnimatedComponent(Svg);
+// @ts-expect-error - Animated.View type issue
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 const SpinnerRoot = ({ size = 'md', color, ...props }) => {
     const { components } = useTheme();

package/build/components/Spinner/Spinner.web.js

@@ -8,7 +8,9 @@ import { Circle, G, Svg } from 'react-native-svg';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { getFlattenedColorValue } from '../../utils';
+// @ts-expect-error - Animated.View type issue
 const AnimatedSvg = Animated.createAnimatedComponent(Svg);
+// @ts-expect-error - Animated.View type issue
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 const SpinnerRoot = ({ size = 'md', color, ...props }) => {
     const { components } = useTheme();

package/build/components/Switch/Switch.js

@@ -4,10 +4,12 @@ import { useEffect } from 'react';
 import { Pressable } from 'react-native';
 import Animated, { Easing, interpolateColor, useAnimatedStyle, useReducedMotion, useSharedValue, withSpring, withTiming, } from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
+import { useAnimatedTheme } from 'react-native-unistyles/reanimated';
 import { useTheme } from '../../hooks';
 import { Icon } from '../Icon';
 const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = 'medium', ...accessibilityProps }) => {
     const { components, color } = useTheme();
+    const theme = useAnimatedTheme();
     const SWITCH_WIDTH = size === 'medium' ? components.switch.md.width : components.switch.sm.width;
     const THUMB_SIZE = size === 'medium' ? components.switch.md.circle.size : components.switch.sm.circle.size;
     const PADDING = components.switch.padding;
@@ -17,11 +19,11 @@ const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = '
     const progress = useSharedValue(value ? 1 : 0);
     const animatedThumbStyle = useAnimatedStyle(() => ({
         transform: [{ translateX: offset.value }],
-    }));
+    }), [offset]);
     const animatedSwitchBackgroundStyle = useAnimatedStyle(() => {
         const backgroundColor = interpolateColor(progress.value, [0, 1], [
-            color.interactive.functional.surface.strong.default,
-            color.interactive.brand.surface.strong.default,
+            theme.value.color.interactive.functional.surface.strong.default,
+            theme.value.color.interactive.brand.surface.strong.default,
         ]);
         return { backgroundColor };
     });

package/build/components/Switch/Switch.web.js

@@ -6,6 +6,7 @@ import Animated, { Easing, interpolateColor, useAnimatedStyle, useReducedMotion,
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { Icon } from '../Icon';
+// @ts-expect-error - Animated.View type issue
 const AnimatedView = Animated.createAnimatedComponent(View);
 const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = 'medium', ...accessibilityProps }) => {
     const { components, color } = useTheme();

package/build/components/Tabs/TabsList.js

@@ -6,6 +6,7 @@ import Animated, { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useShare
 import { StyleSheet } from 'react-native-unistyles';
 import { UnstyledIconButton } from '../UnstyledIconButton';
 import { useTabsContext } from './Tabs.context';
+// @ts-expect-error - Animated.View type issue
 const Indicator = Animated.createAnimatedComponent(View);
 const SCROLL_STEP_RATIO = 0.6;
 const SCROLL_BUTTON_HITSLOP = { top: 10, bottom: 10, left: 10, right: 10 };
@@ -59,7 +60,11 @@ const TabsList = ({ children, style, ...rest }) => {
         }
         return;
     }, [updateScrollState]);
-    return (_jsxs(View, { style: [styles.wrapper, style], ...rest, accessibilityRole: "tablist", children: [canScrollLeft && (_jsx(View, { style: [styles.iconButtonWrap, styles.scrollButtonLeft], accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : {}), children: _jsx(UnstyledIconButton, { accessibilityLabel: undefined, icon: ChevronLeftSmallIcon, onPress: () => scrollBy(-1), style: styles.iconButton, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", hitSlop: SCROLL_BUTTON_HITSLOP, ...(Platform.OS === 'web' ? { 'aria-hidden': true, tabIndex: -1 } : {}) }) })), _jsx(Animated.ScrollView, { ref: scrollRef, horizontal: true, showsHorizontalScrollIndicator: false, onLayout: onLayoutContainer, onContentSizeChange: onContentSizeChange, onScroll: onScrollHandler, scrollEventThrottle: 16, bounces: false, contentContainerStyle: styles.scrollContent, children: _jsxs(View, { style: styles.container, children: [children, _jsx(Indicator, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: [styles.indicator, indicatorStyle] })] }) }), canScrollRight && (_jsx(View, { style: [styles.iconButtonWrap, styles.scrollButtonRight], accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : {}), children: _jsx(UnstyledIconButton, { accessibilityLabel: undefined, icon: ChevronRightSmallIcon, onPress: () => scrollBy(1), style: styles.iconButton, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", hitSlop: SCROLL_BUTTON_HITSLOP, ...(Platform.OS === 'web' ? { 'aria-hidden': true, tabIndex: -1 } : {}) }) }))] }));
+    return (_jsxs(View, { style: [styles.wrapper, style], ...rest, accessibilityRole: "tablist", children: [canScrollLeft && (_jsx(View, { style: [styles.iconButtonWrap, styles.scrollButtonLeft], accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : {}), children: _jsx(UnstyledIconButton, { accessibilityLabel: undefined, icon: ChevronLeftSmallIcon, onPress: () => scrollBy(-1), style: styles.iconButton, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", hitSlop: SCROLL_BUTTON_HITSLOP, ...(Platform.OS === 'web' ? { 'aria-hidden': true, tabIndex: -1 } : {}) }) })), _jsx(Animated.ScrollView, { ref: scrollRef, horizontal: true, showsHorizontalScrollIndicator: false, onLayout: onLayoutContainer, onContentSizeChange: onContentSizeChange, onScroll: onScrollHandler, scrollEventThrottle: 16, bounces: false, contentContainerStyle: styles.scrollContent, children: _jsxs(View, { style: styles.container, children: [children, _jsx(Indicator
+                        // @ts-expect-error - Animated.View type issue
+                        , { 
+                            // @ts-expect-error - Animated.View type issue
+                            accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: [styles.indicator, indicatorStyle] })] }) }), canScrollRight && (_jsx(View, { style: [styles.iconButtonWrap, styles.scrollButtonRight], accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : {}), children: _jsx(UnstyledIconButton, { accessibilityLabel: undefined, icon: ChevronRightSmallIcon, onPress: () => scrollBy(1), style: styles.iconButton, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", hitSlop: SCROLL_BUTTON_HITSLOP, ...(Platform.OS === 'web' ? { 'aria-hidden': true, tabIndex: -1 } : {}) }) }))] }));
 };
 TabsList.displayName = 'TabsList';
 const styles = StyleSheet.create(theme => ({

package/build/components/Textarea/TextareaField.js

@@ -20,7 +20,7 @@ const styles = StyleSheet.create(theme => ({
         color: theme.color.text.primary,
         fontSize: theme.typography.mobile.bodyText.md.fontSize,
         fontFamily: theme.typography.mobile.bodyText.fontFamily,
-        fontWeight: theme.typography.mobile.bodyText.fontWeight,
+        fontWeight: `${theme.typography.mobile.bodyText.fontWeight}`,
         borderWidth: 0,
         outlineWidth: 0,
         _web: {

package/build/components/ToggleButton/ToggleButtonIcon.js

@@ -7,7 +7,8 @@ const ButtonIcon = ({ children, toggled, as = TickSmallIcon, ...props }) => {
     styles.useVariants({ toggled });
     const IconAny = Icon;
     return (_jsx(IconAny, { as: as, ...props, style: Platform.OS === 'web'
-            ? StyleSheet.compose(styles.icon, props.style)
+            ? // @ts-ignore
+                { ...styles.icon, ...props.style }
             : [styles.icon, props.style], children: children }));
 };
 ButtonIcon.displayName = 'ButtonIcon';

package/build/components/ToggleButton/ToggleButtonRoot.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useCardActionContext } from '../Card';
+import { useCardPressHandlerContext } from '../Card';
 const ButtonRoot = ({ children, onToggle, toggled, states, onPress, ...props }) => {
     const { active } = states || {};
-    const { pressed } = useCardActionContext();
+    const { pressed } = useCardPressHandlerContext();
     styles.useVariants({
         toggled,
         active: active || pressed,