@hero-design/rn 8.52.2-rc2.0 → 8.54.0

package/src/theme/components/error.ts

@@ -24,7 +24,38 @@ const getErrorTheme = (theme: GlobalTheme) => {
     inPageBackground: theme.colors.neutralGlobalSurface,
   };
 
-  return { colors, sizes, space };
+  const fontSizes = {
+    title: theme.fontSizes.xxxlarge,
+    description: theme.fontSizes.xlarge,
+  };
+
+  const fonts = {
+    title: theme.fonts.playful.semiBold,
+    description: theme.fonts.playful.regular,
+  };
+
+  const lineHeight = {
+    title: theme.lineHeights.xxxlarge,
+    description: theme.lineHeights.xlarge,
+  };
+
+  return { fontSizes, colors, sizes, space, fonts, lineHeight };
 };
 
+type GetErrorThemeReturnType = ReturnType<typeof getErrorTheme>;
+export interface ErrorThemeType extends GetErrorThemeReturnType {
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fonts: GetErrorThemeReturnType['fonts'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fontSizes: GetErrorThemeReturnType['fontSizes'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  lineHeight: GetErrorThemeReturnType['lineHeight'];
+}
+
 export default getErrorTheme;

package/src/theme/components/fab.ts

@@ -61,14 +61,25 @@ const getFABTheme = (theme: GlobalTheme) => {
 
   return {
     radii,
-    colors,
-    sizes,
     fonts,
     fontSizes,
+    colors,
+    sizes,
     lineHeights,
     shadows,
     space,
   };
 };
+type GetFABThemeReturnType = ReturnType<typeof getFABTheme>;
+export interface FABThemeType extends GetFABThemeReturnType {
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fonts: GetFABThemeReturnType['fonts'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fontSizes: GetFABThemeReturnType['fontSizes'];
+}
 
 export default getFABTheme;

package/src/theme/components/pinInput.ts

@@ -13,6 +13,20 @@ const getPinInputTheme = (theme: GlobalTheme) => {
     disabled: theme.colors.disabledOnDefaultGlobalSurface,
   };
 
+  const fonts = {
+    cellText: theme.fonts.neutral.semiBold,
+    errorMessage: theme.fonts.neutral.regular,
+  };
+
+  const fontSizes = {
+    cellText: theme.fontSizes.xxxxlarge,
+    errorMessage: theme.fontSizes.small,
+  };
+  const lineHeights = {
+    cellText: theme.lineHeights.xxxxlarge,
+    errorMessage: theme.fontSizes.small,
+  };
+
   const sizes = {
     cellWidth: theme.sizes.xxlarge,
     cellHeight: theme.sizes.xxxlarge,
@@ -31,11 +45,29 @@ const getPinInputTheme = (theme: GlobalTheme) => {
 
   return {
     borderWidths,
+    lineHeights,
     colors,
+    fonts,
+    fontSizes,
     sizes,
     space,
     radii,
   };
 };
+type GetPinInputThemeReturnType = ReturnType<typeof getPinInputTheme>;
+export interface PinInputThemeType extends GetPinInputThemeReturnType {
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fonts: GetPinInputThemeReturnType['fonts'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fontSizes: GetPinInputThemeReturnType['fontSizes'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  lineHeights: GetPinInputThemeReturnType['lineHeights'];
+}
 
 export default getPinInputTheme;

package/src/theme/components/success.ts

@@ -24,7 +24,29 @@ const getSuccessTheme = (theme: GlobalTheme) => {
     inPageBackground: theme.colors.neutralGlobalSurface,
   };
 
-  return { colors, sizes, space };
+  const fontSizes = {
+    title: theme.fontSizes.xxxlarge,
+    description: theme.fontSizes.xlarge,
+  };
+
+  const fonts = {
+    title: theme.fonts.playful.semiBold,
+    description: theme.fonts.playful.regular,
+  };
+
+  return { fontSizes, colors, sizes, space, fonts };
 };
 
+type GetSuccessThemeReturnType = ReturnType<typeof getSuccessTheme>;
+export interface SuccessThemeType extends GetSuccessThemeReturnType {
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fonts: GetSuccessThemeReturnType['fonts'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fontSizes: GetSuccessThemeReturnType['fontSizes'];
+}
+
 export default getSuccessTheme;

package/src/theme/components/tag.ts

@@ -21,6 +21,17 @@ const getTagTheme = (theme: GlobalTheme) => {
     text: theme.colors.onDefaultGlobalSurface,
   };
 
+  const fonts = {
+    default: theme.fonts.neutral.semiBold,
+  };
+
+  const fontSizes = {
+    default: theme.fontSizes.small,
+  };
+  const lineHeights = {
+    default: theme.lineHeights.small,
+  };
+
   const space = {
     horizontalPadding: theme.space.small,
     verticalPadding: theme.space.xsmall,
@@ -30,7 +41,23 @@ const getTagTheme = (theme: GlobalTheme) => {
     default: theme.radii.base,
   };
 
-  return { borderWidths, colors, space, radii };
+  return { borderWidths, colors, fonts, fontSizes, space, radii, lineHeights };
 };
 
+type GetTagThemeReturnType = ReturnType<typeof getTagTheme>;
+export interface TagThemeType extends GetTagThemeReturnType {
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fonts: GetTagThemeReturnType['fonts'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fontSizes: GetTagThemeReturnType['fontSizes'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  lineHeights: GetTagThemeReturnType['lineHeights'];
+}
+
 export default getTagTheme;

package/src/theme/components/textInput.ts

@@ -64,6 +64,11 @@ const getTextInputTheme = (theme: GlobalTheme) => {
 
   const fontSizes = {
     text: theme.fontSizes.large,
+    labelInsideTextInput: theme.fontSizes.large,
+    error: theme.fontSizes.small,
+    maxLength: theme.fontSizes.small,
+    asteriskLabel: theme.fontSizes.large,
+    topLabel: theme.fontSizes.small,
   };
 
   const borderWidths = {

package/src/theme/getTheme.ts

@@ -4,12 +4,13 @@ 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 getBadgeTheme, { BadgeThemeType } from './components/badge';
+import getBottomNavigationTheme from './components/bottomNavigation';
 import getBottomSheetTheme from './components/bottomSheet';
-import getButtonTheme from './components/button';
+import getButtonTheme, { ButtonThemeType } from './components/button';
 import getCalendarTheme from './components/calendar';
 import getCardTheme from './components/card';
-import getCarouselTheme from './components/carousel';
+import getCarouselTheme, { CarouselThemeType } from './components/carousel';
 import getCardCarouselTheme from './components/cardCarousel';
 import getCheckboxTheme from './components/checkbox';
 import getChipTheme from './components/chip';
@@ -17,14 +18,14 @@ import getContentNavigatorTheme from './components/contentNavigator';
 import getDatePickerTheme from './components/datePicker';
 import getDividerTheme from './components/divider';
 import getDrawerTheme from './components/drawer';
-import getEmptyTheme from './components/empty';
-import getErrorTheme from './components/error';
-import getFABTheme from './components/fab';
+import getEmptyTheme, { EmptyThemeType } from './components/empty';
+import getErrorTheme, { ErrorThemeType } from './components/error';
+import getFABTheme, { FABThemeType } from './components/fab';
 import getIconTheme from './components/icon';
 import getImageTheme from './components/image';
 import getListTheme from './components/list';
 import getPageControlTheme from './components/pageControl';
-import getPinInputTheme from './components/pinInput';
+import getPinInputTheme, { PinInputThemeType } from './components/pinInput';
 import getProgressTheme from './components/progress';
 import getRadioTheme from './components/radio';
 import getRateTheme from './components/rate';
@@ -35,11 +36,11 @@ import getSelectTheme from './components/select';
 import getSkeletonTheme from './components/skeleton';
 import getSliderTheme from './components/slider';
 import getSpinnerTheme from './components/spinner';
-import getSuccessTheme from './components/success';
+import getSuccessTheme, { SuccessThemeType } from './components/success';
 import getSwipeableTheme from './components/swipeable';
 import getSwitchTheme from './components/switch';
 import getTabsTheme from './components/tabs';
-import getTagTheme from './components/tag';
+import getTagTheme, { TagThemeType } from './components/tag';
 import getTextInputTheme from './components/textInput';
 import getTimePickerTheme from './components/timePicker';
 import getToastTheme from './components/toast';
@@ -54,12 +55,13 @@ type Theme = GlobalTheme & {
     alert: ReturnType<typeof getAlertTheme>;
     attachment: ReturnType<typeof getAttachmentTheme>;
     avatar: ReturnType<typeof getAvatarTheme>;
-    badge: ReturnType<typeof getBadgeTheme>;
+    badge: BadgeThemeType;
+    bottomNavigation: ReturnType<typeof getBottomNavigationTheme>;
     bottomSheet: ReturnType<typeof getBottomSheetTheme>;
-    button: ReturnType<typeof getButtonTheme>;
+    button: ButtonThemeType;
     calendar: ReturnType<typeof getCalendarTheme>;
     card: ReturnType<typeof getCardTheme>;
-    carousel: ReturnType<typeof getCarouselTheme>;
+    carousel: CarouselThemeType;
     cardCarousel: ReturnType<typeof getCardCarouselTheme>;
     checkbox: ReturnType<typeof getCheckboxTheme>;
     chip: ReturnType<typeof getChipTheme>;
@@ -67,14 +69,14 @@ type Theme = GlobalTheme & {
     datePicker: ReturnType<typeof getDatePickerTheme>;
     divider: ReturnType<typeof getDividerTheme>;
     drawer: ReturnType<typeof getDrawerTheme>;
-    empty: ReturnType<typeof getEmptyTheme>;
-    error: ReturnType<typeof getErrorTheme>;
-    fab: ReturnType<typeof getFABTheme>;
+    empty: EmptyThemeType;
+    error: ErrorThemeType;
+    fab: FABThemeType;
     icon: ReturnType<typeof getIconTheme>;
     image: ReturnType<typeof getImageTheme>;
     list: ReturnType<typeof getListTheme>;
     pageControl: ReturnType<typeof getPageControlTheme>;
-    pinInput: ReturnType<typeof getPinInputTheme>;
+    pinInput: PinInputThemeType;
     progress: ReturnType<typeof getProgressTheme>;
     radio: ReturnType<typeof getRadioTheme>;
     rate: ReturnType<typeof getRateTheme>;
@@ -85,11 +87,11 @@ type Theme = GlobalTheme & {
     skeleton: ReturnType<typeof getSkeletonTheme>;
     slider: ReturnType<typeof getSliderTheme>;
     spinner: ReturnType<typeof getSpinnerTheme>;
-    success: ReturnType<typeof getSuccessTheme>;
+    success: SuccessThemeType;
     swipeable: ReturnType<typeof getSwipeableTheme>;
     switch: ReturnType<typeof getSwitchTheme>;
     tabs: ReturnType<typeof getTabsTheme>;
-    tag: ReturnType<typeof getTagTheme>;
+    tag: TagThemeType;
     textInput: ReturnType<typeof getTextInputTheme>;
     timePicker: ReturnType<typeof getTimePickerTheme>;
     toast: ReturnType<typeof getToastTheme>;
@@ -111,6 +113,7 @@ const getTheme = (
       attachment: getAttachmentTheme(globalTheme),
       avatar: getAvatarTheme(globalTheme),
       badge: getBadgeTheme(globalTheme),
+      bottomNavigation: getBottomNavigationTheme(globalTheme),
       bottomSheet: getBottomSheetTheme(globalTheme),
       button: getButtonTheme(globalTheme),
       calendar: getCalendarTheme(globalTheme),

package/src/types.ts

@@ -1,3 +1,4 @@
+import type { BottomNavigationTabType } from './components/BottomNavigation';
 import type { IconName } from './components/Icon';
 import type { SingleSelectProps, MultiSelectProps } from './components/Select';
 import type { TabType } from './components/Tabs';
@@ -18,6 +19,7 @@ import { FABHandles } from './components/FAB/FAB';
 import { ActionGroupHandles } from './components/FAB/ActionGroup';
 
 export type {
+  BottomNavigationTabType,
   IconName,
   SingleSelectProps,
   MultiSelectProps,

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

@@ -2,7 +2,7 @@ import React from 'react';
 import type { ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { Variant } from './StyledAccordion';
-export type AccordionItemProps = {
+export declare type AccordionItemProps = {
     header: string | ReactElement;
     content: ReactElement;
     open?: boolean;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TouchableOpacity, View } from 'react-native';
-export type Variant = 'default' | 'card';
+export declare type Variant = 'default' | 'card';
 export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { View } from 'react-native';
 import { AvatarProps } from '../Avatar';
-type ThemeVariant = 'horizontal' | 'vertical';
+declare type ThemeVariant = 'horizontal' | 'vertical';
 export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { View, Image, TouchableOpacity } from 'react-native';
 import { TextProps } from '../Typography/Text';
-type ThemeSize = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge';
-type ThemeIntent = 'primary' | 'info' | 'danger' | 'success' | 'warning';
+declare type ThemeSize = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge';
+declare type ThemeIntent = 'primary' | 'info' | 'danger' | 'success' | 'warning';
 declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Animated } from 'react-native';
-type ThemeIntent = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived';
-type ThemePadding = 'narrowContent' | 'wideContent';
+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>> & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

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

@@ -0,0 +1,52 @@
+/// <reference types="react" />
+import { View } from 'react-native';
+declare const BottomNavigationTab: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeVisibility?: boolean | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const BottomNavigationContainer: 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 ContentWrapper: 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 BottomBarWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeInsets: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const BottomBar: 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 BottomBarItem: 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 StyledBottomBarText: import("@emotion/native").StyledComponent<import("../Typography/Caption").CaptionProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+export { BottomBar, BottomBarItem, BottomNavigationTab, BottomNavigationContainer, BottomBarWrapper, ContentWrapper, StyledBottomBarText, };

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

@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import type { IconName } from '../Icon';
+export declare type BottomNavigationTabType = {
+    key: string;
+    title?: string;
+    icon: IconName;
+    component: ReactNode;
+    testID?: string;
+};
+interface BottomNavigationProps extends ViewProps {
+    /**
+     * Callback which is called on tab press, receiving key of upcoming active Tab.
+     */
+    onTabPress: (key: string) => void;
+    /**
+     * Whether inactive tabs should be removed and unmounted in React.
+     * Defaults to `false`.
+     */
+    renderActiveTabOnly?: boolean;
+    /**
+     * Current selected tab key.
+     */
+    selectedTabKey: string;
+    /**
+     * List of Tabs to be rendered. Each Tab must have an unique key.
+     */
+    tabs: {
+        key: string;
+        title?: string;
+        icon: IconName;
+        component: ReactNode;
+        testID?: string;
+    }[];
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const BottomNavigation: ({ onTabPress, renderActiveTabOnly, selectedTabKey, tabs, ...nativeProps }: BottomNavigationProps) => JSX.Element;
+export default BottomNavigation;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export type BottomSheetContextType = {
+export declare type BottomSheetContextType = {
     setInternalShowDivider: (value: boolean) => void;
 };
 declare const BottomSheetContext: import("react").Context<BottomSheetContextType>;

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

@@ -165,6 +165,6 @@ declare const config: {
     };
 };
 export declare const flexPropsKey: readonly ["alignContent", "alignItems", "alignSelf", "display", "flex", "flexBasis", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "justifyContent"];
-export type ConfigType = typeof config;
-export type FlexPropsKeyType = typeof flexPropsKey[number];
+export declare type ConfigType = typeof config;
+export declare type FlexPropsKeyType = typeof flexPropsKey[number];
 export default config;

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

@@ -10,11 +10,11 @@ export interface ThemeScale {
     radii: keyof Radii;
     borderWidths: keyof BorderWidths;
 }
-type ConfigKeyType = keyof ConfigType;
-export type StyleProps = {
+declare type ConfigKeyType = keyof ConfigType;
+export declare type StyleProps = {
     [key in ConfigKeyType]?: ThemeScale[ConfigType[key]['scale']];
 };
-export type FlexStyleProps = Pick<Omit<ViewStyle, keyof StyleProps>, FlexPropsKeyType>;
+export declare type FlexStyleProps = Pick<Omit<ViewStyle, keyof StyleProps>, FlexPropsKeyType>;
 export interface BoxViewProps extends ViewProps {
     /**
      * Box's content.

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

@@ -2,7 +2,7 @@
 import type { Theme } from '@emotion/react';
 import type { ViewProps } from 'react-native';
 import { View } from 'react-native';
-type ThemeVariant = 'basic-transparent' | 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger' | 'text-primary' | 'text-secondary' | 'text-danger';
+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 | undefined;
     as?: import("react").ElementType<any> | undefined;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
-type ThemeVariant = 'basic-transparent' | 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger' | 'text-primary' | 'text-secondary' | 'text-danger';
+declare type ThemeVariant = 'basic-transparent' | 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger' | 'text-primary' | 'text-secondary' | 'text-danger';
 interface LoadingIndicatorProps extends ViewProps {
     /**
      * Size of the loading dot.

package/types/components/Button/StyledButton.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { TouchableHighlight, View } from 'react-native';
 import type { Theme } from '@emotion/react';
-type Intent = 'primary' | 'secondary' | 'danger';
-type ThemeVariant = 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger' | 'text-primary' | 'text-secondary' | 'text-danger';
+declare type Intent = 'primary' | 'secondary' | 'danger';
+declare type ThemeVariant = 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger' | 'text-primary' | 'text-secondary' | 'text-danger';
 declare const StyledButtonContainer: import("@emotion/native").StyledComponent<import("react-native").TouchableHighlightProps & {
     theme?: Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/types/components/Carousel/CardCarousel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
-export type CardCarouselHandles = {
+export declare type CardCarouselHandles = {
     snapToIndex: (index: number) => void;
 };
 export interface CardCarouselProps {

package/types/components/Carousel/types.d.ts

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
 import { ImageSourcePropType, ImageResizeMode } from 'react-native';
-export type CarouselImageProps = ImageSourcePropType & {
+export declare type CarouselImageProps = ImageSourcePropType & {
     height?: number;
     width?: number;
     resizeMode?: ImageResizeMode;
 };
-export type CarouselData = {
+export declare type CarouselData = {
     image: CarouselImageProps | string;
     content?: ReactNode;
     heading: string;

package/types/components/Checkbox/StyledCheckbox.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TouchableOpacity, View } from 'react-native';
-type CheckboxThemeState = 'default' | 'disabled' | 'readonly';
+declare type CheckboxThemeState = 'default' | 'disabled' | 'readonly';
 export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

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

@@ -9,6 +9,11 @@ export interface CheckboxProps {
      * Checkbox's description.
      */
     description?: string;
+    /**
+     * @deprecated This prop will be removed in the next major release. Checkboxes will always have border.
+     * Whether the border is shown.
+     */
+    withBorder?: boolean;
     /**
      * Whether the switch is disabled
      */
@@ -30,10 +35,10 @@ export interface CheckboxProps {
      */
     readonly?: boolean;
 }
-type getStateType = {
+declare type getStateType = {
     disabled: boolean;
     readonly: boolean;
 };
 export declare const getThemeState: ({ disabled, readonly }: getStateType) => "default" | "disabled" | "readonly";
-declare const Checkbox: ({ checked, description, disabled, onPress, style, testID, readonly, }: CheckboxProps) => React.JSX.Element;
+declare const Checkbox: ({ checked, description, withBorder, disabled, onPress, style, testID, readonly, }: CheckboxProps) => React.JSX.Element;
 export default Checkbox;

package/types/components/Chip/StyledChip.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TouchableOpacity } from 'react-native';
-type StyledChipWrapperProps = {
+declare type StyledChipWrapperProps = {
     themeVariant?: 'outlined' | 'filled';
     themeSelected?: boolean;
 };

package/types/components/Divider/StyledDivider.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { View } from 'react-native';
-type MarginSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+declare type MarginSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 declare const StyledDivider: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/types/components/Drawer/DragableDrawer/helpers.d.ts

@@ -1,5 +1,5 @@
 export declare const getOffset: (height: number, percentage: number) => number;
-export type SnapPointsData = {
+export declare type SnapPointsData = {
     list: number[];
     minHeightOffset: number;
     maxHeightOffset: number;

package/types/components/Empty/StyledEmpty.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { View } from 'react-native';
-type ThemeVariant = 'light' | 'dark';
+declare type ThemeVariant = 'light' | 'dark';
 declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;