@hero-design/rn 8.98.0 → 8.99.0

package/testUtils/setup.tsx

@@ -29,7 +29,6 @@ jest.mock('../src/utils/scale', () => ({
   scale: jest.fn((size) => size),
 }));
 
-jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
 jest.mock('react-native-pager-view', () => {
   const RealComponent = jest.requireActual('react-native-pager-view').default;
   const React = jest.requireActual('react');

package/types/components/Accordion/StyledAccordion.d.ts

@@ -1,4 +1,4 @@
-import { TouchableOpacity, View } from 'react-native';
+import { View } from 'react-native';
 export type Variant = 'default' | 'card';
 export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme;
@@ -14,12 +14,10 @@ export declare const StyledItemWrapper: import("@emotion/native").StyledComponen
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-export declare const StyledHeaderWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+export declare const StyledHeaderWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & import("react").RefAttributes<View> & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
-}>;
+}, {}, {}>;
 export declare const StyledCollapse: import("@emotion/native").StyledComponent<import("../Collapse").CollapseProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/types/components/Alert/StyledAlert.d.ts

@@ -1,4 +1,4 @@
-import { TouchableOpacity, View } from 'react-native';
+import { View } from 'react-native';
 import type { ViewProps } from 'react-native';
 import { TextProps } from '../Typography/Text';
 import { IconProps } from '../Icon';
@@ -44,10 +44,8 @@ declare const ContentContainer: import("@emotion/native").StyledComponent<ViewPr
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const CTAWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+declare const CTAWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & import("react").RefAttributes<View> & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
-}>;
+}, {}, {}>;
 export { Container, ContentContainer, TextContainer, IconContainer, CTAWrapper, StyledBody, StyledIcon, };

package/types/components/Attachment/StyledAttachment.d.ts

@@ -1,4 +1,4 @@
-import { TouchableOpacity, View } from 'react-native';
+import { View } from 'react-native';
 declare const StyledContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
@@ -19,10 +19,8 @@ declare const StyledTextContainer: import("@emotion/native").StyledComponent<imp
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledCTAWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+declare const StyledCTAWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & import("react").RefAttributes<View> & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
-}>;
+}, {}, {}>;
 export { StyledContainer, StyledContentContainer, StyledCTAWrapper, StyledTextContainer, };

package/types/components/Avatar/StyledAvatar.d.ts

@@ -1,16 +1,14 @@
-import { View, Image, TouchableOpacity } from 'react-native';
+import { View, Image } from 'react-native';
 import { TextProps } from '../Typography/Text';
 type ThemeSize = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge';
 type ThemeIntent = 'primary' | 'info' | 'danger' | 'success' | 'warning';
-declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & import("react").RefAttributes<View> & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     themeSize: ThemeSize;
     themeIntent: ThemeIntent;
-}, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
-}>;
+}, {}, {}>;
 declare const StyledTextWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/types/components/BottomSheet/StyledBottomSheet.d.ts

@@ -1,5 +1,5 @@
 import type { ViewProps } from 'react-native';
-import { Animated, KeyboardAvoidingView, KeyboardAvoidingViewProps, SafeAreaView, TouchableOpacity, View } from 'react-native';
+import { Animated, KeyboardAvoidingView, KeyboardAvoidingViewProps, SafeAreaView, View } from 'react-native';
 declare const StyledWrapper: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
@@ -52,10 +52,8 @@ declare const StyledIconWrapper: import("@emotion/native").StyledComponent<ViewP
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledFloatingHeaderWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+declare const StyledFloatingHeaderWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & import("react").RefAttributes<View> & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
-}>;
+}, {}, {}>;
 export { StyledBackdrop, StyledBottomSheet, StyledFloatingBottomSheet, StyledFloatingHeaderWrapper, StyledFloatingWrapper, StyledFooter, StyledHeader, StyledHeaderWrapper, StyledIconWrapper, StyledKeyboardAvoidingView, StyledWrapper, };

package/types/components/Button/StyledButton.d.ts

@@ -1,8 +1,8 @@
 import type { Theme } from '@emotion/react';
-import { TouchableHighlight, View } from 'react-native';
+import { View } from 'react-native';
 type Intent = 'primary' | 'secondary' | 'danger' | 'white';
 type ThemeVariant = 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'filled-white' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger' | 'outlined-white' | 'text-primary' | 'text-secondary' | 'text-danger' | 'text-white';
-declare const StyledButtonContainer: import("@emotion/native").StyledComponent<import("react-native").TouchableHighlightProps & {
+declare const StyledButtonContainer: import("@emotion/native").StyledComponent<import("react-native").TouchableHighlightProps & import("react").RefAttributes<View> & {
     theme?: Theme;
     as?: React.ElementType;
 } & {
@@ -11,9 +11,7 @@ declare const StyledButtonContainer: import("@emotion/native").StyledComponent<i
     loading?: boolean;
     themeInlineText?: boolean;
     themeIsCompact?: boolean;
-}, {}, {
-    ref?: import("react").Ref<TouchableHighlight> | undefined;
-}>;
+}, {}, {}>;
 declare const StyledButtonText: import("@emotion/native").StyledComponent<import("../Typography/Title").TitleProps & {
     theme?: Theme;
     as?: React.ElementType;

package/types/components/Button/UtilityButton/StyledUtilityButton.d.ts

@@ -1,10 +1,8 @@
-import { TouchableOpacity, View } from 'react-native';
-export declare const ButtonContainer: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+import { View } from 'react-native';
+export declare const ButtonContainer: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & import("react").RefAttributes<View> & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
-}>;
+}, {}, {}>;
 export declare const IconWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/types/components/Calendar/StyledCalendar.d.ts

@@ -1,4 +1,4 @@
-import { TouchableOpacity, View } from 'react-native';
+import { View } from 'react-native';
 import type { ViewProps } from 'react-native';
 declare const StyledContainer: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme;
@@ -20,15 +20,13 @@ declare const StyledCalendarDayNameCell: import("@emotion/native").StyledCompone
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledCalendarCell: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+declare const StyledCalendarCell: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & import("react").RefAttributes<View> & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     variant?: "default" | "current" | "selected" | "highlighted";
     themeItemWidth?: number;
-}, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
-}>;
+}, {}, {}>;
 declare const StyledCalendarRow: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/types/components/Checkbox/StyledCheckbox.d.ts

@@ -1,13 +1,11 @@
-import { TouchableOpacity, View } from 'react-native';
+import { View } from 'react-native';
 type CheckboxThemeState = 'default' | 'checked' | 'disabled' | 'readonly';
-export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & import("react").RefAttributes<View> & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     themeState: CheckboxThemeState;
-}, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
-}>;
+}, {}, {}>;
 export declare const StyledDescription: import("@emotion/native").StyledComponent<import("../Typography/Body").BodyProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/types/components/Chip/StyledChip.d.ts

@@ -1,14 +1,11 @@
-import { TouchableOpacity } from 'react-native';
 type StyledChipWrapperProps = {
     themeVariant?: 'selection' | 'filter' | 'compact' | 'compact-outlined';
     themeSelected?: boolean;
 };
-declare const StyledChipWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+declare const StyledChipWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & import("react").RefAttributes<import("react-native").View> & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & StyledChipWrapperProps, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
-}>;
+} & StyledChipWrapperProps, {}, {}>;
 declare const StyledChipIcon: import("@emotion/native").StyledComponent<import("../Icon").IconProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/types/components/FAB/ActionGroup/StyledActionItem.d.ts

@@ -1,12 +1,9 @@
-import { TouchableOpacity } from 'react-native';
 import type { TouchableOpacityProps } from 'react-native';
 import type { IconProps } from '../../Icon';
-declare const StyledActionItem: import("@emotion/native").StyledComponent<TouchableOpacityProps & {
+declare const StyledActionItem: import("@emotion/native").StyledComponent<TouchableOpacityProps & import("react").RefAttributes<import("react-native").View> & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
-}>;
+}, {}, {}>;
 declare const StyledActionItemText: import("@emotion/native").StyledComponent<import("../../Typography/Body").BodyProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/types/components/FAB/StyledFAB.d.ts

@@ -1,6 +1,6 @@
-import { TextProps, Animated, TouchableOpacity } from 'react-native';
+import { TextProps, Animated } from 'react-native';
 import type { IconProps } from '../Icon';
-declare const StyledFAB: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").TouchableOpacityProps & import("react").RefAttributes<TouchableOpacity>> & {
+declare const StyledFAB: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").TouchableOpacityProps & import("react").RefAttributes<import("react-native").View>> & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {

package/types/components/FloatingIsland/StyledFloatingIsland.d.ts

@@ -1,8 +1,8 @@
-declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & import("react").RefAttributes<import("react-native").View> & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, {}, {
-    ref?: import("react").Ref<import("react-native").TouchableOpacity> | undefined;
+    ref?: import("react").Ref<any> | undefined;
 }>;
 declare const StyledPrefixWrapper: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
     theme?: import("@emotion/react").Theme;

package/types/components/List/StyledBasicListItem.d.ts

@@ -1,4 +1,4 @@
-import { TouchableHighlight, View } from 'react-native';
+import { View } from 'react-native';
 declare const StyledPrefixContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
@@ -17,13 +17,11 @@ declare const StyledTitleContainer: import("@emotion/native").StyledComponent<im
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledListItemContainer: import("@emotion/native").StyledComponent<import("react-native").TouchableHighlightProps & {
+declare const StyledListItemContainer: import("@emotion/native").StyledComponent<import("react-native").TouchableHighlightProps & import("react").RefAttributes<View> & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     themeSelected?: boolean;
     themeDisabled?: boolean;
-}, {}, {
-    ref?: import("react").Ref<TouchableHighlight> | undefined;
-}>;
+}, {}, {}>;
 export { StyledListItemContainer, StyledPrefixContainer, StyledTitleContainer, StyledSuffixContainer, };

package/types/components/List/StyledListItem.d.ts

@@ -1,15 +1,13 @@
-import { TouchableHighlight, View } from 'react-native';
+import { View } from 'react-native';
 export type Variant = 'full-width' | 'card';
 export type LeadingStatusIntent = 'success' | 'warning' | 'danger' | 'info' | 'archived';
-declare const StyledListItemContainer: import("@emotion/native").StyledComponent<import("react-native").TouchableHighlightProps & {
+declare const StyledListItemContainer: import("@emotion/native").StyledComponent<import("react-native").TouchableHighlightProps & import("react").RefAttributes<View> & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     themeSelected?: boolean;
     themeVariant?: Variant;
-}, {}, {
-    ref?: import("react").Ref<TouchableHighlight> | undefined;
-}>;
+}, {}, {}>;
 declare const StyledContentContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/types/components/Radio/Radio.d.ts

@@ -1,5 +1,6 @@
 import type { ReactElement, ReactNode } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
+import type { IconName } from '../Icon';
 export interface RadioProps {
     /**
      * Whether the radio is checked.
@@ -33,6 +34,10 @@ export interface RadioProps {
      * Children to be rendered inside the component.
      */
     children?: ReactNode;
+    /**
+     * Prefix to be rendered before the radio text.
+     */
+    prefix?: IconName | ReactElement;
 }
-declare const Radio: ({ text, checked, onPress, style, subText, testID, inactiveIntent, children, }: RadioProps) => ReactElement;
+declare const Radio: ({ text, checked, onPress, style, subText, testID, inactiveIntent, children, prefix, }: RadioProps) => ReactElement;
 export default Radio;

package/types/components/Radio/types.d.ts

@@ -1,8 +1,10 @@
-import { ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
+import { IconName } from '../Icon';
 export type OptionType<T> = {
     value: T;
     text: string;
     subText?: string;
     key?: string;
     children?: ReactNode;
+    prefix?: IconName | ReactElement;
 };

package/types/components/RichTextEditor/StyledToolbar.d.ts

@@ -1,12 +1,10 @@
-import { TouchableOpacity, View } from 'react-native';
-export declare const StyledToolbarButton: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+import { View } from 'react-native';
+export declare const StyledToolbarButton: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & import("react").RefAttributes<View> & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     selected: boolean;
-}, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
-}>;
+}, {}, {}>;
 export declare const StyledToolbar: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/types/components/Swipeable/StyledSwipeable.d.ts

@@ -1,10 +1,7 @@
-import { TouchableOpacity } from 'react-native';
 export type ActionIntent = 'primary' | 'success' | 'danger';
-export declare const StyledRectButton: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+export declare const StyledRectButton: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & import("react").RefAttributes<import("react-native").View> & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     themeIntent: ActionIntent;
-}, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
-}>;
+}, {}, {}>;

package/types/components/Toast/StyledToast.d.ts

@@ -1,4 +1,4 @@
-import { Animated, TouchableOpacity, View } from 'react-native';
+import { Animated, View } from 'react-native';
 import type { ViewProps } from 'react-native';
 import { IntentType } from './types';
 import { TextProps } from '../Typography/Text';
@@ -38,12 +38,10 @@ declare const ContentContainer: import("@emotion/native").StyledComponent<ViewPr
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const CTAWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+declare const CTAWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & import("react").RefAttributes<View> & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
-}>;
+}, {}, {}>;
 declare const StyledBody: import("@emotion/native").StyledComponent<import("../Typography/Body").BodyProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/types/components/Toolbar/StyledToolbar.d.ts

@@ -1,4 +1,4 @@
-import { TextInput, TouchableOpacity, View } from 'react-native';
+import { TextInput, View } from 'react-native';
 import type { ViewProps } from 'react-native';
 import { BodyProps } from '../Typography/Body';
 export type ToolbarMessageState = 'default' | 'filled' | 'disabled' | 'readonly';
@@ -16,12 +16,10 @@ declare const ToolbarGroupWrapper: import("@emotion/native").StyledComponent<Vie
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const ToolbarItemWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+declare const ToolbarItemWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & import("react").RefAttributes<View> & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
-}>;
+}, {}, {}>;
 declare const IconButtonWrapper: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;