@hero-design/rn 0.0.0-mainIsReactNative-20260826163045 → 0.0.0-mainIsReactNative-2

package/package.json

@@ -1,15 +1,14 @@
 {
   "name": "@hero-design/rn",
-  "version": "0.0.0-mainIsReactNative-20260826163045",
+  "version": "0.0.0-mainIsReactNative-2",
   "license": "MIT",
-  "main": "src/index.ts",
+  "main": "lib/index.js",
   "module": "es/index.js",
   "types": "types/index.d.ts",
+  "react-native": "src/index.ts",
   "typesVersions": {
     "*": {
-      "locales/*": [
-        "types/locales/*"
-      ]
+      "locales/*": ["types/locales/*"]
     }
   },
   "scripts": {

package/src/components/Slider/SingleSlider.tsx

@@ -1,8 +1,31 @@
-import RnSlider from '@react-native-community/slider';
 import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import { Platform, Text, View } from 'react-native';
 import { useTheme } from '../../theme';
 
+type RnSliderType = typeof import('@react-native-community/slider').default;
+
+const LINKING_ERROR =
+  `The package '@react-native-community/slider' doesn't seem to be linked. Make sure: \n\n` +
+  Platform.select({ ios: `- You have run 'pod install'\n`, default: '' }) +
+  `- You rebuilt the app after installing the package\n`;
+
+let RnSlider: RnSliderType | null = null;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  RnSlider = require('@react-native-community/slider').default;
+} catch {
+  // package not linked — SliderComponent will render the linking error
+}
+
+const SliderComponent: React.ComponentType<React.ComponentProps<RnSliderType>> =
+  RnSlider ??
+  (() => (
+    <View>
+      <Text>{LINKING_ERROR}</Text>
+    </View>
+  ));
+
 export interface SingleSliderProps {
   /**
    * Minimum value of the slider.
@@ -70,7 +93,7 @@ const Slider = ({
   const { selectedTrack, thumb, unselectedTrack } = theme.__hd__.slider.colors;
 
   return (
-    <RnSlider
+    <SliderComponent
       minimumValue={minimumValue}
       maximumValue={maximumValue}
       step={step}

package/types/components/Accordion/StyledAccordion.d.ts

@@ -1,16 +1,30 @@
+import { View } from 'react-native';
 export type Variant = 'default' | 'card';
-export declare const StyledWrapper: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
+export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
 }>;
-export declare const StyledItemWrapper: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
+export declare const StyledItemWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themeVariant: Variant;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
 }>;
-export declare const StyledHeaderWrapper: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-}>;
-export declare const StyledCollapse: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-}>;
-export declare const Spacer: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
+export declare const StyledHeaderWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & import("react").RefAttributes<View> & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {}>;
+export declare const StyledCollapse: import("@emotion/native").StyledComponent<import("../Collapse").CollapseProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {}>;
+export declare const Spacer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
 }>;

package/types/components/Alert/StyledAlert.d.ts

@@ -1,22 +1,51 @@
-declare const Container: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
+import { View } from 'react-native';
+import type { ViewProps } from 'react-native';
+import type { TextProps } from '../Typography/Text';
+import type { IconProps } from '../Icon';
+type ThemeIntent = 'success' | 'info' | 'warning' | 'error' | 'notification';
+declare const Container: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themeVariant: "rounded" | "unrounded";
+    themeIntent: ThemeIntent;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
 }>;
-declare const IconContainer: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
+declare const IconContainer: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledIcon: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
+declare const StyledIcon: import("@emotion/native").StyledComponent<IconProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themeIntent: ThemeIntent;
+}, {}, {}>;
+declare const TextContainer: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
 }>;
-declare const TextContainer: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-}>;
-declare const StyledBody: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-}>;
-declare const ContentContainer: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-}>;
-declare const CTAWrapper: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
+declare const StyledBody: import("@emotion/native").StyledComponent<import("../..").BodyProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & TextProps & {
+    themeIntent: ThemeIntent;
+}, {}, {}>;
+declare const ContentContainer: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    showDivider: boolean;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
 }>;
+declare const CTAWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & import("react").RefAttributes<View> & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {}>;
 export { Container, ContentContainer, TextContainer, IconContainer, CTAWrapper, StyledBody, StyledIcon, };

package/types/components/AppCue/StyledAppCue.d.ts

@@ -1,13 +1,26 @@
+import { View, Animated } from 'react-native';
 export type Placement = 'top' | 'bottom' | 'right' | 'left' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-export declare const StyledContent: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
+export declare const StyledContent: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
 }>;
-export declare const StyledModalContainer: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
+export declare const StyledModalContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
 }>;
-export declare const StyledContentPositioner: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-}>;
-export declare const StyledIconContainer: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
+export declare const StyledContentPositioner: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
 }>;
+export declare const StyledIconContainer: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themePlacement: Placement;
+}, {}, {}>;

package/types/components/Attachment/StyledAttachment.d.ts

@@ -1,13 +1,26 @@
-declare const StyledContainer: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
+import { View } from 'react-native';
+declare const StyledContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledContentContainer: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
+declare const StyledContentContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themeHighlighted: boolean;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledTextContainer: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-}>;
-declare const StyledCTAWrapper: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
+declare const StyledTextContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
 }>;
+declare const StyledCTAWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & import("react").RefAttributes<View> & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {}>;
 export { StyledContainer, StyledContentContainer, StyledCTAWrapper, StyledTextContainer, };

package/types/components/Avatar/AvatarStack/StyledAvatarStack.d.ts

@@ -1,9 +1,30 @@
-export declare const StyledWrapper: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-}>;
-export declare const StyledAvatar: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-}>;
-export declare const StyledSurplusContainer: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
+import { View } from 'react-native';
+import type { AvatarProps } from '../Avatar';
+type ThemeVariant = 'horizontal' | 'vertical';
+export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themeSize: Required<AvatarProps>["size"];
+    themeAvatarCount: number;
+    themeVariant: ThemeVariant;
+    themeHasSurplus: boolean;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
 }>;
+export declare const StyledAvatar: import("@emotion/native").StyledComponent<AvatarProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themeIndex: number;
+    themeVariant: ThemeVariant;
+}, {}, {}>;
+export declare const StyledSurplusContainer: import("@emotion/native").StyledComponent<import("../../Box").BoxProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themeIndex: number;
+    themeSize: AvatarProps["size"];
+    themeVariant: ThemeVariant;
+}, {}, {}>;
+export {};

package/types/components/Avatar/StyledAvatar.d.ts

@@ -1,13 +1,32 @@
-declare const StyledWrapper: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
+import { View, Image } from 'react-native';
+import type { TextProps } from '../Typography/Text';
+type ThemeSize = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge';
+type ThemeIntent = 'neutral' | 'primary' | 'info' | 'danger' | 'success' | 'warning';
+declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & import("react").RefAttributes<View> & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themeSize: ThemeSize;
+    themeIntent: ThemeIntent;
+}, {}, {}>;
+declare const StyledTextWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledTextWrapper: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-}>;
-declare const StyledText: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-}>;
-declare const StyledImage: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
+declare const StyledText: import("@emotion/native").StyledComponent<import("../..").BodyProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & TextProps & {
+    themeSize: ThemeSize;
+}, {}, {}>;
+declare const StyledImage: import("@emotion/native").StyledComponent<import("react-native").ImageProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themeSize: ThemeSize;
+}, {}, {
+    ref?: import("react").Ref<Image> | undefined;
 }>;
 export { StyledWrapper, StyledImage, StyledTextWrapper, StyledText };

package/types/components/Badge/StyledBadge.d.ts

@@ -1,19 +1,46 @@
-declare const StyledView: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-}>;
-declare const StyledText: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-}>;
-declare const StyledStatus: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-}>;
-declare const StyledCount: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-}>;
-declare const StyledCountText: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-}>;
-declare const StyledIcon: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
+import { Animated, View } from 'react-native';
+type ThemeIntent = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived' | 'neutral';
+type ThemePadding = 'narrowContent' | 'wideContent';
+type ThemeSize = 'medium' | 'small';
+type ThemeVariant = 'filled' | 'outlined';
+declare const StyledView: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themeIntent: ThemeIntent;
+    themePadding: ThemePadding;
+    themeSize: ThemeSize;
+    themeVariant: ThemeVariant;
+    themeIsStringBadge: boolean;
+}, {}, {}>;
+declare const StyledText: import("@emotion/native").StyledComponent<import("../..").CaptionProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themeSize: ThemeSize;
+    themeIntent: ThemeIntent;
+    themeIsStringBadge: boolean;
+}, {}, {}>;
+declare const StyledStatus: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themeIntent: ThemeIntent;
+}, {}, {}>;
+declare const StyledCount: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
 }>;
+declare const StyledCountText: import("@emotion/native").StyledComponent<import("../..").TextProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {}>;
+declare const StyledIcon: import("@emotion/native").StyledComponent<import("../Icon").IconProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themeSize: ThemeSize;
+}, {}, {}>;
 export { StyledCountText, StyledView, StyledText, StyledStatus, StyledIcon, StyledCount, };

package/types/components/BottomNavigation/StyledBottomNavigation.d.ts

@@ -1,22 +1,51 @@
-declare const BottomNavigationTab: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
+import { View } from 'react-native';
+declare const BottomNavigationTab: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themeVisibility?: boolean;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
 }>;
-declare const BottomNavigationContainer: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
+declare const BottomNavigationContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
 }>;
-declare const ContentWrapper: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
+declare const ContentWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
 }>;
-declare const BottomBarWrapper: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
+declare const BottomBarWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themeInsets: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
 }>;
-declare const BottomBar: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
+declare const BottomBar: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
 }>;
-declare const BottomBarItem: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-}>;
-declare const StyledBottomBarText: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
+declare const BottomBarItem: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
 }>;
+declare const StyledBottomBarText: import("@emotion/native").StyledComponent<import("../..").LabelProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {}>;
 export { BottomBar, BottomBarItem, BottomNavigationTab, BottomNavigationContainer, BottomBarWrapper, ContentWrapper, StyledBottomBarText, };

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

@@ -1,34 +1,59 @@
-declare const StyledWrapper: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-}>;
-declare const StyledKeyboardAvoidingView: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-}>;
-declare const StyledFloatingWrapper: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-}>;
-declare const StyledFloatingBottomSheet: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-}>;
-declare const StyledBottomSheet: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-}>;
-declare const StyledBackdrop: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-}>;
-declare const StyledHeaderWrapper: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-}>;
-declare const StyledHeader: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-}>;
-declare const StyledFooter: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-}>;
-declare const StyledIconWrapper: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-}>;
-declare const StyledFloatingHeaderWrapper: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-}>;
+import type { ViewProps, KeyboardAvoidingViewProps } from 'react-native';
+import { Animated, KeyboardAvoidingView, View } from 'react-native';
+declare const StyledWrapper: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledKeyboardAvoidingView: import("@emotion/native").StyledComponent<KeyboardAvoidingViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: import("react").Ref<KeyboardAvoidingView> | undefined;
+}>;
+declare const StyledFloatingWrapper: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native-safe-area-context").NativeSafeAreaViewProps & import("react").RefAttributes<import("react").Component<import("react-native-safe-area-context/lib/typescript/src/specs/NativeSafeAreaView").NativeProps, {}, any> & import("react-native").NativeMethods>> & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {}>;
+declare const StyledFloatingBottomSheet: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {}>;
+declare const StyledBottomSheet: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native-safe-area-context").NativeSafeAreaViewProps & import("react").RefAttributes<import("react").Component<import("react-native-safe-area-context/lib/typescript/src/specs/NativeSafeAreaView").NativeProps, {}, any> & import("react-native").NativeMethods>> & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {}>;
+declare const StyledBackdrop: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").PressableProps & import("react").RefAttributes<View>> & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {}>;
+declare const StyledHeaderWrapper: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledHeader: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledFooter: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledIconWrapper: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledFloatingHeaderWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & import("react").RefAttributes<View> & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {}>;
 export { StyledBackdrop, StyledBottomSheet, StyledFloatingBottomSheet, StyledFloatingHeaderWrapper, StyledFloatingWrapper, StyledFooter, StyledHeader, StyledHeaderWrapper, StyledIconWrapper, StyledKeyboardAvoidingView, StyledWrapper, };

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

@@ -1,4 +1,10 @@
-declare const StyledBox: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
+import type { Theme } from '@emotion/react';
+import { View } from 'react-native';
+import type { FlexStyleProps, StyleProps } from './types';
+declare const StyledBox: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: Theme;
+    as?: React.ElementType;
+} & StyleProps & FlexStyleProps, {}, {
+    ref?: import("react").Ref<View> | undefined;
 }>;
 export { StyledBox };

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

@@ -1,7 +1,19 @@
-declare const StyledLoadingIndicatorWrapper: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
+import type { ViewProps } from 'react-native';
+import { View } from 'react-native';
+type ThemeVariant = 'basic-transparent' | 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'filled-white' | 'filled-inverted' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger' | 'outlined-white' | 'outlined-inverted' | 'text-primary' | 'text-secondary' | 'text-danger' | 'text-white' | 'text-inverted';
+declare const StyledLoadingIndicatorWrapper: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledLoadingDot: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: React.Ref<InstanceType<C>>;
+declare const StyledLoadingDot: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    size?: number;
+    themeVariant: ThemeVariant;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
 }>;
 export { StyledLoadingDot, StyledLoadingIndicatorWrapper };