@aws-amplify/ui-react-native 2.3.1 → 2.4.0

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.3.1";
+export declare const VERSION = "2.4.0";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = '2.3.1';
+export const VERSION = '2.4.0';

package/lib/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-native",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "main": "lib/index.js",
   "module": "dist/index.js",
   "react-native": "src/index.ts",
@@ -25,14 +25,14 @@
     "@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.2",
-    "@aws-amplify/ui-react-core": "3.2.1",
-    "@aws-amplify/ui-react-core-notifications": "2.1.1"
+    "@aws-amplify/ui": "6.8.0",
+    "@aws-amplify/ui-react-core": "3.3.0",
+    "@aws-amplify/ui-react-core-notifications": "2.2.0"
   },
   "peerDependencies": {
     "aws-amplify": "^6.9.0",

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

@@ -15,7 +15,7 @@ export default function CarouselPageIndicator({
   indicatorTestId,
   numberOfItems,
   style,
-}: CarouselPageIndicatorProps): JSX.Element {
+}: CarouselPageIndicatorProps): React.JSX.Element {
   const items = useMemo(
     () =>
       new Array(numberOfItems ?? 0)

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);
 

package/src/primitives/PhoneNumberField/PhoneNumberField.tsx

@@ -11,7 +11,7 @@ export default function PhoneNumberField({
   labelStyle,
   style,
   ...rest
-}: PhoneNumberFieldProps): JSX.Element {
+}: PhoneNumberFieldProps): React.JSX.Element {
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme);
 

package/src/primitives/Radio/Radio.tsx

@@ -33,7 +33,7 @@ export default function Radio<T>({
   style,
   value,
   ...rest
-}: RadioProps<T>): JSX.Element {
+}: RadioProps<T>): React.JSX.Element {
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme);
 

package/src/primitives/RadioGroup/RadioGroup.tsx

@@ -34,7 +34,7 @@ export default function RadioGroup<T>({
   size,
   style,
   ...rest
-}: RadioGroupProps<T>): JSX.Element {
+}: RadioGroupProps<T>): React.JSX.Element {
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme);
 

package/src/primitives/Tabs/Tab.tsx

@@ -14,7 +14,7 @@ export default function Tab({
   textStyle,
   indicatorPosition,
   ...rest
-}: TabProps): JSX.Element {
+}: TabProps): React.JSX.Element {
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme, indicatorPosition);
 

package/src/primitives/Tabs/Tabs.tsx

@@ -14,7 +14,7 @@ export default function Tabs({
   selectedIndex = 0,
   style,
   ...rest
-}: TabsProps): JSX.Element {
+}: TabsProps): React.JSX.Element {
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme, indicatorPosition);
 

package/src/primitives/TextField/TextField.tsx

@@ -25,7 +25,7 @@ export default function TextField({
   labelStyle,
   style,
   ...rest
-}: TextFieldProps): JSX.Element {
+}: TextFieldProps): React.JSX.Element {
   const theme = useTheme();
   const themedStyle = useMemo(() => getThemedStyles(theme), [theme]);
 

package/src/theme/ThemeProvider.tsx

@@ -14,7 +14,7 @@ export const ThemeProvider = ({
   children,
   theme,
   colorMode,
-}: ThemeProviderProps): JSX.Element => {
+}: ThemeProviderProps): React.JSX.Element => {
   const value = React.useMemo(
     () => ({ theme: createTheme(theme, colorMode) }),
     [theme, colorMode]

package/src/version.ts

@@ -1 +1 @@
-export const VERSION = '2.3.1';
+export const VERSION = '2.4.0';