From 954e9be2d055a57ebddab5b902e3e6b427d09f67 Mon Sep 17 00:00:00 2001
From: Caleb Pollman <cpollman@amazon.com>
Date: Thu, 19 Dec 2024 14:32:29 -0800
Subject: [PATCH] chore(react): add support for react 19 (#5826)

---
 .changeset/old-suits-brush.md                 |  13 +
 .../components/react-native/cli/App.tsx       |   2 +-
 docs/.eslintrc.json                           |   2 +-
 .../__snapshots__/props-table.test.ts.snap    |  56 +-
 docs/package.json                             |   7 +-
 docs/src/components/CodeHighlight.tsx         |  12 +-
 docs/src/components/ExpoSnack.tsx             |   2 +-
 .../GlobalNav/components/DesktopNav.tsx       |   2 +-
 .../GlobalNav/components/NavMenuLink.tsx      |   2 +-
 .../components/propsTable/PropsTableBody.tsx  |   2 +-
 .../propsTable/PropsTableExpander.tsx         |   4 +-
 .../components/alert/AlertPropControls.tsx    |   2 +-
 .../autocomplete/AutocompletePropControls.tsx |   2 +-
 .../components/avatar/AvatarPropControls.tsx  |   2 +-
 .../components/badge/BadgePropControls.tsx    |   2 +-
 .../CheckboxFieldPropControls.tsx             |   2 +-
 .../collection/CollectionPropControls.tsx     |   2 +-
 .../divider/DividerPropControls.tsx           |   2 +-
 .../fieldset/FieldsetPropControls.tsx         |   2 +-
 .../components/flex/FlexPropControls.tsx      |   2 +-
 .../grid/GridContainerPropControls.tsx        |   2 +-
 .../components/grid/GridItemPropControls.tsx  |   2 +-
 .../heading/HeadingPropControls.tsx           |   2 +-
 .../HighlightMatchPropControls.tsx            |   2 +-
 .../components/icon/IconPropControls.tsx      |   2 +-
 .../components/image/ImagePropControls.tsx    |   2 +-
 .../components/input/InputPropControls.tsx    |   2 +-
 .../components/link/LinkPropControls.tsx      |   2 +-
 .../components/menu/MenuPropControls.tsx      |   2 +-
 .../message/MessagePropControls.tsx           |   2 +-
 .../pagination/PaginationPropControls.tsx     |   2 +-
 .../passwordFieldPropControls.tsx             |   2 +-
 .../PhoneNumberFieldPropControls.tsx          |   2 +-
 .../RadioGroupFieldPropControls.tsx           |   2 +-
 .../components/rating/RatingPropControls.tsx  |   2 +-
 .../searchfield/SearchFieldPropControls.tsx   |   2 +-
 .../selectfield/SelectFieldPropControls.tsx   |   2 +-
 .../components/shared/StylePropControls.tsx   |   2 +-
 .../sliderfield/SliderFieldPropControls.tsx   |   2 +-
 .../switchfield/SwitchPropControls.tsx        |   2 +-
 .../components/table/TablePropControls.tsx    |   2 +-
 .../components/tabs/TabsPropControls.tsx      |   2 +-
 .../components/text/TextPropControls.tsx      |   2 +-
 .../TextAreaFieldPropControls.tsx             |   2 +-
 .../textfield/TextFieldPropControls.tsx       |   2 +-
 .../togglebutton/ToggleButtonPropControls.tsx |   2 +-
 .../components/view/ViewPropControls.tsx      |   2 +-
 .../customization/LabelsAndTextDemo.tsx       |   2 +-
 .../customization/CustomizationComponents.tsx |   2 +-
 examples/next-app-router/package.json         |   2 +-
 examples/next/package.json                    |   5 +-
 .../ai/ai-conversation/context.page.tsx       |   2 +-
 .../with-custom-components/index.page.tsx     |   4 +-
 examples/react-native/package.json            |   5 +-
 package.json                                  |  14 +-
 packages/configs/.eslintrc.js                 |   2 +-
 .../configs/typescript/tsconfig.base.json     |  20 +-
 packages/react-ai/package.json                |   4 +-
 .../AIConversation/AIConversation.tsx         |   2 +-
 .../context/AIContextContext.tsx              |   2 +-
 .../AIConversation/context/ActionsContext.tsx |   2 +-
 .../context/AttachmentContext.tsx             |   2 +-
 .../AIConversation/context/AvatarsContext.tsx |   2 +-
 .../context/ControlsContext.tsx               |   2 +-
 .../context/ConversationInputContext.tsx      |   2 +-
 .../context/FallbackComponentContext.tsx      |   2 +-
 .../AIConversation/context/LoadingContext.tsx |   2 +-
 .../context/MessageVariantContext.tsx         |   2 +-
 .../context/MessagesContext.tsx               |   2 +-
 .../context/ResponseComponentsContext.tsx     |   2 +-
 .../context/SendMessageContext.tsx            |   2 +-
 .../context/SuggestedPromptsContext.tsx       |   2 +-
 .../context/WelcomeMessageContext.tsx         |   2 +-
 .../AIConversation/createAIConversation.tsx   |   2 +-
 .../src/components/AIConversation/types.ts    |   8 +-
 .../views/Controls/AttachmentListControl.tsx  |   8 +-
 .../views/Controls/DefaultMessageControl.tsx  |   2 +-
 .../views/Controls/MessagesControl.tsx        |   8 +-
 .../views/default/Attachments.tsx             |   2 +-
 .../react-ai/src/hooks/useAIConversation.tsx  |   4 +-
 packages/react-auth/package.json              |   4 +-
 packages/react-core-auth/package.json         |   2 +-
 .../ComponentRoute/ComponentRouteContext.tsx  |   2 +-
 .../context/Machine/MachineContext.tsx        |   2 +-
 .../Authenticator/context/Primitives/types.ts |  17 +-
 .../Authenticator/createProvider/types.ts     |   2 +-
 .../react-core-notifications/package.json     |   2 +-
 packages/react-core/package.json              |   4 +-
 .../context/AuthenticatorProvider.tsx         |   2 +-
 .../__tests__/AuthenticatorProvider.test.tsx  |   2 +-
 .../__snapshots__/useField.spec.ts.snap       |   1 +
 .../__snapshots__/useForm.spec.ts.snap        |   1 +
 .../FormCore/__tests__/useForm.spec.ts        |   4 +-
 .../components/FormCore/withFormProvider.tsx  |  10 +-
 .../RenderNothing/RenderNothing.tsx           |   4 +-
 .../react-core/src/hooks/usePreviousValue.ts  |   2 +-
 packages/react-geo/package.json               |   4 +-
 .../LocationSearch/LocationSearch.tsx         |   4 +-
 packages/react-liveness/package.json          |   4 +-
 .../FaceLivenessDetector.tsx                  |   2 +-
 .../FaceLivenessDetectorCore.tsx              |   2 +-
 .../LivenessCheck/LivenessCameraModule.tsx    |   2 +-
 .../FaceLivenessDetector/__mocks__/utils.tsx  |   2 +-
 .../FaceLivenessDetectorProvider.tsx          |   2 +-
 .../shared/DefaultStartScreenComponents.tsx   |   6 +-
 .../shared/FaceLivenessErrorModal.tsx         |   2 +-
 packages/react-liveness/tsconfig.json         |   1 +
 packages/react-native-auth/package.json       |   2 +-
 packages/react-native/package.json            |   2 +-
 .../src/Authenticator/Authenticator.tsx       |   2 +-
 .../ConfirmResetPassword.tsx                  |   2 +-
 .../__tests__/ConfirmResetPassword.spec.tsx   |   2 +-
 .../Defaults/ConfirmSignIn/ConfirmSignIn.tsx  |   2 +-
 .../__tests__/ConfirmSignIn.spec.tsx          |   2 +-
 .../Defaults/ConfirmSignUp/ConfirmSignUp.tsx  |   2 +-
 .../ConfirmVerifyUser/ConfirmVerifyUser.tsx   |   2 +-
 .../ForceNewPassword/ForceNewPassword.tsx     |   2 +-
 .../ForgotPassword/ForgotPassword.tsx         |   2 +-
 .../__tests__/ForgotPassword.spec.tsx         |   2 +-
 .../Defaults/SetupTotp/SetupTotp.tsx          |   2 +-
 .../Authenticator/Defaults/SignIn/SignIn.tsx  |   2 +-
 .../Defaults/SignIn/__tests__/SignIn.spec.tsx |   2 +-
 .../Authenticator/Defaults/SignUp/SignUp.tsx  |   2 +-
 .../Defaults/SignUp/__tests__/SignUp.spec.tsx |   2 +-
 .../Defaults/VerifyUser/VerifyUser.tsx        |   2 +-
 .../DefaultContainer/DefaultContainer.tsx     |   2 +-
 .../DefaultContainer/InnerContainer.tsx       |   2 +-
 .../common/DefaultContent/DefaultContent.tsx  |   2 +-
 .../common/DefaultFooter/DefaultFooter.tsx    |   2 +-
 .../DefaultRadioFormFields.tsx                |   2 +-
 .../DefaultTextFormFields.tsx                 |   2 +-
 .../common/DefaultFormFields/Field.tsx        |   2 +-
 .../common/DefaultFormFields/FieldErrors.tsx  |   2 +-
 .../common/DefaultHeader/DefaultHeader.tsx    |   2 +-
 .../FederatedProviderButton.tsx               |   2 +-
 .../FederatedProviderButtons.tsx              |   2 +-
 .../src/Authenticator/withAuthenticator.tsx   |   4 +-
 .../BannerMessage/BannerMessage.tsx           |   2 +-
 .../CarouselMessage/CarouselMessage.tsx       |   2 +-
 .../CarouselMessage/CarouselMessageItem.tsx   |   2 +-
 .../FullScreenMessage/FullScreenMessage.tsx   |   2 +-
 .../InAppMessageDisplay.tsx                   |   2 +-
 .../MessageLayout/MessageLayout.tsx           |   2 +-
 .../MessageWrapper/MessageWrapper.tsx         |   2 +-
 .../components/ModalMessage/ModalMessage.tsx  |   2 +-
 .../withInAppMessaging/withInAppMessaging.tsx |   4 +-
 .../src/primitives/Button/Button.tsx          |   2 +-
 .../src/primitives/Carousel/Carousel.tsx      |   2 +-
 .../Carousel/CarouselPageIndicator.tsx        |   2 +-
 .../src/primitives/Checkbox/Checkbox.tsx      |   2 +-
 .../src/primitives/Divider/Divider.tsx        |   2 +-
 .../primitives/ErrorMessage/ErrorMessage.tsx  |   2 +-
 .../src/primitives/Heading/Heading.tsx        |   2 +-
 .../react-native/src/primitives/Icon/Icon.tsx |   2 +-
 .../src/primitives/IconButton/IconButton.tsx  |   2 +-
 .../src/primitives/Label/Label.tsx            |   2 +-
 .../PasswordField/PasswordField.tsx           |   2 +-
 .../PhoneNumberField/PhoneNumberField.tsx     |   2 +-
 .../src/primitives/Radio/Radio.tsx            |   2 +-
 .../src/primitives/RadioGroup/RadioGroup.tsx  |   2 +-
 .../react-native/src/primitives/Tabs/Tab.tsx  |   2 +-
 .../react-native/src/primitives/Tabs/Tabs.tsx |   2 +-
 .../src/primitives/TextField/TextField.tsx    |   2 +-
 .../react-native/src/theme/ThemeProvider.tsx  |   2 +-
 packages/react-notifications/package.json     |   4 +-
 .../InAppMessaging/Backdrop/Backdrop.tsx      |   5 +-
 .../InAppMessaging/Backdrop/withBackdrop.tsx  |   6 +-
 .../BannerMessage/BannerMessage.tsx           |   4 +-
 .../CloseIconButton/CloseIconButton.tsx       |   2 +-
 .../FullScreenMessage/FullScreenMessage.tsx   |   2 +-
 .../InAppMessageDisplay.tsx                   |   2 +-
 .../MessageLayout/MessageLayout.tsx           |   2 +-
 .../ModalMessage/ModalMessage.tsx             |   4 +-
 .../withInAppMessaging/withInAppMessaging.tsx |   4 +-
 packages/react-storage/package.json           |   8 +-
 .../components/FileUploader/FileUploader.tsx  |   2 +-
 .../hooks/useFileUploader/useFileUploader.ts  |   6 +-
 .../FileUploader/ui/Container/Container.tsx   |   2 +-
 .../ui/Container/__tests__/Container.spec.tsx |   2 +-
 .../FileUploader/ui/DropZone/DropZone.tsx     |   2 +-
 .../FileUploader/ui/FileList/FileControl.tsx  |   2 +-
 .../FileUploader/ui/FileList/FileDetails.tsx  |   2 +-
 .../FileUploader/ui/FileList/FileList.tsx     |   2 +-
 .../ui/FileList/FileRemoveButton.tsx          |   2 +-
 .../ui/FileList/FileStatusMessage.tsx         |   2 +-
 .../ui/FileList/FileThumbnail.tsx             |   2 +-
 .../ui/FileListFooter/FileListFooter.tsx      |   2 +-
 .../ui/FileListHeader/FileListHeader.tsx      |   2 +-
 .../FileUploader/ui/FilePicker/FilePicker.tsx |   2 +-
 .../context/elements/defaults.tsx             |   2 +-
 .../components/StorageImage/StorageImage.tsx  |   2 +-
 .../StorageManager/StorageManager.tsx         |   2 +-
 .../StorageManager/ui/Container/Container.tsx |   2 +-
 .../ui/Container/__tests__/Container.spec.tsx |   2 +-
 .../StorageManager/ui/DropZone/DropZone.tsx   |   2 +-
 .../ui/FileList/FileControl.tsx               |   2 +-
 .../ui/FileList/FileDetails.tsx               |   2 +-
 .../StorageManager/ui/FileList/FileList.tsx   |   2 +-
 .../ui/FileList/FileRemoveButton.tsx          |   2 +-
 .../ui/FileList/FileStatusMessage.tsx         |   2 +-
 .../ui/FileList/FileThumbnail.tsx             |   2 +-
 .../ui/FileListFooter/FileListFooter.tsx      |   2 +-
 .../ui/FileListHeader/FileListHeader.tsx      |   2 +-
 .../ui/FilePicker/FilePicker.tsx              |   2 +-
 .../__tests__/__snapshots__/exports.ts.snap   |  15 +
 packages/react/package.json                   |  13 +-
 .../ChangePassword/ChangePassword.tsx         |   2 +-
 .../AccountSettings/DeleteUser/DeleteUser.tsx |   2 +-
 .../Authenticator/Authenticator.tsx           |   9 +-
 .../ConfirmSignIn/ConfirmSignIn.tsx           |   4 +-
 .../ConfirmSignUp/ConfirmSignUp.tsx           |   4 +-
 .../FederatedSignIn/FederatedSignIn.tsx       |   2 +-
 .../FederatedSignInButton.tsx                 |  10 +-
 .../ForceNewPassword/ForceNewPassword.tsx     |   8 +-
 .../ForgotPassword/ConfirmResetPassword.tsx   |   6 +-
 .../ForgotPassword/ForgotPassword.tsx         |   6 +-
 .../RouteContainer/RouteContainer.tsx         |   2 +-
 .../Authenticator/Router/Router.tsx           |   8 +-
 .../Authenticator/SetupTotp/SetupTotp.tsx     |   6 +-
 .../Authenticator/SignIn/SignIn.tsx           |   4 +-
 .../Authenticator/SignUp/SignUp.tsx           |   6 +-
 .../VerifyUser/ConfirmVerifyUser.tsx          |   4 +-
 .../Authenticator/VerifyUser/VerifyUser.tsx   |   8 +-
 .../useCustomComponents/defaultComponents.tsx |  10 +-
 .../shared/ConfirmSignInFooter.tsx            |   2 +-
 .../shared/ConfirmationCodeInput.tsx          |   2 +-
 .../Authenticator/shared/FormField.tsx        |   2 +-
 .../Authenticator/shared/FormFields.tsx       |   2 +-
 .../shared/RemoteErrorMessage.tsx             |   2 +-
 .../Authenticator/shared/SignInSignUpTabs.tsx |   2 +-
 .../shared/TwoButtonSubmitFooter.tsx          |   4 +-
 .../Authenticator/withAuthenticator.tsx       |   2 +-
 .../FilterChildren/FilterChildren.tsx         |   2 +-
 .../ThemeProvider/ComponentStyle.tsx          |   2 +-
 .../components/ThemeProvider/GlobalStyle.tsx  |   2 +-
 .../src/components/ThemeProvider/Style.tsx    |   5 +-
 .../ThemeProvider/ThemeProvider.tsx           |   2 +-
 .../components/ThemeProvider/ThemeStyle.tsx   |   2 +-
 .../components/shared/ValidationErrors.tsx    |   2 +-
 .../react/src/primitives/Alert/AlertIcon.tsx  |   2 +-
 .../__tests__/CheckboxField.test.tsx          |   2 +-
 .../src/primitives/Collection/Collection.tsx  |   4 +-
 .../src/primitives/DropZone/DropZone.tsx      |  15 +-
 .../primitives/DropZone/DropZoneChildren.tsx  |  24 +-
 .../primitives/DropZone/DropZoneProvider.tsx  |   2 +-
 .../primitives/Icon/context/IconsProvider.tsx |   2 +-
 .../react/src/primitives/Icon/icons/types.ts  |   2 +-
 .../primitives/Link/__tests__/Link.test.tsx   |  53 +-
 .../Pagination/usePaginationItems.tsx         |   2 +-
 .../react/src/primitives/Tabs/TabsList.tsx    |   2 +-
 .../src/primitives/types/autocomplete.ts      |   2 +-
 .../react/src/primitives/types/collection.ts  |   4 +-
 packages/react/src/primitives/types/rating.ts |   4 +-
 packages/react/src/primitives/types/view.ts   |   7 +-
 .../utils/primitiveWithForwardRef.ts          |   2 +-
 yarn.lock                                     | 664 +++++++++---------
 256 files changed, 767 insertions(+), 807 deletions(-)
 create mode 100644 .changeset/old-suits-brush.md

diff --git a/.changeset/old-suits-brush.md b/.changeset/old-suits-brush.md
new file mode 100644
index 00000000000..c9896e14740
--- /dev/null
+++ b/.changeset/old-suits-brush.md
@@ -0,0 +1,13 @@
+---
+"@aws-amplify/ui-react": patch
+"@aws-amplify/ui-react-ai": patch
+"@aws-amplify/ui-react-core": patch
+"@aws-amplify/ui-react-core-notifications": patch
+"@aws-amplify/ui-react-geo": patch
+"@aws-amplify/ui-react-liveness": patch
+"@aws-amplify/ui-react-native": patch
+"@aws-amplify/ui-react-notifications": patch
+"@aws-amplify/ui-react-storage": patch
+---
+
+chore(react): add support for React 19
diff --git a/build-system-tests/templates/components/react-native/cli/App.tsx b/build-system-tests/templates/components/react-native/cli/App.tsx
index 6142710083f..3fa7f4a72dd 100644
--- a/build-system-tests/templates/components/react-native/cli/App.tsx
+++ b/build-system-tests/templates/components/react-native/cli/App.tsx
@@ -23,7 +23,7 @@ function SignOutButton() {
   return <Button title="Sign Out" onPress={signOut} />;
 }
 
-function App(): JSX.Element {
+function App(): React.JSX.Element {
   return (
     <>
       <Authenticator.Provider>
diff --git a/docs/.eslintrc.json b/docs/.eslintrc.json
index b039f72a9c7..93dc6bd2d60 100644
--- a/docs/.eslintrc.json
+++ b/docs/.eslintrc.json
@@ -1,5 +1,5 @@
 {
-  "extends": "next/core-web-vitals",
+  "extends": ["next", "next/core-web-vitals"],
   "rules": {
     "react-hooks/exhaustive-deps": "error" // override next eslint default
   }
diff --git a/docs/__tests__/__snapshots__/props-table.test.ts.snap b/docs/__tests__/__snapshots__/props-table.test.ts.snap
index ba55feddf0e..d07bed89456 100644
--- a/docs/__tests__/__snapshots__/props-table.test.ts.snap
+++ b/docs/__tests__/__snapshots__/props-table.test.ts.snap
@@ -2970,7 +2970,7 @@ exports[`Props Table 1`] = `
                     },
                     "children": {
                         "name": "children",
-                        "type": "(item: Item, index: number) => JSX.Element",
+                        "type": "(item: Item, index: number) => React.JSX.Element",
                         "description": "The component to be repeated\\nSame interface as Array.prototype.map",
                         "category": "CollectionChildren",
                         "isOptional": false
@@ -7712,10 +7712,10 @@ exports[`Props Table 1`] = `
                         "category": "BaseInputProps",
                         "isOptional": true
                     },
-                    "placeholder": {
-                        "name": "placeholder",
-                        "type": "string | undefined",
-                        "description": "Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.",
+                    "enterKeyHint": {
+                        "name": "enterKeyHint",
+                        "type": "EnterKeyHint | undefined",
+                        "description": "Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)",
                         "category": "BaseInputProps",
                         "isOptional": true
                     },
@@ -7747,6 +7747,13 @@ exports[`Props Table 1`] = `
                         "category": "BaseInputProps",
                         "isOptional": true
                     },
+                    "name": {
+                        "name": "name",
+                        "type": "string | undefined",
+                        "description": "Name of the field. Submitted with the form as part of a name/value pair.",
+                        "category": "BaseInputProps",
+                        "isOptional": true
+                    },
                     "autoComplete": {
                         "name": "autoComplete",
                         "type": "string | undefined",
@@ -7768,13 +7775,6 @@ exports[`Props Table 1`] = `
                         "category": "BaseInputProps",
                         "isOptional": true
                     },
-                    "enterKeyHint": {
-                        "name": "enterKeyHint",
-                        "type": "EnterKeyHint | undefined",
-                        "description": "Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)",
-                        "category": "BaseInputProps",
-                        "isOptional": true
-                    },
                     "isReadOnly": {
                         "name": "isReadOnly",
                         "type": "boolean | undefined",
@@ -7789,10 +7789,10 @@ exports[`Props Table 1`] = `
                         "category": "BaseInputProps",
                         "isOptional": true
                     },
-                    "name": {
-                        "name": "name",
+                    "placeholder": {
+                        "name": "placeholder",
                         "type": "string | undefined",
-                        "description": "Name of the field. Submitted with the form as part of a name/value pair.",
+                        "description": "Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.",
                         "category": "BaseInputProps",
                         "isOptional": true
                     },
@@ -8394,10 +8394,10 @@ exports[`Props Table 1`] = `
                         "category": "BaseInputProps",
                         "isOptional": true
                     },
-                    "placeholder": {
-                        "name": "placeholder",
-                        "type": "string | undefined",
-                        "description": "Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.",
+                    "enterKeyHint": {
+                        "name": "enterKeyHint",
+                        "type": "EnterKeyHint | undefined",
+                        "description": "Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)",
                         "category": "BaseInputProps",
                         "isOptional": true
                     },
@@ -8436,13 +8436,6 @@ exports[`Props Table 1`] = `
                         "category": "BaseInputProps",
                         "isOptional": true
                     },
-                    "enterKeyHint": {
-                        "name": "enterKeyHint",
-                        "type": "EnterKeyHint | undefined",
-                        "description": "Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)",
-                        "category": "BaseInputProps",
-                        "isOptional": true
-                    },
                     "isReadOnly": {
                         "name": "isReadOnly",
                         "type": "boolean | undefined",
@@ -8456,6 +8449,13 @@ exports[`Props Table 1`] = `
                         "description": "Whether field should be marked required.",
                         "category": "BaseInputProps",
                         "isOptional": true
+                    },
+                    "placeholder": {
+                        "name": "placeholder",
+                        "type": "string | undefined",
+                        "description": "Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.",
+                        "category": "BaseInputProps",
+                        "isOptional": true
                     }
                 }
             },
@@ -8936,7 +8936,7 @@ exports[`Props Table 1`] = `
                     },
                     "emptyIcon": {
                         "name": "emptyIcon",
-                        "type": "JSX.Element | undefined",
+                        "type": "React.JSX.Element | undefined",
                         "description": "This will override which icon to use as the empty icon. This will only\\noverride the empty icon an will create a rating component that uses\\ndifferent icons for filled and empty icons.",
                         "category": "RatingOptions",
                         "isOptional": true
@@ -8950,7 +8950,7 @@ exports[`Props Table 1`] = `
                     },
                     "icon": {
                         "name": "icon",
-                        "type": "JSX.Element | undefined",
+                        "type": "React.JSX.Element | undefined",
                         "description": "This will override which icon to use. This will override both\\nthe filled and empty icon values unless an empty icon is specified\\nwith the emptyIcon prop\\nDefault is <IconStar />",
                         "category": "RatingOptions",
                         "isOptional": true
diff --git a/docs/package.json b/docs/package.json
index 9204de4a662..edb24e1325b 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -20,7 +20,8 @@
     "postbuild:sitemap": "node --require esbuild-register ./scripts/generate-sitemap-robotstxt.ts",
     "start": "next start",
     "test": "jest",
-    "test:links": "node --require esbuild-register ./scripts/link-checker-puppeteer.ts"
+    "test:links": "node --require esbuild-register ./scripts/link-checker-puppeteer.ts",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@aws-amplify/ui-react": "6.7.2",
@@ -38,9 +39,9 @@
     "next-plugin-preval": "^1.2.1",
     "prism-react-renderer": "1.2.1",
     "raw-loader": "^4.0.2",
-    "react": "18.2.0",
+    "react": "^18.3.0",
     "react-copy-to-clipboard": "^5.0.4",
-    "react-dom": "18.2.0",
+    "react-dom": "^18.3.0",
     "react-icons": "^4.3.1",
     "react-live": "^4.1.8",
     "rehype": "^11.0.0",
diff --git a/docs/src/components/CodeHighlight.tsx b/docs/src/components/CodeHighlight.tsx
index 0cbf91d0923..761127161c8 100644
--- a/docs/src/components/CodeHighlight.tsx
+++ b/docs/src/components/CodeHighlight.tsx
@@ -43,17 +43,9 @@ export const CodeHighlight = ({
           >
             <View as="code" className={classNames(className, prismClassName)}>
               {tokens.map((line, i) => (
-                <View
-                  className="code-line"
-                  key={i}
-                  {...getLineProps({ line, key: i })}
-                >
+                <View {...getLineProps({ line })} className="code-line" key={i}>
                   {line.map((token, key) => (
-                    <Text
-                      as="span"
-                      key={key}
-                      {...getTokenProps({ token, key })}
-                    />
+                    <Text {...getTokenProps({ token })} as="span" key={key} />
                   ))}
                 </View>
               ))}
diff --git a/docs/src/components/ExpoSnack.tsx b/docs/src/components/ExpoSnack.tsx
index 97dea927d67..26f3f892f04 100644
--- a/docs/src/components/ExpoSnack.tsx
+++ b/docs/src/components/ExpoSnack.tsx
@@ -65,7 +65,7 @@ export const ExpoSnack = (options: SnackOptions) => {
   // We need a unique ID b/c we need to listen to window events that the iframe
   // will send and it sends the iframe id
   const id = React.useRef(Math.random().toString(36).substring(2, 10));
-  const ref = React.useRef<HTMLIFrameElement>();
+  const ref = React.useRef<HTMLIFrameElement>(undefined);
   const [theme, setTheme] = React.useState('light');
 
   React.useLayoutEffect(() => {
diff --git a/docs/src/components/Layout/GlobalNav/components/DesktopNav.tsx b/docs/src/components/Layout/GlobalNav/components/DesktopNav.tsx
index ff7c68c0423..6bc39873ae2 100644
--- a/docs/src/components/Layout/GlobalNav/components/DesktopNav.tsx
+++ b/docs/src/components/Layout/GlobalNav/components/DesktopNav.tsx
@@ -12,7 +12,7 @@ interface DesktopNavProps {
   navLinksContainerRef: MutableRefObject<HTMLDivElement>;
   navLinksRightRef: MutableRefObject<HTMLDivElement>;
   hasSecondaryNav: boolean;
-  secondaryNavDesktop?: JSX.Element;
+  secondaryNavDesktop?: React.JSX.Element;
 }
 
 export function DesktopNav({
diff --git a/docs/src/components/Layout/GlobalNav/components/NavMenuLink.tsx b/docs/src/components/Layout/GlobalNav/components/NavMenuLink.tsx
index a359f9ac93e..33506fbd8e2 100644
--- a/docs/src/components/Layout/GlobalNav/components/NavMenuLink.tsx
+++ b/docs/src/components/Layout/GlobalNav/components/NavMenuLink.tsx
@@ -15,7 +15,7 @@ export function NavMenuLink({
   setShowGlobalNav?: Dispatch<SetStateAction<boolean>>;
 }) {
   const label: string = navMenuItem.label;
-  const linkContent: JSX.Element =
+  const linkContent: React.JSX.Element =
     navMenuItem.type === 'EXTERNAL' ? (
       <ExternalLink>{label}</ExternalLink>
     ) : (
diff --git a/docs/src/components/propsTable/PropsTableBody.tsx b/docs/src/components/propsTable/PropsTableBody.tsx
index 56484286b1d..359a0328d69 100644
--- a/docs/src/components/propsTable/PropsTableBody.tsx
+++ b/docs/src/components/propsTable/PropsTableBody.tsx
@@ -7,7 +7,7 @@ import { Property } from '../../../scripts/types/catalog';
 export const PropsTableBody = ([
   propName,
   { name, type, description, isOptional },
-]: [string, Property]): JSX.Element => {
+]: [string, Property]): React.JSX.Element => {
   return (
     <TableRow key={name}>
       <ResponsiveTableCell label="Name">
diff --git a/docs/src/components/propsTable/PropsTableExpander.tsx b/docs/src/components/propsTable/PropsTableExpander.tsx
index 353d0771295..b09aa1cf400 100644
--- a/docs/src/components/propsTable/PropsTableExpander.tsx
+++ b/docs/src/components/propsTable/PropsTableExpander.tsx
@@ -10,7 +10,9 @@ export function PropsTableExpander({
 }: {
   propsSortedByCategory: SortedPropertiesByCategory;
 }) {
-  const expanderItem = (categoryProperty: CategoryProperty): JSX.Element => {
+  const expanderItem = (
+    categoryProperty: CategoryProperty
+  ): React.JSX.Element => {
     const title = Object.keys(categoryProperty)[0];
     return (
       <Accordion.Item key={title} value={title}>
diff --git a/docs/src/pages/[platform]/components/alert/AlertPropControls.tsx b/docs/src/pages/[platform]/components/alert/AlertPropControls.tsx
index 991817f44ac..7ac0766797f 100644
--- a/docs/src/pages/[platform]/components/alert/AlertPropControls.tsx
+++ b/docs/src/pages/[platform]/components/alert/AlertPropControls.tsx
@@ -19,7 +19,7 @@ export interface AlertPropControlsProps extends AlertProps {
 }
 
 interface AlertPropControlsInterface {
-  (props: AlertPropControlsProps): JSX.Element;
+  (props: AlertPropControlsProps): React.JSX.Element;
 }
 
 export const AlertPropControls: AlertPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/autocomplete/AutocompletePropControls.tsx b/docs/src/pages/[platform]/components/autocomplete/AutocompletePropControls.tsx
index 6717c5685b5..66eedc75234 100644
--- a/docs/src/pages/[platform]/components/autocomplete/AutocompletePropControls.tsx
+++ b/docs/src/pages/[platform]/components/autocomplete/AutocompletePropControls.tsx
@@ -28,7 +28,7 @@ export interface AutocompletePropControlsProps extends AutocompleteProps {
 }
 
 interface AutocompletePropControlsInterface {
-  (props: AutocompletePropControlsProps): JSX.Element;
+  (props: AutocompletePropControlsProps): React.JSX.Element;
 }
 
 export const AutocompletePropControls: AutocompletePropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/avatar/AvatarPropControls.tsx b/docs/src/pages/[platform]/components/avatar/AvatarPropControls.tsx
index 49fc5c749d7..4da13db2af0 100644
--- a/docs/src/pages/[platform]/components/avatar/AvatarPropControls.tsx
+++ b/docs/src/pages/[platform]/components/avatar/AvatarPropControls.tsx
@@ -16,7 +16,7 @@ export interface AvatarPropControlsProps extends AvatarProps {
 }
 
 interface AvatarPropControlsInterface {
-  (props: AvatarPropControlsProps): JSX.Element;
+  (props: AvatarPropControlsProps): React.JSX.Element;
 }
 
 export const AvatarPropControls: AvatarPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/badge/BadgePropControls.tsx b/docs/src/pages/[platform]/components/badge/BadgePropControls.tsx
index 5a939d790e1..174355a225b 100644
--- a/docs/src/pages/[platform]/components/badge/BadgePropControls.tsx
+++ b/docs/src/pages/[platform]/components/badge/BadgePropControls.tsx
@@ -14,7 +14,7 @@ export interface BadgePropControlsProps extends BadgeProps {
 }
 
 interface BadgePropControlsInterface {
-  (props: BadgePropControlsProps): JSX.Element;
+  (props: BadgePropControlsProps): React.JSX.Element;
 }
 
 export const BadgePropControls: BadgePropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/checkboxfield/CheckboxFieldPropControls.tsx b/docs/src/pages/[platform]/components/checkboxfield/CheckboxFieldPropControls.tsx
index 87e69570d2f..96dd79ae898 100644
--- a/docs/src/pages/[platform]/components/checkboxfield/CheckboxFieldPropControls.tsx
+++ b/docs/src/pages/[platform]/components/checkboxfield/CheckboxFieldPropControls.tsx
@@ -26,7 +26,7 @@ export interface CheckboxFieldPropControlsProps extends CheckboxFieldProps {
 }
 
 interface CheckboxFieldPropControlsInterface {
-  (props: CheckboxFieldPropControlsProps): JSX.Element;
+  (props: CheckboxFieldPropControlsProps): React.JSX.Element;
 }
 
 export const CheckboxFieldPropControls: CheckboxFieldPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/collection/CollectionPropControls.tsx b/docs/src/pages/[platform]/components/collection/CollectionPropControls.tsx
index 3d7cc884356..1be0f27d6ff 100644
--- a/docs/src/pages/[platform]/components/collection/CollectionPropControls.tsx
+++ b/docs/src/pages/[platform]/components/collection/CollectionPropControls.tsx
@@ -18,7 +18,7 @@ export type CollectionPropControlsProps = Omit<
   };
 
 interface CollectionPropControlsInterface {
-  (props: CollectionPropControlsProps): JSX.Element;
+  (props: CollectionPropControlsProps): React.JSX.Element;
 }
 
 export const CollectionPropControls: CollectionPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/divider/DividerPropControls.tsx b/docs/src/pages/[platform]/components/divider/DividerPropControls.tsx
index d2fefb2d03d..1c5966590da 100644
--- a/docs/src/pages/[platform]/components/divider/DividerPropControls.tsx
+++ b/docs/src/pages/[platform]/components/divider/DividerPropControls.tsx
@@ -15,7 +15,7 @@ export interface DividerPropControlsProps extends DividerOptions {
 }
 
 interface DividerPropControlsInterface {
-  (props: DividerPropControlsProps): JSX.Element;
+  (props: DividerPropControlsProps): React.JSX.Element;
 }
 
 export const DividerPropControls: DividerPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/fieldset/FieldsetPropControls.tsx b/docs/src/pages/[platform]/components/fieldset/FieldsetPropControls.tsx
index a127bfc40ef..746bfce2ba1 100644
--- a/docs/src/pages/[platform]/components/fieldset/FieldsetPropControls.tsx
+++ b/docs/src/pages/[platform]/components/fieldset/FieldsetPropControls.tsx
@@ -25,7 +25,7 @@ export interface FieldsetPropControlsProps extends FieldsetProps {
 }
 
 interface FieldsetPropControlsInterface {
-  (props: FieldsetPropControlsProps): JSX.Element;
+  (props: FieldsetPropControlsProps): React.JSX.Element;
 }
 
 export const FieldsetPropControls: FieldsetPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/flex/FlexPropControls.tsx b/docs/src/pages/[platform]/components/flex/FlexPropControls.tsx
index 3ce0d18ca04..7a5e90f918a 100644
--- a/docs/src/pages/[platform]/components/flex/FlexPropControls.tsx
+++ b/docs/src/pages/[platform]/components/flex/FlexPropControls.tsx
@@ -15,7 +15,7 @@ export interface FlexPropControlsProps extends FlexProps {
 }
 
 interface FlexPropControlsInterface {
-  (props: FlexPropControlsProps): JSX.Element;
+  (props: FlexPropControlsProps): React.JSX.Element;
 }
 
 export const FlexPropControls: FlexPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/grid/GridContainerPropControls.tsx b/docs/src/pages/[platform]/components/grid/GridContainerPropControls.tsx
index bfa380dc9bb..a2c74b63cda 100644
--- a/docs/src/pages/[platform]/components/grid/GridContainerPropControls.tsx
+++ b/docs/src/pages/[platform]/components/grid/GridContainerPropControls.tsx
@@ -22,7 +22,7 @@ export interface GridContainerPropControlsProps
 }
 
 interface GridContainerPropControls {
-  (props: GridContainerPropControlsProps): JSX.Element;
+  (props: GridContainerPropControlsProps): React.JSX.Element;
 }
 
 export const GridContainerPropControls: GridContainerPropControls = ({
diff --git a/docs/src/pages/[platform]/components/grid/GridItemPropControls.tsx b/docs/src/pages/[platform]/components/grid/GridItemPropControls.tsx
index 86858e5a6c0..03be45e60d5 100644
--- a/docs/src/pages/[platform]/components/grid/GridItemPropControls.tsx
+++ b/docs/src/pages/[platform]/components/grid/GridItemPropControls.tsx
@@ -21,7 +21,7 @@ export interface GridItemPropControlsProps extends GridItemStyleProps {
 }
 
 interface GridItemPropControls {
-  (props: GridItemPropControlsProps): JSX.Element;
+  (props: GridItemPropControlsProps): React.JSX.Element;
 }
 
 export const GridItemPropControls: GridItemPropControls = ({
diff --git a/docs/src/pages/[platform]/components/heading/HeadingPropControls.tsx b/docs/src/pages/[platform]/components/heading/HeadingPropControls.tsx
index f37402ae1d3..f41dd1d21e4 100644
--- a/docs/src/pages/[platform]/components/heading/HeadingPropControls.tsx
+++ b/docs/src/pages/[platform]/components/heading/HeadingPropControls.tsx
@@ -16,7 +16,7 @@ interface HeadingPropControlsProps extends HeadingProps {
 }
 
 interface HeadingPropControlsInterface {
-  (props: HeadingPropControlsProps): JSX.Element;
+  (props: HeadingPropControlsProps): React.JSX.Element;
 }
 
 export const HeadingPropControls: HeadingPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/highlightmatch/HighlightMatchPropControls.tsx b/docs/src/pages/[platform]/components/highlightmatch/HighlightMatchPropControls.tsx
index 612f73b5b1a..02854f82360 100644
--- a/docs/src/pages/[platform]/components/highlightmatch/HighlightMatchPropControls.tsx
+++ b/docs/src/pages/[platform]/components/highlightmatch/HighlightMatchPropControls.tsx
@@ -9,7 +9,7 @@ export interface HighlightMatchPropControlsProps extends HighlightMatchProps {
 }
 
 interface HighlightMatchPropControlsInterface {
-  (props: HighlightMatchPropControlsProps): JSX.Element;
+  (props: HighlightMatchPropControlsProps): React.JSX.Element;
 }
 
 export const HighlightMatchPropControls: HighlightMatchPropControlsInterface =
diff --git a/docs/src/pages/[platform]/components/icon/IconPropControls.tsx b/docs/src/pages/[platform]/components/icon/IconPropControls.tsx
index f6d6d2b834e..a1097176f64 100644
--- a/docs/src/pages/[platform]/components/icon/IconPropControls.tsx
+++ b/docs/src/pages/[platform]/components/icon/IconPropControls.tsx
@@ -11,7 +11,7 @@ export interface IconPropControlsProps extends IconProps {
 }
 
 interface IconPropControlsInterface {
-  (props: IconPropControlsProps): JSX.Element;
+  (props: IconPropControlsProps): React.JSX.Element;
 }
 
 export const IconPropControls: IconPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/image/ImagePropControls.tsx b/docs/src/pages/[platform]/components/image/ImagePropControls.tsx
index 04d5f81fd92..547518f75ea 100644
--- a/docs/src/pages/[platform]/components/image/ImagePropControls.tsx
+++ b/docs/src/pages/[platform]/components/image/ImagePropControls.tsx
@@ -28,7 +28,7 @@ export interface ImagePropControlsProps extends ImageOptions {
 }
 
 interface ImagePropControlsInterface {
-  (props: ImagePropControlsProps): JSX.Element;
+  (props: ImagePropControlsProps): React.JSX.Element;
 }
 
 export const ImagePropControls: ImagePropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/input/InputPropControls.tsx b/docs/src/pages/[platform]/components/input/InputPropControls.tsx
index 7f86e6ea8dd..7685a31bcb5 100644
--- a/docs/src/pages/[platform]/components/input/InputPropControls.tsx
+++ b/docs/src/pages/[platform]/components/input/InputPropControls.tsx
@@ -20,7 +20,7 @@ export interface InputPropControlsProps extends InputProps {
 }
 
 interface InputPropControlsInterface {
-  (props: InputPropControlsProps): JSX.Element;
+  (props: InputPropControlsProps): React.JSX.Element;
 }
 
 export const InputPropControls: InputPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/link/LinkPropControls.tsx b/docs/src/pages/[platform]/components/link/LinkPropControls.tsx
index 7d90fc69aa6..4e3b705b239 100644
--- a/docs/src/pages/[platform]/components/link/LinkPropControls.tsx
+++ b/docs/src/pages/[platform]/components/link/LinkPropControls.tsx
@@ -17,7 +17,7 @@ export interface LinkPropControlsProps extends LinkProps {
 }
 
 interface LinkPropControlsInterface {
-  (props: LinkPropControlsProps): JSX.Element;
+  (props: LinkPropControlsProps): React.JSX.Element;
 }
 
 export const LinkPropControls: LinkPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/menu/MenuPropControls.tsx b/docs/src/pages/[platform]/components/menu/MenuPropControls.tsx
index f1eaa0c5bdd..6cb91df4160 100644
--- a/docs/src/pages/[platform]/components/menu/MenuPropControls.tsx
+++ b/docs/src/pages/[platform]/components/menu/MenuPropControls.tsx
@@ -7,7 +7,7 @@ export interface MenuPropControlsProps extends MenuProps {
 }
 
 interface MenuPropControlsInterface {
-  (props: MenuPropControlsProps): JSX.Element;
+  (props: MenuPropControlsProps): React.JSX.Element;
 }
 
 export const MenuPropControls: MenuPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/message/MessagePropControls.tsx b/docs/src/pages/[platform]/components/message/MessagePropControls.tsx
index db02c3cfd25..3bdd701edc7 100644
--- a/docs/src/pages/[platform]/components/message/MessagePropControls.tsx
+++ b/docs/src/pages/[platform]/components/message/MessagePropControls.tsx
@@ -24,7 +24,7 @@ export interface MessagePropControlsProps extends MessageProps {
 }
 
 interface MessagePropControlsInterface {
-  (props: MessagePropControlsProps): JSX.Element;
+  (props: MessagePropControlsProps): React.JSX.Element;
 }
 
 export const MessagePropControls: MessagePropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/pagination/PaginationPropControls.tsx b/docs/src/pages/[platform]/components/pagination/PaginationPropControls.tsx
index 7c25252d1a8..e1a0540a76e 100644
--- a/docs/src/pages/[platform]/components/pagination/PaginationPropControls.tsx
+++ b/docs/src/pages/[platform]/components/pagination/PaginationPropControls.tsx
@@ -24,7 +24,7 @@ export interface PaginationPropControlsProps extends PaginationProps {
 }
 
 interface PaginationPropControlsInterface {
-  (props: PaginationPropControlsProps): JSX.Element;
+  (props: PaginationPropControlsProps): React.JSX.Element;
 }
 
 export const PaginationPropControls: PaginationPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/passwordfield/passwordFieldPropControls.tsx b/docs/src/pages/[platform]/components/passwordfield/passwordFieldPropControls.tsx
index c372ab619d6..d329f6aa031 100644
--- a/docs/src/pages/[platform]/components/passwordfield/passwordFieldPropControls.tsx
+++ b/docs/src/pages/[platform]/components/passwordfield/passwordFieldPropControls.tsx
@@ -50,7 +50,7 @@ export interface PasswordFieldControlsProps extends PasswordFieldProps {
 }
 
 interface PasswordFieldPropControlsInterface {
-  (props: PasswordFieldControlsProps): JSX.Element;
+  (props: PasswordFieldControlsProps): React.JSX.Element;
 }
 
 export const PasswordFieldPropControls: PasswordFieldPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/phonenumberfield/PhoneNumberFieldPropControls.tsx b/docs/src/pages/[platform]/components/phonenumberfield/PhoneNumberFieldPropControls.tsx
index 2dd87fd1764..d5aba54933a 100644
--- a/docs/src/pages/[platform]/components/phonenumberfield/PhoneNumberFieldPropControls.tsx
+++ b/docs/src/pages/[platform]/components/phonenumberfield/PhoneNumberFieldPropControls.tsx
@@ -45,7 +45,7 @@ export type PhoneNumberFieldPropControlsProps = PhoneNumberFieldProps & {
 };
 
 interface PhoneNumberFieldPropControlsInterface {
-  (props: PhoneNumberFieldPropControlsProps): JSX.Element;
+  (props: PhoneNumberFieldPropControlsProps): React.JSX.Element;
 }
 
 export const PhoneNumberFieldPropControls: PhoneNumberFieldPropControlsInterface =
diff --git a/docs/src/pages/[platform]/components/radiogroupfield/RadioGroupFieldPropControls.tsx b/docs/src/pages/[platform]/components/radiogroupfield/RadioGroupFieldPropControls.tsx
index e2990560176..02fd364608b 100644
--- a/docs/src/pages/[platform]/components/radiogroupfield/RadioGroupFieldPropControls.tsx
+++ b/docs/src/pages/[platform]/components/radiogroupfield/RadioGroupFieldPropControls.tsx
@@ -27,7 +27,7 @@ export interface RadioGroupFieldPropControlsProps extends RadioGroupFieldProps {
 }
 
 interface RadioGroupFieldPropControlsInterface {
-  (props: RadioGroupFieldPropControlsProps): JSX.Element;
+  (props: RadioGroupFieldPropControlsProps): React.JSX.Element;
 }
 
 export const RadioGroupFieldPropControls: RadioGroupFieldPropControlsInterface =
diff --git a/docs/src/pages/[platform]/components/rating/RatingPropControls.tsx b/docs/src/pages/[platform]/components/rating/RatingPropControls.tsx
index bb7b6fbbd2f..f375c833d69 100644
--- a/docs/src/pages/[platform]/components/rating/RatingPropControls.tsx
+++ b/docs/src/pages/[platform]/components/rating/RatingPropControls.tsx
@@ -17,7 +17,7 @@ export interface RatingPropControlsProps extends RatingProps {
 }
 
 interface RatingPropControlsInterface {
-  (props: RatingPropControlsProps): JSX.Element;
+  (props: RatingPropControlsProps): React.JSX.Element;
 }
 
 export const RatingPropControls: RatingPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/searchfield/SearchFieldPropControls.tsx b/docs/src/pages/[platform]/components/searchfield/SearchFieldPropControls.tsx
index 7e36bb07a59..2dbc2ab119d 100644
--- a/docs/src/pages/[platform]/components/searchfield/SearchFieldPropControls.tsx
+++ b/docs/src/pages/[platform]/components/searchfield/SearchFieldPropControls.tsx
@@ -31,7 +31,7 @@ export interface SearchFieldPropControlsProps extends SearchFieldProps {
 }
 
 interface SearchFieldPropControlsInterface {
-  (props: SearchFieldPropControlsProps): JSX.Element;
+  (props: SearchFieldPropControlsProps): React.JSX.Element;
 }
 
 export const SearchFieldPropControls: SearchFieldPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/selectfield/SelectFieldPropControls.tsx b/docs/src/pages/[platform]/components/selectfield/SelectFieldPropControls.tsx
index b86b4f6cd8b..759cc60db02 100644
--- a/docs/src/pages/[platform]/components/selectfield/SelectFieldPropControls.tsx
+++ b/docs/src/pages/[platform]/components/selectfield/SelectFieldPropControls.tsx
@@ -38,7 +38,7 @@ export interface SelectFieldPropControlsProps extends SelectFieldProps {
 }
 
 interface SelectFieldPropControlsInterface {
-  (props: SelectFieldPropControlsProps): JSX.Element;
+  (props: SelectFieldPropControlsProps): React.JSX.Element;
 }
 
 export const SelectFieldPropControls: SelectFieldPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/shared/StylePropControls.tsx b/docs/src/pages/[platform]/components/shared/StylePropControls.tsx
index 2b56ca39cb3..78c44f2ab57 100644
--- a/docs/src/pages/[platform]/components/shared/StylePropControls.tsx
+++ b/docs/src/pages/[platform]/components/shared/StylePropControls.tsx
@@ -33,7 +33,7 @@ export interface StylePropControlsProps extends BaseStyleProps {
 }
 
 interface StylePropControlsInterface {
-  (props: StylePropControlsProps): JSX.Element;
+  (props: StylePropControlsProps): React.JSX.Element;
 }
 
 export const StylePropControls: StylePropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/sliderfield/SliderFieldPropControls.tsx b/docs/src/pages/[platform]/components/sliderfield/SliderFieldPropControls.tsx
index 40dd171a6d9..3f672a9e02b 100644
--- a/docs/src/pages/[platform]/components/sliderfield/SliderFieldPropControls.tsx
+++ b/docs/src/pages/[platform]/components/sliderfield/SliderFieldPropControls.tsx
@@ -43,7 +43,7 @@ export interface SliderFieldPropControlsProps extends SliderFieldProps {
 }
 
 interface SliderFieldPropControlsInterface {
-  (props: SliderFieldPropControlsProps): JSX.Element;
+  (props: SliderFieldPropControlsProps): React.JSX.Element;
 }
 
 export const SliderFieldPropControls: SliderFieldPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/switchfield/SwitchPropControls.tsx b/docs/src/pages/[platform]/components/switchfield/SwitchPropControls.tsx
index 96ff215aadf..f102217f608 100644
--- a/docs/src/pages/[platform]/components/switchfield/SwitchPropControls.tsx
+++ b/docs/src/pages/[platform]/components/switchfield/SwitchPropControls.tsx
@@ -32,7 +32,7 @@ export interface SwitchPropControlsProps extends SwitchFieldProps {
 }
 
 interface SwitchPropControlsInterface {
-  (props: SwitchPropControlsProps): JSX.Element;
+  (props: SwitchPropControlsProps): React.JSX.Element;
 }
 
 export const SwitchPropControls: SwitchPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/table/TablePropControls.tsx b/docs/src/pages/[platform]/components/table/TablePropControls.tsx
index 445a5737bd7..c6781ba756e 100644
--- a/docs/src/pages/[platform]/components/table/TablePropControls.tsx
+++ b/docs/src/pages/[platform]/components/table/TablePropControls.tsx
@@ -18,7 +18,7 @@ export interface TablePropControlsProps extends TableProps {
 }
 
 interface TablePropControlsInterface {
-  (props: TablePropControlsProps): JSX.Element;
+  (props: TablePropControlsProps): React.JSX.Element;
 }
 
 export const TablePropControls: TablePropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/tabs/TabsPropControls.tsx b/docs/src/pages/[platform]/components/tabs/TabsPropControls.tsx
index 594a27c27a7..bba0c596fcc 100644
--- a/docs/src/pages/[platform]/components/tabs/TabsPropControls.tsx
+++ b/docs/src/pages/[platform]/components/tabs/TabsPropControls.tsx
@@ -12,7 +12,7 @@ export interface TabsPropControlsProps extends TabsProps {
 }
 
 interface TabsPropControlsInterface {
-  (props: TabsPropControlsProps): JSX.Element;
+  (props: TabsPropControlsProps): React.JSX.Element;
 }
 
 export const TabsPropControls: TabsPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/text/TextPropControls.tsx b/docs/src/pages/[platform]/components/text/TextPropControls.tsx
index c6318e68f21..a36dc4d287b 100644
--- a/docs/src/pages/[platform]/components/text/TextPropControls.tsx
+++ b/docs/src/pages/[platform]/components/text/TextPropControls.tsx
@@ -29,7 +29,7 @@ export interface TextPropControlsProps extends TextProps {
 }
 
 interface TextPropControlsInterface {
-  (props: TextPropControlsProps): JSX.Element;
+  (props: TextPropControlsProps): React.JSX.Element;
 }
 
 export const TextPropControls: TextPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/textareafield/TextAreaFieldPropControls.tsx b/docs/src/pages/[platform]/components/textareafield/TextAreaFieldPropControls.tsx
index 08bff3cab53..115df22f8a2 100644
--- a/docs/src/pages/[platform]/components/textareafield/TextAreaFieldPropControls.tsx
+++ b/docs/src/pages/[platform]/components/textareafield/TextAreaFieldPropControls.tsx
@@ -47,7 +47,7 @@ export interface TextAreaFieldControlsProps extends BaseTextAreaFieldProps {
 }
 
 interface TextAreaFieldControlsInterface {
-  (props: TextAreaFieldControlsProps): JSX.Element;
+  (props: TextAreaFieldControlsProps): React.JSX.Element;
 }
 
 export const TextAreaFieldPropControls: TextAreaFieldControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/textfield/TextFieldPropControls.tsx b/docs/src/pages/[platform]/components/textfield/TextFieldPropControls.tsx
index 7f744672cd7..5ee88978a37 100644
--- a/docs/src/pages/[platform]/components/textfield/TextFieldPropControls.tsx
+++ b/docs/src/pages/[platform]/components/textfield/TextFieldPropControls.tsx
@@ -34,7 +34,7 @@ export interface TextFieldPropControlsProps extends TextFieldProps {
 }
 
 interface TextFieldPropControlsInterface {
-  (props: TextFieldPropControlsProps): JSX.Element;
+  (props: TextFieldPropControlsProps): React.JSX.Element;
 }
 
 export const TextFieldPropControls: TextFieldPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/togglebutton/ToggleButtonPropControls.tsx b/docs/src/pages/[platform]/components/togglebutton/ToggleButtonPropControls.tsx
index 2be106df680..3fcc9b8fc5a 100644
--- a/docs/src/pages/[platform]/components/togglebutton/ToggleButtonPropControls.tsx
+++ b/docs/src/pages/[platform]/components/togglebutton/ToggleButtonPropControls.tsx
@@ -17,7 +17,7 @@ export interface ToggleButtonPropControlsProps extends ToggleButtonProps {
 }
 
 export interface ToggleButtonPropControlsInterface {
-  (props: ToggleButtonPropControlsProps): JSX.Element;
+  (props: ToggleButtonPropControlsProps): React.JSX.Element;
 }
 
 export const ToggleButtonPropControls: ToggleButtonPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/view/ViewPropControls.tsx b/docs/src/pages/[platform]/components/view/ViewPropControls.tsx
index d204455a524..10fab253b8f 100644
--- a/docs/src/pages/[platform]/components/view/ViewPropControls.tsx
+++ b/docs/src/pages/[platform]/components/view/ViewPropControls.tsx
@@ -20,7 +20,7 @@ export interface ViewPropControlsProps extends ViewProps {
 }
 
 export interface ViewPropControlsInterface {
-  (props: ViewPropControlsProps): JSX.Element;
+  (props: ViewPropControlsProps): React.JSX.Element;
 }
 
 export const ViewPropControls: ViewPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/customization/LabelsAndTextDemo.tsx b/docs/src/pages/[platform]/connected-components/authenticator/customization/LabelsAndTextDemo.tsx
index b611e9d3e37..c882623a4f4 100644
--- a/docs/src/pages/[platform]/connected-components/authenticator/customization/LabelsAndTextDemo.tsx
+++ b/docs/src/pages/[platform]/connected-components/authenticator/customization/LabelsAndTextDemo.tsx
@@ -10,7 +10,7 @@ import { I18n } from 'aws-amplify/utils';
 import * as React from 'react';
 
 type ScreenProps = {
-  Component: JSX.Element;
+  Component: React.JSX.Element;
 };
 
 function Screen({ Component }: ScreenProps) {
diff --git a/docs/src/pages/[platform]/connected-components/liveness/customization/CustomizationComponents.tsx b/docs/src/pages/[platform]/connected-components/liveness/customization/CustomizationComponents.tsx
index ae4b555c492..477831e24da 100644
--- a/docs/src/pages/[platform]/connected-components/liveness/customization/CustomizationComponents.tsx
+++ b/docs/src/pages/[platform]/connected-components/liveness/customization/CustomizationComponents.tsx
@@ -13,7 +13,7 @@ export function CustomizationComponents() {
       region={'us-east-1'}
       onAnalysisComplete={async () => {}}
       components={{
-        PhotosensitiveWarning: (): JSX.Element => {
+        PhotosensitiveWarning: (): React.JSX.Element => {
           return (
             <Alert
               variation="warning"
diff --git a/examples/next-app-router/package.json b/examples/next-app-router/package.json
index bcfb29ba8dc..e379f8765e0 100644
--- a/examples/next-app-router/package.json
+++ b/examples/next-app-router/package.json
@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "@aws-amplify/ui-react": "^6.1.0",
+    "react": "^18.3.0",
     "next": "^14.2.15",
-    "react": "18.2.0",
     "react-dom": "^18",
     "react-icons": "^4.3.1"
   },
diff --git a/examples/next/package.json b/examples/next/package.json
index 00e5f39ce6b..e1f1a0263f3 100644
--- a/examples/next/package.json
+++ b/examples/next/package.json
@@ -19,16 +19,15 @@
     "@aws-sdk/credential-providers": "^3.370.0",
     "next": "^14.2.15",
     "next-global-css": "^1.1.1",
-    "react": "18.2.0",
+    "react": "^18.3.0",
     "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": "18.2.0",
+    "react-dom": "^18.3.0",
     "react-icons": "^4.4.0",
     "react-map-gl": "7.0.23",
     "swr": "^2.0.0"
   },
   "devDependencies": {
     "@types/node": "^15.12.4",
-    "@types/react": "^18.2.22",
     "eslint": "^8.44.0",
     "eslint-config-next": "^13.5.5",
     "rimraf": "^3.0.2"
diff --git a/examples/next/pages/ui/components/ai/ai-conversation/context.page.tsx b/examples/next/pages/ui/components/ai/ai-conversation/context.page.tsx
index d8a25fb315b..39d59031a22 100644
--- a/examples/next/pages/ui/components/ai/ai-conversation/context.page.tsx
+++ b/examples/next/pages/ui/components/ai/ai-conversation/context.page.tsx
@@ -60,7 +60,7 @@ const AIContextProvider = ({
   children,
 }: {
   children?: React.ReactNode;
-}): JSX.Element => {
+}): React.JSX.Element => {
   const [data, setData] = React.useState({});
   return (
     <AIContext.Provider value={{ data, setData }}>
diff --git a/examples/next/pages/ui/components/liveness/with-custom-components/index.page.tsx b/examples/next/pages/ui/components/liveness/with-custom-components/index.page.tsx
index a594120fe15..dd1978eba10 100644
--- a/examples/next/pages/ui/components/liveness/with-custom-components/index.page.tsx
+++ b/examples/next/pages/ui/components/liveness/with-custom-components/index.page.tsx
@@ -30,7 +30,7 @@ const App = () => {
               </View>
             );
           },
-          PhotosensitiveWarning: (): JSX.Element => {
+          PhotosensitiveWarning: (): React.JSX.Element => {
             return (
               <Alert
                 variation="warning"
@@ -43,7 +43,7 @@ const App = () => {
               </Alert>
             );
           },
-          Instructions: (): JSX.Element => {
+          Instructions: (): React.JSX.Element => {
             return (
               <Card variation="elevated">
                 Instructions to follow to use liveness face detector
diff --git a/examples/react-native/package.json b/examples/react-native/package.json
index fea604f6fac..8c4e974b927 100644
--- a/examples/react-native/package.json
+++ b/examples/react-native/package.json
@@ -21,7 +21,7 @@
     "@react-native-async-storage/async-storage": "^1.17.5",
     "@react-native-community/netinfo": "^8.3.0",
     "@xstate/react": "^3.2.2",
-    "react": "18.2.0",
+    "react": "^18.3.0",
     "react-native": "0.71.16",
     "react-native-get-random-values": "^1.9.0",
     "react-native-safe-area-context": "^4.7.3",
@@ -33,10 +33,7 @@
     "@babel/runtime": "^7.20.0",
     "@react-native-community/eslint-config": "^3.2.0",
     "@tsconfig/react-native": "^3.0.2",
-    "@types/jest": "^29.2.1",
-    "@types/react": "^18.2.22",
     "@types/react-native-dotenv": "^0.2.0",
-    "@types/react-test-renderer": "^18.0.2",
     "@typescript-eslint/eslint-plugin": "^6.9.0",
     "@typescript-eslint/parser": "^6.9.0",
     "babel-jest": "^29.2.1",
diff --git a/package.json b/package.json
index 27223a0259f..221a7a70aed 100644
--- a/package.json
+++ b/package.json
@@ -81,8 +81,8 @@
     "@babel/traverse": "7.23.2",
     "@cypress/request": "^3.0.0",
     "@sideway/formula": "^3.0.1",
-    "@types/react": "^18.2.22",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
     "body-parser": "1.20.3",
     "browserslist": "^4.16.15",
     "cookie": "^0.7.0",
@@ -97,8 +97,8 @@
     "path-to-regexp": "0.1.10",
     "postcss": "^8.4.31",
     "prismjs": "^1.25.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "react-native": "0.71.16",
     "react-devtools-core": "^4.28.4",
     "rollup": "^4.22.4",
@@ -126,7 +126,9 @@
     "@testing-library/user-event": "^14.5.1",
     "@types/fs-extra": "11.0.3",
     "@types/jest": "^29.5.5",
-    "@types/react-test-renderer": "^18.0.2",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-test-renderer": "^18.3.0",
     "@vitejs/plugin-vue": "^2.3.4",
     "aws-amplify": "^6.9.0",
     "esbuild-register": "^3.5.0",
@@ -137,7 +139,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": ">=10",
     "prettier": "^3.0.3",
-    "react-test-renderer": "^18.2.0",
+    "react-test-renderer": "^18.3.0",
     "rimraf": "^3.0.2",
     "rollup": "^4.22.4",
     "rollup-plugin-node-externals": "^7.1.3",
diff --git a/packages/configs/.eslintrc.js b/packages/configs/.eslintrc.js
index 284e37fc452..8b9417a09d9 100644
--- a/packages/configs/.eslintrc.js
+++ b/packages/configs/.eslintrc.js
@@ -1,5 +1,5 @@
 module.exports = {
-  extends: ['eslint:recommended', 'plugin:eslint-plugin/recommended'],
+  extends: ['eslint:recommended'],
   env: { jest: true, node: true },
   parserOptions: { ecmaVersion: 12 },
 };
diff --git a/packages/configs/typescript/tsconfig.base.json b/packages/configs/typescript/tsconfig.base.json
index a2c8a7daf7c..a4a00b10613 100644
--- a/packages/configs/typescript/tsconfig.base.json
+++ b/packages/configs/typescript/tsconfig.base.json
@@ -1,30 +1,14 @@
 {
   "compilerOptions": {
-    // https://www.typescriptlang.org/tsconfig#allowSyntheticDefaultImports
     "allowSyntheticDefaultImports": true,
-
-    // https://www.typescriptlang.org/tsconfig#baseUrl
     "baseUrl": ".",
-
-    // https://www.typescriptlang.org/tsconfig#declaration
     "declaration": true,
-
-    // https://www.typescriptlang.org/tsconfig#esModuleInterop
     "esModuleInterop": true,
-
-    // https://www.typescriptlang.org/tsconfig#importHelpers
     "importHelpers": true,
-
-    // https://www.typescriptlang.org/tsconfig#module
     "module": "esnext",
-
-    // https://www.typescriptlang.org/tsconfig#moduleResolution
     "moduleResolution": "node",
-
-    // https://www.typescriptlang.org/tsconfig#strict
     "strict": true,
-
-    // https://www.typescriptlang.org/tsconfig#target
-    "target": "ES2020"
+    "target": "ES2020",
+    "types": ["jest", "@testing-library/jest-dom"]
   }
 }
diff --git a/packages/react-ai/package.json b/packages/react-ai/package.json
index df77b493082..40385243b1f 100644
--- a/packages/react-ai/package.json
+++ b/packages/react-ai/package.json
@@ -44,8 +44,8 @@
   "peerDependencies": {
     "@aws-amplify/api-graphql": "unstable",
     "aws-amplify": "^6.9.0",
-    "react": "^16.14.0 || ^17.0 || ^18.0",
-    "react-dom": "^16.14.0 || ^17.0 || ^18.0"
+    "react": "^16.14 || ^17 || ^18 || ^19",
+    "react-dom": "^16.14 || ^17 || ^18 || ^19"
   },
   "dependencies": {
     "@aws-amplify/ui": "^6.7.1",
diff --git a/packages/react-ai/src/components/AIConversation/AIConversation.tsx b/packages/react-ai/src/components/AIConversation/AIConversation.tsx
index b65d9a9ba74..be1e4904512 100644
--- a/packages/react-ai/src/components/AIConversation/AIConversation.tsx
+++ b/packages/react-ai/src/components/AIConversation/AIConversation.tsx
@@ -30,7 +30,7 @@ function AIConversationBase({
   avatars,
   controls,
   ...rest
-}: AIConversationBaseProps): JSX.Element {
+}: AIConversationBaseProps): React.JSX.Element {
   useSetUserAgent({
     componentName: 'AIConversation',
     packageName: 'react-ai',
diff --git a/packages/react-ai/src/components/AIConversation/context/AIContextContext.tsx b/packages/react-ai/src/components/AIConversation/context/AIContextContext.tsx
index 45cca799f98..707eb81402f 100644
--- a/packages/react-ai/src/components/AIConversation/context/AIContextContext.tsx
+++ b/packages/react-ai/src/components/AIConversation/context/AIContextContext.tsx
@@ -10,7 +10,7 @@ export const AIContextProvider = ({
 }: {
   children?: React.ReactNode;
   aiContext?: () => object;
-}): JSX.Element => {
+}): React.JSX.Element => {
   return (
     <AIContextContext.Provider value={aiContext}>
       {children}
diff --git a/packages/react-ai/src/components/AIConversation/context/ActionsContext.tsx b/packages/react-ai/src/components/AIConversation/context/ActionsContext.tsx
index 46cec893a9f..79dedf9e9ed 100644
--- a/packages/react-ai/src/components/AIConversation/context/ActionsContext.tsx
+++ b/packages/react-ai/src/components/AIConversation/context/ActionsContext.tsx
@@ -11,7 +11,7 @@ export const ActionsProvider = ({
 }: {
   children?: React.ReactNode;
   actions?: CustomAction[];
-}): JSX.Element => {
+}): React.JSX.Element => {
   return (
     <ActionsContext.Provider value={actions}>
       {children}
diff --git a/packages/react-ai/src/components/AIConversation/context/AttachmentContext.tsx b/packages/react-ai/src/components/AIConversation/context/AttachmentContext.tsx
index 3195ad6c3c8..6b32b00beb8 100644
--- a/packages/react-ai/src/components/AIConversation/context/AttachmentContext.tsx
+++ b/packages/react-ai/src/components/AIConversation/context/AttachmentContext.tsx
@@ -24,7 +24,7 @@ export const AttachmentProvider = ({
   allowAttachments = false,
   maxAttachmentSize = 400_000,
   maxAttachments = 20,
-}: React.PropsWithChildren<AttachmentContextProps>): JSX.Element => {
+}: React.PropsWithChildren<AttachmentContextProps>): React.JSX.Element => {
   const providerValue = React.useMemo(
     () => ({ maxAttachmentSize, maxAttachments, allowAttachments }),
     [maxAttachmentSize, maxAttachments, allowAttachments]
diff --git a/packages/react-ai/src/components/AIConversation/context/AvatarsContext.tsx b/packages/react-ai/src/components/AIConversation/context/AvatarsContext.tsx
index 332168b4dbf..6eb550c8d70 100644
--- a/packages/react-ai/src/components/AIConversation/context/AvatarsContext.tsx
+++ b/packages/react-ai/src/components/AIConversation/context/AvatarsContext.tsx
@@ -11,7 +11,7 @@ export const AvatarsProvider = ({
 }: {
   children?: React.ReactNode;
   avatars?: Avatars;
-}): JSX.Element => {
+}): React.JSX.Element => {
   return (
     <AvatarsContext.Provider value={avatars}>
       {children}
diff --git a/packages/react-ai/src/components/AIConversation/context/ControlsContext.tsx b/packages/react-ai/src/components/AIConversation/context/ControlsContext.tsx
index 717dd38d5d7..829c4f0c792 100644
--- a/packages/react-ai/src/components/AIConversation/context/ControlsContext.tsx
+++ b/packages/react-ai/src/components/AIConversation/context/ControlsContext.tsx
@@ -29,7 +29,7 @@ export const ControlsProvider = ({
 }: {
   children?: React.ReactNode;
   controls?: ControlsContextProps;
-}): JSX.Element => {
+}): React.JSX.Element => {
   return (
     <ControlsContext.Provider value={controls}>
       {children}
diff --git a/packages/react-ai/src/components/AIConversation/context/ConversationInputContext.tsx b/packages/react-ai/src/components/AIConversation/context/ConversationInputContext.tsx
index dd56f6350b2..a530575d879 100644
--- a/packages/react-ai/src/components/AIConversation/context/ConversationInputContext.tsx
+++ b/packages/react-ai/src/components/AIConversation/context/ConversationInputContext.tsx
@@ -21,7 +21,7 @@ export const ConversationInputContextProvider = ({
   children,
 }: {
   children?: React.ReactNode;
-}): JSX.Element => {
+}): React.JSX.Element => {
   const [input, setInput] = React.useState<ConversationInput | undefined>();
   const [error, setError] = React.useState<string>();
 
diff --git a/packages/react-ai/src/components/AIConversation/context/FallbackComponentContext.tsx b/packages/react-ai/src/components/AIConversation/context/FallbackComponentContext.tsx
index a5f4655a4f1..17d6c180a8f 100644
--- a/packages/react-ai/src/components/AIConversation/context/FallbackComponentContext.tsx
+++ b/packages/react-ai/src/components/AIConversation/context/FallbackComponentContext.tsx
@@ -11,7 +11,7 @@ export const FallbackComponentProvider = ({
 }: {
   children?: React.ReactNode;
   FallbackComponent?: AIConversationInput['FallbackResponseComponent'];
-}): JSX.Element => {
+}): React.JSX.Element => {
   return (
     <FallbackComponentContext.Provider value={FallbackComponent}>
       {children}
diff --git a/packages/react-ai/src/components/AIConversation/context/LoadingContext.tsx b/packages/react-ai/src/components/AIConversation/context/LoadingContext.tsx
index 8246a3f30eb..9f93e53e16c 100644
--- a/packages/react-ai/src/components/AIConversation/context/LoadingContext.tsx
+++ b/packages/react-ai/src/components/AIConversation/context/LoadingContext.tsx
@@ -10,7 +10,7 @@ export const LoadingContextProvider = ({
 }: {
   children?: React.ReactNode;
   isLoading?: boolean;
-}): JSX.Element => {
+}): React.JSX.Element => {
   return (
     <LoadingContext.Provider value={isLoading}>
       {children}
diff --git a/packages/react-ai/src/components/AIConversation/context/MessageVariantContext.tsx b/packages/react-ai/src/components/AIConversation/context/MessageVariantContext.tsx
index 908d3657e23..2f5f1af6ddf 100644
--- a/packages/react-ai/src/components/AIConversation/context/MessageVariantContext.tsx
+++ b/packages/react-ai/src/components/AIConversation/context/MessageVariantContext.tsx
@@ -11,7 +11,7 @@ export const MessageVariantProvider = ({
 }: {
   children?: React.ReactNode;
   variant?: MessageVariant;
-}): JSX.Element => {
+}): React.JSX.Element => {
   return (
     <MessageVariantContext.Provider value={variant}>
       {children}
diff --git a/packages/react-ai/src/components/AIConversation/context/MessagesContext.tsx b/packages/react-ai/src/components/AIConversation/context/MessagesContext.tsx
index b2251bdbbf3..d93b8ad74df 100644
--- a/packages/react-ai/src/components/AIConversation/context/MessagesContext.tsx
+++ b/packages/react-ai/src/components/AIConversation/context/MessagesContext.tsx
@@ -17,7 +17,7 @@ export const MessagesProvider = ({
 }: {
   children?: React.ReactNode;
   messages: ConversationMessage[];
-}): JSX.Element => {
+}): React.JSX.Element => {
   return (
     <MessagesContext.Provider value={messages}>
       {children}
diff --git a/packages/react-ai/src/components/AIConversation/context/ResponseComponentsContext.tsx b/packages/react-ai/src/components/AIConversation/context/ResponseComponentsContext.tsx
index fc71250db77..985b5737627 100644
--- a/packages/react-ai/src/components/AIConversation/context/ResponseComponentsContext.tsx
+++ b/packages/react-ai/src/components/AIConversation/context/ResponseComponentsContext.tsx
@@ -27,7 +27,7 @@ export const ResponseComponentsProvider = ({
 }: {
   children?: React.ReactNode;
   responseComponents?: ResponseComponents;
-}): JSX.Element => {
+}): React.JSX.Element => {
   const _responseComponents = React.useMemo(
     () => prependResponseComponents(responseComponents),
     [responseComponents]
diff --git a/packages/react-ai/src/components/AIConversation/context/SendMessageContext.tsx b/packages/react-ai/src/components/AIConversation/context/SendMessageContext.tsx
index 2171ca27944..070953370c4 100644
--- a/packages/react-ai/src/components/AIConversation/context/SendMessageContext.tsx
+++ b/packages/react-ai/src/components/AIConversation/context/SendMessageContext.tsx
@@ -11,7 +11,7 @@ export const SendMessageContextProvider = ({
 }: {
   children?: React.ReactNode;
   handleSendMessage: SendMessage;
-}): JSX.Element => {
+}): React.JSX.Element => {
   return (
     <SendMessageContext.Provider value={handleSendMessage}>
       {children}
diff --git a/packages/react-ai/src/components/AIConversation/context/SuggestedPromptsContext.tsx b/packages/react-ai/src/components/AIConversation/context/SuggestedPromptsContext.tsx
index 1e3541c386d..b38307c0e70 100644
--- a/packages/react-ai/src/components/AIConversation/context/SuggestedPromptsContext.tsx
+++ b/packages/react-ai/src/components/AIConversation/context/SuggestedPromptsContext.tsx
@@ -12,7 +12,7 @@ export const SuggestedPromptProvider = ({
 }: {
   children?: React.ReactNode;
   suggestedPrompts?: SuggestedPrompt[];
-}): JSX.Element => {
+}): React.JSX.Element => {
   return (
     <SuggestedPromptsContext.Provider value={suggestedPrompts}>
       {children}
diff --git a/packages/react-ai/src/components/AIConversation/context/WelcomeMessageContext.tsx b/packages/react-ai/src/components/AIConversation/context/WelcomeMessageContext.tsx
index fe116d97bcf..65d33c22adb 100644
--- a/packages/react-ai/src/components/AIConversation/context/WelcomeMessageContext.tsx
+++ b/packages/react-ai/src/components/AIConversation/context/WelcomeMessageContext.tsx
@@ -11,7 +11,7 @@ export const WelcomeMessageProvider = ({
 }: {
   children?: React.ReactNode;
   welcomeMessage?: React.ReactNode;
-}): JSX.Element => {
+}): React.JSX.Element => {
   return (
     <WelcomeMessageContext.Provider value={welcomeMessage}>
       {children}
diff --git a/packages/react-ai/src/components/AIConversation/createAIConversation.tsx b/packages/react-ai/src/components/AIConversation/createAIConversation.tsx
index e6541c38db5..aaf0446159e 100644
--- a/packages/react-ai/src/components/AIConversation/createAIConversation.tsx
+++ b/packages/react-ai/src/components/AIConversation/createAIConversation.tsx
@@ -24,7 +24,7 @@ export function createAIConversation(input: AIConversationInput = {}): {
     FallbackResponseComponent,
   } = input;
 
-  function AIConversation(props: AIConversationProps): JSX.Element {
+  function AIConversation(props: AIConversationProps): React.JSX.Element {
     const { messages, avatars, handleSendMessage, isLoading } = props;
     const providerProps = {
       actions,
diff --git a/packages/react-ai/src/components/AIConversation/types.ts b/packages/react-ai/src/components/AIConversation/types.ts
index 69aef506b39..dfebc8c657b 100644
--- a/packages/react-ai/src/components/AIConversation/types.ts
+++ b/packages/react-ai/src/components/AIConversation/types.ts
@@ -53,10 +53,10 @@ export interface AIConversationProps {
 export interface AIConversation<
   PropsType extends AIConversationProps = AIConversationProps,
 > {
-  (props: PropsType): JSX.Element;
-  DefaultMessage: () => JSX.Element | undefined;
-  Messages: () => JSX.Element;
-  Form: () => JSX.Element;
+  (props: PropsType): React.JSX.Element;
+  DefaultMessage: () => React.JSX.Element | undefined;
+  Messages: () => React.JSX.Element;
+  Form: () => React.JSX.Element;
   Provider: (props: AIConversationProviderProps) => React.JSX.Element;
 }
 
diff --git a/packages/react-ai/src/components/AIConversation/views/Controls/AttachmentListControl.tsx b/packages/react-ai/src/components/AIConversation/views/Controls/AttachmentListControl.tsx
index 5b01fd88839..d8bcdcefe58 100644
--- a/packages/react-ai/src/components/AIConversation/views/Controls/AttachmentListControl.tsx
+++ b/packages/react-ai/src/components/AIConversation/views/Controls/AttachmentListControl.tsx
@@ -45,7 +45,7 @@ RemoveButtonControl.Button = RemoveButton;
 interface RemoveButtonControl<
   T extends Partial<AIConversationElements> = AIConversationElements,
 > {
-  (props: { onRemove: () => void }): JSX.Element;
+  (props: { onRemove: () => void }): React.JSX.Element;
   Button: T['Button'];
   Icon: T['Icon'];
 }
@@ -91,7 +91,7 @@ TextControl.Separator = Separator;
 interface TextControl<
   T extends Partial<AIConversationElements> = AIConversationElements,
 > {
-  (props: { fileName: string; fileSize: number }): JSX.Element;
+  (props: { fileName: string; fileSize: number }): React.JSX.Element;
   Container: T['View'];
   FileName: T['Text'];
   FileSize: T['Text'];
@@ -120,7 +120,7 @@ AttachmentControl.Text = TextControl;
 interface AttachmentControl<
   T extends Partial<AIConversationElements> = AIConversationElements,
 > {
-  (props: { image: File; onRemove: () => void }): JSX.Element;
+  (props: { image: File; onRemove: () => void }): React.JSX.Element;
   Container: T['ListItem'];
   ImageIcon: T['Icon'];
   RemoveButton: RemoveButtonControl<T>;
@@ -158,7 +158,7 @@ AttachmentListControl.Item = AttachmentControl;
 export interface AttachmentListControl<
   T extends Partial<AIConversationElements> = AIConversationElements,
 > {
-  (): JSX.Element;
+  (): React.JSX.Element;
   List: T['UnorderedList'];
   Item: AttachmentControl<T>;
 }
diff --git a/packages/react-ai/src/components/AIConversation/views/Controls/DefaultMessageControl.tsx b/packages/react-ai/src/components/AIConversation/views/Controls/DefaultMessageControl.tsx
index be2e769fbf9..39ba4cfde01 100644
--- a/packages/react-ai/src/components/AIConversation/views/Controls/DefaultMessageControl.tsx
+++ b/packages/react-ai/src/components/AIConversation/views/Controls/DefaultMessageControl.tsx
@@ -3,7 +3,7 @@ import { MessagesContext } from '../../context';
 import { PromptControl } from './PromptControl';
 import { WelcomeMessageContext } from '../../context/WelcomeMessageContext';
 
-export const DefaultMessageControl = (): JSX.Element | undefined => {
+export const DefaultMessageControl = (): React.JSX.Element | undefined => {
   const messages = React.useContext(MessagesContext);
   const welcomeMessage = React.useContext(WelcomeMessageContext);
 
diff --git a/packages/react-ai/src/components/AIConversation/views/Controls/MessagesControl.tsx b/packages/react-ai/src/components/AIConversation/views/Controls/MessagesControl.tsx
index feb2ee53d23..372ae305300 100644
--- a/packages/react-ai/src/components/AIConversation/views/Controls/MessagesControl.tsx
+++ b/packages/react-ai/src/components/AIConversation/views/Controls/MessagesControl.tsx
@@ -116,7 +116,7 @@ export const MessageControl: MessageControl = ({ message }) => {
   );
 };
 interface MessageControl {
-  (props: { message: ConversationMessage }): JSX.Element;
+  (props: { message: ConversationMessage }): React.JSX.Element;
 }
 
 const Timestamp = withBaseElementProps(Text, {
@@ -232,7 +232,9 @@ export const MessagesControl: MessagesControl = () => {
               tabIndex={focusedItemIndex === index ? 0 : -1}
               onFocus={() => handleFocus(index)}
               onKeyDown={(event) => onKeyDown(index, event)}
-              ref={(el) => (messagesRef.current[index] = el)}
+              ref={(el) => {
+                messagesRef.current[index] = el;
+              }}
             >
               <HeaderContainer>
                 <AvatarControl />
@@ -263,7 +265,7 @@ MessagesControl.Layout = Layout;
 MessagesControl.Message = MessageControl;
 
 export interface MessagesControl {
-  (): JSX.Element;
+  (): React.JSX.Element;
   ActionsBar: ActionsBarControl;
   Avatar: AvatarControl;
   Container: AIConversationElements['View'];
diff --git a/packages/react-ai/src/components/AIConversation/views/default/Attachments.tsx b/packages/react-ai/src/components/AIConversation/views/default/Attachments.tsx
index 764702cbd7e..9c040a471fe 100644
--- a/packages/react-ai/src/components/AIConversation/views/default/Attachments.tsx
+++ b/packages/react-ai/src/components/AIConversation/views/default/Attachments.tsx
@@ -48,7 +48,7 @@ export const Attachments = ({
 }: {
   files?: File[];
   setInput: ConversationInputContextProps['setInput'];
-}): JSX.Element | null => {
+}): React.JSX.Element | null => {
   if (!files || files.length < 1) {
     return null;
   }
diff --git a/packages/react-ai/src/hooks/useAIConversation.tsx b/packages/react-ai/src/hooks/useAIConversation.tsx
index f3ece989f09..c150f491dd6 100644
--- a/packages/react-ai/src/hooks/useAIConversation.tsx
+++ b/packages/react-ai/src/hooks/useAIConversation.tsx
@@ -69,7 +69,9 @@ export function createUseAIConversation<
 
     // We need to keep track of the stream events as the come in
     // for an assistant message, but don't need to keep them in state
-    const contentBlocksRef = React.useRef<ConversationStreamEvent[][]>();
+    const contentBlocksRef = React.useRef<
+      ConversationStreamEvent[][] | undefined
+    >(undefined);
     // Using this hook without an existing conversation id means
     // it will create a new conversation when it is executed
     // we don't want to create 2 conversations
diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json
index 1b766cb153c..a75842dda8f 100644
--- a/packages/react-auth/package.json
+++ b/packages/react-auth/package.json
@@ -50,8 +50,8 @@
   },
   "peerDependencies": {
     "aws-amplify": "^6.9.0",
-    "react": "^16.14.0 || ^17.0 || ^18.0",
-    "react-dom": "^16.14.0 || ^17.0 || ^18.0"
+    "react": "^16.14 || ^17 || ^18 || ^19",
+    "react-dom": "^16.14 || ^17 || ^18 || ^19"
   },
   "sideEffects": [
     "dist/**/*.css"
diff --git a/packages/react-core-auth/package.json b/packages/react-core-auth/package.json
index 53d5ffae5d2..d0dfd8c24a1 100644
--- a/packages/react-core-auth/package.json
+++ b/packages/react-core-auth/package.json
@@ -43,7 +43,7 @@
   "peerDependencies": {
     "@aws-amplify/core": "*",
     "aws-amplify": "^6.9.0",
-    "react": "^16.14.0 || ^17.0 || ^18.0"
+    "react": "^16.14 || ^17 || ^18 || ^19"
   },
   "sideEffects": false
 }
diff --git a/packages/react-core-auth/src/components/Authenticator/context/ComponentRoute/ComponentRouteContext.tsx b/packages/react-core-auth/src/components/Authenticator/context/ComponentRoute/ComponentRouteContext.tsx
index 6286555c0a6..29b3e7d19bf 100644
--- a/packages/react-core-auth/src/components/Authenticator/context/ComponentRoute/ComponentRouteContext.tsx
+++ b/packages/react-core-auth/src/components/Authenticator/context/ComponentRoute/ComponentRouteContext.tsx
@@ -35,7 +35,7 @@ export const routeSelector: UseMachineSelector = ({ route }) => [route];
 function ComponentRouteProvider({
   children,
   hideSignUp = false,
-}: ComponentRouteProviderProps): JSX.Element {
+}: ComponentRouteProviderProps): React.JSX.Element {
   const { route: _route, setRoute: setRouteBase } = useMachine(routeSelector);
 
   const route = isRoute(_route, ...COMPONENT_ROUTE) ? _route : undefined;
diff --git a/packages/react-core-auth/src/components/Authenticator/context/Machine/MachineContext.tsx b/packages/react-core-auth/src/components/Authenticator/context/Machine/MachineContext.tsx
index 8e1490a867d..a3a56f281a0 100644
--- a/packages/react-core-auth/src/components/Authenticator/context/Machine/MachineContext.tsx
+++ b/packages/react-core-auth/src/components/Authenticator/context/Machine/MachineContext.tsx
@@ -47,7 +47,7 @@ export function MachineProvider({
   children,
   initialRoute: initialState,
   ...data
-}: MachineProviderProps): JSX.Element {
+}: MachineProviderProps): React.JSX.Element {
   const service = useInterpret(() =>
     createAuthenticatorMachine({
       ...data,
diff --git a/packages/react-core-auth/src/components/Authenticator/context/Primitives/types.ts b/packages/react-core-auth/src/components/Authenticator/context/Primitives/types.ts
index 04e63e2a163..2fe03a30488 100644
--- a/packages/react-core-auth/src/components/Authenticator/context/Primitives/types.ts
+++ b/packages/react-core-auth/src/components/Authenticator/context/Primitives/types.ts
@@ -144,7 +144,7 @@ interface ActionsPrimitives<P> {
   SecondaryButton: React.ComponentType<SecondaryButtonPrimitiveProps<P>>;
 }
 
-export type ActionsControlType<T = unknown> = (() => JSX.Element) &
+export type ActionsControlType<T = unknown> = (() => React.JSX.Element) &
   ActionsPrimitives<T>;
 
 interface LinksPrimitives<P> {
@@ -152,7 +152,7 @@ interface LinksPrimitives<P> {
   ButtonGroup: React.ComponentType<ButtonGroupPrimitiveProps>;
 }
 
-export type LinksControlType<T = unknown> = (() => JSX.Element) &
+export type LinksControlType<T = unknown> = (() => React.JSX.Element) &
   LinksPrimitives<T> &
   NonPrimitiveControls['Links'];
 
@@ -162,9 +162,10 @@ interface FederatedProvidersPrimitives<P> {
   Divider: React.ComponentType<ViewPrimitiveProps>;
 }
 
-export type FederatedProvidersControlType<T = unknown> = (() => JSX.Element) &
-  FederatedProvidersPrimitives<T> &
-  NonPrimitiveControls['FederatedProviders'];
+export type FederatedProvidersControlType<T = unknown> =
+  (() => React.JSX.Element) &
+    FederatedProvidersPrimitives<T> &
+    NonPrimitiveControls['FederatedProviders'];
 
 export interface SetupTotpPrimitives<P> {
   Container: React.ComponentType<ViewPrimitiveProps>;
@@ -176,15 +177,15 @@ export interface SetupTotpPrimitives<P> {
   Loader: React.ComponentType;
 }
 
-export type SetupTotpControlType<T = unknown> = (() => JSX.Element) &
+export type SetupTotpControlType<T = unknown> = (() => React.JSX.Element) &
   SetupTotpPrimitives<T>;
 
 interface VerifyContactMethodPrimitives<T = unknown> {
   RadioGroup: React.ComponentType<RadioGroupPrimitiveProps<T>>;
 }
 
-export type VerifyContactMethodControlType<T = unknown> = (() => JSX.Element) &
-  VerifyContactMethodPrimitives<T>;
+export type VerifyContactMethodControlType<T = unknown> =
+  (() => React.JSX.Element) & VerifyContactMethodPrimitives<T>;
 
 /**
  * Compound Control values contain primitives
diff --git a/packages/react-core-auth/src/components/Authenticator/createProvider/types.ts b/packages/react-core-auth/src/components/Authenticator/createProvider/types.ts
index 7ebbfed56dc..36c58eb1c2f 100644
--- a/packages/react-core-auth/src/components/Authenticator/createProvider/types.ts
+++ b/packages/react-core-auth/src/components/Authenticator/createProvider/types.ts
@@ -27,4 +27,4 @@ export interface ProviderProps<T extends PrimitivesDefault, K> {
 
 export type ProviderComponent<T extends PrimitivesDefault, K> = (
   params: ProviderProps<T, K>
-) => JSX.Element;
+) => React.JSX.Element;
diff --git a/packages/react-core-notifications/package.json b/packages/react-core-notifications/package.json
index e6ad2d8dd16..c182a8d9041 100644
--- a/packages/react-core-notifications/package.json
+++ b/packages/react-core-notifications/package.json
@@ -40,7 +40,7 @@
   },
   "peerDependencies": {
     "aws-amplify": "^6.9.0",
-    "react": "^16.14.0 || ^17.0 || ^18.0"
+    "react": "^16.14 || ^17 || ^18 || ^19"
   },
   "sideEffects": false
 }
diff --git a/packages/react-core/package.json b/packages/react-core/package.json
index c855d18f240..c3976a49fec 100644
--- a/packages/react-core/package.json
+++ b/packages/react-core/package.json
@@ -43,12 +43,12 @@
     "@aws-amplify/ui": "6.7.2",
     "@xstate/react": "^3.2.2",
     "lodash": "4.17.21",
-    "react-hook-form": "^7.43.5",
+    "react-hook-form": "^7.53.2",
     "xstate": "^4.33.6"
   },
   "peerDependencies": {
     "aws-amplify": "^6.9.0",
-    "react": "^16.14.0 || ^17.0 || ^18.0"
+    "react": "^16.14 || ^17 || ^18 || ^19"
   },
   "sideEffects": false
 }
diff --git a/packages/react-core/src/Authenticator/context/AuthenticatorProvider.tsx b/packages/react-core/src/Authenticator/context/AuthenticatorProvider.tsx
index 011bc9979c3..4ea300de9bf 100644
--- a/packages/react-core/src/Authenticator/context/AuthenticatorProvider.tsx
+++ b/packages/react-core/src/Authenticator/context/AuthenticatorProvider.tsx
@@ -24,7 +24,7 @@ export default function AuthenticatorProvider({
   children,
 }: {
   children: ReactNode;
-}): JSX.Element {
+}): React.JSX.Element {
   // `authStatus` is exposed by `useAuthenticator` but should not be derived directly from the
   // state machine as the machine only updates on `Authenticator` initiated events, which
   // leads to scenarios where the state machine `authStatus` gets "stuck". For exmample,
diff --git a/packages/react-core/src/Authenticator/context/__tests__/AuthenticatorProvider.test.tsx b/packages/react-core/src/Authenticator/context/__tests__/AuthenticatorProvider.test.tsx
index 1736a916100..a4d8fdf650d 100644
--- a/packages/react-core/src/Authenticator/context/__tests__/AuthenticatorProvider.test.tsx
+++ b/packages/react-core/src/Authenticator/context/__tests__/AuthenticatorProvider.test.tsx
@@ -16,7 +16,7 @@ const getCurrentUserSpy = jest
   .spyOn(Auth, 'getCurrentUser')
   .mockResolvedValue({ userId: '1234', username: 'test' });
 
-function TestComponent(): JSX.Element | null {
+function TestComponent(): React.JSX.Element | null {
   const { authStatus } = useAuthenticator();
   return <>{authStatus}</>;
 }
diff --git a/packages/react-core/src/components/FormCore/__tests__/__snapshots__/useField.spec.ts.snap b/packages/react-core/src/components/FormCore/__tests__/__snapshots__/useField.spec.ts.snap
index ebd5557b34f..092aa722ee5 100644
--- a/packages/react-core/src/components/FormCore/__tests__/__snapshots__/useField.spec.ts.snap
+++ b/packages/react-core/src/components/FormCore/__tests__/__snapshots__/useField.spec.ts.snap
@@ -7,6 +7,7 @@ exports[`useField returns the expected values in the happy path 1`] = `
   "invalid": false,
   "isDirty": false,
   "isTouched": false,
+  "isValidating": false,
   "name": "test-field",
   "onBlur": [Function],
   "onChange": [Function],
diff --git a/packages/react-core/src/components/FormCore/__tests__/__snapshots__/useForm.spec.ts.snap b/packages/react-core/src/components/FormCore/__tests__/__snapshots__/useForm.spec.ts.snap
index 250bcc448ba..1cc48bf0bf3 100644
--- a/packages/react-core/src/components/FormCore/__tests__/__snapshots__/useForm.spec.ts.snap
+++ b/packages/react-core/src/components/FormCore/__tests__/__snapshots__/useForm.spec.ts.snap
@@ -7,6 +7,7 @@ exports[`useForm returns the expected values from getFieldState in the happy pat
   "invalid": false,
   "isDirty": false,
   "isTouched": false,
+  "isValidating": false,
 }
 `;
 
diff --git a/packages/react-core/src/components/FormCore/__tests__/useForm.spec.ts b/packages/react-core/src/components/FormCore/__tests__/useForm.spec.ts
index 45542354156..01052370714 100644
--- a/packages/react-core/src/components/FormCore/__tests__/useForm.spec.ts
+++ b/packages/react-core/src/components/FormCore/__tests__/useForm.spec.ts
@@ -1,5 +1,5 @@
 import { renderHook } from '@testing-library/react-hooks';
-import * as ReactHookForm from 'react-hook-form';
+import ReactHookForm from 'react-hook-form';
 
 import { useForm } from '..';
 import FormProvider from '../FormProvider';
@@ -9,6 +9,7 @@ import { DEFAULT_ERROR_MESSAGE } from '../useForm';
 // mock 'react-hook-form` context
 const mockFormContext: ReactHookForm.UseFormReturn = {
   formState: {
+    disabled: false,
     isDirty: false,
     isLoading: false,
     isSubmitSuccessful: false,
@@ -20,6 +21,7 @@ const mockFormContext: ReactHookForm.UseFormReturn = {
     dirtyFields: [],
     touchedFields: [],
     errors: {},
+    validatingFields: {},
   },
   getFieldState: jest.fn(),
   getValues: jest.fn(),
diff --git a/packages/react-core/src/components/FormCore/withFormProvider.tsx b/packages/react-core/src/components/FormCore/withFormProvider.tsx
index 71f159d957d..dd814261bcd 100644
--- a/packages/react-core/src/components/FormCore/withFormProvider.tsx
+++ b/packages/react-core/src/components/FormCore/withFormProvider.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { AnyComponent, MergeProps } from '../../types';
+import { AnyComponent } from '../../types';
 
 import FormProvider from './FormProvider';
 import { FormHandle, FormProviderProps } from './types';
@@ -12,7 +12,7 @@ import { FormHandle, FormProviderProps } from './types';
 export default function withFormProvider<
   ChildComp extends AnyComponent,
   ChildProps extends React.ComponentPropsWithRef<ChildComp>,
-  Props extends MergeProps<FormProviderProps, ChildProps>
+  Props extends ChildProps & FormProviderProps,
 >(
   Child: ChildComp
 ): React.ForwardRefExoticComponent<
@@ -23,7 +23,11 @@ export default function withFormProvider<
     ref
   ) {
     return (
-      <FormProvider defaultValues={defaultValues} mode={mode} ref={ref}>
+      <FormProvider
+        defaultValues={defaultValues as Props['defaultValues']}
+        mode={mode as Props['mode']}
+        ref={ref}
+      >
         <Child {...(props as ChildProps)} />
       </FormProvider>
     );
diff --git a/packages/react-core/src/components/RenderNothing/RenderNothing.tsx b/packages/react-core/src/components/RenderNothing/RenderNothing.tsx
index b8b35a490c8..bddff9c0092 100644
--- a/packages/react-core/src/components/RenderNothing/RenderNothing.tsx
+++ b/packages/react-core/src/components/RenderNothing/RenderNothing.tsx
@@ -1,6 +1,8 @@
 /**
  * Utility component for rendering nothing.
  */
-export default function RenderNothing<Props>(_: Props): JSX.Element | null {
+export default function RenderNothing<Props>(
+  _: Props
+): React.JSX.Element | null {
   return null;
 }
diff --git a/packages/react-core/src/hooks/usePreviousValue.ts b/packages/react-core/src/hooks/usePreviousValue.ts
index 7824e2fdd6c..2623db6040f 100644
--- a/packages/react-core/src/hooks/usePreviousValue.ts
+++ b/packages/react-core/src/hooks/usePreviousValue.ts
@@ -3,7 +3,7 @@ import { useEffect, useRef } from 'react';
 export default function usePreviousValue<Value>(
   value: Value
 ): Value | undefined {
-  const previous = useRef<Value>();
+  const previous = useRef<Value | undefined>(undefined);
 
   // update ref post render
   useEffect(() => {
diff --git a/packages/react-geo/package.json b/packages/react-geo/package.json
index 0fb8514fd1c..b8f70fb8b54 100644
--- a/packages/react-geo/package.json
+++ b/packages/react-geo/package.json
@@ -49,8 +49,8 @@
   "peerDependencies": {
     "@aws-amplify/geo": "^3.0.59",
     "aws-amplify": "^6.9.0",
-    "react": "^16.14.0 || ^17.0 || ^18.0",
-    "react-dom": "^16.14.0 || ^17.0 || ^18.0"
+    "react": "^16.14 || ^17 || ^18 || ^19",
+    "react-dom": "^16.14 || ^17 || ^18 || ^19"
   },
   "devDependencies": {
     "@aws-amplify/geo": "^3.0.59",
diff --git a/packages/react-geo/src/components/LocationSearch/LocationSearch.tsx b/packages/react-geo/src/components/LocationSearch/LocationSearch.tsx
index 6eff1540666..fae42c6b49e 100644
--- a/packages/react-geo/src/components/LocationSearch/LocationSearch.tsx
+++ b/packages/react-geo/src/components/LocationSearch/LocationSearch.tsx
@@ -74,7 +74,9 @@ const LocationSearchStandalone = (props: LocationSearchProps) => {
  *   return <LocationSearch />;
  * }
  */
-export const LocationSearch = (props: LocationSearchProps): JSX.Element => {
+export const LocationSearch = (
+  props: LocationSearchProps
+): React.JSX.Element => {
   const { current: map } = useMap();
 
   useSetUserAgent({
diff --git a/packages/react-liveness/package.json b/packages/react-liveness/package.json
index 34d9d9c3014..fb781a50bd7 100644
--- a/packages/react-liveness/package.json
+++ b/packages/react-liveness/package.json
@@ -44,8 +44,8 @@
   "peerDependencies": {
     "@aws-amplify/core": "*",
     "aws-amplify": "^6.9.0",
-    "react": "^16.14.0 || ^17.0 || ^18.0",
-    "react-dom": "^16.14.0 || ^17.0 || ^18.0"
+    "react": "^16.14 || ^17 || ^18 || ^19",
+    "react-dom": "^16.14 || ^17 || ^18 || ^19"
   },
   "dependencies": {
     "@aws-amplify/ui": "6.7.2",
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/FaceLivenessDetector.tsx b/packages/react-liveness/src/components/FaceLivenessDetector/FaceLivenessDetector.tsx
index 397747fe2b9..5665341706a 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/FaceLivenessDetector.tsx
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/FaceLivenessDetector.tsx
@@ -21,7 +21,7 @@ const credentialProvider = async () => {
 
 export default function FaceLivenessDetector(
   props: FaceLivenessDetectorProps
-): JSX.Element {
+): React.JSX.Element {
   const { config, ...rest } = props;
   return (
     <FaceLivenessDetectorCore
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/FaceLivenessDetectorCore.tsx b/packages/react-liveness/src/components/FaceLivenessDetector/FaceLivenessDetectorCore.tsx
index 200dbf7ec20..6c701bf8fce 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/FaceLivenessDetectorCore.tsx
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/FaceLivenessDetectorCore.tsx
@@ -22,7 +22,7 @@ export interface FaceLivenessDetectorCoreProps
 
 export default function FaceLivenessDetectorCore(
   props: FaceLivenessDetectorCoreProps
-): JSX.Element {
+): React.JSX.Element {
   const { components, config, displayText } = props;
   const currElementRef = React.useRef<HTMLDivElement>(null);
   const {
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.tsx b/packages/react-liveness/src/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.tsx
index d3be78737bd..d9be3d3f811 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.tsx
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.tsx
@@ -95,7 +95,7 @@ const MemoizedMatchIndicator = React.memo(MatchIndicator);
 
 export const LivenessCameraModule = (
   props: LivenessCameraModuleProps
-): JSX.Element => {
+): React.JSX.Element => {
   const {
     isMobileScreen,
     isRecordingStopped,
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/__mocks__/utils.tsx b/packages/react-liveness/src/components/FaceLivenessDetector/__mocks__/utils.tsx
index 2fc51349784..9dc5fc4fca1 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/__mocks__/utils.tsx
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/__mocks__/utils.tsx
@@ -11,7 +11,7 @@ type RenderWithLivenessLivenessProviderResult = RenderResult & {
 };
 
 export function renderWithLivenessProvider(
-  ui: JSX.Element
+  ui: React.JSX.Element
 ): RenderWithLivenessLivenessProviderResult {
   const mockComponentProps: FaceLivenessDetectorProps = {
     region: 'us-east-1',
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/providers/FaceLivenessDetectorProvider.tsx b/packages/react-liveness/src/components/FaceLivenessDetector/providers/FaceLivenessDetectorProvider.tsx
index 8a97d8a3c6b..dba293d6c13 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/providers/FaceLivenessDetectorProvider.tsx
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/providers/FaceLivenessDetectorProvider.tsx
@@ -16,7 +16,7 @@ export interface FaceLivenessDetectorProviderProps
 export function FaceLivenessDetectorProvider({
   children,
   ...props
-}: FaceLivenessDetectorProviderProps): JSX.Element {
+}: FaceLivenessDetectorProviderProps): React.JSX.Element {
   return (
     <FaceLivenessDetectorContext.Provider value={props}>
       {children}
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/shared/DefaultStartScreenComponents.tsx b/packages/react-liveness/src/components/FaceLivenessDetector/shared/DefaultStartScreenComponents.tsx
index 55c91b1e12e..554bc13d73e 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/shared/DefaultStartScreenComponents.tsx
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/shared/DefaultStartScreenComponents.tsx
@@ -26,7 +26,7 @@ export const DefaultPhotosensitiveWarning = ({
   headingText,
   infoText,
   labelText,
-}: DefaultPhotosensitiveWarningProps): JSX.Element => {
+}: DefaultPhotosensitiveWarningProps): React.JSX.Element => {
   return (
     <Flex
       className={`${ComponentClassName.Alert} ${LivenessClassNames.StartScreenWarning}`}
@@ -49,7 +49,7 @@ interface DefaultRecordingIconProps {
 
 export const DefaultRecordingIcon = ({
   recordingIndicatorText,
-}: DefaultRecordingIconProps): JSX.Element => {
+}: DefaultRecordingIconProps): React.JSX.Element => {
   return (
     <View className={LivenessClassNames.RecordingIconContainer}>
       <RecordingIcon>{recordingIndicatorText}</RecordingIcon>
@@ -63,7 +63,7 @@ interface CancelButtonProps {
 
 export const DefaultCancelButton = ({
   cancelLivenessCheckText,
-}: CancelButtonProps): JSX.Element => {
+}: CancelButtonProps): React.JSX.Element => {
   return (
     <View className={LivenessClassNames.CancelContainer}>
       <CancelButtonComponent
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/shared/FaceLivenessErrorModal.tsx b/packages/react-liveness/src/components/FaceLivenessDetector/shared/FaceLivenessErrorModal.tsx
index de87b479800..f66af53bf9b 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/shared/FaceLivenessErrorModal.tsx
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/shared/FaceLivenessErrorModal.tsx
@@ -94,7 +94,7 @@ export const renderErrorModal = ({
 }: {
   errorState: ErrorState;
   overrideErrorDisplayText?: ErrorDisplayText;
-}): JSX.Element | null => {
+}): React.JSX.Element | null => {
   const displayText: Required<ErrorDisplayText> = {
     ...defaultErrorDisplayText,
     ...overrideErrorDisplayText,
diff --git a/packages/react-liveness/tsconfig.json b/packages/react-liveness/tsconfig.json
index 5be1de00eac..9fa9a542d53 100644
--- a/packages/react-liveness/tsconfig.json
+++ b/packages/react-liveness/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "extends": "@aws-amplify/typescript-config/tsconfig.react.json",
+  "compilerOptions": { "types": ["@types/emscripten", "@types/long"] },
   "include": ["*.mjs", "*.ts", "src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["node_modules"]
 }
diff --git a/packages/react-native-auth/package.json b/packages/react-native-auth/package.json
index a42df86c76b..ca7ca1a6cb4 100644
--- a/packages/react-native-auth/package.json
+++ b/packages/react-native-auth/package.json
@@ -24,7 +24,7 @@
     "@babel/cli": "^7.23.0",
     "@babel/core": "^7.23.2",
     "@babel/preset-env": "^7.23.2",
-    "@testing-library/react-native": "^12.3.0",
+    "@testing-library/react-native": "^12.9.0",
     "metro-react-native-babel-preset": "^0.77.0"
   },
   "dependencies": {
diff --git a/packages/react-native/package.json b/packages/react-native/package.json
index 26e78049ef0..3dc7afb60bf 100644
--- a/packages/react-native/package.json
+++ b/packages/react-native/package.json
@@ -25,7 +25,7 @@
     "@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"
   },
diff --git a/packages/react-native/src/Authenticator/Authenticator.tsx b/packages/react-native/src/Authenticator/Authenticator.tsx
index 4b5a443d568..bd074852337 100644
--- a/packages/react-native/src/Authenticator/Authenticator.tsx
+++ b/packages/react-native/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.',
diff --git a/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/ConfirmResetPassword.tsx b/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/ConfirmResetPassword.tsx
index 3b4d1b2b5bb..73c6be323ca 100644
--- a/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/ConfirmResetPassword.tsx
+++ b/packages/react-native/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,
diff --git a/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/__tests__/ConfirmResetPassword.spec.tsx b/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/__tests__/ConfirmResetPassword.spec.tsx
index 3f686a74808..32e86838085 100644
--- a/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/__tests__/ConfirmResetPassword.spec.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/__tests__/ConfirmResetPassword.spec.tsx
@@ -53,7 +53,7 @@ describe('ConfirmResetPassword', () => {
     expect(getAllByRole('header')).toBeDefined();
     expect(getByText(getSubmitText())).toBeDefined();
     expect(getByText(getResendCodeText())).toBeDefined();
-    expect(getAllByRole('text')).toHaveLength(fields.length);
+    expect(getAllByRole('text')).toHaveLength(5);
   });
 
   it('renders an error message', () => {
diff --git a/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/ConfirmSignIn.tsx b/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/ConfirmSignIn.tsx
index c63a4e8b0fe..9a5e578c220 100644
--- a/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/ConfirmSignIn.tsx
+++ b/packages/react-native/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,
diff --git a/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/__tests__/ConfirmSignIn.spec.tsx b/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/__tests__/ConfirmSignIn.spec.tsx
index 393adc6845d..ead0e3dbf1e 100644
--- a/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/__tests__/ConfirmSignIn.spec.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/__tests__/ConfirmSignIn.spec.tsx
@@ -44,7 +44,7 @@ describe('ConfirmSignIn', () => {
     expect(getAllByRole('header')).toBeDefined();
     expect(getByText(getChallengeText('SMS_MFA'))).toBeDefined();
     expect(getByText(getConfirmText())).toBeDefined();
-    expect(getAllByRole('text')).toHaveLength(fields.length);
+    expect(getAllByRole('text')).toHaveLength(3);
   });
 
   it('renders an error message', () => {
diff --git a/packages/react-native/src/Authenticator/Defaults/ConfirmSignUp/ConfirmSignUp.tsx b/packages/react-native/src/Authenticator/Defaults/ConfirmSignUp/ConfirmSignUp.tsx
index 150a8adbf2d..f18d36c3514 100644
--- a/packages/react-native/src/Authenticator/Defaults/ConfirmSignUp/ConfirmSignUp.tsx
+++ b/packages/react-native/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,
diff --git a/packages/react-native/src/Authenticator/Defaults/ConfirmVerifyUser/ConfirmVerifyUser.tsx b/packages/react-native/src/Authenticator/Defaults/ConfirmVerifyUser/ConfirmVerifyUser.tsx
index a3b100d7d96..e3cc30693a0 100644
--- a/packages/react-native/src/Authenticator/Defaults/ConfirmVerifyUser/ConfirmVerifyUser.tsx
+++ b/packages/react-native/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,
diff --git a/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/ForceNewPassword.tsx b/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/ForceNewPassword.tsx
index 4943d3137b6..d90e692a776 100644
--- a/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/ForceNewPassword.tsx
+++ b/packages/react-native/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,
diff --git a/packages/react-native/src/Authenticator/Defaults/ForgotPassword/ForgotPassword.tsx b/packages/react-native/src/Authenticator/Defaults/ForgotPassword/ForgotPassword.tsx
index 77dd70ea4d6..c734a21ee64 100644
--- a/packages/react-native/src/Authenticator/Defaults/ForgotPassword/ForgotPassword.tsx
+++ b/packages/react-native/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,
diff --git a/packages/react-native/src/Authenticator/Defaults/ForgotPassword/__tests__/ForgotPassword.spec.tsx b/packages/react-native/src/Authenticator/Defaults/ForgotPassword/__tests__/ForgotPassword.spec.tsx
index e1a58c75888..316d827ce7e 100644
--- a/packages/react-native/src/Authenticator/Defaults/ForgotPassword/__tests__/ForgotPassword.spec.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/ForgotPassword/__tests__/ForgotPassword.spec.tsx
@@ -44,7 +44,7 @@ describe('ForgotPassword', () => {
     expect(getAllByRole('header')).toBeDefined();
     expect(getByText(getResetYourPasswordText())).toBeDefined();
     expect(getByText(getSendCodeText())).toBeDefined();
-    expect(getAllByRole('text')).toHaveLength(fields.length);
+    expect(getAllByRole('text')).toHaveLength(3);
   });
 
   it('renders an error message', () => {
diff --git a/packages/react-native/src/Authenticator/Defaults/SetupTotp/SetupTotp.tsx b/packages/react-native/src/Authenticator/Defaults/SetupTotp/SetupTotp.tsx
index 4712876dacf..ee27c1a0abd 100644
--- a/packages/react-native/src/Authenticator/Defaults/SetupTotp/SetupTotp.tsx
+++ b/packages/react-native/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,
diff --git a/packages/react-native/src/Authenticator/Defaults/SignIn/SignIn.tsx b/packages/react-native/src/Authenticator/Defaults/SignIn/SignIn.tsx
index 4a22619e651..08cf3a3d73b 100644
--- a/packages/react-native/src/Authenticator/Defaults/SignIn/SignIn.tsx
+++ b/packages/react-native/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,
diff --git a/packages/react-native/src/Authenticator/Defaults/SignIn/__tests__/SignIn.spec.tsx b/packages/react-native/src/Authenticator/Defaults/SignIn/__tests__/SignIn.spec.tsx
index e370099b6e6..e4685bedb1e 100644
--- a/packages/react-native/src/Authenticator/Defaults/SignIn/__tests__/SignIn.spec.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/SignIn/__tests__/SignIn.spec.tsx
@@ -49,7 +49,7 @@ describe('SignIn', () => {
     const { toJSON, getAllByRole, getByText } = render(<SignIn {...props} />);
     expect(toJSON()).toMatchSnapshot();
 
-    expect(getAllByRole('text')).toHaveLength(fields.length);
+    expect(getAllByRole('text')).toHaveLength(5);
     expect(getByText(getSignInText())).toBeDefined();
     expect(getByText(getForgotPasswordText(true))).toBeDefined();
   });
diff --git a/packages/react-native/src/Authenticator/Defaults/SignUp/SignUp.tsx b/packages/react-native/src/Authenticator/Defaults/SignUp/SignUp.tsx
index b94e01de114..631c63549f5 100644
--- a/packages/react-native/src/Authenticator/Defaults/SignUp/SignUp.tsx
+++ b/packages/react-native/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,
diff --git a/packages/react-native/src/Authenticator/Defaults/SignUp/__tests__/SignUp.spec.tsx b/packages/react-native/src/Authenticator/Defaults/SignUp/__tests__/SignUp.spec.tsx
index f7ad231d87c..08dd5cd7aaa 100644
--- a/packages/react-native/src/Authenticator/Defaults/SignUp/__tests__/SignUp.spec.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/SignUp/__tests__/SignUp.spec.tsx
@@ -59,7 +59,7 @@ describe('SignUp', () => {
     expect(toJSON()).toMatchSnapshot();
 
     expect(queryByText(getCreatingAccountText())).toBe(null);
-    expect(getAllByRole('text')).toHaveLength(fields.length);
+    expect(getAllByRole('text')).toHaveLength(6);
   });
 
   it('renders as expected with errors', () => {
diff --git a/packages/react-native/src/Authenticator/Defaults/VerifyUser/VerifyUser.tsx b/packages/react-native/src/Authenticator/Defaults/VerifyUser/VerifyUser.tsx
index 0047d5f85b9..9a6cb18afbe 100644
--- a/packages/react-native/src/Authenticator/Defaults/VerifyUser/VerifyUser.tsx
+++ b/packages/react-native/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,
diff --git a/packages/react-native/src/Authenticator/common/DefaultContainer/DefaultContainer.tsx b/packages/react-native/src/Authenticator/common/DefaultContainer/DefaultContainer.tsx
index e826b25c024..01f4fc7fa52 100644
--- a/packages/react-native/src/Authenticator/common/DefaultContainer/DefaultContainer.tsx
+++ b/packages/react-native/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();
 
diff --git a/packages/react-native/src/Authenticator/common/DefaultContainer/InnerContainer.tsx b/packages/react-native/src/Authenticator/common/DefaultContainer/InnerContainer.tsx
index 0ca446c9942..35d42b85609 100644
--- a/packages/react-native/src/Authenticator/common/DefaultContainer/InnerContainer.tsx
+++ b/packages/react-native/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);
diff --git a/packages/react-native/src/Authenticator/common/DefaultContent/DefaultContent.tsx b/packages/react-native/src/Authenticator/common/DefaultContent/DefaultContent.tsx
index 6ed12ad08d9..dac1cd48788 100644
--- a/packages/react-native/src/Authenticator/common/DefaultContent/DefaultContent.tsx
+++ b/packages/react-native/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(
diff --git a/packages/react-native/src/Authenticator/common/DefaultFooter/DefaultFooter.tsx b/packages/react-native/src/Authenticator/common/DefaultFooter/DefaultFooter.tsx
index 057a8cef95b..fc73223bd8b 100644
--- a/packages/react-native/src/Authenticator/common/DefaultFooter/DefaultFooter.tsx
+++ b/packages/react-native/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;
 }
diff --git a/packages/react-native/src/Authenticator/common/DefaultFormFields/DefaultRadioFormFields.tsx b/packages/react-native/src/Authenticator/common/DefaultFormFields/DefaultRadioFormFields.tsx
index aaf246d1d55..c0473ef9c4a 100644
--- a/packages/react-native/src/Authenticator/common/DefaultFormFields/DefaultRadioFormFields.tsx
+++ b/packages/react-native/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 }) => {
diff --git a/packages/react-native/src/Authenticator/common/DefaultFormFields/DefaultTextFormFields.tsx b/packages/react-native/src/Authenticator/common/DefaultFormFields/DefaultTextFormFields.tsx
index 98a1638eb59..ba86fe8a828 100644
--- a/packages/react-native/src/Authenticator/common/DefaultFormFields/DefaultTextFormFields.tsx
+++ b/packages/react-native/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]) : [];
 
diff --git a/packages/react-native/src/Authenticator/common/DefaultFormFields/Field.tsx b/packages/react-native/src/Authenticator/common/DefaultFormFields/Field.tsx
index b879b6e1ffe..a60c3647da6 100644
--- a/packages/react-native/src/Authenticator/common/DefaultFormFields/Field.tsx
+++ b/packages/react-native/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
diff --git a/packages/react-native/src/Authenticator/common/DefaultFormFields/FieldErrors.tsx b/packages/react-native/src/Authenticator/common/DefaultFormFields/FieldErrors.tsx
index 206a2bd3d37..73fdd560312 100644
--- a/packages/react-native/src/Authenticator/common/DefaultFormFields/FieldErrors.tsx
+++ b/packages/react-native/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;
   }
diff --git a/packages/react-native/src/Authenticator/common/DefaultHeader/DefaultHeader.tsx b/packages/react-native/src/Authenticator/common/DefaultHeader/DefaultHeader.tsx
index fb58da67941..014781e871d 100644
--- a/packages/react-native/src/Authenticator/common/DefaultHeader/DefaultHeader.tsx
+++ b/packages/react-native/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}
diff --git a/packages/react-native/src/Authenticator/common/FederatedProviderButton/FederatedProviderButton.tsx b/packages/react-native/src/Authenticator/common/FederatedProviderButton/FederatedProviderButton.tsx
index 15ade7884e7..66f848b80fc 100644
--- a/packages/react-native/src/Authenticator/common/FederatedProviderButton/FederatedProviderButton.tsx
+++ b/packages/react-native/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,
   });
diff --git a/packages/react-native/src/Authenticator/common/FederatedProviderButtons/FederatedProviderButtons.tsx b/packages/react-native/src/Authenticator/common/FederatedProviderButtons/FederatedProviderButtons.tsx
index 3c6b9e6b66d..484b5540997 100644
--- a/packages/react-native/src/Authenticator/common/FederatedProviderButtons/FederatedProviderButtons.tsx
+++ b/packages/react-native/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);
 
diff --git a/packages/react-native/src/Authenticator/withAuthenticator.tsx b/packages/react-native/src/Authenticator/withAuthenticator.tsx
index 79331b5f5be..6d0f0b7c322 100644
--- a/packages/react-native/src/Authenticator/withAuthenticator.tsx
+++ b/packages/react-native/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>
     );
diff --git a/packages/react-native/src/InAppMessaging/components/BannerMessage/BannerMessage.tsx b/packages/react-native/src/InAppMessaging/components/BannerMessage/BannerMessage.tsx
index ca537203094..f8ee7266ca6 100644
--- a/packages/react-native/src/InAppMessaging/components/BannerMessage/BannerMessage.tsx
+++ b/packages/react-native/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) =>
diff --git a/packages/react-native/src/InAppMessaging/components/CarouselMessage/CarouselMessage.tsx b/packages/react-native/src/InAppMessaging/components/CarouselMessage/CarouselMessage.tsx
index 47ee927c033..b54289d1395 100644
--- a/packages/react-native/src/InAppMessaging/components/CarouselMessage/CarouselMessage.tsx
+++ b/packages/react-native/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;
 
diff --git a/packages/react-native/src/InAppMessaging/components/CarouselMessage/CarouselMessageItem.tsx b/packages/react-native/src/InAppMessaging/components/CarouselMessage/CarouselMessageItem.tsx
index 07d21a1accd..d47ade24290 100644
--- a/packages/react-native/src/InAppMessaging/components/CarouselMessage/CarouselMessageItem.tsx
+++ b/packages/react-native/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,
diff --git a/packages/react-native/src/InAppMessaging/components/FullScreenMessage/FullScreenMessage.tsx b/packages/react-native/src/InAppMessaging/components/FullScreenMessage/FullScreenMessage.tsx
index 9d6da819885..7c38ccb3b98 100644
--- a/packages/react-native/src/InAppMessaging/components/FullScreenMessage/FullScreenMessage.tsx
+++ b/packages/react-native/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,
diff --git a/packages/react-native/src/InAppMessaging/components/InAppMessageDisplay/InAppMessageDisplay.tsx b/packages/react-native/src/InAppMessaging/components/InAppMessageDisplay/InAppMessageDisplay.tsx
index fb5e77f6454..da669ea257f 100644
--- a/packages/react-native/src/InAppMessaging/components/InAppMessageDisplay/InAppMessageDisplay.tsx
+++ b/packages/react-native/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]
diff --git a/packages/react-native/src/InAppMessaging/components/MessageLayout/MessageLayout.tsx b/packages/react-native/src/InAppMessaging/components/MessageLayout/MessageLayout.tsx
index c2d37b7c102..72baab59c97 100644
--- a/packages/react-native/src/InAppMessaging/components/MessageLayout/MessageLayout.tsx
+++ b/packages/react-native/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,
diff --git a/packages/react-native/src/InAppMessaging/components/MessageWrapper/MessageWrapper.tsx b/packages/react-native/src/InAppMessaging/components/MessageWrapper/MessageWrapper.tsx
index b37bb4d8f61..55c3a7658e5 100644
--- a/packages/react-native/src/InAppMessaging/components/MessageWrapper/MessageWrapper.tsx
+++ b/packages/react-native/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>
diff --git a/packages/react-native/src/InAppMessaging/components/ModalMessage/ModalMessage.tsx b/packages/react-native/src/InAppMessaging/components/ModalMessage/ModalMessage.tsx
index 2267e1de9e2..3aa01096118 100644
--- a/packages/react-native/src/InAppMessaging/components/ModalMessage/ModalMessage.tsx
+++ b/packages/react-native/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,
diff --git a/packages/react-native/src/InAppMessaging/components/withInAppMessaging/withInAppMessaging.tsx b/packages/react-native/src/InAppMessaging/components/withInAppMessaging/withInAppMessaging.tsx
index 9501989fb10..693c3aedc5b 100644
--- a/packages/react-native/src/InAppMessaging/components/withInAppMessaging/withInAppMessaging.tsx
+++ b/packages/react-native/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>
     );
   };
diff --git a/packages/react-native/src/primitives/Button/Button.tsx b/packages/react-native/src/primitives/Button/Button.tsx
index b14770fa319..8dbfe6ebb22 100644
--- a/packages/react-native/src/primitives/Button/Button.tsx
+++ b/packages/react-native/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);
 
diff --git a/packages/react-native/src/primitives/Carousel/Carousel.tsx b/packages/react-native/src/primitives/Carousel/Carousel.tsx
index 9ae45204ff2..495012b7d2e 100644
--- a/packages/react-native/src/primitives/Carousel/Carousel.tsx
+++ b/packages/react-native/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,
diff --git a/packages/react-native/src/primitives/Carousel/CarouselPageIndicator.tsx b/packages/react-native/src/primitives/Carousel/CarouselPageIndicator.tsx
index 46f6fe66784..563b6353f10 100644
--- a/packages/react-native/src/primitives/Carousel/CarouselPageIndicator.tsx
+++ b/packages/react-native/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)
diff --git a/packages/react-native/src/primitives/Checkbox/Checkbox.tsx b/packages/react-native/src/primitives/Checkbox/Checkbox.tsx
index 689003a651a..854f4a750c7 100644
--- a/packages/react-native/src/primitives/Checkbox/Checkbox.tsx
+++ b/packages/react-native/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);
diff --git a/packages/react-native/src/primitives/Divider/Divider.tsx b/packages/react-native/src/primitives/Divider/Divider.tsx
index 125845295bd..ca3ecf7b5ac 100644
--- a/packages/react-native/src/primitives/Divider/Divider.tsx
+++ b/packages/react-native/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);
 
diff --git a/packages/react-native/src/primitives/ErrorMessage/ErrorMessage.tsx b/packages/react-native/src/primitives/ErrorMessage/ErrorMessage.tsx
index 1f6cb1d84dc..de7a9c4560a 100644
--- a/packages/react-native/src/primitives/ErrorMessage/ErrorMessage.tsx
+++ b/packages/react-native/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);
 
diff --git a/packages/react-native/src/primitives/Heading/Heading.tsx b/packages/react-native/src/primitives/Heading/Heading.tsx
index 4ca0ac419e0..5f9f7688433 100644
--- a/packages/react-native/src/primitives/Heading/Heading.tsx
+++ b/packages/react-native/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);
 
diff --git a/packages/react-native/src/primitives/Icon/Icon.tsx b/packages/react-native/src/primitives/Icon/Icon.tsx
index f3d49d18e21..59a690fdd4d 100644
--- a/packages/react-native/src/primitives/Icon/Icon.tsx
+++ b/packages/react-native/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),
diff --git a/packages/react-native/src/primitives/IconButton/IconButton.tsx b/packages/react-native/src/primitives/IconButton/IconButton.tsx
index 94f776a94b7..21a099c207a 100644
--- a/packages/react-native/src/primitives/IconButton/IconButton.tsx
+++ b/packages/react-native/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);
 
diff --git a/packages/react-native/src/primitives/Label/Label.tsx b/packages/react-native/src/primitives/Label/Label.tsx
index 6d1e65900bd..05a54fe4fd9 100644
--- a/packages/react-native/src/primitives/Label/Label.tsx
+++ b/packages/react-native/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];
diff --git a/packages/react-native/src/primitives/PasswordField/PasswordField.tsx b/packages/react-native/src/primitives/PasswordField/PasswordField.tsx
index 2af94288d7a..29c2537a431 100644
--- a/packages/react-native/src/primitives/PasswordField/PasswordField.tsx
+++ b/packages/react-native/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);
 
diff --git a/packages/react-native/src/primitives/PhoneNumberField/PhoneNumberField.tsx b/packages/react-native/src/primitives/PhoneNumberField/PhoneNumberField.tsx
index 08bc85f271b..d406f9e4db9 100644
--- a/packages/react-native/src/primitives/PhoneNumberField/PhoneNumberField.tsx
+++ b/packages/react-native/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);
 
diff --git a/packages/react-native/src/primitives/Radio/Radio.tsx b/packages/react-native/src/primitives/Radio/Radio.tsx
index 5d2dfa79d06..e6c25e7f165 100644
--- a/packages/react-native/src/primitives/Radio/Radio.tsx
+++ b/packages/react-native/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);
 
diff --git a/packages/react-native/src/primitives/RadioGroup/RadioGroup.tsx b/packages/react-native/src/primitives/RadioGroup/RadioGroup.tsx
index 157ace888c0..6ca9c9065de 100644
--- a/packages/react-native/src/primitives/RadioGroup/RadioGroup.tsx
+++ b/packages/react-native/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);
 
diff --git a/packages/react-native/src/primitives/Tabs/Tab.tsx b/packages/react-native/src/primitives/Tabs/Tab.tsx
index 232ebbf8b5a..17778b54b14 100644
--- a/packages/react-native/src/primitives/Tabs/Tab.tsx
+++ b/packages/react-native/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);
 
diff --git a/packages/react-native/src/primitives/Tabs/Tabs.tsx b/packages/react-native/src/primitives/Tabs/Tabs.tsx
index 72af1b2cc73..52e11619fe5 100644
--- a/packages/react-native/src/primitives/Tabs/Tabs.tsx
+++ b/packages/react-native/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);
 
diff --git a/packages/react-native/src/primitives/TextField/TextField.tsx b/packages/react-native/src/primitives/TextField/TextField.tsx
index 09b7a6ff83b..d7f5157a886 100644
--- a/packages/react-native/src/primitives/TextField/TextField.tsx
+++ b/packages/react-native/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]);
 
diff --git a/packages/react-native/src/theme/ThemeProvider.tsx b/packages/react-native/src/theme/ThemeProvider.tsx
index 258447c5d4c..4c020fa9586 100644
--- a/packages/react-native/src/theme/ThemeProvider.tsx
+++ b/packages/react-native/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]
diff --git a/packages/react-notifications/package.json b/packages/react-notifications/package.json
index 3ffe003f64c..2784a463fbd 100644
--- a/packages/react-notifications/package.json
+++ b/packages/react-notifications/package.json
@@ -47,8 +47,8 @@
   },
   "peerDependencies": {
     "aws-amplify": "^6.9.0",
-    "react": "^16.14.0 || ^17.0 || ^18.0",
-    "react-dom": "^16.14.0 || ^17.0 || ^18.0"
+    "react": "^16.14 || ^17 || ^18 || ^19",
+    "react-dom": "^16.14 || ^17 || ^18 || ^19"
   },
   "devDependencies": {
     "@types/tinycolor2": "^1.4.3"
diff --git a/packages/react-notifications/src/components/InAppMessaging/Backdrop/Backdrop.tsx b/packages/react-notifications/src/components/InAppMessaging/Backdrop/Backdrop.tsx
index 8bdbdff1671..4e40c05bc3d 100644
--- a/packages/react-notifications/src/components/InAppMessaging/Backdrop/Backdrop.tsx
+++ b/packages/react-notifications/src/components/InAppMessaging/Backdrop/Backdrop.tsx
@@ -6,7 +6,10 @@ import { BackdropProps } from './types';
 
 export const BACKDROP_TEST_ID = 'inappmessaging-backdrop';
 
-export function Backdrop({ onClick, ...rest }: BackdropProps): JSX.Element {
+export function Backdrop({
+  onClick,
+  ...rest
+}: BackdropProps): React.JSX.Element {
   return (
     <View
       className="amplify-inappmessaging-backdrop"
diff --git a/packages/react-notifications/src/components/InAppMessaging/Backdrop/withBackdrop.tsx b/packages/react-notifications/src/components/InAppMessaging/Backdrop/withBackdrop.tsx
index adc26235d29..91e32ad25cf 100644
--- a/packages/react-notifications/src/components/InAppMessaging/Backdrop/withBackdrop.tsx
+++ b/packages/react-notifications/src/components/InAppMessaging/Backdrop/withBackdrop.tsx
@@ -6,16 +6,16 @@ import { Backdrop } from './Backdrop';
 import { BackdropProps } from './types';
 
 export function withBackdrop<Props>(
-  Content: (props: Props) => JSX.Element,
+  Content: (props: Props) => React.JSX.Element,
   options: BackdropProps = {}
-): (props: Props) => JSX.Element {
+): (props: Props) => React.JSX.Element {
   return function ContentWithBackdrop(props: Props) {
     return (
       <>
         <Backdrop {...options} />
         <Flex className="amplify-inappmessaging-backdrop-content-container">
           <View className="amplify-inappmessaging-backdrop-content">
-            <Content {...(props as Props & JSX.IntrinsicAttributes)} />
+            <Content {...(props as Props & React.JSX.IntrinsicAttributes)} />
           </View>
         </Flex>
       </>
diff --git a/packages/react-notifications/src/components/InAppMessaging/BannerMessage/BannerMessage.tsx b/packages/react-notifications/src/components/InAppMessaging/BannerMessage/BannerMessage.tsx
index 5a0b8d1d348..b5d94855a62 100644
--- a/packages/react-notifications/src/components/InAppMessaging/BannerMessage/BannerMessage.tsx
+++ b/packages/react-notifications/src/components/InAppMessaging/BannerMessage/BannerMessage.tsx
@@ -9,7 +9,9 @@ import { MessageLayout } from '../MessageLayout';
 import { BLOCK_CLASS } from './constants';
 import { BannerMessageProps } from './types';
 
-export function BannerMessage(props: BannerMessageProps): JSX.Element | null {
+export function BannerMessage(
+  props: BannerMessageProps
+): React.JSX.Element | null {
   const messageProps = useMessageProps(props);
   const shouldBeFullWidth = useBreakpointValue([true, true, false]);
   const { shouldRenderMessage, styles } = messageProps;
diff --git a/packages/react-notifications/src/components/InAppMessaging/CloseIconButton/CloseIconButton.tsx b/packages/react-notifications/src/components/InAppMessaging/CloseIconButton/CloseIconButton.tsx
index 96da2266ed7..5eae1c5ac47 100644
--- a/packages/react-notifications/src/components/InAppMessaging/CloseIconButton/CloseIconButton.tsx
+++ b/packages/react-notifications/src/components/InAppMessaging/CloseIconButton/CloseIconButton.tsx
@@ -11,7 +11,7 @@ export function CloseIconButton({
   onClick,
   style,
   ...rest
-}: CloseIconButtonProps): JSX.Element {
+}: CloseIconButtonProps): React.JSX.Element {
   return (
     <Button
       ariaLabel={dismissButtonLabel}
diff --git a/packages/react-notifications/src/components/InAppMessaging/FullScreenMessage/FullScreenMessage.tsx b/packages/react-notifications/src/components/InAppMessaging/FullScreenMessage/FullScreenMessage.tsx
index 2e0f9465e42..e7c8ac3d8c7 100644
--- a/packages/react-notifications/src/components/InAppMessaging/FullScreenMessage/FullScreenMessage.tsx
+++ b/packages/react-notifications/src/components/InAppMessaging/FullScreenMessage/FullScreenMessage.tsx
@@ -12,7 +12,7 @@ import { FullScreenMessageProps } from './types';
 
 export function FullScreenMessage(
   props: FullScreenMessageProps
-): JSX.Element | null {
+): React.JSX.Element | null {
   const messageProps = useMessageProps(props);
   const shouldBeFullScreen = useBreakpointValue([true, true, false]);
   const { shouldRenderMessage, styles } = messageProps;
diff --git a/packages/react-notifications/src/components/InAppMessaging/InAppMessageDisplay/InAppMessageDisplay.tsx b/packages/react-notifications/src/components/InAppMessaging/InAppMessageDisplay/InAppMessageDisplay.tsx
index 01ca58d6e4c..756c7a00dce 100644
--- a/packages/react-notifications/src/components/InAppMessaging/InAppMessageDisplay/InAppMessageDisplay.tsx
+++ b/packages/react-notifications/src/components/InAppMessaging/InAppMessageDisplay/InAppMessageDisplay.tsx
@@ -38,7 +38,7 @@ const onMessageAction: OnMessageAction = ({ action, url }) => {
 
 function InAppMessageDisplay({
   components: overrideComponents,
-}: InAppMessageDisplayProps): JSX.Element {
+}: InAppMessageDisplayProps): React.JSX.Element {
   const components = React.useMemo(
     () => ({ ...platformComponents, ...overrideComponents }),
     [overrideComponents]
diff --git a/packages/react-notifications/src/components/InAppMessaging/MessageLayout/MessageLayout.tsx b/packages/react-notifications/src/components/InAppMessaging/MessageLayout/MessageLayout.tsx
index 1ba149c1869..65915163365 100644
--- a/packages/react-notifications/src/components/InAppMessaging/MessageLayout/MessageLayout.tsx
+++ b/packages/react-notifications/src/components/InAppMessaging/MessageLayout/MessageLayout.tsx
@@ -47,7 +47,7 @@ export function MessageLayout({
   primaryButton,
   secondaryButton,
   styles,
-}: MessageLayoutProps): JSX.Element {
+}: MessageLayoutProps): React.JSX.Element {
   const buttonModifiers = React.useMemo(
     () => ({
       primary: getButtonModifier(styles.primaryButton),
diff --git a/packages/react-notifications/src/components/InAppMessaging/ModalMessage/ModalMessage.tsx b/packages/react-notifications/src/components/InAppMessaging/ModalMessage/ModalMessage.tsx
index 2e30fd8f8de..94a8fb0d5fc 100644
--- a/packages/react-notifications/src/components/InAppMessaging/ModalMessage/ModalMessage.tsx
+++ b/packages/react-notifications/src/components/InAppMessaging/ModalMessage/ModalMessage.tsx
@@ -9,7 +9,9 @@ import { MessageLayout } from '../MessageLayout';
 import { BLOCK_CLASS, DIALOG_CLASS } from './constants';
 import { ModalMessageProps } from './types';
 
-export function ModalMessage(props: ModalMessageProps): JSX.Element | null {
+export function ModalMessage(
+  props: ModalMessageProps
+): React.JSX.Element | null {
   const messageProps = useMessageProps(props);
   const shouldBeFullWidth = useBreakpointValue([true, true, false]);
   const { shouldRenderMessage, styles } = messageProps;
diff --git a/packages/react-notifications/src/components/InAppMessaging/withInAppMessaging/withInAppMessaging.tsx b/packages/react-notifications/src/components/InAppMessaging/withInAppMessaging/withInAppMessaging.tsx
index 9501989fb10..693c3aedc5b 100644
--- a/packages/react-notifications/src/components/InAppMessaging/withInAppMessaging/withInAppMessaging.tsx
+++ b/packages/react-notifications/src/components/InAppMessaging/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>
     );
   };
diff --git a/packages/react-storage/package.json b/packages/react-storage/package.json
index 1826506c8d2..6403b161b8b 100644
--- a/packages/react-storage/package.json
+++ b/packages/react-storage/package.json
@@ -54,8 +54,8 @@
   },
   "peerDependencies": {
     "aws-amplify": "^6.9.0",
-    "react": "^16.14.0 || ^17.0 || ^18.0",
-    "react-dom": "^16.14.0 || ^17.0 || ^18.0"
+    "react": "^16.14 || ^17 || ^18 || ^19",
+    "react-dom": "^16.14 || ^17 || ^18 || ^19"
   },
   "devDependencies": {
     "jest-tsd": "^0.2.2",
@@ -70,7 +70,7 @@
       "name": "createStorageBrowser",
       "path": "dist/esm/browser.mjs",
       "import": "{ createStorageBrowser }",
-      "limit": "60.5 kB",
+      "limit": "63 kB",
       "ignore": [
         "@aws-amplify/storage"
       ]
@@ -79,7 +79,7 @@
       "name": "StorageBrowser",
       "path": "dist/esm/index.mjs",
       "import": "{ StorageBrowser }",
-      "limit": "83 kB"
+      "limit": "85 kB"
     },
     {
       "name": "FileUploader",
diff --git a/packages/react-storage/src/components/FileUploader/FileUploader.tsx b/packages/react-storage/src/components/FileUploader/FileUploader.tsx
index 755e551891a..1d2b59d3577 100644
--- a/packages/react-storage/src/components/FileUploader/FileUploader.tsx
+++ b/packages/react-storage/src/components/FileUploader/FileUploader.tsx
@@ -61,7 +61,7 @@ const FileUploaderBase = React.forwardRef(function FileUploader(
     useAccelerateEndpoint,
   }: FileUploaderPathProps | FileUploaderProps,
   ref: React.ForwardedRef<FileUploaderHandle>
-): JSX.Element {
+): React.JSX.Element {
   if (!maxFileCount) {
     // eslint-disable-next-line no-console
     console.warn(MISSING_REQUIRED_PROPS_MESSAGE);
diff --git a/packages/react-storage/src/components/FileUploader/hooks/useFileUploader/useFileUploader.ts b/packages/react-storage/src/components/FileUploader/hooks/useFileUploader/useFileUploader.ts
index be4e9a2c395..cfa5c92f12c 100644
--- a/packages/react-storage/src/components/FileUploader/hooks/useFileUploader/useFileUploader.ts
+++ b/packages/react-storage/src/components/FileUploader/hooks/useFileUploader/useFileUploader.ts
@@ -3,7 +3,7 @@ import React from 'react';
 import { isObject } from '@aws-amplify/ui';
 
 import { StorageFiles, FileStatus, DefaultFile } from '../../types';
-import { Action, GetFileErrorMessage, UseFileUploaderState } from './types';
+import { GetFileErrorMessage } from './types';
 import { fileUploaderStateReducer } from './reducer';
 import {
   addFilesAction,
@@ -45,9 +45,7 @@ const createFileFromDefault = (file: DefaultFile) =>
 export function useFileUploader(
   defaultFiles: Array<DefaultFile> = []
 ): UseFileUploader {
-  const [{ files }, dispatch] = React.useReducer<
-    (prevState: UseFileUploaderState, action: Action) => UseFileUploaderState
-  >(fileUploaderStateReducer, {
+  const [{ files }, dispatch] = React.useReducer(fileUploaderStateReducer, {
     files: (Array.isArray(defaultFiles)
       ? defaultFiles.map(createFileFromDefault).filter((file) => !!file)
       : []) as StorageFiles,
diff --git a/packages/react-storage/src/components/FileUploader/ui/Container/Container.tsx b/packages/react-storage/src/components/FileUploader/ui/Container/Container.tsx
index e417120f27e..d7063c40eeb 100644
--- a/packages/react-storage/src/components/FileUploader/ui/Container/Container.tsx
+++ b/packages/react-storage/src/components/FileUploader/ui/Container/Container.tsx
@@ -10,6 +10,6 @@ export interface ContainerProps {
 export function Container({
   children,
   className,
-}: ContainerProps): JSX.Element {
+}: ContainerProps): React.JSX.Element {
   return <View className={className}>{children}</View>;
 }
diff --git a/packages/react-storage/src/components/FileUploader/ui/Container/__tests__/Container.spec.tsx b/packages/react-storage/src/components/FileUploader/ui/Container/__tests__/Container.spec.tsx
index b32f06661bf..b888f7669e5 100644
--- a/packages/react-storage/src/components/FileUploader/ui/Container/__tests__/Container.spec.tsx
+++ b/packages/react-storage/src/components/FileUploader/ui/Container/__tests__/Container.spec.tsx
@@ -7,7 +7,7 @@ import { Container } from '../Container';
 
 const CHILD_CONTENT = 'Test Children';
 
-const MockChildren = (): JSX.Element => {
+const MockChildren = (): React.JSX.Element => {
   return <View>{CHILD_CONTENT}</View>;
 };
 
diff --git a/packages/react-storage/src/components/FileUploader/ui/DropZone/DropZone.tsx b/packages/react-storage/src/components/FileUploader/ui/DropZone/DropZone.tsx
index 0d1111aad29..a5c1de6e560 100644
--- a/packages/react-storage/src/components/FileUploader/ui/DropZone/DropZone.tsx
+++ b/packages/react-storage/src/components/FileUploader/ui/DropZone/DropZone.tsx
@@ -17,7 +17,7 @@ export function DropZone({
   onDragStart,
   onDrop,
   testId,
-}: DropZoneProps): JSX.Element {
+}: DropZoneProps): React.JSX.Element {
   const { dropFilesText } = displayText;
   const icons = useIcons('storageManager');
 
diff --git a/packages/react-storage/src/components/FileUploader/ui/FileList/FileControl.tsx b/packages/react-storage/src/components/FileUploader/ui/FileList/FileControl.tsx
index b20f1614e3c..ffdd0d8196a 100644
--- a/packages/react-storage/src/components/FileUploader/ui/FileList/FileControl.tsx
+++ b/packages/react-storage/src/components/FileUploader/ui/FileList/FileControl.tsx
@@ -25,7 +25,7 @@ export function FileControl({
   status,
   displayText,
   thumbnailUrl,
-}: FileControlProps): JSX.Element {
+}: FileControlProps): React.JSX.Element {
   const {
     getPausedText,
     getUploadingText,
diff --git a/packages/react-storage/src/components/FileUploader/ui/FileList/FileDetails.tsx b/packages/react-storage/src/components/FileUploader/ui/FileList/FileDetails.tsx
index 54321b215e6..a33cd68e663 100644
--- a/packages/react-storage/src/components/FileUploader/ui/FileList/FileDetails.tsx
+++ b/packages/react-storage/src/components/FileUploader/ui/FileList/FileDetails.tsx
@@ -6,7 +6,7 @@ import { UploadDetailsProps } from './types';
 export const UploadDetails = ({
   displayName,
   fileSize,
-}: UploadDetailsProps): JSX.Element => {
+}: UploadDetailsProps): React.JSX.Element => {
   return (
     <>
       <View className={ComponentClassName.FileUploaderFileMain}>
diff --git a/packages/react-storage/src/components/FileUploader/ui/FileList/FileList.tsx b/packages/react-storage/src/components/FileUploader/ui/FileList/FileList.tsx
index 4c584a06c06..a0dced4dc1c 100644
--- a/packages/react-storage/src/components/FileUploader/ui/FileList/FileList.tsx
+++ b/packages/react-storage/src/components/FileUploader/ui/FileList/FileList.tsx
@@ -18,7 +18,7 @@ export function FileList({
   onPause,
   showThumbnails,
   maxFileCount,
-}: FileListProps): JSX.Element | null {
+}: FileListProps): React.JSX.Element | null {
   if (files.length < 1) {
     return null;
   }
diff --git a/packages/react-storage/src/components/FileUploader/ui/FileList/FileRemoveButton.tsx b/packages/react-storage/src/components/FileUploader/ui/FileList/FileRemoveButton.tsx
index a117ad4753a..412de21c270 100644
--- a/packages/react-storage/src/components/FileUploader/ui/FileList/FileRemoveButton.tsx
+++ b/packages/react-storage/src/components/FileUploader/ui/FileList/FileRemoveButton.tsx
@@ -6,7 +6,7 @@ import { FileRemoveButtonProps } from './types';
 export const FileRemoveButton = ({
   altText,
   onClick,
-}: FileRemoveButtonProps): JSX.Element => {
+}: FileRemoveButtonProps): React.JSX.Element => {
   const icons = useIcons('storageManager');
   return (
     <Button
diff --git a/packages/react-storage/src/components/FileUploader/ui/FileList/FileStatusMessage.tsx b/packages/react-storage/src/components/FileUploader/ui/FileList/FileStatusMessage.tsx
index 4818537ddad..faa4cdd4d56 100644
--- a/packages/react-storage/src/components/FileUploader/ui/FileList/FileStatusMessage.tsx
+++ b/packages/react-storage/src/components/FileUploader/ui/FileList/FileStatusMessage.tsx
@@ -15,7 +15,7 @@ export const FileStatusMessage = ({
   percentage,
   status,
   uploadSuccessfulText,
-}: FileStatusMessageProps): JSX.Element | null => {
+}: FileStatusMessageProps): React.JSX.Element | null => {
   const icons = useIcons('storageManager');
   switch (status) {
     case FileStatus.UPLOADING: {
diff --git a/packages/react-storage/src/components/FileUploader/ui/FileList/FileThumbnail.tsx b/packages/react-storage/src/components/FileUploader/ui/FileList/FileThumbnail.tsx
index 8bbfc12b052..70d0071e04a 100644
--- a/packages/react-storage/src/components/FileUploader/ui/FileList/FileThumbnail.tsx
+++ b/packages/react-storage/src/components/FileUploader/ui/FileList/FileThumbnail.tsx
@@ -9,7 +9,7 @@ export const FileThumbnail = ({
   fileName,
   isImage,
   url,
-}: FileThumbnailProps): JSX.Element => {
+}: FileThumbnailProps): React.JSX.Element => {
   const icons = useIcons('storageManager');
   const thumbnail = isImage ? (
     <Image alt={fileName} src={url} />
diff --git a/packages/react-storage/src/components/FileUploader/ui/FileListFooter/FileListFooter.tsx b/packages/react-storage/src/components/FileUploader/ui/FileListFooter/FileListFooter.tsx
index beb0a1d4a58..594602107db 100644
--- a/packages/react-storage/src/components/FileUploader/ui/FileListFooter/FileListFooter.tsx
+++ b/packages/react-storage/src/components/FileUploader/ui/FileListFooter/FileListFooter.tsx
@@ -16,7 +16,7 @@ export function FileListFooter({
   remainingFilesCount,
   onClearAll,
   onUploadAll,
-}: FileListFooterProps): JSX.Element {
+}: FileListFooterProps): React.JSX.Element {
   const { clearAllButtonText, getUploadButtonText } = displayText;
   return (
     <View className={ComponentClassName.FileUploaderPreviewerFooter}>
diff --git a/packages/react-storage/src/components/FileUploader/ui/FileListHeader/FileListHeader.tsx b/packages/react-storage/src/components/FileUploader/ui/FileListHeader/FileListHeader.tsx
index 1dedbb4cc2b..2d1e49e661e 100644
--- a/packages/react-storage/src/components/FileUploader/ui/FileListHeader/FileListHeader.tsx
+++ b/packages/react-storage/src/components/FileUploader/ui/FileListHeader/FileListHeader.tsx
@@ -17,7 +17,7 @@ export function FileListHeader({
   fileCount,
   remainingFilesCount,
   selectedFilesCount = 0,
-}: FileListHeaderProps): JSX.Element {
+}: FileListHeaderProps): React.JSX.Element {
   const { getFilesUploadedText, getRemainingFilesText, getSelectedFilesText } =
     displayText;
 
diff --git a/packages/react-storage/src/components/FileUploader/ui/FilePicker/FilePicker.tsx b/packages/react-storage/src/components/FileUploader/ui/FilePicker/FilePicker.tsx
index c249b5fd976..5f8dacd6df1 100644
--- a/packages/react-storage/src/components/FileUploader/ui/FilePicker/FilePicker.tsx
+++ b/packages/react-storage/src/components/FileUploader/ui/FilePicker/FilePicker.tsx
@@ -10,7 +10,7 @@ export function FilePicker({
   className = ComponentClassName.FileUploaderFilePicker,
   size = 'small',
   ...props
-}: FilePickerProps): JSX.Element {
+}: FilePickerProps): React.JSX.Element {
   return (
     <Button {...props} className={className} size={size}>
       {children}
diff --git a/packages/react-storage/src/components/StorageBrowser/context/elements/defaults.tsx b/packages/react-storage/src/components/StorageBrowser/context/elements/defaults.tsx
index 9cfea0f4537..c6d3e1539f1 100644
--- a/packages/react-storage/src/components/StorageBrowser/context/elements/defaults.tsx
+++ b/packages/react-storage/src/components/StorageBrowser/context/elements/defaults.tsx
@@ -215,7 +215,7 @@ function View({ variant, ...props }: ViewElementProps): React.JSX.Element {
   }
 }
 
-const Nav = (props: NavElementProps): JSX.Element => (
+const Nav = (props: NavElementProps): React.JSX.Element => (
   <_View {...props} as="nav" />
 );
 
diff --git a/packages/react-storage/src/components/StorageImage/StorageImage.tsx b/packages/react-storage/src/components/StorageImage/StorageImage.tsx
index 56bfd573146..f12aec452c5 100644
--- a/packages/react-storage/src/components/StorageImage/StorageImage.tsx
+++ b/packages/react-storage/src/components/StorageImage/StorageImage.tsx
@@ -53,7 +53,7 @@ export const StorageImage = ({
   onGetUrlError,
   validateObjectExistence = true,
   ...rest
-}: StorageImageProps | StorageImagePathProps): JSX.Element => {
+}: StorageImageProps | StorageImagePathProps): React.JSX.Element => {
   const hasImgkey = !!imgKey;
   const hasPath = !!path;
   const hasDeprecatedOptions = !!accessLevel || !!identityId;
diff --git a/packages/react-storage/src/components/StorageManager/StorageManager.tsx b/packages/react-storage/src/components/StorageManager/StorageManager.tsx
index aacbc785759..97170827075 100644
--- a/packages/react-storage/src/components/StorageManager/StorageManager.tsx
+++ b/packages/react-storage/src/components/StorageManager/StorageManager.tsx
@@ -62,7 +62,7 @@ const StorageManagerBase = React.forwardRef(function StorageManager(
     useAccelerateEndpoint,
   }: StorageManagerPathProps | StorageManagerProps,
   ref: React.ForwardedRef<StorageManagerHandle>
-): JSX.Element {
+): React.JSX.Element {
   useDeprecationWarning({
     message:
       'The `StorageManager` component has been renamed as the `FileUploader` component.',
diff --git a/packages/react-storage/src/components/StorageManager/ui/Container/Container.tsx b/packages/react-storage/src/components/StorageManager/ui/Container/Container.tsx
index e417120f27e..d7063c40eeb 100644
--- a/packages/react-storage/src/components/StorageManager/ui/Container/Container.tsx
+++ b/packages/react-storage/src/components/StorageManager/ui/Container/Container.tsx
@@ -10,6 +10,6 @@ export interface ContainerProps {
 export function Container({
   children,
   className,
-}: ContainerProps): JSX.Element {
+}: ContainerProps): React.JSX.Element {
   return <View className={className}>{children}</View>;
 }
diff --git a/packages/react-storage/src/components/StorageManager/ui/Container/__tests__/Container.spec.tsx b/packages/react-storage/src/components/StorageManager/ui/Container/__tests__/Container.spec.tsx
index b32f06661bf..b888f7669e5 100644
--- a/packages/react-storage/src/components/StorageManager/ui/Container/__tests__/Container.spec.tsx
+++ b/packages/react-storage/src/components/StorageManager/ui/Container/__tests__/Container.spec.tsx
@@ -7,7 +7,7 @@ import { Container } from '../Container';
 
 const CHILD_CONTENT = 'Test Children';
 
-const MockChildren = (): JSX.Element => {
+const MockChildren = (): React.JSX.Element => {
   return <View>{CHILD_CONTENT}</View>;
 };
 
diff --git a/packages/react-storage/src/components/StorageManager/ui/DropZone/DropZone.tsx b/packages/react-storage/src/components/StorageManager/ui/DropZone/DropZone.tsx
index 7ccc29139ca..6b882c9f192 100644
--- a/packages/react-storage/src/components/StorageManager/ui/DropZone/DropZone.tsx
+++ b/packages/react-storage/src/components/StorageManager/ui/DropZone/DropZone.tsx
@@ -17,7 +17,7 @@ export function DropZone({
   onDragStart,
   onDrop,
   testId,
-}: DropZoneProps): JSX.Element {
+}: DropZoneProps): React.JSX.Element {
   const { dropFilesText } = displayText;
   const icons = useIcons('storageManager');
 
diff --git a/packages/react-storage/src/components/StorageManager/ui/FileList/FileControl.tsx b/packages/react-storage/src/components/StorageManager/ui/FileList/FileControl.tsx
index 83fa59fa38a..3baba83b2ba 100644
--- a/packages/react-storage/src/components/StorageManager/ui/FileList/FileControl.tsx
+++ b/packages/react-storage/src/components/StorageManager/ui/FileList/FileControl.tsx
@@ -26,7 +26,7 @@ export function FileControl({
   status,
   displayText,
   thumbnailUrl,
-}: FileControlProps): JSX.Element {
+}: FileControlProps): React.JSX.Element {
   const {
     getPausedText,
     getUploadingText,
diff --git a/packages/react-storage/src/components/StorageManager/ui/FileList/FileDetails.tsx b/packages/react-storage/src/components/StorageManager/ui/FileList/FileDetails.tsx
index 7b915e34509..0bde2dd5936 100644
--- a/packages/react-storage/src/components/StorageManager/ui/FileList/FileDetails.tsx
+++ b/packages/react-storage/src/components/StorageManager/ui/FileList/FileDetails.tsx
@@ -6,7 +6,7 @@ import { UploadDetailsProps } from './types';
 export const UploadDetails = ({
   displayName,
   fileSize,
-}: UploadDetailsProps): JSX.Element => {
+}: UploadDetailsProps): React.JSX.Element => {
   return (
     <>
       <View className={ComponentClassName.StorageManagerFileMain}>
diff --git a/packages/react-storage/src/components/StorageManager/ui/FileList/FileList.tsx b/packages/react-storage/src/components/StorageManager/ui/FileList/FileList.tsx
index 649d7c2df66..bd4ee6eda97 100644
--- a/packages/react-storage/src/components/StorageManager/ui/FileList/FileList.tsx
+++ b/packages/react-storage/src/components/StorageManager/ui/FileList/FileList.tsx
@@ -18,7 +18,7 @@ export function FileList({
   onPause,
   showThumbnails,
   maxFileCount,
-}: FileListProps): JSX.Element | null {
+}: FileListProps): React.JSX.Element | null {
   if (files.length < 1) {
     return null;
   }
diff --git a/packages/react-storage/src/components/StorageManager/ui/FileList/FileRemoveButton.tsx b/packages/react-storage/src/components/StorageManager/ui/FileList/FileRemoveButton.tsx
index a117ad4753a..412de21c270 100644
--- a/packages/react-storage/src/components/StorageManager/ui/FileList/FileRemoveButton.tsx
+++ b/packages/react-storage/src/components/StorageManager/ui/FileList/FileRemoveButton.tsx
@@ -6,7 +6,7 @@ import { FileRemoveButtonProps } from './types';
 export const FileRemoveButton = ({
   altText,
   onClick,
-}: FileRemoveButtonProps): JSX.Element => {
+}: FileRemoveButtonProps): React.JSX.Element => {
   const icons = useIcons('storageManager');
   return (
     <Button
diff --git a/packages/react-storage/src/components/StorageManager/ui/FileList/FileStatusMessage.tsx b/packages/react-storage/src/components/StorageManager/ui/FileList/FileStatusMessage.tsx
index 15c75bf8b99..9fcb634e10b 100644
--- a/packages/react-storage/src/components/StorageManager/ui/FileList/FileStatusMessage.tsx
+++ b/packages/react-storage/src/components/StorageManager/ui/FileList/FileStatusMessage.tsx
@@ -15,7 +15,7 @@ export const FileStatusMessage = ({
   percentage,
   status,
   uploadSuccessfulText,
-}: FileStatusMessageProps): JSX.Element | null => {
+}: FileStatusMessageProps): React.JSX.Element | null => {
   const icons = useIcons('storageManager');
   switch (status) {
     case FileStatus.UPLOADING: {
diff --git a/packages/react-storage/src/components/StorageManager/ui/FileList/FileThumbnail.tsx b/packages/react-storage/src/components/StorageManager/ui/FileList/FileThumbnail.tsx
index c1abd1de491..54d11b77b6b 100644
--- a/packages/react-storage/src/components/StorageManager/ui/FileList/FileThumbnail.tsx
+++ b/packages/react-storage/src/components/StorageManager/ui/FileList/FileThumbnail.tsx
@@ -9,7 +9,7 @@ export const FileThumbnail = ({
   fileName,
   isImage,
   url,
-}: FileThumbnailProps): JSX.Element => {
+}: FileThumbnailProps): React.JSX.Element => {
   const icons = useIcons('storageManager');
   const thumbnail = isImage ? (
     <Image alt={fileName} src={url} />
diff --git a/packages/react-storage/src/components/StorageManager/ui/FileListFooter/FileListFooter.tsx b/packages/react-storage/src/components/StorageManager/ui/FileListFooter/FileListFooter.tsx
index 48d94870220..745fc9d708c 100644
--- a/packages/react-storage/src/components/StorageManager/ui/FileListFooter/FileListFooter.tsx
+++ b/packages/react-storage/src/components/StorageManager/ui/FileListFooter/FileListFooter.tsx
@@ -16,7 +16,7 @@ export function FileListFooter({
   remainingFilesCount,
   onClearAll,
   onUploadAll,
-}: FileListFooterProps): JSX.Element {
+}: FileListFooterProps): React.JSX.Element {
   const { clearAllButtonText, getUploadButtonText } = displayText;
   return (
     <View className={ComponentClassName.StorageManagerPreviewerFooter}>
diff --git a/packages/react-storage/src/components/StorageManager/ui/FileListHeader/FileListHeader.tsx b/packages/react-storage/src/components/StorageManager/ui/FileListHeader/FileListHeader.tsx
index 156dde0aa4d..ef49773d069 100644
--- a/packages/react-storage/src/components/StorageManager/ui/FileListHeader/FileListHeader.tsx
+++ b/packages/react-storage/src/components/StorageManager/ui/FileListHeader/FileListHeader.tsx
@@ -18,7 +18,7 @@ export function FileListHeader({
   fileCount,
   remainingFilesCount,
   selectedFilesCount = 0,
-}: FileListHeaderProps): JSX.Element {
+}: FileListHeaderProps): React.JSX.Element {
   const { getFilesUploadedText, getRemainingFilesText, getSelectedFilesText } =
     displayText;
 
diff --git a/packages/react-storage/src/components/StorageManager/ui/FilePicker/FilePicker.tsx b/packages/react-storage/src/components/StorageManager/ui/FilePicker/FilePicker.tsx
index 3fd5fbc888a..06f208da75c 100644
--- a/packages/react-storage/src/components/StorageManager/ui/FilePicker/FilePicker.tsx
+++ b/packages/react-storage/src/components/StorageManager/ui/FilePicker/FilePicker.tsx
@@ -10,7 +10,7 @@ export function FilePicker({
   className = ComponentClassName.StorageManagerFilePicker,
   size = 'small',
   ...props
-}: FilePickerProps): JSX.Element {
+}: FilePickerProps): React.JSX.Element {
   return (
     <Button {...props} className={className} size={size}>
       {children}
diff --git a/packages/react/__tests__/__snapshots__/exports.ts.snap b/packages/react/__tests__/__snapshots__/exports.ts.snap
index cadfd91bc45..1a7ecf72d69 100644
--- a/packages/react/__tests__/__snapshots__/exports.ts.snap
+++ b/packages/react/__tests__/__snapshots__/exports.ts.snap
@@ -339,6 +339,9 @@ exports[`primitive catalog should match primitives catalog snapshot 1`] = `
       "position": {
         "type": "string",
       },
+      "ref": {
+        "type": "string",
+      },
       "right": {
         "type": "string",
       },
@@ -1752,6 +1755,9 @@ exports[`primitive catalog should match primitives catalog snapshot 1`] = `
       "position": {
         "type": "string",
       },
+      "ref": {
+        "type": "string",
+      },
       "right": {
         "type": "string",
       },
@@ -4028,6 +4034,9 @@ exports[`primitive catalog should match primitives catalog snapshot 1`] = `
       "position": {
         "type": "string",
       },
+      "ref": {
+        "type": "string",
+      },
       "right": {
         "type": "string",
       },
@@ -9914,6 +9923,9 @@ exports[`primitive catalog should match primitives catalog snapshot 1`] = `
       "readOnly": {
         "type": "boolean",
       },
+      "ref": {
+        "type": "string",
+      },
       "rel": {
         "type": "string",
       },
@@ -14928,6 +14940,9 @@ exports[`primitive catalog should match primitives catalog snapshot 1`] = `
       "position": {
         "type": "string",
       },
+      "ref": {
+        "type": "string",
+      },
       "right": {
         "type": "string",
       },
diff --git a/packages/react/package.json b/packages/react/package.json
index 53fa3bbf149..94e7157ba8f 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -57,9 +57,9 @@
   "dependencies": {
     "@aws-amplify/ui": "6.7.2",
     "@aws-amplify/ui-react-core": "3.1.2",
-    "@radix-ui/react-direction": "1.0.0",
-    "@radix-ui/react-dropdown-menu": "1.0.0",
-    "@radix-ui/react-slider": "1.0.0",
+    "@radix-ui/react-direction": "^1.1.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.0",
+    "@radix-ui/react-slider": "^1.2.0",
     "@xstate/react": "^3.2.2",
     "lodash": "4.17.21",
     "qrcode": "1.5.0",
@@ -68,8 +68,8 @@
   "peerDependencies": {
     "@aws-amplify/core": "*",
     "aws-amplify": "^6.9.0",
-    "react": "^16.14.0 || ^17.0 || ^18.0",
-    "react-dom": "^16.14.0 || ^17.0 || ^18.0"
+    "react": "^16.14.0 || ^17.0 || ^18.0 || ^19",
+    "react-dom": "^16.14 || ^17 || ^18 || ^19"
   },
   "peerDependenciesMeta": {
     "aws-amplify": {
@@ -79,8 +79,7 @@
   "devDependencies": {
     "@svgr/core": "^5.5.0",
     "@types/qrcode": "^1.4.2",
-    "jest-matchmedia-mock": "^1.1.0",
-    "react-router-dom": "^6.2.1"
+    "jest-matchmedia-mock": "^1.1.0"
   },
   "sideEffects": [
     "dist/**/*.css"
diff --git a/packages/react/src/components/AccountSettings/ChangePassword/ChangePassword.tsx b/packages/react/src/components/AccountSettings/ChangePassword/ChangePassword.tsx
index 742ca68d47a..cb979070def 100644
--- a/packages/react/src/components/AccountSettings/ChangePassword/ChangePassword.tsx
+++ b/packages/react/src/components/AccountSettings/ChangePassword/ChangePassword.tsx
@@ -46,7 +46,7 @@ function ChangePassword({
   onError,
   onSuccess,
   validators,
-}: ChangePasswordProps): JSX.Element | null {
+}: ChangePasswordProps): React.JSX.Element | null {
   const [errorMessage, setErrorMessage] = React.useState<string | null>(null);
   const [formValues, setFormValues] = React.useState<FormValues>({});
   const [validationError, setValidationError] = React.useState<ValidationError>(
diff --git a/packages/react/src/components/AccountSettings/DeleteUser/DeleteUser.tsx b/packages/react/src/components/AccountSettings/DeleteUser/DeleteUser.tsx
index 49eb5456265..ec9494360dc 100644
--- a/packages/react/src/components/AccountSettings/DeleteUser/DeleteUser.tsx
+++ b/packages/react/src/components/AccountSettings/DeleteUser/DeleteUser.tsx
@@ -19,7 +19,7 @@ function DeleteUser({
   handleDelete,
   onError,
   onSuccess,
-}: DeleteUserProps): JSX.Element | null {
+}: DeleteUserProps): React.JSX.Element | null {
   const [state, setState] = React.useState<DeleteUserState>('IDLE');
   const [errorMessage, setErrorMessage] = React.useState<string | null>(null);
 
diff --git a/packages/react/src/components/Authenticator/Authenticator.tsx b/packages/react/src/components/Authenticator/Authenticator.tsx
index aa1a0cc0399..0896c1131f3 100644
--- a/packages/react/src/components/Authenticator/Authenticator.tsx
+++ b/packages/react/src/components/Authenticator/Authenticator.tsx
@@ -37,7 +37,10 @@ export type AuthenticatorProps = Partial<
     RouterProps & {
       children:
         | React.ReactNode
-        | ((props: { signOut?: SignOut; user?: AuthUser }) => JSX.Element);
+        | ((props: {
+            signOut?: SignOut;
+            user?: AuthUser;
+          }) => React.JSX.Element);
       formFields: {
         [key in FormFieldComponents]?: {
           [field_name: string]: ReactFormFieldOptions;
@@ -76,7 +79,7 @@ export function AuthenticatorInternal({
   services,
   socialProviders,
   variation,
-}: AuthenticatorProps): JSX.Element {
+}: AuthenticatorProps): React.JSX.Element {
   useDeprecationWarning({
     message:
       'The `passwordSettings` prop has been deprecated and will be removed in a future major version of Amplify UI.',
@@ -137,7 +140,7 @@ export function AuthenticatorInternal({
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/connected-components/authenticator)
  */
-export function Authenticator(props: AuthenticatorProps): JSX.Element {
+export function Authenticator(props: AuthenticatorProps): React.JSX.Element {
   useSetUserAgent({
     componentName: 'Authenticator',
     packageName: 'react',
diff --git a/packages/react/src/components/Authenticator/ConfirmSignIn/ConfirmSignIn.tsx b/packages/react/src/components/Authenticator/ConfirmSignIn/ConfirmSignIn.tsx
index 8fb4190e691..f5c35b0009c 100644
--- a/packages/react/src/components/Authenticator/ConfirmSignIn/ConfirmSignIn.tsx
+++ b/packages/react/src/components/Authenticator/ConfirmSignIn/ConfirmSignIn.tsx
@@ -16,7 +16,7 @@ const { getChallengeText } = authenticatorTextUtil;
 export const ConfirmSignIn = ({
   className,
   variation,
-}: RouteProps): JSX.Element => {
+}: RouteProps): React.JSX.Element => {
   const { isPending } = useAuthenticator((context) => [context.isPending]);
   const { handleChange, handleSubmit } = useFormHandlers();
 
@@ -64,7 +64,7 @@ function Header() {
 }
 
 ConfirmSignIn.Header = Header;
-ConfirmSignIn.Footer = function Footer(): JSX.Element {
+ConfirmSignIn.Footer = function Footer(): React.JSX.Element {
   // @ts-ignore
   return null;
 };
diff --git a/packages/react/src/components/Authenticator/ConfirmSignUp/ConfirmSignUp.tsx b/packages/react/src/components/Authenticator/ConfirmSignUp/ConfirmSignUp.tsx
index bfd7fca371d..c6469654501 100644
--- a/packages/react/src/components/Authenticator/ConfirmSignUp/ConfirmSignUp.tsx
+++ b/packages/react/src/components/Authenticator/ConfirmSignUp/ConfirmSignUp.tsx
@@ -22,7 +22,7 @@ const {
 export function ConfirmSignUp({
   className,
   variation,
-}: RouteProps): JSX.Element {
+}: RouteProps): React.JSX.Element {
   const { isPending, resendCode, codeDeliveryDetails } = useAuthenticator(
     (context) => [
       context.isPending,
@@ -97,7 +97,7 @@ const DefaultHeader = () => {
 
 ConfirmSignUp.Header = DefaultHeader;
 
-ConfirmSignUp.Footer = function Footer(): JSX.Element {
+ConfirmSignUp.Footer = function Footer(): React.JSX.Element {
   // @ts-ignore
   return null;
 };
diff --git a/packages/react/src/components/Authenticator/FederatedSignIn/FederatedSignIn.tsx b/packages/react/src/components/Authenticator/FederatedSignIn/FederatedSignIn.tsx
index 1b6dfdf595b..588f4a33d08 100644
--- a/packages/react/src/components/Authenticator/FederatedSignIn/FederatedSignIn.tsx
+++ b/packages/react/src/components/Authenticator/FederatedSignIn/FederatedSignIn.tsx
@@ -11,7 +11,7 @@ import { FederatedSignInButton } from './FederatedSignInButtons';
 
 const { getSignInWithFederationText, getOrText } = authenticatorTextUtil;
 
-export function FederatedSignIn(): JSX.Element {
+export function FederatedSignIn(): React.JSX.Element {
   const { route, socialProviders } = useAuthenticator(
     ({ route, socialProviders }) => [route, socialProviders]
   );
diff --git a/packages/react/src/components/Authenticator/FederatedSignIn/FederatedSignInButtons/FederatedSignInButton.tsx b/packages/react/src/components/Authenticator/FederatedSignIn/FederatedSignInButtons/FederatedSignInButton.tsx
index 4706d577ccb..e731dd7dbab 100644
--- a/packages/react/src/components/Authenticator/FederatedSignIn/FederatedSignInButtons/FederatedSignInButton.tsx
+++ b/packages/react/src/components/Authenticator/FederatedSignIn/FederatedSignInButtons/FederatedSignInButton.tsx
@@ -12,7 +12,7 @@ export interface FederatedSignInButtonProps {
   text: string;
 }
 
-const AppleIcon = (): JSX.Element => {
+const AppleIcon = (): React.JSX.Element => {
   return (
     <svg
       aria-label="Apple icon"
@@ -29,7 +29,7 @@ const AppleIcon = (): JSX.Element => {
   );
 };
 
-const GoogleIcon = (): JSX.Element => {
+const GoogleIcon = (): React.JSX.Element => {
   return (
     <svg
       aria-label="Google icon"
@@ -58,7 +58,7 @@ const GoogleIcon = (): JSX.Element => {
   );
 };
 
-const FacebookIcon = (): JSX.Element => {
+const FacebookIcon = (): React.JSX.Element => {
   return (
     <Icon
       className="federated-sign-in-icon"
@@ -70,7 +70,7 @@ const FacebookIcon = (): JSX.Element => {
   );
 };
 
-const AmazonIcon = (): JSX.Element => {
+const AmazonIcon = (): React.JSX.Element => {
   return (
     <svg
       aria-label="Amazon icon"
@@ -95,7 +95,7 @@ const AmazonIcon = (): JSX.Element => {
 
 export const FederatedSignInButton = (
   props: FederatedSignInButtonProps
-): JSX.Element => {
+): React.JSX.Element => {
   const { icon, provider, text } = props;
   const { toFederatedSignIn } = useAuthenticator();
 
diff --git a/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx b/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx
index fa8ac3d252d..40c5033a2c8 100644
--- a/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx
+++ b/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx
@@ -17,7 +17,7 @@ const { getChangePasswordText, getChangingText, getBackToSignInText } =
 export const ForceNewPassword = ({
   className,
   variation,
-}: RouteProps): JSX.Element => {
+}: RouteProps): React.JSX.Element => {
   const { isPending, toSignIn } = useAuthenticator((context) => [
     context.isPending,
     context.toSignIn,
@@ -76,14 +76,14 @@ export const ForceNewPassword = ({
   );
 };
 
-ForceNewPassword.FormFields = function FormFields(): JSX.Element | null {
+ForceNewPassword.FormFields = function FormFields(): React.JSX.Element | null {
   return <DefaultFormFields />;
 };
 
-ForceNewPassword.Header = function Header(): JSX.Element | null {
+ForceNewPassword.Header = function Header(): React.JSX.Element | null {
   return <Heading level={4}>{getChangePasswordText()}</Heading>;
 };
 
-ForceNewPassword.Footer = function Footer(): JSX.Element | null {
+ForceNewPassword.Footer = function Footer(): React.JSX.Element | null {
   return null;
 };
diff --git a/packages/react/src/components/Authenticator/ForgotPassword/ConfirmResetPassword.tsx b/packages/react/src/components/Authenticator/ForgotPassword/ConfirmResetPassword.tsx
index d5d8eb928f2..bb0eded765d 100644
--- a/packages/react/src/components/Authenticator/ForgotPassword/ConfirmResetPassword.tsx
+++ b/packages/react/src/components/Authenticator/ForgotPassword/ConfirmResetPassword.tsx
@@ -16,7 +16,7 @@ const { getResendCodeText, getResetYourPasswordText } = authenticatorTextUtil;
 export const ConfirmResetPassword = ({
   className,
   variation,
-}: RouteProps): JSX.Element => {
+}: RouteProps): React.JSX.Element => {
   const { isPending } = useAuthenticator((context) => [context.isPending]);
   const { handleBlur, handleChange, handleSubmit } = useFormHandlers();
 
@@ -59,13 +59,13 @@ export const ConfirmResetPassword = ({
   );
 };
 
-ConfirmResetPassword.Header = function Header(): JSX.Element {
+ConfirmResetPassword.Header = function Header(): React.JSX.Element {
   const headerText = getResetYourPasswordText();
 
   return <Heading level={3}>{headerText}</Heading>;
 };
 
-ConfirmResetPassword.Footer = function Footer(): JSX.Element {
+ConfirmResetPassword.Footer = function Footer(): React.JSX.Element {
   // @ts-ignore
   return null;
 };
diff --git a/packages/react/src/components/Authenticator/ForgotPassword/ForgotPassword.tsx b/packages/react/src/components/Authenticator/ForgotPassword/ForgotPassword.tsx
index a792dcd8542..0980578bade 100644
--- a/packages/react/src/components/Authenticator/ForgotPassword/ForgotPassword.tsx
+++ b/packages/react/src/components/Authenticator/ForgotPassword/ForgotPassword.tsx
@@ -21,7 +21,7 @@ const {
 export const ForgotPassword = ({
   className,
   variation,
-}: RouteProps): JSX.Element => {
+}: RouteProps): React.JSX.Element => {
   const { isPending } = useAuthenticator((context) => [context.isPending]);
   const { handleChange, handleSubmit } = useFormHandlers();
 
@@ -70,11 +70,11 @@ export const ForgotPassword = ({
   );
 };
 
-ForgotPassword.Header = function Header(): JSX.Element {
+ForgotPassword.Header = function Header(): React.JSX.Element {
   return <Heading level={3}>{getResetYourPasswordText()}</Heading>;
 };
 
-ForgotPassword.Footer = function Footer(): JSX.Element {
+ForgotPassword.Footer = function Footer(): React.JSX.Element {
   // @ts-ignore
   return null;
 };
diff --git a/packages/react/src/components/Authenticator/RouteContainer/RouteContainer.tsx b/packages/react/src/components/Authenticator/RouteContainer/RouteContainer.tsx
index 68ff8d05dbd..1f1170b619a 100644
--- a/packages/react/src/components/Authenticator/RouteContainer/RouteContainer.tsx
+++ b/packages/react/src/components/Authenticator/RouteContainer/RouteContainer.tsx
@@ -17,7 +17,7 @@ export function RouteContainer({
   children,
   className,
   variation = 'default',
-}: RouteContainerProps): JSX.Element {
+}: RouteContainerProps): React.JSX.Element {
   const { route } = useAuthenticator(({ route }) => [route]);
 
   const {
diff --git a/packages/react/src/components/Authenticator/Router/Router.tsx b/packages/react/src/components/Authenticator/Router/Router.tsx
index 78c81018af2..14c2c85d7c4 100644
--- a/packages/react/src/components/Authenticator/Router/Router.tsx
+++ b/packages/react/src/components/Authenticator/Router/Router.tsx
@@ -11,9 +11,11 @@ import { ConfirmResetPassword, ForgotPassword } from '../ForgotPassword';
 import { isSignInOrSignUpRoute } from '../utils';
 import { RouterProps } from './types';
 
-type RouteComponent = (props: Omit<RouterProps, 'children'>) => JSX.Element;
+type RouteComponent = (
+  props: Omit<RouterProps, 'children'>
+) => React.JSX.Element;
 
-function RenderNothing(): JSX.Element {
+function RenderNothing(): React.JSX.Element {
   // @ts-ignore
   return null;
 }
@@ -57,7 +59,7 @@ export function Router({
   className,
   hideSignUp,
   variation,
-}: RouterProps): JSX.Element {
+}: RouterProps): React.JSX.Element {
   const { route } = useAuthenticator(({ route }) => [route]);
   const RouterChildren = useMemo(() => getRouteComponent(route), [route]);
 
diff --git a/packages/react/src/components/Authenticator/SetupTotp/SetupTotp.tsx b/packages/react/src/components/Authenticator/SetupTotp/SetupTotp.tsx
index a75570dd12e..417721df1d1 100644
--- a/packages/react/src/components/Authenticator/SetupTotp/SetupTotp.tsx
+++ b/packages/react/src/components/Authenticator/SetupTotp/SetupTotp.tsx
@@ -24,7 +24,7 @@ const { getSetupTotpText, getCopiedText, getLoadingText } =
 export const SetupTotp = ({
   className,
   variation,
-}: RouteProps): JSX.Element => {
+}: RouteProps): React.JSX.Element => {
   const { totpSecretCode, isPending, username, QRFields } = useAuthenticator(
     (context) => [context.isPending, context.totpSecretCode, context.username]
   );
@@ -125,11 +125,11 @@ export const SetupTotp = ({
   );
 };
 
-SetupTotp.Header = function Header(): JSX.Element {
+SetupTotp.Header = function Header(): React.JSX.Element {
   return <Heading level={3}>{getSetupTotpText()}</Heading>;
 };
 
-SetupTotp.Footer = function Footer(): JSX.Element {
+SetupTotp.Footer = function Footer(): React.JSX.Element {
   // @ts-ignore
   return null;
 };
diff --git a/packages/react/src/components/Authenticator/SignIn/SignIn.tsx b/packages/react/src/components/Authenticator/SignIn/SignIn.tsx
index fa9675bff11..d0b10030412 100644
--- a/packages/react/src/components/Authenticator/SignIn/SignIn.tsx
+++ b/packages/react/src/components/Authenticator/SignIn/SignIn.tsx
@@ -15,7 +15,7 @@ import { FormFields } from '../shared/FormFields';
 const { getSignInText, getSigningInText, getForgotPasswordText } =
   authenticatorTextUtil;
 
-export function SignIn(): JSX.Element {
+export function SignIn(): React.JSX.Element {
   const { isPending } = useAuthenticator((context) => [context.isPending]);
   const { handleChange, handleSubmit } = useFormHandlers();
 
@@ -79,7 +79,7 @@ const DefaultFooter = () => {
 };
 
 SignIn.Footer = DefaultFooter;
-SignIn.Header = function Header(): JSX.Element {
+SignIn.Header = function Header(): React.JSX.Element {
   // @ts-ignore
   return null;
 };
diff --git a/packages/react/src/components/Authenticator/SignUp/SignUp.tsx b/packages/react/src/components/Authenticator/SignUp/SignUp.tsx
index 2088b16dfdc..6869b3715e0 100644
--- a/packages/react/src/components/Authenticator/SignUp/SignUp.tsx
+++ b/packages/react/src/components/Authenticator/SignUp/SignUp.tsx
@@ -13,7 +13,7 @@ import { FormFields as DefaultFormFields } from '../shared/FormFields';
 
 const { getCreateAccountText, getCreatingAccountText } = authenticatorTextUtil;
 
-export function SignUp(): JSX.Element {
+export function SignUp(): React.JSX.Element {
   const { hasValidationErrors, isPending } = useAuthenticator((context) => [
     context.hasValidationErrors,
     context.isPending,
@@ -68,14 +68,14 @@ export function SignUp(): JSX.Element {
   );
 }
 
-SignUp.Header = function Header(): JSX.Element {
+SignUp.Header = function Header(): React.JSX.Element {
   // @ts-ignore
   return null;
 };
 SignUp.FormFields = function FormFields() {
   return <DefaultFormFields />;
 };
-SignUp.Footer = function Footer(): JSX.Element {
+SignUp.Footer = function Footer(): React.JSX.Element {
   // @ts-ignore
   return null;
 };
diff --git a/packages/react/src/components/Authenticator/VerifyUser/ConfirmVerifyUser.tsx b/packages/react/src/components/Authenticator/VerifyUser/ConfirmVerifyUser.tsx
index c28b3ff020e..92468a9f4bc 100644
--- a/packages/react/src/components/Authenticator/VerifyUser/ConfirmVerifyUser.tsx
+++ b/packages/react/src/components/Authenticator/VerifyUser/ConfirmVerifyUser.tsx
@@ -16,7 +16,7 @@ const { getAccountRecoveryInfoText, getSkipText } = authenticatorTextUtil;
 export const ConfirmVerifyUser = ({
   className,
   variation,
-}: RouteProps): JSX.Element => {
+}: RouteProps): React.JSX.Element => {
   const { isPending } = useAuthenticator((context) => [context.isPending]);
   const { handleChange, handleSubmit } = useFormHandlers();
 
@@ -63,6 +63,6 @@ ConfirmVerifyUser.Header = function Header() {
   return <Heading level={3}>{getAccountRecoveryInfoText()}</Heading>;
 };
 
-ConfirmVerifyUser.Footer = function Footer(): JSX.Element | null {
+ConfirmVerifyUser.Footer = function Footer(): React.JSX.Element | null {
   return null;
 };
diff --git a/packages/react/src/components/Authenticator/VerifyUser/VerifyUser.tsx b/packages/react/src/components/Authenticator/VerifyUser/VerifyUser.tsx
index 9dc3d68ab85..0f5c42e5e25 100644
--- a/packages/react/src/components/Authenticator/VerifyUser/VerifyUser.tsx
+++ b/packages/react/src/components/Authenticator/VerifyUser/VerifyUser.tsx
@@ -28,7 +28,7 @@ const {
 
 const generateRadioGroup = (
   attributes: UnverifiedUserAttributes
-): JSX.Element[] => {
+): React.JSX.Element[] => {
   return Object.entries(attributes).map(
     ([key, value]: [string, string], index) => {
       const verificationType = (
@@ -52,7 +52,7 @@ const generateRadioGroup = (
 export const VerifyUser = ({
   className,
   variation,
-}: RouteProps): JSX.Element => {
+}: RouteProps): React.JSX.Element => {
   const {
     components: {
       // @ts-ignore
@@ -113,11 +113,11 @@ export const VerifyUser = ({
   );
 };
 
-VerifyUser.Header = function Header(): JSX.Element {
+VerifyUser.Header = function Header(): React.JSX.Element {
   return <Heading level={3}>{getAccountRecoveryInfoText()}</Heading>;
 };
 
-VerifyUser.Footer = function Footer(): JSX.Element {
+VerifyUser.Footer = function Footer(): React.JSX.Element {
   // @ts-ignore
   return null;
 };
diff --git a/packages/react/src/components/Authenticator/hooks/useCustomComponents/defaultComponents.tsx b/packages/react/src/components/Authenticator/hooks/useCustomComponents/defaultComponents.tsx
index 81135a4d1da..eb65ec883b9 100644
--- a/packages/react/src/components/Authenticator/hooks/useCustomComponents/defaultComponents.tsx
+++ b/packages/react/src/components/Authenticator/hooks/useCustomComponents/defaultComponents.tsx
@@ -9,9 +9,9 @@ import { ConfirmResetPassword, ForgotPassword } from '../../ForgotPassword';
 
 // use the very generic name of Components as this is a temporary interface and is not exported
 interface Components {
-  Footer?: () => JSX.Element | null;
-  FormFields?: () => JSX.Element | null;
-  Header?: () => JSX.Element | null;
+  Footer?: () => React.JSX.Element | null;
+  FormFields?: () => React.JSX.Element | null;
+  Header?: () => React.JSX.Element | null;
 }
 
 export interface DefaultComponents extends Omit<Components, 'FormFields'> {
@@ -29,7 +29,7 @@ export interface DefaultComponents extends Omit<Components, 'FormFields'> {
 
 export const defaultComponents: DefaultComponents = {
   // @ts-ignore
-  Header: (): JSX.Element => null,
+  Header: (): React.JSX.Element => null,
   SignIn: {
     Header: SignIn.Header,
     Footer: SignIn.Footer,
@@ -74,5 +74,5 @@ export const defaultComponents: DefaultComponents = {
     Footer: ForgotPassword.Footer,
   },
   // @ts-ignore
-  Footer: (): JSX.Element => null,
+  Footer: (): React.JSX.Element => null,
 };
diff --git a/packages/react/src/components/Authenticator/shared/ConfirmSignInFooter.tsx b/packages/react/src/components/Authenticator/shared/ConfirmSignInFooter.tsx
index 7e4285c921c..d4f355e2b5c 100644
--- a/packages/react/src/components/Authenticator/shared/ConfirmSignInFooter.tsx
+++ b/packages/react/src/components/Authenticator/shared/ConfirmSignInFooter.tsx
@@ -8,7 +8,7 @@ import { Flex } from '../../../primitives/Flex';
 const { getConfirmText, getConfirmingText, getBackToSignInText } =
   authenticatorTextUtil;
 
-export const ConfirmSignInFooter = (): JSX.Element => {
+export const ConfirmSignInFooter = (): React.JSX.Element => {
   const { isPending, toSignIn } = useAuthenticator((context) => [
     context.isPending,
     context.toSignIn,
diff --git a/packages/react/src/components/Authenticator/shared/ConfirmationCodeInput.tsx b/packages/react/src/components/Authenticator/shared/ConfirmationCodeInput.tsx
index c42dd53fc5f..b6f481eb59e 100644
--- a/packages/react/src/components/Authenticator/shared/ConfirmationCodeInput.tsx
+++ b/packages/react/src/components/Authenticator/shared/ConfirmationCodeInput.tsx
@@ -14,7 +14,7 @@ export interface ConfirmationCodeInputProps {
 
 export const ConfirmationCodeInput = (
   props: ConfirmationCodeInputProps
-): JSX.Element => {
+): React.JSX.Element => {
   const {
     errorText,
     labelHidden = true,
diff --git a/packages/react/src/components/Authenticator/shared/FormField.tsx b/packages/react/src/components/Authenticator/shared/FormField.tsx
index 1b8f3fc3154..1e752bebda8 100644
--- a/packages/react/src/components/Authenticator/shared/FormField.tsx
+++ b/packages/react/src/components/Authenticator/shared/FormField.tsx
@@ -20,7 +20,7 @@ export function FormField({
   name,
   type,
   ...props
-}: FormFieldProps): JSX.Element {
+}: FormFieldProps): React.JSX.Element {
   const { validationErrors } = useAuthenticator(({ validationErrors }) => [
     validationErrors,
   ]);
diff --git a/packages/react/src/components/Authenticator/shared/FormFields.tsx b/packages/react/src/components/Authenticator/shared/FormFields.tsx
index a8f63d5a98a..d9d0b90af7b 100644
--- a/packages/react/src/components/Authenticator/shared/FormFields.tsx
+++ b/packages/react/src/components/Authenticator/shared/FormFields.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { FormField, FormFieldProps } from './FormField';
 import { useAuthenticator } from '@aws-amplify/ui-react-core';
 
-export function FormFields(): JSX.Element {
+export function FormFields(): React.JSX.Element {
   const { fields } = useAuthenticator(({ route }) => [route]);
 
   const formFields = React.useRef(
diff --git a/packages/react/src/components/Authenticator/shared/RemoteErrorMessage.tsx b/packages/react/src/components/Authenticator/shared/RemoteErrorMessage.tsx
index 99b3df67ab1..fd76a8e0827 100644
--- a/packages/react/src/components/Authenticator/shared/RemoteErrorMessage.tsx
+++ b/packages/react/src/components/Authenticator/shared/RemoteErrorMessage.tsx
@@ -4,7 +4,7 @@ import { translate } from '@aws-amplify/ui';
 import { useAuthenticator } from '@aws-amplify/ui-react-core';
 import { Alert } from '../../../primitives/Alert';
 
-export const RemoteErrorMessage = (): JSX.Element => {
+export const RemoteErrorMessage = (): React.JSX.Element => {
   const { error } = useAuthenticator((context) => [context.error]);
 
   return (
diff --git a/packages/react/src/components/Authenticator/shared/SignInSignUpTabs.tsx b/packages/react/src/components/Authenticator/shared/SignInSignUpTabs.tsx
index fb0f01bd559..cf199af36a2 100644
--- a/packages/react/src/components/Authenticator/shared/SignInSignUpTabs.tsx
+++ b/packages/react/src/components/Authenticator/shared/SignInSignUpTabs.tsx
@@ -16,7 +16,7 @@ export const SignInSignUpTabs = ({
   variation,
 }: {
   hideSignUp: boolean;
-} & RouteProps): JSX.Element => {
+} & RouteProps): React.JSX.Element => {
   const { route, toSignIn, toSignUp } = useAuthenticator((context) => [
     context.route,
     context.toSignIn,
diff --git a/packages/react/src/components/Authenticator/shared/TwoButtonSubmitFooter.tsx b/packages/react/src/components/Authenticator/shared/TwoButtonSubmitFooter.tsx
index e6dcbf79b30..b0774d61e0c 100644
--- a/packages/react/src/components/Authenticator/shared/TwoButtonSubmitFooter.tsx
+++ b/packages/react/src/components/Authenticator/shared/TwoButtonSubmitFooter.tsx
@@ -8,14 +8,14 @@ import { Flex } from '../../../primitives/Flex';
 export interface TwoButtonSubmitFooterProps {
   cancelButtonSendType: AuthEventTypes;
   cancelButtonText: string;
-  submitButtonText?: JSX.Element;
+  submitButtonText?: React.JSX.Element;
 }
 
 const { getSubmitText, getSubmittingText } = authenticatorTextUtil;
 
 export const TwoButtonSubmitFooter = (
   props: TwoButtonSubmitFooterProps
-): JSX.Element => {
+): React.JSX.Element => {
   const { cancelButtonSendType, cancelButtonText, submitButtonText } = props;
 
   const { isPending, resendCode, skipVerification, toSignIn } =
diff --git a/packages/react/src/components/Authenticator/withAuthenticator.tsx b/packages/react/src/components/Authenticator/withAuthenticator.tsx
index f12ef167c39..450a8b88cbf 100644
--- a/packages/react/src/components/Authenticator/withAuthenticator.tsx
+++ b/packages/react/src/components/Authenticator/withAuthenticator.tsx
@@ -15,7 +15,7 @@ export interface WithAuthenticatorProps {
 export function withAuthenticator<Props = {}>(
   Component: React.ComponentType<Props & WithAuthenticatorProps>,
   options: WithAuthenticatorOptions = {}
-): (props: Props) => JSX.Element {
+): (props: Props) => React.JSX.Element {
   const { variation = 'modal' } = options;
 
   return function WrappedWithAuthenticator(props: Props) {
diff --git a/packages/react/src/components/FilterChildren/FilterChildren.tsx b/packages/react/src/components/FilterChildren/FilterChildren.tsx
index 3d7bca0d449..568c0d367ec 100644
--- a/packages/react/src/components/FilterChildren/FilterChildren.tsx
+++ b/packages/react/src/components/FilterChildren/FilterChildren.tsx
@@ -13,7 +13,7 @@ export const FilterChildren = ({
   allowedFilters,
   children = null,
   targetFilter,
-}: FilterChildrenProps): JSX.Element | null => {
+}: FilterChildrenProps): React.JSX.Element | null => {
   const showContent =
     Array.isArray(allowedFilters) &&
     allowedFilters.some((filter) => filter === targetFilter);
diff --git a/packages/react/src/components/ThemeProvider/ComponentStyle.tsx b/packages/react/src/components/ThemeProvider/ComponentStyle.tsx
index 933a8d09260..f06c6cf0ea1 100644
--- a/packages/react/src/components/ThemeProvider/ComponentStyle.tsx
+++ b/packages/react/src/components/ThemeProvider/ComponentStyle.tsx
@@ -18,7 +18,7 @@ export const ComponentStyle = ({
   theme,
   componentThemes = [],
   ...rest
-}: ComponentStyleProps): JSX.Element | null => {
+}: ComponentStyleProps): React.JSX.Element | null => {
   if (!theme || !componentThemes.length) {
     return null;
   }
diff --git a/packages/react/src/components/ThemeProvider/GlobalStyle.tsx b/packages/react/src/components/ThemeProvider/GlobalStyle.tsx
index 67fbca0af9b..e47e1f88d38 100644
--- a/packages/react/src/components/ThemeProvider/GlobalStyle.tsx
+++ b/packages/react/src/components/ThemeProvider/GlobalStyle.tsx
@@ -15,7 +15,7 @@ interface GlobalStyleProps extends React.ComponentProps<'style'> {
 export const GlobalStyle = ({
   styles,
   ...rest
-}: GlobalStyleProps): JSX.Element | null => {
+}: GlobalStyleProps): React.JSX.Element | null => {
   if (!styles) {
     return null;
   }
diff --git a/packages/react/src/components/ThemeProvider/Style.tsx b/packages/react/src/components/ThemeProvider/Style.tsx
index 2c72940ab5b..6f2e2ba4d06 100644
--- a/packages/react/src/components/ThemeProvider/Style.tsx
+++ b/packages/react/src/components/ThemeProvider/Style.tsx
@@ -4,7 +4,10 @@ interface StyleProps extends React.ComponentProps<'style'> {
   cssText?: string;
 }
 
-export const Style = ({ cssText, ...rest }: StyleProps): JSX.Element | null => {
+export const Style = ({
+  cssText,
+  ...rest
+}: StyleProps): React.JSX.Element | null => {
   /*
     Only inject theme CSS variables if given a theme.
     The CSS file users import already has the default theme variables in it.
diff --git a/packages/react/src/components/ThemeProvider/ThemeProvider.tsx b/packages/react/src/components/ThemeProvider/ThemeProvider.tsx
index b382ee885c6..4fa6d763528 100644
--- a/packages/react/src/components/ThemeProvider/ThemeProvider.tsx
+++ b/packages/react/src/components/ThemeProvider/ThemeProvider.tsx
@@ -50,7 +50,7 @@ export function ThemeProvider({
   direction = 'ltr',
   nonce,
   theme,
-}: ThemeProviderProps): JSX.Element {
+}: ThemeProviderProps): React.JSX.Element {
   const value = React.useMemo(
     () => ({ theme: createTheme(theme), colorMode }),
     [theme, colorMode]
diff --git a/packages/react/src/components/ThemeProvider/ThemeStyle.tsx b/packages/react/src/components/ThemeProvider/ThemeStyle.tsx
index 769d90a4870..28f5d1c3f9d 100644
--- a/packages/react/src/components/ThemeProvider/ThemeStyle.tsx
+++ b/packages/react/src/components/ThemeProvider/ThemeStyle.tsx
@@ -15,7 +15,7 @@ interface ThemeStyleProps extends React.ComponentProps<'style'> {
 export const ThemeStyle = ({
   theme,
   ...rest
-}: ThemeStyleProps): JSX.Element | null => {
+}: ThemeStyleProps): React.JSX.Element | null => {
   if (!theme) return null;
 
   const { name, cssText } = theme;
diff --git a/packages/react/src/components/shared/ValidationErrors.tsx b/packages/react/src/components/shared/ValidationErrors.tsx
index 7007db4c324..958b72d01c5 100644
--- a/packages/react/src/components/shared/ValidationErrors.tsx
+++ b/packages/react/src/components/shared/ValidationErrors.tsx
@@ -13,7 +13,7 @@ export const ValidationErrors = ({
   errors,
   id,
   dataAttr,
-}: ValidationErrorsProps): JSX.Element | null => {
+}: ValidationErrorsProps): React.JSX.Element | null => {
   if (!(errors?.length > 0)) return null;
 
   const dataAttrProp = dataAttr ? { [dataAttr]: true } : {};
diff --git a/packages/react/src/primitives/Alert/AlertIcon.tsx b/packages/react/src/primitives/Alert/AlertIcon.tsx
index 9628d049a74..c8b958bbad4 100644
--- a/packages/react/src/primitives/Alert/AlertIcon.tsx
+++ b/packages/react/src/primitives/Alert/AlertIcon.tsx
@@ -24,7 +24,7 @@ export const AlertIcon = ({
   ariaHidden,
   ariaLabel,
   role,
-}: AlertIconProps): JSX.Element | null => {
+}: AlertIconProps): React.JSX.Element | null => {
   const icons = useIcons('alert');
   let icon;
   switch (variation) {
diff --git a/packages/react/src/primitives/CheckboxField/__tests__/CheckboxField.test.tsx b/packages/react/src/primitives/CheckboxField/__tests__/CheckboxField.test.tsx
index 83275041240..f53ff6525e9 100644
--- a/packages/react/src/primitives/CheckboxField/__tests__/CheckboxField.test.tsx
+++ b/packages/react/src/primitives/CheckboxField/__tests__/CheckboxField.test.tsx
@@ -64,7 +64,7 @@ describe('CheckboxField test suite', () => {
   });
 
   describe('Checkbox functionality', () => {
-    const expectFunctionality = async (component: JSX.Element) => {
+    const expectFunctionality = async (component: React.JSX.Element) => {
       render(component);
 
       const checkbox = await screen.findByTestId(
diff --git a/packages/react/src/primitives/Collection/Collection.tsx b/packages/react/src/primitives/Collection/Collection.tsx
index e15ce2ec08b..e19153fcd99 100644
--- a/packages/react/src/primitives/Collection/Collection.tsx
+++ b/packages/react/src/primitives/Collection/Collection.tsx
@@ -42,7 +42,7 @@ const GridCollection = <Item,>({
 );
 
 const renderCollectionOrNoResultsFound = <Item,>(
-  collection: JSX.Element | null,
+  collection: React.JSX.Element | null,
   items: Item[],
   searchNoResultsFound: React.ReactNode
 ) => {
@@ -75,7 +75,7 @@ export const Collection = <Item, Element extends ElementType>({
   type = 'list',
   testId,
   ...rest
-}: BaseCollectionProps<Item, Element>): JSX.Element => {
+}: BaseCollectionProps<Item, Element>): React.JSX.Element => {
   const [searchText, setSearchText] = React.useState<string>();
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/packages/react/src/primitives/DropZone/DropZone.tsx b/packages/react/src/primitives/DropZone/DropZone.tsx
index 2d15d3ce684..83ace13ee67 100644
--- a/packages/react/src/primitives/DropZone/DropZone.tsx
+++ b/packages/react/src/primitives/DropZone/DropZone.tsx
@@ -6,7 +6,14 @@ import { DropZoneProps, BaseDropZoneProps } from './types';
 import { DropZoneProvider } from './DropZoneProvider';
 import { DropZoneContainer } from './DropZoneContainer';
 import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef';
-import { Accepted, Default, Rejected } from './DropZoneChildren';
+import {
+  Accepted,
+  AcceptedType,
+  Default,
+  DefaultType,
+  Rejected,
+  RejectedType,
+} from './DropZoneChildren';
 
 const DropZonePrimitive: Primitive<DropZoneProps, 'div'> = (
   { children, testId, isDisabled, acceptedFileTypes, onDropComplete, ...rest },
@@ -45,9 +52,9 @@ const DropZonePrimitive: Primitive<DropZoneProps, 'div'> = (
 };
 
 type DropZoneType = ForwardRefPrimitive<BaseDropZoneProps, 'div'> & {
-  Accepted: typeof Accepted;
-  Rejected: typeof Rejected;
-  Default: typeof Default;
+  Accepted: AcceptedType;
+  Rejected: RejectedType;
+  Default: DefaultType;
 };
 
 /**
diff --git a/packages/react/src/primitives/DropZone/DropZoneChildren.tsx b/packages/react/src/primitives/DropZone/DropZoneChildren.tsx
index 07cbe9c8699..d1a05904add 100644
--- a/packages/react/src/primitives/DropZone/DropZoneChildren.tsx
+++ b/packages/react/src/primitives/DropZone/DropZoneChildren.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Primitive } from '../types';
 import { DropZoneContext } from './DropZoneProvider';
 
 /**
@@ -7,12 +6,13 @@ import { DropZoneContext } from './DropZoneProvider';
  * in DropZone without having to expose the DropZoneContext.
  */
 
+export type AcceptedType = (props: {
+  children?: React.ReactNode;
+}) => React.JSX.Element | null;
 /**
  * This component renders when the user is dragging ONLY accepted files on the DropZone.
  */
-const Accepted: Primitive<{ children?: React.ReactNode }, 'div'> = ({
-  children,
-}) => {
+export const Accepted: AcceptedType = ({ children }) => {
   const dragState = React.useContext(DropZoneContext);
   if (!dragState) {
     throw new Error('`DropZone.Accept` must be used inside a DropZone');
@@ -20,12 +20,13 @@ const Accepted: Primitive<{ children?: React.ReactNode }, 'div'> = ({
   return dragState === 'accept' ? <>{children}</> : null;
 };
 
+export type RejectedType = (props: {
+  children?: React.ReactNode;
+}) => React.JSX.Element | null;
 /**
  * This component renders when the user is dragging ANY rejected files on the DropZone.
  */
-const Rejected: Primitive<{ children?: React.ReactNode }, 'div'> = ({
-  children,
-}) => {
+export const Rejected: RejectedType = ({ children }) => {
   const dragState = React.useContext(DropZoneContext);
   if (!dragState) {
     throw new Error('`DropZone.Rejected` must be used inside a DropZone');
@@ -33,17 +34,16 @@ const Rejected: Primitive<{ children?: React.ReactNode }, 'div'> = ({
   return dragState === 'reject' ? <>{children}</> : null;
 };
 
+export type DefaultType = (props: {
+  children?: React.ReactNode;
+}) => React.JSX.Element | null;
 /**
  * This component renders by default when the user is not dragging.
  */
-const Default: Primitive<{ children?: React.ReactNode }, 'div'> = ({
-  children,
-}) => {
+export const Default: DefaultType = ({ children }) => {
   const dragState = React.useContext(DropZoneContext);
   if (!dragState) {
     throw new Error('`DropZone.Default` must be used inside a DropZone');
   }
   return dragState === 'inactive' ? <>{children}</> : null;
 };
-
-export { Accepted, Rejected, Default };
diff --git a/packages/react/src/primitives/DropZone/DropZoneProvider.tsx b/packages/react/src/primitives/DropZone/DropZoneProvider.tsx
index e1b2992dfa5..048f1f138c0 100644
--- a/packages/react/src/primitives/DropZone/DropZoneProvider.tsx
+++ b/packages/react/src/primitives/DropZone/DropZoneProvider.tsx
@@ -10,7 +10,7 @@ const DropZoneProvider = ({
 }: {
   value: DragState;
   children?: React.ReactNode;
-}): JSX.Element => {
+}): React.JSX.Element => {
   return (
     <DropZoneContext.Provider value={value}>
       {children}
diff --git a/packages/react/src/primitives/Icon/context/IconsProvider.tsx b/packages/react/src/primitives/Icon/context/IconsProvider.tsx
index 5120810aa36..b9d037443ea 100644
--- a/packages/react/src/primitives/Icon/context/IconsProvider.tsx
+++ b/packages/react/src/primitives/Icon/context/IconsProvider.tsx
@@ -11,7 +11,7 @@ export { IconsContextInterface };
 export function IconsProvider({
   children,
   icons,
-}: IconProviderProps): JSX.Element {
+}: IconProviderProps): React.JSX.Element {
   return (
     <IconsContext.Provider value={icons}>{children}</IconsContext.Provider>
   );
diff --git a/packages/react/src/primitives/Icon/icons/types.ts b/packages/react/src/primitives/Icon/icons/types.ts
index 618816aa673..cd871a9a5eb 100644
--- a/packages/react/src/primitives/Icon/icons/types.ts
+++ b/packages/react/src/primitives/Icon/icons/types.ts
@@ -4,4 +4,4 @@ export type InternalIcon = (
   props: ViewProps & {
     size?: string | number;
   }
-) => JSX.Element;
+) => React.JSX.Element;
diff --git a/packages/react/src/primitives/Link/__tests__/Link.test.tsx b/packages/react/src/primitives/Link/__tests__/Link.test.tsx
index 0f27bde9abd..d5c784d95ac 100644
--- a/packages/react/src/primitives/Link/__tests__/Link.test.tsx
+++ b/packages/react/src/primitives/Link/__tests__/Link.test.tsx
@@ -1,47 +1,9 @@
 import * as React from 'react';
-import { act, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
 
 import { ComponentClassName } from '@aws-amplify/ui';
 import { Link } from '../Link';
 import { Text } from '../../Text/Text';
-import { Flex } from '../../Flex';
-import { Heading } from '../../Heading';
-
-import {
-  BrowserRouter as Router,
-  Link as ReactRouterLink,
-  Routes,
-  Route,
-} from 'react-router-dom';
-
-function Home() {
-  return <Heading level={2}>You are home</Heading>;
-}
-
-function About() {
-  return <Heading level={2}>You are on the about page</Heading>;
-}
-
-function SampleRoutingApp() {
-  return (
-    <Router>
-      <Flex>
-        <Link as={ReactRouterLink} to="/">
-          Home
-        </Link>
-        <Link as={ReactRouterLink} to="/about">
-          About
-        </Link>
-      </Flex>
-
-      <Routes>
-        <Route path="/about" element={<About />} />
-        <Route path="/" element={<Home />} />
-      </Routes>
-    </Router>
-  );
-}
 
 describe('Link:', () => {
   const linkText = 'My Link';
@@ -104,17 +66,4 @@ describe('Link:', () => {
       textDecoration: 'underline',
     });
   });
-
-  it('can integrate with react-router-dom using the "to" prop', async () => {
-    render(<SampleRoutingApp />);
-
-    expect(screen.getByText(/you are home/i)).toBeInTheDocument();
-
-    const events = userEvent.setup();
-    await act(async () => {
-      await events.click(screen.getByText(/about/i));
-    });
-
-    expect(screen.getByText(/you are on the about page/i)).toBeInTheDocument();
-  });
 });
diff --git a/packages/react/src/primitives/Pagination/usePaginationItems.tsx b/packages/react/src/primitives/Pagination/usePaginationItems.tsx
index 7a15dd77a1f..ba8dc33302f 100644
--- a/packages/react/src/primitives/Pagination/usePaginationItems.tsx
+++ b/packages/react/src/primitives/Pagination/usePaginationItems.tsx
@@ -40,7 +40,7 @@ export const usePaginationItems = ({
   onNext,
   onPrevious,
   onChange,
-}: UsePaginationItemsProps): JSX.Element[] => {
+}: UsePaginationItemsProps): React.JSX.Element[] => {
   const previousItem = (
     <PaginationItem
       type="previous"
diff --git a/packages/react/src/primitives/Tabs/TabsList.tsx b/packages/react/src/primitives/Tabs/TabsList.tsx
index d9b28e47768..c8804644225 100644
--- a/packages/react/src/primitives/Tabs/TabsList.tsx
+++ b/packages/react/src/primitives/Tabs/TabsList.tsx
@@ -10,7 +10,7 @@ import { BaseTabsListProps, TabsListProps, TabsItemProps } from './types';
 import { TabsContext } from './TabsContext';
 
 const isValidTab = (
-  child: React.ReactFragment | React.ReactChild | React.ReactPortal
+  child: unknown
 ): child is React.ReactElement<TabsItemProps> =>
   React.isValidElement<TabsItemProps>(child);
 
diff --git a/packages/react/src/primitives/types/autocomplete.ts b/packages/react/src/primitives/types/autocomplete.ts
index 77bc636b20d..5c4619bbf6d 100644
--- a/packages/react/src/primitives/types/autocomplete.ts
+++ b/packages/react/src/primitives/types/autocomplete.ts
@@ -56,7 +56,7 @@ export interface BaseAutocompleteMenuProps extends BaseViewProps {
    * @description
    * A list of Option JSX elements
    */
-  children: JSX.Element[];
+  children: React.JSX.Element[];
 
   /**
    * @description
diff --git a/packages/react/src/primitives/types/collection.ts b/packages/react/src/primitives/types/collection.ts
index 48fd7ce5fe3..0d001d9e334 100644
--- a/packages/react/src/primitives/types/collection.ts
+++ b/packages/react/src/primitives/types/collection.ts
@@ -66,7 +66,7 @@ interface CollectionChildren<Item> {
    * The component to be repeated
    * Same interface as Array.prototype.map
    */
-  children: (item: Item, index: number) => JSX.Element;
+  children: (item: Item, index: number) => React.JSX.Element;
 }
 
 export interface CollectionBaseProps<Item> extends CollectionChildren<Item> {
@@ -84,7 +84,7 @@ export type GridCollectionProps<Item> = Omit<BaseGridProps, 'children'> &
 
 /**
  * Omits `React.ReactNode` as children to prevent intersection type for `children` of
- * `React.ReactNode & (item: Item, index: number) => JSX.Element`
+ * `React.ReactNode & (item: Item, index: number) => React.JSX.Element`
  * and replaces with `CollectionChildren`
  */
 type ReplaceChildren<T, Item> = Omit<T, 'children'> & CollectionChildren<Item>;
diff --git a/packages/react/src/primitives/types/rating.ts b/packages/react/src/primitives/types/rating.ts
index cb2212eeec0..dba149202a0 100644
--- a/packages/react/src/primitives/types/rating.ts
+++ b/packages/react/src/primitives/types/rating.ts
@@ -21,7 +21,7 @@ export interface RatingOptions {
    * override the empty icon an will create a rating component that uses
    * different icons for filled and empty icons.
    */
-  emptyIcon?: JSX.Element;
+  emptyIcon?: React.JSX.Element;
 
   /**
    * @description
@@ -37,7 +37,7 @@ export interface RatingOptions {
    * with the emptyIcon prop
    * Default is <IconStar />
    */
-  icon?: JSX.Element;
+  icon?: React.JSX.Element;
 
   /**
    * @description
diff --git a/packages/react/src/primitives/types/view.ts b/packages/react/src/primitives/types/view.ts
index dd44242a6d6..6bf95f001b9 100644
--- a/packages/react/src/primitives/types/view.ts
+++ b/packages/react/src/primitives/types/view.ts
@@ -62,7 +62,7 @@ export type PrimitiveProps<
  */
 interface JSElementForwardRefRenderFunction<T, P = {}> {
   // return `JSX.Element` or `null` in place of `React.ReactNode`
-  (props: P, ref: React.ForwardedRef<T>): JSX.Element | null;
+  (props: P, ref: React.ForwardedRef<T>): React.JSX.Element | null;
   displayName?: string | undefined;
   // explicit rejected with `never` required due to
   // https://github.com/microsoft/TypeScript/issues/36826
@@ -94,7 +94,8 @@ interface JSXElementForwardRefExoticComponent<P = {}> {
   (props: P): React.ReactElement | null;
   defaultProps?: Partial<P> | undefined;
   displayName?: string | undefined;
-  propTypes?: React.WeakValidationMap<P> | undefined;
+  // deprecated in React@19 but needed for backwards compatibility in previous versions
+  propTypes?: any;
   readonly $$typeof: symbol;
 }
 
@@ -107,7 +108,7 @@ export interface ForwardRefPrimitive<
   // overload the JSX constructor to make it accept generics
   <Element extends ElementType = DefaultElement>(
     props: PrimitiveProps<Props, Element>
-  ): React.ReactElement | null;
+  ): React.ReactElement<Props, Element> | null;
 }
 
 /** @deprecated For internal use only */
diff --git a/packages/react/src/primitives/utils/primitiveWithForwardRef.ts b/packages/react/src/primitives/utils/primitiveWithForwardRef.ts
index 7956895011c..165063403a1 100644
--- a/packages/react/src/primitives/utils/primitiveWithForwardRef.ts
+++ b/packages/react/src/primitives/utils/primitiveWithForwardRef.ts
@@ -20,6 +20,6 @@ export const primitiveWithForwardRef = <
   P extends BaseViewProps,
   E extends ElementType,
 >(
-  primitive: Primitive<P, E>
+  primitive: Primitive<React.PropsWithoutRef<P>, E>
 ): ForwardRefPrimitive<P, E> =>
   React.forwardRef(primitive) as ForwardRefPrimitive<P, E>;
diff --git a/yarn.lock b/yarn.lock
index 87cde210a7f..f78e96333f9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5532,7 +5532,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.21.0"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673"
   integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==
@@ -6575,25 +6575,32 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.44.0.tgz#961a5903c74139390478bdc808bcde3fc45ab7af"
   integrity sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw==
 
-"@floating-ui/core@^0.7.3":
-  version "0.7.3"
-  resolved "https://registry.npmjs.org/@floating-ui/core/-/core-0.7.3.tgz#d274116678ffae87f6b60e90f88cc4083eefab86"
-  integrity sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg==
+"@floating-ui/core@^1.6.0":
+  version "1.6.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.8.tgz#aa43561be075815879305965020f492cdb43da12"
+  integrity sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==
+  dependencies:
+    "@floating-ui/utils" "^0.2.8"
 
-"@floating-ui/dom@^0.5.3":
-  version "0.5.4"
-  resolved "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.5.4.tgz#4eae73f78bcd4bd553ae2ade30e6f1f9c73fe3f1"
-  integrity sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==
+"@floating-ui/dom@^1.0.0":
+  version "1.6.12"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.12.tgz#6333dcb5a8ead3b2bf82f33d6bc410e95f54e556"
+  integrity sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==
   dependencies:
-    "@floating-ui/core" "^0.7.3"
+    "@floating-ui/core" "^1.6.0"
+    "@floating-ui/utils" "^0.2.8"
 
-"@floating-ui/react-dom@0.7.2":
-  version "0.7.2"
-  resolved "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-0.7.2.tgz#0bf4ceccb777a140fc535c87eb5d6241c8e89864"
-  integrity sha512-1T0sJcpHgX/u4I1OzIEhlcrvkUN8ln39nz7fMoE/2HDHrPiMFoOGR7++GYyfUmIQHkkrTinaeQsO3XWubjSvGg==
+"@floating-ui/react-dom@^2.0.0":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.2.tgz#a1349bbf6a0e5cb5ded55d023766f20a4d439a31"
+  integrity sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==
   dependencies:
-    "@floating-ui/dom" "^0.5.3"
-    use-isomorphic-layout-effect "^1.1.1"
+    "@floating-ui/dom" "^1.0.0"
+
+"@floating-ui/utils@^0.2.8":
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.8.tgz#21a907684723bbbaa5f0974cf7730bd797eb8e62"
+  integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==
 
 "@gar/promisify@^1.1.3":
   version "1.1.3"
@@ -7613,278 +7620,242 @@
     unbzip2-stream "^1.4.3"
     yargs "^17.7.2"
 
-"@radix-ui/number@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.0.tgz#4c536161d0de750b3f5d55860fc3de46264f897b"
-  integrity sha512-Ofwh/1HX69ZfJRiRBMTy7rgjAzHmwe4kW9C9Y99HTRUcYLUuVT0KESFj15rPjRgKJs20GPq8Bm5aEDJ8DuA3vA==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
+"@radix-ui/number@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.1.0.tgz#1e95610461a09cdf8bb05c152e76ca1278d5da46"
+  integrity sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==
 
-"@radix-ui/primitive@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.0.tgz#e1d8ef30b10ea10e69c76e896f608d9276352253"
-  integrity sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
+"@radix-ui/primitive@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.1.1.tgz#fc169732d755c7fbad33ba8d0cd7fd10c90dc8e3"
+  integrity sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==
 
-"@radix-ui/react-arrow@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.0.tgz#c461f4c2cab3317e3d42a1ae62910a4cbb0192a1"
-  integrity sha512-1MUuv24HCdepi41+qfv125EwMuxgQ+U+h0A9K3BjCO/J8nVRREKHHpkD9clwfnjEDk9hgGzCnff4aUKCPiRepw==
+"@radix-ui/react-arrow@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.1.1.tgz#2103721933a8bfc6e53bbfbdc1aaad5fc8ba0dd7"
+  integrity sha512-NaVpZfmv8SKeZbn4ijN2V3jlHA9ngBG16VnIIm22nUR0Yk8KUALyBxT3KYEUnNuch9sTE8UTsS3whzBgKOL30w==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-primitive" "1.0.0"
+    "@radix-ui/react-primitive" "2.0.1"
 
-"@radix-ui/react-collection@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.0.tgz#0ec4c72fabd35a03b5787075ac799e3b17ca5710"
-  integrity sha512-8i1pf5dKjnq90Z8udnnXKzdCEV3/FYrfw0n/b6NvB6piXEn3fO1bOh7HBcpG8XrnIXzxlYu2oCcR38QpyLS/mg==
+"@radix-ui/react-collection@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.1.1.tgz#be2c7e01d3508e6d4b6d838f492e7d182f17d3b0"
+  integrity sha512-LwT3pSho9Dljg+wY2KN2mrrh6y3qELfftINERIzBUO9e0N+t0oMTyn3k9iv+ZqgrwGkRnLpNJrsMv9BZlt2yuA==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-compose-refs" "1.0.0"
-    "@radix-ui/react-context" "1.0.0"
-    "@radix-ui/react-primitive" "1.0.0"
-    "@radix-ui/react-slot" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.1.1"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.1"
+    "@radix-ui/react-slot" "1.1.1"
 
-"@radix-ui/react-compose-refs@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz#37595b1f16ec7f228d698590e78eeed18ff218ae"
-  integrity sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
+"@radix-ui/react-compose-refs@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz#6f766faa975f8738269ebb8a23bad4f5a8d2faec"
+  integrity sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==
 
-"@radix-ui/react-context@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.0.tgz#f38e30c5859a9fb5e9aa9a9da452ee3ed9e0aee0"
-  integrity sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
+"@radix-ui/react-context@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.1.tgz#82074aa83a472353bb22e86f11bcbd1c61c4c71a"
+  integrity sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==
 
-"@radix-ui/react-direction@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.0.tgz#a2e0b552352459ecf96342c79949dd833c1e6e45"
-  integrity sha512-2HV05lGUgYcA6xgLQ4BKPDmtL+QbIZYH5fCOTAOOcJ5O0QbWS3i9lKaurLzliYUDhORI2Qr3pyjhJh44lKA3rQ==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
+"@radix-ui/react-direction@1.1.0", "@radix-ui/react-direction@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.1.0.tgz#a7d39855f4d077adc2a1922f9c353c5977a09cdc"
+  integrity sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==
 
-"@radix-ui/react-dismissable-layer@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.0.tgz#35b7826fa262fd84370faef310e627161dffa76b"
-  integrity sha512-n7kDRfx+LB1zLueRDvZ1Pd0bxdJWDUZNQ/GWoxDn2prnuJKRdxsjulejX/ePkOsLi2tTm6P24mDqlMSgQpsT6g==
+"@radix-ui/react-dismissable-layer@1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.3.tgz#4ee0f0f82d53bf5bd9db21665799bb0d1bad5ed8"
+  integrity sha512-onrWn/72lQoEucDmJnr8uczSNTujT0vJnA/X5+3AkChVPowr8n1yvIKIabhWyMQeMvvmdpsvcyDqx3X1LEXCPg==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/primitive" "1.0.0"
-    "@radix-ui/react-compose-refs" "1.0.0"
-    "@radix-ui/react-primitive" "1.0.0"
-    "@radix-ui/react-use-callback-ref" "1.0.0"
-    "@radix-ui/react-use-escape-keydown" "1.0.0"
+    "@radix-ui/primitive" "1.1.1"
+    "@radix-ui/react-compose-refs" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.1"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    "@radix-ui/react-use-escape-keydown" "1.1.0"
 
-"@radix-ui/react-dropdown-menu@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-1.0.0.tgz#687959e1bcdd5e8eb0de406484aff28d0974c593"
-  integrity sha512-Ptben3TxPWrZLbInO7zjAK73kmjYuStsxfg6ujgt+EywJyREoibhZYnsSNqC+UiOtl4PdW/MOHhxVDtew5fouQ==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/primitive" "1.0.0"
-    "@radix-ui/react-compose-refs" "1.0.0"
-    "@radix-ui/react-context" "1.0.0"
-    "@radix-ui/react-id" "1.0.0"
-    "@radix-ui/react-menu" "1.0.0"
-    "@radix-ui/react-primitive" "1.0.0"
-    "@radix-ui/react-use-controllable-state" "1.0.0"
-
-"@radix-ui/react-focus-guards@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.0.tgz#339c1c69c41628c1a5e655f15f7020bf11aa01fa"
-  integrity sha512-UagjDk4ijOAnGu4WMUPj9ahi7/zJJqNZ9ZAiGPp7waUWJO0O1aWXi/udPphI0IUjvrhBsZJGSN66dR2dsueLWQ==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
+"@radix-ui/react-dropdown-menu@^2.1.0":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.4.tgz#5e1f453296dd9ae99224a26c36851832d26cf507"
+  integrity sha512-iXU1Ab5ecM+yEepGAWK8ZhMyKX4ubFdCNtol4sT9D0OVErG9PNElfx3TQhjw7n7BC5nFVz68/5//clWy+8TXzA==
+  dependencies:
+    "@radix-ui/primitive" "1.1.1"
+    "@radix-ui/react-compose-refs" "1.1.1"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-menu" "2.1.4"
+    "@radix-ui/react-primitive" "2.0.1"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+
+"@radix-ui/react-focus-guards@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz#8635edd346304f8b42cae86b05912b61aef27afe"
+  integrity sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==
 
-"@radix-ui/react-focus-scope@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.0.tgz#95a0c1188276dc8933b1eac5f1cdb6471e01ade5"
-  integrity sha512-C4SWtsULLGf/2L4oGeIHlvWQx7Rf+7cX/vKOAD2dXW0A1b5QXwi3wWeaEgW+wn+SEVrraMUk05vLU9fZZz5HbQ==
+"@radix-ui/react-focus-scope@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.1.tgz#5c602115d1db1c4fcfa0fae4c3b09bb8919853cb"
+  integrity sha512-01omzJAYRxXdG2/he/+xy+c8a8gCydoQ1yOxnWNcRhrrBW5W+RQJ22EK1SaO8tb3WoUsuEw7mJjBozPzihDFjA==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-compose-refs" "1.0.0"
-    "@radix-ui/react-primitive" "1.0.0"
-    "@radix-ui/react-use-callback-ref" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.1"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
 
-"@radix-ui/react-id@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz#8d43224910741870a45a8c9d092f25887bb6d11e"
-  integrity sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==
+"@radix-ui/react-id@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.1.0.tgz#de47339656594ad722eb87f94a6b25f9cffae0ed"
+  integrity sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-use-layout-effect" "1.0.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
 
-"@radix-ui/react-menu@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-1.0.0.tgz#f1e07778c0011aa0c5be260fee88491d3aadf261"
-  integrity sha512-icW4C64T6nHh3Z4Q1fxO1RlSShouFF4UpUmPV8FLaJZfphDljannKErDuALDx4ClRLihAPZ9i+PrLNPoWS2DMA==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/primitive" "1.0.0"
-    "@radix-ui/react-collection" "1.0.0"
-    "@radix-ui/react-compose-refs" "1.0.0"
-    "@radix-ui/react-context" "1.0.0"
-    "@radix-ui/react-direction" "1.0.0"
-    "@radix-ui/react-dismissable-layer" "1.0.0"
-    "@radix-ui/react-focus-guards" "1.0.0"
-    "@radix-ui/react-focus-scope" "1.0.0"
-    "@radix-ui/react-id" "1.0.0"
-    "@radix-ui/react-popper" "1.0.0"
-    "@radix-ui/react-portal" "1.0.0"
-    "@radix-ui/react-presence" "1.0.0"
-    "@radix-ui/react-primitive" "1.0.0"
-    "@radix-ui/react-roving-focus" "1.0.0"
-    "@radix-ui/react-slot" "1.0.0"
-    "@radix-ui/react-use-callback-ref" "1.0.0"
+"@radix-ui/react-menu@2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-2.1.4.tgz#ac7aec296f29608206a7c6ef6335d8f102edaa95"
+  integrity sha512-BnOgVoL6YYdHAG6DtXONaR29Eq4nvbi8rutrV/xlr3RQCMMb3yqP85Qiw/3NReozrSW+4dfLkK+rc1hb4wPU/A==
+  dependencies:
+    "@radix-ui/primitive" "1.1.1"
+    "@radix-ui/react-collection" "1.1.1"
+    "@radix-ui/react-compose-refs" "1.1.1"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-direction" "1.1.0"
+    "@radix-ui/react-dismissable-layer" "1.1.3"
+    "@radix-ui/react-focus-guards" "1.1.1"
+    "@radix-ui/react-focus-scope" "1.1.1"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-popper" "1.2.1"
+    "@radix-ui/react-portal" "1.1.3"
+    "@radix-ui/react-presence" "1.1.2"
+    "@radix-ui/react-primitive" "2.0.1"
+    "@radix-ui/react-roving-focus" "1.1.1"
+    "@radix-ui/react-slot" "1.1.1"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
     aria-hidden "^1.1.1"
-    react-remove-scroll "2.5.4"
+    react-remove-scroll "^2.6.1"
 
-"@radix-ui/react-popper@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.0.0.tgz#fb4f937864bf39c48f27f55beee61fa9f2bef93c"
-  integrity sha512-k2dDd+1Wl0XWAMs9ZvAxxYsB9sOsEhrFQV4CINd7IUZf0wfdye4OHen9siwxvZImbzhgVeKTJi68OQmPRvVdMg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@floating-ui/react-dom" "0.7.2"
-    "@radix-ui/react-arrow" "1.0.0"
-    "@radix-ui/react-compose-refs" "1.0.0"
-    "@radix-ui/react-context" "1.0.0"
-    "@radix-ui/react-primitive" "1.0.0"
-    "@radix-ui/react-use-layout-effect" "1.0.0"
-    "@radix-ui/react-use-rect" "1.0.0"
-    "@radix-ui/react-use-size" "1.0.0"
-    "@radix-ui/rect" "1.0.0"
-
-"@radix-ui/react-portal@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.0.tgz#7220b66743394fabb50c55cb32381395cc4a276b"
-  integrity sha512-a8qyFO/Xb99d8wQdu4o7qnigNjTPG123uADNecz0eX4usnQEj7o+cG4ZX4zkqq98NYekT7UoEQIjxBNWIFuqTA==
+"@radix-ui/react-popper@1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.2.1.tgz#2fc66cfc34f95f00d858924e3bee54beae2dff0a"
+  integrity sha512-3kn5Me69L+jv82EKRuQCXdYyf1DqHwD2U/sxoNgBGCB7K9TRc3bQamQ+5EPM9EvyPdli0W41sROd+ZU1dTCztw==
+  dependencies:
+    "@floating-ui/react-dom" "^2.0.0"
+    "@radix-ui/react-arrow" "1.1.1"
+    "@radix-ui/react-compose-refs" "1.1.1"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.1"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+    "@radix-ui/react-use-rect" "1.1.0"
+    "@radix-ui/react-use-size" "1.1.0"
+    "@radix-ui/rect" "1.1.0"
+
+"@radix-ui/react-portal@1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.3.tgz#b0ea5141103a1671b715481b13440763d2ac4440"
+  integrity sha512-NciRqhXnGojhT93RPyDaMPfLH3ZSl4jjIFbZQ1b/vxvZEdHsBZ49wP9w8L3HzUQwep01LcWtkUvm0OVB5JAHTw==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-primitive" "1.0.0"
+    "@radix-ui/react-primitive" "2.0.1"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
 
-"@radix-ui/react-presence@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.0.tgz#814fe46df11f9a468808a6010e3f3ca7e0b2e84a"
-  integrity sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==
+"@radix-ui/react-presence@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.1.2.tgz#bb764ed8a9118b7ec4512da5ece306ded8703cdc"
+  integrity sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-compose-refs" "1.0.0"
-    "@radix-ui/react-use-layout-effect" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.1.1"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
 
-"@radix-ui/react-primitive@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.0.tgz#376cd72b0fcd5e0e04d252ed33eb1b1f025af2b0"
-  integrity sha512-EyXe6mnRlHZ8b6f4ilTDrXmkLShICIuOTTj0GX4w1rp+wSxf3+TD05u1UOITC8VsJ2a9nwHvdXtOXEOl0Cw/zQ==
+"@radix-ui/react-primitive@2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.0.1.tgz#6d9efc550f7520135366f333d1e820cf225fad9e"
+  integrity sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-slot" "1.0.0"
+    "@radix-ui/react-slot" "1.1.1"
 
-"@radix-ui/react-roving-focus@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.0.tgz#aadeb65d5dbcdbdd037078156ae1f57c2ff754ee"
-  integrity sha512-lHvO4MhvoWpeNbiJAoyDsEtbKqP2jkkdwsMVJ3kfqbkC71J/aXE6Th6gkZA1xHEqSku+t+UgoDjvE7Z3gsBpcg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/primitive" "1.0.0"
-    "@radix-ui/react-collection" "1.0.0"
-    "@radix-ui/react-compose-refs" "1.0.0"
-    "@radix-ui/react-context" "1.0.0"
-    "@radix-ui/react-direction" "1.0.0"
-    "@radix-ui/react-id" "1.0.0"
-    "@radix-ui/react-primitive" "1.0.0"
-    "@radix-ui/react-use-callback-ref" "1.0.0"
-    "@radix-ui/react-use-controllable-state" "1.0.0"
-
-"@radix-ui/react-slider@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.0.0.tgz#4cabadd243aa088eb45ac710cd7cdc518fafb07e"
-  integrity sha512-LMZET7vn7HYwYSjsc9Jcen8Vn4cJXZZxQT7T+lGlqp+F+FofX+H86TBF2yDq+L51d99f1KLEsflTGBz9WRLSig==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/number" "1.0.0"
-    "@radix-ui/primitive" "1.0.0"
-    "@radix-ui/react-collection" "1.0.0"
-    "@radix-ui/react-compose-refs" "1.0.0"
-    "@radix-ui/react-context" "1.0.0"
-    "@radix-ui/react-direction" "1.0.0"
-    "@radix-ui/react-primitive" "1.0.0"
-    "@radix-ui/react-use-controllable-state" "1.0.0"
-    "@radix-ui/react-use-layout-effect" "1.0.0"
-    "@radix-ui/react-use-previous" "1.0.0"
-    "@radix-ui/react-use-size" "1.0.0"
-
-"@radix-ui/react-slot@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.0.tgz#7fa805b99891dea1e862d8f8fbe07f4d6d0fd698"
-  integrity sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==
+"@radix-ui/react-roving-focus@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.1.tgz#3b3abb1e03646937f28d9ab25e96343667ca6520"
+  integrity sha512-QE1RoxPGJ/Nm8Qmk0PxP8ojmoaS67i0s7hVssS7KuI2FQoc/uzVlZsqKfQvxPE6D8hICCPHJ4D88zNhT3OOmkw==
+  dependencies:
+    "@radix-ui/primitive" "1.1.1"
+    "@radix-ui/react-collection" "1.1.1"
+    "@radix-ui/react-compose-refs" "1.1.1"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-direction" "1.1.0"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.1"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+
+"@radix-ui/react-slider@^1.2.0":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slider/-/react-slider-1.2.2.tgz#4ca883e3f0dea7b97d43c6cbc6c4305c64e75a86"
+  integrity sha512-sNlU06ii1/ZcbHf8I9En54ZPW0Vil/yPVg4vQMcFNjrIx51jsHbFl1HYHQvCIWJSr1q0ZmA+iIs/ZTv8h7HHSA==
+  dependencies:
+    "@radix-ui/number" "1.1.0"
+    "@radix-ui/primitive" "1.1.1"
+    "@radix-ui/react-collection" "1.1.1"
+    "@radix-ui/react-compose-refs" "1.1.1"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-direction" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.1"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+    "@radix-ui/react-use-previous" "1.1.0"
+    "@radix-ui/react-use-size" "1.1.0"
+
+"@radix-ui/react-slot@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.1.tgz#ab9a0ffae4027db7dc2af503c223c978706affc3"
+  integrity sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.1.1"
 
-"@radix-ui/react-use-callback-ref@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz#9e7b8b6b4946fe3cbe8f748c82a2cce54e7b6a90"
-  integrity sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
+"@radix-ui/react-use-callback-ref@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz#bce938ca413675bc937944b0d01ef6f4a6dc5bf1"
+  integrity sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==
 
-"@radix-ui/react-use-controllable-state@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz#a64deaafbbc52d5d407afaa22d493d687c538b7f"
-  integrity sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==
+"@radix-ui/react-use-controllable-state@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz#1321446857bb786917df54c0d4d084877aab04b0"
+  integrity sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-use-callback-ref" "1.0.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
 
-"@radix-ui/react-use-escape-keydown@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.0.tgz#aef375db4736b9de38a5a679f6f49b45a060e5d1"
-  integrity sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg==
+"@radix-ui/react-use-escape-keydown@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz#31a5b87c3b726504b74e05dac1edce7437b98754"
+  integrity sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-use-callback-ref" "1.0.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
 
-"@radix-ui/react-use-layout-effect@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz#2fc19e97223a81de64cd3ba1dc42ceffd82374dc"
-  integrity sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
+"@radix-ui/react-use-layout-effect@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz#3c2c8ce04827b26a39e442ff4888d9212268bd27"
+  integrity sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==
 
-"@radix-ui/react-use-previous@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.0.tgz#e48a69c3a7d8078a967084038df66d0d181c56ac"
-  integrity sha512-RG2K8z/K7InnOKpq6YLDmT49HGjNmrK+fr82UCVKT2sW0GYfVnYp4wZWBooT/EYfQ5faA9uIjvsuMMhH61rheg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
+"@radix-ui/react-use-previous@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz#d4dd37b05520f1d996a384eb469320c2ada8377c"
+  integrity sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==
 
-"@radix-ui/react-use-rect@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.0.tgz#b040cc88a4906b78696cd3a32b075ed5b1423b3e"
-  integrity sha512-TB7pID8NRMEHxb/qQJpvSt3hQU4sqNPM1VCTjTRjEOa7cEop/QMuq8S6fb/5Tsz64kqSvB9WnwsDHtjnrM9qew==
+"@radix-ui/react-use-rect@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz#13b25b913bd3e3987cc9b073a1a164bb1cf47b88"
+  integrity sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/rect" "1.0.0"
+    "@radix-ui/rect" "1.1.0"
 
-"@radix-ui/react-use-size@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.0.tgz#a0b455ac826749419f6354dc733e2ca465054771"
-  integrity sha512-imZ3aYcoYCKhhgNpkNDh/aTiU05qw9hX+HHI1QDBTyIlcFjgeFlKKySNGMwTp7nYFLQg/j0VA2FmCY4WPDDHMg==
+"@radix-ui/react-use-size@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz#b4dba7fbd3882ee09e8d2a44a3eed3a7e555246b"
+  integrity sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-use-layout-effect" "1.0.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
 
-"@radix-ui/rect@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.0.tgz#0dc8e6a829ea2828d53cbc94b81793ba6383bf3c"
-  integrity sha512-d0O68AYy/9oeEy1DdC07bz1/ZXX+DqCskRd3i4JzLSTXwefzaepQrKjXC7aNM8lTHjFLDO0pDgaEiQ7jEk+HVg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
+"@radix-ui/rect@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.1.0.tgz#f817d1d3265ac5415dadc67edab30ae196696438"
+  integrity sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==
 
 "@react-native-async-storage/async-storage@*":
   version "2.0.0"
@@ -8104,11 +8075,6 @@
   resolved "https://registry.npmjs.org/@react-native/polyfills/-/polyfills-2.0.0.tgz#4c40b74655c83982c8cf47530ee7dc13d957b6aa"
   integrity sha512-K0aGNn1TjalKj+65D7ycc1//H9roAQ51GJVk5ZJQFb2teECGmzd86bYDC0aYdbRf7gtovescq4Zt6FR0tgXiHQ==
 
-"@remix-run/router@1.5.0":
-  version "1.5.0"
-  resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.5.0.tgz#57618e57942a5f0131374a9fdb0167e25a117fdc"
-  integrity sha512-bkUDCp8o1MvFO+qxkODcbhSqRa6P2GXgrGZVpt0dCXNW2HCSCqYI0ZoAqEOSAjRWmmlKcYgFvN4B4S+zo/f8kg==
-
 "@rollup/plugin-commonjs@^28.0.0":
   version "28.0.0"
   resolved "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-28.0.0.tgz#44b5e49cb5d5e6233f1e4996013a8649fdbb9557"
@@ -9751,19 +9717,19 @@
     "@babel/runtime" "^7.12.5"
     react-error-boundary "^3.1.0"
 
-"@testing-library/react-native@^12.3.0":
-  version "12.3.0"
-  resolved "https://registry.npmjs.org/@testing-library/react-native/-/react-native-12.3.0.tgz#ebf04dddb7e1c34c869b97b187ecd061211c9466"
-  integrity sha512-E2Prl8D/ey9sRgzLyfCPPmqvsevJW5tVUy4E/pBbO7nOP6OzI/jn2P3vctn/kFdkPY2aE/udlU5ZeNAben9U2A==
+"@testing-library/react-native@^12.9.0":
+  version "12.9.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/react-native/-/react-native-12.9.0.tgz#9c727d9ffec91024be3288ed9376df3673154784"
+  integrity sha512-wIn/lB1FjV2N4Q7i9PWVRck3Ehwq5pkhAef5X5/bmQ78J/NoOsGbVY2/DG5Y9Lxw+RfE+GvSEh/fe5Tz6sKSvw==
   dependencies:
-    jest-matcher-utils "^29.6.2"
-    pretty-format "^29.6.2"
+    jest-matcher-utils "^29.7.0"
+    pretty-format "^29.7.0"
     redent "^3.0.0"
 
 "@testing-library/react@^14.0.0":
-  version "14.0.0"
-  resolved "https://registry.npmjs.org/@testing-library/react/-/react-14.0.0.tgz#59030392a6792450b9ab8e67aea5f3cc18d6347c"
-  integrity sha512-S04gSNJbYE30TlIMLTzv6QCTzt9AqIF5y6s6SzVFILNcNvbV/jU96GeiTPillGQo+Ny64M/5PV7klNYYgv5Dfg==
+  version "14.3.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-14.3.1.tgz#29513fc3770d6fb75245c4e1245c470e4ffdd830"
+  integrity sha512-H99XjUhWQw0lTgyMN05W3xQG1Nh4lq574D8keFf1dDoNTJgp66VbJozRaczoF+wsiaPJNt/TcnfpLGufGxSrZQ==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@testing-library/dom" "^9.0.0"
@@ -10198,7 +10164,7 @@
     expect "^29.0.0"
     pretty-format "^29.0.0"
 
-"@types/jest@^29.2.1", "@types/jest@^29.5.5":
+"@types/jest@^29.5.5":
   version "29.5.6"
   resolved "https://registry.npmjs.org/@types/jest/-/jest-29.5.6.tgz#f4cf7ef1b5b0bfc1aa744e41b24d9cc52533130b"
   integrity sha512-/t9NnzkOpXb4Nfvg17ieHE6EeSjDS2SGSpNYfoLbUAeL/EOueU/RSdOWFpfQTXBEM7BguYW1XQ0EbM+6RlIh6w==
@@ -10375,7 +10341,12 @@
   resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.26.5.tgz#72499abbb4c4ec9982446509d2f14fb8483869d6"
   integrity sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==
 
-"@types/prop-types@*", "@types/prop-types@^15.0.0":
+"@types/prop-types@*":
+  version "15.7.14"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.14.tgz#1433419d73b2a7ebfc6918dcefd2ec0d5cd698f2"
+  integrity sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==
+
+"@types/prop-types@^15.0.0":
   version "15.7.5"
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
@@ -10397,32 +10368,29 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
-"@types/react-dom@^18.0.0", "@types/react-dom@^18.2.7":
-  version "18.3.0"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.0.tgz#0cbc818755d87066ab6ca74fbedb2547d74a82b0"
-  integrity sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==
-  dependencies:
-    "@types/react" "*"
+"@types/react-dom@^18.0.0", "@types/react-dom@^18.3.0":
+  version "18.3.5"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.5.tgz#45f9f87398c5dcea085b715c58ddcf1faf65f716"
+  integrity sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==
 
 "@types/react-native-dotenv@^0.2.0":
   version "0.2.0"
   resolved "https://registry.npmjs.org/@types/react-native-dotenv/-/react-native-dotenv-0.2.0.tgz#32c58422a422c1adf68acce363ed791314d5a8e7"
   integrity sha512-ZxX+dU/yoQc0jTk+/NWttkiuXceJyN5FpOSqDl0WynN5GDzxwH7OMruQ47qcY8llo2RD3irjvzJ9BwC8gDiq0A==
 
-"@types/react-test-renderer@^18.0.2":
-  version "18.0.5"
-  resolved "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-18.0.5.tgz#b67a6ff37acd93d1b971ec4c838f69d52e772db0"
-  integrity sha512-PsnmF4Hpi61PTRX+dTxkjgDdtZ09kFFgPXczoF+yBfOVxn7xBLPvKP1BUrSasYHmerj33rhoJuvpIMsJuyRqHw==
+"@types/react-test-renderer@^18.3.0":
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-18.3.1.tgz#225bfe8d4ad7ee3b04c2fa27642bb74274a5961d"
+  integrity sha512-vAhnk0tG2eGa37lkU9+s5SoroCsRI08xnsWFiAXOuPH2jqzMbcXvKExXViPi1P5fIklDeCvXqyrdmipFaSkZrA==
   dependencies:
-    "@types/react" "*"
+    "@types/react" "^18"
 
-"@types/react@*", "@types/react@>=16", "@types/react@^18.2.22":
-  version "18.2.31"
-  resolved "https://registry.npmjs.org/@types/react/-/react-18.2.31.tgz#74ae2630e4aa9af599584157abd3b95d96fb9b40"
-  integrity sha512-c2UnPv548q+5DFh03y8lEDeMfDwBn9G3dRwfkrxQMo/dOtRHUUO57k6pHvBIfH/VF4Nh+98mZ5aaSe+2echD5g==
+"@types/react@>=16", "@types/react@^18", "@types/react@^18.3.0":
+  version "18.3.17"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.17.tgz#d86ca0e081c7a5e979b7db175f9515a41038cea7"
+  integrity sha512-opAQ5no6LqJNo9TqnxBKsgnkIYHozW9KSTlFVoSUJYh1Fl/sswkEoqIugRSm7tbh6pABtYjGAjW+GOS23j8qbw==
   dependencies:
     "@types/prop-types" "*"
-    "@types/scheduler" "*"
     csstype "^3.0.2"
 
 "@types/resolve@1.17.1":
@@ -10437,11 +10405,6 @@
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
   integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
 
-"@types/scheduler@*":
-  version "0.16.3"
-  resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz#cef09e3ec9af1d63d2a6cc5b383a737e24e6dcf5"
-  integrity sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==
-
 "@types/seedrandom@^2.4.28":
   version "2.4.31"
   resolved "https://registry.yarnpkg.com/@types/seedrandom/-/seedrandom-2.4.31.tgz#a6cac4a7c3b56fa0f3986ef1462b5725a7855471"
@@ -18527,7 +18490,7 @@ jest-matcher-utils@^29.5.0:
     jest-get-type "^29.4.3"
     pretty-format "^29.5.0"
 
-jest-matcher-utils@^29.6.2, jest-matcher-utils@^29.7.0:
+jest-matcher-utils@^29.7.0:
   version "29.7.0"
   resolved "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.7.0.tgz#ae8fec79ff249fd592ce80e3ee474e83a6c44f12"
   integrity sha512-sBkD+Xi9DtcChsI3L3u0+N0opgPYnCRPtGcQYrgXmR+hmt/fYfWAL0xRXYU8eWOdfuLgBe0YCW3AFtnRLagq/g==
@@ -23078,19 +23041,19 @@ pretty-format@^29.0.0, pretty-format@^29.5.0:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
-pretty-format@^29.6.2, pretty-format@^29.7.0:
-  version "29.7.0"
-  resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz#ca42c758310f365bfa71a0bda0a807160b776812"
-  integrity sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==
+pretty-format@^29.6.3:
+  version "29.6.3"
+  resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-29.6.3.tgz#d432bb4f1ca6f9463410c3fb25a0ba88e594ace7"
+  integrity sha512-ZsBgjVhFAj5KeK+nHfF1305/By3lechHQSMWCTl8iHSbfOm2TN5nHEtFc/+W7fAyUeCs2n5iow72gld4gW0xDw==
   dependencies:
     "@jest/schemas" "^29.6.3"
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
-pretty-format@^29.6.3:
-  version "29.6.3"
-  resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-29.6.3.tgz#d432bb4f1ca6f9463410c3fb25a0ba88e594ace7"
-  integrity sha512-ZsBgjVhFAj5KeK+nHfF1305/By3lechHQSMWCTl8iHSbfOm2TN5nHEtFc/+W7fAyUeCs2n5iow72gld4gW0xDw==
+pretty-format@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz#ca42c758310f365bfa71a0bda0a807160b776812"
+  integrity sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==
   dependencies:
     "@jest/schemas" "^29.6.3"
     ansi-styles "^5.0.0"
@@ -23461,13 +23424,13 @@ react-devtools-core@^4.26.1, react-devtools-core@^4.28.4:
     shell-quote "^1.6.1"
     ws "^7"
 
-react-dom@18.2.0, react-dom@^18:
-  version "18.2.0"
-  resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
-  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+react-dom@^18, react-dom@^18.3.0:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
+  integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
   dependencies:
     loose-envify "^1.1.0"
-    scheduler "^0.23.0"
+    scheduler "^0.23.2"
 
 react-error-boundary@^3.1.0:
   version "3.1.4"
@@ -23476,17 +23439,17 @@ react-error-boundary@^3.1.0:
   dependencies:
     "@babel/runtime" "^7.12.5"
 
-react-hook-form@^7.43.5:
-  version "7.43.7"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.43.7.tgz#88b8bc257635d706955e19c05254fb492fa77ad1"
-  integrity sha512-38yehQkQQ5uufaPKFScs7jhLE8n3+LG9H/BZfFAiBL2+7piDmw/BrdNJV4irzMaPnWZGhmGLHVICHXNVGIuXZg==
+react-hook-form@^7.53.2:
+  version "7.53.2"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.53.2.tgz#6fa37ae27330af81089baadd7f322cc987b8e2ac"
+  integrity sha512-YVel6fW5sOeedd1524pltpHX+jgU2u3DSDtXEaBORNdqiNrsX/nUI/iGXONegttg0mJVnfrIkiV0cmTU6Oo2xw==
 
 react-icons@^4.3.1, react-icons@^4.4.0:
   version "4.8.0"
   resolved "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz#621e900caa23b912f737e41be57f27f6b2bff445"
   integrity sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==
 
-"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0, react-is@^18.2.0:
+"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
@@ -23501,6 +23464,11 @@ react-is@^17.0.1:
   resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-is@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
+  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
+
 react-live@^4.1.8:
   version "4.1.8"
   resolved "https://registry.yarnpkg.com/react-live/-/react-live-4.1.8.tgz#287fb6c5127c2d89a6fe39380278d95cc8e661b6"
@@ -23630,40 +23598,25 @@ react-refresh@^0.4.0:
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.4.3.tgz#966f1750c191672e76e16c2efa569150cc73ab53"
   integrity sha512-Hwln1VNuGl/6bVwnd0Xdn1e84gT/8T9aYNL+HAKDArLCS7LWjwr7StE30IEYbIkx0Vi3vs+coQxe+SQDbGbbpA==
 
-react-remove-scroll-bar@^2.3.3:
-  version "2.3.4"
-  resolved "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz#53e272d7a5cb8242990c7f144c44d8bd8ab5afd9"
-  integrity sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==
+react-remove-scroll-bar@^2.3.7:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz#99c20f908ee467b385b68a3469b4a3e750012223"
+  integrity sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==
   dependencies:
-    react-style-singleton "^2.2.1"
+    react-style-singleton "^2.2.2"
     tslib "^2.0.0"
 
-react-remove-scroll@2.5.4:
-  version "2.5.4"
-  resolved "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.4.tgz#afe6491acabde26f628f844b67647645488d2ea0"
-  integrity sha512-xGVKJJr0SJGQVirVFAUZ2k1QLyO6m+2fy0l8Qawbp5Jgrv3DeLalrfMNBFSlmz5kriGGzsVBtGVnf4pTKIhhWA==
+react-remove-scroll@^2.6.1:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.6.2.tgz#2518d2c5112e71ea8928f1082a58459b5c7a2a97"
+  integrity sha512-KmONPx5fnlXYJQqC62Q+lwIeAk64ws/cUw6omIumRzMRPqgnYqhSSti99nbj0Ry13bv7dF+BKn7NB+OqkdZGTw==
   dependencies:
-    react-remove-scroll-bar "^2.3.3"
+    react-remove-scroll-bar "^2.3.7"
     react-style-singleton "^2.2.1"
     tslib "^2.1.0"
-    use-callback-ref "^1.3.0"
+    use-callback-ref "^1.3.3"
     use-sidecar "^1.1.2"
 
-react-router-dom@^6.2.1:
-  version "6.10.0"
-  resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.10.0.tgz#090ddc5c84dc41b583ce08468c4007c84245f61f"
-  integrity sha512-E5dfxRPuXKJqzwSe/qGcqdwa18QiWC6f3H3cWXM24qj4N0/beCIf/CWTipop2xm7mR0RCS99NnaqPNjHtrAzCg==
-  dependencies:
-    "@remix-run/router" "1.5.0"
-    react-router "6.10.0"
-
-react-router@6.10.0:
-  version "6.10.0"
-  resolved "https://registry.npmjs.org/react-router/-/react-router-6.10.0.tgz#230f824fde9dd0270781b5cb497912de32c0a971"
-  integrity sha512-Nrg0BWpQqrC3ZFFkyewrflCud9dio9ME3ojHCF/WLsprJVzkq3q3UeEhMCAW1dobjeGbWgjNn/PVF6m46ANxXQ==
-  dependencies:
-    "@remix-run/router" "1.5.0"
-
 react-shallow-renderer@^16.15.0:
   version "16.15.0"
   resolved "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz#48fb2cf9b23d23cde96708fe5273a7d3446f4457"
@@ -23681,19 +23634,27 @@ react-style-singleton@^2.2.1:
     invariant "^2.2.4"
     tslib "^2.0.0"
 
-react-test-renderer@^18.2.0:
-  version "18.2.0"
-  resolved "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.2.0.tgz#1dd912bd908ff26da5b9fca4fd1c489b9523d37e"
-  integrity sha512-JWD+aQ0lh2gvh4NM3bBM42Kx+XybOxCpgYK7F8ugAlpaTSnWsX+39Z4XkOykGZAHrjwwTZT3x3KxswVWxHPUqA==
+react-style-singleton@^2.2.2:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.3.tgz#4265608be69a4d70cfe3047f2c6c88b2c3ace388"
+  integrity sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==
+  dependencies:
+    get-nonce "^1.0.0"
+    tslib "^2.0.0"
+
+react-test-renderer@^18.3.0:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-18.3.1.tgz#e693608a1f96283400d4a3afead6893f958b80b4"
+  integrity sha512-KkAgygexHUkQqtvvx/otwxtuFu5cVjfzTCtjXLH9boS19/Nbtg84zS7wIQn39G8IlrhThBpQsMKkq5ZHZIYFXA==
   dependencies:
-    react-is "^18.2.0"
+    react-is "^18.3.1"
     react-shallow-renderer "^16.15.0"
-    scheduler "^0.23.0"
+    scheduler "^0.23.2"
 
-react@18.2.0:
-  version "18.2.0"
-  resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
-  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+react@^18.3.0:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
+  integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
   dependencies:
     loose-envify "^1.1.0"
 
@@ -24488,6 +24449,13 @@ scheduler@^0.23.0:
   dependencies:
     loose-envify "^1.1.0"
 
+scheduler@^0.23.2:
+  version "0.23.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
+  integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
 schema-utils@^2.6.5:
   version "2.7.1"
   resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
@@ -26804,10 +26772,10 @@ urlpattern-polyfill@10.0.0, urlpattern-polyfill@^10.0.0:
   resolved "https://registry.npmjs.org/urlpattern-polyfill/-/urlpattern-polyfill-10.0.0.tgz#f0a03a97bfb03cdf33553e5e79a2aadd22cac8ec"
   integrity sha512-H/A06tKD7sS1O1X2SshBVeA5FLycRpjqiBeqGKmBwBDBy28EnRjORxTNe269KSSr5un5qyWi1iL61wLxpd+ZOg==
 
-use-callback-ref@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz#772199899b9c9a50526fedc4993fc7fa1f7e32d5"
-  integrity sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==
+use-callback-ref@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.3.tgz#98d9fab067075841c5b2c6852090d5d0feabe2bf"
+  integrity sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==
   dependencies:
     tslib "^2.0.0"
 
@@ -26816,7 +26784,7 @@ use-editable@^2.3.3:
   resolved "https://registry.yarnpkg.com/use-editable/-/use-editable-2.3.3.tgz#a292fe9ba4c291cd28d1cc2728c75a5fc8d9a33f"
   integrity sha512-7wVD2JbfAFJ3DK0vITvXBdpd9JAz5BcKAAolsnLBuBn6UDDwBGuCIAGvR3yA2BNKm578vAMVHFCWaOcA+BhhiA==
 
-use-isomorphic-layout-effect@^1.1.1, use-isomorphic-layout-effect@^1.1.2:
+use-isomorphic-layout-effect@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
   integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==