@aws-amplify/ui-react-native 1.2.19 → 1.2.21

package/dist/theme/createTheme.js

@@ -7,7 +7,7 @@ import { defaultTheme } from './defaultTheme';
 // calling the component theme function with the already resolved base tokens
 // OR
 // resolving the component theme object
-const setupComponents = ({ components, tokens }) => {
+const setupComponents = ({ components, tokens, }) => {
     const output = components
         ? Object.entries(components).reduce((acc, [key, value]) => ({
             ...acc,
@@ -19,28 +19,34 @@ const setupComponents = ({ components, tokens }) => {
         components: output,
     }).components;
 };
+const shouldParseFloatValue = (pathKey) => [
+    'space',
+    'borderWidths',
+    'opacities',
+    'fontSizes',
+    'lineHeights',
+    'radii',
+].includes(pathKey);
 const setupToken = ({ token, path = [], spaceModifier, }) => {
     const { value } = token;
     if (typeof value === 'string') {
-        // Perform transforms
-        if (path[0] === 'space') {
-            if (value.includes('rem')) {
-                return Math.floor(parseFloat(value) * 16 * spaceModifier);
-            }
-        }
-        if (value.includes('rem')) {
-            return Math.floor(parseFloat(value) * 16);
-        }
-        if (value.includes('px')) {
-            return parseInt(value, 10);
-        }
-        if (path[0] === 'opacities') {
-            return parseFloat(value);
-        }
         // Remove .value from references if there is a reference
+        // this needs to come first so we don't get NaNs for references
         if (usesReference(value)) {
             return value.replace('.value', '');
         }
+        if (shouldParseFloatValue(path[0])) {
+            if (value.includes('rem')) {
+                if (path[0] === 'space') {
+                    return Math.floor(parseFloat(value) * 16 * spaceModifier);
+                }
+                return Math.floor(parseFloat(value) * 16);
+            }
+            if (value.includes('px')) {
+                return parseInt(value, 10);
+            }
+            return parseFloat(value);
+        }
         return value;
     }
     // Font Weights in RN are strings
@@ -90,11 +96,11 @@ export const createTheme = (theme, colorMode) => {
             return setupToken({ token, path, spaceModifier });
         },
     }));
-    let { components } = mergedTheme;
+    let components;
     // Resolve component token references too
     if (mergedTheme.components) {
         components = setupComponents({
-            ...mergedTheme,
+            components: mergedTheme.components,
             tokens,
         });
     }

package/dist/theme/types.d.ts

@@ -1,7 +1,7 @@
 import { ReactNativeTokens } from '@aws-amplify/ui';
 import { ButtonStyles, CheckboxStyles, DividerStyles, ErrorMessageStyles, HeadingStyles, IconStyles, IconButtonStyles, LabelStyles, PasswordFieldStyles, PhoneNumberFieldStyles, RadioStyles, RadioGroupStyles, TabsStyles, TextFieldStyles } from '../primitives';
 type ComponentTheme<ComponentType, Output> = Output extends 'output' ? ComponentType : ((tokens: StrictTheme['tokens']) => ComponentType) | ComponentType;
-export type Components<Output> = Record<string, object> & {
+export type Components<Output extends 'input' | 'output' | unknown = unknown> = {
     button?: ComponentTheme<ButtonStyles, Output>;
     checkbox?: ComponentTheme<CheckboxStyles, Output>;
     divider?: ComponentTheme<DividerStyles, Output>;

package/dist/utils/platform.d.ts

@@ -1,5 +1,6 @@
 declare const _default: {
     IS_ANDROID: boolean;
+    IS_DEV: boolean;
     IS_IOS: boolean;
     PLATFORM_TOUCH_TARGET: number | undefined;
     constants: import("react-native").PlatformConstants & {
@@ -41,6 +42,7 @@ declare const _default: {
     }): T_1 | undefined;
 } | {
     IS_ANDROID: boolean;
+    IS_DEV: boolean;
     IS_IOS: boolean;
     PLATFORM_TOUCH_TARGET: number | undefined;
     constants: import("react-native").PlatformConstants & {
@@ -85,6 +87,7 @@ declare const _default: {
     }): T_1 | undefined;
 } | {
     IS_ANDROID: boolean;
+    IS_DEV: boolean;
     IS_IOS: boolean;
     PLATFORM_TOUCH_TARGET: number | undefined;
     OS: "windows";
@@ -121,6 +124,7 @@ declare const _default: {
     }): T_1 | undefined;
 } | {
     IS_ANDROID: boolean;
+    IS_DEV: boolean;
     IS_IOS: boolean;
     PLATFORM_TOUCH_TARGET: number | undefined;
     OS: "macos";
@@ -157,6 +161,7 @@ declare const _default: {
     }): T_1 | undefined;
 } | {
     IS_ANDROID: boolean;
+    IS_DEV: boolean;
     IS_IOS: boolean;
     PLATFORM_TOUCH_TARGET: number | undefined;
     OS: "web";

package/dist/utils/platform.js

@@ -1,4 +1,5 @@
 import { Platform } from 'react-native';
+const IS_DEV = __DEV__;
 const IS_ANDROID = Platform.OS === 'android';
 const IS_IOS = Platform.OS === 'ios';
 // https://material.io/design/layout/spacing-methods.html#touch-targets
@@ -12,6 +13,7 @@ const PLATFORM_TOUCH_TARGET = Platform.select({
 export default {
     ...Platform,
     IS_ANDROID,
+    IS_DEV,
     IS_IOS,
     PLATFORM_TOUCH_TARGET,
 };

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "1.2.19";
+export declare const VERSION = "1.2.21";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = '1.2.19';
+export const VERSION = '1.2.21';

package/jest.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   preset: 'react-native',
   modulePathIgnorePatterns: ['<rootDir>/dist/'],
+  collectCoverage: true,
   collectCoverageFrom: [
     '<rootDir>/src/**/*.{js,jsx,ts,tsx}',
     '!<rootDir>/src/**/*{c,C}onstants.ts',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-native",
-  "version": "1.2.19",
+  "version": "1.2.21",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -28,7 +28,8 @@
     "@types/react-native": "^0.67.6",
     "@types/react-test-renderer": "^17.0.1",
     "babel-jest": "^28.0.3",
-    "eslint": "^8.14.0",
+    "eslint": "^8.44.0",
+    "jest": "^27.0.4",
     "metro-react-native-babel-preset": "^0.70.2",
     "react": "^17.0.2",
     "react-native": "^0.68.1",
@@ -37,9 +38,9 @@
     "rimraf": "^3.0.2"
   },
   "dependencies": {
-    "@aws-amplify/ui": "5.6.5",
-    "@aws-amplify/ui-react-core": "2.1.24",
-    "@aws-amplify/ui-react-core-notifications": "1.0.1"
+    "@aws-amplify/ui": "5.6.7",
+    "@aws-amplify/ui-react-core": "2.1.26",
+    "@aws-amplify/ui-react-core-notifications": "1.0.3"
   },
   "peerDependencies": {
     "aws-amplify": ">= 5.0.1",

package/src/Authenticator/Authenticator.tsx

@@ -8,11 +8,11 @@ import {
   useAuthenticator,
   useAuthenticatorRoute,
   useAuthenticatorInitMachine,
-  UseAuthenticator,
 } from '@aws-amplify/ui-react-core';
 
 import { configureComponent } from '@aws-amplify/ui';
 
+import { useDeprecationWarning } from '../hooks';
 import { DefaultContainer, InnerContainer } from './common';
 import { TypedField, getRouteTypedFields } from './hooks';
 import { AuthenticatorProps } from './types';
@@ -44,9 +44,6 @@ const DEFAULTS = {
   VerifyUser,
 };
 
-const isAuthenticatedRoute = (route: UseAuthenticator['route']) =>
-  route === 'authenticated' || route === 'signOut';
-
 const routePropSelector = ({
   route,
 }: AuthenticatorMachineContext): AuthenticatorMachineContext['route'][] => [
@@ -61,6 +58,12 @@ function Authenticator({
   Header,
   ...options
 }: AuthenticatorProps): JSX.Element | null {
+  useDeprecationWarning({
+    message:
+      'The `passwordSettings` prop has been deprecated and will be removed in a future major version of Amplify UI.',
+    shouldWarn: !!options?.passwordSettings,
+  });
+
   React.useEffect(() => {
     configureComponent({
       packageName: '@aws-amplify/ui-react-native',
@@ -70,7 +73,7 @@ function Authenticator({
 
   useAuthenticatorInitMachine(options);
 
-  const { fields, route } = useAuthenticator(routePropSelector);
+  const { authStatus, fields, route } = useAuthenticator(routePropSelector);
 
   const components = useMemo(
     // allow any to prevent TS from assuming that all fields are of type `TextFieldOptions`
@@ -82,7 +85,7 @@ function Authenticator({
 
   const typedFields = getRouteTypedFields({ fields, route });
 
-  if (isAuthenticatedRoute(route)) {
+  if (authStatus === 'authenticated') {
     return children ? <>{children}</> : null;
   }
 

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

@@ -9,7 +9,7 @@ import {
 } from '../../common';
 import { useFieldValues } from '../../hooks';
 
-import { DefaultConfirmResetPasswordComponent } from '../types';
+import { DefaultConfirmResetPasswordProps } from '../types';
 
 const COMPONENT_NAME = 'ConfirmResetPassword';
 
@@ -20,7 +20,7 @@ const {
   getResendCodeText,
 } = authenticatorTextUtil;
 
-const ConfirmResetPassword: DefaultConfirmResetPasswordComponent = ({
+const ConfirmResetPassword = ({
   fields,
   handleBlur,
   handleChange,
@@ -28,11 +28,13 @@ const ConfirmResetPassword: DefaultConfirmResetPasswordComponent = ({
   hasValidationErrors,
   isPending,
   resendCode,
+  validationErrors,
   ...rest
-}) => {
+}: DefaultConfirmResetPasswordProps): JSX.Element => {
   const {
     disableFormSubmit,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
@@ -40,6 +42,7 @@ const ConfirmResetPassword: DefaultConfirmResetPasswordComponent = ({
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const disabled = hasValidationErrors || disableFormSubmit;
@@ -72,6 +75,7 @@ const ConfirmResetPassword: DefaultConfirmResetPasswordComponent = ({
       headerText={headerText}
       fields={fieldsWithHandlers}
       isPending={isPending}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

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

@@ -9,7 +9,7 @@ import {
 } from '../../common';
 import { useFieldValues } from '../../hooks';
 
-import { DefaultConfirmSignInComponent } from '../types';
+import { DefaultConfirmSignInProps } from '../types';
 
 const COMPONENT_NAME = 'ConfirmSignIn';
 
@@ -20,7 +20,7 @@ const {
   getConfirmingText,
 } = authenticatorTextUtil;
 
-const ConfirmSignIn: DefaultConfirmSignInComponent = ({
+const ConfirmSignIn = ({
   challengeName,
   fields,
   handleBlur,
@@ -28,11 +28,13 @@ const ConfirmSignIn: DefaultConfirmSignInComponent = ({
   handleSubmit,
   isPending,
   toSignIn,
+  validationErrors,
   ...rest
-}) => {
+}: DefaultConfirmSignInProps): JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
@@ -40,6 +42,7 @@ const ConfirmSignIn: DefaultConfirmSignInComponent = ({
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const headerText = getChallengeText(challengeName);
@@ -71,6 +74,7 @@ const ConfirmSignIn: DefaultConfirmSignInComponent = ({
       headerText={headerText}
       fields={fieldsWithHandlers}
       isPending={isPending}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

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

@@ -21,6 +21,7 @@ const props = {
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   handleSubmit: jest.fn(),
+  hasValidationErrors: false,
   Header: ConfirmSignIn.Header,
   isPending: false,
   toSignIn: jest.fn(),

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

@@ -9,7 +9,7 @@ import {
 } from '../../common';
 import { useFieldValues } from '../../hooks';
 
-import { DefaultConfirmSignUpComponent } from '../types';
+import { DefaultConfirmSignUpProps } from '../types';
 
 const COMPONENT_NAME = 'ConfirmSignUp';
 
@@ -21,7 +21,7 @@ const {
   getResendCodeText,
 } = authenticatorTextUtil;
 
-const ConfirmSignUp: DefaultConfirmSignUpComponent = ({
+const ConfirmSignUp = ({
   codeDeliveryDetails,
   fields,
   handleBlur,
@@ -29,11 +29,13 @@ const ConfirmSignUp: DefaultConfirmSignUpComponent = ({
   handleSubmit,
   isPending,
   resendCode,
+  validationErrors,
   ...rest
-}) => {
+}: DefaultConfirmSignUpProps): JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
@@ -41,6 +43,7 @@ const ConfirmSignUp: DefaultConfirmSignUpComponent = ({
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const headerText = getDeliveryMethodText(codeDeliveryDetails);
@@ -74,6 +77,7 @@ const ConfirmSignUp: DefaultConfirmSignUpComponent = ({
       headerText={headerText}
       fields={fieldsWithHandlers}
       isPending={isPending}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

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

@@ -16,6 +16,7 @@ const props = {
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   handleSubmit: jest.fn(),
+  hasValidationErrors: false,
   Header: ConfirmSignUp.Header,
   isPending: false,
   resendCode: jest.fn(),

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

@@ -9,7 +9,7 @@ import {
 } from '../../common';
 import { useFieldValues } from '../../hooks';
 
-import { DefaultConfirmVerifyUserComponent } from '../types';
+import { DefaultConfirmVerifyUserProps } from '../types';
 
 const COMPONENT_NAME = 'ConfirmVerifyUser';
 
@@ -20,18 +20,20 @@ const {
   getSubmittingText,
 } = authenticatorTextUtil;
 
-const ConfirmVerifyUser: DefaultConfirmVerifyUserComponent = ({
+const ConfirmVerifyUser = ({
   fields,
   handleBlur,
   handleChange,
   handleSubmit,
   isPending,
   skipVerification,
+  validationErrors,
   ...rest
-}) => {
+}: DefaultConfirmVerifyUserProps): JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
@@ -39,6 +41,7 @@ const ConfirmVerifyUser: DefaultConfirmVerifyUserComponent = ({
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const headerText = getAccountRecoveryInfoText();
@@ -70,6 +73,7 @@ const ConfirmVerifyUser: DefaultConfirmVerifyUserComponent = ({
       headerText={headerText}
       fields={fieldsWithHandlers}
       isPending={isPending}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

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

@@ -18,6 +18,7 @@ const props = {
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   handleSubmit: jest.fn(),
+  hasValidationErrors: false,
   Header: ConfirmVerifyUser.Header,
   isPending: false,
   skipVerification: jest.fn(),

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

@@ -9,14 +9,14 @@ import {
 } from '../../common';
 import { useFieldValues } from '../../hooks';
 
-import { DefaultForceNewPasswordComponent } from '../types';
+import { DefaultForceNewPasswordProps } from '../types';
 
 const COMPONENT_NAME = 'ForceNewPassword';
 
 const { getChangePasswordText, getChangingText, getBackToSignInText } =
   authenticatorTextUtil;
 
-const ForceNewPassword: DefaultForceNewPasswordComponent = ({
+const ForceNewPassword = ({
   fields,
   handleBlur,
   handleChange,
@@ -24,11 +24,13 @@ const ForceNewPassword: DefaultForceNewPasswordComponent = ({
   hasValidationErrors,
   isPending,
   toSignIn,
+  validationErrors,
   ...rest
-}) => {
+}: DefaultForceNewPasswordProps): JSX.Element => {
   const {
     disableFormSubmit,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
@@ -36,6 +38,7 @@ const ForceNewPassword: DefaultForceNewPasswordComponent = ({
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const disabled = hasValidationErrors || disableFormSubmit;
@@ -70,6 +73,7 @@ const ForceNewPassword: DefaultForceNewPasswordComponent = ({
       headerText={headerText}
       fields={fieldsWithHandlers}
       isPending={isPending}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

package/src/Authenticator/Defaults/ForceNewPassword/__tests__/__snapshots__/ForceNewPassword.spec.tsx.snap

@@ -644,7 +644,7 @@ Array [
         style={
           Object {
             "alignItems": "center",
-            "borderColor": "hsl(210, 10%, 58%)",
+            "borderColor": "hsl(0, 95%, 30%)",
             "borderRadius": 4,
             "borderWidth": 1,
             "flexDirection": "row",

package/src/Authenticator/Defaults/ResetPassword/ResetPassword.tsx

@@ -9,7 +9,7 @@ import {
 } from '../../common';
 import { useFieldValues } from '../../hooks';
 
-import { DefaultResetPasswordComponent } from '../types';
+import { DefaultResetPasswordProps } from '../types';
 
 const COMPONENT_NAME = 'ResetPassword';
 const {
@@ -19,18 +19,20 @@ const {
   getBackToSignInText,
 } = authenticatorTextUtil;
 
-const ResetPassword: DefaultResetPasswordComponent = ({
+const ResetPassword = ({
   fields,
   handleBlur,
   handleChange,
   handleSubmit,
   isPending,
   toSignIn,
+  validationErrors,
   ...rest
-}) => {
+}: DefaultResetPasswordProps): JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
@@ -38,6 +40,7 @@ const ResetPassword: DefaultResetPasswordComponent = ({
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const headerText = getResetYourPasswordText();
@@ -69,6 +72,7 @@ const ResetPassword: DefaultResetPasswordComponent = ({
       headerText={headerText}
       fields={fieldsWithHandlers}
       isPending={isPending}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

package/src/Authenticator/Defaults/ResetPassword/__tests__/ResetPassword.spec.tsx

@@ -21,6 +21,7 @@ const props = {
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   handleSubmit: jest.fn(),
+  hasValidationErrors: false,
   Header: ResetPassword.Header,
   isPending: false,
   toSignIn: jest.fn(),

package/src/Authenticator/Defaults/SetupTOTP/SetupTOTP.tsx

@@ -12,7 +12,7 @@ import {
 } from '../../common';
 import { useFieldValues } from '../../hooks';
 
-import { DefaultSetupTOTPComponent } from '../types';
+import { DefaultSetupTOTPProps } from '../types';
 import { styles } from './styles';
 
 const COMPONENT_NAME = 'SetupTOTP';
@@ -25,7 +25,7 @@ const {
   getSetupTOTPInstructionsText,
 } = authenticatorTextUtil;
 
-const SetupTOTP: DefaultSetupTOTPComponent = ({
+const SetupTOTP = ({
   fields,
   handleBlur,
   handleChange,
@@ -33,11 +33,13 @@ const SetupTOTP: DefaultSetupTOTPComponent = ({
   isPending,
   toSignIn,
   totpSecretCode,
+  validationErrors,
   ...rest
-}) => {
+}: DefaultSetupTOTPProps): JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
@@ -45,6 +47,7 @@ const SetupTOTP: DefaultSetupTOTPComponent = ({
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const headerText = getSetupTOTPText();
@@ -88,6 +91,7 @@ const SetupTOTP: DefaultSetupTOTPComponent = ({
       headerText={headerText}
       fields={fieldsWithHandlers}
       isPending={isPending}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

package/src/Authenticator/Defaults/SetupTOTP/__tests__/SetupTOTP.spec.tsx

@@ -22,6 +22,7 @@ const props = {
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   handleSubmit: jest.fn(),
+  hasValidationErrors: false,
   isPending: false,
   toSignIn,
   totpSecretCode: "Let's keep it hush hush",

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

@@ -9,11 +9,11 @@ import {
 } from '../../common';
 import { useFieldValues } from '../../hooks';
 
-import { DefaultSignInComponent } from '../types';
+import { DefaultSignInProps } from '../types';
 
 const COMPONENT_NAME = 'SignIn';
 
-const SignIn: DefaultSignInComponent = ({
+const SignIn = ({
   fields,
   handleBlur,
   handleChange,
@@ -21,8 +21,9 @@ const SignIn: DefaultSignInComponent = ({
   hideSignUp,
   toResetPassword,
   toSignUp,
+  validationErrors,
   ...rest
-}) => {
+}: DefaultSignInProps): JSX.Element => {
   const {
     getSignInTabText,
     getSignInText,
@@ -33,6 +34,7 @@ const SignIn: DefaultSignInComponent = ({
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
@@ -40,6 +42,7 @@ const SignIn: DefaultSignInComponent = ({
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const headerText = getSignInTabText();
@@ -75,6 +78,7 @@ const SignIn: DefaultSignInComponent = ({
       buttons={buttons}
       fields={fieldsWithHandlers}
       headerText={headerText}
+      validationErrors={fieldValidationErrors}
     />
   );
 };