@hero-design/rn 8.55.1-rc2.3 → 8.56.0

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

@@ -64,6 +64,14 @@ describe('Carousel', () => {
         />
       );
 
+      fireEvent(getByTestId('carousel_flatlist'), 'layout', {
+        nativeEvent: {
+          layout: {
+            width: 300,
+          },
+        },
+      });
+
       expect(getByTestId('carousel')).toBeTruthy();
 
       expect(queryByText('Skip')).toBeTruthy();
@@ -96,7 +104,7 @@ describe('Carousel', () => {
   it('should call skip call back when press skip', () => {
     const onSkip = jest.fn();
 
-    const { queryByText, toJSON } = renderWithTheme(
+    const { queryByText } = renderWithTheme(
       <Carousel
         testID="carousel"
         items={carouselData}
@@ -106,8 +114,6 @@ describe('Carousel', () => {
       />
     );
 
-    expect(toJSON()).toMatchSnapshot();
-
     expect(queryByText('Skip')).toBeTruthy();
 
     fireEvent.press(queryByText('Skip'));

package/src/components/Carousel/index.tsx

@@ -14,7 +14,7 @@ import {
   ViewProps,
   ViewStyle,
   ViewToken,
-  useWindowDimensions,
+  LayoutChangeEvent,
 } from 'react-native';
 
 import { useTheme } from '../../theme';
@@ -112,13 +112,22 @@ const Carousel = ({
   const internalOnItemIndexChange = useCallback(
     (index: number) => {
       setCurrentSlideIndex(index);
+
       if (onItemIndexChange) {
         onItemIndexChange(index);
       }
     },
     [setCurrentSlideIndex, onItemIndexChange]
   );
-  const { width } = useWindowDimensions();
+  const [flatListWidth, setFlatListWidth] = useState(0);
+  const itemWidth = flatListWidth;
+  const flatListOnLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      setFlatListWidth(e.nativeEvent.layout.width);
+    },
+    [setFlatListWidth]
+  );
+  const width = flatListWidth;
 
   const scrollX = useRef(new Animated.Value(0)).current;
   useEffect(() => {
@@ -133,8 +142,7 @@ const Carousel = ({
     return () => {
       clearTimeout(handle);
     };
-  }, [currentSlideIndex, carouselRef]);
-
+  }, [currentSlideIndex, carouselRef, scrollX, width]);
   const viewConfig = useRef({ viewAreaCoveragePercentThreshold: 50 }).current;
 
   const onViewCallBack = useRef(
@@ -167,7 +175,8 @@ const Carousel = ({
       </StyledPageControlWrapper>
 
       <StyledCarouselView>
-        <FlatList
+        <FlatList<CarouselData>
+          onLayout={flatListOnLayout}
           testID={testID ? `${testID}_flatlist` : undefined}
           horizontal
           showsHorizontalScrollIndicator={false}
@@ -186,7 +195,6 @@ const Carousel = ({
             if (!item) return null;
 
             const { image, heading, body, content } = item;
-
             return (
               <CarouselItem
                 image={image}
@@ -197,6 +205,11 @@ const Carousel = ({
               />
             );
           }}
+          getItemLayout={(_, index) => ({
+            length: itemWidth,
+            offset: itemWidth * index,
+            index,
+          })}
         />
         <StyledCarouselFooterWrapper>
           {renderActions && renderActions(currentSlideIndex)}

package/src/components/FAB/FAB.tsx

@@ -110,21 +110,21 @@ const defaultAnimation: LayoutAnimationConfig = {
     type: 'easeInEaseOut',
     property: 'opacity',
   },
-  update: { type: 'spring', springDamping: Platform.OS === 'ios' ? 0.7 : 1 },
-  duration: 400,
+  update: {
+    type: 'spring',
+    springDamping: Platform.OS === 'ios' ? 0.7 : 1.2,
+  },
+  duration: Platform.OS === 'ios' ? 300 : 400,
 };
 
 const FAB = forwardRef<FABHandles, FABProps>(
   ({ onPress, title, icon, animated, testID, active, style }, ref) => {
     const theme = useTheme();
-
+    const [canAnimate, setCanAnimate] = React.useState(false);
     const [displayState, setDisplayState] = React.useState({
       hideTitle: false,
       hideButton: false,
     });
-
-    const [canAnimate, setCanAnimate] = React.useState(false);
-
     const isIconOnly = displayState.hideTitle || active || !title;
 
     React.useImperativeHandle(

package/src/index.ts

@@ -62,6 +62,11 @@ import RefreshControl from './components/RefreshControl';
 import RichTextEditor from './components/RichTextEditor';
 import PageControl from './components/PageControl';
 import Portal from './components/Portal';
+import {
+  ScrollViewWithFAB,
+  SectionListWithFAB,
+  FlatListWithFAB,
+} from './components/AnimatedScroller';
 
 export {
   theme,
@@ -100,6 +105,7 @@ export {
   Empty,
   Error,
   FAB,
+  FlatListWithFAB,
   Icon,
   Image,
   HeroDesignProvider,
@@ -113,7 +119,9 @@ export {
   Spinner,
   Swipeable,
   Radio,
+  ScrollViewWithFAB,
   SectionHeading,
+  SectionListWithFAB,
   Select,
   Success,
   Switch,

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

@@ -3,13 +3,13 @@ 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 +17,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/Alert/StyledAlert.d.ts

@@ -3,7 +3,7 @@ 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 +12,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 +32,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/AnimatedScroller/AnimatedFAB.d.ts

@@ -0,0 +1,10 @@
+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;
+}
+declare const AnimatedFAB: ({ fabProps, contentOffsetY }: 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 { FABProps } from '../FAB/FAB';
+import { ActionGroupProps } from '../FAB/ActionGroup';
+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

@@ -2,13 +2,13 @@
 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 +16,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/Avatar/AvatarStack/StyledAvatarStack.d.ts

@@ -4,7 +4,7 @@ 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;
@@ -15,14 +15,14 @@ export declare const StyledWrapper: import("@emotion/native").StyledComponent<im
 }>;
 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeIndex: number;
     themeSize: AvatarProps['size'];

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

@@ -5,7 +5,7 @@ declare type ThemeSize = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | '
 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 +14,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/Badge/StyledBadge.d.ts

@@ -4,18 +4,18 @@ declare type ThemeIntent = 'primary' | 'success' | 'warning' | 'danger' | 'info'
 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>> & {
     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("../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>> & {
     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

@@ -2,7 +2,7 @@
 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 +10,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 +35,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("../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/StyledBottomSheet.d.ts

@@ -3,45 +3,45 @@ import { Animated, KeyboardAvoidingView, KeyboardAvoidingViewProps, SafeAreaView
 import type { ViewProps } from 'react-native';
 declare const StyledWrapper: 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 StyledKeyboardAvoidingView: import("@emotion/native").StyledComponent<KeyboardAvoidingViewProps & {
     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<KeyboardAvoidingView> | undefined;
 }>;
 declare const StyledBottomSheet: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<SafeAreaView>> & {
     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 StyledBackdrop: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").PressableProps & import("react").RefAttributes<View>> & {
     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 StyledHeaderWrapper: 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 StyledHeader: 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 StyledFooter: 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 StyledIconWrapper: 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;
 }>;

package/types/components/Box/StyledBox.d.ts

@@ -9,7 +9,7 @@ export declare const getThemeValue: (theme: Theme, key: keyof StyleProps, props:
 } | undefined;
 declare const StyledBox: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & StyleProps & FlexStyleProps, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;

package/types/components/Button/LoadingIndicator/StyledLoadingIndicator.d.ts

@@ -5,13 +5,13 @@ import { View } from 'react-native';
 declare type ThemeVariant = 'basic-transparent' | 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger' | 'text-primary' | 'text-secondary' | 'text-danger';
 declare const StyledLoadingIndicatorWrapper: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: 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 StyledLoadingDot: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     size?: number | undefined;
     themeVariant: ThemeVariant;

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

@@ -5,7 +5,7 @@ declare type Intent = 'primary' | 'secondary' | 'danger';
 declare type ThemeVariant = 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger' | 'text-primary' | 'text-secondary' | 'text-danger';
 declare const StyledButtonContainer: import("@emotion/native").StyledComponent<import("react-native").TouchableHighlightProps & {
     theme?: Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     disabled?: boolean | undefined;
     themeButtonVariant: ThemeVariant;
@@ -15,21 +15,21 @@ declare const StyledButtonContainer: import("@emotion/native").StyledComponent<i
 }>;
 declare const StyledButtonText: import("@emotion/native").StyledComponent<import("../Typography/Title").TitleProps & {
     theme?: Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     disabled?: boolean | undefined;
     themeButtonVariant: ThemeVariant;
 }, {}, {}>;
 declare const StyledButtonTitleOfVariantText: import("@emotion/native").StyledComponent<import("../Typography/Body").BodyProps & {
     theme?: Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     disabled?: boolean | undefined;
     themeButtonVariant: 'text-primary' | 'text-secondary' | 'text-danger';
 }, {}, {}>;
 declare const StyledButtonIconWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themePosition: 'left' | 'right';
 }, {}, {
@@ -37,7 +37,7 @@ declare const StyledButtonIconWrapper: import("@emotion/native").StyledComponent
 }>;
 declare const StyledButtonIcon: import("@emotion/native").StyledComponent<import("../Icon").IconProps & {
     theme?: Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     disabled?: boolean | undefined;
     themeButtonVariant: ThemeVariant;

package/types/components/Button/UtilityButton/StyledUtilityButton.d.ts

@@ -2,17 +2,17 @@
 import { View, TouchableOpacity } from 'react-native';
 export declare const ButtonContainer: 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 IconWrapper: 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 ButtonText: import("@emotion/native").StyledComponent<import("../../Typography/Body").BodyProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {}>;