@hero-design/rn 7.23.0 → 7.25.0

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

@@ -1,5 +1,4 @@
 import { RefreshControlProps as NativeRefreshControlProps } from 'react-native';
-export interface RefreshControlProps extends Omit<NativeRefreshControlProps, 'colors' | 'tintColor'> {
-}
+export declare type RefreshControlProps = Omit<NativeRefreshControlProps, 'colors' | 'tintColor'>;
 declare const RefreshControl: ({ ...props }: RefreshControlProps) => JSX.Element;
 export default RefreshControl;

package/types/components/RichTextEditor/EditorToolbar.d.ts

@@ -13,5 +13,5 @@ export interface EditorToolbarProps {
      */
     testID?: string;
 }
-declare const EditorToolbar: ({ name, buttons, testID, }: EditorToolbarProps) => JSX.Element;
+declare const EditorToolbar: ({ name, buttons, testID, }: EditorToolbarProps) => JSX.Element | null;
 export default EditorToolbar;

package/types/components/RichTextEditor/MentionList.d.ts

@@ -12,5 +12,5 @@ export interface MentionListProps<TMetaData = unknown> {
      */
     render: (searchText: string, onSelect: (id: string, name: string, options?: OnSelectOptionsType<TMetaData>) => void) => JSX.Element;
 }
-declare const MentionList: <TMetaData>({ name: eventPrefix, render }: MentionListProps<TMetaData>) => JSX.Element;
+declare const MentionList: <TMetaData>({ name: eventPrefix, render, }: MentionListProps<TMetaData>) => JSX.Element | null;
 export default MentionList;

package/types/components/RichTextEditor/StyledRichTextEditor.d.ts

@@ -1,16 +1,16 @@
 import { View } from 'react-native';
 import { WebView } from 'react-native-webview';
 export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 export declare const StyledWebView: import("@emotion/native").StyledComponent<import("react-native-webview/lib/WebViewTypes").IOSWebViewProps & import("react-native-webview/lib/WebViewTypes").AndroidWebViewProps & import("react-native-webview/lib/WebViewTypes").WindowsWebViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     height: number | undefined;
 }, {}, {
-    ref?: import("react").Ref<WebView<unknown>>;
+    ref?: import("react").Ref<WebView<unknown>> | undefined;
 }>;

package/types/components/RichTextEditor/StyledToolbar.d.ts

@@ -1,21 +1,21 @@
 import { TouchableOpacity, View } from 'react-native';
 export declare const StyledToolbarButton: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     selected: boolean;
 }, {}, {
-    ref?: import("react").Ref<TouchableOpacity>;
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
 }>;
 export declare const StyledToolbar: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 export declare const StyledSeparator: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;

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

@@ -1,7 +1,7 @@
 import type { RichTextEditorProps, RichTextEditorRef } from './RichTextEditor';
 export type { RichTextEditorProps, RichTextEditorRef };
 declare const _default: import("react").ForwardRefExoticComponent<Omit<RichTextEditorProps, "forwardedRef"> & import("react").RefAttributes<RichTextEditorRef>> & {
-    MentionList: <TMetaData>({ name: eventPrefix, render }: import("./MentionList").MentionListProps<TMetaData>) => JSX.Element;
-    Toolbar: ({ name, buttons, testID, }: import("./EditorToolbar").EditorToolbarProps) => JSX.Element;
+    MentionList: <TMetaData>({ name: eventPrefix, render, }: import("./MentionList").MentionListProps<TMetaData>) => JSX.Element | null;
+    Toolbar: ({ name, buttons, testID, }: import("./EditorToolbar").EditorToolbarProps) => JSX.Element | null;
 };
 export default _default;

package/types/components/SectionHeading/StyledHeading.d.ts

@@ -1,20 +1,20 @@
 import { View } from 'react-native';
 declare const StyledHeading: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledIconWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 export { StyledHeading, StyledIconWrapper, StyledWrapper };

package/types/components/Select/MultiSelect/Option.d.ts

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 declare const Option: ({ text, disabled, selected, onPress, }: {
     text: string | ReactElement;
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     selected: boolean;
     onPress: () => void;
 }) => JSX.Element;

package/types/components/Select/SingleSelect/Option.d.ts

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 declare const Option: ({ text, disabled, selected, onPress, }: {
     text: string | ReactElement;
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     selected: boolean;
     onPress: () => void;
 }) => JSX.Element;

package/types/components/Select/StyledSelect.d.ts

@@ -1,24 +1,24 @@
 import { View } from 'react-native';
 declare const SectionSpacer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 declare const OptionSpacer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 declare const FooterText: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
 declare const StyledSearchBar: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 export { SectionSpacer, OptionSpacer, FooterText, StyledSearchBar };

package/types/components/Select/helpers.d.ts

@@ -1,5 +1,5 @@
 import type { SectionData, CombinedOptionsType, OptionType } from './types';
-export declare const getKey: <V, T extends OptionType<V>>(option: T, index: number, keyExtractor?: (opt: T, i?: number) => string) => import("react").Key;
+export declare const getKey: <V, T extends OptionType<V>>(option: T, index: number, keyExtractor?: ((opt: T, i?: number | undefined) => string) | undefined) => import("react").Key;
 export declare const isSections: <V, T extends OptionType<V>>(options: CombinedOptionsType<V, T>) => options is SectionData<V, T>[];
 export declare const toSections: <V, T extends OptionType<V>>(options: CombinedOptionsType<V, T>) => SectionData<V, T>[];
 export declare const toFlatOptions: <V, T extends OptionType<V>>(options: CombinedOptionsType<V, T>) => OptionType<V>[];

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

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

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

@@ -1,33 +1,34 @@
 import { View } from 'react-native';
 import type { ViewProps } from 'react-native';
 declare const StyledView: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledSpinnerContainer: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledSpinnerRow: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     themePosition: 'top' | 'bottom';
     themeSize: 'small' | 'medium';
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledSpinnerDot: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     themePosition: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
     themeSize: 'small' | 'medium';
+    themeIntent: 'primary' | 'inverted';
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 export { StyledView, StyledSpinnerContainer, StyledSpinnerRow, StyledSpinnerDot, };

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

@@ -5,10 +5,14 @@ interface SpinnerProps extends ViewProps {
      * Size of Spinner.
      */
     size?: 'small' | 'medium';
+    /**
+     * Spinner's variant.
+     */
+    intent?: 'primary' | 'inverted';
     /**
      * Testing id of the component.
      */
     testID?: string;
 }
-declare const Spinner: ({ testID, size, ...nativeProps }: SpinnerProps) => ReactElement;
+declare const Spinner: ({ testID, size, intent, ...nativeProps }: SpinnerProps) => ReactElement;
 export default Spinner;

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

@@ -0,0 +1,10 @@
+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;
+} & {
+    themeIntent: ActionIntent;
+}, {}, {
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
+}>;

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

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { ActionIntent } from './StyledSwipeable';
+export interface SwipeableActionProps {
+    /**
+     * Visual intent color applied to action.
+     */
+    intent?: ActionIntent;
+    /**
+     * Callback when the action button is pressed.
+     */
+    onPress?: () => void;
+    /**
+     * Action button's content
+     */
+    children?: ReactNode;
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const SwipeableAction: ({ intent, onPress, style, children, testID, }: SwipeableActionProps) => JSX.Element;
+export default SwipeableAction;

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

@@ -0,0 +1,45 @@
+import { ComponentProps, ReactNode } from 'react';
+import { Swipeable as RnghSwipeable, RectButton } 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'> {
+    /**
+     * React node that is swipeable.
+     */
+    children: ReactNode;
+    /**
+     * State of the component.
+     */
+    state?: 'closed' | 'leftOpen' | 'rightOpen';
+    /**
+     * Callback when the state of the component changes.
+     */
+    onStateChange?: (state: State) => void;
+    /**
+     * Action panel that is going to be revealed from the left side when user swipes right.
+     */
+    leftActions?: ReactNode;
+    /**
+     * Width of the left action panel.
+     * By default, it will take up the whole width of the device.
+     */
+    leftActionsWidth?: number;
+    /**
+     * Action panel that is going to be revealed from the right side when user swipes left.
+     */
+    rightActions?: ReactNode;
+    /**
+     * Width of the right action panel.
+     * By default, it will take up the whole width of the device.
+     */
+    rightActionsWidth?: number;
+    /**
+     * Testing ID of the component
+     */
+    testID?: string;
+}
+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;
+    Content: typeof RectButton;
+};
+export default _default;

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

@@ -2,7 +2,9 @@ import type { ReactElement } from 'react';
 import type { BadgeConfigType, OptionType } from '.';
 export declare const OptionContent: ({ content, badge, }: {
     content: ReactElement;
-    badge?: BadgeConfigType;
+    badge?: {
+        type: "status";
+    } | undefined;
 }) => JSX.Element;
 declare const Option: <T>({ text, icon, badge, selected, }: Pick<OptionType<T>, "text" | "icon" | "badge"> & {
     selected: boolean;

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

@@ -1,19 +1,19 @@
 import { View } from 'react-native';
 export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 export declare const StyledTextWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 export declare const StyledIconWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;

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

@@ -2,19 +2,19 @@ import { Animated, View } from 'react-native';
 declare type ThemeSize = 'small' | 'medium';
 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;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     themeVariant: Variant;
     themeSize: ThemeSize;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    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;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     themeSize: ThemeSize;
 }, {}, {}>;

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

@@ -1,26 +1,26 @@
 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;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 declare const TabContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 declare const ContentWrapper: import("@emotion/native").StyledComponent<import("react-native-pager-view").PagerViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<PagerView>;
+    ref?: import("react").Ref<PagerView> | undefined;
 }>;
 declare const HeaderTabWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     themeInsets: {
         top: number;
@@ -29,34 +29,34 @@ declare const HeaderTabWrapper: import("@emotion/native").StyledComponent<import
         left: number;
     };
 }, {}, {
-    ref?: import("react").Ref<View>;
+    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;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
-    isFirstItem?: boolean;
+    isFirstItem?: boolean | undefined;
 }, {}, {}>;
 declare const HeaderTabItemOutlineWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    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;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     themeActive: boolean;
 }, {}, {}>;
 declare const HeaderTabItemWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 export { HeaderTabItem, TabScreen, TabContainer, HeaderTabWrapper, ContentWrapper, HeaderTabItemOutlineWrapper, HeaderTabItemOutline, HeaderTabItemWrapper, };

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

@@ -1,14 +1,14 @@
 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;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 declare const HeaderTabWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     themeInsets: {
         top: number;
@@ -17,44 +17,44 @@ declare const HeaderTabWrapper: import("@emotion/native").StyledComponent<import
         left: number;
     };
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 declare const HeaderTab: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 declare const HeaderTabItem: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    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;
-    as?: import("react").ElementType<any>;
+    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;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    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;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     themeWidth: number;
 }, {}, {}>;
 declare const StyledBadgeWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 export { TabContainer, HeaderTabWrapper, HeaderTab, HeaderTabItem, ContentWrapper, TabScreen, StyledIndicator, StyledBadgeWrapper, };

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

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