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

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

@@ -1,8 +1,9 @@
+import React from 'react';
 import type { ReactElement } from 'react';
 declare const Header: ({ content, showDivider, onRequestClose, showCloseButton, }: {
     content: string | ReactElement;
     showDivider: boolean;
     onRequestClose?: (() => void) | undefined;
     showCloseButton: boolean;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default Header;

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

@@ -1,51 +1,46 @@
-/// <reference types="react" />
 import { Animated, KeyboardAvoidingView, KeyboardAvoidingViewProps, SafeAreaView, View } from 'react-native';
 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>> & {
-    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;
 }, {}, {}>;
 declare const StyledBackdrop: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").PressableProps & import("react").RefAttributes<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;
 }, {}, {}>;
 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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Theme } from '@emotion/react';
 import { View } from 'react-native';
 import { FlexStyleProps, StyleProps } from './types';
@@ -9,7 +8,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/Box/index.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 import type { BoxViewProps, FlexStyleProps, StyleProps } from './types';
 export interface BoxProps extends StyleProps, FlexStyleProps, BoxViewProps {
 }
-declare const Box: ({ children, style, testID, ...otherProps }: BoxProps) => JSX.Element;
+declare const Box: ({ children, style, testID, ...otherProps }: BoxProps) => React.JSX.Element;
 export default Box;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import { SystemPalette } from '../../theme/global';
 import { BorderWidths, Radii } from '../../theme/global/borders';

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

@@ -1,4 +1,4 @@
-import { ReactChild } from 'react';
+import { ReactChild, ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon';
 import type { Intent, ThemeVariant } from './StyledButton';
@@ -18,7 +18,7 @@ export interface ButtonProps {
     /**
      * Places an icon within the button, before the button's text
      */
-    icon?: IconName;
+    icon?: IconName | ReactNode;
     /**
      * Visual intent color to apply to button. It is required for `filled`, `outlined` and `text` variants.
      */
@@ -34,7 +34,7 @@ export interface ButtonProps {
     /**
      * Places an icon within the button, after the button's text
      */
-    rightIcon?: IconName;
+    rightIcon?: IconName | ReactNode;
     /**
      * Additional style.
      */

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { StyleProp, ViewStyle, TouchableOpacityProps } from 'react-native';
 import type { IconProps, IconName } from '../Icon';
 export interface IconButtonProps {
@@ -34,5 +35,5 @@ export interface IconButtonProps {
      */
     testID?: string;
 }
-declare const IconButton: ({ hitSlop, onPress, icon, disabled, testID, style, size, intent, }: IconButtonProps) => JSX.Element;
+declare const IconButton: ({ hitSlop, onPress, icon, disabled, testID, style, size, intent, }: IconButtonProps) => React.JSX.Element;
 export default IconButton;

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

@@ -1,21 +1,20 @@
-/// <reference types="react" />
-import { View } from 'react-native';
-import type { ViewProps } from 'react-native';
 import type { Theme } from '@emotion/react';
+import type { ViewProps } from 'react-native';
+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;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-export { StyledLoadingIndicatorWrapper, StyledLoadingDot };
+export { StyledLoadingDot, StyledLoadingIndicatorWrapper };

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { StyleProp, ViewStyle, ViewProps } 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';
 interface LoadingIndicatorProps extends ViewProps {
@@ -22,5 +23,5 @@ interface LoadingIndicatorProps extends ViewProps {
      */
     themeVariant: ThemeVariant;
 }
-declare const LoadingIndicator: ({ count, size, testID, themeVariant, ...nativeProps }: LoadingIndicatorProps) => JSX.Element;
+declare const LoadingIndicator: ({ count, size, testID, themeVariant, ...nativeProps }: LoadingIndicatorProps) => React.JSX.Element;
 export default LoadingIndicator;

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

@@ -1,28 +1,34 @@
-/// <reference types="react" />
 import { TouchableHighlight, View } from 'react-native';
 import type { Theme } from '@emotion/react';
 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;
-    themeVariant: ThemeVariant;
+    themeButtonVariant: ThemeVariant;
     loading?: boolean | undefined;
 }, {}, {
     ref?: import("react").Ref<TouchableHighlight> | undefined;
 }>;
-declare const StyledButtonText: import("@emotion/native").StyledComponent<import("../..").TextProps & {
+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;
-    themeVariant: ThemeVariant;
+    themeButtonVariant: ThemeVariant;
+}, {}, {}>;
+declare const StyledButtonTitleOfVariantText: import("@emotion/native").StyledComponent<import("../Typography/Body").BodyProps & {
+    theme?: Theme | 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';
 }, {}, {
@@ -30,10 +36,10 @@ 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;
-    themeVariant: ThemeVariant;
+    themeButtonVariant: ThemeVariant;
 }, {}, {}>;
-export { StyledButtonContainer, StyledButtonText, StyledButtonIconWrapper, StyledButtonIcon, };
+export { StyledButtonContainer, StyledButtonText, StyledButtonIconWrapper, StyledButtonIcon, StyledButtonTitleOfVariantText, };
 export type { Intent, ThemeVariant };

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

@@ -1,18 +1,17 @@
-/// <reference types="react" />
 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("../../..").TextProps & {
+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;
 }, {}, {}>;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ReactChild } from 'react';
 import type { ViewProps } from 'react-native';
 import type { IconName } from '../../Icon';
@@ -19,5 +20,5 @@ export interface UtilityButtonProps extends ViewProps {
      */
     intent?: 'primary' | 'text';
 }
-declare const UtilityButton: ({ icon, onPress, text, testID, intent, style, hitSlop, }: UtilityButtonProps) => JSX.Element;
+declare const UtilityButton: ({ icon, onPress, text, testID, intent, style, hitSlop, }: UtilityButtonProps) => React.JSX.Element;
 export default UtilityButton;

package/types/components/Calendar/CalendarRowItem.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export interface CalendarRowItemProps {
     date?: Date;
     onPress?: () => void;
@@ -6,5 +7,5 @@ export interface CalendarRowItemProps {
     textIntent?: 'body' | 'subdued';
     marked?: boolean;
 }
-declare const CalendarRowItem: ({ date, onPress, isCurrent, isSelected, textIntent, marked, }: CalendarRowItemProps) => JSX.Element;
+declare const CalendarRowItem: ({ date, onPress, isCurrent, isSelected, textIntent, marked, }: CalendarRowItemProps) => React.JSX.Element;
 export default CalendarRowItem;

package/types/components/Calendar/StyledCalendar.d.ts

@@ -1,27 +1,26 @@
-/// <reference types="react" />
 import { TouchableOpacity, View } from 'react-native';
 import type { ViewProps } from 'react-native';
 declare const StyledContainer: 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 StyledCalendarHeader: 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 StyledCalendarDayNameCell: 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 StyledCalendarCell: 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;
 } & {
     variant?: "selected" | "default" | "current" | undefined;
 }, {}, {
@@ -29,25 +28,25 @@ declare const StyledCalendarCell: import("@emotion/native").StyledComponent<impo
 }>;
 declare const StyledCalendarRow: 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 StyledCalendarRowItem: 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 StyledDisabledCalendarRowItem: 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 StyledMark: 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;
 } & {
     variant: 'primary' | 'inverted';
 }, {}, {

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

@@ -1,3 +1,4 @@
+import React from 'react';
 export interface CalendarProps {
     /**
      * Selected date value.
@@ -39,6 +40,19 @@ export interface CalendarProps {
      * Testing id of the component.
      */
     testID?: string;
+    /**
+     * Callback when header month is changed, passing this prop will disable onTitlePress.
+     */
+    onMonthChange?: (date: Date) => void;
+    onToggleMonthPicker?: (visible: boolean) => void;
+    /**
+     * Label for the confirm button of the month picker, Android only.
+     */
+    monthPickerConfirmLabel?: string;
+    /**
+     * Label for the cancel button of the month picker, Android only.
+     */
+    monthPickerCancelLabel?: string;
 }
-declare const Calendar: ({ value, visibleDate, onChange, onPreviousPress, onNextPress, onTitlePress, minDate, maxDate, markedDates, testID, }: CalendarProps) => JSX.Element;
+declare const Calendar: ({ value, visibleDate, onChange, onPreviousPress, onNextPress, onTitlePress, minDate, maxDate, markedDates, testID, onMonthChange, onToggleMonthPicker, monthPickerConfirmLabel, monthPickerCancelLabel, }: CalendarProps) => React.JSX.Element;
 export default Calendar;

package/types/components/Card/DataCard/StyledDataCard.d.ts

@@ -1,14 +1,13 @@
-/// <reference types="react" />
 import { View } from 'react-native';
 declare const StyledDataCard: 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 Indicator: 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;
 } & {
     themeIntent: 'success' | 'info' | 'warning' | 'danger' | 'archived' | 'primary';
 }, {}, {

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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { View } from 'react-native';
 declare const StyledCard: 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;
 } & {
     themeIntent?: "primary" | "success" | "warning" | "danger" | "archived" | undefined;
 }, {}, {

package/types/components/Carousel/CardCarousel.d.ts

@@ -38,4 +38,5 @@ export interface CardCarouselProps {
     ref?: React.Ref<CardCarouselHandles>;
     onLayout?: (event: LayoutChangeEvent) => void;
 }
-export declare const CardCarousel: React.ForwardRefExoticComponent<Pick<CardCarouselProps, "style" | "onLayout" | "testID" | "items" | "onItemIndexChange" | "hidePageControl" | "autoPlay" | "autoPlayInterval"> & React.RefAttributes<CardCarouselHandles>>;
+export declare const getCardCarouselValidIndex: (index: number, length: number) => number;
+export declare const CardCarousel: React.ForwardRefExoticComponent<Omit<CardCarouselProps, "ref"> & React.RefAttributes<CardCarouselHandles>>;

package/types/components/Carousel/CarouselItem.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import { CarouselData } from './types';
 interface CarouselItemProps extends Omit<CarouselData, 'background'> {
     width: number;
 }
-declare const CarouselItem: ({ width, image, content, heading, body, }: CarouselItemProps) => JSX.Element;
+declare const CarouselItem: ({ width, image, content, heading, body, }: CarouselItemProps) => React.JSX.Element;
 export default CarouselItem;

package/types/components/Carousel/StyledCardCarousel.d.ts

@@ -1,31 +1,24 @@
-/// <reference types="react" />
 import { View, ViewProps } from 'react-native';
 import { CardProps } from '../Card';
 import { PageControlProps } from '../PageControl';
 declare const StyledPageControl: import("@emotion/native").StyledComponent<PageControlProps & {
     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 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 StyledCard: import("@emotion/native").StyledComponent<CardProps & {
     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 StyledShadow: 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 StyledItemWrapper: 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;
 }>;
-export { StyledCard, StyledShadow, StyledItemWrapper, StyledWrapper, StyledPageControl, };
+export { StyledCard, StyledItemWrapper, StyledWrapper, StyledPageControl };

package/types/components/Carousel/StyledCarousel.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { View, ImageResizeMode } from 'react-native';
 declare const StyledBackDrop: 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;
 } & {
     themeSlideBackground: string;
 }, {}, {
@@ -10,45 +9,45 @@ declare const StyledBackDrop: import("@emotion/native").StyledComponent<import("
 }>;
 declare const StyledCarouselView: 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 StyledCarouselHeading: import("@emotion/native").StyledComponent<import("../..").TextProps & {
+declare const StyledCarouselHeading: import("@emotion/native").StyledComponent<import("../Typography/Title").TitleProps & {
     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 StyledCarouselImage: import("@emotion/native").StyledComponent<import("../Image").ImageProps & {
     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 StyledCustomSizeCarouselImage: import("@emotion/native").StyledComponent<import("../Image").ImageProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
-    height?: number | undefined;
-    width?: number | undefined;
-    resizeMode?: ImageResizeMode | undefined;
+    themeHeight?: number | `${number}%` | undefined;
+    themeWidth?: number | `${number}%` | undefined;
+    themeResizeMode?: ImageResizeMode | undefined;
 }, {}, {}>;
 declare const StyledCarouselContentWrapper: 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;
 } & {
     width: number;
 }, {}, {}>;
 declare const StyledCarouselFooterWrapper: 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 StyledPageControl: import("@emotion/native").StyledComponent<import("../PageControl").PageControlProps & {
     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 StyledPageControlWrapper: 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/Carousel/index.d.ts

@@ -38,7 +38,7 @@ interface CarouselProps extends ViewProps {
     pageControlPosition?: 'top' | 'bottom';
 }
 export declare function useStateFromProp<T>(initialValue: T): [T, Dispatch<SetStateAction<T>>];
-declare const _default: (({ items, onItemIndexChange, renderActions, selectedItemIndex, style, shouldShowPagination, pageControlPosition, ...nativeProps }: CarouselProps) => JSX.Element) & {
-    Card: React.ForwardRefExoticComponent<Pick<import("./CardCarousel").CardCarouselProps, "style" | "onLayout" | "testID" | "items" | "onItemIndexChange" | "hidePageControl" | "autoPlay" | "autoPlayInterval"> & React.RefAttributes<import("./CardCarousel").CardCarouselHandles>>;
+declare const _default: (({ items, onItemIndexChange, renderActions, selectedItemIndex, style, shouldShowPagination, testID, pageControlPosition, ...nativeProps }: CarouselProps) => React.JSX.Element) & {
+    Card: React.ForwardRefExoticComponent<Omit<import("./CardCarousel").CardCarouselProps, "ref"> & React.RefAttributes<import("./CardCarousel").CardCarouselHandles>>;
 };
 export default _default;

package/types/components/Carousel/types.d.ts

@@ -1,14 +1,14 @@
 import { ReactNode } from 'react';
 import { ImageSourcePropType, ImageResizeMode } from 'react-native';
 export declare type CarouselImageProps = ImageSourcePropType & {
-    height?: number;
-    width?: number;
+    height?: number | `${number}%`;
+    width?: number | `${number}%`;
     resizeMode?: ImageResizeMode;
 };
 export declare type CarouselData = {
-    image: CarouselImageProps | string;
+    image?: CarouselImageProps | string;
     content?: ReactNode;
-    heading: string;
+    heading?: string;
     body?: string;
     background: string;
 };