@hero-design/rn 7.19.0 → 7.20.0

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

@@ -1,26 +1,26 @@
 import { Animated, View } from 'react-native';
 import PagerView from 'react-native-pager-view';
 declare const TabScreen: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const TabContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const ContentWrapper: import("@emotion/native").StyledComponent<import("react-native-pager-view").PagerViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<PagerView> | undefined;
+    ref?: import("react").Ref<PagerView>;
 }>;
 declare const HeaderTabWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     themeInsets: {
         top: number;
@@ -29,32 +29,34 @@ declare const HeaderTabWrapper: import("@emotion/native").StyledComponent<import
         left: number;
     };
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 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;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+} & {
+    isFirstItem?: boolean;
 }, {}, {}>;
 declare const HeaderTabItemOutlineWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 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;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     themeActive: boolean;
 }, {}, {}>;
 declare const HeaderTabItemWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 export { HeaderTabItem, TabScreen, TabContainer, HeaderTabWrapper, ContentWrapper, HeaderTabItemOutlineWrapper, HeaderTabItemOutline, HeaderTabItemWrapper, };

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

@@ -1,14 +1,14 @@
 import { Animated, View } from 'react-native';
 import PagerView from 'react-native-pager-view';
 declare const TabContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const HeaderTabWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     themeInsets: {
         top: number;
@@ -17,38 +17,44 @@ declare const HeaderTabWrapper: import("@emotion/native").StyledComponent<import
         left: number;
     };
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const HeaderTab: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const HeaderTabItem: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 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;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {}>;
 declare const TabScreen: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 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;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     themeWidth: number;
 }, {}, {}>;
-export { TabContainer, HeaderTabWrapper, HeaderTab, HeaderTabItem, ContentWrapper, TabScreen, StyledIndicator, };
+declare const StyledBadgeWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+}, {}, {
+    ref?: import("react").Ref<View>;
+}>;
+export { TabContainer, HeaderTabWrapper, HeaderTab, HeaderTabItem, ContentWrapper, TabScreen, StyledIndicator, StyledBadgeWrapper, };

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

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+export declare type StatusBadgeType = {
+    type: 'status';
+};
+export declare type CounterBadgeType = {
+    type: 'counter';
+    value: number;
+    max?: number;
+};
+export declare type BadgeConfigType = StatusBadgeType | CounterBadgeType;
+interface TabWithBadgeProps {
+    showBadge?: boolean;
+    config?: BadgeConfigType;
+    tabItem: ReactNode;
+}
+declare const TabWithBadge: ({ showBadge, config, tabItem }: TabWithBadgeProps) => JSX.Element;
+export default TabWithBadge;

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
-import type { IconName } from '../Icon';
+import type { BadgeConfigType } from './TabWithBadge';
+import { IconName } from '../Icon';
 export declare type ItemType = string | IconName | ((props: {
     color: string;
 }) => ReactNode);
@@ -11,6 +12,7 @@ export declare type TabType = {
     component: ReactNode;
     testID?: string;
     showBadge?: boolean;
+    badge?: BadgeConfigType;
 };
 export interface TabsProps extends ViewProps {
     /**

package/types/components/Tag/StyledTag.d.ts

@@ -1,19 +1,19 @@
 import { View, Text } from 'react-native';
 declare type ThemeIntent = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
 declare const StyledView: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     themeIntent: ThemeIntent;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const StyledText: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     themeIntent: ThemeIntent;
 }, {}, {
-    ref?: import("react").Ref<Text> | undefined;
+    ref?: import("react").Ref<Text>;
 }>;
 export { StyledView, StyledText };

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

@@ -7,7 +7,7 @@ interface TagProps extends ViewProps {
     /**
      * Visual intent color to apply to Tag.
      */
-    intent?: 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
+    intent?: 'primary' | 'default' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
     /**
      * Additional style.
      */

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

@@ -1,103 +1,103 @@
 import { TextInput, View } from 'react-native';
 export declare type Variant = 'default' | 'filled' | 'focused' | 'disabled' | 'readonly' | 'error';
 declare const StyledContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const StyledLabelContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const StyledLabel: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     themeVariant: Variant;
 }, {}, {}>;
 declare const StyledAsteriskLabel: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     themeVariant: Variant;
 }, {}, {}>;
 declare const StyledLabelContainerInsideTextInput: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const StyledLabelInsideTextInput: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     themeVariant: Variant;
 }, {}, {}>;
 declare const StyledAsteriskLabelInsideTextInput: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     themeVariant: Variant;
 }, {}, {}>;
 declare const StyledErrorContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const StyledError: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {}>;
 declare const StyledMaxLengthMessage: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     themeVariant: Variant;
 }, {}, {}>;
 declare const StyledHelperText: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {}>;
 declare const StyledTextInput: import("@emotion/native").StyledComponent<import("react-native").TextInputProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<TextInput> | undefined;
+    ref?: import("react").Ref<TextInput>;
 }>;
 declare const StyledBorderBackDrop: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     themeVariant: Variant;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const StyledTextInputContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const StyledTextInputAndLabelContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const StyledErrorAndHelpTextContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const StyledErrorAndMaxLengthContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 export { StyledTextInputContainer, StyledLabel, StyledLabelContainer, StyledAsteriskLabel, StyledAsteriskLabelInsideTextInput, StyledTextInput, StyledError, StyledMaxLengthMessage, StyledLabelInsideTextInput, StyledContainer, StyledErrorContainer, StyledHelperText, StyledTextInputAndLabelContainer, StyledLabelContainerInsideTextInput, StyledErrorAndHelpTextContainer, StyledBorderBackDrop, StyledErrorAndMaxLengthContainer, };

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

@@ -53,12 +53,12 @@ export interface TextInputProps extends NativeTextInputProps {
     helpText?: string;
 }
 export declare const getVariant: ({ disabled, error, editable, loading, isFocused, isEmptyValue, }: {
-    disabled?: boolean | undefined;
-    error?: string | undefined;
-    editable?: boolean | undefined;
+    disabled?: boolean;
+    error?: string;
+    editable?: boolean;
     loading: boolean;
-    isFocused?: boolean | undefined;
-    isEmptyValue?: boolean | undefined;
+    isFocused?: boolean;
+    isEmptyValue?: boolean;
 }) => Variant;
 declare const TextInput: ({ label, prefix, suffix, style, textStyle, testID, accessibilityLabelledBy, error, required, editable, disabled, loading, maxLength, helpText, value, defaultValue, ...nativeProps }: TextInputProps) => JSX.Element;
 export default TextInput;

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

@@ -1,9 +1,9 @@
 import { View } from 'react-native';
 import type { ViewProps } from 'react-native';
 declare const StyledPickerWrapper: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 export { StyledPickerWrapper };

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

@@ -1,46 +1,47 @@
 import { Animated, TouchableOpacity, View } from 'react-native';
 import type { ViewProps } from 'react-native';
+import { IntentType } from './types';
 declare const ToastContainerWrapper: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     position: 'top' | 'bottom';
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 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;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     themeVariant: 'default' | 'round';
-    themeIntent: 'success' | 'info' | 'warning' | 'error';
+    themeIntent: IntentType;
 }, {}, {}>;
 declare const IconContainer: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const TextContainer: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const ContentContainer: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     showDivider: boolean;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const CTAWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
+    ref?: import("react").Ref<TouchableOpacity>;
 }>;
 export { ToastContainerWrapper, Container, ContentContainer, TextContainer, IconContainer, CTAWrapper, };

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

@@ -1,6 +1,7 @@
 import type { ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon';
+export declare type IntentType = 'success' | 'info' | 'warning' | 'error' | 'notification' | 'snackbar';
 export interface ToastProps {
     /**
      * Toast content.
@@ -16,7 +17,7 @@ export interface ToastProps {
     /**
      * Visual intent color to apply to alert.
      */
-    intent?: 'success' | 'info' | 'warning' | 'error';
+    intent?: 'success' | 'info' | 'warning' | 'error' | 'notification' | 'snackbar';
     /**
      * Toast variants
      */

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

@@ -1,23 +1,23 @@
 import { TouchableOpacity, View } from 'react-native';
 import type { ViewProps } from 'react-native';
 declare const ToolbarWrapper: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const ToolbarGroupWrapper: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     align: 'left' | 'center' | 'right';
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const ToolbarItemWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
+    ref?: import("react").Ref<TouchableOpacity>;
 }>;
 export { ToolbarWrapper, ToolbarGroupWrapper, ToolbarItemWrapper };

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

@@ -1,12 +1,12 @@
 import { Text } from 'react-native';
 declare const StyledText: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
-    themeFontSize: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxxxlarge';
+    themeFontSize: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxxlarge';
     themeFontWeight: 'light' | 'regular' | 'semi-bold';
     themeIntent: 'body' | 'subdued' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted';
 }, {}, {
-    ref?: import("react").Ref<Text> | undefined;
+    ref?: import("react").Ref<Text>;
 }>;
 export { StyledText };

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

@@ -8,7 +8,7 @@ export interface TextProps extends NativeTextProps {
     /**
      * Size of the text.
      */
-    fontSize?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxxxlarge';
+    fontSize?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxxlarge';
     /**
      * Font weight of the text.
      */

package/types/index.d.ts

@@ -6,6 +6,7 @@ import Avatar from './components/Avatar';
 import Badge from './components/Badge';
 import BottomNavigation from './components/BottomNavigation';
 import BottomSheet from './components/BottomSheet';
+import Box from './components/Box';
 import Button from './components/Button';
 import Calendar from './components/Calendar';
 import Card from './components/Card';
@@ -34,5 +35,5 @@ import Toast from './components/Toast';
 import Toolbar from './components/Toolbar';
 import Typography from './components/Typography';
 import RichTextEditor from './components/RichTextEditor';
-export { theme, getTheme, useTheme, scale, ThemeProvider, swagSystemPalette, workSystemPalette, Accordion, Alert, Avatar, Badge, BottomNavigation, BottomSheet, Button, Calendar, Card, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, FAB, Icon, List, PinInput, Progress, Spinner, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RichTextEditor, };
+export { theme, getTheme, useTheme, scale, ThemeProvider, swagSystemPalette, workSystemPalette, Accordion, Alert, Avatar, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, FAB, Icon, List, PinInput, Progress, Spinner, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RichTextEditor, };
 export * from './types';

package/types/testHelpers/renderWithTheme.d.ts

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

package/types/theme/ThemeSwitcher.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 declare type ThemeName = 'swag' | 'work';
 declare const ThemeSwitcher: ({ name, children, }: {
-    name?: ThemeName | undefined;
+    name?: ThemeName;
     children: React.ReactNode;
 }) => JSX.Element;
 export default ThemeSwitcher;

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

@@ -5,6 +5,7 @@ declare const getAlertTheme: (theme: GlobalTheme) => {
         warning: string;
         error: string;
         info: string;
+        notification: string;
         divider: string;
     };
     radii: {
@@ -14,7 +15,10 @@ declare const getAlertTheme: (theme: GlobalTheme) => {
         height: number;
     };
     space: {
-        padding: number;
+        contentPaddingHorizontal: number;
+        textPaddingHorizontal: number;
+        iconLeftPadding: number;
+        ctaPadding: number;
     };
     borderWidths: {
         base: number;