@hero-design/rn 8.44.0-alpha.0 → 8.44.1

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

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 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) | undefined) => import("react").Key;
+export declare const getKey: <V, T extends OptionType<V>>(option: T, index: number, keyExtractor?: ((opt: T, i?: number) => string) | undefined) => string | number;
 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/Select/index.d.ts

@@ -1,8 +1,9 @@
+/// <reference types="react" />
 import MultiSelect from './MultiSelect';
 import type { MultiSelectProps } from './MultiSelect';
 import type { SingleSelectProps } from './SingleSelect';
 export type { MultiSelectProps, SingleSelectProps };
-declare const _default: (<V, T extends import("./types").OptionType<V>>({ label, loading, inputProps, onConfirm, onDismiss, onEndReached, onQueryChange, options, renderOption, renderSelectedValue, query, error, editable, disabled, required, style, testID, value, }: SingleSelectProps<V, T>) => JSX.Element) & {
+declare const _default: (<V, T extends import("./types").OptionType<V>>({ label, loading, inputProps, onConfirm, onDismiss, onEndReached, onQueryChange, options, renderOption, renderSelectedValue, query, error, editable, disabled, required, style, testID, value, }: SingleSelectProps<V, T>) => import("react").JSX.Element) & {
     Multi: typeof MultiSelect;
 };
 export default _default;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ViewProps } from 'react-native';
 export interface SkeletonProps extends ViewProps {
     /**
@@ -9,5 +10,5 @@ export interface SkeletonProps extends ViewProps {
      */
     variant?: 'circular' | 'rectangular' | 'rounded';
 }
-declare const Skeleton: ({ intent, variant, style, onLayout, ...props }: SkeletonProps) => JSX.Element;
+declare const Skeleton: ({ intent, variant, style, onLayout, ...props }: SkeletonProps) => React.JSX.Element;
 export default Skeleton;

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/Success/StyledSuccess.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Modal, View } from 'react-native';
+import { View } from 'react-native';
 type SuccessVariant = 'full-screen' | 'in-page';
 declare const StyledSuccessContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
@@ -40,15 +40,11 @@ declare const StyledSuccessButtonContainer: import("@emotion/native").StyledComp
     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;
 }, {}, {}>;
-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;
-}>;
+}, {}, {}>;
 export { SuccessVariant, StyledSuccessImage, StyledSuccessContainer, StyledSuccessContent, StyledSuccessImageContainer, StyledSuccessTitle, StyledSuccessDescription, StyledSuccessButtonContainer, StyledSuccessButtonPrimary, StyledSuccessModal, };

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,4 +1,4 @@
-import { ComponentProps, ReactNode } from 'react';
+import React, { ComponentProps, ReactNode } from 'react';
 import { RectButton, Swipeable as RnghSwipeable } from 'react-native-gesture-handler';
 type State = 'closed' | 'leftOpen' | 'rightOpen';
 type RnghSwipeableProps = ComponentProps<typeof RnghSwipeable>;
@@ -38,8 +38,8 @@ export interface SwipeableProps extends Pick<RnghSwipeableProps, 'enableTrackpad
      */
     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;
+declare const _default: (({ children, state, onStateChange, leftActions, leftActionsWidth, rightActions, rightActionsWidth, ...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

@@ -7,20 +7,14 @@ export declare const StyledWrapper: import("@emotion/native").StyledComponent<im
     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;
 }, {}, {}>;
 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;
 }, {}, {}>;
 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;
 }, {}, {}>;

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

@@ -10,8 +10,6 @@ declare const StyledWrapper: import("@emotion/native").StyledComponent<import("r
     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;
 }, {}, {}>;

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,4 @@
+import React from 'react';
 import type { TabsProps } from '.';
-declare const ScrollableTab: ({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, swipeEnabled, testID: componentTestID, }: TabsProps) => JSX.Element;
+declare const ScrollableTab: ({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, swipeEnabled, testID: componentTestID, }: TabsProps) => React.JSX.Element;
 export default ScrollableTab;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import type { TabType } from '.';
 export interface ScrollableTabHeaderProps extends ViewProps {
@@ -31,5 +32,5 @@ export interface ScrollableTabHeaderProps extends ViewProps {
         left: number;
     };
 }
-declare const ScrollableTabHeader: ({ onTabPress, selectedIndex, tabs, barStyle, testID, insets, }: ScrollableTabHeaderProps) => JSX.Element;
+declare const ScrollableTabHeader: ({ onTabPress, selectedIndex, tabs, barStyle, testID, insets, }: ScrollableTabHeaderProps) => React.JSX.Element;
 export default ScrollableTabHeader;

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

@@ -33,8 +33,6 @@ 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;
 } & {
@@ -47,8 +45,6 @@ declare const HeaderTabItemOutlineWrapper: import("@emotion/native").StyledCompo
     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;
 } & {

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

@@ -33,8 +33,6 @@ declare const HeaderTabItem: import("@emotion/native").StyledComponent<import("r
     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;
 }, {}, {}>;
@@ -45,8 +43,6 @@ declare const TabScreen: import("@emotion/native").StyledComponent<import("react
     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;
 } & {

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 export 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, }: TabsProps) => React.JSX.Element;
     useIsFocused: () => boolean | undefined;
 };
 export default _default;

package/types/components/TextInput/StyledTextInput.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TextInput, View } from 'react-native';
+import { TextInput, View, Animated } from 'react-native';
 export type State = 'default' | 'filled' | 'disabled' | 'readonly' | 'error';
 type Variant = 'text' | 'textarea';
 declare const StyledContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
@@ -8,32 +8,12 @@ declare const StyledContainer: import("@emotion/native").StyledComponent<import(
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledLabelContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, {}, {
-    ref?: import("react").Ref<View> | undefined;
-}>;
-declare const StyledLabel: import("@emotion/native").StyledComponent<import("../Typography/Caption").CaptionProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    themeState: State;
-}, {}, {}>;
-declare const StyledAsteriskLabel: import("@emotion/native").StyledComponent<import("../Typography/Caption").CaptionProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    themeState: State;
-}, {}, {}>;
-declare const StyledLabelContainerInsideTextInput: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+declare const StyledLabelContainerInsideTextInput: 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> | undefined;
 } & {
     themeVariant: Variant;
-}, {}, {
-    ref?: import("react").Ref<View> | undefined;
-}>;
+}, {}, {}>;
 declare const StyledLabelInsideTextInput: import("@emotion/native").StyledComponent<import("../Typography/Body").BodyProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -62,7 +42,7 @@ declare const StyledMaxLengthMessage: import("@emotion/native").StyledComponent<
 } & {
     themeState: State;
 }, {}, {}>;
-declare const StyledHelperText: ({ children, fontWeight, intent, allowFontScaling, ...nativeProps }: import("../Typography/Caption").CaptionProps) => JSX.Element;
+declare const StyledHelperText: ({ children, fontWeight, intent, allowFontScaling, ...nativeProps }: import("../Typography/Caption").CaptionProps) => import("react").JSX.Element;
 declare const StyledTextInput: import("@emotion/native").StyledComponent<import("react-native").TextInputProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -104,4 +84,4 @@ declare const StyledErrorAndMaxLengthContainer: import("@emotion/native").Styled
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-export { StyledTextInputContainer, StyledLabel, StyledLabelContainer, StyledAsteriskLabel, StyledAsteriskLabelInsideTextInput, StyledTextInput, StyledError, StyledMaxLengthMessage, StyledLabelInsideTextInput, StyledContainer, StyledErrorContainer, StyledHelperText, StyledTextInputAndLabelContainer, StyledLabelContainerInsideTextInput, StyledErrorAndHelpTextContainer, StyledBorderBackDrop, StyledErrorAndMaxLengthContainer, };
+export { StyledTextInputContainer, StyledAsteriskLabelInsideTextInput, StyledTextInput, StyledError, StyledMaxLengthMessage, StyledLabelInsideTextInput, StyledContainer, StyledErrorContainer, StyledHelperText, StyledTextInputAndLabelContainer, StyledLabelContainerInsideTextInput, StyledErrorAndHelpTextContainer, StyledBorderBackDrop, StyledErrorAndMaxLengthContainer, };

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

@@ -91,5 +91,6 @@ export declare const getState: ({ disabled, error, editable, loading, isEmptyVal
     isFocused?: boolean | undefined;
     isEmptyValue?: boolean | undefined;
 }) => State;
-declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputProps, "children" | "label" | "style" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "disabled" | "value" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "allowFontScaling" | "numberOfLines" | "maxFontSizeMultiplier" | "selectionColor" | "textBreakStrategy" | "variant" | "loading" | "accessibilityLabelledBy" | "textAlign" | "error" | "textAlignVertical" | "onContentSizeChange" | "onScroll" | "scrollEnabled" | "onChange" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "blurOnSubmit" | "caretHidden" | "contextMenuHidden" | "defaultValue" | "editable" | "keyboardType" | "maxLength" | "multiline" | "onChangeText" | "onEndEditing" | "onSelectionChange" | "onSubmitEditing" | "onTextInput" | "onKeyPress" | "placeholder" | "placeholderTextColor" | "returnKeyType" | "secureTextEntry" | "selectTextOnFocus" | "selection" | "inputAccessoryViewID" | "clearButtonMode" | "clearTextOnFocus" | "dataDetectorTypes" | "enablesReturnKeyAutomatically" | "keyboardAppearance" | "passwordRules" | "rejectResponderTermination" | "selectionState" | "spellCheck" | "textContentType" | "autoComplete" | "importantForAutofill" | "disableFullscreenUI" | "inlineImageLeft" | "inlineImagePadding" | "returnKeyLabel" | "underlineColorAndroid" | "showSoftInputOnFocus" | "prefix" | "suffix" | "textStyle" | "required" | "hideCharacterCount" | "helpText" | "renderInputValue"> & React.RefAttributes<TextInputHandles>>;
+export declare const LABEL_ANIMATION_DURATION = 150;
+declare const TextInput: React.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & React.RefAttributes<TextInputHandles>>;
 export default TextInput;

package/types/components/TimePicker/TimePickerAndroid.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { TimePickerProps } from './types';
-declare const TimePickerAndroid: ({ value, label, placeholder, onChange, displayFormat, disabled, required, error, helpText, style, testID, showSuffix, }: TimePickerProps) => JSX.Element;
+declare const TimePickerAndroid: ({ value, label, placeholder, onChange, displayFormat, disabled, required, error, helpText, style, testID, showSuffix, }: TimePickerProps) => React.JSX.Element;
 export default TimePickerAndroid;

package/types/components/TimePicker/TimePickerIOS.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { TimePickerProps } from './types';
-declare const TimePickerIOS: ({ value, label, placeholder, onChange, confirmLabel, displayFormat, disabled, required, error, helpText, style, testID, showSuffix, }: TimePickerProps) => JSX.Element;
+declare const TimePickerIOS: ({ value, label, placeholder, onChange, confirmLabel, displayFormat, disabled, required, error, helpText, style, testID, showSuffix, }: TimePickerProps) => React.JSX.Element;
 export default TimePickerIOS;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { TimePickerProps } from './types';
-declare const TimePicker: (props: TimePickerProps) => JSX.Element;
+declare const TimePicker: (props: TimePickerProps) => React.JSX.Element;
 export default TimePicker;

package/types/components/Toast/StyledToast.d.ts

@@ -11,8 +11,6 @@ declare const ToastContainerWrapper: import("@emotion/native").StyledComponent<V
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const Container: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
-    children?: import("react").ReactNode;
-} & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {

package/types/components/Toast/Toast.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ToastProps } from './types';
 declare const Toast: ({ content, icon, variant, intent, style, duration, autoDismiss, onAction, actionLabel, onDismiss, distance, }: ToastProps) => JSX.Element;
 export default Toast;

package/types/components/Toast/ToastProvider.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ReactNode } from 'react';
 import type { ToastContainerProps } from './types';
 type ToastProviderProps = {
@@ -6,5 +7,5 @@ type ToastProviderProps = {
      */
     children?: ReactNode;
 } & ToastContainerProps;
-declare const ToastProvider: ({ children, displayType, position: _position, }: ToastProviderProps) => JSX.Element;
+declare const ToastProvider: ({ children, displayType, position: _position, }: ToastProviderProps) => React.JSX.Element;
 export default ToastProvider;

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

@@ -2,7 +2,7 @@
 declare const Toast: {
     Provider: ({ children, displayType, position: _position, }: {
         children?: import("react").ReactNode;
-    } & import("./types").ToastContainerProps) => JSX.Element;
+    } & import("./types").ToastContainerProps) => import("react").JSX.Element;
     Container: import("react").ForwardRefExoticComponent<import("./types").ToastContainerProps & import("react").RefAttributes<import("./ToastContext").ToastControllerContextType>>;
     useToast: () => import("./ToastContext").ToastControllerContextType;
 };

package/types/components/Toolbar/ToolbarGroup.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ToolbarItemProps } from './ToolbarItem';
 export interface ToolbarGroupProps {
     /**
@@ -9,5 +10,5 @@ export interface ToolbarGroupProps {
      */
     align: 'left' | 'center' | 'right';
 }
-declare const ToolbarGroup: ({ align, items }: ToolbarGroupProps) => JSX.Element;
+declare const ToolbarGroup: ({ align, items }: ToolbarGroupProps) => React.JSX.Element;
 export default ToolbarGroup;

package/types/components/Toolbar/ToolbarItem.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon';
 export interface ToolbarItemProps {
@@ -26,5 +27,5 @@ export interface ToolbarItemProps {
      */
     style?: StyleProp<ViewStyle>;
 }
-declare const ToolbarItem: ({ icon, label, onPress, intent, disabled, style, }: ToolbarItemProps) => JSX.Element;
+declare const ToolbarItem: ({ icon, label, onPress, intent, disabled, style, }: ToolbarItemProps) => React.JSX.Element;
 export default ToolbarItem;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ReactNode } from 'react';
 import { ViewProps } from 'react-native';
 export interface ToolbarProps extends Omit<ViewProps, 'style'> {
@@ -6,7 +7,7 @@ export interface ToolbarProps extends Omit<ViewProps, 'style'> {
      */
     children?: ReactNode;
 }
-declare const _default: (({ children, ...rest }: ToolbarProps) => JSX.Element) & {
-    Group: ({ align, items }: import("./ToolbarGroup").ToolbarGroupProps) => JSX.Element;
+declare const _default: (({ children, ...rest }: ToolbarProps) => React.JSX.Element) & {
+    Group: ({ align, items }: import("./ToolbarGroup").ToolbarGroupProps) => React.JSX.Element;
 };
 export default _default;

package/types/components/Typography/Body/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ReactNode } from 'react';
 import type { TextProps as NativeTextProps, StyleProp, TextStyle } from 'react-native';
 export interface BodyProps extends NativeTextProps {
@@ -28,5 +29,5 @@ export interface BodyProps extends NativeTextProps {
      * */
     variant?: 'regular' | 'regular-bold' | 'small' | 'small-bold';
 }
-declare const Body: ({ children, intent, allowFontScaling, typeface, variant, ...nativeProps }: BodyProps) => JSX.Element;
+declare const Body: ({ children, intent, allowFontScaling, typeface, variant, ...nativeProps }: BodyProps) => React.JSX.Element;
 export default Body;

package/types/components/Typography/Caption/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ReactNode } from 'react';
 import type { TextProps as NativeTextProps, StyleProp, TextStyle } from 'react-native';
 export interface CaptionProps extends NativeTextProps {
@@ -22,5 +23,5 @@ export interface CaptionProps extends NativeTextProps {
      */
     testID?: string;
 }
-declare const Caption: ({ children, fontWeight, intent, allowFontScaling, ...nativeProps }: CaptionProps) => JSX.Element;
+declare const Caption: ({ children, fontWeight, intent, allowFontScaling, ...nativeProps }: CaptionProps) => React.JSX.Element;
 export default Caption;

package/types/components/Typography/Label/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ReactNode } from 'react';
 import type { TextProps as NativeTextProps, StyleProp, TextStyle } from 'react-native';
 export interface LabelProps extends NativeTextProps {
@@ -18,5 +19,5 @@ export interface LabelProps extends NativeTextProps {
      */
     testID?: string;
 }
-declare const Label: ({ children, intent, allowFontScaling, ...nativeProps }: LabelProps) => JSX.Element;
+declare const Label: ({ children, intent, allowFontScaling, ...nativeProps }: LabelProps) => React.JSX.Element;
 export default Label;

package/types/components/Typography/Text/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ReactNode } from 'react';
 import type { TextProps as NativeTextProps, StyleProp, TextStyle } from 'react-native';
 export interface TextProps extends NativeTextProps {
@@ -32,5 +33,5 @@ export interface TextProps extends NativeTextProps {
      */
     typeface?: 'neutral' | 'playful';
 }
-declare const Text: ({ children, fontSize, fontWeight, intent, typeface, allowFontScaling, ...nativeProps }: TextProps) => JSX.Element;
+declare const Text: ({ children, fontSize, fontWeight, intent, typeface, allowFontScaling, ...nativeProps }: TextProps) => React.JSX.Element;
 export default Text;

package/types/components/Typography/Title/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ReactNode } from 'react';
 import type { TextProps as NativeTextProps, StyleProp, TextStyle } from 'react-native';
 export interface TitleProps extends NativeTextProps {
@@ -28,5 +29,5 @@ export interface TitleProps extends NativeTextProps {
      */
     level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
-declare const Title: ({ children, intent, allowFontScaling, level, typeface, ...nativeProps }: TitleProps) => JSX.Element;
+declare const Title: ({ children, intent, allowFontScaling, level, typeface, ...nativeProps }: TitleProps) => React.JSX.Element;
 export default Title;

package/types/index.d.ts

@@ -12,6 +12,7 @@ import Button from './components/Button';
 import Calendar from './components/Calendar';
 import Carousel from './components/Carousel';
 import Card from './components/Card';
+import Chip from './components/Chip';
 import Collapse from './components/Collapse';
 import Checkbox from './components/Checkbox';
 import ContentNavigator from './components/ContentNavigator';
@@ -25,7 +26,6 @@ import HeroDesignProvider from './components/HeroDesignProvider';
 import Icon from './components/Icon';
 import Image from './components/Image';
 import List from './components/List';
-import Modal from './components/Modal';
 import PinInput from './components/PinInput';
 import Progress from './components/Progress';
 import Slider from './components/Slider';
@@ -49,5 +49,5 @@ import RefreshControl from './components/RefreshControl';
 import RichTextEditor from './components/RichTextEditor';
 import PageControl from './components/PageControl';
 import Portal from './components/Portal';
-export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, Icon, Image, HeroDesignProvider, List, Modal, PinInput, Progress, Portal, PageControl, Skeleton, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Success, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, Rate, RefreshControl, RichTextEditor, };
+export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Chip, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, Icon, Image, HeroDesignProvider, List, PinInput, Progress, Portal, PageControl, Skeleton, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Success, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, Rate, RefreshControl, RichTextEditor, };
 export * from './types';

package/types/testHelpers/renderWithTheme.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { RenderOptions } from '@testing-library/react-native';
 declare const renderWithTheme: (ui: JSX.Element, options?: RenderOptions) => import("@testing-library/react-native").RenderAPI;
 export default renderWithTheme;

package/types/theme/ThemeSwitcher.d.ts

@@ -3,6 +3,6 @@ type ThemeName = 'swag' | 'swagDark' | 'work' | 'jobs' | 'wallet' | 'eBens';
 declare const ThemeSwitcher: ({ name, children, }: {
     name?: ThemeName | undefined;
     children: React.ReactNode;
-}) => JSX.Element;
-export declare const withTheme: <P extends Record<string, unknown>>(C: React.ComponentType<P>, themeName: ThemeName) => (props: React.PropsWithChildren<P>) => JSX.Element;
+}) => React.JSX.Element;
+export declare const withTheme: <P extends Record<string, unknown>>(C: React.ComponentType<P>, themeName: ThemeName) => (props: React.PropsWithChildren<P>) => React.JSX.Element;
 export default ThemeSwitcher;

package/types/theme/components/button.d.ts

@@ -51,7 +51,6 @@ declare const getButtonTheme: (theme: GlobalTheme) => {
         textButtonPadding: number;
         iconPadding: number;
         utilityPadding: number;
-        loadingIndicatorWrapperVerticalPadding: number;
     };
 };
 type GetButtonThemeReturnType = ReturnType<typeof getButtonTheme>;

package/types/theme/components/chip.d.ts

@@ -0,0 +1,40 @@
+import type { GlobalTheme } from '../global';
+declare const getChipTheme: (theme: GlobalTheme) => {
+    colors: {
+        primaryBackground: string;
+        secondaryBackground: string;
+        filledBackground: string;
+        outlinedBackground: string;
+        wrapperBorder: string;
+        wrapperSelectedBorder: string;
+        selectedPrimaryText: string;
+    };
+    space: {
+        wrapperHorizontalPadding: number;
+        wrapperVerticalPadding: number;
+        iconWrapperMarginRight: number;
+    };
+    sizes: {
+        wrapperBorder: number;
+    };
+    radii: {
+        wrapper: number;
+    };
+    borderWidths: {
+        wrapper: number;
+        icon: number;
+    };
+    shadows: {
+        filledWrapper: {
+            shadowOffset: {
+                width: number;
+                height: number;
+            };
+            shadowColor: string;
+            shadowOpacity: number;
+            shadowRadius: number;
+            elevation: number;
+        };
+    };
+};
+export default getChipTheme;

package/types/theme/getTheme.d.ts

@@ -11,6 +11,7 @@ import getCardTheme from './components/card';
 import { CarouselThemeType } from './components/carousel';
 import getCardCarouselTheme from './components/cardCarousel';
 import getCheckboxTheme from './components/checkbox';
+import getChipTheme from './components/chip';
 import getContentNavigatorTheme from './components/contentNavigator';
 import getDatePickerTheme from './components/datePicker';
 import getDividerTheme from './components/divider';
@@ -59,6 +60,7 @@ type Theme = GlobalTheme & {
         carousel: CarouselThemeType;
         cardCarousel: ReturnType<typeof getCardCarouselTheme>;
         checkbox: ReturnType<typeof getCheckboxTheme>;
+        chip: ReturnType<typeof getChipTheme>;
         contentNavigator: ReturnType<typeof getContentNavigatorTheme>;
         datePicker: ReturnType<typeof getDatePickerTheme>;
         divider: ReturnType<typeof getDividerTheme>;