@hero-design/rn 7.1.3-alpha4 → 7.1.3-alpha7

package/src/theme/global/typography.ts

@@ -3,9 +3,9 @@ import { scale } from '../../utils/scale';
 const BASE = 16;
 
 const fonts = {
-  light: 'Be Vietnam Pro Light',
-  regular: 'Be Vietnam Pro Regular',
-  semiBold: 'Be Vietnam Pro SemiBold',
+  light: 'BeVietnamPro-Light',
+  regular: 'BeVietnamPro-Regular',
+  semiBold: 'BeVietnamPro-SemiBold',
 };
 
 const fontSizes = {

package/src/theme/index.ts

@@ -4,6 +4,7 @@ import getBadgeTheme from './components/badge';
 import getBottomNavigationTheme from './components/bottomNavigation';
 import getCardTheme from './components/card';
 import getDividerTheme from './components/divider';
+import getTabsTheme from './components/tabs';
 import getIconTheme from './components/icon';
 import getTypographyTheme from './components/typography';
 import getFABTheme from './components/fab';
@@ -15,6 +16,7 @@ type Theme = GlobalTheme & {
     card: ReturnType<typeof getCardTheme>;
     divider: ReturnType<typeof getDividerTheme>;
     icon: ReturnType<typeof getIconTheme>;
+    tabs: ReturnType<typeof getTabsTheme>;
     typography: ReturnType<typeof getTypographyTheme>;
     fab: ReturnType<typeof getFABTheme>;
   };
@@ -28,6 +30,7 @@ const getTheme = (theme: GlobalTheme = globalTheme): Theme => ({
     card: getCardTheme(theme),
     divider: getDividerTheme(theme),
     icon: getIconTheme(theme),
+    tabs: getTabsTheme(theme),
     typography: getTypographyTheme(theme),
     fab: getFABTheme(theme),
   },

package/src/types.ts

@@ -0,0 +1,7 @@
+import { BottomNavigationTabType } from './components/BottomNavigation';
+import { IconName } from './components/Icon';
+import { TabType } from './components/Tabs';
+
+import { Theme } from './theme';
+
+export type { BottomNavigationTabType, IconName, TabType, Theme };

package/src/utils/__tests__/scale.spec.ts

@@ -1,5 +1,5 @@
 import { Dimensions } from 'react-native';
-import { scale, BASE_WIDTH } from '../scale';
+import { scale } from '../scale';
 
 jest.unmock('../scale'); // Unmock global mocking of scale for other tests
 
@@ -11,7 +11,7 @@ describe('scale', () => {
 
     const size = 10;
 
-    expect(scale(size)).toBe((400 / BASE_WIDTH) * size);
+    expect(scale(size)).toBe(10.128205128205128);
   });
 
   it('returns scale based on height when width > height', () => {
@@ -21,6 +21,6 @@ describe('scale', () => {
 
     const size = 10;
 
-    expect(scale(size)).toBe((350 / BASE_WIDTH) * size);
+    expect(scale(size)).toBe(9.487179487179487);
   });
 });

package/src/utils/scale.ts

@@ -1,73 +1,13 @@
-import { PixelRatio, Dimensions } from 'react-native';
+import { Dimensions } from 'react-native';
 
 export const BASE_WIDTH = 390; // Based on iPhone 13's viewport size
-const pixelRatio = PixelRatio.get();
-const deviceHeight = Dimensions.get('window').height;
-const deviceWidth = Dimensions.get('window').width;
-export const scale = (size: number) => {
-  if (pixelRatio >= 2 && pixelRatio < 3) {
-    // iphone 5s and older Androids
-    if (deviceWidth < BASE_WIDTH) {
-      return size * 0.95;
-    }
 
-    // iphone 5
-    if (deviceHeight < 667) {
-      return size;
-      // iphone 6-6s
-    }
+export const horizontalScale = (size: number) => {
+  const { width, height } = Dimensions.get('window');
+  const shortDimension = width < height ? width : height;
 
-    if (deviceHeight >= 667 && deviceHeight <= 735) {
-      return size * 1.15;
-    }
-    // older phablets
-    return size * 1.25;
-  }
-
-  if (pixelRatio >= 3 && pixelRatio < 3.5) {
-    // catch Android font scaling on small machines
-    // where pixel ratio / font scale ratio => 3:3
-    if (deviceWidth <= BASE_WIDTH) {
-      return size;
-    }
-
-    // Catch other weird android width sizings
-    if (deviceHeight < 667) {
-      return size * 1.15;
-      // catch in-between size Androids and scale font up
-      // a tad but not too much
-    }
-
-    if (deviceHeight >= 667 && deviceHeight <= 735) {
-      return size * 1.2;
-    }
-
-    // catch larger devices
-    // ie iphone 6s plus / 7 plus / mi note 等等
-    return size * 1.27;
-  }
-
-  if (pixelRatio >= 3.5) {
-    // catch Android font scaling on small machines
-    // where pixel ratio / font scale ratio => 3:3
-    if (deviceWidth <= BASE_WIDTH) {
-      return size;
-      // Catch other smaller android height sizings
-    }
-
-    if (deviceHeight < 667) {
-      return size * 1.2;
-      // catch in-between size Androids and scale font up
-      // a tad but not too much
-    }
-
-    if (deviceHeight >= 667 && deviceHeight <= 735) {
-      return size * 1.25;
-    }
-
-    // catch larger phablet devices
-    return size * 1.4;
-  }
-
-  return size;
+  return (shortDimension / BASE_WIDTH) * size;
 };
+
+export const scale = (size: number, factor: number = 0.5) =>
+  size + (horizontalScale(size) - size) * factor;

package/testUtils/setup.ts

@@ -2,6 +2,17 @@ jest.mock('react-native-vector-icons', () => ({
   createIconSetFromIcoMoon: jest.fn(() => 'HeroIcon'),
 }));
 
+jest.mock('react-native', () => {
+  const RN = jest.requireActual('react-native');
+
+  RN.Animated.timing = () => ({
+    start: () => jest.fn(),
+    stop: () => jest.fn(),
+  });
+
+  return RN;
+});
+
 jest.mock('../src/utils/scale', () => ({
   scale: jest.fn(size => size),
 }));

package/tsconfig.json

@@ -12,11 +12,7 @@
     "noImplicitThis": true,
     "noUnusedLocals": true,
     "skipLibCheck": true,
-    "types": ["jest", "styled-components", "styled-components-react-native"],
-    "baseUrl": ".",
-    "paths": {
-      "styled-components-native": ["./src/styled-components.ts"]
-    }
+    "types": ["jest"],
   },
   "include": ["src", "playground"],
   "exclude": ["node_modules"],

package/types/playground/components/BottomNavigation.d.ts

@@ -1,2 +1,2 @@
-declare const MyComponent: () => JSX.Element;
-export default MyComponent;
+declare const BottomNavigationPlayground: () => JSX.Element;
+export default BottomNavigationPlayground;

package/types/playground/components/Button.d.ts

@@ -0,0 +1,2 @@
+declare const ButtonPlayground: () => JSX.Element;
+export default ButtonPlayground;

package/types/playground/components/Tabs.d.ts

@@ -0,0 +1,2 @@
+declare const TabsPlayground: () => JSX.Element;
+export default TabsPlayground;

package/types/src/components/Badge/StyledBadge.d.ts

@@ -1,9 +1,20 @@
-import { Text, View } from 'react-native';
+/// <reference types="react" />
+import { View, Text } from 'react-native';
 declare type ThemeIntent = 'success' | 'warning' | 'danger' | 'info';
-declare const StyledView: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {
+declare const StyledView: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
     themeIntent: ThemeIntent;
-}, never>;
-declare const StyledText: import("styled-components").StyledComponent<typeof Text, import("../../theme").Theme, {
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledText: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
     themeIntent: ThemeIntent;
-}, never>;
+}, {}, {
+    ref?: import("react").Ref<Text> | undefined;
+}>;
 export { StyledView, StyledText };

package/types/src/components/Badge/index.d.ts

@@ -10,7 +10,7 @@ interface BadgeProps extends ViewProps {
      */
     intent?: 'success' | 'warning' | 'danger' | 'info';
     /**
-     * Addditional style.
+     * Additional style.
      */
     style?: StyleProp<ViewStyle>;
     /**

package/types/src/components/BottomNavigation/StyledBottomNavigation.d.ts

@@ -1,17 +1,52 @@
+/// <reference types="react" />
 import { View } from 'react-native';
-declare const BottomNavigationTab: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {
+declare const BottomNavigationTab: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
     themeVisibility?: boolean | undefined;
-}, never>;
-declare const BottomNavigationContainer: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {}, never>;
-declare const ContentWrapper: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {}, never>;
-declare const BottomBarWrapper: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const BottomNavigationContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const ContentWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const BottomBarWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
     themeInsets: {
         top: number;
         right: number;
         bottom: number;
         left: number;
     };
-}, never>;
-declare const BottomBar: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {}, never>;
-declare const BottomBarItem: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {}, never>;
-export { BottomBar, BottomBarItem, BottomNavigationTab, BottomNavigationContainer, BottomBarWrapper, ContentWrapper, };
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const BottomBar: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const BottomBarItem: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledBottomBarText: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+export { BottomBar, BottomBarItem, BottomNavigationTab, BottomNavigationContainer, BottomBarWrapper, ContentWrapper, StyledBottomBarText, };

package/types/src/components/BottomNavigation/index.d.ts

@@ -1,19 +1,18 @@
-import { ComponentProps, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { StyleProp, ViewStyle, ViewProps } from 'react-native';
-import Icon from '../Icon';
-declare type IconType = ComponentProps<typeof Icon>['icon'];
-export declare type Tab<V> = {
-    key: V;
+import { IconName } from '../Icon';
+export declare type BottomNavigationTabType = {
+    key: string;
     title?: string;
-    icon: IconType;
+    icon: IconName;
     component: ReactNode;
     testID?: string;
 };
-interface BottomNavigationType<V extends string | number, T extends Tab<V>> extends ViewProps {
+interface BottomNavigationProps extends ViewProps {
     /**
      * Callback which is called on tab change, receiving id of upcoming active Tab.
      */
-    onChange: (key: V) => void;
+    onChange: (key: string) => void;
     /**
      * Whether inactive tabs should be removed and unmounted in React.
      * Defaults to `false`.
@@ -22,13 +21,19 @@ interface BottomNavigationType<V extends string | number, T extends Tab<V>> exte
     /**
      * Current selected tab key.
      */
-    selectedTabKey: V;
+    selectedTabKey: string;
     /**
-     * List of Tab to be rendered. Each Tab must have an unique id.
+     * List of Tabs to be rendered. Each Tab must have an unique key.
      */
-    tabs: T[];
+    tabs: {
+        key: string;
+        title?: string;
+        icon: IconName;
+        component: ReactNode;
+        testID?: string;
+    }[];
     /**
-     * Addditional style.
+     * Additional style.
      */
     style?: StyleProp<ViewStyle>;
     /**
@@ -36,5 +41,5 @@ interface BottomNavigationType<V extends string | number, T extends Tab<V>> exte
      */
     testID?: string;
 }
-declare const BottomNavigation: <V extends string | number, T extends Tab<V>>({ onChange, renderActiveTabOnly, selectedTabKey, tabs, ...nativeProps }: BottomNavigationType<V, T>) => JSX.Element;
+declare const BottomNavigation: ({ onChange, renderActiveTabOnly, selectedTabKey, tabs, ...nativeProps }: BottomNavigationProps) => JSX.Element;
 export default BottomNavigation;

package/types/src/components/Button/IconButton.d.ts

@@ -0,0 +1,34 @@
+import { StyleProp, ViewStyle, TouchableOpacityProps } from 'react-native';
+import { IconProps, IconName } from '../Icon';
+export interface IconButtonProps {
+    /**
+     * Set how far you can touch from the button.
+     */
+    hitSlop?: TouchableOpacityProps['hitSlop'];
+    /**
+     * Name of the Icon.
+     */
+    icon: IconName;
+    /**
+     * Intent of the Icon.
+     */
+    intent?: IconProps['intent'];
+    /**
+     * Set the handler to handle press event.
+     */
+    onPress: () => void;
+    /**
+     * Size of the Icon.
+     */
+    size?: IconProps['size'];
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of component.
+     */
+    testID?: string;
+}
+declare const IconButton: ({ hitSlop, onPress, icon, testID, style, size, intent, }: IconButtonProps) => JSX.Element;
+export default IconButton;

package/types/src/components/Button/index.d.ts

@@ -0,0 +1,4 @@
+declare const Button: {
+    readonly Icon: ({ hitSlop, onPress, icon, testID, style, size, intent, }: import("./IconButton").IconButtonProps) => JSX.Element;
+};
+export default Button;

package/types/src/components/Card/StyledCard.d.ts

@@ -1,3 +1,9 @@
+/// <reference types="react" />
 import { View } from 'react-native';
-declare const StyledCard: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {}, never>;
+declare const StyledCard: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
 export { StyledCard };

package/types/src/components/Divider/StyledDivider.d.ts

@@ -1,7 +1,13 @@
+/// <reference types="react" />
 import { View } from 'react-native';
 declare type MarginSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-declare const StyledDivider: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {
+declare const StyledDivider: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
     themeMarginHorizontal?: MarginSize | undefined;
     themeMarginVertical?: MarginSize | undefined;
-}, never>;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
 export { StyledDivider };

package/types/src/components/Divider/index.d.ts

@@ -9,7 +9,7 @@ interface DividerProps extends ViewProps {
      */
     marginVertical?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
     /**
-     * Addditional style.
+     * Additional style.
      */
     style?: StyleProp<ViewStyle>;
     /**

package/types/src/components/FAB/ActionGroup/StyledActionGroup.d.ts

@@ -1,12 +1,30 @@
+/// <reference types="react" />
 import { Animated, View, ViewProps } from 'react-native';
 import { TextProps } from '../../Typography/Text';
-declare const StyledContainer: import("styled-components").StyledComponent<typeof View, import("../../../theme").Theme, ViewProps, never>;
-declare const StyledActionGroupContainer: import("styled-components").StyledComponent<Animated.AnimatedComponent<typeof View>, import("../../../theme").Theme, Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
+declare const StyledContainer: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledActionGroupContainer: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
     children?: import("react").ReactNode;
-}, never>;
-declare const StyledFAB: import("styled-components").StyledComponent<({ onPress, icon, animated, testID, active, style }: import("../FAB").FABProps) => JSX.Element, import("../../../theme").Theme, {}, never>;
-declare const StyledBackdrop: import("styled-components").StyledComponent<Animated.AnimatedComponent<typeof View>, import("../../../theme").Theme, Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledFAB: import("@emotion/native").StyledComponent<import("../FAB").FABProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledBackdrop: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
     children?: import("react").ReactNode;
-}, never>;
-declare const StyledHeaderText: import("styled-components").StyledComponent<({ children, fontSize, fontWeight, intent, ...nativeProps }: TextProps) => JSX.Element, import("../../../theme").Theme, TextProps, never>;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledHeaderText: import("@emotion/native").StyledComponent<TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
 export { StyledHeaderText, StyledBackdrop, StyledContainer, StyledActionGroupContainer, StyledFAB, };

package/types/src/components/FAB/ActionGroup/StyledActionItem.d.ts

@@ -1,4 +1,13 @@
+/// <reference types="react" />
 import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
-declare const StyledActionItem: import("styled-components").StyledComponent<typeof TouchableOpacity, import("../../../theme").Theme, TouchableOpacityProps, never>;
-declare const StyledActionItemText: import("styled-components").StyledComponent<({ children, fontSize, fontWeight, intent, ...nativeProps }: import("../../Typography/Text").TextProps) => JSX.Element, import("../../../theme").Theme, TouchableOpacityProps, never>;
+declare const StyledActionItem: import("@emotion/native").StyledComponent<TouchableOpacityProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
+}>;
+declare const StyledActionItemText: import("@emotion/native").StyledComponent<import("../../Typography/Text").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & TouchableOpacityProps, {}, {}>;
 export { StyledActionItem, StyledActionItemText };

package/types/src/components/FAB/ActionGroup/index.d.ts

@@ -11,7 +11,7 @@ export interface ActionGroupProps {
      * */
     active?: boolean;
     /**
-     * Addditional style.
+     * Additional style.
      */
     style?: StyleProp<ViewStyle>;
     /**

package/types/src/components/FAB/FAB.d.ts

@@ -1,13 +1,13 @@
 import { StyleProp, ViewStyle } from 'react-native';
-import { IconProps } from '../Icon';
+import { IconName } from '../Icon';
 export interface FABProps {
     /**
      * Name of the Icon.
      */
-    icon: IconProps['icon'];
+    icon: IconName;
     /**
      * This function is called on pressing the button.
-     * */
+     */
     onPress?: () => void;
     /**
      * Specify if the button is animated.
@@ -18,7 +18,7 @@ export interface FABProps {
      */
     active?: boolean;
     /**
-     * Addditional style.
+     * Additional style.
      */
     style?: StyleProp<ViewStyle>;
     /**

package/types/src/components/FAB/StyledFAB.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { TouchableHighlight, TouchableHighlightProps } from 'react-native';
+import { IconProps } from '../Icon';
+declare const StyledFABContainer: import("@emotion/native").StyledComponent<TouchableHighlightProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<TouchableHighlight> | undefined;
+}>;
+declare const StyledFABIcon: import("@emotion/native").StyledComponent<IconProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+export { StyledFABContainer, StyledFABIcon };

package/types/src/components/Icon/HeroIcon/index.d.ts

@@ -1,7 +1,13 @@
+/// <reference types="react" />
 declare type ThemeSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 declare type ThemeIntent = 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning';
-declare const StyledHeroIcon: import("styled-components").StyledComponent<typeof import("react-native-vector-icons/Icon").Icon, import("../../../theme").Theme, {
+declare const StyledHeroIcon: import("@emotion/native").StyledComponent<import("react-native-vector-icons/Icon").IconProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
     themeSize: ThemeSize;
     themeIntent: ThemeIntent;
-}, never>;
+}, {}, {
+    ref?: import("react").Ref<import("react-native-vector-icons/Icon").Icon> | undefined;
+}>;
 export default StyledHeroIcon;

package/types/src/components/Icon/index.d.ts

@@ -1,6 +1,6 @@
 import { StyleProp, TextStyle } from 'react-native';
 import IconList from './IconList';
-declare type IconName = typeof IconList[number];
+export declare type IconName = typeof IconList[number];
 export interface IconProps {
     /**
      * Name of the Icon.

package/types/src/components/Icon/utils.d.ts

@@ -1,2 +1,2 @@
-declare const isHeroIcon: (x: any) => x is "number" | "menu" | "image" | "switch" | "bold" | "target" | "restart" | "directory" | "document" | "feed" | "list" | "loading" | "sync" | "user" | "send" | "file" | "activate" | "add-person" | "adjustment" | "alignment" | "bank" | "bell" | "billing" | "bookmark" | "box-check" | "box" | "buildings" | "cake" | "calendar-clock" | "calendar" | "carat-down-small" | "carat-down" | "carat-left" | "carat-right" | "carat-up" | "circle-add" | "circle-cancel" | "circle-check" | "circle-down" | "circle-info" | "circle-left" | "circle-ok" | "circle-pencil" | "circle-question" | "circle-remove" | "circle-right" | "circle-up" | "circle-warning" | "clock" | "cloud-download" | "cloud-upload" | "cog" | "coin" | "contacts" | "credit-card" | "diamond" | "direction-arrows" | "dollar-coin-shine" | "double-buildings" | "edit-template" | "envelope" | "expense" | "eye-circle" | "eye-invisible" | "eye" | "face-meh" | "face-sad" | "face-smiley" | "feedbacks" | "file-certified" | "file-clone" | "file-copy" | "file-csv" | "file-dispose" | "file-doc" | "file-excel" | "file-export" | "file-lock" | "file-pdf" | "file-powerpoint" | "file-search" | "file-secured" | "file-sheets" | "file-slide" | "file-verified" | "file-word" | "folder-user" | "folder" | "funnel-filter" | "global-dollar" | "globe" | "graduation-cap" | "graph" | "happy-sun" | "health-bag" | "heart" | "home" | "import" | "incident-siren" | "instapay" | "loading-2" | "location" | "lock" | "media-content" | "moneybag" | "moon" | "multiple-stars" | "multiple-users" | "node" | "open-folder" | "paperclip" | "payment-summary" | "pencil" | "phone" | "piggy-bank" | "plane" | "play-circle" | "print" | "raising-hands" | "reply" | "reschedule" | "rostering" | "save" | "schedule" | "search-person" | "speaker" | "star-medal" | "star" | "steps-circle" | "stopwatch" | "suitcase" | "survey" | "tag" | "teams" | "timesheet" | "touch-id" | "trash-bin" | "unlock" | "video-1" | "video-2" | "activate-outlined" | "add-person-outlined" | "add-section-outlined" | "add-time-outlined" | "add" | "adjustment-outlined" | "alignment-2-outlined" | "alignment-outlined" | "all-caps" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "at-sign" | "bell-outlined" | "billing-outlined" | "body-outlined" | "bookmark-outlined" | "box-check-outlined" | "box-outlined" | "bullet-points" | "cake-outlined" | "calendar-dates-outlined" | "calendar-star-outlined" | "camera-outlined" | "cancel" | "checkmark" | "circle-add-outlined" | "circle-cancel-outlined" | "circle-down-outlined" | "circle-info-outlined" | "circle-left-outlined" | "circle-ok-outlined" | "circle-question-outlined" | "circle-remove-outlined" | "circle-right-outlined" | "circle-up-outlined" | "circle-warning-outlined" | "clock-2-outlined" | "clock-outlined" | "cog-outlined" | "coin-outlined" | "comment-outlined" | "contacts-outlined" | "credit-card-outlined" | "direction-arrows-outlined" | "directory-outlined" | "document-outlined" | "dollar-coin-shine-outlined" | "dollar-sign" | "double-buildings-outlined" | "double-left-arrows" | "double-right-arrows" | "download-outlined" | "edit-template-outlined" | "email-outlined" | "enter-arrow" | "envelope-outlined" | "expense-outlined" | "external-link" | "eye-invisible-outlined" | "eye-outlined" | "face-id" | "face-meh-outlined" | "face-open-smiley-outlined" | "face-sad-outlined" | "face-smiley-outlined" | "feed-outlined" | "file-certified-outlined" | "file-clone-outlined" | "file-copy-outlined" | "file-dispose-outlined" | "file-download-outlined" | "file-export-outlined" | "file-lock-outlined" | "file-outlined" | "file-search-outlined" | "file-secured-outlined" | "file-verified-outlined" | "folder-outlined" | "folder-user-outlined" | "funnel-filter-outline" | "graph-outlined" | "happy-sun-outlined" | "health-bag-outlined" | "heart-outlined" | "home-outlined" | "image-outlined" | "import-outlined" | "instapay-outlined" | "italic" | "link-1" | "link-2" | "list-outlined" | "location-outlined" | "lock-outlined" | "locked-file-outlined" | "log-out" | "media-content-outlined" | "menu-close" | "menu-expand" | "menu-fold-outlined" | "menu-unfold-outlined" | "moneybag-outlined" | "moon-outlined" | "more-horizontal" | "more-vertical" | "multiple-folders-outlined" | "multiple-users-outlined" | "node-outlined" | "number-points" | "payment-summary-outlined" | "payslip-outlined" | "pencil-outlined" | "percentage" | "phone-outlined" | "piggy-bank-outlined" | "plane-outlined" | "play-circle-outlined" | "print-outlined" | "qr-code-outlined" | "re-assign" | "refresh" | "remove" | "reply-outlined" | "return-arrow" | "rostering-outlined" | "save-outlined" | "schedule-outlined" | "search-outlined" | "send-outlined" | "share-1" | "share-2" | "single-down-arrow" | "single-left-arrow" | "single-right-arrow" | "single-up-arrow" | "speaker-outlined" | "star-outlined" | "stopwatch-outlined" | "strikethrough" | "survey-outlined" | "switch-outlined" | "target-outlined" | "timesheet-outlined" | "transfer" | "trash-bin-outlined" | "unavailable" | "underline" | "unlock-outlined" | "upload-outlined" | "user-outlined" | "video-1-outlined" | "video-2-outlined";
+declare const isHeroIcon: (x: any) => x is "number" | "image" | "menu" | "switch" | "list" | "activate" | "add-person" | "adjustment" | "alignment" | "bank" | "bell" | "billing" | "bookmark" | "box-check" | "box" | "buildings" | "cake" | "calendar-clock" | "calendar" | "carat-down-small" | "carat-down" | "carat-left" | "carat-right" | "carat-up" | "circle-add" | "circle-cancel" | "circle-check" | "circle-down" | "circle-info" | "circle-left" | "circle-ok" | "circle-pencil" | "circle-question" | "circle-remove" | "circle-right" | "circle-up" | "circle-warning" | "clock" | "cloud-download" | "cloud-upload" | "cog" | "coin" | "contacts" | "credit-card" | "diamond" | "direction-arrows" | "directory" | "document" | "dollar-coin-shine" | "double-buildings" | "edit-template" | "envelope" | "expense" | "eye-circle" | "eye-invisible" | "eye" | "face-meh" | "face-sad" | "face-smiley" | "feed" | "feedbacks" | "file-certified" | "file-clone" | "file-copy" | "file-csv" | "file-dispose" | "file-doc" | "file-excel" | "file-export" | "file-lock" | "file-pdf" | "file-powerpoint" | "file-search" | "file-secured" | "file-sheets" | "file-slide" | "file-verified" | "file-word" | "file" | "folder-user" | "folder" | "funnel-filter" | "global-dollar" | "globe" | "graduation-cap" | "graph" | "happy-sun" | "health-bag" | "heart" | "home" | "import" | "incident-siren" | "instapay" | "loading" | "loading-2" | "location" | "lock" | "media-content" | "moneybag" | "moon" | "multiple-stars" | "multiple-users" | "node" | "open-folder" | "paperclip" | "payment-summary" | "pencil" | "phone" | "piggy-bank" | "plane" | "play-circle" | "print" | "raising-hands" | "reply" | "reschedule" | "rostering" | "save" | "schedule" | "search-person" | "send" | "speaker" | "star-medal" | "star" | "steps-circle" | "stopwatch" | "suitcase" | "survey" | "tag" | "target" | "teams" | "timesheet" | "touch-id" | "trash-bin" | "unlock" | "user" | "video-1" | "video-2" | "activate-outlined" | "add-person-outlined" | "add-section-outlined" | "add-time-outlined" | "add" | "adjustment-outlined" | "alignment-2-outlined" | "alignment-outlined" | "all-caps" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "at-sign" | "bell-outlined" | "billing-outlined" | "body-outlined" | "bold" | "bookmark-outlined" | "box-check-outlined" | "box-outlined" | "bullet-points" | "cake-outlined" | "calendar-dates-outlined" | "calendar-star-outlined" | "camera-outlined" | "cancel" | "checkmark" | "circle-add-outlined" | "circle-cancel-outlined" | "circle-down-outlined" | "circle-info-outlined" | "circle-left-outlined" | "circle-ok-outlined" | "circle-question-outlined" | "circle-remove-outlined" | "circle-right-outlined" | "circle-up-outlined" | "circle-warning-outlined" | "clock-2-outlined" | "clock-outlined" | "cog-outlined" | "coin-outlined" | "comment-outlined" | "contacts-outlined" | "credit-card-outlined" | "direction-arrows-outlined" | "directory-outlined" | "document-outlined" | "dollar-coin-shine-outlined" | "dollar-sign" | "double-buildings-outlined" | "double-left-arrows" | "double-right-arrows" | "download-outlined" | "edit-template-outlined" | "email-outlined" | "enter-arrow" | "envelope-outlined" | "expense-outlined" | "external-link" | "eye-invisible-outlined" | "eye-outlined" | "face-id" | "face-meh-outlined" | "face-open-smiley-outlined" | "face-sad-outlined" | "face-smiley-outlined" | "feed-outlined" | "file-certified-outlined" | "file-clone-outlined" | "file-copy-outlined" | "file-dispose-outlined" | "file-download-outlined" | "file-export-outlined" | "file-lock-outlined" | "file-outlined" | "file-search-outlined" | "file-secured-outlined" | "file-verified-outlined" | "folder-outlined" | "folder-user-outlined" | "funnel-filter-outline" | "graph-outlined" | "happy-sun-outlined" | "health-bag-outlined" | "heart-outlined" | "home-outlined" | "image-outlined" | "import-outlined" | "instapay-outlined" | "italic" | "link-1" | "link-2" | "list-outlined" | "location-outlined" | "lock-outlined" | "locked-file-outlined" | "log-out" | "media-content-outlined" | "menu-close" | "menu-expand" | "menu-fold-outlined" | "menu-unfold-outlined" | "moneybag-outlined" | "moon-outlined" | "more-horizontal" | "more-vertical" | "multiple-folders-outlined" | "multiple-users-outlined" | "node-outlined" | "number-points" | "payment-summary-outlined" | "payslip-outlined" | "pencil-outlined" | "percentage" | "phone-outlined" | "piggy-bank-outlined" | "plane-outlined" | "play-circle-outlined" | "print-outlined" | "qr-code-outlined" | "re-assign" | "refresh" | "remove" | "reply-outlined" | "restart" | "return-arrow" | "rostering-outlined" | "save-outlined" | "schedule-outlined" | "search-outlined" | "send-outlined" | "share-1" | "share-2" | "single-down-arrow" | "single-left-arrow" | "single-right-arrow" | "single-up-arrow" | "speaker-outlined" | "star-outlined" | "stopwatch-outlined" | "strikethrough" | "survey-outlined" | "switch-outlined" | "sync" | "target-outlined" | "timesheet-outlined" | "transfer" | "trash-bin-outlined" | "unavailable" | "underline" | "unlock-outlined" | "upload-outlined" | "user-outlined" | "video-1-outlined" | "video-2-outlined";
 export { isHeroIcon };