@hero-design/rn 7.18.1 → 7.20.0

package/types/components/Toast/ToastContainer.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ToastContainerProps } from './types';
-import { ToastControllerContextType } from './ToastContext';
+import type { ToastContainerProps } from './types';
+import type { ToastControllerContextType } from './ToastContext';
 declare const ToastContainer: React.ForwardRefExoticComponent<ToastContainerProps & React.RefAttributes<ToastControllerContextType>>;
 export default ToastContainer;

package/types/components/Toast/ToastContext.d.ts

@@ -1,4 +1,4 @@
-import { ToastContainerProps, ToastProps } from './types';
+import type { ToastContainerProps, ToastProps } from './types';
 export declare type ToastControllerContextType = {
     show: (props: Omit<ToastProps, 'position'>) => string;
     hide: (id: string) => void;

package/types/components/Toast/ToastProvider.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { ToastContainerProps } from './types';
+import type { ReactNode } from 'react';
+import type { ToastContainerProps } from './types';
 declare type ToastProviderProps = {
     /**
      * Content to be wrapped.

package/types/components/Toast/types.d.ts

@@ -1,6 +1,7 @@
-import { ReactElement } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import { IconName } from '../Icon';
+import type { ReactElement } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { IconName } from '../Icon';
+export declare type IntentType = 'success' | 'info' | 'warning' | 'error' | 'notification' | 'snackbar';
 export interface ToastProps {
     /**
      * Toast content.
@@ -16,7 +17,7 @@ export interface ToastProps {
     /**
      * Visual intent color to apply to alert.
      */
-    intent?: 'success' | 'info' | 'warning' | 'error';
+    intent?: 'success' | 'info' | 'warning' | 'error' | 'notification' | 'snackbar';
     /**
      * Toast variants
      */

package/types/components/Toolbar/StyledToolbar.d.ts

@@ -1,22 +1,23 @@
-import { TouchableOpacity, View, ViewProps } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
+import type { ViewProps } from 'react-native';
 declare const ToolbarWrapper: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const ToolbarGroupWrapper: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     align: 'left' | 'center' | 'right';
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const ToolbarItemWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
+    ref?: import("react").Ref<TouchableOpacity>;
 }>;
 export { ToolbarWrapper, ToolbarGroupWrapper, ToolbarItemWrapper };

package/types/components/Toolbar/ToolbarGroup.d.ts

@@ -1,4 +1,4 @@
-import { ToolbarItemProps } from './ToolbarItem';
+import type { ToolbarItemProps } from './ToolbarItem';
 export interface ToolbarGroupProps {
     /**
      * List of action items in the toolbar group.

package/types/components/Toolbar/ToolbarItem.d.ts

@@ -1,4 +1,4 @@
-import { IconName } from '../Icon';
+import type { IconName } from '../Icon';
 export interface ToolbarItemProps {
     /**
      * Visual intent of the toolbar item.

package/types/components/Toolbar/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 export interface ToolbarProps {
     /**
      * Toolbar's content.

package/types/components/Typography/Text/StyledText.d.ts

@@ -1,12 +1,12 @@
 import { Text } from 'react-native';
 declare const StyledText: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
-    themeFontSize: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxxxlarge';
+    themeFontSize: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxxlarge';
     themeFontWeight: 'light' | 'regular' | 'semi-bold';
     themeIntent: 'body' | 'subdued' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted';
 }, {}, {
-    ref?: import("react").Ref<Text> | undefined;
+    ref?: import("react").Ref<Text>;
 }>;
 export { StyledText };

package/types/components/Typography/Text/index.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { TextProps as NativeTextProps, StyleProp, TextStyle } from 'react-native';
+import type { ReactNode } from 'react';
+import type { TextProps as NativeTextProps, StyleProp, TextStyle } from 'react-native';
 export interface TextProps extends NativeTextProps {
     /**
      * Text content.
@@ -8,7 +8,7 @@ export interface TextProps extends NativeTextProps {
     /**
      * Size of the text.
      */
-    fontSize?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxxxlarge';
+    fontSize?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxxlarge';
     /**
      * Font weight of the text.
      */

package/types/index.d.ts

@@ -6,6 +6,7 @@ import Avatar from './components/Avatar';
 import Badge from './components/Badge';
 import BottomNavigation from './components/BottomNavigation';
 import BottomSheet from './components/BottomSheet';
+import Box from './components/Box';
 import Button from './components/Button';
 import Calendar from './components/Calendar';
 import Card from './components/Card';
@@ -34,5 +35,5 @@ import Toast from './components/Toast';
 import Toolbar from './components/Toolbar';
 import Typography from './components/Typography';
 import RichTextEditor from './components/RichTextEditor';
-export { theme, getTheme, useTheme, scale, ThemeProvider, swagSystemPalette, workSystemPalette, Accordion, Alert, Avatar, Badge, BottomNavigation, BottomSheet, Button, Calendar, Card, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, FAB, Icon, List, PinInput, Progress, Spinner, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RichTextEditor, };
+export { theme, getTheme, useTheme, scale, ThemeProvider, swagSystemPalette, workSystemPalette, Accordion, Alert, Avatar, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, FAB, Icon, List, PinInput, Progress, Spinner, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RichTextEditor, };
 export * from './types';

package/types/testHelpers/renderWithTheme.d.ts

@@ -1,3 +1,3 @@
-import { RenderOptions } from '@testing-library/react-native';
-declare const renderWithTheme: (ui: JSX.Element, options?: RenderOptions | undefined) => import("@testing-library/react-native").RenderAPI;
+import type { RenderOptions } from '@testing-library/react-native';
+declare const renderWithTheme: (ui: JSX.Element, options?: RenderOptions) => import("@testing-library/react-native").RenderAPI;
 export default renderWithTheme;

package/types/theme/ThemeProvider.d.ts

@@ -1,4 +1,4 @@
-import { Theme } from './getTheme';
+import type { Theme } from './getTheme';
 export interface ThemeProviderProps {
     theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
     children: React.ReactNode;

package/types/theme/ThemeSwitcher.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 declare type ThemeName = 'swag' | 'work';
 declare const ThemeSwitcher: ({ name, children, }: {
-    name?: ThemeName | undefined;
+    name?: ThemeName;
     children: React.ReactNode;
 }) => JSX.Element;
 export default ThemeSwitcher;

package/types/theme/components/accordion.d.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getAccordionTheme: (theme: GlobalTheme) => {
     colors: {
         background: string;

package/types/theme/components/alert.d.ts

@@ -1,10 +1,11 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getAlertTheme: (theme: GlobalTheme) => {
     colors: {
         success: string;
         warning: string;
         error: string;
         info: string;
+        notification: string;
         divider: string;
     };
     radii: {
@@ -14,7 +15,10 @@ declare const getAlertTheme: (theme: GlobalTheme) => {
         height: number;
     };
     space: {
-        padding: number;
+        contentPaddingHorizontal: number;
+        textPaddingHorizontal: number;
+        iconLeftPadding: number;
+        ctaPadding: number;
     };
     borderWidths: {
         base: number;

package/types/theme/components/avatar.d.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getAvatarTheme: (theme: GlobalTheme) => {
     colors: {
         primary: string;
@@ -15,6 +15,7 @@ declare const getAvatarTheme: (theme: GlobalTheme) => {
         xxlarge: number;
         xxxlarge: number;
         xxxxlarge: number;
+        xxxxxlarge: number;
     };
     radii: {
         rounded: number;
@@ -30,6 +31,7 @@ declare const getAvatarTheme: (theme: GlobalTheme) => {
         xxlarge: number;
         xxxlarge: number;
         xxxxlarge: number;
+        xxxxxlarge: number;
     };
 };
 export default getAvatarTheme;

package/types/theme/components/badge.d.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getBadgeTheme: (theme: GlobalTheme) => {
     colors: {
         danger: string;

package/types/theme/components/bottomNavigation.d.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getBottomNavigationTheme: (theme: GlobalTheme) => {
     colors: {
         shadow: string;

package/types/theme/components/bottomSheet.d.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getBottomSheetTheme: (theme: GlobalTheme) => {
     colors: {
         shadow: string;

package/types/theme/components/button.d.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getButtonTheme: (theme: GlobalTheme) => {
     borderWidth: {
         default: number;

package/types/theme/components/calendar.d.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getCalendarTheme: (theme: GlobalTheme) => {
     radii: {
         default: number;

package/types/theme/components/card.d.ts

@@ -1,14 +1,13 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getCardTheme: (theme: GlobalTheme) => {
     colors: {
         dataCardIndicator: string;
-        indicator: {
-            archived: string;
-            info: string;
-            success: string;
-            warning: string;
-            danger: string;
-        };
+        primary: string;
+        info: string;
+        success: string;
+        warning: string;
+        danger: string;
+        archived: string;
     };
     sizes: {
         indicatorWidth: number;

package/types/theme/components/checkbox.d.ts

@@ -1,21 +1,24 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getCheckboxTheme: (theme: GlobalTheme) => {
     colors: {
-        borderColor: string;
-        text: string;
-        disabled: string;
+        default: string;
+        disabledBorder: string;
     };
     space: {
         iconTop: number;
+        wrapperPadding: number;
+        iconDescriptionPadding: number;
     };
     sizes: {
-        base: number;
+        icon: number;
     };
     radii: {
-        base: number;
+        wrapper: number;
+        icon: number;
     };
     borderWidths: {
-        default: number;
+        wrapper: number;
+        icon: number;
     };
 };
 export default getCheckboxTheme;

package/types/theme/components/contentNavigator.d.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getContentNavigatorTheme: (theme: GlobalTheme) => {
     space: {
         valueHorizontalPadding: number;

package/types/theme/components/divider.d.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getDividerTheme: (theme: GlobalTheme) => {
     colors: {
         default: string;

package/types/theme/components/drawer.d.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getDrawerTheme: (theme: GlobalTheme) => {
     colors: {
         shadow: string;

package/types/theme/components/empty.d.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getEmptyTheme: (theme: GlobalTheme) => {
     fontSizes: {
         title: number;

package/types/theme/components/fab.d.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getFABTheme: (theme: GlobalTheme) => {
     radii: {
         actionItem: number;

package/types/theme/components/icon.d.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getIconTheme: (theme: GlobalTheme) => {
     colors: {
         text: string;

package/types/theme/components/list.d.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getListTheme: (theme: GlobalTheme) => {
     colors: {
         checkedListItemContainerBackground: string;
@@ -23,12 +23,6 @@ declare const getListTheme: (theme: GlobalTheme) => {
         cardShadow: number;
         leadingStatus: number;
     };
-    offsets: {
-        cardShadow: {
-            width: number;
-            height: number;
-        };
-    };
     widths: {
         leadingStatus: number;
     };
@@ -37,5 +31,12 @@ declare const getListTheme: (theme: GlobalTheme) => {
         enabled: number;
         cardShadow: number;
     };
+    shadows: {
+        cardOffset: {
+            width: number;
+            height: number;
+        };
+        cardElevation: number;
+    };
 };
 export default getListTheme;

package/types/theme/components/pinInput.d.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getPinInputTheme: (theme: GlobalTheme) => {
     borderWidths: {
         default: number;

package/types/theme/components/progress.d.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getProgressTheme: (theme: GlobalTheme) => {
     colors: {
         primary: string;

package/types/theme/components/radio.d.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getRadioTheme: (theme: GlobalTheme) => {
     sizes: {
         circle: number;
@@ -8,18 +8,11 @@ declare const getRadioTheme: (theme: GlobalTheme) => {
         circle: number;
     };
     space: {
-        wrapperPadding: number;
         circleLeftMargin: number;
         groupTopMargin: number;
     };
     colors: {
         circle: string;
-        checkedCircle: string;
-        wrapper: string;
-        checkedWrapper: string;
-    };
-    radii: {
-        wrapper: number;
     };
 };
 export default getRadioTheme;

package/types/theme/components/richTextEditor.d.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getRichTextEditorTheme: (theme: GlobalTheme) => {
     colors: {
         toolbarBorderColor: string;

package/types/theme/components/sectionHeading.d.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getSectionHeadingTheme: (theme: GlobalTheme) => {
     colors: {
         background: string;

package/types/theme/components/select.d.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getSelectTheme: (theme: GlobalTheme) => {
     space: {
         minimumOptionListHeight: number;

package/types/theme/components/spinner.d.ts

@@ -1,12 +1,24 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getSpinnerTheme: (theme: GlobalTheme) => {
-    color: {
-        default: string;
+    colors: {
+        dot1: string;
+        dot2: string;
+        dot3: string;
+        dot4: string;
     };
     space: {
-        spinnerDot: number;
-        spinnerDotPadding: number;
-        spinnerTextPaddingTop: number;
+        spinnerDot: {
+            small: number;
+            medium: number;
+        };
+        spinnerDotPadding: {
+            small: number;
+            medium: number;
+        };
+        spinnerTextPaddingTop: {
+            small: number;
+            medium: number;
+        };
     };
     radii: {
         default: number;

package/types/theme/components/switch.d.ts

@@ -1,9 +1,13 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getSwitchTheme: (theme: GlobalTheme) => {
     colors: {
+        backgroundColors: {
+            checked: string;
+            unchecked: string;
+            'disabled-checked': string;
+            'disabled-unchecked': string;
+        };
         thumb: string;
-        active: string;
-        inactive: string;
     };
     thumbSizes: {
         small: number;
@@ -25,8 +29,5 @@ declare const getSwitchTheme: (theme: GlobalTheme) => {
     radii: {
         rounded: number;
     };
-    borderWidths: {
-        default: number;
-    };
 };
 export default getSwitchTheme;

package/types/theme/components/tabs.d.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getTabsTheme: (theme: GlobalTheme) => {
     borderWidths: {
         headerBottom: number;
@@ -14,6 +14,7 @@ declare const getTabsTheme: (theme: GlobalTheme) => {
         flatListHorizontalPadding: number;
         itemHorizontalPadding: number;
         itemVerticalPadding: number;
+        itemMargin: number;
         outlineHorizontalPadding: number;
         outlineVerticalPadding: number;
     };

package/types/theme/components/tag.d.ts

@@ -1,13 +1,13 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getTagTheme: (theme: GlobalTheme) => {
     borderWidths: {
         default: number;
     };
     colors: {
         default: string;
-        defaultBackground: undefined;
+        defaultBackground: any;
         primary: string;
-        primaryBackground: string;
+        primaryBackground: any;
         info: string;
         infoBackground: string;
         success: string;

package/types/theme/components/textInput.d.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getTextInputTheme: (theme: GlobalTheme) => {
     colors: {
         labelBackground: string;

package/types/theme/components/toast.d.ts

@@ -1,11 +1,14 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getToastTheme: (theme: GlobalTheme) => {
     colors: {
         success: string;
         warning: string;
         error: string;
         info: string;
+        notification: string;
+        snackbar: string;
         divider: string;
+        shadow: string;
     };
     radii: {
         default: number;
@@ -14,11 +17,24 @@ declare const getToastTheme: (theme: GlobalTheme) => {
         height: number;
     };
     space: {
-        mediumPadding: number;
-        largePadding: number;
+        wrapperVerticalPadding: number;
+        wrapperHorizontalPadding: number;
+        contentVerticalPadding: number;
+        textHorizontalPadding: number;
+        iconLeftPadding: number;
+        ctaPadding: number;
     };
     borderWidths: {
         base: number;
     };
+    shadows: {
+        offset: {
+            width: number;
+            height: number;
+        };
+        opacity: number;
+        radius: number;
+        elevation: number;
+    };
 };
 export default getToastTheme;

package/types/theme/components/toolbar.d.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getToolbarTheme: (theme: GlobalTheme) => {
     colors: {
         background: string;

package/types/theme/components/typography.d.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 declare const getTypographyTheme: (theme: GlobalTheme) => {
     colors: {
         body: string;
@@ -20,6 +20,7 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
         medium: number;
         large: number;
         xlarge: number;
+        xxxlarge: number;
         xxxxxlarge: number;
     };
     lineHeights: {
@@ -27,6 +28,7 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
         medium: number;
         large: number;
         xlarge: number;
+        xxxlarge: number;
         xxxxxlarge: number;
     };
 };