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

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 export interface SliderProps {
     /**
@@ -48,5 +49,5 @@ export interface SliderProps {
      */
     testID?: string;
 }
-declare const Slider: ({ minimumValue, maximumValue, step, value, onValueChange, onSlidingStart, onSlidingComplete, disabled, style, testID, }: SliderProps) => JSX.Element;
+declare const Slider: ({ minimumValue, maximumValue, step, value, onValueChange, onSlidingStart, onSlidingComplete, disabled, style, testID, }: SliderProps) => React.JSX.Element;
 export default Slider;

package/types/components/Spinner/AnimatedSpinner.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 declare const AnimatedSpinner: ({ size, intent, }: {
     size: 'small' | 'medium';
     intent: 'primary' | 'inverted';
-}) => JSX.Element;
+}) => React.JSX.Element;
 export { AnimatedSpinner };

package/types/components/Spinner/StyledSpinner.d.ts

@@ -1,21 +1,20 @@
-/// <reference types="react" />
 import { View } from 'react-native';
 import type { ViewProps } from 'react-native';
 declare const StyledView: 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 StyledSpinnerContainer: 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 StyledSpinnerRow: 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;
 } & {
     themePosition: 'top' | 'bottom';
     themeSize: 'small' | 'medium';
@@ -24,7 +23,7 @@ declare const StyledSpinnerRow: import("@emotion/native").StyledComponent<ViewPr
 }>;
 declare const StyledSpinnerDot: 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;
 } & {
     themePosition: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
     themeSize: 'small' | 'medium';

package/types/components/Success/StyledSuccess.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-import { Modal, View } from 'react-native';
+import { View } from 'react-native';
 declare type SuccessVariant = 'full-screen' | 'in-page';
 declare const StyledSuccessContainer: 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: SuccessVariant;
 }, {}, {
@@ -11,44 +10,40 @@ declare const StyledSuccessContainer: import("@emotion/native").StyledComponent<
 }>;
 declare const StyledSuccessImage: 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 StyledSuccessContent: 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 StyledSuccessImageContainer: 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 StyledSuccessTitle: import("@emotion/native").StyledComponent<import("../..").TextProps & {
+declare const StyledSuccessTitle: 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 StyledSuccessDescription: import("@emotion/native").StyledComponent<import("../..").TextProps & {
+declare const StyledSuccessDescription: 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;
 }, {}, {}>;
 declare const StyledSuccessButtonContainer: 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 StyledSuccessButtonPrimary: import("@emotion/native").StyledComponent<import("../Button/Button").ButtonProps & {
-    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 StyledSuccessModal: import("@emotion/native").StyledComponent<import("react-native").ModalBaseProps & import("react-native").ModalPropsIOS & import("react-native").ModalPropsAndroid & import("react-native").ViewProps & {
+declare const StyledSuccessModal: import("@emotion/native").StyledComponent<import("../Modal").ModalProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, {}, {
-    ref?: import("react").Ref<Modal> | undefined;
-}>;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {}>;
 export { SuccessVariant, StyledSuccessImage, StyledSuccessContainer, StyledSuccessContent, StyledSuccessImageContainer, StyledSuccessTitle, StyledSuccessDescription, StyledSuccessButtonContainer, StyledSuccessButtonPrimary, StyledSuccessModal, };

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

@@ -14,7 +14,7 @@ export interface SuccessProps extends ViewProps {
     /**
      * Success's description.
      */
-    description?: string;
+    description?: string | ReactElement;
     /**
      * Success's variant.
      */

package/types/components/Swipeable/StyledSwipeable.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { TouchableOpacity } from 'react-native';
 export declare type ActionIntent = 'primary' | 'success' | 'danger';
 export declare const StyledRectButton: 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;
 } & {
     themeIntent: ActionIntent;
 }, {}, {

package/types/components/Swipeable/SwipeableAction.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { ActionIntent } from './StyledSwipeable';
 export interface SwipeableActionProps {
@@ -23,5 +23,5 @@ export interface SwipeableActionProps {
      */
     testID?: string;
 }
-declare const SwipeableAction: ({ intent, onPress, style, children, testID, }: SwipeableActionProps) => JSX.Element;
+declare const SwipeableAction: ({ intent, onPress, style, children, testID, }: SwipeableActionProps) => React.JSX.Element;
 export default SwipeableAction;

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

@@ -1,5 +1,5 @@
-import { ComponentProps, ReactNode } from 'react';
-import { Swipeable as RnghSwipeable, RectButton } from 'react-native-gesture-handler';
+import React, { ComponentProps, ReactNode } from 'react';
+import { RectButton, Swipeable as RnghSwipeable } from 'react-native-gesture-handler';
 declare type State = 'closed' | 'leftOpen' | 'rightOpen';
 declare type RnghSwipeableProps = ComponentProps<typeof RnghSwipeable>;
 export interface SwipeableProps extends Pick<RnghSwipeableProps, 'enableTrackpadTwoFingerGesture' | 'friction' | 'leftThreshold' | 'rightThreshold' | 'overshootLeft' | 'overshootRight' | 'overshootFriction' | 'useNativeAnimations' | 'containerStyle' | 'childrenContainerStyle'> {
@@ -37,9 +37,13 @@ export interface SwipeableProps extends Pick<RnghSwipeableProps, 'enableTrackpad
      * Testing ID of the component
      */
     testID?: string;
+    /**
+     * Variant of the component.
+     */
+    variant?: 'card' | 'full-width';
 }
-declare const _default: (({ children, state, onStateChange, leftActions, leftActionsWidth, rightActions, rightActionsWidth, ...swipeableProps }: SwipeableProps) => JSX.Element) & {
-    Action: ({ intent, onPress, style, children, testID, }: import("./SwipeableAction").SwipeableActionProps) => JSX.Element;
+declare const _default: (({ children, state, onStateChange, leftActions, leftActionsWidth, rightActions, rightActionsWidth, variant, ...swipeableProps }: SwipeableProps) => React.JSX.Element) & {
+    Action: ({ intent, onPress, style, children, testID, }: import("./SwipeableAction").SwipeableActionProps) => React.JSX.Element;
     Content: typeof RectButton;
 };
 export default _default;

package/types/components/Switch/SelectorSwitch/Option.d.ts

@@ -1,4 +1,5 @@
 import type { ReactElement } from 'react';
+import React from 'react';
 import { LayoutChangeEvent } from 'react-native';
 import type { BadgeConfigType, OptionType } from '.';
 export declare const OptionContent: ({ content, badge, }: {
@@ -6,7 +7,7 @@ export declare const OptionContent: ({ content, badge, }: {
     badge?: {
         type: "status";
     } | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;
 declare const Option: <T>({ text, icon, badge, selected, onLayout, index, }: Pick<OptionType<T>, "text" | "icon" | "badge"> & {
     selected: boolean;
     onLayout?: ((e: LayoutChangeEvent) => void) | undefined;

package/types/components/Switch/SelectorSwitch/StyledSelectorSwitch.d.ts

@@ -1,26 +1,19 @@
-/// <reference types="react" />
 import { View, Animated } from 'react-native';
 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 StyledTextWrapper: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & 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;
 }, {}, {}>;
 export declare const StyledIconWrapper: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & 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;
 }, {}, {}>;
 export declare const StyledKnot: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & 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;
 }, {}, {}>;

package/types/components/Switch/StyledSwitch.d.ts

@@ -1,18 +1,15 @@
-/// <reference types="react" />
 import { Animated, View } from 'react-native';
 export declare type Variant = 'checked' | 'unchecked' | 'disabled-checked' | 'disabled-unchecked';
 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;
 } & {
     themeVariant: Variant;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledKnot: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & 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;
 }, {}, {}>;
 export { StyledWrapper, StyledKnot };

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

@@ -1,8 +1,9 @@
+import React from 'react';
 import { Animated } from 'react-native';
 declare const ActiveTabIndicator: ({ scrollOffsetAnimatedValue, positionAnimatedValue, tabsLength, tabsWidth, }: {
     scrollOffsetAnimatedValue: Animated.Value;
     positionAnimatedValue: Animated.Value;
     tabsLength: number;
     tabsWidth: number;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default ActiveTabIndicator;

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

@@ -6,5 +6,5 @@ declare const SceneView: ({ lazy, lazyPreloadDistance, children, index, selected
     lazy?: boolean | undefined;
     lazyPreloadDistance?: number | undefined;
     testID?: string | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default SceneView;

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

@@ -1,3 +1,7 @@
+import React from 'react';
 import type { TabsProps } from '.';
-declare const ScrollableTab: ({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, swipeEnabled, testID: componentTestID, }: TabsProps) => JSX.Element;
+export interface ScrollableTabProps extends TabsProps {
+    variant?: 'underlined' | 'highlighted';
+}
+declare const ScrollableTab: ({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, swipeEnabled, testID: componentTestID, variant, }: ScrollableTabProps) => React.JSX.Element;
 export default ScrollableTab;

package/types/components/Tabs/{ScrollableTabsHeader.d.ts → ScrollableTabsHeader/ScrollableTabsHeader.d.ts}

@@ -1,5 +1,6 @@
-import { StyleProp, ViewStyle, ViewProps } from 'react-native';
-import type { TabType } from '.';
+import React from 'react';
+import { StyleProp, ViewProps, ViewStyle } from 'react-native';
+import type { TabType } from '..';
 export interface ScrollableTabHeaderProps extends ViewProps {
     /**
      * Callback which is called on tab press, receiving key of upcoming active Tab.
@@ -30,6 +31,10 @@ export interface ScrollableTabHeaderProps extends ViewProps {
         right: number;
         left: number;
     };
+    /**
+     * Variant of the tab header
+     */
+    variant?: 'underlined' | 'highlighted';
 }
-declare const ScrollableTabHeader: ({ onTabPress, selectedIndex, tabs, barStyle, testID, insets, }: ScrollableTabHeaderProps) => JSX.Element;
+declare const ScrollableTabHeader: ({ onTabPress, selectedIndex, tabs, barStyle, testID, insets, variant, }: ScrollableTabHeaderProps) => React.JSX.Element;
 export default ScrollableTabHeader;

package/types/components/Tabs/ScrollableTabsHeader/hooks/useInitHighlightedAnimation.d.ts

@@ -0,0 +1,9 @@
+import { Animated } from 'react-native';
+declare const useInitHighlightedAnimation: ({ selectedIndex, tabsLength, variant, }: {
+    selectedIndex?: number | undefined;
+    tabsLength: number;
+    variant: 'underlined' | 'highlighted';
+}) => {
+    tabsAnims: Animated.Value[];
+};
+export default useInitHighlightedAnimation;

package/types/components/Tabs/ScrollableTabsHeader/hooks/useInitUnderlinedAnimation.d.ts

@@ -0,0 +1,10 @@
+import { Animated } from 'react-native';
+declare const useInitUnderlinedAnimation: ({ tabsLength, selectedIndex, variant, }: {
+    tabsLength: number;
+    selectedIndex?: number | undefined;
+    variant: 'underlined' | 'highlighted';
+}) => {
+    underlinedTranslateX: Animated.AnimatedInterpolation<string | number>[];
+    underlinedOpacity: Animated.AnimatedInterpolation<string | number>[];
+};
+export default useInitUnderlinedAnimation;

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

@@ -1,27 +1,19 @@
-/// <reference types="react" />
 import { Animated, View } from 'react-native';
-import PagerView from 'react-native-pager-view';
 declare const TabScreen: 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 TabContainer: 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-pager-view").PagerViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, {}, {
-    ref?: import("react").Ref<PagerView> | undefined;
-}>;
 declare const HeaderTabWrapper: 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;
@@ -33,31 +25,31 @@ declare const HeaderTabWrapper: import("@emotion/native").StyledComponent<import
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const HeaderTabItem: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & 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;
 } & {
     isFirstItem?: boolean | undefined;
 }, {}, {}>;
 declare const HeaderTabItemOutlineWrapper: 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 HeaderTabItemOutline: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & 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;
 } & {
     themeActive: boolean;
 }, {}, {}>;
 declare const HeaderTabItemWrapper: 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 { HeaderTabItem, TabScreen, TabContainer, HeaderTabWrapper, ContentWrapper, HeaderTabItemOutlineWrapper, HeaderTabItemOutline, HeaderTabItemWrapper, };
+declare const HeaderTabItemIndicator: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {}>;
+export { HeaderTabItem, TabScreen, TabContainer, HeaderTabWrapper, HeaderTabItemOutlineWrapper, HeaderTabItemOutline, HeaderTabItemWrapper, HeaderTabItemIndicator, };

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

@@ -1,15 +1,13 @@
-/// <reference types="react" />
 import { Animated, View } from 'react-native';
-import PagerView from 'react-native-pager-view';
 declare const TabContainer: 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 HeaderTabWrapper: 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;
@@ -22,40 +20,32 @@ declare const HeaderTabWrapper: import("@emotion/native").StyledComponent<import
 }>;
 declare const HeaderTab: 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 HeaderTabItem: 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<Animated.AnimatedProps<import("react-native-pager-view").PagerViewProps & import("react").RefAttributes<PagerView>> & {
-    children?: import("react").ReactNode;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, {}, {}>;
 declare const TabScreen: 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 StyledIndicator: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & 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;
 } & {
     themeWidth: number;
 }, {}, {}>;
 declare const StyledBadgeWrapper: 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 { TabContainer, HeaderTabWrapper, HeaderTab, HeaderTabItem, ContentWrapper, TabScreen, StyledIndicator, StyledBadgeWrapper, };
+export { TabContainer, HeaderTabWrapper, HeaderTab, HeaderTabItem, TabScreen, StyledIndicator, StyledBadgeWrapper, };

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 export declare type StatusBadgeType = {
     type: 'status';
 };
@@ -12,5 +12,5 @@ interface TabWithBadgeProps {
     config?: BadgeConfigType;
     tabItem: ReactNode;
 }
-declare const TabWithBadge: ({ config, tabItem }: TabWithBadgeProps) => JSX.Element;
+declare const TabWithBadge: ({ config, tabItem }: TabWithBadgeProps) => React.JSX.Element;
 export default TabWithBadge;

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

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import React from 'react';
 import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 import { IconName } from '../Icon';
 import type { BadgeConfigType } from './TabWithBadge';
@@ -55,7 +56,7 @@ export interface TabsProps extends ViewProps {
     testID?: string;
 }
 declare const _default: (({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, swipeEnabled, testID: componentTestID, }: TabsProps) => JSX.Element) & {
-    Scroll: ({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, swipeEnabled, testID: componentTestID, }: TabsProps) => JSX.Element;
+    Scroll: ({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, swipeEnabled, testID: componentTestID, variant, }: import("./ScrollableTabs").ScrollableTabProps) => React.JSX.Element;
     useIsFocused: () => boolean | undefined;
 };
 export default _default;

package/types/components/Tag/StyledTag.d.ts

@@ -1,21 +1,17 @@
-/// <reference types="react" />
 import { View } from 'react-native';
 declare type ThemeIntent = 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
-declare type ThemeVariant = 'filled' | 'outlined';
 declare const StyledView: 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: ThemeIntent;
-    themeVariant: ThemeVariant;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-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;
 } & {
     themeIntent: ThemeIntent;
-    themeVariant: ThemeVariant;
 }, {}, {}>;
-export { StyledView, StyledText };
+export { StyledText, StyledView };

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

@@ -10,6 +10,7 @@ interface TagProps extends ViewProps {
      */
     intent?: 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
     /**
+     * @deprecated Tag variant prop is deprecated and will be removed in the next major release. Please remove it.
      * Tag variant.
      */
     variant?: 'filled' | 'outlined';