@aws-amplify/ui-react-native 2.2.19 → 2.3.0

package/dist/primitives/PhoneNumberField/PhoneNumberField.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { PhoneNumberFieldProps } from './types';
-export default function PhoneNumberField({ disabled, fieldStyle, labelStyle, style, ...rest }: PhoneNumberFieldProps): JSX.Element;
+export default function PhoneNumberField({ disabled, fieldStyle, labelStyle, style, ...rest }: PhoneNumberFieldProps): React.JSX.Element;

package/dist/primitives/Radio/Radio.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import React from 'react';
 import { RadioProps } from './types';
 export declare const CONTAINER_TEST_ID = "amplify__radio-button__container";
 export declare const DOT_TEST_ID = "amplify__radio-button__dot";
-export default function Radio<T>({ accessibilityRole, disabled, label, labelPosition, labelStyle, onChange, onPress, radioContainerStyle, radioDotStyle, selected, size, style, value, ...rest }: RadioProps<T>): JSX.Element;
+export default function Radio<T>({ accessibilityRole, disabled, label, labelPosition, labelStyle, onChange, onPress, radioContainerStyle, radioDotStyle, selected, size, style, value, ...rest }: RadioProps<T>): React.JSX.Element;

package/dist/primitives/RadioGroup/RadioGroup.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { RadioGroupProps } from './types';
-export default function RadioGroup<T>({ accessible, accessibilityRole, children, direction, disabled, initialValue, label, labelPosition, labelStyle, onChange, onValueChange, size, style, ...rest }: RadioGroupProps<T>): JSX.Element;
+export default function RadioGroup<T>({ accessible, accessibilityRole, children, direction, disabled, initialValue, label, labelPosition, labelStyle, onChange, onValueChange, size, style, ...rest }: RadioGroupProps<T>): React.JSX.Element;

package/dist/primitives/RadioGroup/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TextStyle, ViewProps, ViewStyle } from 'react-native';
 import { RadioProps } from '../Radio';
 export type Direction = 'vertical' | 'horizontal';

package/dist/primitives/Tabs/Tab.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { TabProps } from './types';
-export default function Tab({ children, selected, style, textStyle, indicatorPosition, ...rest }: TabProps): JSX.Element;
+export default function Tab({ children, selected, style, textStyle, indicatorPosition, ...rest }: TabProps): React.JSX.Element;

package/dist/primitives/Tabs/Tabs.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { TabsProps } from './types';
-export default function Tabs({ accessible, accessibilityRole, children, indicatorPosition, onChange, selectedIndex, style, ...rest }: TabsProps): JSX.Element;
+export default function Tabs({ accessible, accessibilityRole, children, indicatorPosition, onChange, selectedIndex, style, ...rest }: TabsProps): React.JSX.Element;

package/dist/primitives/Tabs/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TextStyle, ViewProps, ViewStyle } from 'react-native';
 import { ButtonProps } from '../Button';
 type IndicatorPosition = 'top' | 'bottom';

package/dist/primitives/TextField/TextField.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import React from 'react';
 import { TextFieldProps } from './types';
 export declare const TEXTFIELD_CONTAINER_TEST_ID = "amplify__text-field-container";
 export declare const INPUT_CONTAINER_TEST_ID = "amplify__text-field__input-container";
-export default function TextField({ accessibilityLabel, accessibilityRole, accessibilityState, accessible, autoCapitalize, disabled, endAccessory, error, errorMessage, errorMessageStyle, fieldStyle, label, labelStyle, style, ...rest }: TextFieldProps): JSX.Element;
+export default function TextField({ accessibilityLabel, accessibilityRole, accessibilityState, accessible, autoCapitalize, disabled, endAccessory, error, errorMessage, errorMessageStyle, fieldStyle, label, labelStyle, style, ...rest }: TextFieldProps): React.JSX.Element;

package/dist/primitives/TextField/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { StyleProp, TextInputProps, TextStyle, ViewStyle } from 'react-native';
 import { LabelProps } from '../Label/types';
 export interface TextFieldProps extends Omit<TextInputProps, 'editable'> {

package/dist/theme/ThemeProvider.d.ts

@@ -5,5 +5,5 @@ interface ThemeProviderProps {
     theme?: Theme;
     colorMode?: ColorMode;
 }
-export declare const ThemeProvider: ({ children, theme, colorMode, }: ThemeProviderProps) => JSX.Element;
+export declare const ThemeProvider: ({ children, theme, colorMode, }: ThemeProviderProps) => React.JSX.Element;
 export {};

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "2.2.19";
+export declare const VERSION = "2.3.0";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = '2.2.19';
+export const VERSION = '2.3.0';

package/lib/primitives/Carousel/CarouselPageIndicator.js

@@ -5,10 +5,10 @@ const react_1 = tslib_1.__importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_native_safe_area_context_1 = require("react-native-safe-area-context");
 const constants_1 = require("./constants");
-function CarouselPageIndicator({ activeStyle, currentIndex, inactiveStyle, numberOfItems, style, }) {
+function CarouselPageIndicator({ activeStyle, currentIndex, inactiveStyle, indicatorTestId, numberOfItems, style, }) {
     const items = (0, react_1.useMemo)(() => new Array(numberOfItems ?? 0)
         .fill(null)
-        .map((_, index) => (currentIndex ?? 0) === index ? (<react_native_1.View style={[constants_1.DEFAULT_CAROUSEL_INDICATOR_ACTIVE_STYLE, activeStyle]} key={`indicator-item-${index}`}/>) : (<react_native_1.View style={[constants_1.DEFAULT_CAROUSEL_INDICATOR_INACTIVE_STYLE, inactiveStyle]} key={`indicator-item-${index}`}/>)), [activeStyle, currentIndex, inactiveStyle, numberOfItems]);
+        .map((_, index) => (currentIndex ?? 0) === index ? (<react_native_1.View style={[constants_1.DEFAULT_CAROUSEL_INDICATOR_ACTIVE_STYLE, activeStyle]} key={`indicator-item-${index}`} testID={indicatorTestId}/>) : (<react_native_1.View style={[constants_1.DEFAULT_CAROUSEL_INDICATOR_INACTIVE_STYLE, inactiveStyle]} key={`indicator-item-${index}`} testID={indicatorTestId}/>)), [activeStyle, currentIndex, inactiveStyle, indicatorTestId, numberOfItems]);
     return <react_native_safe_area_context_1.SafeAreaView style={style}>{items}</react_native_safe_area_context_1.SafeAreaView>;
 }
 exports.default = CarouselPageIndicator;

package/lib/version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
-exports.VERSION = '2.2.19';
+exports.VERSION = '2.3.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-native",
-  "version": "2.2.19",
+  "version": "2.3.0",
   "main": "lib/index.js",
   "module": "dist/index.js",
   "react-native": "src/index.ts",
@@ -25,19 +25,19 @@
     "@babel/preset-env": "^7.23.2",
     "@babel/preset-typescript": "^7.23.2",
     "@react-native-async-storage/async-storage": "*",
-    "@testing-library/react-native": "^12.3.0",
+    "@testing-library/react-native": "^12.9.0",
     "metro-react-native-babel-preset": "^0.77.0",
     "react-native-safe-area-context": "^4.7.3"
   },
   "dependencies": {
-    "@aws-amplify/ui": "6.7.1",
-    "@aws-amplify/ui-react-core": "3.1.1",
-    "@aws-amplify/ui-react-core-notifications": "2.0.32"
+    "@aws-amplify/ui": "6.7.2",
+    "@aws-amplify/ui-react-core": "3.2.0",
+    "@aws-amplify/ui-react-core-notifications": "2.1.0"
   },
   "peerDependencies": {
     "aws-amplify": "^6.9.0",
     "react": "*",
-    "react-native": "^0.70 || ^0.71 || ^0.72 || ^0.73 || ^0.74 || ^0.75",
+    "react-native": ">=0.70",
     "react-native-safe-area-context": "^4.2.5"
   },
   "files": [

package/src/Authenticator/Authenticator.tsx

@@ -56,7 +56,7 @@ function Authenticator({
   Footer,
   Header,
   ...options
-}: AuthenticatorProps): JSX.Element | null {
+}: AuthenticatorProps): React.JSX.Element | null {
   useDeprecationWarning({
     message:
       'The `passwordSettings` prop has been deprecated and will be removed in a future major version of Amplify UI.',

package/src/Authenticator/Defaults/ConfirmResetPassword/ConfirmResetPassword.tsx

@@ -30,7 +30,7 @@ const ConfirmResetPassword = ({
   resendCode,
   validationErrors,
   ...rest
-}: DefaultConfirmResetPasswordProps): JSX.Element => {
+}: DefaultConfirmResetPasswordProps): React.JSX.Element => {
   const {
     disableFormSubmit,
     fields: fieldsWithHandlers,

package/src/Authenticator/Defaults/ConfirmSignIn/ConfirmSignIn.tsx

@@ -30,7 +30,7 @@ const ConfirmSignIn = ({
   toSignIn,
   validationErrors,
   ...rest
-}: DefaultConfirmSignInProps): JSX.Element => {
+}: DefaultConfirmSignInProps): React.JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,

package/src/Authenticator/Defaults/ConfirmSignUp/ConfirmSignUp.tsx

@@ -31,7 +31,7 @@ const ConfirmSignUp = ({
   resendCode,
   validationErrors,
   ...rest
-}: DefaultConfirmSignUpProps): JSX.Element => {
+}: DefaultConfirmSignUpProps): React.JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,

package/src/Authenticator/Defaults/ConfirmVerifyUser/ConfirmVerifyUser.tsx

@@ -29,7 +29,7 @@ const ConfirmVerifyUser = ({
   skipVerification,
   validationErrors,
   ...rest
-}: DefaultConfirmVerifyUserProps): JSX.Element => {
+}: DefaultConfirmVerifyUserProps): React.JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,

package/src/Authenticator/Defaults/ForceNewPassword/ForceNewPassword.tsx

@@ -26,7 +26,7 @@ const ForceNewPassword = ({
   toSignIn,
   validationErrors,
   ...rest
-}: DefaultForceNewPasswordProps): JSX.Element => {
+}: DefaultForceNewPasswordProps): React.JSX.Element => {
   const {
     disableFormSubmit,
     fields: fieldsWithHandlers,

package/src/Authenticator/Defaults/ForgotPassword/ForgotPassword.tsx

@@ -28,7 +28,7 @@ const ForgotPassword = ({
   toSignIn,
   validationErrors,
   ...rest
-}: DefaultForgotPasswordProps): JSX.Element => {
+}: DefaultForgotPasswordProps): React.JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,

package/src/Authenticator/Defaults/SetupTotp/SetupTotp.tsx

@@ -35,7 +35,7 @@ const SetupTotp = ({
   totpSecretCode,
   validationErrors,
   ...rest
-}: DefaultSetupTotpProps): JSX.Element => {
+}: DefaultSetupTotpProps): React.JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,

package/src/Authenticator/Defaults/SignIn/SignIn.tsx

@@ -26,7 +26,7 @@ const SignIn = ({
   toSignUp,
   validationErrors,
   ...rest
-}: DefaultSignInProps): JSX.Element => {
+}: DefaultSignInProps): React.JSX.Element => {
   const {
     getSignInTabText,
     getSignInText,

package/src/Authenticator/Defaults/SignUp/SignUp.tsx

@@ -34,7 +34,7 @@ const SignUp = ({
   toSignIn,
   validationErrors,
   ...rest
-}: DefaultSignUpProps): JSX.Element => {
+}: DefaultSignUpProps): React.JSX.Element => {
   const {
     disableFormSubmit,
     fields: fieldsWithHandlers,

package/src/Authenticator/Defaults/VerifyUser/VerifyUser.tsx

@@ -27,7 +27,7 @@ const VerifyUser = ({
   skipVerification,
   validationErrors,
   ...rest
-}: DefaultVerifyUserProps): JSX.Element => {
+}: DefaultVerifyUserProps): React.JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,

package/src/Authenticator/common/DefaultContainer/DefaultContainer.tsx

@@ -26,7 +26,7 @@ export default function DefaultContainer({
   scrollViewContentContainerStyle,
   style,
   ...rest
-}: ContainerProps): JSX.Element | null {
+}: ContainerProps): React.JSX.Element | null {
   const theme = useTheme();
   const insets = useSafeAreaInsets();
 

package/src/Authenticator/common/DefaultContainer/InnerContainer.tsx

@@ -8,7 +8,7 @@ import { ContainerProps } from './types';
 export default function InnerContainer({
   children,
   ...rest
-}: ContainerProps): JSX.Element | null {
+}: ContainerProps): React.JSX.Element | null {
   const theme = useTheme();
 
   const themedStyle = getInnerContainerStyles(theme);

package/src/Authenticator/common/DefaultContent/DefaultContent.tsx

@@ -26,7 +26,7 @@ export default function DefaultContent<
   Header,
   headerText,
   validationErrors,
-}: DefaultContentProps<FieldsType>): JSX.Element {
+}: DefaultContentProps<FieldsType>): React.JSX.Element {
   const themedStyles = useThemedStyles(getDefaultStyle);
 
   const linkButtons = useMemo(

package/src/Authenticator/common/DefaultFooter/DefaultFooter.tsx

@@ -6,6 +6,6 @@ import { DefaultFooterProps } from './types';
 export default function DefaultFooter({
   children,
   ...rest
-}: DefaultFooterProps): JSX.Element | null {
+}: DefaultFooterProps): React.JSX.Element | null {
   return children ? <View {...rest}>{children}</View> : null;
 }

package/src/Authenticator/common/DefaultFormFields/DefaultRadioFormFields.tsx

@@ -20,7 +20,7 @@ const DefaultRadioFormFields = ({
   fieldLabelStyle,
   isPending,
   style,
-}: DefaultRadioFormFieldsProps): JSX.Element => {
+}: DefaultRadioFormFieldsProps): React.JSX.Element => {
   return (
     <RadioGroup disabled={isPending} style={style}>
       {(fields ?? []).map(({ name, value, ...props }) => {

package/src/Authenticator/common/DefaultFormFields/DefaultTextFormFields.tsx

@@ -19,7 +19,7 @@ const DefaultTextFormFields = ({
   isPending = false,
   style,
   validationErrors,
-}: DefaultTextFormFieldsProps): JSX.Element => {
+}: DefaultTextFormFieldsProps): React.JSX.Element => {
   const formFields = (fields ?? []).map(({ name, type, ...field }) => {
     const errors = validationErrors ? getErrors(validationErrors?.[name]) : [];
 

package/src/Authenticator/common/DefaultFormFields/Field.tsx

@@ -28,7 +28,7 @@ const HIDDEN_INPUT_PROPS: TextInputProps = {
 
 const HiddenInput = () => <TextInput {...HIDDEN_INPUT_PROPS} />;
 
-const Field = ({ type, ...rest }: FieldProps): JSX.Element => {
+const Field = ({ type, ...rest }: FieldProps): React.JSX.Element => {
   const isPassword = type === 'password';
   const Field = isPassword
     ? PasswordField

package/src/Authenticator/common/DefaultFormFields/FieldErrors.tsx

@@ -7,7 +7,7 @@ export const FieldErrors = ({
   errors,
   errorStyle,
   style,
-}: FieldErrorsProps): JSX.Element | null => {
+}: FieldErrorsProps): React.JSX.Element | null => {
   if (!errors || !errors.length) {
     return null;
   }

package/src/Authenticator/common/DefaultHeader/DefaultHeader.tsx

@@ -7,7 +7,7 @@ export default function DefaultHeader({
   children,
   level = 3,
   ...rest
-}: DefaultHeaderProps): JSX.Element | null {
+}: DefaultHeaderProps): React.JSX.Element | null {
   return children ? (
     <Heading {...rest} level={level}>
       {children}

package/src/Authenticator/common/FederatedProviderButton/FederatedProviderButton.tsx

@@ -11,7 +11,7 @@ export default function FederatedProviderButton({
   style,
   textStyle,
   ...rest
-}: FederatedProviderButtonProps): JSX.Element {
+}: FederatedProviderButtonProps): React.JSX.Element {
   const pressableStyle = usePressableContainerStyles({
     overrideStyle: style,
   });

package/src/Authenticator/common/FederatedProviderButtons/FederatedProviderButtons.tsx

@@ -23,7 +23,7 @@ export default function FederatedProviderButtons({
   socialProviders,
   style,
   toFederatedSignIn,
-}: FederatedProviderButtonsProps): JSX.Element | null {
+}: FederatedProviderButtonsProps): React.JSX.Element | null {
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme);
 

package/src/Authenticator/withAuthenticator.tsx

@@ -5,12 +5,12 @@ import { WithAuthenticatorOptions } from './types';
 export default function withAuthenticator<Props = {}>(
   Component: React.ComponentType<Props>,
   options: WithAuthenticatorOptions = {}
-): (props: Props) => JSX.Element {
+): (props: Props) => React.JSX.Element {
   return function WrappedWithAuthenticator(props: Props) {
     return (
       <Authenticator.Provider>
         <Authenticator {...options}>
-          <Component {...(props as Props & JSX.IntrinsicAttributes)} />
+          <Component {...(props as Props & React.JSX.IntrinsicAttributes)} />
         </Authenticator>
       </Authenticator.Provider>
     );

package/src/InAppMessaging/components/BannerMessage/BannerMessage.tsx

@@ -10,7 +10,7 @@ import { BannerMessageProps } from './types';
 export default function BannerMessage({
   position = 'top',
   ...props
-}: BannerMessageProps): JSX.Element | null {
+}: BannerMessageProps): React.JSX.Element | null {
   const messageProps = useMessageProps(
     props,
     (imageDimensions: ImageDimensions) =>

package/src/InAppMessaging/components/CarouselMessage/CarouselMessage.tsx

@@ -11,7 +11,7 @@ import { CarouselMessageProps } from './types';
 
 export default function CarouselMessage(
   props: CarouselMessageProps
-): JSX.Element {
+): React.JSX.Element {
   const { data, ...rest } = props;
   const { style } = rest;
 

package/src/InAppMessaging/components/CarouselMessage/CarouselMessageItem.tsx

@@ -10,7 +10,7 @@ import { CarouselMessageItemProps } from './types';
 
 export default function CarouselMessageItem(
   props: CarouselMessageItemProps
-): JSX.Element | null {
+): React.JSX.Element | null {
   const { deviceOrientation, isPortraitMode } = useDeviceOrientation();
   const messageProps = useMessageProps(
     props,

package/src/InAppMessaging/components/FullScreenMessage/FullScreenMessage.tsx

@@ -11,7 +11,7 @@ import { FullScreenMessageProps } from './types';
 
 export default function FullScreenMessage(
   props: FullScreenMessageProps
-): JSX.Element | null {
+): React.JSX.Element | null {
   const { deviceOrientation, isPortraitMode } = useDeviceOrientation();
   const messageProps = useMessageProps(
     props,

package/src/InAppMessaging/components/InAppMessageDisplay/InAppMessageDisplay.tsx

@@ -27,7 +27,7 @@ const onMessageAction: OnMessageAction = ({ action, url }) => {
 
 function InAppMessageDisplay({
   components: overrideComponents,
-}: InAppMessageDisplayProps): JSX.Element | null {
+}: InAppMessageDisplayProps): React.JSX.Element | null {
   const components = React.useMemo(
     () => ({ ...platformComponents, ...overrideComponents }),
     [overrideComponents]

package/src/InAppMessaging/components/MessageLayout/MessageLayout.tsx

@@ -16,7 +16,7 @@ import { LayoutProps } from './types';
 export default function MessageLayout({
   orientation,
   ...props
-}: LayoutProps): JSX.Element {
+}: LayoutProps): React.JSX.Element {
   const {
     body,
     hasButtons,

package/src/InAppMessaging/components/MessageWrapper/MessageWrapper.tsx

@@ -17,7 +17,7 @@ export default function MessageWrapper({
   children,
   disableSafeAreaView,
   style,
-}: MessageWrapperProps): JSX.Element {
+}: MessageWrapperProps): React.JSX.Element {
   return (
     <Modal transparent visible supportedOrientations={SUPPORTED_ORIENTATIONS}>
       <SafeAreaProvider>

package/src/InAppMessaging/components/ModalMessage/ModalMessage.tsx

@@ -10,7 +10,7 @@ import { ModalMessageProps } from './types';
 
 export default function ModalMessage(
   props: ModalMessageProps
-): JSX.Element | null {
+): React.JSX.Element | null {
   const { deviceOrientation, isPortraitMode } = useDeviceOrientation();
   const messageProps = useMessageProps(
     props,

package/src/InAppMessaging/components/withInAppMessaging/withInAppMessaging.tsx

@@ -6,12 +6,12 @@ import { InAppMessageDisplay, MessageComponents } from '../InAppMessageDisplay';
 export default function withInAppMessaging<Props = {}>(
   Component: React.ComponentType<Props>,
   options?: { components?: MessageComponents }
-): (props: Props) => JSX.Element {
+): (props: Props) => React.JSX.Element {
   return function WrappedWithInAppMessaging(props: Props) {
     return (
       <InAppMessagingProvider>
         <InAppMessageDisplay {...options} />
-        <Component {...(props as Props & JSX.IntrinsicAttributes)} />
+        <Component {...(props as Props & React.JSX.IntrinsicAttributes)} />
       </InAppMessagingProvider>
     );
   };

package/src/primitives/Button/Button.tsx

@@ -15,7 +15,7 @@ export default function Button({
   textStyle,
   variant = 'default',
   ...rest
-}: ButtonProps): JSX.Element {
+}: ButtonProps): React.JSX.Element {
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme);
 

package/src/primitives/Carousel/Carousel.tsx

@@ -15,7 +15,7 @@ import { CarouselProps } from './types';
 
 export default function Carousel<T>(
   props: CarouselProps<T>
-): JSX.Element | null {
+): React.JSX.Element | null {
   const {
     data,
     indicatorActiveStyle,

package/src/primitives/Carousel/CarouselPageIndicator.tsx

@@ -12,9 +12,10 @@ export default function CarouselPageIndicator({
   activeStyle,
   currentIndex,
   inactiveStyle,
+  indicatorTestId,
   numberOfItems,
   style,
-}: CarouselPageIndicatorProps): JSX.Element {
+}: CarouselPageIndicatorProps): React.JSX.Element {
   const items = useMemo(
     () =>
       new Array(numberOfItems ?? 0)
@@ -24,15 +25,17 @@ export default function CarouselPageIndicator({
             <View
               style={[DEFAULT_CAROUSEL_INDICATOR_ACTIVE_STYLE, activeStyle]}
               key={`indicator-item-${index}`}
+              testID={indicatorTestId}
             />
           ) : (
             <View
               style={[DEFAULT_CAROUSEL_INDICATOR_INACTIVE_STYLE, inactiveStyle]}
               key={`indicator-item-${index}`}
+              testID={indicatorTestId}
             />
           )
         ),
-    [activeStyle, currentIndex, inactiveStyle, numberOfItems]
+    [activeStyle, currentIndex, inactiveStyle, indicatorTestId, numberOfItems]
   );
 
   return <SafeAreaView style={style}>{items}</SafeAreaView>;

package/src/primitives/Carousel/types.ts

@@ -14,6 +14,7 @@ export interface CarouselPageIndicatorProps {
   activeStyle?: StyleProp<ViewStyle>;
   currentIndex: number | null;
   inactiveStyle?: StyleProp<ViewStyle>;
+  indicatorTestId?: string;
   numberOfItems: number;
   style?: StyleProp<ViewStyle>;
 }

package/src/primitives/Checkbox/Checkbox.tsx

@@ -21,7 +21,7 @@ export default function Checkbox<T>({
   style,
   value,
   ...rest
-}: CheckboxProps<T>): JSX.Element {
+}: CheckboxProps<T>): React.JSX.Element {
   const [checked, setChecked] = useState(selected ?? false);
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme, labelPosition);

package/src/primitives/Divider/Divider.tsx

@@ -13,7 +13,7 @@ export default function Divider({
   labelStyle,
   lineStyle,
   style,
-}: DividerProps): JSX.Element {
+}: DividerProps): React.JSX.Element {
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme);
 

package/src/primitives/ErrorMessage/ErrorMessage.tsx

@@ -21,7 +21,7 @@ export default function ErrorMessage({
   onDismiss,
   style,
   ...rest
-}: ErrorMessageProps): JSX.Element {
+}: ErrorMessageProps): React.JSX.Element {
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme);
 

package/src/primitives/Heading/Heading.tsx

@@ -11,7 +11,7 @@ export default function Heading({
   level = 6,
   style,
   ...rest
-}: HeadingProps): JSX.Element {
+}: HeadingProps): React.JSX.Element {
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme);
 

package/src/primitives/Icon/Icon.tsx

@@ -13,7 +13,7 @@ export default function Icon({
   size,
   style,
   ...rest
-}: IconProps): JSX.Element {
+}: IconProps): React.JSX.Element {
   const theme = useTheme();
   const themedStyle = useMemo(
     () => getThemedStyles(theme, color, size),

package/src/primitives/IconButton/IconButton.tsx

@@ -17,7 +17,7 @@ export default function IconButton({
   source,
   style,
   ...rest
-}: IconButtonProps): JSX.Element {
+}: IconButtonProps): React.JSX.Element {
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme);
 

package/src/primitives/Label/Label.tsx

@@ -11,7 +11,7 @@ export default function Label({
   style,
   variant = 'primary',
   ...rest
-}: LabelProps): JSX.Element {
+}: LabelProps): React.JSX.Element {
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme);
   const textStyle = [themedStyle.text, themedStyle[variant], style];

package/src/primitives/PasswordField/PasswordField.tsx

@@ -19,7 +19,7 @@ export default function PasswordField({
   showPasswordButton = true,
   style,
   ...rest
-}: PasswordFieldProps): JSX.Element {
+}: PasswordFieldProps): React.JSX.Element {
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme);