@hero-design/rn 8.105.3 → 8.105.4

package/src/components/Toast/StyledToast.tsx

@@ -2,10 +2,11 @@ import styled from '@emotion/native';
 import { Animated, StyleSheet, TouchableOpacity, View } from 'react-native';
 import type { ComponentProps } from 'react';
 import type { ViewProps } from 'react-native';
-import { IntentType } from './types';
-import { TextProps } from '../Typography/Text';
+import type { IntentType } from './types';
+import type { TextProps } from '../Typography/Text';
 import Typography from '../Typography';
-import Icon, { IconProps } from '../Icon';
+import type { IconProps } from '../Icon';
+import Icon from '../Icon';
 
 const ToastContainerWrapper = styled(View)<{ position: 'top' | 'bottom' }>(
   ({ theme, position }) => ({

package/src/components/Toolbar/StyledToolbar.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/native';
 import { TextInput, TouchableOpacity, View } from 'react-native';
 import type { ViewProps } from 'react-native';
 import Typography from '../Typography';
-import { BodyProps } from '../Typography/Body';
+import type { BodyProps } from '../Typography/Body';
 
 export type ToolbarMessageState =
   | 'default'

package/src/components/Toolbar/ToolbarItem.tsx

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

package/src/components/Toolbar/ToolbarMessage.tsx

@@ -1,19 +1,19 @@
 import React, { forwardRef } from 'react';
 
-import { TextInput as RNTextInput } from 'react-native';
 import type {
+  TextInput as RNTextInput,
   TextInputProps as NativeTextInputProps,
   StyleProp,
   ViewStyle,
   TextStyle,
 } from 'react-native';
 
+import type { ToolbarMessageState } from './StyledToolbar';
 import {
   StyledInput,
   StyledInputContainer,
   StyledPrefix,
   StyledSuffix,
-  ToolbarMessageState,
   ToolbarMessageWrapper,
 } from './StyledToolbar';
 import { useTheme } from '../../theme';

package/src/components/Toolbar/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ReactNode } from 'react';
-import { ViewProps } from 'react-native';
+import type { ViewProps } from 'react-native';
 import { ToolbarWrapper } from './StyledToolbar';
 import ToolbarGroup from './ToolbarGroup';
 import ToolbarMessage from './ToolbarMessage';

package/src/components/Typography/Caption/StyledCaption.tsx

@@ -1,6 +1,7 @@
 import { Text } from 'react-native';
 import styled from '@emotion/native';
-import { FONTWEIGHT_MAP, TypographyIntent } from '../types';
+import type { TypographyIntent } from '../types';
+import { FONTWEIGHT_MAP } from '../types';
 
 const StyledCaption = styled(Text)<{
   themeFontWeight: 'regular' | 'semi-bold';

package/src/emotion.d.ts

@@ -1,5 +1,5 @@
 import '@emotion/react';
-import { Theme as HeroTheme } from './theme';
+import type { Theme as HeroTheme } from './theme';
 
 declare module '@emotion/react' {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface

package/src/locales/en_AU.ts

@@ -1,4 +1,4 @@
-import { LocaleValues } from './types';
+import type { LocaleValues } from './types';
 
 const locale: LocaleValues = {
   lang: 'en-AU',

package/src/locales/en_CA.ts

@@ -1,4 +1,4 @@
-import { LocaleValues } from './types';
+import type { LocaleValues } from './types';
 
 const locale: LocaleValues = {
   lang: 'en-CA',

package/src/theme/ThemeSwitcher.tsx

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren, useMemo } from 'react';
+import type { PropsWithChildren } from 'react';
+import React, { useMemo } from 'react';
 
 import getTheme from './getTheme';
 import {

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -628,13 +628,14 @@ exports[`theme returns correct theme object 1`] = `
         "title": 32,
       },
       "sizes": {
-        "image": 176,
+        "icon": 72,
+        "image": 72,
       },
       "space": {
         "button": {
           "margin": 16,
           "padding": 16,
-          "wrapperHorizontalPadding": 16,
+          "wrapperHorizontalPadding": 24,
           "wrapperVerticalPadding": 48,
         },
         "imageMarginBottom": 24,
@@ -1307,13 +1308,15 @@ exports[`theme returns correct theme object 1`] = `
         "title": "Saiga-Medium",
       },
       "sizes": {
+        "icon": 72,
         "image": 176,
       },
       "space": {
         "button": {
           "margin": 16,
           "padding": 16,
-          "wrapperHorizontalPadding": 16,
+          "secondaryCTAMarginTop": 16,
+          "wrapperHorizontalPadding": 24,
           "wrapperVerticalPadding": 48,
         },
         "imageMarginBottom": 32,

package/src/theme/components/datePicker.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getDatePickerTheme = (theme: GlobalTheme) => {
   const sizes = {

package/src/theme/components/error.ts

@@ -6,7 +6,7 @@ const getErrorTheme = (theme: GlobalTheme) => {
     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,
@@ -14,7 +14,8 @@ const getErrorTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    image: theme.sizes['19xlarge'],
+    image: theme.sizes['6xlarge'],
+    icon: theme.sizes['6xlarge'],
   };
 
   const colors = {

package/src/theme/components/success.ts

@@ -6,15 +6,17 @@ const getSuccessTheme = (theme: GlobalTheme) => {
     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,
+      secondaryCTAMarginTop: theme.space.medium,
     },
   };
 
   const sizes = {
     image: theme.sizes['19xlarge'],
+    icon: theme.sizes['6xlarge'],
   };
 
   const colors = {

package/src/theme/components/timePicker.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getTimePickerTheme = (theme: GlobalTheme) => {
   const sizes = {

package/src/theme/getTheme.ts

@@ -4,13 +4,16 @@ import getAccordionTheme from './components/accordion';
 import getAlertTheme from './components/alert';
 import getAttachmentTheme from './components/attachment';
 import getAvatarTheme from './components/avatar';
-import getBadgeTheme, { BadgeThemeType } from './components/badge';
+import type { BadgeThemeType } from './components/badge';
+import getBadgeTheme from './components/badge';
 import getBottomNavigationTheme from './components/bottomNavigation';
 import getBottomSheetTheme from './components/bottomSheet';
-import getButtonTheme, { ButtonThemeType } from './components/button';
+import type { ButtonThemeType } from './components/button';
+import getButtonTheme from './components/button';
 import getCalendarTheme from './components/calendar';
 import getCardTheme from './components/card';
-import getCarouselTheme, { CarouselThemeType } from './components/carousel';
+import type { CarouselThemeType } from './components/carousel';
+import getCarouselTheme from './components/carousel';
 import getCardCarouselTheme from './components/cardCarousel';
 import getCheckboxTheme from './components/checkbox';
 import getChipTheme from './components/chip';
@@ -20,14 +23,18 @@ import getContentNavigatorTheme from './components/contentNavigator';
 import getDatePickerTheme from './components/datePicker';
 import getDividerTheme from './components/divider';
 import getDrawerTheme from './components/drawer';
-import getEmptyTheme, { EmptyThemeType } from './components/empty';
-import getErrorTheme, { ErrorThemeType } from './components/error';
-import getFABTheme, { FABThemeType } from './components/fab';
+import type { EmptyThemeType } from './components/empty';
+import getEmptyTheme from './components/empty';
+import type { ErrorThemeType } from './components/error';
+import getErrorTheme from './components/error';
+import type { FABThemeType } from './components/fab';
+import getFABTheme from './components/fab';
 import getIconTheme from './components/icon';
 import getImageTheme from './components/image';
 import getListTheme from './components/list';
 import getPageControlTheme from './components/pageControl';
-import getPinInputTheme, { PinInputThemeType } from './components/pinInput';
+import type { PinInputThemeType } from './components/pinInput';
+import getPinInputTheme from './components/pinInput';
 import getProgressTheme from './components/progress';
 import getRadioTheme from './components/radio';
 import getRateTheme from './components/rate';
@@ -38,11 +45,13 @@ import getSelectTheme from './components/select';
 import getSkeletonTheme from './components/skeleton';
 import getSliderTheme from './components/slider';
 import getSpinnerTheme from './components/spinner';
-import getSuccessTheme, { SuccessThemeType } from './components/success';
+import type { SuccessThemeType } from './components/success';
+import getSuccessTheme from './components/success';
 import getSwipeableTheme from './components/swipeable';
 import getSwitchTheme from './components/switch';
 import getTabsTheme from './components/tabs';
-import getTagTheme, { TagThemeType } from './components/tag';
+import type { TagThemeType } from './components/tag';
+import getTagTheme from './components/tag';
 import getTextInputTheme from './components/textInput';
 import getTimePickerTheme from './components/timePicker';
 import getToastTheme from './components/toast';
@@ -54,7 +63,7 @@ import getSearchTheme from './components/search';
 import getMapPinTheme from './components/mapPin';
 import getFloatingIslandTheme from './components/floatingIsland';
 import getAppCueTheme from './components/appCue';
-import { ThemeMode } from './global/colors/types';
+import type { ThemeMode } from './global/colors/types';
 import getFilterTriggerTheme from './components/filterTrigger';
 import getSegmentedControlTheme from './components/segmentedControl';
 

package/src/theme/global/colors/ehJobs.ts

@@ -1,5 +1,5 @@
 import swagLightSystemPalette from './swagSystemPalette';
-import { SystemPalette } from './types';
+import type { SystemPalette } from './types';
 
 const ehJobsSystemPalette: SystemPalette = {
   ...swagLightSystemPalette,

package/src/theme/global/colors/ehWorkDark.ts

@@ -1,4 +1,4 @@
-import { SystemPalette } from './types';
+import type { SystemPalette } from './types';
 
 const ehWorkDarkSystemPalette: SystemPalette = {
   black: '#000000',

package/src/theme/global/colors/swagLight.ts

@@ -1,5 +1,5 @@
 import ehWorkSystemPalette from './ehWork';
-import { SystemPalette } from './types';
+import type { SystemPalette } from './types';
 
 /**
  * @deprecated This palette is deprecated and will be removed in the next major release.

package/src/theme/global/colors/swagLightJobs.ts

@@ -1,5 +1,5 @@
 import ehJobsSystemPalette from './ehJobs';
-import { SystemPalette } from './types';
+import type { SystemPalette } from './types';
 
 /**
  * @deprecated This palette is deprecated and will be removed in the next major release.

package/src/theme/global/colors/swagSystemPalette.ts

@@ -1,5 +1,5 @@
 import ehWorkSystemPalette from './ehWork';
-import { SystemPalette } from './types';
+import type { SystemPalette } from './types';
 
 export const swagSystemPalette: SystemPalette = {
   ...ehWorkSystemPalette,

package/src/theme/global/shadows/index.ts

@@ -2,7 +2,7 @@ import ehWorkShadowPalette from './ehWork';
 import ehJobsShadowPalette from './ehJobs';
 import ehWorkDarkShadowPalette from './ehWorkDark';
 
-import { SystemPalette } from '../colors/types';
+import type { SystemPalette } from '../colors/types';
 
 const getShadows = (palette: SystemPalette) => {
   switch (palette.name) {

package/src/types.ts

@@ -8,31 +8,35 @@ import type {
   RichTextEditorProps,
 } from './components/RichTextEditor';
 import type { Theme } from './theme';
-import {
+import type {
   ListRenderOptionInfo,
   SectionListRenderOptionInfo,
   SelectOptionType,
 } from './components/Select/types';
-import { SwipeableProps } from './components/Swipeable';
-import { TextProps } from './components/Typography/Text';
-import { CardCarouselHandles } from './components/Carousel/CardCarousel';
-import { FABHandles } from './components/FAB/FAB';
-import {
+import type { SwipeableProps } from './components/Swipeable';
+import type { TextProps } from './components/Typography/Text';
+import type { CardCarouselHandles } from './components/Carousel/CardCarousel';
+import type { FABHandles } from './components/FAB/FAB';
+import type {
   ActionGroupHandles,
   ActionGroupProps,
 } from './components/FAB/ActionGroup';
 import type { ActionItemProps } from './components/FAB/ActionGroup/ActionItem';
 import type { SliderRangeValue } from './components/Slider/RangeSlider';
 import type { CalendarDateRange } from './components/Calendar/CalendarRange';
-import { LocaleCode, LocaleValues, DateTimeFormats } from './locales/types';
+import type {
+  LocaleCode,
+  LocaleValues,
+  DateTimeFormats,
+} from './locales/types';
 import type { ColumnChartProps } from './components/Chart/ColumnChart';
-import { LineChartProps } from './components/Chart/Line';
+import type { LineChartProps } from './components/Chart/Line';
 import type { Scale, SystemPalette } from './theme/global';
 import type {
   BrandSystemPalette,
   GlobalSystemPalette,
 } from './theme/global/colors/types';
-import { ToolbarItemProps } from './components/Toolbar/ToolbarItem';
+import type { ToolbarItemProps } from './components/Toolbar/ToolbarItem';
 import type { CheckboxProps } from './components/Checkbox';
 import type { SwitchOptionType } from './components/Switch/SelectorSwitch';
 import type { BoxProps } from './components/Box';
@@ -41,16 +45,19 @@ import type { ToolbarButtonName } from './components/RichTextEditor/types';
 import type { ListItemProps } from './components/List/ListItem';
 import type { IconButtonProps } from './components/Button/IconButton';
 import type { BadgeProps } from './components/Badge';
-import { ToastProps } from './components/Toast/types';
-import { Space } from './theme/global/space';
-import { CaptionProps } from './components/Typography/Caption';
-import { Radii } from './theme/global/borders';
-import { TitleProps } from './components/Typography/Title';
-import { CarouselData, CarouselImageProps } from './components/Carousel/types';
-import { PinInputHandler } from './components/PinInput';
-import { ThemeScale } from './components/Box/types';
-import { TimePickerProps } from './components/TimePicker/types';
-import { DatePickerProps } from './components/DatePicker/types';
+import type { ToastProps } from './components/Toast/types';
+import type { Space } from './theme/global/space';
+import type { CaptionProps } from './components/Typography/Caption';
+import type { Radii } from './theme/global/borders';
+import type { TitleProps } from './components/Typography/Title';
+import type {
+  CarouselData,
+  CarouselImageProps,
+} from './components/Carousel/types';
+import type { PinInputHandler } from './components/PinInput';
+import type { ThemeScale } from './components/Box/types';
+import type { TimePickerProps } from './components/TimePicker/types';
+import type { DatePickerProps } from './components/DatePicker/types';
 import type { SegmentedControlItemConfig } from './components/SegmentedControl/types';
 
 export type {