@hero-design/rn 7.18.1 → 7.19.0

package/lib/index.js

@@ -1789,23 +1789,26 @@ var getCardTheme = function getCardTheme(theme) {
 
 var getCheckboxTheme = function getCheckboxTheme(theme) {
   var colors = {
-    borderColor: theme.colors.primary,
-    text: theme.colors.invertedText,
-    disabled: theme.colors.inactiveBackground
+    "default": theme.colors.globalPrimary,
+    disabledBorder: theme.colors.globalPrimaryLight
   };
   var space = {
     // to remove the empty space above the check icon
     // and also to center the check mark
-    iconTop: -theme.space.xsmall
+    iconTop: -scale(3),
+    wrapperPadding: theme.space.medium,
+    iconDescriptionPadding: theme.space.smallMedium
   };
   var sizes = {
-    base: theme.space.large
+    icon: scale(20)
   };
   var radii = {
-    base: theme.radii.base
+    wrapper: theme.radii.medium,
+    icon: theme.radii.base
   };
   var borderWidths = {
-    "default": theme.borderWidths.medium
+    wrapper: theme.borderWidths.base,
+    icon: theme.borderWidths.medium
   };
   return {
     colors: colors,
@@ -2035,11 +2038,12 @@ var getListTheme = function getListTheme(theme) {
     cardShadow: theme.radii.base,
     leadingStatus: theme.radii.rounded
   };
-  var offsets = {
-    cardShadow: {
+  var shadows = {
+    cardOffset: {
       width: 0,
       height: 2
-    }
+    },
+    cardElevation: 10
   };
   var widths = {
     leadingStatus: 8
@@ -2053,9 +2057,9 @@ var getListTheme = function getListTheme(theme) {
     colors: colors,
     space: space,
     radii: radii,
-    offsets: offsets,
     widths: widths,
-    opacity: opacity
+    opacity: opacity,
+    shadows: shadows
   };
 };
 
@@ -2128,13 +2132,9 @@ var getProgressTheme = function getProgressTheme(theme) {
 
 var getRadioTheme = function getRadioTheme(theme) {
   var colors = {
-    circle: theme.colors.black,
-    checkedCircle: theme.colors.primary,
-    wrapper: theme.colors.platformBackground,
-    checkedWrapper: theme.colors.primaryBackground
+    circle: theme.colors.globalPrimary
   };
   var space = {
-    wrapperPadding: theme.space.medium,
     circleLeftMargin: theme.space.small,
     groupTopMargin: theme.space.xsmall
   };
@@ -2145,15 +2145,11 @@ var getRadioTheme = function getRadioTheme(theme) {
   var borderWidths = {
     circle: theme.borderWidths.medium
   };
-  var radii = {
-    wrapper: theme.radii.base
-  };
   return {
     sizes: sizes,
     borderWidths: borderWidths,
     space: space,
-    colors: colors,
-    radii: radii
+    colors: colors
   };
 };
 
@@ -2249,9 +2245,13 @@ var getSpinnerTheme = function getSpinnerTheme(theme) {
 
 var getSwitchTheme = function getSwitchTheme(theme) {
   var colors = {
-    thumb: theme.colors.platformBackground,
-    active: theme.colors.primary,
-    inactive: theme.colors.inactiveBackground
+    backgroundColors: {
+      checked: theme.colors.primary,
+      unchecked: theme.colors.globalPrimaryLight,
+      'disabled-checked': theme.colors.primaryLight,
+      'disabled-unchecked': theme.colors.archived
+    },
+    thumb: theme.colors.platformBackground
   };
   var thumbSizes = {
     small: theme.space.medium,
@@ -2273,17 +2273,13 @@ var getSwitchTheme = function getSwitchTheme(theme) {
   var radii = {
     rounded: theme.radii.rounded
   };
-  var borderWidths = {
-    "default": theme.borderWidths.base
-  };
   return {
     colors: colors,
     thumbSizes: thumbSizes,
     widths: widths,
     heights: heights,
     spaces: spaces,
-    radii: radii,
-    borderWidths: borderWidths
+    radii: radii
   };
 };
 
@@ -14591,7 +14587,7 @@ var AccordionItem = function AccordionItem(_ref) {
     fontSize: "large",
     fontWeight: "semi-bold"
   }, header) : header, /*#__PURE__*/React__default["default"].createElement(Icon, {
-    icon: "arrow-".concat(open ? 'up' : 'down'),
+    icon: open ? 'arrow-up' : 'arrow-down',
     intent: "primary",
     size: "small"
   })), /*#__PURE__*/React__default["default"].createElement(StyledCollapse, {
@@ -18337,7 +18333,7 @@ function convertToFP(fn, arity, a) {
 var format = convertToFP(format$1, 2);
 var formatTime = format;
 
-var Wrapper$1 = index$7(reactNative.View)(function () {
+var Wrapper = index$7(reactNative.View)(function () {
   return {
     flex: 1,
     flexDirection: 'row',
@@ -18364,7 +18360,7 @@ function ContentNavigator(_ref) {
       fontSize = _ref$fontSize === void 0 ? 'medium' : _ref$fontSize,
       testID = _ref.testID,
       style = _ref.style;
-  return /*#__PURE__*/React__default["default"].createElement(Wrapper$1, {
+  return /*#__PURE__*/React__default["default"].createElement(Wrapper, {
     testID: testID,
     style: style
   }, /*#__PURE__*/React__default["default"].createElement(CompoundButton.Icon, {
@@ -18711,42 +18707,73 @@ var index$6 = Object.assign(Card, {
 
 var StyledWrapper$5 = index$7(reactNative.TouchableOpacity)(function (_ref) {
   var theme = _ref.theme,
-      disabled = _ref.disabled;
+      themeWithBorder = _ref.themeWithBorder,
+      themeDisabled = _ref.themeDisabled;
+  var borderStyle = {
+    borderRadius: theme.__hd__.checkbox.radii.wrapper,
+    borderWidth: theme.__hd__.checkbox.borderWidths.wrapper,
+    padding: theme.__hd__.checkbox.space.wrapperPadding,
+    borderColor: themeDisabled ? theme.__hd__.checkbox.colors.disabledBorder : theme.__hd__.checkbox.colors["default"]
+  };
+  return _objectSpread2({
+    flexDirection: 'row'
+  }, themeWithBorder && borderStyle);
+});
+var StyledDescription$1 = index$7(Typography.Text)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    paddingRight: theme.__hd__.checkbox.space.iconDescriptionPadding,
+    flex: 1
+  };
+});
+var StyledCheckbox = index$7(reactNative.View)(function (_ref3) {
+  var theme = _ref3.theme,
+      themeDisabled = _ref3.themeDisabled;
   return {
-    display: 'flex',
     flexDirection: 'row',
     justifyContent: 'center',
-    height: theme.__hd__.checkbox.sizes.base,
-    width: theme.__hd__.checkbox.sizes.base,
-    borderRadius: theme.__hd__.checkbox.radii.base,
-    borderWidth: theme.__hd__.checkbox.borderWidths["default"],
-    borderColor: disabled ? theme.__hd__.checkbox.colors.disabled : theme.__hd__.checkbox.colors.borderColor,
+    height: theme.__hd__.checkbox.sizes.icon,
+    width: theme.__hd__.checkbox.sizes.icon,
+    borderRadius: theme.__hd__.checkbox.radii.icon,
+    borderWidth: theme.__hd__.checkbox.borderWidths.icon,
+    borderColor: themeDisabled ? theme.__hd__.checkbox.colors.disabledBorder : theme.__hd__.checkbox.colors["default"],
     overflow: 'hidden'
   };
 });
+var StyledCheckMark = index$7(Icon)(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    position: 'absolute',
+    top: theme.__hd__.checkbox.space.iconTop
+  };
+});
 
-var CheckBox = function CheckBox(_ref) {
+var Checkbox = function Checkbox(_ref) {
   var checked = _ref.checked,
-      disabled = _ref.disabled,
+      description = _ref.description,
+      _ref$withBorder = _ref.withBorder,
+      withBorder = _ref$withBorder === void 0 ? false : _ref$withBorder,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       onPress = _ref.onPress,
       style = _ref.style,
       testID = _ref.testID;
   return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$5, {
     onPress: onPress,
     disabled: disabled,
+    themeDisabled: disabled,
+    themeWithBorder: withBorder,
     style: style,
     testID: testID
-  }, checked && /*#__PURE__*/React__default["default"].createElement(Icon, {
-    icon: "circle-ok",
-    intent: "primary",
-    size: "large",
-    style: _objectSpread2({
-      position: 'absolute',
-      top: defaultTheme.__hd__.checkbox.space.iconTop
-    }, disabled ? {
-      color: defaultTheme.__hd__.checkbox.colors.disabled
-    } : {})
-  }));
+  }, !!description && /*#__PURE__*/React__default["default"].createElement(StyledDescription$1, {
+    intent: disabled ? 'subdued' : 'body'
+  }, description), /*#__PURE__*/React__default["default"].createElement(StyledCheckbox, {
+    themeDisabled: disabled
+  }, checked && /*#__PURE__*/React__default["default"].createElement(StyledCheckMark, {
+    icon: "box-check",
+    intent: disabled ? 'disabled-text' : 'text',
+    testID: "check-mark"
+  })));
 };
 
 var StyledContainer$3 = index$7(reactNative.View)(function (_ref) {
@@ -18897,7 +18924,7 @@ var StyledErrorAndMaxLengthContainer = index$7(reactNative.View)(function () {
 });
 
 var _excluded$5 = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "helpText", "value", "defaultValue"];
-var getVariant = function getVariant(_ref) {
+var getVariant$1 = function getVariant(_ref) {
   var disabled = _ref.disabled,
       error = _ref.error,
       editable = _ref.editable,
@@ -18962,7 +18989,7 @@ var TextInput = function TextInput(_ref2) {
       isFocused = _React$useState2[0],
       setIsFocused = _React$useState2[1];
 
-  var variant = getVariant({
+  var variant = getVariant$1({
     disabled: disabled,
     error: error,
     editable: editable,
@@ -19885,8 +19912,9 @@ var StyledListItemContainer$1 = index$7(reactNative.TouchableHighlight)(function
         borderRadius: theme.__hd__.list.radii.card,
         shadowColor: theme.colors.shadow,
         shadowRadius: theme.__hd__.list.radii.cardShadow,
-        shadowOffset: theme.__hd__.list.offsets.cardShadow,
-        shadowOpacity: theme.__hd__.list.opacity.cardShadow
+        shadowOffset: theme.__hd__.list.shadows.cardOffset,
+        shadowOpacity: theme.__hd__.list.opacity.cardShadow,
+        elevation: theme.__hd__.list.shadows.cardElevation
       });
 
     default:
@@ -20641,70 +20669,60 @@ var Spinner = function Spinner(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(AnimatedSpinner, null)));
 };
 
-var Wrapper = index$7(reactNative.TouchableOpacity)(function (_ref) {
-  var theme = _ref.theme,
-      themeChecked = _ref.themeChecked;
-  return {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    borderRadius: theme.__hd__.radio.radii.wrapper,
-    padding: theme.__hd__.radio.space.wrapperPadding,
-    backgroundColor: themeChecked ? theme.__hd__.radio.colors.checkedWrapper : theme.__hd__.radio.colors.wrapper
-  };
-});
-var Circle = index$7(reactNative.View)(function (_ref2) {
-  var theme = _ref2.theme,
-      themeChecked = _ref2.themeChecked;
+var Circle = index$7(reactNative.View)(function (_ref) {
+  var theme = _ref.theme;
   return {
     height: theme.__hd__.radio.sizes.circle,
     width: theme.__hd__.radio.sizes.circle,
     borderRadius: theme.radii.rounded,
     borderWidth: theme.__hd__.radio.borderWidths.circle,
-    borderColor: themeChecked ? theme.__hd__.radio.colors.checkedCircle : theme.__hd__.radio.colors.circle,
+    borderColor: theme.__hd__.radio.colors.circle,
     alignItems: 'center',
     justifyContent: 'center'
   };
 });
-var InnerCircle = index$7(reactNative.View)(function (_ref3) {
-  var theme = _ref3.theme;
+var InnerCircle = index$7(reactNative.View)(function (_ref2) {
+  var theme = _ref2.theme;
   return {
     height: theme.__hd__.radio.sizes.innerCircle,
     width: theme.__hd__.radio.sizes.innerCircle,
     borderRadius: theme.radii.rounded,
-    backgroundColor: theme.__hd__.radio.colors.checkedCircle
+    backgroundColor: theme.__hd__.radio.colors.circle
   };
 });
-var Spacer = index$7(reactNative.View)(function (_ref4) {
-  var theme = _ref4.theme;
+var Spacer = index$7(reactNative.View)(function (_ref3) {
+  var theme = _ref3.theme;
   return {
     marginTop: theme.__hd__.radio.space.groupTopMargin
   };
 });
 
-var Radio = function Radio(_ref) {
-  var text = _ref.text,
-      _ref$checked = _ref.checked,
-      checked = _ref$checked === void 0 ? false : _ref$checked,
-      onPress = _ref.onPress,
-      style = _ref.style,
-      testID = _ref.testID;
-  return /*#__PURE__*/React__default["default"].createElement(Wrapper, {
+var RadioCircle = function RadioCircle(_ref) {
+  var checked = _ref.checked,
+      text = _ref.text;
+  return /*#__PURE__*/React__default["default"].createElement(Circle, null, checked && /*#__PURE__*/React__default["default"].createElement(InnerCircle, {
+    testID: "".concat(text, "-selected-circle")
+  }));
+};
+
+var Radio = function Radio(_ref2) {
+  var text = _ref2.text,
+      _ref2$checked = _ref2.checked,
+      checked = _ref2$checked === void 0 ? false : _ref2$checked,
+      onPress = _ref2.onPress,
+      style = _ref2.style,
+      testID = _ref2.testID;
+  return /*#__PURE__*/React__default["default"].createElement(List.BasicItem, {
     onPress: onPress,
-    themeChecked: checked,
+    selected: checked,
+    title: text,
+    suffix: /*#__PURE__*/React__default["default"].createElement(RadioCircle, {
+      checked: checked,
+      text: text
+    }),
     style: style,
     testID: testID
-  }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
-    fontSize: "large"
-  }, text)), /*#__PURE__*/React__default["default"].createElement(Circle, {
-    themeChecked: checked
-  }, checked && /*#__PURE__*/React__default["default"].createElement(InnerCircle, {
-    testID: "".concat(text, "-selected-circle")
-  })));
+  });
 };
 
 function getKey(option, index, keyExtractor) {
@@ -21095,6 +21113,8 @@ function MultiSelect(_ref) {
     onPress: function onPress() {
       return setOpen(true);
     }
+  }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
+    pointerEvents: "none"
   }, /*#__PURE__*/React__default["default"].createElement(TextInput, {
     label: label,
     value: displayedValue,
@@ -21108,7 +21128,7 @@ function MultiSelect(_ref) {
     pointerEvents: "none",
     style: style,
     testID: testID
-  }))), /*#__PURE__*/React__default["default"].createElement(BottomSheet, {
+  })))), /*#__PURE__*/React__default["default"].createElement(BottomSheet, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -21249,6 +21269,8 @@ var SingleSelect = function SingleSelect(_ref) {
     onPress: function onPress() {
       return setOpen(true);
     }
+  }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
+    pointerEvents: "none"
   }, /*#__PURE__*/React__default["default"].createElement(TextInput, {
     label: label,
     value: displayedValue,
@@ -21262,7 +21284,7 @@ var SingleSelect = function SingleSelect(_ref) {
     pointerEvents: "none",
     style: style,
     testID: testID
-  }))), /*#__PURE__*/React__default["default"].createElement(BottomSheet, {
+  })))), /*#__PURE__*/React__default["default"].createElement(BottomSheet, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -21298,43 +21320,21 @@ var index$3 = Object.assign(SingleSelect, {
 
 var StyledWrapper = index$7(reactNative.View)(function (_ref) {
   var theme = _ref.theme,
-      themeChecked = _ref.themeChecked,
+      themeVariant = _ref.themeVariant,
       themeSize = _ref.themeSize;
   return {
     height: theme.__hd__["switch"].heights[themeSize],
     width: theme.__hd__["switch"].widths[themeSize],
     paddingHorizontal: theme.__hd__["switch"].spaces[themeSize],
     borderRadius: theme.__hd__["switch"].radii.rounded,
-    backgroundColor: themeChecked ? theme.__hd__["switch"].colors.active : theme.__hd__["switch"].colors.inactive
-  };
-});
-var StyledDisabledWrapper = index$7(reactNative.View)(function (_ref2) {
-  var theme = _ref2.theme,
-      themeSize = _ref2.themeSize;
-  return {
-    position: 'absolute',
-    height: theme.__hd__["switch"].heights[themeSize],
-    width: theme.__hd__["switch"].widths[themeSize],
-    borderRadius: theme.__hd__["switch"].radii.rounded,
-    backgroundColor: theme.__hd__["switch"].colors.thumb,
-    zIndex: 9999,
-    opacity: 0.8
-  };
-});
-var StyledThumbWrapper = index$7(reactNative.View)(function (_ref3) {
-  var theme = _ref3.theme,
-      themeSize = _ref3.themeSize;
-  return {
-    height: theme.__hd__["switch"].heights[themeSize],
-    width: theme.__hd__["switch"].widths[themeSize],
-    borderRadius: theme.__hd__["switch"].radii.rounded,
+    backgroundColor: theme.__hd__["switch"].colors.backgroundColors[themeVariant],
     display: 'flex',
     justifyContent: 'center'
   };
 });
-var StyledKnot = index$7(reactNative.Animated.View)(function (_ref4) {
-  var theme = _ref4.theme,
-      themeSize = _ref4.themeSize;
+var StyledKnot = index$7(reactNative.Animated.View)(function (_ref2) {
+  var theme = _ref2.theme,
+      themeSize = _ref2.themeSize;
   return {
     width: theme.__hd__["switch"].thumbSizes[themeSize],
     height: theme.__hd__["switch"].thumbSizes[themeSize],
@@ -21343,16 +21343,32 @@ var StyledKnot = index$7(reactNative.Animated.View)(function (_ref4) {
   };
 });
 
-var Switch = function Switch(_ref) {
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'medium' : _ref$size,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      checked = _ref.checked,
-      onPress = _ref.onPress,
-      style = _ref.style,
-      testID = _ref.testID;
+var getVariant = function getVariant(_ref) {
+  var disabled = _ref.disabled,
+      checked = _ref.checked;
+
+  if (disabled) {
+    return checked ? 'disabled-checked' : 'disabled-unchecked';
+  }
+
+  return checked ? 'checked' : 'unchecked';
+};
+
+var Switch = function Switch(_ref2) {
+  var _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? 'medium' : _ref2$size,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      _ref2$checked = _ref2.checked,
+      checked = _ref2$checked === void 0 ? false : _ref2$checked,
+      onPress = _ref2.onPress,
+      style = _ref2.style,
+      testID = _ref2.testID;
   var theme = useTheme$1();
+  var variant = getVariant({
+    disabled: disabled,
+    checked: checked
+  });
   var offset = checked ? theme.__hd__["switch"].widths[size] - theme.__hd__["switch"].thumbSizes[size] - theme.__hd__["switch"].spaces[size] * 2 : theme.__hd__["switch"].spaces.inactive;
 
   var _useState = React.useState(function () {
@@ -21373,19 +21389,15 @@ var Switch = function Switch(_ref) {
     onPress: onPress,
     disabled: disabled
   }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper, {
-    themeChecked: checked,
+    themeVariant: variant,
     themeSize: size,
     style: style
-  }, disabled && /*#__PURE__*/React__default["default"].createElement(StyledDisabledWrapper, {
-    themeSize: size
-  }), /*#__PURE__*/React__default["default"].createElement(StyledThumbWrapper, {
-    themeSize: size
   }, /*#__PURE__*/React__default["default"].createElement(StyledKnot, {
     themeSize: size,
     style: {
       left: animatedOffset
     }
-  }))));
+  })));
 };
 
 var AnimatedPagerView = reactNative.Animated.createAnimatedComponent(PagerView__default["default"]);
@@ -40691,7 +40703,7 @@ exports.BottomSheet = BottomSheet;
 exports.Button = CompoundButton;
 exports.Calendar = Calendar;
 exports.Card = index$6;
-exports.Checkbox = CheckBox;
+exports.Checkbox = Checkbox;
 exports.Collapse = Collapse;
 exports.ContentNavigator = ContentNavigator;
 exports.DatePicker = DatePicker;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.18.1",
+  "version": "7.19.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.18.1",
+    "@hero-design/colors": "7.19.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.9"

package/src/components/Accordion/AccordionItem.tsx

@@ -1,13 +1,14 @@
-import React, { ReactElement } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import React from 'react';
+import type { ReactElement } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import {
   StyledCollapse,
   StyledHeaderWrapper,
   StyledItemWrapper,
-  Variant,
 } from './StyledAccordion';
 import Typography from '../Typography';
 import Icon from '../Icon';
+import type { Variant } from './StyledAccordion';
 
 export type AccordionItemProps = {
   header: string | ReactElement;
@@ -38,7 +39,7 @@ const AccordionItem = ({
         header
       )}
       <Icon
-        icon={`arrow-${open ? 'up' : 'down'}`}
+        icon={open ? 'arrow-up' : 'arrow-down'}
         intent="primary"
         size="small"
       />

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Typography from '../../Typography';
-import Accordion, { AccordionProps } from '..';
+import Accordion from '..';
+import type { AccordionProps } from '..';
 
 const AccordionExample = (props: Omit<AccordionProps<string>, 'items'>) => (
   <Accordion

package/src/components/Accordion/index.tsx

@@ -1,5 +1,6 @@
-import React, { Key, ReactElement, useMemo } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import React, { useMemo } from 'react';
+import type { Key, ReactElement } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import AccordionItem from './AccordionItem';
 import { Spacer, StyledWrapper } from './StyledAccordion';
 import { usePropsOrInternalState } from './utils';

package/src/components/Alert/StyledAlert.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/native';
-import { ComponentProps } from 'react';
-import { TouchableOpacity, View, ViewProps } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
+import type { ComponentProps } from 'react';
+import type { ViewProps } from 'react-native';
 
 const Container = styled(View)<{
   themeVariant: 'default' | 'round';

package/src/components/Alert/index.tsx

@@ -1,6 +1,7 @@
-import React, { ReactElement } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import Icon, { IconName } from '../Icon';
+import React from 'react';
+import type { ReactElement } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import Icon from '../Icon';
 import Typography from '../Typography';
 import {
   Container,
@@ -9,6 +10,7 @@ import {
   IconContainer,
   TextContainer,
 } from './StyledAlert';
+import type { IconName } from '../Icon';
 
 const getIntentIcon = (
   intent: 'success' | 'info' | 'warning' | 'error'

package/src/components/Avatar/index.tsx

@@ -1,10 +1,10 @@
-import {
+import React from 'react';
+import type {
   ImageSourcePropType,
   StyleProp,
   ViewProps,
   ViewStyle,
 } from 'react-native';
-import React from 'react';
 import {
   StyledImage,
   StyledPressable,

package/src/components/Badge/Status.tsx

@@ -1,5 +1,7 @@
-import { View, StyleProp, ViewStyle, ViewProps, Animated } from 'react-native';
-import React, { ReactNode } from 'react';
+import { View, Animated } from 'react-native';
+import React from 'react';
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import type { ReactNode } from 'react';
 import { StyledStatus } from './StyledBadge';
 
 export interface StatusProps extends ViewProps {

package/src/components/Badge/index.tsx

@@ -1,5 +1,6 @@
-import { Animated, StyleProp, ViewStyle } from 'react-native';
+import { Animated } from 'react-native';
 import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import { StyledView, StyledText } from './StyledBadge';
 import BadgeStatus from './Status';