@hero-design/rn 8.44.0-alpha.0 → 8.44.0

package/src/index.ts

@@ -25,6 +25,7 @@ import Button from './components/Button';
 import Calendar from './components/Calendar';
 import Carousel from './components/Carousel';
 import Card from './components/Card';
+import Chip from './components/Chip';
 import Collapse from './components/Collapse';
 import Checkbox from './components/Checkbox';
 import ContentNavigator from './components/ContentNavigator';
@@ -38,7 +39,6 @@ import HeroDesignProvider from './components/HeroDesignProvider';
 import Icon from './components/Icon';
 import Image from './components/Image';
 import List from './components/List';
-import Modal from './components/Modal';
 import PinInput from './components/PinInput';
 import Progress from './components/Progress';
 import Slider from './components/Slider';
@@ -90,6 +90,7 @@ export {
   Calendar,
   Card,
   Carousel,
+  Chip,
   Collapse,
   Checkbox,
   ContentNavigator,
@@ -103,7 +104,6 @@ export {
   Image,
   HeroDesignProvider,
   List,
-  Modal,
   PinInput,
   Progress,
   Portal,

package/src/testHelpers/renderWithTheme.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { render } from '@testing-library/react-native'; // eslint-disable-line import/no-extraneous-dependencies
-import { ThemeProvider } from '@emotion/react';
 import type { RenderOptions } from '@testing-library/react-native';
 import { theme } from '../index';
+import HeroDesignProvider from '../components/HeroDesignProvider';
 
 const renderWithTheme = (ui: JSX.Element, options?: RenderOptions) =>
-  render(<ThemeProvider theme={theme}>{ui}</ThemeProvider>, options);
+  render(<HeroDesignProvider theme={theme}>{ui}</HeroDesignProvider>, options);
 
 export default renderWithTheme;

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -237,7 +237,6 @@ exports[`theme returns correct theme object 1`] = `
       "space": {
         "buttonPadding": 16,
         "iconPadding": 12,
-        "loadingIndicatorWrapperVerticalPadding": 1,
         "textButtonPadding": 12,
         "utilityPadding": 8,
       },
@@ -353,6 +352,44 @@ exports[`theme returns correct theme object 1`] = `
         "wrapperPadding": 16,
       },
     },
+    "chip": {
+      "borderWidths": {
+        "icon": 2,
+        "wrapper": 1,
+      },
+      "colors": {
+        "filledBackground": "#ffffff",
+        "outlinedBackground": "transparent",
+        "primaryBackground": "#001f23",
+        "secondaryBackground": "#ece8ef",
+        "selectedPrimaryText": "#ffffff",
+        "wrapperBorder": "#001f23",
+        "wrapperSelectedBorder": "transparent",
+      },
+      "radii": {
+        "wrapper": 999,
+      },
+      "shadows": {
+        "filledWrapper": {
+          "elevation": 3,
+          "shadowColor": "#001f23",
+          "shadowOffset": {
+            "height": 2,
+            "width": 0,
+          },
+          "shadowOpacity": 0.12,
+          "shadowRadius": 4,
+        },
+      },
+      "sizes": {
+        "wrapperBorder": 1,
+      },
+      "space": {
+        "iconWrapperMarginRight": 8,
+        "wrapperHorizontalPadding": 12,
+        "wrapperVerticalPadding": 8,
+      },
+    },
     "contentNavigator": {
       "space": {
         "valueHorizontalPadding": 8,

package/src/theme/components/button.ts

@@ -21,7 +21,6 @@ const getButtonTheme = (theme: GlobalTheme) => {
     textButtonPadding: theme.space.smallMedium,
     iconPadding: theme.space.smallMedium,
     utilityPadding: theme.space.small,
-    loadingIndicatorWrapperVerticalPadding: theme.space.xxsmall / 2,
   };
 
   const sizes = {

package/src/theme/components/chip.ts

@@ -0,0 +1,47 @@
+import type { GlobalTheme } from '../global';
+
+const getChipTheme = (theme: GlobalTheme) => {
+  const colors = {
+    primaryBackground: theme.colors.darkGlobalSurface,
+    secondaryBackground: theme.colors.highlightedSurface,
+    filledBackground: theme.colors.defaultGlobalSurface,
+    outlinedBackground: 'transparent',
+    wrapperBorder: theme.colors.primaryOutline,
+    wrapperSelectedBorder: 'transparent',
+    selectedPrimaryText: theme.colors.defaultGlobalSurface,
+  };
+
+  const space = {
+    wrapperHorizontalPadding: theme.space.smallMedium,
+    wrapperVerticalPadding: theme.space.small,
+    iconWrapperMarginRight: theme.space.small,
+  };
+
+  const sizes = {
+    wrapperBorder: theme.borderWidths.base,
+  };
+
+  const radii = {
+    wrapper: theme.radii.rounded,
+  };
+
+  const borderWidths = {
+    wrapper: theme.borderWidths.base,
+    icon: theme.borderWidths.medium,
+  };
+
+  const shadows = {
+    filledWrapper: theme.shadows.default,
+  };
+
+  return {
+    colors,
+    space,
+    sizes,
+    radii,
+    borderWidths,
+    shadows,
+  };
+};
+
+export default getChipTheme;

package/src/theme/getTheme.ts

@@ -13,6 +13,7 @@ import getCardTheme from './components/card';
 import getCarouselTheme, { CarouselThemeType } from './components/carousel';
 import getCardCarouselTheme from './components/cardCarousel';
 import getCheckboxTheme from './components/checkbox';
+import getChipTheme from './components/chip';
 import getContentNavigatorTheme from './components/contentNavigator';
 import getDatePickerTheme from './components/datePicker';
 import getDividerTheme from './components/divider';
@@ -63,6 +64,7 @@ type Theme = GlobalTheme & {
     carousel: CarouselThemeType;
     cardCarousel: ReturnType<typeof getCardCarouselTheme>;
     checkbox: ReturnType<typeof getCheckboxTheme>;
+    chip: ReturnType<typeof getChipTheme>;
     contentNavigator: ReturnType<typeof getContentNavigatorTheme>;
     datePicker: ReturnType<typeof getDatePickerTheme>;
     divider: ReturnType<typeof getDividerTheme>;
@@ -119,6 +121,7 @@ const getTheme = (
       carousel: getCarouselTheme(globalTheme),
       cardCarousel: getCardCarouselTheme(globalTheme),
       checkbox: getCheckboxTheme(globalTheme),
+      chip: getChipTheme(globalTheme),
       contentNavigator: getContentNavigatorTheme(globalTheme),
       datePicker: getDatePickerTheme(globalTheme),
       divider: getDividerTheme(globalTheme),

package/testUtils/setup.tsx

@@ -132,22 +132,4 @@ jest.mock('react-native/Libraries/Utilities/BackHandler', () => {
   );
 });
 
-jest.mock('react-native-root-siblings', () => {
-  const React = jest.requireActual('react');
-
-  class RootSiblingsManager extends React.Component {
-    constructor(props) {
-      super(props);
-    }
-    render() {
-      return React.createElement('RootSiblingsManager', this.props, this.props.children);
-    }
-  }
-
-  return {
-    __esModule: true,
-    default: RootSiblingsManager,
-  };
-});
-
 export {};

package/tsconfig.json

@@ -11,7 +11,10 @@
     "strict": true,
     "strictNullChecks": true,
     "target": "esnext",
-    "types": ["jest"]
+    "types": ["jest"],
+    "paths": {
+      "react": ["./node_modules/@types/react"]
+    }
   },
   "include": ["src"]
 }

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { Variant } from './StyledAccordion';
@@ -10,5 +11,5 @@ export type AccordionItemProps = {
     style?: StyleProp<ViewStyle>;
     testID?: string;
 };
-declare const AccordionItem: ({ header, content, open, onPress, variant, style, testID, }: AccordionItemProps) => JSX.Element;
+declare const AccordionItem: ({ header, content, open, onPress, variant, style, testID, }: AccordionItemProps) => React.JSX.Element;
 export default AccordionItem;

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

@@ -35,5 +35,5 @@ export interface AccordionProps<K extends Key> {
      */
     testID?: string;
 }
-declare const Accordion: <K extends React.Key>({ items, activeItemKey, onItemPress, variant, style, testID, }: AccordionProps<K>) => JSX.Element;
+declare const Accordion: <K extends React.Key>({ items, activeItemKey, onItemPress, variant, style, testID, }: AccordionProps<K>) => React.JSX.Element;
 export default Accordion;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ReactElement } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { IconProps } from '../Icon';
@@ -33,5 +34,5 @@ interface AttachmentProps {
      */
     testID?: string;
 }
-declare const Attachment: ({ filename, previewElement, onRemove, onDownload, backgroundHighlighted, style, testID, }: AttachmentProps) => JSX.Element;
+declare const Attachment: ({ filename, previewElement, onRemove, onDownload, backgroundHighlighted, style, testID, }: AttachmentProps) => React.JSX.Element;
 export default Attachment;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ImageSourcePropType, StyleProp, ViewProps, ViewStyle } from 'react-native';
 export interface AvatarProps extends ViewProps {
     /**
@@ -29,5 +30,5 @@ export interface AvatarProps extends ViewProps {
      */
     testID?: string;
 }
-declare const Avatar: ({ onPress, source, testID, style, title, size, intent, }: AvatarProps) => JSX.Element | null;
+declare const Avatar: ({ onPress, source, testID, style, title, size, intent, }: AvatarProps) => React.JSX.Element | null;
 export default Avatar;

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

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { AvatarProps } from '../Avatar';
 export interface AvatarStackProps extends Pick<AvatarProps, 'size'> {
@@ -19,5 +19,5 @@ export interface AvatarStackProps extends Pick<AvatarProps, 'size'> {
      */
     testID?: string;
 }
-declare const AvatarStack: ({ children, max, size, style, testID, }: AvatarStackProps) => JSX.Element;
+declare const AvatarStack: ({ children, max, size, style, testID, }: AvatarStackProps) => React.JSX.Element;
 export default AvatarStack;

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

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 import { useAvatarColors } from './AvatarStack/utils';
-declare const _default: (({ onPress, source, testID, style, title, size, intent, }: import("./Avatar").AvatarProps) => JSX.Element | null) & {
-    Stack: ({ children, max, size, style, testID, }: import("./AvatarStack").AvatarStackProps) => JSX.Element;
+declare const _default: (({ onPress, source, testID, style, title, size, intent, }: import("./Avatar").AvatarProps) => import("react").JSX.Element | null) & {
+    Stack: ({ children, max, size, style, testID, }: import("./AvatarStack").AvatarStackProps) => import("react").JSX.Element;
 };
 export default _default;
 export { useAvatarColors };

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

@@ -3,8 +3,6 @@ import { Animated } from 'react-native';
 type ThemeIntent = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived';
 type ThemePadding = 'narrowContent' | 'wideContent';
 declare const StyledView: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
-    children?: import("react").ReactNode;
-} & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
@@ -16,8 +14,6 @@ declare const StyledText: import("@emotion/native").StyledComponent<import("../T
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
 declare const StyledStatus: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
-    children?: import("react").ReactNode;
-} & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {

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

@@ -1,6 +1,7 @@
+import React from 'react';
 import type { ReactNode } from 'react';
 declare const Footer: ({ children, showDivider, }: {
     children: ReactNode;
     showDivider: boolean;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default Footer;

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

@@ -1,8 +1,9 @@
+import React from 'react';
 import type { ReactElement } from 'react';
 declare const Header: ({ content, showDivider, onRequestClose, showCloseButton, }: {
     content: string | ReactElement;
     showDivider: boolean;
     onRequestClose?: (() => void) | undefined;
     showCloseButton: boolean;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default Header;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ScrollViewProps } from 'react-native';
 declare const BottomSheetScrollView: ({ scrollEventThrottle, ...props }: ScrollViewProps) => JSX.Element;
 export default BottomSheetScrollView;

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

@@ -14,14 +14,10 @@ declare const StyledKeyboardAvoidingView: import("@emotion/native").StyledCompon
     ref?: import("react").Ref<KeyboardAvoidingView> | undefined;
 }>;
 declare const StyledBottomSheet: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<SafeAreaView>> & {
-    children?: import("react").ReactNode;
-} & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
 declare const StyledBackdrop: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").PressableProps & import("react").RefAttributes<View>> & {
-    children?: import("react").ReactNode;
-} & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;

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

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

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { StyleProp, ViewStyle, TouchableOpacityProps } from 'react-native';
 import type { IconProps, IconName } from '../Icon';
 export interface IconButtonProps {
@@ -34,5 +35,5 @@ export interface IconButtonProps {
      */
     testID?: string;
 }
-declare const IconButton: ({ hitSlop, onPress, icon, disabled, testID, style, size, intent, }: IconButtonProps) => JSX.Element;
+declare const IconButton: ({ hitSlop, onPress, icon, disabled, testID, style, size, intent, }: IconButtonProps) => React.JSX.Element;
 export default IconButton;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { View } from 'react-native';
-import type { ViewProps } from 'react-native';
 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 const StyledLoadingIndicatorWrapper: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: Theme | undefined;
@@ -18,4 +18,4 @@ declare const StyledLoadingDot: import("@emotion/native").StyledComponent<ViewPr
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-export { StyledLoadingIndicatorWrapper, StyledLoadingDot };
+export { StyledLoadingDot, StyledLoadingIndicatorWrapper };

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

@@ -1,3 +1,4 @@
+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';
 interface LoadingIndicatorProps extends ViewProps {
@@ -22,5 +23,5 @@ interface LoadingIndicatorProps extends ViewProps {
      */
     themeVariant: ThemeVariant;
 }
-declare const LoadingIndicator: ({ count, size, testID, themeVariant, ...nativeProps }: LoadingIndicatorProps) => JSX.Element;
+declare const LoadingIndicator: ({ count, size, testID, themeVariant, ...nativeProps }: LoadingIndicatorProps) => React.JSX.Element;
 export default LoadingIndicator;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ReactChild } from 'react';
 import type { ViewProps } from 'react-native';
 import type { IconName } from '../../Icon';
@@ -19,5 +20,5 @@ export interface UtilityButtonProps extends ViewProps {
      */
     intent?: 'primary' | 'text';
 }
-declare const UtilityButton: ({ icon, onPress, text, testID, intent, style, hitSlop, }: UtilityButtonProps) => JSX.Element;
+declare const UtilityButton: ({ icon, onPress, text, testID, intent, style, hitSlop, }: UtilityButtonProps) => React.JSX.Element;
 export default UtilityButton;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 export interface CalendarRowItemProps {
     date?: Date;
     onPress?: () => void;
@@ -6,5 +7,5 @@ export interface CalendarRowItemProps {
     textIntent?: 'body' | 'subdued';
     marked?: boolean;
 }
-declare const CalendarRowItem: ({ date, onPress, isCurrent, isSelected, textIntent, marked, }: CalendarRowItemProps) => JSX.Element;
+declare const CalendarRowItem: ({ date, onPress, isCurrent, isSelected, textIntent, marked, }: CalendarRowItemProps) => React.JSX.Element;
 export default CalendarRowItem;

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

@@ -23,7 +23,7 @@ declare const StyledCalendarCell: import("@emotion/native").StyledComponent<impo
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    variant?: "selected" | "default" | "current" | undefined;
+    variant?: "default" | "selected" | "current" | undefined;
 }, {}, {
     ref?: import("react").Ref<TouchableOpacity> | undefined;
 }>;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 export interface CalendarProps {
     /**
      * Selected date value.
@@ -53,5 +54,5 @@ export interface CalendarProps {
      */
     monthPickerCancelLabel?: string;
 }
-declare const Calendar: ({ value, visibleDate, onChange, onPreviousPress, onNextPress, onTitlePress, minDate, maxDate, markedDates, testID, onMonthChange, onToggleMonthPicker, monthPickerConfirmLabel, monthPickerCancelLabel, }: CalendarProps) => JSX.Element;
+declare const Calendar: ({ value, visibleDate, onChange, onPreviousPress, onNextPress, onTitlePress, minDate, maxDate, markedDates, testID, onMonthChange, onToggleMonthPicker, monthPickerConfirmLabel, monthPickerCancelLabel, }: CalendarProps) => React.JSX.Element;
 export default Calendar;

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

@@ -38,4 +38,4 @@ export interface CardCarouselProps {
     ref?: React.Ref<CardCarouselHandles>;
     onLayout?: (event: LayoutChangeEvent) => void;
 }
-export declare const CardCarousel: React.ForwardRefExoticComponent<Pick<CardCarouselProps, "style" | "onLayout" | "testID" | "items" | "onItemIndexChange" | "hidePageControl" | "autoPlay" | "autoPlayInterval"> & React.RefAttributes<CardCarouselHandles>>;
+export declare const CardCarousel: React.ForwardRefExoticComponent<Omit<CardCarouselProps, "ref"> & React.RefAttributes<CardCarouselHandles>>;

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

@@ -1,6 +1,7 @@
+import React from 'react';
 import { CarouselData } from './types';
 interface CarouselItemProps extends Omit<CarouselData, 'background'> {
     width: number;
 }
-declare const CarouselItem: ({ width, image, content, heading, body, }: CarouselItemProps) => JSX.Element;
+declare const CarouselItem: ({ width, image, content, heading, body, }: CarouselItemProps) => React.JSX.Element;
 export default CarouselItem;

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

@@ -38,7 +38,7 @@ interface CarouselProps extends ViewProps {
     pageControlPosition?: 'top' | 'bottom';
 }
 export declare function useStateFromProp<T>(initialValue: T): [T, Dispatch<SetStateAction<T>>];
-declare const _default: (({ items, onItemIndexChange, renderActions, selectedItemIndex, style, shouldShowPagination, pageControlPosition, ...nativeProps }: CarouselProps) => JSX.Element) & {
-    Card: React.ForwardRefExoticComponent<Pick<import("./CardCarousel").CardCarouselProps, "style" | "onLayout" | "testID" | "items" | "onItemIndexChange" | "hidePageControl" | "autoPlay" | "autoPlayInterval"> & React.RefAttributes<import("./CardCarousel").CardCarouselHandles>>;
+declare const _default: (({ items, onItemIndexChange, renderActions, selectedItemIndex, style, shouldShowPagination, testID, pageControlPosition, ...nativeProps }: CarouselProps) => React.JSX.Element) & {
+    Card: React.ForwardRefExoticComponent<Omit<import("./CardCarousel").CardCarouselProps, "ref"> & React.RefAttributes<import("./CardCarousel").CardCarouselHandles>>;
 };
 export default _default;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 export interface CheckboxProps {
     /**
@@ -39,5 +40,5 @@ type getStateType = {
     readonly: boolean;
 };
 export declare const getThemeState: ({ disabled, readonly }: getStateType) => "default" | "disabled" | "readonly";
-declare const Checkbox: ({ checked, description, withBorder, disabled, onPress, style, testID, readonly, }: CheckboxProps) => 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

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { TouchableOpacity } from 'react-native';
+type StyledChipWrapperProps = {
+    themeVariant?: 'outlined' | 'filled';
+    themeSelected?: boolean;
+};
+declare const StyledChipWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & StyledChipWrapperProps, {}, {
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
+}>;
+declare const StyledIconWrapper: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledLabel: import("@emotion/native").StyledComponent<import("../Typography/Body").BodyProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeSelected?: boolean | undefined;
+    themeVariant?: "filled" | "outlined" | undefined;
+}, {}, {}>;
+declare const StyledIcon: import("@emotion/native").StyledComponent<import("../Icon").IconProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeSelected?: boolean | undefined;
+    themeVariant?: "filled" | "outlined" | undefined;
+}, {}, {}>;
+export { StyledChipWrapper, StyledIcon, StyledIconWrapper, StyledLabel };

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+import { IconName } from '../Icon';
+export interface ChipProps extends ViewProps {
+    /**
+     * The label of the chip.
+     */
+    label: string;
+    /**
+     * Variant of the chip.
+     */
+    variant?: 'outlined' | 'filled';
+    /**
+     * Whether the chip is selected.
+     */
+    selected?: boolean;
+    /**
+     * Icon of the chip. Usable only with `variant="filled"`.
+     */
+    icon?: IconName;
+    /**
+     * Callback when the chip is pressed.
+     */
+    onPress?: () => void;
+}
+declare const Chip: ({ label, variant, selected, icon, onPress, ...otherProps }: ChipProps) => React.JSX.Element;
+export default Chip;

package/types/components/Collapse/StyledCollapse.d.ts

@@ -1,8 +1,6 @@
 /// <reference types="react" />
 import { Animated, View } from 'react-native';
 declare const StyledWrapper: 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;
 }, {}, {}>;

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

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import React from 'react';
 import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 export interface CollapseProps extends ViewProps {
     children: ReactNode;
@@ -15,5 +16,5 @@ export interface CollapseProps extends ViewProps {
      */
     testID?: string;
 }
-declare const Collapse: ({ open, children, testID, style, onLayout, }: CollapseProps) => JSX.Element;
+declare const Collapse: ({ open, children, testID, style, onLayout, }: CollapseProps) => React.JSX.Element;
 export default Collapse;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 interface ContentNavigatorProps {
@@ -38,5 +39,5 @@ interface ContentNavigatorProps {
      */
     testID?: string;
 }
-declare function ContentNavigator({ onPreviousPress, onNextPress, onPress, value, previousDisabled, nextDisabled, fontSize, testID, style, }: ContentNavigatorProps): JSX.Element;
+declare function ContentNavigator({ onPreviousPress, onNextPress, onPress, value, previousDisabled, nextDisabled, fontSize, testID, style, }: ContentNavigatorProps): React.JSX.Element;
 export default ContentNavigator;

package/types/components/DatePicker/DatePickerAndroid.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { DatePickerProps } from './types';
-declare const DatePickerAndroid: ({ value, minDate, maxDate, label, placeholder, onChange, displayFormat, disabled, required, error, helpText, style, testID, }: Omit<DatePickerProps, 'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'>) => JSX.Element;
+declare const DatePickerAndroid: ({ value, minDate, maxDate, label, placeholder, onChange, displayFormat, disabled, required, error, helpText, style, testID, }: Omit<DatePickerProps, 'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'>) => React.JSX.Element;
 export default DatePickerAndroid;

package/types/components/DatePicker/DatePickerCalendar.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { DatePickerProps } from './types';
-declare const DatePickerCalendar: ({ value, minDate, maxDate, label, placeholder, onChange, confirmLabel, displayFormat, disabled, required, error, helpText, style, testID, monthPickerConfirmLabel, monthPickerCancelLabel, }: Omit<DatePickerProps, 'variant'>) => JSX.Element;
+declare const DatePickerCalendar: ({ value, minDate, maxDate, label, placeholder, onChange, confirmLabel, displayFormat, disabled, required, error, helpText, style, testID, monthPickerConfirmLabel, monthPickerCancelLabel, }: Omit<DatePickerProps, 'variant'>) => React.JSX.Element;
 export default DatePickerCalendar;

package/types/components/DatePicker/DatePickerIOS.d.ts

@@ -1,4 +1,5 @@
+import React from 'react';
 import type { DatePickerProps } from './types';
 export declare const getInitialDateValue: (value: Date, minDate?: Date | undefined, maxDate?: Date | undefined) => Date;
-declare const DatePickerIOS: ({ value, minDate, maxDate, label, placeholder, onChange, confirmLabel, displayFormat, disabled, required, error, helpText, style, testID, }: Omit<DatePickerProps, 'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'>) => JSX.Element;
+declare const DatePickerIOS: ({ value, minDate, maxDate, label, placeholder, onChange, confirmLabel, displayFormat, disabled, required, error, helpText, style, testID, }: Omit<DatePickerProps, 'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'>) => React.JSX.Element;
 export default DatePickerIOS;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { DatePickerProps } from './types';
-declare const DatePicker: ({ variant, ...props }: DatePickerProps) => JSX.Element;
+declare const DatePicker: ({ variant, ...props }: DatePickerProps) => React.JSX.Element;
 export default DatePicker;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
 interface DividerProps extends ViewProps {
     /**
@@ -17,5 +18,5 @@ interface DividerProps extends ViewProps {
      */
     testID?: string;
 }
-declare const Divider: ({ marginHorizontal, marginVertical, style, testID, ...nativeProps }: DividerProps) => JSX.Element;
+declare const Divider: ({ marginHorizontal, marginVertical, style, testID, ...nativeProps }: DividerProps) => React.JSX.Element;
 export default Divider;