@hero-design/rn 7.24.0 → 7.25.0

package/src/theme/global/colors/work.ts

@@ -1,17 +1,23 @@
 import { workPalette as palette } from '@hero-design/colors';
 import swag from './swag';
-import type { SystemPalette } from './types';
+import type { SystemPalette, BrandSystemPalette } from './types';
+
+const workBrandSystemPallete: BrandSystemPalette = {
+  primary: palette.violet,
+  onPrimary: palette.white,
+  secondary: palette.violetLight30,
+  onSecondary: palette.white,
+  defaultSurface: palette.white,
+  highlightedSurface: palette.violetLight90,
+  pressedSurface: palette.violetLight20,
+
+  decorativePrimary: palette.gold,
+  decorativePrimarySurface: palette.goldLight80,
+};
 
 const workSystemPalette: SystemPalette = {
   ...swag,
-
-  primary: palette.gold,
-  mutedPrimary: palette.goldLight90,
-  secondary: palette.violet,
-  mutedSecondary: palette.maasstrichtBlueLight50,
-  disabledSecondary: palette.violetLight50,
-  highlightedSurface: palette.violetLight80,
-  lightHighlightedSurface: palette.violetLight90,
+  ...workBrandSystemPallete,
 };
 
 export default workSystemPalette;

package/src/theme/global/index.ts

@@ -2,6 +2,8 @@ import { scale as defaultScale } from './scale';
 import swagSystemPalette from './colors/swag';
 import workSystemPalette from './colors/work';
 import jobsSystemPalette from './colors/jobs';
+import walletSystemPalette from './colors/wallet';
+import eBensSystemPalette from './colors/eBens';
 
 import { getFonts, getFontSizes, getLineHeights } from './typography';
 import { getSpace } from './space';
@@ -43,4 +45,6 @@ export {
   swagSystemPalette,
   workSystemPalette,
   jobsSystemPalette,
+  walletSystemPalette,
+  eBensSystemPalette,
 };

package/src/theme/index.ts

@@ -5,6 +5,8 @@ import {
   swagSystemPalette,
   workSystemPalette,
   jobsSystemPalette,
+  walletSystemPalette,
+  eBensSystemPalette,
 } from './global';
 
 import type { Theme } from './getTheme';
@@ -21,6 +23,8 @@ export {
   swagSystemPalette,
   workSystemPalette,
   jobsSystemPalette,
+  walletSystemPalette,
+  eBensSystemPalette,
 };
 
 export default defaultTheme;

package/src/utils/functions.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export const noop = (): void => {};

package/src/utils/scale.ts

@@ -12,5 +12,5 @@ export const horizontalScale = (size: number) => {
   return (shortDimension / BASE_WIDTH) * size;
 };
 
-export const scale = (size: number, factor: number = 0.5) =>
+export const scale = (size: number, factor = 0.5) =>
   size + (horizontalScale(size) - size) * factor;

package/tsconfig.json

@@ -1,10 +1,16 @@
 {
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
-    "target": "esnext",
-    "outDir": "types",
     "declaration": true,
     "jsx": "react-native",
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "outDir": "types",
+    "strict": true,
+    "strictNullChecks": true,
+    "target": "esnext",
     "types": ["jest"]
   },
   "include": ["src"]

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

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

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

@@ -1,38 +1,38 @@
 import { TouchableOpacity, View } from 'react-native';
 import type { ViewProps } from 'react-native';
 declare const Container: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     themeVariant: 'default' | 'round';
     themeIntent: 'success' | 'info' | 'warning' | 'error' | 'notification';
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 declare const IconContainer: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 declare const TextContainer: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 declare const ContentContainer: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     showDivider: boolean;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 declare const CTAWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<TouchableOpacity>;
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
 }>;
 export { Container, ContentContainer, TextContainer, IconContainer, CTAWrapper, };

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

@@ -0,0 +1,28 @@
+import { TouchableOpacity, View } from 'react-native';
+declare const StyledContainer: 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 StyledContentContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeHighlighted: boolean;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledTextContainer: 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 StyledCTAWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
+}>;
+export { StyledContainer, StyledContentContainer, StyledCTAWrapper, StyledTextContainer, };

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

@@ -0,0 +1,37 @@
+import type { ReactElement } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { IconProps } from '../Icon';
+import { ImageProps } from '../Image';
+interface AttachmentProps {
+    /**
+     * Attachment filename.
+     */
+    filename?: string;
+    /**
+     * Attachment preview element.
+     */
+    previewElement: ReactElement<ImageProps | IconProps>;
+    /**
+     * Removing callback. When onRemove is available, a trash icon will be rendered on the right side. The callback will be called when user clicks on trash icon.
+     */
+    onRemove?: () => void;
+    /**
+     * Downloading callback. When onDownload is available, a download icon will be rendered on the right side. The callback will be called when user clicks on download icon.
+     */
+    onDownload?: () => void;
+    /**
+     * The background of the attachment's content will be highlighted if backgroundHighlighted is true.
+     * Default value is false.
+     */
+    backgroundHighlighted?: boolean;
+    /**
+     * Addtional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Attachment: ({ filename, previewElement, onRemove, onDownload, backgroundHighlighted, style, testID, }: AttachmentProps) => JSX.Element;
+export default Attachment;

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

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

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

@@ -21,5 +21,5 @@ interface AvatarProps extends ViewProps {
      */
     testID?: string;
 }
-declare const Avatar: ({ onPress, source, testID, style, title, size, intent, }: AvatarProps) => JSX.Element;
+declare const Avatar: ({ onPress, source, testID, style, title, size, intent, }: AvatarProps) => JSX.Element | null;
 export default Avatar;

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

@@ -10,7 +10,7 @@ export interface StatusProps extends ViewProps {
     /**
      * Visual intent color to apply to Status Badge.
      */
-    intent?: 'success' | 'warning' | 'danger' | 'info' | 'archived';
+    intent?: 'success' | 'warning' | 'danger' | 'info' | 'archived' | 'primary';
     /**
      * Additional style.
      */

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

@@ -1,26 +1,26 @@
 import { Animated, Text } from 'react-native';
-declare type ThemeIntent = 'success' | 'warning' | 'danger' | 'info' | 'archived';
+declare type ThemeIntent = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived';
 declare type ThemePadding = 'narrowContent' | 'wideContent';
 declare const StyledView: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
     children?: import("react").ReactNode;
 } & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     themeIntent: ThemeIntent;
     themePadding: ThemePadding;
 }, {}, {}>;
 declare const StyledText: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<Text>;
+    ref?: import("react").Ref<Text> | undefined;
 }>;
 declare const StyledStatus: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
     children?: import("react").ReactNode;
 } & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     themeIntent: ThemeIntent;
 }, {}, {}>;

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

@@ -17,7 +17,7 @@ interface BadgeProps extends React.ComponentProps<typeof Animated.View> {
     /**
      * Visual intent color to apply to Badge.
      */
-    intent?: 'success' | 'warning' | 'danger' | 'info' | 'archived';
+    intent?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived';
     /**
      * Additional style.
      */

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

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

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

@@ -2,7 +2,7 @@ import type { ReactElement } from 'react';
 declare const Header: ({ content, showDivider, onRequestClose, showCloseButton, }: {
     content: string | ReactElement;
     showDivider: boolean;
-    onRequestClose?: () => void;
+    onRequestClose?: (() => void) | undefined;
     showCloseButton: boolean;
 }) => JSX.Element;
 export default Header;

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

@@ -1,51 +1,51 @@
 import { Animated, KeyboardAvoidingView, KeyboardAvoidingViewProps, SafeAreaView, View } from 'react-native';
 import type { ViewProps } from 'react-native';
 declare const StyledWrapper: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledKeyboardAvoidingView: import("@emotion/native").StyledComponent<KeyboardAvoidingViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<KeyboardAvoidingView>;
+    ref?: import("react").Ref<KeyboardAvoidingView> | undefined;
 }>;
 declare const StyledBottomSheet: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<SafeAreaView>> & {
     children?: import("react").ReactNode;
 } & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
 declare const StyledBackdrop: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").PressableProps & import("react").RefAttributes<View>> & {
     children?: import("react").ReactNode;
 } & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
 declare const StyledHeaderWrapper: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledHeader: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledFooter: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledIconWrapper: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 export { StyledWrapper, StyledHeaderWrapper, StyledHeader, StyledFooter, StyledIconWrapper, StyledBottomSheet, StyledBackdrop, StyledKeyboardAvoidingView, };

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

@@ -5,11 +5,11 @@ export declare const getThemeValue: (theme: Theme, key: keyof StyleProps, props:
     [x: string]: string;
 } | {
     [x: string]: number;
-};
+} | undefined;
 declare const StyledBox: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: Theme;
-    as?: import("react").ElementType<any>;
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & StyleProps, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 export { StyledBox };

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

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