@hero-design/rn 7.23.0 → 7.25.0

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

@@ -1,14 +1,22 @@
 export type GlobalSystemPalette = {
-  globalPrimary: string;
-  mutedGlobalPrimary: string;
-  onGlobalPrimary: string;
-  globalSecondary: string;
-  globalPrimaryOutline: string;
-  globalSecondaryOutline: string;
+  // Updated 14 / Nov / 22
+  // Surfaces
   defaultGlobalSurface: string;
   onDefaultGlobalSurface: string;
   neutralGlobalSurface: string;
+  mutedOnDefaultGlobalSurface: string;
+  inactiveOnDefaultGlobalSurface: string;
   disabledOnDefaultGlobalSurface: string;
+  darkGlobalSurface: string;
+  onDarkGlobalSurface: string;
+
+  // Outlines
+  primaryOutline: string;
+  secondaryOutline: string;
+  inactiveOutline: string;
+  disabledOutline: string;
+
+  // Accents
   error: string;
   errorSurface: string;
   onErrorSurface: string;
@@ -24,18 +32,29 @@ export type GlobalSystemPalette = {
   archived: string;
   archivedSurface: string;
   onArchivedSurface: string;
+  // End of Updated 14 / Nov / 22
 };
 
 export type BrandSystemPalette = {
+  // Updated 14 / Nov / 22
   primary: string;
-  mutedPrimary: string;
   onPrimary: string;
   secondary: string;
-  highlightedSecondarySurface: string; // TODO: Ask Ariel to add this
   onSecondary: string;
+  defaultSurface: string;
+  highlightedSurface: string;
+  pressedSurface: string;
+
+  decorativePrimary: string;
+  decorativePrimarySurface: string;
+  // End of Updated 14 / Nov / 22
+};
+
+export type LegacyBrandSystemPalette = {
+  mutedPrimary: string;
+  highlightedSecondarySurface: string;
   mutedSecondary: string;
   disabledSecondary: string;
-  highlightedSurface: string;
   lightHighlightedSurface: string;
 };
 
@@ -43,19 +62,15 @@ export type LegacySystemPalette = {
   globalPrimary: string;
   globalPrimaryLight: string;
   globalPrimaryBackground: string;
-  primary: string;
   primaryLight: string;
   primaryDark: string;
   primaryBackground: string;
   primaryBackgroundDark: string;
-  secondary: string;
   secondaryLight: string;
   secondaryBackground: string;
-  info: string;
   infoMediumLight: string;
   infoLight: string;
   infoBackground: string;
-  success: string;
   successLight: string;
   successDark: string;
   successBackground: string;
@@ -63,7 +78,6 @@ export type LegacySystemPalette = {
   dangerMediumLight: string;
   dangerLight: string;
   dangerBackground: string;
-  warning: string;
   warningLight: string;
   warningDark: string;
   warningBackground: string;
@@ -76,15 +90,21 @@ export type LegacySystemPalette = {
   disabledLightText: string;
   invertedText: string;
   outline: string;
-  archived: string;
   archivedLight: string;
   archivedDark: string;
   archivedBackground: string;
   black: string;
   inactiveBackground: string;
   shadow: string;
+
+  mutedGlobalPrimary: string;
+  onGlobalPrimary: string;
+  globalSecondary: string;
+  globalPrimaryOutline: string;
+  globalSecondaryOutline: string;
 };
 
 export type SystemPalette = LegacySystemPalette &
+  LegacyBrandSystemPalette &
   GlobalSystemPalette &
   BrandSystemPalette;

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

@@ -0,0 +1,23 @@
+import { walletPalette as palette } from '@hero-design/colors';
+import swag from './swag';
+import type { SystemPalette, BrandSystemPalette } from './types';
+
+const walletBrandSystemPallete: BrandSystemPalette = {
+  primary: palette.royalBlue,
+  onPrimary: palette.white,
+  secondary: palette.royalBlueDark30,
+  onSecondary: palette.white,
+  defaultSurface: palette.frenchSkyLight70,
+  highlightedSurface: palette.royalBlueLight90,
+  pressedSurface: palette.royalBlueLight10,
+
+  decorativePrimary: palette.frenchSky,
+  decorativePrimarySurface: palette.frenchSkyLight80,
+};
+
+const walletSystemPalette: SystemPalette = {
+  ...swag,
+  ...walletBrandSystemPallete,
+};
+
+export default walletSystemPalette;

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

@@ -1,19 +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,
-  onPrimary: palette.maasstrichtBlue,
-  secondary: palette.violet,
-  onSecondary: palette.white,
-  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/types.ts

@@ -12,6 +12,7 @@ import type {
   ListRenderOptionInfo,
   SectionListRenderOptionInfo,
 } from './components/Select/types';
+import { SwipeableProps } from './components/Swipeable';
 
 export type {
   BottomNavigationTabType,
@@ -20,6 +21,7 @@ export type {
   MultiSelectProps,
   ListRenderOptionInfo,
   SectionListRenderOptionInfo,
+  SwipeableProps,
   RichTextEditorProps,
   RichTextEditorRef,
   TabType,

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/testUtils/setup.tsx

@@ -3,6 +3,7 @@
 /* eslint-disable react/prefer-stateless-function */
 /* eslint-disable max-classes-per-file */
 jest.mock('react-native-vector-icons', () => ({
+  createIconSet: jest.fn(() => 'HeroIcon'),
   createIconSetFromIcoMoon: jest.fn(() => 'HeroIcon'),
 }));
 
@@ -83,4 +84,16 @@ jest.mock('react-native-webview', () => {
 
 jest.mock('hero-editor/dist/app.js', () => ({ default: '' }));
 
+jest.mock('react-native-gesture-handler', () => {
+  const ReactNative = jest.requireActual('react-native');
+
+  return {
+    Swipeable: ReactNative.View,
+    GestureHandlerRootView: ReactNative.View,
+    FlatList: ReactNative.FlatList,
+    RectButton: ReactNative.Button,
+    TouchableOpacity: ReactNative.TouchableOpacity,
+  };
+});
+
 export {};

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, };