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

package/src/theme/global/space.ts

@@ -11,6 +11,7 @@ interface Space {
   xxsmall: number;
   xxxlarge: number;
   xxxxlarge: number;
+  '5xlarge': number;
 }
 
 const getSpace = (baseSpace: number): Space => ({
@@ -24,6 +25,7 @@ const getSpace = (baseSpace: number): Space => ({
   xxlarge: scale(baseSpace * 5), // 40
   xxxlarge: scale(baseSpace * 6), // 48
   xxxxlarge: scale(baseSpace * 7), // 56
+  '5xlarge': scale(baseSpace * 8), // 64
 });
 
 export { getSpace };

package/src/types.ts

@@ -15,6 +15,8 @@ import type {
 import { SwipeableProps } from './components/Swipeable';
 import { TextProps } from './components/Typography/Text';
 import { CardCarouselHandles } from './components/Carousel/CardCarousel';
+import { FABHandles } from './components/FAB/FAB';
+import { ActionGroupHandles } from './components/FAB/ActionGroup';
 
 export type {
   BottomNavigationTabType,
@@ -32,4 +34,6 @@ export type {
   TextInputHandles,
   Theme,
   CardCarouselHandles,
+  FABHandles,
+  ActionGroupHandles,
 };

package/src/utils/helpers.ts

@@ -3,7 +3,10 @@ import { Platform } from 'react-native';
 export const isIOS = Platform.OS === 'ios';
 export const isAndroid = Platform.OS === 'android';
 
-export function pick<O, T extends keyof O>(keys: T[], obj: O): Pick<O, T> {
+export function pick<O extends object, T extends keyof O>(
+  keys: T[],
+  obj: O
+): Pick<O, T> {
   return keys
     .filter((key) => key in obj)
     .reduce<Partial<O>>(

package/testUtils/setup.tsx

@@ -10,12 +10,17 @@ jest.mock('react-native-vector-icons', () => ({
 jest.mock('react-native', () => {
   const RN = jest.requireActual('react-native');
 
-  RN.Animated.timing = () => ({
+  const mockedAnimatedFunctions = {
+    setImmediate: () => jest.fn(),
     start: () => jest.fn(),
     stop: () => jest.fn(),
     _isUsingNativeDriver: () => jest.fn(),
     _startNativeLoop: () => jest.fn(),
-  });
+  };
+
+  RN.Animated.timing = () => mockedAnimatedFunctions;
+  RN.Animated.spring = () => mockedAnimatedFunctions;
+  RN.Animated.stagger = () => mockedAnimatedFunctions;
 
   return RN;
 });
@@ -102,4 +107,29 @@ jest.mock('react-native-gesture-handler', () => {
   };
 });
 
+jest.mock("@hero-design/react-native-month-year-picker", () => {
+  const React = jest.requireActual("react");
+  const { View, Text } = jest.requireActual("react-native");
+
+  return {
+    MonthYearPickerDialogueAndroid: () => (
+      <View>
+        <Text>Android picker</Text>
+      </View>
+    ),
+    MonthYearPickerViewIOS: () => (
+      <View>
+        <Text>IOS picker</Text>
+      </View>
+    ),
+  };
+});
+
+
+jest.mock('react-native/Libraries/Utilities/BackHandler', () => {
+  return jest.requireActual(
+    'react-native/Libraries/Utilities/__mocks__/BackHandler.js',
+  );
+});
+
 export {};

package/tsconfig.json

@@ -1,5 +1,4 @@
 {
-  "extends": "expo/tsconfig.base",
   "compilerOptions": {
     "declaration": true,
     "jsx": "react-native",
@@ -11,7 +10,19 @@
     "strict": true,
     "strictNullChecks": true,
     "target": "esnext",
-    "types": ["jest"]
+    "types": ["jest"],
+    "paths": {
+      "react": ["./node_modules/@types/react"],
+      "react-native": ["./node_modules/react-native/types"],
+    },
+    "allowJs": true,
+    "esModuleInterop": true,
+    "lib": ["DOM", "ESNext"],
+    "moduleResolution": "node",
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
   },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
 }

package/types/components/Accordion/AccordionItem.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { Variant } from './StyledAccordion';
@@ -10,5 +11,5 @@ export declare type AccordionItemProps = {
     style?: StyleProp<ViewStyle>;
     testID?: string;
 };
-declare const AccordionItem: ({ header, content, open, onPress, variant, style, testID, }: AccordionItemProps) => JSX.Element;
+declare const AccordionItem: ({ header, content, open, onPress, variant, style, testID, }: AccordionItemProps) => React.JSX.Element;
 export default AccordionItem;

package/types/components/Accordion/StyledAccordion.d.ts

@@ -1,15 +1,14 @@
-/// <reference types="react" />
 import { TouchableOpacity, View } from 'react-native';
 export declare type Variant = 'default' | 'card';
 export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 export declare const StyledItemWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeVariant: Variant;
 }, {}, {
@@ -17,17 +16,17 @@ export declare const StyledItemWrapper: import("@emotion/native").StyledComponen
 }>;
 export declare const StyledHeaderWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<TouchableOpacity> | undefined;
 }>;
 export declare const StyledCollapse: import("@emotion/native").StyledComponent<import("../Collapse").CollapseProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {}>;
 export declare const Spacer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;

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

@@ -35,5 +35,5 @@ export interface AccordionProps<K extends Key> {
      */
     testID?: string;
 }
-declare const Accordion: <K extends React.Key>({ items, activeItemKey, onItemPress, variant, style, testID, }: AccordionProps<K>) => JSX.Element;
+declare const Accordion: <K extends React.Key>({ items, activeItemKey, onItemPress, variant, style, testID, }: AccordionProps<K>) => React.JSX.Element;
 export default Accordion;

package/types/components/Alert/StyledAlert.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { TouchableOpacity, View } from 'react-native';
 import type { ViewProps } from 'react-native';
 declare const Container: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeVariant: 'rounded' | 'unrounded';
     themeIntent: 'success' | 'info' | 'warning' | 'error' | 'notification';
@@ -12,19 +11,19 @@ declare const Container: import("@emotion/native").StyledComponent<ViewProps & {
 }>;
 declare const IconContainer: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const TextContainer: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const ContentContainer: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     showDivider: boolean;
 }, {}, {
@@ -32,7 +31,7 @@ declare const ContentContainer: import("@emotion/native").StyledComponent<ViewPr
 }>;
 declare const CTAWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<TouchableOpacity> | undefined;
 }>;

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

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon';
-interface AlertProps {
+interface BasicAlertProps {
     /**
      * Alert title.
      */
@@ -23,6 +23,7 @@ interface AlertProps {
     intent?: 'success' | 'info' | 'warning' | 'error' | 'notification';
     /**
      * Closing callback. When onClose is available, an X button will be rendered on the right side of alert. The callback will be called when user clicks on X button.
+     * - undefined: no action button.
      */
     onClose?: () => void;
     /**
@@ -37,6 +38,21 @@ interface AlertProps {
      * Testing id of the component.
      */
     testID?: string;
+    /**
+     * Action label at the right side of the alert.
+     * - undefined: a close icon.
+     */
+    actionLabel?: string;
 }
-declare const Alert: ({ content, icon, title, intent, onClose, variant, style, testID, }: AlertProps) => JSX.Element;
+declare type AlertProps = (BasicAlertProps & {
+    actionLabel?: undefined;
+}) | (BasicAlertProps & {
+    onClose: () => void;
+    /**
+     * Action label at the right side of the alert.
+     * - undefined: a close icon.
+     */
+    actionLabel: string;
+});
+declare const Alert: ({ content, icon, title, intent, onClose, variant, style, testID, actionLabel, }: AlertProps) => JSX.Element;
 export default Alert;

package/types/components/AnimatedScroller/AnimatedFAB.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Animated } from 'react-native';
+import { ActionGroupProps } from '../FAB/ActionGroup';
+import { FABProps } from '../FAB/FAB';
+interface AnimatedFABProps {
+    fabProps: FABProps | ActionGroupProps;
+    contentOffsetY: Animated.Value;
+    contentHeight: Animated.Value;
+    layoutHeight: Animated.Value;
+}
+declare const AnimatedFAB: ({ fabProps, contentOffsetY, contentHeight, layoutHeight, }: AnimatedFABProps) => React.JSX.Element;
+export default AnimatedFAB;

package/types/components/AnimatedScroller/AnimatedScrollable.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { FlatListProps, ScrollViewProps as RnScrollViewProps, SectionListProps } from 'react-native';
+import { ActionGroupProps } from '../FAB/ActionGroup';
+import { FABProps } from '../FAB/FAB';
+export interface AnimatedScrollerProps<T> {
+    /**
+     * Scroll component, it can be ScrollView, FlatList or SectionList.
+     */
+    ScrollComponent: React.ReactElement<RnScrollViewProps | FlatListProps<T> | SectionListProps<T>>;
+    /**
+     * FAB or FAB.ActionGroup props.
+     */
+    fabProps: FABProps | ActionGroupProps;
+}
+declare function AnimatedScroller<T>({ ScrollComponent, fabProps, }: AnimatedScrollerProps<T>): React.JSX.Element;
+export default AnimatedScroller;

package/types/components/AnimatedScroller/FlatListWithFAB.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { FlatListProps } from 'react-native';
+import { FABProps } from '../FAB/FAB';
+import { ActionGroupProps } from '../FAB/ActionGroup';
+export interface FlatListWithFABProps<T> extends FlatListProps<T> {
+    /**
+     * FAB or FAB.ActionGroup props props.
+     */
+    fabProps: FABProps | ActionGroupProps;
+}
+declare function FlatListWithFAB<T>({ fabProps, ...props }: FlatListWithFABProps<T>): React.JSX.Element;
+export default FlatListWithFAB;

package/types/components/AnimatedScroller/ScrollViewWithFAB.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ScrollViewProps } from 'react-native';
+import { ActionGroupProps } from '../FAB/ActionGroup';
+import { FABProps } from '../FAB/FAB';
+export interface ScrollViewWithFABProps extends ScrollViewProps {
+    /**
+     * FAB or FAB.ActionGroup props props.
+     */
+    fabProps: FABProps | ActionGroupProps;
+}
+declare const ScrollViewWithFAB: ({ fabProps, ...props }: ScrollViewWithFABProps) => React.JSX.Element;
+export default ScrollViewWithFAB;

package/types/components/AnimatedScroller/SectionListWithFAB.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SectionListProps } from 'react-native';
+import { ActionGroupProps } from '../FAB/ActionGroup';
+import { FABProps } from '../FAB/FAB';
+export interface SectionListWithFABProps<T> extends SectionListProps<T> {
+    /**
+     * FAB or FAB.ActionGroup props props.
+     */
+    fabProps: FABProps | ActionGroupProps;
+}
+declare function SectionListWithFAB<T>({ fabProps, ...props }: SectionListWithFABProps<T>): React.JSX.Element;
+export default SectionListWithFAB;

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

@@ -0,0 +1,4 @@
+import ScrollViewWithFAB from './ScrollViewWithFAB';
+import FlatListWithFAB from './FlatListWithFAB';
+import SectionListWithFAB from './SectionListWithFAB';
+export { ScrollViewWithFAB, FlatListWithFAB, SectionListWithFAB };

package/types/components/Attachment/StyledAttachment.d.ts

@@ -1,14 +1,13 @@
-/// <reference types="react" />
 import { TouchableOpacity, View } from 'react-native';
 declare const StyledContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledContentContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeHighlighted: boolean;
 }, {}, {
@@ -16,13 +15,13 @@ declare const StyledContentContainer: import("@emotion/native").StyledComponent<
 }>;
 declare const StyledTextContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledCTAWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<TouchableOpacity> | undefined;
 }>;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ReactElement } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { IconProps } from '../Icon';
@@ -33,5 +34,5 @@ interface AttachmentProps {
      */
     testID?: string;
 }
-declare const Attachment: ({ filename, previewElement, onRemove, onDownload, backgroundHighlighted, style, testID, }: AttachmentProps) => JSX.Element;
+declare const Attachment: ({ filename, previewElement, onRemove, onDownload, backgroundHighlighted, style, testID, }: AttachmentProps) => React.JSX.Element;
 export default Attachment;

package/types/components/Avatar/Avatar.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ImageSourcePropType, StyleProp, ViewProps, ViewStyle } from 'react-native';
 export interface AvatarProps extends ViewProps {
     /**
@@ -29,5 +30,5 @@ export interface AvatarProps extends ViewProps {
      */
     testID?: string;
 }
-declare const Avatar: ({ onPress, source, testID, style, title, size, intent, }: AvatarProps) => JSX.Element | null;
+declare const Avatar: ({ onPress, source, testID, style, title, size, intent, }: AvatarProps) => React.JSX.Element | null;
 export default Avatar;

package/types/components/Avatar/AvatarStack/StyledAvatarStack.d.ts

@@ -1,18 +1,30 @@
-/// <reference types="react" />
 import { View } from 'react-native';
 import { AvatarProps } from '../Avatar';
+declare type ThemeVariant = 'horizontal' | 'vertical';
 export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeSize: Required<AvatarProps>['size'];
     themeAvatarCount: number;
+    themeVariant: ThemeVariant;
+    themeHasSurplus: boolean;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 export declare const StyledAvatar: import("@emotion/native").StyledComponent<AvatarProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeIndex: number;
+    themeVariant: ThemeVariant;
 }, {}, {}>;
+export declare const StyledSurplusContainer: import("@emotion/native").StyledComponent<import("../../Box").BoxProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeIndex: number;
+    themeSize: AvatarProps['size'];
+    themeVariant: ThemeVariant;
+}, {}, {}>;
+export {};

package/types/components/Avatar/AvatarStack/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { AvatarProps } from '../Avatar';
 export interface AvatarStackProps extends Pick<AvatarProps, 'size'> {
@@ -10,6 +10,14 @@ export interface AvatarStackProps extends Pick<AvatarProps, 'size'> {
      * Max avatars to show.
      */
     max?: number;
+    /**
+     * The total number of avatars. Used for calculating the number of extra avatars.
+     */
+    total?: number;
+    /**
+     * Custom renderer of extraAvatars.
+     */
+    renderSurplus?: (value: number) => ReactNode;
     /**
      * Additional style.
      */
@@ -18,6 +26,10 @@ export interface AvatarStackProps extends Pick<AvatarProps, 'size'> {
      * Testing id of the component.
      */
     testID?: string;
+    /**
+     * Variant of the avatar stack.
+     */
+    variant?: 'horizontal' | 'vertical';
 }
-declare const AvatarStack: ({ children, max, size, style, testID, }: AvatarStackProps) => JSX.Element;
+declare const AvatarStack: ({ children, max, size, style, testID, variant, total, renderSurplus, }: AvatarStackProps) => React.JSX.Element;
 export default AvatarStack;

package/types/components/Avatar/StyledAvatar.d.ts

@@ -1,11 +1,10 @@
-/// <reference types="react" />
 import { View, Image, TouchableOpacity } from 'react-native';
 import { TextProps } from '../Typography/Text';
 declare type ThemeSize = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge';
 declare type ThemeIntent = 'primary' | 'info' | 'danger' | 'success' | 'warning';
 declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeSize: ThemeSize;
     themeIntent: ThemeIntent;
@@ -14,19 +13,19 @@ declare const StyledWrapper: import("@emotion/native").StyledComponent<import("r
 }>;
 declare const StyledTextWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledText: import("@emotion/native").StyledComponent<TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeSize: ThemeSize;
 }, {}, {}>;
 declare const StyledImage: import("@emotion/native").StyledComponent<import("react-native").ImageProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeSize: ThemeSize;
 }, {}, {

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

@@ -1,6 +1,6 @@
 import { useAvatarColors } from './AvatarStack/utils';
-declare const _default: (({ onPress, source, testID, style, title, size, intent, }: import("./Avatar").AvatarProps) => JSX.Element | null) & {
-    Stack: ({ children, max, size, style, testID, }: import("./AvatarStack").AvatarStackProps) => JSX.Element;
+declare const _default: (({ onPress, source, testID, style, title, size, intent, }: import("./Avatar").AvatarProps) => import("react").JSX.Element | null) & {
+    Stack: ({ children, max, size, style, testID, variant, total, renderSurplus, }: import("./AvatarStack").AvatarStackProps) => import("react").JSX.Element;
 };
 export default _default;
 export { useAvatarColors };

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

@@ -1,25 +1,20 @@
-/// <reference types="react" />
 import { Animated } from 'react-native';
 declare type ThemeIntent = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived';
 declare type ThemePadding = 'narrowContent' | 'wideContent';
 declare const StyledView: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
-    children?: import("react").ReactNode;
-} & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeIntent: ThemeIntent;
     themePadding: ThemePadding;
 }, {}, {}>;
-declare const StyledText: import("@emotion/native").StyledComponent<import("../..").TextProps & {
+declare const StyledText: import("@emotion/native").StyledComponent<import("../Typography/Caption").CaptionProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {}>;
 declare const StyledStatus: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
-    children?: import("react").ReactNode;
-} & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeIntent: ThemeIntent;
 }, {}, {}>;

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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { View } from 'react-native';
 declare const BottomNavigationTab: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeVisibility?: boolean | undefined;
 }, {}, {
@@ -10,19 +9,19 @@ declare const BottomNavigationTab: import("@emotion/native").StyledComponent<imp
 }>;
 declare const BottomNavigationContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeInsets: {
         top: number;
@@ -35,18 +34,18 @@ declare const BottomBarWrapper: import("@emotion/native").StyledComponent<import
 }>;
 declare const BottomBar: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledBottomBarText: import("@emotion/native").StyledComponent<import("../..").TextProps & {
+declare const StyledBottomBarText: import("@emotion/native").StyledComponent<import("../Typography/Caption").CaptionProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {}>;
 export { BottomBar, BottomBarItem, BottomNavigationTab, BottomNavigationContainer, BottomBarWrapper, ContentWrapper, StyledBottomBarText, };

package/types/components/BottomSheet/BottomSheetContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare type BottomSheetContextType = {
     setInternalShowDivider: (value: boolean) => void;
 };

package/types/components/BottomSheet/Footer.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import type { ReactNode } from 'react';
 declare const Footer: ({ children, showDivider, }: {
     children: ReactNode;
     showDivider: boolean;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default Footer;