@hero-design/rn 7.18.1 → 7.20.0

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

@@ -0,0 +1,170 @@
+declare const config: {
+    readonly borderWidth: {
+        readonly property: "borderWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly borderBottomWidth: {
+        readonly property: "borderBottomWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly borderTopWidth: {
+        readonly property: "borderTopWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly borderLeftWidth: {
+        readonly property: "borderLeftWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly borderRightWidth: {
+        readonly property: "borderRightWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly borderBottomEndRadius: {
+        readonly property: "borderBottomEndRadius";
+        readonly scale: "radii";
+    };
+    readonly borderBottomLeftRadius: {
+        readonly property: "borderBottomLeftRadius";
+        readonly scale: "radii";
+    };
+    readonly borderBottomRightRadius: {
+        readonly property: "borderBottomRightRadius";
+        readonly scale: "radii";
+    };
+    readonly borderBottomStartRadius: {
+        readonly property: "borderBottomStartRadius";
+        readonly scale: "radii";
+    };
+    readonly borderTopEndRadius: {
+        readonly property: "borderTopEndRadius";
+        readonly scale: "radii";
+    };
+    readonly borderTopLeftRadius: {
+        readonly property: "borderTopLeftRadius";
+        readonly scale: "radii";
+    };
+    readonly borderTopRightRadius: {
+        readonly property: "borderTopRightRadius";
+        readonly scale: "radii";
+    };
+    readonly borderTopStartRadius: {
+        readonly property: "borderTopStartRadius";
+        readonly scale: "radii";
+    };
+    readonly borderRadius: {
+        readonly property: "borderRadius";
+        readonly scale: "radii";
+    };
+    readonly margin: {
+        readonly property: "margin";
+        readonly scale: "space";
+    };
+    readonly marginBottom: {
+        readonly property: "marginBottom";
+        readonly scale: "space";
+    };
+    readonly marginEnd: {
+        readonly property: "marginEnd";
+        readonly scale: "space";
+    };
+    readonly marginHorizontal: {
+        readonly property: "marginHorizontal";
+        readonly scale: "space";
+    };
+    readonly marginLeft: {
+        readonly property: "marginLeft";
+        readonly scale: "space";
+    };
+    readonly marginRight: {
+        readonly property: "marginRight";
+        readonly scale: "space";
+    };
+    readonly marginStart: {
+        readonly property: "marginStart";
+        readonly scale: "space";
+    };
+    readonly marginTop: {
+        readonly property: "marginTop";
+        readonly scale: "space";
+    };
+    readonly marginVertical: {
+        readonly property: "marginVertical";
+        readonly scale: "space";
+    };
+    readonly padding: {
+        readonly property: "padding";
+        readonly scale: "space";
+    };
+    readonly paddingBottom: {
+        readonly property: "paddingBottom";
+        readonly scale: "space";
+    };
+    readonly paddingEnd: {
+        readonly property: "paddingEnd";
+        readonly scale: "space";
+    };
+    readonly paddingHorizontal: {
+        readonly property: "paddingHorizontal";
+        readonly scale: "space";
+    };
+    readonly paddingLeft: {
+        readonly property: "paddingLeft";
+        readonly scale: "space";
+    };
+    readonly paddingRight: {
+        readonly property: "paddingRight";
+        readonly scale: "space";
+    };
+    readonly paddingStart: {
+        readonly property: "paddingStart";
+        readonly scale: "space";
+    };
+    readonly paddingTop: {
+        readonly property: "paddingTop";
+        readonly scale: "space";
+    };
+    readonly paddingVertical: {
+        readonly property: "paddingVertical";
+        readonly scale: "space";
+    };
+    readonly backgroundColor: {
+        readonly property: "backgroundColor";
+        readonly scale: "colors";
+    };
+    readonly bgColor: {
+        readonly property: "backgroundColor";
+        readonly scale: "colors";
+    };
+    readonly borderColor: {
+        readonly property: "borderColor";
+        readonly scale: "colors";
+    };
+    readonly borderTopColor: {
+        readonly property: "borderTopColor";
+        readonly scale: "colors";
+    };
+    readonly borderBottomColor: {
+        readonly property: "borderBottomColor";
+        readonly scale: "colors";
+    };
+    readonly borderStartColor: {
+        readonly property: "borderStartColor";
+        readonly scale: "colors";
+    };
+    readonly borderEndColor: {
+        readonly property: "borderEndColor";
+        readonly scale: "colors";
+    };
+    readonly borderLeftColor: {
+        readonly property: "borderLeftColor";
+        readonly scale: "colors";
+    };
+    readonly borderRightColor: {
+        readonly property: "borderRightColor";
+        readonly scale: "colors";
+    };
+};
+export declare const flexPropsKey: readonly ["alignContent", "alignItems", "alignSelf", "display", "flex", "flexBasis", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "justifyContent"];
+export declare type ConfigType = typeof config;
+export declare type FlexPropsKeyType = typeof flexPropsKey[number];
+export default config;

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

@@ -0,0 +1 @@
+export declare const pick: (keys: Array<string>, props: Record<string, any>) => {};

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

@@ -0,0 +1,5 @@
+import type { BoxViewProps, FlexStyleProps, StyleProps } from './types';
+export interface BoxProps extends StyleProps, FlexStyleProps, BoxViewProps {
+}
+declare const Box: ({ children, style, testID, ...otherProps }: BoxProps) => JSX.Element;
+export default Box;

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

@@ -0,0 +1,31 @@
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import { SystemPalette } from '../../theme/global';
+import { BorderWidths, Radii } from '../../theme/global/borders';
+import { Space } from '../../theme/global/space';
+import { ConfigType, FlexPropsKeyType } from './config';
+export interface ThemeScale {
+    colors: keyof SystemPalette;
+    space: keyof Space;
+    radii: keyof Radii;
+    borderWidths: keyof BorderWidths;
+}
+declare type ConfigKeyType = keyof ConfigType;
+export declare type StyleProps = {
+    [key in ConfigKeyType]?: ThemeScale[ConfigType[key]['scale']];
+};
+export declare type FlexStyleProps = Pick<Omit<ViewStyle, keyof StyleProps>, FlexPropsKeyType>;
+export interface BoxViewProps extends ViewProps {
+    /**
+     * Box's content.
+     */
+    children?: React.ReactNode;
+    /**
+     * Addtional styles.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+export {};

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

@@ -1,7 +1,7 @@
-import { ReactChild } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import { IconName } from '../Icon';
-import { Intent, ThemeVariant } from './StyledButton';
+import type { ReactChild } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { IconName } from '../Icon';
+import type { Intent, ThemeVariant } from './StyledButton';
 export interface ButtonProps {
     /**
      * Helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.

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

@@ -1,5 +1,5 @@
-import { StyleProp, ViewStyle, TouchableOpacityProps } from 'react-native';
-import { IconProps, IconName } from '../Icon';
+import type { StyleProp, ViewStyle, TouchableOpacityProps } from 'react-native';
+import type { IconProps, IconName } from '../Icon';
 export interface IconButtonProps {
     /**
      * Set how far you can touch from the button.

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

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

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

@@ -1,4 +1,4 @@
-import { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
 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 {
     /**

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

@@ -1,39 +1,40 @@
 import { TouchableHighlight, View } from 'react-native';
-import { Theme } from '@emotion/react';
+import type { Theme } from '@emotion/react';
 declare type Intent = 'primary' | 'secondary' | '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 StyledButtonContainer: import("@emotion/native").StyledComponent<import("react-native").TouchableHighlightProps & {
-    theme?: Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: Theme;
+    as?: import("react").ElementType<any>;
 } & {
-    disabled?: boolean | undefined;
-    pressed?: boolean | undefined;
+    disabled?: boolean;
+    pressed?: boolean;
     themeVariant: ThemeVariant;
 }, {}, {
-    ref?: import("react").Ref<TouchableHighlight> | undefined;
+    ref?: import("react").Ref<TouchableHighlight>;
 }>;
 declare const StyledButtonText: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
-    theme?: Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: Theme;
+    as?: import("react").ElementType<any>;
 } & {
-    disabled?: boolean | undefined;
-    pressed?: boolean | undefined;
+    disabled?: boolean;
+    pressed?: boolean;
     themeVariant: ThemeVariant;
 }, {}, {}>;
 declare const StyledButtonIconWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: Theme;
+    as?: import("react").ElementType<any>;
 } & {
     themePosition: 'left' | 'right';
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const StyledButtonIcon: import("@emotion/native").StyledComponent<import("../Icon").IconProps & {
-    theme?: Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: Theme;
+    as?: import("react").ElementType<any>;
 } & {
-    disabled?: boolean | undefined;
-    pressed?: boolean | undefined;
+    disabled?: boolean;
+    pressed?: boolean;
     themeVariant: ThemeVariant;
 }, {}, {}>;
-export { StyledButtonContainer, StyledButtonText, StyledButtonIconWrapper, StyledButtonIcon, Intent, ThemeVariant, };
+export { StyledButtonContainer, StyledButtonText, StyledButtonIconWrapper, StyledButtonIcon, };
+export type { Intent, ThemeVariant };

package/types/components/Button/UtilityButton/StyledUtilityButton.d.ts

@@ -1,17 +1,17 @@
 import { View, TouchableOpacity } from 'react-native';
 export declare const ButtonContainer: 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 declare const IconWrapper: 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 declare const ButtonText: 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>;
 }, {}, {}>;

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

@@ -1,6 +1,6 @@
-import { ReactChild } from 'react';
-import { ViewProps } from 'react-native';
-import { IconName } from '../../Icon';
+import type { ReactChild } from 'react';
+import type { ViewProps } from 'react-native';
+import type { IconName } from '../../Icon';
 export interface UtilityButtonProps extends ViewProps {
     /**
      * Places an icon within the button, before the button's text

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

@@ -1,7 +1,7 @@
-import { FunctionComponent } from 'react';
-import { ButtonProps } from './Button';
+import type { FunctionComponent } from 'react';
 import IconButton from './IconButton';
 import UtilityButton from './UtilityButton';
+import type { ButtonProps } from './Button';
 interface CompoundButtonProps extends FunctionComponent<ButtonProps> {
     Icon: typeof IconButton;
     Utility: typeof UtilityButton;

package/types/components/Calendar/StyledCalendar.d.ts

@@ -1,54 +1,55 @@
-import { TouchableOpacity, View, ViewProps } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
+import type { ViewProps } from 'react-native';
 declare const StyledContainer: 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 StyledCalendarHeader: 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 StyledCalendarDayNameCell: 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 StyledCalendarCell: 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>;
 } & {
-    variant?: "selected" | "default" | "current" | undefined;
+    variant?: 'default' | 'current' | 'selected';
 }, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
+    ref?: import("react").Ref<TouchableOpacity>;
 }>;
 declare const StyledCalendarRow: 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 StyledCalendarRowItem: 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 StyledDisabledCalendarRowItem: 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 StyledMark: 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>;
 } & {
     variant: 'primary' | 'inverted';
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 export { StyledContainer, StyledCalendarHeader, StyledCalendarRow, StyledCalendarRowItem, StyledDisabledCalendarRowItem, StyledCalendarDayNameCell, StyledCalendarCell, StyledMark, };

package/types/components/Calendar/helpers.d.ts

@@ -1,3 +1,3 @@
 export declare const initArray: <T>(length: number, func: (value: number) => T) => T[];
-export declare const isEqDate: (dateA?: Date | undefined, dateB?: Date | undefined) => boolean;
-export declare const getValidDate: (date: Date, minDate?: Date | undefined, maxDate?: Date | undefined) => Date | undefined;
+export declare const isEqDate: (dateA?: Date, dateB?: Date) => boolean;
+export declare const getValidDate: (date: Date, minDate?: Date, maxDate?: Date) => Date | undefined;

package/types/components/Card/DataCard/StyledDataCard.d.ts

@@ -1,16 +1,16 @@
 import { View } from 'react-native';
 declare const StyledDataCard: 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 Indicator: 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: 'success' | 'info' | 'warning' | 'danger' | 'archived';
+    themeIntent: 'success' | 'info' | 'warning' | 'danger' | 'archived' | 'primary';
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 export { StyledDataCard, Indicator };

package/types/components/Card/DataCard/index.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
 export interface DataCardProps extends ViewProps {
     /**
      * Card's content.
@@ -8,7 +8,7 @@ export interface DataCardProps extends ViewProps {
     /**
      * Visual intent color to apply to card.
      */
-    intent?: 'success' | 'info' | 'warning' | 'danger' | 'archived';
+    intent?: 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
     /**
      * Additional style.
      */

package/types/components/Card/StyledCard.d.ts

@@ -1,16 +1,17 @@
 import { View } from 'react-native';
 declare const StyledCard: 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: 'basic' | 'data';
+    themeIntent?: 'primary' | 'success' | 'warning';
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const LeftDataCard: 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 { StyledCard, LeftDataCard };

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

@@ -1,10 +1,14 @@
-import { ReactNode } from 'react';
-import { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
 interface CardProps extends ViewProps {
     /**
      * Card's content.
      */
     children?: ReactNode;
+    /**
+     * Visual intent color to apply to card.
+     */
+    intent?: 'primary' | 'success' | 'warning';
     /**
      * Card type.
      * This is now deprecated. If you want to use "data" variant, please use Card.Data instead.
@@ -20,7 +24,7 @@ interface CardProps extends ViewProps {
      */
     testID?: string;
 }
-declare const _default: (({ variant, children, ...nativeProps }: CardProps) => JSX.Element) & {
+declare const _default: (({ variant, intent, children, ...nativeProps }: CardProps) => JSX.Element) & {
     Data: ({ intent, children, ...nativeProps }: import("./DataCard").DataCardProps) => JSX.Element;
 };
 export default _default;

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

@@ -1,8 +1,26 @@
-import { TouchableOpacity } from 'react-native';
-declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+import { TouchableOpacity, View } from 'react-native';
+export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+} & {
+    themeWithBorder: boolean;
+    themeDisabled: boolean;
 }, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
+    ref?: import("react").Ref<TouchableOpacity>;
 }>;
-export { StyledWrapper };
+export declare const StyledDescription: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+}, {}, {}>;
+export declare const StyledCheckbox: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+} & {
+    themeDisabled: boolean;
+}, {}, {
+    ref?: import("react").Ref<View>;
+}>;
+export declare const StyledCheckMark: import("@emotion/native").StyledComponent<import("../Icon").IconProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+}, {}, {}>;

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

@@ -1,9 +1,17 @@
-import { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 export interface CheckboxProps {
     /**
      * Control whether the switch is checked
      */
     checked?: boolean;
+    /**
+     * Checkbox's description.
+     */
+    description?: string;
+    /**
+     * Whether the border is shown.
+     */
+    withBorder?: boolean;
     /**
      * Whether the switch is disabled
      */
@@ -21,5 +29,5 @@ export interface CheckboxProps {
      */
     testID?: string;
 }
-declare const CheckBox: ({ checked, disabled, onPress, style, testID, }: CheckboxProps) => JSX.Element;
-export default CheckBox;
+declare const Checkbox: ({ checked, description, withBorder, disabled, onPress, style, testID, }: CheckboxProps) => JSX.Element;
+export default Checkbox;