@hero-design/rn 8.105.3 → 8.105.4

package/src/components/StatusScreens/Error/__tests__/__snapshots__/index.spec.tsx.snap

@@ -42,9 +42,9 @@ exports[`Error renders error screen with custom image element correctly 1`] = `
           [
             {
               "alignItems": "center",
-              "height": 176,
+              "height": 72,
               "marginBottom": 24,
-              "width": 176,
+              "width": 72,
             },
             undefined,
           ]
@@ -189,9 +189,9 @@ exports[`Error renders error screen with icon correctly 1`] = `
           [
             {
               "alignItems": "center",
-              "height": 176,
+              "height": 72,
               "marginBottom": 24,
-              "width": 176,
+              "width": 72,
             },
             undefined,
           ]
@@ -489,9 +489,9 @@ exports[`Error renders error screen with image correctly 1`] = `
           [
             {
               "alignItems": "center",
-              "height": 176,
+              "height": 72,
               "marginBottom": 24,
-              "width": 176,
+              "width": 72,
             },
             undefined,
           ]
@@ -512,10 +512,10 @@ exports[`Error renders error screen with image correctly 1`] = `
               },
               [
                 {
-                  "height": 176,
+                  "height": 72,
                   "marginBottom": 24,
                   "resizeMode": "contain",
-                  "width": 176,
+                  "width": 72,
                 },
                 undefined,
               ],
@@ -676,9 +676,9 @@ exports[`Error renders full screen error page correctly 1`] = `
             [
               {
                 "alignItems": "center",
-                "height": 176,
+                "height": 72,
                 "marginBottom": 24,
-                "width": 176,
+                "width": 72,
               },
               undefined,
             ]
@@ -699,10 +699,10 @@ exports[`Error renders full screen error page correctly 1`] = `
                 },
                 [
                   {
-                    "height": 176,
+                    "height": 72,
                     "marginBottom": 24,
                     "resizeMode": "contain",
-                    "width": 176,
+                    "width": 72,
                   },
                   undefined,
                 ],

package/src/components/StatusScreens/Error/index.tsx

@@ -1,30 +1,26 @@
-import React, {
-  ReactElement,
-  isValidElement,
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
+import type { ReactElement } from 'react';
+import React, { isValidElement, useCallback, useEffect, useState } from 'react';
 import type {
   ImageSourcePropType,
   ViewProps,
   ImageProps as RNImageProps,
 } from 'react-native';
+import type { ErrorVariant } from './StyledError';
 import {
-  ErrorVariant,
   StyledErrorButtonContainer,
   StyledErrorButtonPrimary,
   StyledErrorButtonSecondary,
   StyledErrorContainer,
   StyledErrorContent,
   StyledErrorDescription,
+  StyledErrorIconContainer,
   StyledErrorImage,
   StyledErrorImageContainer,
   StyledErrorModal,
   StyledErrorTitle,
 } from './StyledError';
 import { useDeprecation } from '../../../utils/hooks';
-import { ImageProps } from '../../Image/index';
+import type { ImageProps } from '../../Image/index';
 import StatusIcon from '../StatusIcon';
 import type { StatusIconName } from '../StatusIcon';
 
@@ -49,6 +45,7 @@ interface ErrorProps extends ViewProps {
   description?: string;
   /**
    * Image of the error
+   * @deprecated The `image` prop is deprecated and will be removed in the next major version. Use the `icon` prop instead.
    */
   image?:
     | ReactElement<ImageProps | RNImageProps>
@@ -75,7 +72,7 @@ interface ErrorProps extends ViewProps {
    */
   onSecondaryCtaPress?: () => void;
   /**
-   * Status icon to be displayed, this will replace the image prop.
+   * Status icon to be displayed, this will replace the deprecated image prop.
    */
   icon?: StatusIconName;
 }
@@ -111,9 +108,9 @@ const renderImageOrIcon = ({
 }) => {
   if (icon) {
     return (
-      <StyledErrorImageContainer>
+      <StyledErrorIconContainer>
         <StatusIcon icon={icon} testID="error-icon" />
-      </StyledErrorImageContainer>
+      </StyledErrorIconContainer>
     );
   }
 

package/src/components/StatusScreens/StatusIcon/__tests__/index.spec.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import StatusIcon, { StatusIconName } from '..';
+import type { StatusIconName } from '..';
+import StatusIcon from '..';
 import renderWithTheme from '../../../../testHelpers/renderWithTheme';
 
 describe('StatusIcon', () => {

package/src/components/StatusScreens/StatusIcon/assets/Add.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Svg, { Line, Rect } from 'react-native-svg';
-import { StatusSvgProps } from '../types';
+import type { StatusSvgProps } from '../types';
 
 const Add = ({ stroke, fill, testID }: StatusSvgProps) => {
   return (

package/src/components/StatusScreens/StatusIcon/assets/Boom.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Svg, { Path, Mask, Rect } from 'react-native-svg';
-import { StatusSvgProps } from '../types';
+import type { StatusSvgProps } from '../types';
 
 const Boom = ({ stroke, fill, testID }: StatusSvgProps) => {
   return (

package/src/components/StatusScreens/StatusIcon/assets/Build.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Svg, { Path, Rect, Circle } from 'react-native-svg';
-import { StatusSvgProps } from '../types';
+import type { StatusSvgProps } from '../types';
 
 const Build = ({ stroke, fill, testID }: StatusSvgProps) => {
   return (

package/src/components/StatusScreens/StatusIcon/assets/Clock.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Svg, { Path, Rect } from 'react-native-svg';
-import { StatusSvgProps } from '../types';
+import type { StatusSvgProps } from '../types';
 
 const Clock = ({ stroke, fill, testID }: StatusSvgProps) => {
   return (

package/src/components/StatusScreens/StatusIcon/assets/Confetti.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Svg, { Path, Rect, ClipPath, Defs, G } from 'react-native-svg';
-import { StatusSvgProps } from '../types';
+import type { StatusSvgProps } from '../types';
 
 const Confetti = ({ stroke, fill, testID }: StatusSvgProps) => {
   return (

package/src/components/StatusScreens/StatusIcon/assets/Connections.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Svg, { Path, Rect, G } from 'react-native-svg';
-import { StatusSvgProps } from '../types';
+import type { StatusSvgProps } from '../types';
 
 const Connections = ({ stroke, fill, testID }: StatusSvgProps) => {
   return (

package/src/components/StatusScreens/StatusIcon/assets/Error.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Svg, { ClipPath, Defs, Rect } from 'react-native-svg';
-import { StatusSvgProps } from '../types';
+import type { StatusSvgProps } from '../types';
 
 const ErrorIcon = ({ stroke, fill, testID }: StatusSvgProps) => {
   return (

package/src/components/StatusScreens/StatusIcon/assets/Info.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Svg, { Path, Rect } from 'react-native-svg';
-import { StatusSvgProps } from '../types';
+import type { StatusSvgProps } from '../types';
 
 const Info = ({ stroke, fill, testID }: StatusSvgProps) => {
   return (

package/src/components/StatusScreens/StatusIcon/assets/List.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Svg, { Path, Rect } from 'react-native-svg';
-import { StatusSvgProps } from '../types';
+import type { StatusSvgProps } from '../types';
 
 const List = ({ stroke, fill, testID }: StatusSvgProps) => {
   return (

package/src/components/StatusScreens/StatusIcon/assets/Location.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Svg, { Path, Rect } from 'react-native-svg';
-import { StatusSvgProps } from '../types';
+import type { StatusSvgProps } from '../types';
 
 const Location = ({ stroke, fill, testID }: StatusSvgProps) => {
   return (

package/src/components/StatusScreens/StatusIcon/assets/Lock.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Svg, { G, Path, Defs, ClipPath } from 'react-native-svg';
-import { StatusSvgProps } from '../types';
+import type { StatusSvgProps } from '../types';
 
 const Lock = ({ stroke, fill, testID }: StatusSvgProps) => {
   return (

package/src/components/StatusScreens/StatusIcon/assets/Merge.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Svg, { Path, Rect } from 'react-native-svg';
-import { StatusSvgProps } from '../types';
+import type { StatusSvgProps } from '../types';
 
 const Merge = ({ stroke, fill, testID }: StatusSvgProps) => {
   return (

package/src/components/StatusScreens/StatusIcon/assets/NoResult.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Svg, { G, Path, Defs, ClipPath } from 'react-native-svg';
-import { StatusSvgProps } from '../types';
+import type { StatusSvgProps } from '../types';
 
 const NoResult = ({ stroke, fill, testID }: StatusSvgProps) => {
   return (

package/src/components/StatusScreens/StatusIcon/assets/Notifications.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Svg, { Path, Rect } from 'react-native-svg';
-import { StatusSvgProps } from '../types';
+import type { StatusSvgProps } from '../types';
 
 const Notifications = ({ stroke, fill, testID }: StatusSvgProps) => {
   return (

package/src/components/StatusScreens/StatusIcon/assets/Search.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Svg, { Path, Rect } from 'react-native-svg';
-import { StatusSvgProps } from '../types';
+import type { StatusSvgProps } from '../types';
 
 const Search = ({ stroke, fill, testID }: StatusSvgProps) => {
   return (

package/src/components/StatusScreens/StatusIcon/assets/Star.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Svg, { Path, Rect } from 'react-native-svg';
-import { StatusSvgProps } from '../types';
+import type { StatusSvgProps } from '../types';
 
 const Star = ({ stroke, fill, testID }: StatusSvgProps) => {
   return (

package/src/components/StatusScreens/StatusIcon/assets/Success.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Svg, { ClipPath, Defs, Path, Rect } from 'react-native-svg';
-import { StatusSvgProps } from '../types';
+import type { StatusSvgProps } from '../types';
 
 const Success = ({ stroke, fill, testID }: StatusSvgProps) => {
   return (

package/src/components/StatusScreens/StatusIcon/assets/Unlock.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Svg, { G, Path, Defs, ClipPath } from 'react-native-svg';
-import { StatusSvgProps } from '../types';
+import type { StatusSvgProps } from '../types';
 
 const Unlock = ({ stroke, fill, testID }: StatusSvgProps) => {
   return (

package/src/components/StatusScreens/StatusIcon/assets/User.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Svg, { Path, Rect } from 'react-native-svg';
-import { StatusSvgProps } from '../types';
+import type { StatusSvgProps } from '../types';
 
 const User = ({ stroke, fill, testID }: StatusSvgProps) => {
   return (

package/src/components/StatusScreens/Success/StyledSuccess.tsx

@@ -42,6 +42,13 @@ const StyledSuccessImageContainer = styled(View)(({ theme }) => ({
   alignItems: 'center',
 }));
 
+const StyledSuccessIconContainer = styled(View)(({ theme }) => ({
+  marginBottom: theme.__hd__.success.space.imageMarginBottom,
+  width: theme.__hd__.success.sizes.icon,
+  height: theme.__hd__.success.sizes.icon,
+  alignItems: 'center',
+}));
+
 const StyledSuccessTitle = styled(Typography.Title)(({ theme }) => ({
   textAlign: 'center',
   marginBottom: theme.__hd__.success.space.titleMarginBottom,
@@ -66,6 +73,11 @@ const StyledSuccessButtonPrimary = styled(Button)(({ theme }) => ({
   padding: theme.__hd__.success.space.button.padding,
 }));
 
+const StyledSuccessButtonSecondary = styled(Button)(({ theme }) => ({
+  padding: theme.__hd__.success.space.button.padding,
+  marginTop: theme.__hd__.success.space.button.secondaryCTAMarginTop,
+}));
+
 const StyledSuccessModal = styled(Modal)({
   height: '100%',
   width: '100%',
@@ -77,9 +89,11 @@ export {
   StyledSuccessContainer,
   StyledSuccessContent,
   StyledSuccessImageContainer,
+  StyledSuccessIconContainer,
   StyledSuccessTitle,
   StyledSuccessDescription,
   StyledSuccessButtonContainer,
   StyledSuccessButtonPrimary,
+  StyledSuccessButtonSecondary,
   StyledSuccessModal,
 };

package/src/components/StatusScreens/Success/__tests__/__snapshots__/index.spec.tsx.snap

@@ -377,9 +377,9 @@ exports[`Success renders success screen with icon correctly 1`] = `
           [
             {
               "alignItems": "center",
-              "height": 176,
+              "height": 72,
               "marginBottom": 32,
-              "width": 176,
+              "width": 72,
             },
             undefined,
           ]

package/src/components/StatusScreens/Success/index.tsx

@@ -1,11 +1,12 @@
-import React, { ReactElement, isValidElement } from 'react';
+import type { ReactElement } from 'react';
+import React, { isValidElement } from 'react';
 import type {
   ViewProps,
   ImageSourcePropType,
   ImageProps as RNImageProps,
 } from 'react-native';
+import type { SuccessVariant } from './StyledSuccess';
 import {
-  SuccessVariant,
   StyledSuccessImage,
   StyledSuccessContainer,
   StyledSuccessContent,
@@ -15,14 +16,18 @@ import {
   StyledSuccessButtonContainer,
   StyledSuccessButtonPrimary,
   StyledSuccessModal,
+  StyledSuccessIconContainer,
+  StyledSuccessButtonSecondary,
 } from './StyledSuccess';
-import { ImageProps } from '../../Image';
+import type { ImageProps } from '../../Image';
 import { noop } from '../../../utils/functions';
-import StatusIcon, { StatusIconName } from '../StatusIcon';
+import type { StatusIconName } from '../StatusIcon';
+import StatusIcon from '../StatusIcon';
 
 export interface SuccessProps extends ViewProps {
   /**
    * Image to be displayed.
+   * @deprecated The `image` prop is deprecated and will be removed in the next major version. Use the `icon` prop instead.
    */
   image?:
     | ReactElement<ImageProps | RNImageProps>
@@ -61,7 +66,7 @@ export interface SuccessProps extends ViewProps {
    */
   testID?: string;
   /**
-   * Status icon to be displayed, this will replace the image prop.
+   * Status icon to be displayed, this will replace the deprecated image prop.
    */
   icon?: StatusIconName;
 }
@@ -95,9 +100,9 @@ const renderImageOrIcon = ({
 }) => {
   if (icon) {
     return (
-      <StyledSuccessImageContainer>
+      <StyledSuccessIconContainer>
         <StatusIcon icon={icon} testID="success-icon" />
-      </StyledSuccessImageContainer>
+      </StyledSuccessIconContainer>
     );
   }
 
@@ -149,7 +154,7 @@ const SuccessPage = ({
         <StyledSuccessButtonContainer>
           <StyledSuccessButtonPrimary text={ctaText} onPress={onCtaPress} />
           {!!showSecondaryButton && (
-            <StyledSuccessButtonPrimary
+            <StyledSuccessButtonSecondary
               variant="text"
               text={secondaryCtaText}
               onPress={onSecondaryCtaPress}

package/src/components/Swipeable/SwipeableAction.tsx

@@ -1,6 +1,8 @@
-import React, { ReactNode } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import { ActionIntent, StyledRectButton } from './StyledSwipeable';
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { ActionIntent } from './StyledSwipeable';
+import { StyledRectButton } from './StyledSwipeable';
 
 export interface SwipeableActionProps {
   /**

package/src/components/Swipeable/index.tsx

@@ -1,10 +1,5 @@
-import React, {
-  ComponentProps,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useRef,
-} from 'react';
+import type { ComponentProps, ReactNode } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { Animated, useWindowDimensions } from 'react-native';
 import {
   GestureHandlerRootView,

package/src/components/Switch/SelectorSwitch/Option.tsx

@@ -1,6 +1,7 @@
 import type { ReactElement } from 'react';
 import React, { useEffect, useRef } from 'react';
-import { Animated, Easing, LayoutChangeEvent, Platform } from 'react-native';
+import type { LayoutChangeEvent } from 'react-native';
+import { Animated, Easing, Platform } from 'react-native';
 import type { BadgeConfigType, SwitchOptionType } from '.';
 import { useTheme } from '../../../theme';
 import Badge from '../../Badge';

package/src/components/Switch/SelectorSwitch/index.tsx

@@ -1,18 +1,11 @@
-import React, {
-  ReactElement,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import type { ReactElement } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import type { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
 import {
   Animated,
   Easing,
-  LayoutChangeEvent,
   Platform,
-  StyleProp,
   TouchableWithoutFeedback,
-  ViewStyle,
 } from 'react-native';
 import type { IconName } from '../../Icon';
 import Option from './Option';

package/src/components/Switch/index.tsx

@@ -6,7 +6,8 @@ import { Animated, Easing, TouchableWithoutFeedback } from 'react-native';
 import type { ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import SelectorSwitch from './SelectorSwitch';
-import { StyledKnot, StyledWrapper, Variant } from './StyledSwitch';
+import type { Variant } from './StyledSwitch';
+import { StyledKnot, StyledWrapper } from './StyledSwitch';
 
 export interface SwitchProps {
   /**

package/src/components/Tabs/ScrollableTabsHeader/ScrollableTabsHeader.tsx

@@ -1,13 +1,7 @@
 import { useTheme } from '@emotion/react';
 import React from 'react';
-import {
-  FlatList,
-  Platform,
-  StyleProp,
-  TouchableWithoutFeedback,
-  ViewProps,
-  ViewStyle,
-} from 'react-native';
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
+import { FlatList, Platform, TouchableWithoutFeedback } from 'react-native';
 import type { ItemType, TabType } from '..';
 import Icon from '../../Icon';
 import { isHeroIcon } from '../../Icon/utils';

package/src/components/Tabs/TabWithBadge.tsx

@@ -1,5 +1,6 @@
 import { useTheme } from '@emotion/react';
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 import { View } from 'react-native';
 import Badge from '../Badge';
 import { StyledBadgeWrapper } from './StyledTabs';

package/src/components/Tabs/index.tsx

@@ -6,7 +6,7 @@ import { Animated, TouchableWithoutFeedback, View } from 'react-native';
 import type { PagerViewOnPageScrollEventData } from 'react-native-pager-view';
 import PagerView from 'react-native-pager-view';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { IconName } from '../Icon';
+import type { IconName } from '../Icon';
 import Typography from '../Typography';
 import ActiveTabIndicator from './ActiveTabIndicator';
 import SceneView from './SceneView';

package/src/components/Tabs/useHandlePageScroll.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useRef } from 'react';
-import { NativeSyntheticEvent } from 'react-native';
+import type { NativeSyntheticEvent } from 'react-native';
 
 const useHandlePageScroll = () => {
   // Used as a flag to prevent calling onTabPress on initial render

package/src/components/Tag/index.tsx

@@ -1,4 +1,5 @@
-import React, { ReactElement } from 'react';
+import type { ReactElement } from 'react';
+import React from 'react';
 import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 import { StyledText, StyledView } from './StyledTag';
 import { useDeprecation } from '../../utils/hooks';

package/src/components/TextInput/__tests__/index.spec.tsx

@@ -4,6 +4,7 @@ import { TextInput as RNTextInput } from 'react-native';
 import { theme } from '../../..';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Icon from '../../Icon';
+import type { TextInputHandles } from '../index';
 import TextInput, {
   getState,
   renderErrorOrHelpText,
@@ -11,7 +12,6 @@ import TextInput, {
   renderMaxLengthMessage,
   renderPrefix,
   renderSuffix,
-  TextInputHandles,
 } from '../index';
 
 describe('getState', () => {

package/src/components/TextInput/index.tsx

@@ -5,13 +5,7 @@ import React, {
   useCallback,
   useEffect,
 } from 'react';
-import {
-  StyleSheet,
-  TextInput as RNTextInput,
-  Animated,
-  Easing,
-  View,
-} from 'react-native';
+import { StyleSheet, Animated, Easing, View } from 'react-native';
 import type {
   TextInputProps as RNTextInputProps,
   StyleProp,
@@ -20,6 +14,7 @@ import type {
   LayoutChangeEvent,
   NativeSyntheticEvent,
   TextInputFocusEventData,
+  TextInput as RNTextInput,
 } from 'react-native';
 import {
   StyledTextInputContainer,
@@ -38,7 +33,8 @@ import {
   StyledHelperText,
 } from './StyledTextInput';
 import Icon from '../Icon';
-import { Theme, useTheme } from '../../theme';
+import type { Theme } from '../../theme';
+import { useTheme } from '../../theme';
 import type { State } from './StyledTextInput';
 import type { IconName } from '../Icon';
 import { omit, pick } from '../../utils/helpers';

package/src/components/TimePicker/index.internal.tsx

@@ -1,5 +1,5 @@
-import { FunctionComponent } from 'react';
-import { InternalTimePickerProps } from './types';
+import type { FunctionComponent } from 'react';
+import type { InternalTimePickerProps } from './types';
 import TimePicker from './TimePicker';
 
 const InternalTimePicker =

package/src/components/TimePicker/index.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'react';
+import type { FunctionComponent } from 'react';
 import type { TimePickerProps } from './types';
 import TimePicker from './TimePicker';
 

package/src/components/TimePicker/types.ts

@@ -1,5 +1,5 @@
 import type { StyleProp, ViewStyle } from 'react-native';
-import { TextInputProps } from '../TextInput';
+import type { TextInputProps } from '../TextInput';
 
 export interface TimePickerProps {
   /**