@hero-design/rn 8.105.4-alpha.0 → 8.105.4

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-(node:4275) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:3308) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 (Use `node --trace-warnings ...` to show where the warning was created)
 
 src/index.ts → lib/index.js, es/index.js...
@@ -15,9 +15,9 @@ node_modules/d3-selection/src/selection/index.js -> node_modules/d3-selection/sr
                                      ~~~~~~~~~~~~~~~~~~~
 
 (!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 1m 13.9s
+created lib/index.js, es/index.js in 1m 10.3s
 
 /home/runner/work/hero-design/hero-design/packages/rn/src/locales/en_AU.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/en_CA.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/index.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/types.ts → ., ....
 (!) Generated empty chunks
 "locales/types" and "locales/types"
-created ., . in 22.6s
+created ., . in 22s

package/CHANGELOG.md

@@ -1,12 +1,18 @@
 # @hero-design/rn
 
-## 8.105.4-alpha.0
+## 8.105.4
 
 ### Patch Changes
 
-- [#3497](https://github.com/Thinkei/hero-design/pull/3497) [`e92d1dab57316441e7b5054debe823328e1a1083`](https://github.com/Thinkei/hero-design/commit/e92d1dab57316441e7b5054debe823328e1a1083) Thanks [@luanlai2201](https://github.com/luanlai2201)! - [Font] replace playful font to Saiga
+- [#4161](https://github.com/Thinkei/hero-design/pull/4161) [`627837da7838e5a3295dc4dece3de83cbcc19c4b`](https://github.com/Thinkei/hero-design/commit/627837da7838e5a3295dc4dece3de83cbcc19c4b) Thanks [@ttkien](https://github.com/ttkien)! - [Empty]
 
-- [#4123](https://github.com/Thinkei/hero-design/pull/4123) [`ecc5905dec81783858f57595a0af4306ff3b0b89`](https://github.com/Thinkei/hero-design/commit/ecc5905dec81783858f57595a0af4306ff3b0b89) Thanks [@truongnguyen-eh](https://github.com/truongnguyen-eh)! - [ANG-3740] Resolve conflict between alpha and master-react-18
+  - deprecate variant, image
+
+  [Success][error]
+
+  - deprecate image
+  - reduce icon size
+  - increase Primary Buttons margin from medium to large
 
 ## 8.105.3
 

package/es/index.js

@@ -6138,14 +6138,15 @@ var getErrorTheme = function getErrorTheme(theme) {
     imageMarginBottom: theme.space.large,
     wrapperPadding: theme.space.large,
     button: {
-      wrapperHorizontalPadding: theme.space.medium,
+      wrapperHorizontalPadding: theme.space.large,
       wrapperVerticalPadding: theme.space.xxxlarge,
       margin: theme.space.medium,
       padding: theme.space.medium
     }
   };
   var sizes = {
-    image: theme.sizes['19xlarge']
+    image: theme.sizes['6xlarge'],
+    icon: theme.sizes['6xlarge']
   };
   var colors = {
     title: theme.colors.onDefaultGlobalSurface,
@@ -6663,14 +6664,16 @@ var getSuccessTheme = function getSuccessTheme(theme) {
     imageMarginBottom: theme.space.xlarge,
     wrapperPadding: theme.space.large,
     button: {
-      wrapperHorizontalPadding: theme.space.medium,
+      wrapperHorizontalPadding: theme.space.large,
       wrapperVerticalPadding: theme.space.xxxlarge,
       margin: theme.space.medium,
-      padding: theme.space.medium
+      padding: theme.space.medium,
+      secondaryCTAMarginTop: theme.space.medium
     }
   };
   var sizes = {
-    image: theme.sizes['19xlarge']
+    image: theme.sizes['19xlarge'],
+    icon: theme.sizes['6xlarge']
   };
   var colors = {
     title: theme.colors.onDefaultGlobalSurface,
@@ -22600,8 +22603,17 @@ var StyledErrorImageContainer = index$b(View)(function (_ref6) {
     alignItems: 'center'
   };
 });
-var StyledErrorImage = index$b(Image)(function (_ref7) {
+var StyledErrorIconContainer = index$b(View)(function (_ref7) {
   var theme = _ref7.theme;
+  return {
+    marginBottom: theme.__hd__.error.space.imageMarginBottom,
+    width: theme.__hd__.error.sizes.icon,
+    height: theme.__hd__.error.sizes.icon,
+    alignItems: 'center'
+  };
+});
+var StyledErrorImage = index$b(Image)(function (_ref8) {
+  var theme = _ref8.theme;
   return {
     marginBottom: theme.__hd__.error.space.imageMarginBottom,
     width: theme.__hd__.error.sizes.image,
@@ -22609,16 +22621,16 @@ var StyledErrorImage = index$b(Image)(function (_ref7) {
     resizeMode: 'contain'
   };
 });
-var StyledErrorTitle = index$b(Typography.Title)(function (_ref8) {
-  var theme = _ref8.theme;
+var StyledErrorTitle = index$b(Typography.Title)(function (_ref9) {
+  var theme = _ref9.theme;
   return {
     textAlign: 'center',
     marginBottom: theme.__hd__.error.space.titleMarginBottom,
     color: theme.__hd__.error.colors.title
   };
 });
-var StyledErrorDescription = index$b(Typography.Body)(function (_ref9) {
-  var theme = _ref9.theme;
+var StyledErrorDescription = index$b(Typography.Body)(function (_ref10) {
+  var theme = _ref10.theme;
   return {
     textAlign: 'center',
     color: theme.__hd__.error.colors.description
@@ -22644,7 +22656,7 @@ var renderImageOrIcon$1 = function renderImageOrIcon(_ref) {
   var image = _ref.image,
     icon = _ref.icon;
   if (icon) {
-    return /*#__PURE__*/React__default.createElement(StyledErrorImageContainer, null, /*#__PURE__*/React__default.createElement(StatusIcon, {
+    return /*#__PURE__*/React__default.createElement(StyledErrorIconContainer, null, /*#__PURE__*/React__default.createElement(StatusIcon, {
       icon: icon,
       testID: "error-icon"
     }));
@@ -25887,23 +25899,32 @@ var StyledSuccessImageContainer = index$b(View)(function (_ref4) {
     alignItems: 'center'
   };
 });
-var StyledSuccessTitle = index$b(Typography.Title)(function (_ref5) {
+var StyledSuccessIconContainer = index$b(View)(function (_ref5) {
   var theme = _ref5.theme;
+  return {
+    marginBottom: theme.__hd__.success.space.imageMarginBottom,
+    width: theme.__hd__.success.sizes.icon,
+    height: theme.__hd__.success.sizes.icon,
+    alignItems: 'center'
+  };
+});
+var StyledSuccessTitle = index$b(Typography.Title)(function (_ref6) {
+  var theme = _ref6.theme;
   return {
     textAlign: 'center',
     marginBottom: theme.__hd__.success.space.titleMarginBottom,
     color: theme.__hd__.success.colors.title
   };
 });
-var StyledSuccessDescription = index$b(Typography.Body)(function (_ref6) {
-  var theme = _ref6.theme;
+var StyledSuccessDescription = index$b(Typography.Body)(function (_ref7) {
+  var theme = _ref7.theme;
   return {
     textAlign: 'center',
     color: theme.__hd__.success.colors.description
   };
 });
-var StyledSuccessButtonContainer = index$b(View)(function (_ref7) {
-  var theme = _ref7.theme;
+var StyledSuccessButtonContainer = index$b(View)(function (_ref8) {
+  var theme = _ref8.theme;
   return {
     display: 'flex',
     flexDirection: 'column',
@@ -25913,12 +25934,19 @@ var StyledSuccessButtonContainer = index$b(View)(function (_ref7) {
     paddingVertical: theme.__hd__.success.space.button.wrapperVerticalPadding
   };
 });
-var StyledSuccessButtonPrimary = index$b(CompoundButton)(function (_ref8) {
-  var theme = _ref8.theme;
+var StyledSuccessButtonPrimary = index$b(CompoundButton)(function (_ref9) {
+  var theme = _ref9.theme;
   return {
     padding: theme.__hd__.success.space.button.padding
   };
 });
+var StyledSuccessButtonSecondary = index$b(CompoundButton)(function (_ref10) {
+  var theme = _ref10.theme;
+  return {
+    padding: theme.__hd__.success.space.button.padding,
+    marginTop: theme.__hd__.success.space.button.secondaryCTAMarginTop
+  };
+});
 var StyledSuccessModal = index$b(ModalWrapper)({
   height: '100%',
   width: '100%'
@@ -25942,7 +25970,7 @@ var renderImageOrIcon = function renderImageOrIcon(_ref) {
   var image = _ref.image,
     icon = _ref.icon;
   if (icon) {
-    return /*#__PURE__*/React__default.createElement(StyledSuccessImageContainer, null, /*#__PURE__*/React__default.createElement(StatusIcon, {
+    return /*#__PURE__*/React__default.createElement(StyledSuccessIconContainer, null, /*#__PURE__*/React__default.createElement(StatusIcon, {
       icon: icon,
       testID: "success-icon"
     }));
@@ -25979,7 +26007,7 @@ var SuccessPage = function SuccessPage(_ref2) {
   }, title), typeof description === 'string' ? /*#__PURE__*/React__default.createElement(StyledSuccessDescription, null, description) : description), !!ctaText && /*#__PURE__*/React__default.createElement(StyledSuccessButtonContainer, null, /*#__PURE__*/React__default.createElement(StyledSuccessButtonPrimary, {
     text: ctaText,
     onPress: onCtaPress
-  }), !!showSecondaryButton && /*#__PURE__*/React__default.createElement(StyledSuccessButtonPrimary, {
+  }), !!showSecondaryButton && /*#__PURE__*/React__default.createElement(StyledSuccessButtonSecondary, {
     variant: "text",
     text: secondaryCtaText,
     onPress: onSecondaryCtaPress

package/lib/index.js

@@ -6167,14 +6167,15 @@ var getErrorTheme = function getErrorTheme(theme) {
     imageMarginBottom: theme.space.large,
     wrapperPadding: theme.space.large,
     button: {
-      wrapperHorizontalPadding: theme.space.medium,
+      wrapperHorizontalPadding: theme.space.large,
       wrapperVerticalPadding: theme.space.xxxlarge,
       margin: theme.space.medium,
       padding: theme.space.medium
     }
   };
   var sizes = {
-    image: theme.sizes['19xlarge']
+    image: theme.sizes['6xlarge'],
+    icon: theme.sizes['6xlarge']
   };
   var colors = {
     title: theme.colors.onDefaultGlobalSurface,
@@ -6692,14 +6693,16 @@ var getSuccessTheme = function getSuccessTheme(theme) {
     imageMarginBottom: theme.space.xlarge,
     wrapperPadding: theme.space.large,
     button: {
-      wrapperHorizontalPadding: theme.space.medium,
+      wrapperHorizontalPadding: theme.space.large,
       wrapperVerticalPadding: theme.space.xxxlarge,
       margin: theme.space.medium,
-      padding: theme.space.medium
+      padding: theme.space.medium,
+      secondaryCTAMarginTop: theme.space.medium
     }
   };
   var sizes = {
-    image: theme.sizes['19xlarge']
+    image: theme.sizes['19xlarge'],
+    icon: theme.sizes['6xlarge']
   };
   var colors = {
     title: theme.colors.onDefaultGlobalSurface,
@@ -22629,8 +22632,17 @@ var StyledErrorImageContainer = index$b(reactNative.View)(function (_ref6) {
     alignItems: 'center'
   };
 });
-var StyledErrorImage = index$b(Image)(function (_ref7) {
+var StyledErrorIconContainer = index$b(reactNative.View)(function (_ref7) {
   var theme = _ref7.theme;
+  return {
+    marginBottom: theme.__hd__.error.space.imageMarginBottom,
+    width: theme.__hd__.error.sizes.icon,
+    height: theme.__hd__.error.sizes.icon,
+    alignItems: 'center'
+  };
+});
+var StyledErrorImage = index$b(Image)(function (_ref8) {
+  var theme = _ref8.theme;
   return {
     marginBottom: theme.__hd__.error.space.imageMarginBottom,
     width: theme.__hd__.error.sizes.image,
@@ -22638,16 +22650,16 @@ var StyledErrorImage = index$b(Image)(function (_ref7) {
     resizeMode: 'contain'
   };
 });
-var StyledErrorTitle = index$b(Typography.Title)(function (_ref8) {
-  var theme = _ref8.theme;
+var StyledErrorTitle = index$b(Typography.Title)(function (_ref9) {
+  var theme = _ref9.theme;
   return {
     textAlign: 'center',
     marginBottom: theme.__hd__.error.space.titleMarginBottom,
     color: theme.__hd__.error.colors.title
   };
 });
-var StyledErrorDescription = index$b(Typography.Body)(function (_ref9) {
-  var theme = _ref9.theme;
+var StyledErrorDescription = index$b(Typography.Body)(function (_ref10) {
+  var theme = _ref10.theme;
   return {
     textAlign: 'center',
     color: theme.__hd__.error.colors.description
@@ -22673,7 +22685,7 @@ var renderImageOrIcon$1 = function renderImageOrIcon(_ref) {
   var image = _ref.image,
     icon = _ref.icon;
   if (icon) {
-    return /*#__PURE__*/React__namespace.default.createElement(StyledErrorImageContainer, null, /*#__PURE__*/React__namespace.default.createElement(StatusIcon, {
+    return /*#__PURE__*/React__namespace.default.createElement(StyledErrorIconContainer, null, /*#__PURE__*/React__namespace.default.createElement(StatusIcon, {
       icon: icon,
       testID: "error-icon"
     }));
@@ -25916,23 +25928,32 @@ var StyledSuccessImageContainer = index$b(reactNative.View)(function (_ref4) {
     alignItems: 'center'
   };
 });
-var StyledSuccessTitle = index$b(Typography.Title)(function (_ref5) {
+var StyledSuccessIconContainer = index$b(reactNative.View)(function (_ref5) {
   var theme = _ref5.theme;
+  return {
+    marginBottom: theme.__hd__.success.space.imageMarginBottom,
+    width: theme.__hd__.success.sizes.icon,
+    height: theme.__hd__.success.sizes.icon,
+    alignItems: 'center'
+  };
+});
+var StyledSuccessTitle = index$b(Typography.Title)(function (_ref6) {
+  var theme = _ref6.theme;
   return {
     textAlign: 'center',
     marginBottom: theme.__hd__.success.space.titleMarginBottom,
     color: theme.__hd__.success.colors.title
   };
 });
-var StyledSuccessDescription = index$b(Typography.Body)(function (_ref6) {
-  var theme = _ref6.theme;
+var StyledSuccessDescription = index$b(Typography.Body)(function (_ref7) {
+  var theme = _ref7.theme;
   return {
     textAlign: 'center',
     color: theme.__hd__.success.colors.description
   };
 });
-var StyledSuccessButtonContainer = index$b(reactNative.View)(function (_ref7) {
-  var theme = _ref7.theme;
+var StyledSuccessButtonContainer = index$b(reactNative.View)(function (_ref8) {
+  var theme = _ref8.theme;
   return {
     display: 'flex',
     flexDirection: 'column',
@@ -25942,12 +25963,19 @@ var StyledSuccessButtonContainer = index$b(reactNative.View)(function (_ref7) {
     paddingVertical: theme.__hd__.success.space.button.wrapperVerticalPadding
   };
 });
-var StyledSuccessButtonPrimary = index$b(CompoundButton)(function (_ref8) {
-  var theme = _ref8.theme;
+var StyledSuccessButtonPrimary = index$b(CompoundButton)(function (_ref9) {
+  var theme = _ref9.theme;
   return {
     padding: theme.__hd__.success.space.button.padding
   };
 });
+var StyledSuccessButtonSecondary = index$b(CompoundButton)(function (_ref10) {
+  var theme = _ref10.theme;
+  return {
+    padding: theme.__hd__.success.space.button.padding,
+    marginTop: theme.__hd__.success.space.button.secondaryCTAMarginTop
+  };
+});
 var StyledSuccessModal = index$b(ModalWrapper)({
   height: '100%',
   width: '100%'
@@ -25971,7 +25999,7 @@ var renderImageOrIcon = function renderImageOrIcon(_ref) {
   var image = _ref.image,
     icon = _ref.icon;
   if (icon) {
-    return /*#__PURE__*/React__namespace.default.createElement(StyledSuccessImageContainer, null, /*#__PURE__*/React__namespace.default.createElement(StatusIcon, {
+    return /*#__PURE__*/React__namespace.default.createElement(StyledSuccessIconContainer, null, /*#__PURE__*/React__namespace.default.createElement(StatusIcon, {
       icon: icon,
       testID: "success-icon"
     }));
@@ -26008,7 +26036,7 @@ var SuccessPage = function SuccessPage(_ref2) {
   }, title), typeof description === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledSuccessDescription, null, description) : description), !!ctaText && /*#__PURE__*/React__namespace.default.createElement(StyledSuccessButtonContainer, null, /*#__PURE__*/React__namespace.default.createElement(StyledSuccessButtonPrimary, {
     text: ctaText,
     onPress: onCtaPress
-  }), !!showSecondaryButton && /*#__PURE__*/React__namespace.default.createElement(StyledSuccessButtonPrimary, {
+  }), !!showSecondaryButton && /*#__PURE__*/React__namespace.default.createElement(StyledSuccessButtonSecondary, {
     variant: "text",
     text: secondaryCtaText,
     onPress: onSecondaryCtaPress

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.105.4-alpha.0",
+  "version": "8.105.4",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/Alert/StyledAlert.tsx

@@ -3,8 +3,9 @@ import { TouchableOpacity, View } from 'react-native';
 import type { ComponentProps } from 'react';
 import type { ViewProps } from 'react-native';
 import Typography from '../Typography';
-import { TextProps } from '../Typography/Text';
-import Icon, { IconProps } from '../Icon';
+import type { TextProps } from '../Typography/Text';
+import type { IconProps } from '../Icon';
+import Icon from '../Icon';
 
 type ThemeIntent = 'success' | 'info' | 'warning' | 'error' | 'notification';
 const Container = styled(View)<{

package/src/components/AnimatedScroller/AnimatedFAB.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
-import { Animated } from 'react-native';
+import type { Animated } from 'react-native';
 import FAB from '../FAB';
-import ActionGroup, {
-  ActionGroupHandles,
-  ActionGroupProps,
-} from '../FAB/ActionGroup';
-import { FABHandles, FABProps } from '../FAB/FAB';
+import type { ActionGroupHandles, ActionGroupProps } from '../FAB/ActionGroup';
+import ActionGroup from '../FAB/ActionGroup';
+import type { FABHandles, FABProps } from '../FAB/FAB';
 
 const LAST_BREAKPOINT = 100;
 const MIDDLE_BREAKPOINT = 250;

package/src/components/AnimatedScroller/AnimatedScrollable.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import {
-  Animated,
+import type {
   FlatListProps,
   ScrollViewProps as RnScrollViewProps,
   SectionListProps,
 } from 'react-native';
-import { ActionGroupProps } from '../FAB/ActionGroup';
-import { FABProps } from '../FAB/FAB';
+import { Animated } from 'react-native';
+import type { ActionGroupProps } from '../FAB/ActionGroup';
+import type { FABProps } from '../FAB/FAB';
 import AnimatedFAB from './AnimatedFAB';
 
 export interface AnimatedScrollerProps<T> {

package/src/components/AnimatedScroller/FlatListWithFAB.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { FlatList, FlatListProps } from 'react-native';
-import { FABProps } from '../FAB/FAB';
+import type { FlatListProps } from 'react-native';
+import { FlatList } from 'react-native';
+import type { FABProps } from '../FAB/FAB';
 import AnimatedScroller from './AnimatedScrollable';
-import { ActionGroupProps } from '../FAB/ActionGroup';
+import type { ActionGroupProps } from '../FAB/ActionGroup';
 
 export interface FlatListWithFABProps<T> extends FlatListProps<T> {
   /**

package/src/components/AnimatedScroller/ScrollViewWithFAB.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { ScrollView, ScrollViewProps } from 'react-native';
+import type { ScrollViewProps } from 'react-native';
+import { ScrollView } from 'react-native';
 import AnimatedScroller from './AnimatedScrollable';
-import { ActionGroupProps } from '../FAB/ActionGroup';
-import { FABProps } from '../FAB/FAB';
+import type { ActionGroupProps } from '../FAB/ActionGroup';
+import type { FABProps } from '../FAB/FAB';
 
 export interface ScrollViewWithFABProps extends ScrollViewProps {
   /**

package/src/components/AnimatedScroller/SectionListWithFAB.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { SectionList, SectionListProps } from 'react-native';
+import type { SectionListProps } from 'react-native';
+import { SectionList } from 'react-native';
 import AnimatedScroller from './AnimatedScrollable';
-import { ActionGroupProps } from '../FAB/ActionGroup';
-import { FABProps } from '../FAB/FAB';
+import type { ActionGroupProps } from '../FAB/ActionGroup';
+import type { FABProps } from '../FAB/FAB';
 
 export interface SectionListWithFABProps<T> extends SectionListProps<T> {
   /**

package/src/components/AnimatedScroller/__tests__/ScrollablesWithFAB.spec.tsx

@@ -4,11 +4,11 @@ import { fireEvent } from '@testing-library/react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import { FlatListWithFAB, ScrollViewWithFAB, SectionListWithFAB } from '..';
 import Box from '../../Box';
-import { ActionGroupProps } from '../../FAB/ActionGroup';
-import { FABProps } from '../../FAB/FAB';
+import type { ActionGroupProps } from '../../FAB/ActionGroup';
+import type { FABProps } from '../../FAB/FAB';
 import Typography from '../../Typography';
-import { ScrollViewWithFABProps } from '../ScrollViewWithFAB';
-import { FlatListWithFABProps } from '../FlatListWithFAB';
+import type { ScrollViewWithFABProps } from '../ScrollViewWithFAB';
+import type { FlatListWithFABProps } from '../FlatListWithFAB';
 import SectionHeading from '../../SectionHeading';
 
 const ExampleScrollViewWithFAB = ({ fabProps }: ScrollViewWithFABProps) => (

package/src/components/AppCue/index.tsx

@@ -1,16 +1,14 @@
 import React, { useCallback, useLayoutEffect, useRef } from 'react';
+import type { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
 import {
   Modal,
   View,
   TouchableWithoutFeedback,
-  LayoutChangeEvent,
-  StyleProp,
-  ViewStyle,
   StyleSheet,
   useWindowDimensions,
 } from 'react-native';
+import type { Placement } from './StyledAppCue';
 import {
-  Placement,
   StyledContainer,
   StyledContent,
   StyledIconContainer,

package/src/components/AppCue/utils.ts

@@ -1,4 +1,4 @@
-import { Placement } from './StyledAppCue';
+import type { Placement } from './StyledAppCue';
 
 /**
  * Calculates the position of an element based on its placement relative to a reference position.

package/src/components/Attachment/index.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import type { ReactElement } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 import {
   StyledContainer,
   StyledContentContainer,
   StyledCTAWrapper,
   StyledTextContainer,
 } from './StyledAttachment';
-import Icon, { IconProps } from '../Icon';
+import type { IconProps } from '../Icon';
+import Icon from '../Icon';
 import Typography from '../Typography';
-import { ImageProps } from '../Image';
+import type { ImageProps } from '../Image';
 
 interface AttachmentProps {
   /**

package/src/components/Avatar/AvatarStack/StyledAvatarStack.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/native';
 import { View } from 'react-native';
-import Avatar, { AvatarProps } from '../Avatar';
+import type { AvatarProps } from '../Avatar';
+import Avatar from '../Avatar';
 import Box from '../../Box';
 
 const VISIBLE_RATIO = 0.7;

package/src/components/Avatar/AvatarStack/index.tsx

@@ -1,6 +1,7 @@
-import React, { ReactElement, ReactNode } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import { AvatarProps } from '../Avatar';
+import type { ReactElement, ReactNode } from 'react';
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { AvatarProps } from '../Avatar';
 import {
   StyledAvatar,
   StyledSurplusContainer,

package/src/components/Avatar/StyledAvatar.tsx

@@ -1,7 +1,7 @@
 import { View, Image, TouchableOpacity, Platform } from 'react-native';
 import styled from '@emotion/native';
 import Typography from '../Typography';
-import { TextProps } from '../Typography/Text';
+import type { TextProps } from '../Typography/Text';
 
 type ThemeSize =
   | 'small'

package/src/components/Badge/index.tsx

@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 import { StyledView, StyledText, StyledIcon } from './StyledBadge';
 import BadgeStatus from './Status';
 import BadgeCount from './Count';
-import { BasicBadgeProps, IconBadgeProps } from './types';
+import type { BasicBadgeProps, IconBadgeProps } from './types';
 import { DEFAULT_MAX_NUMBER } from './constants';
 
 export type BadgeProps = BasicBadgeProps | IconBadgeProps;

package/src/components/Badge/types.ts

@@ -1,5 +1,5 @@
-import { Animated, StyleProp, ViewStyle } from 'react-native';
-import { IconName } from '../Icon';
+import type { Animated, StyleProp, ViewStyle } from 'react-native';
+import type { IconName } from '../Icon';
 
 interface BaseBadgeProps extends React.ComponentProps<typeof Animated.View> {
   /**

package/src/components/BottomSheet/ScrollView.tsx

@@ -1,13 +1,12 @@
 import React, { useContext, useCallback, forwardRef } from 'react';
-import {
+import type {
   NativeScrollEvent,
   NativeSyntheticEvent,
-  ScrollView,
   ScrollViewProps,
 } from 'react-native';
-import BottomSheetContext, {
-  BottomSheetContextType,
-} from './BottomSheetContext';
+import { ScrollView } from 'react-native';
+import type { BottomSheetContextType } from './BottomSheetContext';
+import BottomSheetContext from './BottomSheetContext';
 
 const BottomSheetScrollView = forwardRef<ScrollView, ScrollViewProps>(
   ({ scrollEventThrottle = 100, ...props }, ref): JSX.Element => {

package/src/components/BottomSheet/StyledBottomSheet.tsx

@@ -1,10 +1,9 @@
 import styled from '@emotion/native';
 import type { ComponentProps } from 'react';
-import type { ViewProps } from 'react-native';
+import type { ViewProps, KeyboardAvoidingViewProps } from 'react-native';
 import {
   Animated,
   KeyboardAvoidingView,
-  KeyboardAvoidingViewProps,
   Pressable,
   SafeAreaView,
   StyleSheet,

package/src/components/BottomSheet/index.tsx

@@ -1,14 +1,11 @@
 import type { ReactElement, ReactNode } from 'react';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
-import {
-  Animated,
-  Dimensions,
-  Easing,
+import type {
+  StyleProp,
+  ViewStyle,
   KeyboardAvoidingViewProps,
-  Modal,
-  Platform,
 } from 'react-native';
+import { Animated, Dimensions, Easing, Modal, Platform } from 'react-native';
 import BottomSheetContext from './BottomSheetContext';
 import Footer from './Footer';
 import Header from './Header';

package/src/components/Box/StyledBox.tsx

@@ -1,9 +1,10 @@
 import styled from '@emotion/native';
-import { Theme } from '@emotion/react';
+import type { Theme } from '@emotion/react';
 import { View } from 'react-native';
-import { FlexStyleProps, StyleProps, ThemeScale } from './types';
+import type { FlexStyleProps, StyleProps, ThemeScale } from './types';
 import { pick } from '../../utils/helpers';
-import config, { ConfigType, flexPropsKey } from './config';
+import type { ConfigType } from './config';
+import config, { flexPropsKey } from './config';
 
 export const getThemeValue = (
   theme: Theme,