@hero-design/rn 7.24.0 → 7.25.0

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

@@ -2,46 +2,46 @@ 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;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     position: 'top' | 'bottom';
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 declare const Container: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
     children?: import("react").ReactNode;
 } & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     themeVariant: 'default' | 'round';
     themeIntent: IntentType;
 }, {}, {}>;
 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 { ToastContainerWrapper, Container, ContentContainer, TextContainer, IconContainer, CTAWrapper, };

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;
-    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 ToolbarGroupWrapper: 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;
 } & {
     align: 'left' | 'center' | 'right';
 }, {}, {
-    ref?: import("react").Ref<View>;
+    ref?: import("react").Ref<View> | undefined;
 }>;
 declare const ToolbarItemWrapper: 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 { 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;
-    as?: import("react").ElementType<any>;
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     themeFontSize: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxxlarge';
     themeFontWeight: 'light' | 'regular' | 'semi-bold';
     themeIntent: 'body' | 'subdued' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted';
 }, {}, {
-    ref?: import("react").Ref<Text>;
+    ref?: import("react").Ref<Text> | undefined;
 }>;
 export { StyledText };

package/types/index.d.ts

@@ -1,7 +1,8 @@
-import theme, { getTheme, ThemeProvider, useTheme, swagSystemPalette, workSystemPalette, jobsSystemPalette, ThemeSwitcher } from './theme';
+import theme, { getTheme, ThemeProvider, useTheme, swagSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, ThemeSwitcher } from './theme';
 import { scale } from './utils/scale';
 import Accordion from './components/Accordion';
 import Alert from './components/Alert';
+import Attachment from './components/Attachment';
 import Avatar from './components/Avatar';
 import Badge from './components/Badge';
 import BottomNavigation from './components/BottomNavigation';
@@ -39,5 +40,5 @@ import Toolbar from './components/Toolbar';
 import Typography from './components/Typography';
 import RefreshControl from './components/RefreshControl';
 import RichTextEditor from './components/RichTextEditor';
-export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, swagSystemPalette, workSystemPalette, jobsSystemPalette, Accordion, Alert, Avatar, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, FAB, Icon, Image, List, PinInput, Progress, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RefreshControl, RichTextEditor, };
+export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, swagSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, FAB, Icon, Image, List, PinInput, Progress, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RefreshControl, 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) => import("@testing-library/react-native").RenderAPI;
+declare const renderWithTheme: (ui: JSX.Element, options?: RenderOptions | undefined) => 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' | 'jobs';
+declare type ThemeName = 'swag' | 'work' | 'jobs' | 'wallet' | 'eBens';
 declare const ThemeSwitcher: ({ name, children, }: {
-    name?: ThemeName;
+    name?: ThemeName | undefined;
     children: React.ReactNode;
 }) => JSX.Element;
 export default ThemeSwitcher;

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

@@ -0,0 +1,21 @@
+import type { GlobalTheme } from '../global';
+declare const getAttachmentTheme: (theme: GlobalTheme) => {
+    colors: {
+        highlightedBackground: string;
+    };
+    radii: {
+        image: number;
+        container: number;
+    };
+    sizes: {
+        imageHeight: number;
+        imageWidth: number;
+    };
+    space: {
+        containerPadding: number;
+        containerVerticalPadding: number;
+        ctaPadding: number;
+        textHorizontalPadding: number;
+    };
+};
+export default getAttachmentTheme;

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

@@ -1,6 +1,7 @@
 import type { GlobalTheme } from '../global';
 declare const getBadgeTheme: (theme: GlobalTheme) => {
     colors: {
+        primary: string;
         danger: string;
         info: string;
         success: string;

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

@@ -21,29 +21,14 @@ declare const getButtonTheme: (theme: GlobalTheme) => {
     };
     colors: {
         primary: string;
-        pressedPrimary: string;
         secondary: string;
-        pressedSecondary: string;
         danger: string;
-        pressedDanger: string;
         defaultText: string;
         disabledText: string;
         disabledBorder: string;
         disabledBackground: string;
         invertedText: string;
         utilityBackground: string;
-        underlayColors: {
-            'filled-primary': string;
-            'filled-secondary': string;
-            'filled-danger': string;
-            'outlined-primary': string;
-            'outlined-secondary': string;
-            'outlined-danger': string;
-            'text-primary': string;
-            'text-secondary': string;
-            'text-danger': string;
-            'basic-transparent': string;
-        };
     };
     lineHeight: {
         default: number;

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

@@ -2,7 +2,6 @@ import type { GlobalTheme } from '../global';
 declare const getListTheme: (theme: GlobalTheme) => {
     colors: {
         checkedListItemContainerBackground: string;
-        highlightedListItemContainerBackground: string;
         listItemContainerBackground: string;
         leadingStatus: {
             danger: string;

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

@@ -6,6 +6,7 @@ declare const getProgressTheme: (theme: GlobalTheme) => {
         warning: string;
         danger: string;
         info: string;
+        archived: string;
         background: string;
         innerBackground: string;
     };

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

@@ -8,6 +8,7 @@ declare const getTabsTheme: (theme: GlobalTheme) => {
         inactive: string;
         activeBackground: string;
         headerBottom: string;
+        indicator: string;
         text: string;
     };
     space: {

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

@@ -5,9 +5,9 @@ declare const getTagTheme: (theme: GlobalTheme) => {
     };
     colors: {
         default: string;
-        defaultBackground: any;
+        defaultBackground: undefined;
         primary: string;
-        primaryBackground: any;
+        primaryBackground: undefined;
         info: string;
         infoBackground: string;
         success: string;

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

@@ -10,11 +10,6 @@ declare const getTextInputTheme: (theme: GlobalTheme) => {
             filled: string;
         };
         error: string;
-        placeholderIfNotFocused: string;
-        placeholderIfFocued: string;
-        label: string;
-        readonlyLabel: string;
-        disabledLabel: string;
         text: string;
         borders: {
             default: string;

package/types/theme/getTheme.d.ts

@@ -1,5 +1,6 @@
 import getAccordionTheme from './components/accordion';
 import getAlertTheme from './components/alert';
+import getAttachmentTheme from './components/attachment';
 import getAvatarTheme from './components/avatar';
 import getBadgeTheme from './components/badge';
 import getBottomNavigationTheme from './components/bottomNavigation';
@@ -40,6 +41,7 @@ declare type Theme = GlobalTheme & {
     __hd__: {
         accordion: ReturnType<typeof getAccordionTheme>;
         alert: ReturnType<typeof getAlertTheme>;
+        attachment: ReturnType<typeof getAttachmentTheme>;
         avatar: ReturnType<typeof getAvatarTheme>;
         badge: ReturnType<typeof getBadgeTheme>;
         bottomNavigation: ReturnType<typeof getBottomNavigationTheme>;

package/types/theme/global/colors/eBens.d.ts

@@ -0,0 +1,3 @@
+import type { SystemPalette } from './types';
+declare const eBensSystemPalette: SystemPalette;
+export default eBensSystemPalette;

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

@@ -1,14 +1,16 @@
 export declare type GlobalSystemPalette = {
-    globalPrimary: string;
-    mutedGlobalPrimary: string;
-    onGlobalPrimary: string;
-    globalSecondary: string;
-    globalPrimaryOutline: string;
-    globalSecondaryOutline: string;
     defaultGlobalSurface: string;
     onDefaultGlobalSurface: string;
     neutralGlobalSurface: string;
+    mutedOnDefaultGlobalSurface: string;
+    inactiveOnDefaultGlobalSurface: string;
     disabledOnDefaultGlobalSurface: string;
+    darkGlobalSurface: string;
+    onDarkGlobalSurface: string;
+    primaryOutline: string;
+    secondaryOutline: string;
+    inactiveOutline: string;
+    disabledOutline: string;
     error: string;
     errorSurface: string;
     onErrorSurface: string;
@@ -27,33 +29,35 @@ export declare type GlobalSystemPalette = {
 };
 export declare type BrandSystemPalette = {
     primary: string;
-    mutedPrimary: string;
     onPrimary: string;
     secondary: string;
-    highlightedSecondarySurface: string;
     onSecondary: string;
+    defaultSurface: string;
+    highlightedSurface: string;
+    pressedSurface: string;
+    decorativePrimary: string;
+    decorativePrimarySurface: string;
+};
+export declare type LegacyBrandSystemPalette = {
+    mutedPrimary: string;
+    highlightedSecondarySurface: string;
     mutedSecondary: string;
     disabledSecondary: string;
-    highlightedSurface: string;
     lightHighlightedSurface: string;
 };
 export declare 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;
@@ -61,7 +65,6 @@ export declare type LegacySystemPalette = {
     dangerMediumLight: string;
     dangerLight: string;
     dangerBackground: string;
-    warning: string;
     warningLight: string;
     warningDark: string;
     warningBackground: string;
@@ -74,12 +77,16 @@ export declare 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 declare type SystemPalette = LegacySystemPalette & GlobalSystemPalette & BrandSystemPalette;
+export declare type SystemPalette = LegacySystemPalette & LegacyBrandSystemPalette & GlobalSystemPalette & BrandSystemPalette;

package/types/theme/global/colors/wallet.d.ts

@@ -0,0 +1,3 @@
+import type { SystemPalette } from './types';
+declare const walletSystemPalette: SystemPalette;
+export default walletSystemPalette;

package/types/theme/global/index.d.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 type { Scale } from './scale';
 import type { SystemPalette } from './colors/types';
 declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
@@ -9,19 +11,15 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         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;
@@ -29,7 +27,6 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         dangerMediumLight: string;
         dangerLight: string;
         dangerBackground: string;
-        warning: string;
         warningLight: string;
         warningDark: string;
         warningBackground: string;
@@ -42,7 +39,6 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         disabledLightText: string;
         invertedText: string;
         outline: string;
-        archived: string;
         archivedLight: string;
         archivedDark: string;
         archivedBackground: string;
@@ -54,29 +50,47 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         globalSecondary: string;
         globalPrimaryOutline: string;
         globalSecondaryOutline: string;
+        mutedPrimary: string;
+        highlightedSecondarySurface: string;
+        mutedSecondary: string;
+        disabledSecondary: string;
+        lightHighlightedSurface: string;
         defaultGlobalSurface: string;
         onDefaultGlobalSurface: string;
         neutralGlobalSurface: string;
+        mutedOnDefaultGlobalSurface: string;
+        inactiveOnDefaultGlobalSurface: string;
         disabledOnDefaultGlobalSurface: string;
+        darkGlobalSurface: string;
+        onDarkGlobalSurface: string;
+        primaryOutline: string;
+        secondaryOutline: string;
+        inactiveOutline: string;
+        disabledOutline: string;
         error: string;
         errorSurface: string;
         onErrorSurface: string;
+        warning: string;
         warningSurface: string;
         onWarningSurface: string;
+        success: string;
         successSurface: string;
         onSuccessSurface: string;
+        info: string;
         infoSurface: string;
         onInfoSurface: string;
+        archived: string;
         archivedSurface: string;
         onArchivedSurface: string;
-        mutedPrimary: string;
+        primary: string;
         onPrimary: string;
-        highlightedSecondarySurface: string;
+        secondary: string;
         onSecondary: string;
-        mutedSecondary: string;
-        disabledSecondary: string;
+        defaultSurface: string;
         highlightedSurface: string;
-        lightHighlightedSurface: string;
+        pressedSurface: string;
+        decorativePrimary: string;
+        decorativePrimarySurface: string;
     };
     fonts: import("./typography").Fonts;
     fontSizes: import("./typography").FontSizes;
@@ -88,4 +102,4 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
 };
 declare type GlobalTheme = ReturnType<typeof getGlobalTheme>;
 export type { GlobalTheme, Scale, SystemPalette };
-export { getGlobalTheme, defaultScale, swagSystemPalette, workSystemPalette, jobsSystemPalette, };
+export { getGlobalTheme, defaultScale, swagSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, };

package/types/theme/index.d.ts

@@ -1,9 +1,9 @@
 import getTheme from './getTheme';
 import ThemeProvider, { useTheme } from './ThemeProvider';
 import ThemeSwitcher from './ThemeSwitcher';
-import { swagSystemPalette, workSystemPalette, jobsSystemPalette } from './global';
+import { swagSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette } from './global';
 import type { Theme } from './getTheme';
 declare const defaultTheme: Theme;
 export type { Theme };
-export { getTheme, ThemeProvider, ThemeSwitcher, useTheme, swagSystemPalette, workSystemPalette, jobsSystemPalette, };
+export { getTheme, ThemeProvider, ThemeSwitcher, useTheme, swagSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, };
 export default defaultTheme;

package/types/utils/functions.d.ts

@@ -0,0 +1 @@
+export declare const noop: () => void;

package/types/utils/hooks.d.ts

@@ -1 +1 @@
-export declare const usePrevious: <T>(value: T) => T;
+export declare const usePrevious: <T>(value: T) => T | undefined;