@hero-design/rn 8.105.3 → 8.105.4

package/src/components/FAB/StyledFAB.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/native';
-import { TextProps, Animated, TouchableOpacity } from 'react-native';
+import type { TextProps } from 'react-native';
+import { Animated, TouchableOpacity } from 'react-native';
 import Box from '../Box';
 import type { IconProps } from '../Icon';
 import Icon from '../Icon';

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

@@ -1,7 +1,8 @@
 import React, { createRef } from 'react';
 import { fireEvent } from '@testing-library/react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import { FABHandles, theme } from '../../../index';
+import type { FABHandles } from '../../../index';
+import { theme } from '../../../index';
 import FAB from '..';
 
 describe('FAB', () => {

package/src/components/FilterTrigger/StyledFilterTrigger.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/native';
 import { TouchableOpacity } from 'react-native';
-import { Theme } from '../../theme';
+import type { Theme } from '../../theme';
 import Badge from '../Badge';
 import Typography from '../Typography';
 

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { fireEvent } from '@testing-library/react-native';
-import FilterTrigger, { FilterTriggerProps } from '..';
+import type { FilterTriggerProps } from '..';
+import FilterTrigger from '..';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 
 describe('FilterTrigger', () => {

package/src/components/FilterTrigger/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 import Badge from '../Badge';
 import type { IconName } from '../Icon';
 import Icon from '../Icon';

package/src/components/FloatingIsland/index.tsx

@@ -1,12 +1,13 @@
-import React, { ReactNode } from 'react';
-import { LayoutChangeEvent, ViewProps } from 'react-native';
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { LayoutChangeEvent, ViewProps } from 'react-native';
 import {
   StyledWrapper,
   StyledPrefixWrapper,
   StyledSuffixWrapper,
   StyledIcon,
 } from './StyledFloatingIsland';
-import { IconName } from '../Icon';
+import type { IconName } from '../Icon';
 
 export interface FloatingIslandProps extends ViewProps {
   /**

package/src/components/HeroDesignProvider/index.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import ThemeProvider, { ThemeProviderProps } from '../../theme/ThemeProvider';
+import type { ThemeProviderProps } from '../../theme/ThemeProvider';
+import ThemeProvider from '../../theme/ThemeProvider';
 import Toast from '../Toast';
 import Portal from '../Portal';
 import LocaleProvider from '../LocaleProvider';
-import { LocaleValues } from '../../locales/types';
+import type { LocaleValues } from '../../locales/types';
 import enAULocale from '../../locales/en_AU';
 
 interface HeroDesignProviderProps extends ThemeProviderProps {

package/src/components/List/ListItem.tsx

@@ -1,6 +1,6 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 
-import type { ReactNode } from 'react';
+import type { ReactNode, ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { View } from 'react-native';
 import { useTheme } from '../../theme';

package/src/components/LocaleProvider/context.ts

@@ -1,6 +1,6 @@
 import { createContext } from 'react';
 import enAULocale from '../../locales/en_AU';
-import { LocaleValues } from '../../locales/types';
+import type { LocaleValues } from '../../locales/types';
 
 const LocaleContext = createContext<LocaleValues>(enAULocale);
 

package/src/components/LocaleProvider/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import setDefaultOptions from 'date-fns/setDefaultOptions';
 import { LocaleContext } from './context';
 import { getDateFnsLocale } from './utils';
-import { LocaleValues } from '../../locales/types';
+import type { LocaleValues } from '../../locales/types';
 
 interface LocaleProviderProps {
   locale: LocaleValues;

package/src/components/LocaleProvider/utils.ts

@@ -1,7 +1,7 @@
 import enAU from 'date-fns/locale/en-AU';
 import enCA from 'date-fns/locale/en-CA';
 import type { Locale } from 'date-fns';
-import { LocaleCode } from '../../locales/types';
+import type { LocaleCode } from '../../locales/types';
 
 const Locales = {
   'en-AU': enAU,

package/src/components/MapPin/Focussed.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ViewProps, StyleProp, ViewStyle } from 'react-native';
+import type { ViewProps, StyleProp, ViewStyle } from 'react-native';
 import { StyledContainer, StyledFocusIcon } from './StyledMapPin';
 
 export interface MapPinFocussedProps extends ViewProps {

package/src/components/MapPin/index.tsx

@@ -7,8 +7,8 @@ import {
   StyledBadgeIcon,
   StyledContent,
 } from './StyledMapPin';
-import { IconName } from '../Icon';
-import { MapPinProps } from './types';
+import type { IconName } from '../Icon';
+import type { MapPinProps } from './types';
 import MapPinFocussed from './Focussed';
 
 const getBadgeIconName = (

package/src/components/MapPin/types.ts

@@ -1,5 +1,5 @@
-import { ViewProps, StyleProp, ViewStyle, ImageProps } from 'react-native';
-import { IconName } from '../Icon';
+import type { ViewProps, StyleProp, ViewStyle, ImageProps } from 'react-native';
+import type { IconName } from '../Icon';
 
 interface BaseMapPinProps extends ViewProps {
   /**

package/src/components/Modal/index.tsx

@@ -1,5 +1,5 @@
+import type { ReactNode } from 'react';
 import React, {
-  ReactNode,
   forwardRef,
   useEffect,
   useImperativeHandle,

package/src/components/PageControl/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Animated, StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { Animated } from 'react-native';
 
 import { useTheme } from '../../theme';
 import {

package/src/components/PinInput/index.tsx

@@ -1,5 +1,5 @@
+import type { ComponentProps } from 'react';
 import React, {
-  ComponentProps,
   forwardRef,
   useCallback,
   useEffect,
@@ -8,8 +8,8 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { InteractionManager, TextInput } from 'react-native';
-import type { StyleProp, ViewStyle } from 'react-native';
+import { InteractionManager } from 'react-native';
+import type { StyleProp, ViewStyle, TextInput } from 'react-native';
 import Icon from '../Icon';
 import PinCell from './PinCell';
 import {

package/src/components/Portal/PortalHost.tsx

@@ -1,7 +1,7 @@
 import React, { memo, useEffect } from 'react';
 import { usePortal } from './usePortal';
 import { usePortalState } from './usePortalState';
-import { PortalType } from './contexts';
+import type { PortalType } from './contexts';
 
 export interface PortalHostProps {
   /*

package/src/components/Portal/contexts.ts

@@ -1,6 +1,7 @@
-import React, { createContext } from 'react';
+import type React from 'react';
+import { createContext } from 'react';
 import type { ReactNode } from 'react';
-import { ActionTypes } from './types';
+import type { ActionTypes } from './types';
 
 export interface PortalType {
   name: string;

package/src/components/Portal/index.tsx

@@ -1,11 +1,13 @@
-import React, { ReactNode, memo, useLayoutEffect, useMemo } from 'react';
+import type { ReactNode } from 'react';
+import React, { memo, useLayoutEffect, useMemo } from 'react';
 // Fix issue no crypto in react-native
 // https://stackoverflow.com/a/66852908
 import { customAlphabet } from 'nanoid/non-secure';
 import { usePortal } from './usePortal';
 import { PortalProvider } from './PortalProvider';
 import { PortalHost } from './PortalHost';
-import { Theme, ThemeProvider, useTheme } from '../../theme';
+import type { Theme } from '../../theme';
+import { ThemeProvider, useTheme } from '../../theme';
 
 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 10);
 

package/src/components/Portal/reducer.ts

@@ -1,6 +1,6 @@
 import { omit } from '../../utils/helpers';
 import { ACTIONS } from './constants';
-import { PortalType } from './contexts';
+import type { PortalType } from './contexts';
 import type {
   ActionTypes,
   AddUpdatePortalAction,

package/src/components/Portal/usePortal.ts

@@ -1,4 +1,5 @@
-import { ReactNode, useCallback, useContext } from 'react';
+import type { ReactNode } from 'react';
+import { useCallback, useContext } from 'react';
 import { ACTIONS } from './constants';
 import { PortalDispatchContext } from './contexts';
 

package/src/components/Progress/ProgressStep.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
 import React, { useMemo } from 'react';
-import { LayoutChangeEvent, ViewProps } from 'react-native';
+import type { LayoutChangeEvent, ViewProps } from 'react-native';
 import {
   StyledSingleStep,
   StyledSingleStepContainer,

package/src/components/Radio/Radio.tsx

@@ -1,6 +1,6 @@
 import type { ReactElement, ReactNode } from 'react';
 import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon';
 import { Circle, InnerCircle, StyledRadio } from './StyledRadio';
 

package/src/components/Radio/types.ts

@@ -1,5 +1,5 @@
-import { ReactElement, ReactNode } from 'react';
-import { IconName } from '../Icon';
+import type { ReactElement, ReactNode } from 'react';
+import type { IconName } from '../Icon';
 
 export type OptionType<T> = {
   value: T;

package/src/components/Rate/index.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useRef } from 'react';
-import { Animated, Platform, Pressable, ViewProps } from 'react-native';
+import type { ViewProps } from 'react-native';
+import { Animated, Platform, Pressable } from 'react-native';
 import Icon from '../Icon';
 import { StyledIconWrapper, StyledWrapper } from './StyledRate';
 

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

@@ -1,4 +1,5 @@
-import React, { ReactElement } from 'react';
+import type { ReactElement } from 'react';
+import React from 'react';
 import { ScrollView, Text } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import RefreshControl from '..';

package/src/components/RefreshControl/index.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
-import {
-  RefreshControl as NativeRefreshControl,
-  RefreshControlProps as NativeRefreshControlProps,
-} from 'react-native';
+import type { RefreshControlProps as NativeRefreshControlProps } from 'react-native';
+import { RefreshControl as NativeRefreshControl } from 'react-native';
 import { useTheme } from '../../theme';
 
 export type RefreshControlProps = Omit<

package/src/components/RichTextEditor/EditorToolbar.tsx

@@ -8,7 +8,7 @@ import {
   StyledToolbar,
   StyledToolbarButton,
 } from './StyledToolbar';
-import { ToolbarButtonName } from './types';
+import type { ToolbarButtonName } from './types';
 import * as Events from './utils/events';
 import type { IconProps } from '../Icon';
 

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -11,7 +11,7 @@ import React, {
 } from 'react';
 
 import { Animated, TouchableWithoutFeedback, Easing } from 'react-native';
-import { WebView } from 'react-native-webview';
+import type { WebView } from 'react-native-webview';
 import type { ComponentType, ReactElement, Ref } from 'react';
 import type { StyleProp, ViewStyle, LayoutChangeEvent } from 'react-native';
 import heroEditorApp from './heroEditorApp';
@@ -38,7 +38,7 @@ import * as Events from './utils/events';
 import { postMessage, requestBlurEditor } from './utils/rnWebView';
 import type { WebViewEventMessage } from './utils/rnWebView';
 import { LABEL_ANIMATION_DURATION } from '../TextInput';
-import { TextUnit } from './types';
+import type { TextUnit } from './types';
 import Typography from '../Typography';
 
 export interface RichTextEditorRef {

package/src/components/RichTextEditor/utils/events.ts

@@ -1,4 +1,4 @@
-import { EventEmitter } from 'events';
+import type { EventEmitter } from 'events';
 
 export interface Listener<T> {
   (data: T): void;

package/src/components/RichTextEditor/utils/rnWebView.ts

@@ -1,4 +1,4 @@
-import WebView from 'react-native-webview';
+import type WebView from 'react-native-webview';
 
 export const requestBlurEditor = (element: WebView): void => {
   element.injectJavaScript(

package/src/components/Search/SearchOneLine.tsx

@@ -6,14 +6,14 @@ import type {
   ViewStyle,
   TextStyle,
 } from 'react-native';
+import type { State } from './StyledSearch';
 import {
-  State,
   StyledAffixContainer,
   StyledContainer,
   StyledInput,
   StyledInputContainer,
 } from './StyledSearch';
-import { IconName } from '../Icon';
+import type { IconName } from '../Icon';
 import { renderPrefix, renderSuffix } from './utils';
 import Button from '../Button';
 import { useTheme } from '../../theme';

package/src/components/Search/SearchSuffixIcon.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import { IconName } from '../Icon';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { IconName } from '../Icon';
 import { renderSuffix } from './utils';
 import { StyledBadge, StyledSuffixContainer } from './StyledSearch';
-import { BadgeProps } from '../Badge';
+import type { BadgeProps } from '../Badge';
 
 interface SearchSuffixIconProps {
   /**

package/src/components/Search/SearchTwoLine.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import { IconName } from '../Icon';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { IconName } from '../Icon';
 import { renderPrefix, renderSuffix } from './utils';
 import {
   StyledContainer,

package/src/components/Search/StyledSearch.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/native';
 import { TextInput, View } from 'react-native';
-import Badge, { BadgeProps } from '../Badge';
+import type { BadgeProps } from '../Badge';
+import Badge from '../Badge';
 
 export type State = 'default' | 'filled' | 'disabled' | 'readonly';
 

package/src/components/Search/utils.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import Icon, { IconName } from '../Icon';
+import type { IconName } from '../Icon';
+import Icon from '../Icon';
 import { StyledAffixContainer } from './StyledSearch';
 
 export const renderPrefix = ({

package/src/components/SegmentedControl/SegmentedItem.tsx

@@ -1,7 +1,8 @@
-import React, { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
+import React from 'react';
 import Badge from '../Badge';
 import Icon from '../Icon';
-import Typography from '../Typography';
+import type Typography from '../Typography';
 import {
   StyledSegmentedItem,
   StyledSegmentedItemLabelWrapper,

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { fireEvent } from '@testing-library/react-native';
-import SegmentedControl, { SegmentedControlProps } from '..';
+import type { SegmentedControlProps } from '..';
+import SegmentedControl from '..';
 import type { SegmentedControlItemConfig } from '../types';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import { scale } from '../../../utils/scale';

package/src/components/SegmentedControl/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleProp, ViewProps, ViewStyle } from 'react-native';
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 import SegmentedItem from './SegmentedItem';
 import { StyledSegmentedControlWrapper } from './StyledSegmentedControl';
 import type { SegmentedControlItemConfig } from './types';

package/src/components/Select/BaseOptionList.tsx

@@ -1,6 +1,7 @@
 import { useTheme } from '@emotion/react';
 import React, { useState } from 'react';
-import { Dimensions, SectionList, SectionListProps, View } from 'react-native';
+import type { SectionList, SectionListProps } from 'react-native';
+import { Dimensions, View } from 'react-native';
 import SectionHeading from '../SectionHeading';
 import Spinner from '../Spinner';
 import { OptionSpacer, SectionSpacer, StyledSectionList } from './StyledSelect';

package/src/components/Select/MultiSelect/OptionList.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { SectionListRenderItemInfo } from 'react-native';
-import BaseOptionList, { BaseOptionListProps } from '../BaseOptionList';
+import type { BaseOptionListProps } from '../BaseOptionList';
+import BaseOptionList from '../BaseOptionList';
 import Option from './Option';
 import type { MultiSelectProps } from '.';
 import type { SelectOptionType, SectionType } from '../types';

package/src/components/Select/MultiSelect/index.tsx

@@ -7,7 +7,8 @@ import { View } from 'react-native';
 import { useKeyboard } from '../../../utils/helpers';
 import BottomSheet from '../../BottomSheet';
 import Box from '../../Box';
-import TextInput, { TextInputProps } from '../../TextInput';
+import type { TextInputProps } from '../../TextInput';
+import TextInput from '../../TextInput';
 import Footer from '../Footer';
 import { getScrollParams, toFlatOptions, toSections } from '../helpers';
 import { StyledSearchBar, StyledTouchableOpacity } from '../StyledSelect';

package/src/components/Select/MultiSelect/utils.ts

@@ -1,5 +1,5 @@
 import { deepCompareValue } from '../../../utils/helpers';
-import { SelectOptionType } from '../types';
+import type { SelectOptionType } from '../types';
 
 export const isOptionSelected = <V, T extends SelectOptionType<V>>(
   value?: V[],

package/src/components/Select/SingleSelect/OptionList.tsx

@@ -1,11 +1,8 @@
 import React from 'react';
-import {
-  Dimensions,
-  SectionList,
-  SectionListRenderItemInfo,
-} from 'react-native';
+import type { SectionList, SectionListRenderItemInfo } from 'react-native';
+import { Dimensions } from 'react-native';
 import type { SingleSelectProps } from '.';
-import { BaseOptionListProps } from '../BaseOptionList';
+import type { BaseOptionListProps } from '../BaseOptionList';
 import type { SelectOptionType, SectionType } from '../types';
 import Option from './Option';
 import { StyledOptionList } from './StyledSingleSelect';

package/src/components/Select/SingleSelect/index.tsx

@@ -6,7 +6,8 @@ import type {
 import { View } from 'react-native';
 import { deepCompareValue, useKeyboard } from '../../../utils/helpers';
 import BottomSheet from '../../BottomSheet';
-import TextInput, { TextInputProps } from '../../TextInput';
+import type { TextInputProps } from '../../TextInput';
+import TextInput from '../../TextInput';
 import { getScrollParams, toFlatOptions, toSections } from '../helpers';
 import { StyledSearchBar, StyledTouchableOpacity } from '../StyledSelect';
 import type { SectionType, SelectOptionType, SelectProps } from '../types';

package/src/components/Select/index.tsx

@@ -2,7 +2,7 @@ import MultiSelect from './MultiSelect';
 import SingleSelect from './SingleSelect';
 import type { MultiSelectProps } from './MultiSelect';
 import type { SingleSelectProps } from './SingleSelect';
-import { SelectOptionType } from './types';
+import type { SelectOptionType } from './types';
 
 export type { MultiSelectProps, SingleSelectProps };
 

package/src/components/Select/types.ts

@@ -6,7 +6,7 @@ import type {
   StyleProp,
   ViewStyle,
 } from 'react-native';
-import { BottomSheetProps } from '../BottomSheet';
+import type { BottomSheetProps } from '../BottomSheet';
 import type { TextInputProps } from '../TextInput';
 
 export type SelectOptionType<V> = {

package/src/components/Skeleton/index.tsx

@@ -6,15 +6,10 @@ import React, {
   useCallback,
   useRef,
 } from 'react';
-import {
-  Animated,
-  Easing,
-  LayoutChangeEvent,
-  ViewProps,
-  Platform,
-  StyleSheet,
-} from 'react-native';
-import { Theme, useTheme } from '../../theme';
+import type { LayoutChangeEvent, ViewProps } from 'react-native';
+import { Animated, Easing, Platform, StyleSheet } from 'react-native';
+import type { Theme } from '../../theme';
+import { useTheme } from '../../theme';
 import { StyledContainer, StyledGradientContainer } from './StyledSkeleton';
 
 export interface SkeletonProps extends ViewProps {

package/src/components/Slider/RangeSlider.tsx

@@ -1,7 +1,8 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import MultiSlider from '@ptomasroos/react-native-multi-slider';
 
-import { LayoutChangeEvent, StyleProp, View, ViewStyle } from 'react-native';
+import type { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
+import { View } from 'react-native';
 import { useTheme } from '../../theme';
 import { StyledMarker } from './StyledRangeSlider';
 

package/src/components/Slider/SingleSlider.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import RnSlider from '@react-native-community/slider';
-import { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 import { useTheme } from '../../theme';
 
 export interface SingleSliderProps {

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

@@ -6,8 +6,9 @@ import type {
   ViewStyle,
 } from 'react-native';
 
-import { ImageProps } from '../../Image';
-import StatusIcon, { StatusIconName } from '../StatusIcon';
+import type { ImageProps } from '../../Image';
+import type { StatusIconName } from '../StatusIcon';
+import StatusIcon from '../StatusIcon';
 import {
   StyledDescription,
   StyledEmptyImageContainer,
@@ -18,6 +19,7 @@ import {
 interface EmptyProps {
   /**
    * 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>;
   /**
@@ -30,6 +32,7 @@ interface EmptyProps {
   description?: string;
   /**
    * Empty's variant.
+   * @deprecated The `variant` prop is deprecated and will be removed in the next major version. Only light mode will be supported.
    */
   variant?: 'light' | 'dark';
   /**
@@ -41,7 +44,7 @@ interface EmptyProps {
    */
   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;
 }

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

@@ -57,6 +57,13 @@ const StyledErrorImageContainer = styled(View)(({ theme }) => ({
   height: theme.__hd__.error.sizes.image,
   alignItems: 'center',
 }));
+
+const StyledErrorIconContainer = styled(View)(({ theme }) => ({
+  marginBottom: theme.__hd__.error.space.imageMarginBottom,
+  width: theme.__hd__.error.sizes.icon,
+  height: theme.__hd__.error.sizes.icon,
+  alignItems: 'center',
+}));
 const StyledErrorImage = styled(Image)(({ theme }) => ({
   marginBottom: theme.__hd__.error.space.imageMarginBottom,
   width: theme.__hd__.error.sizes.image,
@@ -87,4 +94,5 @@ export {
   StyledErrorTitle,
   StyledErrorDescription,
   StyledErrorImageContainer,
+  StyledErrorIconContainer,
 };