@hero-design/rn 8.82.2-alpha.1 → 8.83.0-test.0

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

@@ -1,48 +1,48 @@
 import { TouchableHighlight, View } from 'react-native';
 import type { Theme } from '@emotion/react';
-type Intent = 'primary' | 'secondary' | 'danger';
-type ThemeVariant = 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger' | 'text-primary' | 'text-secondary' | 'text-danger';
+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;
-    as?: React.ElementType;
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     themeButtonVariant: ThemeVariant;
-    loading?: boolean;
-    themeInlineText?: boolean;
+    loading?: boolean | undefined;
+    themeInlineText?: boolean | undefined;
 }, {}, {
     ref?: import("react").Ref<TouchableHighlight> | undefined;
 }>;
 declare const StyledButtonText: import("@emotion/native").StyledComponent<import("../Typography/Title").TitleProps & {
-    theme?: Theme;
-    as?: React.ElementType;
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     themeButtonVariant: ThemeVariant;
 }, {}, {}>;
 declare const StyledButtonTitleOfVariantText: import("@emotion/native").StyledComponent<import("../Typography/Body").BodyProps & {
-    theme?: Theme;
-    as?: React.ElementType;
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
-    disabled?: boolean;
-    themeButtonVariant: "text-primary" | "text-secondary" | "text-danger";
-    themeIsPressed?: boolean;
+    disabled?: boolean | undefined;
+    themeButtonVariant: 'text-primary' | 'text-secondary' | 'text-danger';
+    themeIsPressed?: boolean | undefined;
 }, {}, {}>;
 declare const StyledButtonIconWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: Theme;
-    as?: React.ElementType;
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
-    themePosition: "left" | "right";
+    themePosition: 'left' | 'right';
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledButtonIcon: import("@emotion/native").StyledComponent<import("../Icon").IconProps & {
-    theme?: Theme;
-    as?: React.ElementType;
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     themeButtonVariant: ThemeVariant;
-    themeIsPressed?: boolean;
+    themeIsPressed?: boolean | undefined;
 }, {}, {}>;
 export { StyledButtonContainer, StyledButtonText, StyledButtonIconWrapper, StyledButtonIcon, StyledButtonTitleOfVariantText, };
 export type { Intent, ThemeVariant };

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

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

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

@@ -1,61 +1,61 @@
 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;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | 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;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | 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;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
-    themeItemWidth?: number;
+    themeItemWidth?: number | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledCalendarCell: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
-    variant?: "default" | "current" | "selected";
-    themeItemWidth?: number;
+    variant?: "selected" | "default" | "current" | undefined;
+    themeItemWidth?: number | undefined;
 }, {}, {
     ref?: import("react").Ref<TouchableOpacity> | undefined;
 }>;
 declare const StyledCalendarRow: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | 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;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
-    themeItemWidth?: number;
+    themeItemWidth?: number | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledDisabledCalendarRowItem: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
-    themeItemWidth?: number;
+    themeItemWidth?: number | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledMark: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
-    variant: "primary" | "inverted";
+    variant: 'primary' | 'inverted';
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;

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

@@ -1,15 +1,15 @@
 import { View } from 'react-native';
 declare const StyledDataCard: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | 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;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
-    themeIntent: "success" | "info" | "warning" | "danger" | "archived" | "primary";
+    themeIntent: 'success' | 'info' | 'warning' | 'danger' | 'archived' | 'primary';
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;

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

@@ -1,10 +1,10 @@
 import { View } from 'react-native';
 declare const StyledCard: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
-    themeIntent?: "primary" | "success" | "warning" | "danger" | "archived" | "neutral";
-    themeVariant?: "basic" | "super-round";
+    themeIntent?: "neutral" | "primary" | "success" | "warning" | "danger" | "archived" | undefined;
+    themeVariant?: "basic" | "super-round" | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
-export type CardCarouselHandles = {
+export declare type CardCarouselHandles = {
     snapToIndex: (index: number) => void;
 };
 export interface CardCarouselProps {

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

@@ -2,22 +2,22 @@ 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;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | 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;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | 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;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {}>;
 declare const StyledItemWrapper: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;

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

@@ -1,53 +1,53 @@
 import { View, ImageResizeMode } from 'react-native';
 declare const StyledBackDrop: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeSlideBackground: string;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledCarouselView: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | 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("../Typography/Title").TitleProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | 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;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | 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;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
-    themeHeight?: number | `${number}%`;
-    themeWidth?: number | `${number}%`;
-    themeResizeMode?: ImageResizeMode;
+    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;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | 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;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | 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;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | 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;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;

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

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

package/types/components/Checkbox/StyledCheckbox.d.ts

@@ -1,34 +1,34 @@
 import { TouchableOpacity, View } from 'react-native';
-type CheckboxThemeState = 'default' | 'disabled' | 'readonly';
+declare type CheckboxThemeState = 'default' | 'disabled' | 'readonly';
 export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeState: CheckboxThemeState;
 }, {}, {
     ref?: import("react").Ref<TouchableOpacity> | undefined;
 }>;
 export declare const StyledDescription: import("@emotion/native").StyledComponent<import("../Typography/Body").BodyProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {}>;
 export declare const StyledCheckboxContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 export declare const StyledCheckbox: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeState: CheckboxThemeState;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 export declare const StyledCheckMark: import("@emotion/native").StyledComponent<import("../Icon").IconProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeState: CheckboxThemeState;
 }, {}, {}>;

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

@@ -35,7 +35,7 @@ export interface CheckboxProps {
      */
     readonly?: boolean;
 }
-type getStateType = {
+declare type getStateType = {
     disabled: boolean;
     readonly: boolean;
 };

package/types/components/Chip/StyledChip.d.ts

@@ -1,16 +1,16 @@
 import { TouchableOpacity } from 'react-native';
-type StyledChipWrapperProps = {
+declare type StyledChipWrapperProps = {
     themeVariant?: 'outlined' | 'filled' | 'compact' | 'compact-outlined';
     themeSelected?: boolean;
 };
 declare const StyledChipWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & StyledChipWrapperProps, {}, {
     ref?: import("react").Ref<TouchableOpacity> | undefined;
 }>;
 declare const StyledChipIcon: import("@emotion/native").StyledComponent<import("../Icon").IconProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {}>;
 export { StyledChipWrapper, StyledChipIcon };

package/types/components/Collapse/StyledCollapse.d.ts

@@ -1,7 +1,7 @@
 import { Animated, View } from 'react-native';
 declare const StyledWrapper: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {}>;
 /**
  * Height need to be high enough to cover most scenario
@@ -9,14 +9,14 @@ declare const StyledWrapper: import("@emotion/native").StyledComponent<Animated.
  * to use with Animated.timing
  */
 declare const StyledHiddenWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledChildWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;

package/types/components/CompoundSearch/CompoundSearchHandler.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { IconName } from '../Icon';
+interface CompoundSearchHandlerProps {
+    /**
+     * Name of Icon or ReactElement to render on the left side of the input, before the user's cursor.
+     */
+    prefix?: IconName | React.ReactElement;
+    /**
+     * Name of Icon or ReactElement to render on the right side of the input.
+     */
+    suffix?: IconName | React.ReactElement;
+    /**
+     * Additional wrapper style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Label of the Input handler.
+     */
+    label: React.ReactNode;
+    /**
+     * Content of the Input handler.
+     */
+    content: React.ReactNode;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const CompoundSearchHandler: (props: CompoundSearchHandlerProps) => React.JSX.Element;
+export default CompoundSearchHandler;

package/types/components/CompoundSearch/CompoundSearchTextInput.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import type { TextInputProps as NativeTextInputProps, TextInput as RNTextInput, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { State } from './StyledCompoundSearch';
+import { IconName } from '../Icon';
+export declare type CompoundSearchTextInputHandles = Pick<RNTextInput, 'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps'>;
+interface CompoundSearchTextInputProps extends NativeTextInputProps {
+    /**
+     * Name of Icon or ReactElement to render on the left side of the input, before the user's cursor.
+     */
+    prefix?: IconName | React.ReactElement;
+    /**
+     * Name of Icon or ReactElement to render on the right side of the input.
+     */
+    suffix?: IconName | React.ReactElement;
+    /**
+     * Additional wrapper style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Input text style.
+     */
+    textStyle?: StyleProp<TextStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * Accessibility label for the input (Android).
+     */
+    accessibilityLabelledBy?: string;
+    /**
+     *  Placeholder text to display.
+     * */
+    placeholder?: string;
+    /**
+     * Whether the input is editable.
+     * */
+    editable?: boolean;
+    /**
+     * Whether the input is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The max length of the input.
+     * If the max length is set, the input will display the current length and the max length.
+     * */
+    maxLength?: number;
+    /**
+     * Whether to hide the character count.
+     * */
+    renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
+}
+export declare const getState: ({ disabled, editable, isEmptyValue, }: {
+    disabled?: boolean | undefined;
+    editable?: boolean | undefined;
+    isFocused?: boolean | undefined;
+    isEmptyValue?: boolean | undefined;
+}) => State;
+declare const CompoundSearchTextInput: React.ForwardRefExoticComponent<CompoundSearchTextInputProps & React.RefAttributes<CompoundSearchTextInputHandles>>;
+export default CompoundSearchTextInput;

package/types/components/CompoundSearch/StyledCompoundSearch.d.ts

@@ -0,0 +1,40 @@
+import { TextInput, View } from 'react-native';
+export declare type State = 'default' | 'filled' | 'disabled' | 'readonly';
+export declare const StyledContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const StyledInputContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeFocused: boolean;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const StyledAffixContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const StyledSuffixContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const StyledInput: import("@emotion/native").StyledComponent<import("react-native").TextInputProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<TextInput> | undefined;
+}>;
+export declare const StyledHandlerContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;

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

@@ -0,0 +1,8 @@
+import CompoundSearchHandler from './CompoundSearchHandler';
+import CompoundSearchTextInput from './CompoundSearchTextInput';
+declare type CompoundSearchType = {
+    TextInput: typeof CompoundSearchTextInput;
+    Handler: typeof CompoundSearchHandler;
+};
+declare const CompoundSearch: CompoundSearchType;
+export default CompoundSearch;