@aws-amplify/ui-react-liveness 3.0.8 → 3.0.10

package/dist/esm/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.mjs

@@ -9,7 +9,7 @@ import '@tensorflow-models/face-detection';
 import '@tensorflow/tfjs-backend-wasm';
 import '@tensorflow/tfjs-backend-cpu';
 import '@aws-amplify/core/internals/utils';
-import { drawStaticOval } from '../service/utils/liveness.mjs';
+import { drawStaticOval, clearOvalCanvas } from '../service/utils/liveness.mjs';
 import 'aws-amplify/auth';
 import '@aws-sdk/client-rekognitionstreaming';
 import '@aws-sdk/util-format-url';
@@ -38,6 +38,7 @@ const showMatchIndicatorStates = [
     FaceMatchState.TOO_FAR,
     FaceMatchState.CANT_IDENTIFY,
     FaceMatchState.FACE_IDENTIFIED,
+    FaceMatchState.OFF_CENTER,
 ];
 /**
  * For now we want to memoize the HOC for MatchIndicator because to optimize renders
@@ -65,6 +66,7 @@ const LivenessCameraModule = (props) => {
     const isCheckingCamera = state.matches('cameraCheck');
     const isWaitingForCamera = state.matches('waitForDOMAndCameraDetails');
     const isStartView = state.matches('start') || state.matches('userCancel');
+    const isDetectFaceBeforeStart = state.matches('detectFaceBeforeStart');
     const isRecording = state.matches('recording');
     const isCheckSucceeded = state.matches('checkSucceeded');
     const isFlashingFreshness = state.matches({
@@ -125,6 +127,11 @@ const LivenessCameraModule = (props) => {
             setAspectRatio(videoRef.current.videoWidth / videoRef.current.videoHeight);
         }
     }, [send, videoRef, isCameraReady, isMobileScreen]);
+    React__default.useEffect(() => {
+        if (isDetectFaceBeforeStart) {
+            clearOvalCanvas({ canvas: canvasRef.current });
+        }
+    }, [isDetectFaceBeforeStart]);
     const photoSensitivityWarning = React__default.useMemo(() => {
         return (React__default.createElement(View, { style: { visibility: isStartView ? 'visible' : 'hidden' } },
             React__default.createElement(PhotosensitiveWarning, { bodyText: instructionDisplayText.photosensitivityWarningBodyText, headingText: instructionDisplayText.photosensitivityWarningHeadingText, infoText: instructionDisplayText.photosensitivityWarningInfoText, labelText: instructionDisplayText.photosensitivityWarningLabelText })));
@@ -159,31 +166,35 @@ const LivenessCameraModule = (props) => {
             React__default.createElement(Loader, { size: "large", className: LivenessClassNames.Loader, "data-testid": "centered-loader", position: "unset" }),
             React__default.createElement(Text, { fontSize: "large", fontWeight: "bold", "data-testid": "waiting-camera-permission", className: `${LivenessClassNames.StartScreenCameraWaiting}__text` }, cameraDisplayText.waitingCameraPermissionText)));
     }
-    const isRecordingOnMobile = isMobileScreen && !isStartView && !isWaitingForCamera && isRecording;
+    // We don't show full screen camera on the pre check screen (isStartView/isWaitingForCamera)
+    const shouldShowFullScreenCamera = isMobileScreen && !isStartView && !isWaitingForCamera;
     return (React__default.createElement(React__default.Fragment, null,
         photoSensitivityWarning,
-        React__default.createElement(Flex, { className: classNames(LivenessClassNames.CameraModule, isRecordingOnMobile && `${LivenessClassNames.CameraModule}--mobile`), "data-testid": testId, gap: "zero" },
+        React__default.createElement(Flex, { className: classNames(LivenessClassNames.CameraModule, shouldShowFullScreenCamera &&
+                `${LivenessClassNames.CameraModule}--mobile`), "data-testid": testId, gap: "zero" },
             !isCameraReady && centeredLoader,
+            React__default.createElement(Overlay, { horizontal: "center", vertical: isRecording && !isFlashingFreshness ? 'start' : 'space-between', className: LivenessClassNames.InstructionOverlay },
+                isRecording && (React__default.createElement(DefaultRecordingIcon, { recordingIndicatorText: recordingIndicatorText })),
+                !isStartView && !isWaitingForCamera && !isCheckSucceeded && (React__default.createElement(DefaultCancelButton, { cancelLivenessCheckText: cancelLivenessCheckText })),
+                React__default.createElement(Flex, { className: classNames(LivenessClassNames.Hint, shouldShowFullScreenCamera && `${LivenessClassNames.Hint}--mobile`) },
+                    React__default.createElement(Hint, { hintDisplayText: hintDisplayText })),
+                errorState && (React__default.createElement(ErrorView, { onRetry: () => {
+                        send({ type: 'CANCEL' });
+                    }, displayText: errorDisplayText }, renderErrorModal({
+                    errorState,
+                    overrideErrorDisplayText: errorDisplayText,
+                }))),
+                isRecording &&
+                    !isFlashingFreshness &&
+                    showMatchIndicatorStates.includes(faceMatchState) ? (React__default.createElement(MemoizedMatchIndicator, { percentage: Math.ceil(faceMatchPercentage) })) : null),
             React__default.createElement(View, { as: "canvas", ref: freshnessColorRef, className: LivenessClassNames.FreshnessCanvas, hidden: true }),
             React__default.createElement(View, { className: LivenessClassNames.VideoAnchor, style: {
                     aspectRatio: `${aspectRatio}`,
                 } },
                 React__default.createElement("video", { ref: videoRef, muted: true, autoPlay: true, playsInline: true, width: mediaWidth, height: mediaHeight, onCanPlay: handleMediaPlay, "data-testid": "video", className: LivenessClassNames.Video, "aria-label": cameraDisplayText.a11yVideoLabelText }),
-                React__default.createElement(Flex, { className: classNames(LivenessClassNames.OvalCanvas, isRecordingOnMobile && `${LivenessClassNames.OvalCanvas}--mobile`, isRecordingStopped && LivenessClassNames.FadeOut) },
+                React__default.createElement(Flex, { className: classNames(LivenessClassNames.OvalCanvas, shouldShowFullScreenCamera &&
+                        `${LivenessClassNames.OvalCanvas}--mobile`, isRecordingStopped && LivenessClassNames.FadeOut) },
                     React__default.createElement(View, { as: "canvas", ref: canvasRef })),
-                isRecording && (React__default.createElement(DefaultRecordingIcon, { recordingIndicatorText: recordingIndicatorText })),
-                !isStartView && !isWaitingForCamera && !isCheckSucceeded && (React__default.createElement(DefaultCancelButton, { cancelLivenessCheckText: cancelLivenessCheckText })),
-                React__default.createElement(Overlay, { horizontal: "center", vertical: isRecording && !isFlashingFreshness ? 'start' : 'space-between', className: LivenessClassNames.InstructionOverlay },
-                    React__default.createElement(Hint, { hintDisplayText: hintDisplayText }),
-                    errorState && (React__default.createElement(ErrorView, { onRetry: () => {
-                            send({ type: 'CANCEL' });
-                        }, displayText: errorDisplayText }, renderErrorModal({
-                        errorState,
-                        overrideErrorDisplayText: errorDisplayText,
-                    }))),
-                    isRecording &&
-                        !isFlashingFreshness &&
-                        showMatchIndicatorStates.includes(faceMatchState) ? (React__default.createElement(MemoizedMatchIndicator, { percentage: Math.ceil(faceMatchPercentage) })) : null),
                 isStartView &&
                     !isMobileScreen &&
                     selectableDevices &&

package/dist/esm/components/FaceLivenessDetector/displayText.mjs

@@ -1,4 +1,5 @@
 const defaultErrorDisplayText = {
+    errorLabelText: 'Error',
     timeoutHeaderText: 'Time out',
     timeoutMessageText: "Face didn't fit inside oval in time limit. Try again and completely fill the oval with face in it.",
     faceDistanceHeaderText: 'Forward movement detected',
@@ -24,6 +25,8 @@ const defaultLivenessDisplayText = {
     goodFitCaptionText: 'Good fit',
     goodFitAltText: "Ilustration of a person's face, perfectly fitting inside of an oval.",
     hintCenterFaceText: 'Center your face',
+    hintCenterFaceInstructionText: 'Instruction: Before starting the check, make sure your camera is at the center top of your screen and center your face to the camera. When the check starts an oval will show up in the center. You will be prompted to move forward into the oval and then prompted to hold still. After holding still for a few seconds, you should hear check complete.',
+    hintFaceOffCenterText: 'Face is not in the oval, center your face to the camera.',
     hintMoveFaceFrontOfCameraText: 'Move face in front of camera',
     hintTooManyFacesText: 'Ensure only one face is in front of camera',
     hintFaceDetectedText: 'Face detected',
@@ -32,10 +35,12 @@ const defaultLivenessDisplayText = {
     hintTooFarText: 'Move closer',
     hintConnectingText: 'Connecting...',
     hintVerifyingText: 'Verifying...',
+    hintCheckCompleteText: 'Check complete',
     hintIlluminationTooBrightText: 'Move to dimmer area',
     hintIlluminationTooDarkText: 'Move to brighter area',
     hintIlluminationNormalText: 'Lighting conditions normal',
     hintHoldFaceForFreshnessText: 'Hold still',
+    hintMatchIndicatorText: '50% completed. Keep moving closer.',
     photosensitivityWarningBodyText: 'This check flashes different colors. Use caution if you are photosensitive.',
     photosensitivityWarningHeadingText: 'Photosensitivity warning',
     photosensitivityWarningInfoText: 'Some people may experience epileptic seizures when exposed to colored lights. Use caution if you, or anyone in your family, have an epileptic condition.',

package/dist/esm/components/FaceLivenessDetector/service/types/liveness.mjs

@@ -18,6 +18,7 @@ var FaceMatchState;
     FaceMatchState["CANT_IDENTIFY"] = "CANNOT IDENTIFY";
     FaceMatchState["FACE_IDENTIFIED"] = "ONE FACE IDENTIFIED";
     FaceMatchState["TOO_MANY"] = "TOO MANY FACES";
+    FaceMatchState["OFF_CENTER"] = "OFF CENTER";
 })(FaceMatchState || (FaceMatchState = {}));
 
 export { FaceMatchState, IlluminationState };

package/dist/esm/components/FaceLivenessDetector/service/utils/liveness.mjs

@@ -162,6 +162,16 @@ function drawLivenessOvalInCanvas({ canvas, oval, scaleFactor, videoEl, isStartS
         throw new Error('Cannot find Canvas.');
     }
 }
+function clearOvalCanvas({ canvas, }) {
+    const ctx = canvas.getContext('2d');
+    if (ctx) {
+        ctx.restore();
+        ctx.clearRect(0, 0, Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER);
+    }
+    else {
+        throw new Error('Cannot find Canvas.');
+    }
+}
 /**
  * Returns the state of the provided face with respect to the provided liveness oval.
  */
@@ -196,12 +206,17 @@ function getFaceMatchStateInLivenessOval(face, ovalDetails, initialFaceIntersect
     const faceMatchPercentage = Math.max(Math.min(1, (0.75 * (intersection - initialFaceIntersection)) /
         (intersectionThreshold - initialFaceIntersection) +
         0.25), 0) * 100;
+    const faceIsOutsideOvalToTheLeft = minOvalX > minFaceX && maxOvalX > maxFaceX;
+    const faceIsOutsideOvalToTheRight = minFaceX > minOvalX && maxFaceX > maxOvalX;
     if (intersection > intersectionThreshold &&
         Math.abs(minOvalX - minFaceX) < ovalMatchWidthThreshold &&
         Math.abs(maxOvalX - maxFaceX) < ovalMatchWidthThreshold &&
         Math.abs(maxOvalY - maxFaceY) < ovalMatchHeightThreshold) {
         faceMatchState = FaceMatchState.MATCHED;
     }
+    else if (faceIsOutsideOvalToTheLeft || faceIsOutsideOvalToTheRight) {
+        faceMatchState = FaceMatchState.OFF_CENTER;
+    }
     else if (minOvalY - minFaceY > faceDetectionHeightThreshold ||
         maxFaceY - maxOvalY > faceDetectionHeightThreshold ||
         (minOvalX - minFaceX > faceDetectionWidthThreshold &&
@@ -459,4 +474,4 @@ function getBoundingBox({ deviceHeight, deviceWidth, height, width, top, left, }
     };
 }
 
-export { drawLivenessOvalInCanvas, drawStaticOval, estimateIllumination, fillOverlayCanvasFractional, generateBboxFromLandmarks, getBoundingBox, getColorsSequencesFromSessionInformation, getFaceMatchState, getFaceMatchStateInLivenessOval, getIntersectionOverUnion, getOvalBoundingBox, getOvalDetailsFromSessionInformation, getRGBArrayFromColorString, getStaticLivenessOvalDetails, isCameraDeviceVirtual, isClientFreshnessColorSequence, isFaceDistanceBelowThreshold };
+export { clearOvalCanvas, drawLivenessOvalInCanvas, drawStaticOval, estimateIllumination, fillOverlayCanvasFractional, generateBboxFromLandmarks, getBoundingBox, getColorsSequencesFromSessionInformation, getFaceMatchState, getFaceMatchStateInLivenessOval, getIntersectionOverUnion, getOvalBoundingBox, getOvalDetailsFromSessionInformation, getRGBArrayFromColorString, getStaticLivenessOvalDetails, isCameraDeviceVirtual, isClientFreshnessColorSequence, isFaceDistanceBelowThreshold };

package/dist/esm/components/FaceLivenessDetector/shared/FaceLivenessErrorModal.mjs

@@ -23,7 +23,7 @@ import { LivenessClassNames } from '../types/classNames.mjs';
 
 const renderToastErrorModal = (props) => {
     const { error: errorState, displayText } = props;
-    const { timeoutHeaderText, timeoutMessageText, faceDistanceHeaderText, faceDistanceMessageText, multipleFacesHeaderText, multipleFacesMessageText, clientHeaderText, clientMessageText, serverHeaderText, serverMessageText, } = displayText;
+    const { errorLabelText, timeoutHeaderText, timeoutMessageText, faceDistanceHeaderText, faceDistanceMessageText, multipleFacesHeaderText, multipleFacesMessageText, clientHeaderText, clientMessageText, serverHeaderText, serverMessageText, } = displayText;
     let heading;
     let message;
     switch (errorState) {
@@ -50,7 +50,7 @@ const renderToastErrorModal = (props) => {
     }
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Flex, { className: LivenessClassNames.ErrorModal },
-            React__default.createElement(AlertIcon, { ariaHidden: true, variation: "error" }),
+            React__default.createElement(AlertIcon, { ariaLabel: errorLabelText, role: "img", variation: "error" }),
             React__default.createElement(Text, { className: LivenessClassNames.ErrorModalHeading, id: "amplify-liveness-error-heading" }, heading)),
         React__default.createElement(Text, { id: "amplify-liveness-error-message" }, message)));
 };

package/dist/esm/components/FaceLivenessDetector/shared/Hint.mjs

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View } from '@aws-amplify/ui-react';
+import { VisuallyHidden, View } from '@aws-amplify/ui-react';
 import '../service/machine/index.mjs';
 import { FaceMatchState, IlluminationState } from '../service/types/liveness.mjs';
 import '@tensorflow/tfjs-core';
@@ -25,9 +25,10 @@ const selectFaceMatchState = createLivenessSelector((state) => state.context.fac
 const selectIlluminationState = createLivenessSelector((state) => state.context.faceMatchAssociatedParams.illuminationState);
 const selectIsFaceFarEnoughBeforeRecording = createLivenessSelector((state) => state.context.isFaceFarEnoughBeforeRecording);
 const selectFaceMatchStateBeforeStart = createLivenessSelector((state) => state.context.faceMatchStateBeforeStart);
-const defaultToast = (text, isInitial = false) => {
+const selectFaceMatchPercentage = createLivenessSelector((state) => state.context.faceMatchAssociatedParams?.faceMatchPercentage);
+const DefaultToast = ({ text, isInitial = false, }) => {
     return (React.createElement(Toast, { size: "large", variation: "primary", isInitial: isInitial },
-        React.createElement(View, { "aria-live": "assertive", "aria-label": text }, text)));
+        React.createElement(View, { "aria-live": "assertive" }, text)));
 };
 const Hint = ({ hintDisplayText }) => {
     const [state] = useLivenessActor();
@@ -37,8 +38,11 @@ const Hint = ({ hintDisplayText }) => {
     const illuminationState = useLivenessSelector(selectIlluminationState);
     const faceMatchStateBeforeStart = useLivenessSelector(selectFaceMatchStateBeforeStart);
     const isFaceFarEnoughBeforeRecordingState = useLivenessSelector(selectIsFaceFarEnoughBeforeRecording);
-    const isCheckFaceDetectedBeforeStart = state.matches('checkFaceDetectedBeforeStart');
-    const isCheckFaceDistanceBeforeRecording = state.matches('checkFaceDistanceBeforeRecording');
+    const faceMatchPercentage = useLivenessSelector(selectFaceMatchPercentage);
+    const isCheckFaceDetectedBeforeStart = state.matches('checkFaceDetectedBeforeStart') ||
+        state.matches('detectFaceBeforeStart');
+    const isCheckFaceDistanceBeforeRecording = state.matches('checkFaceDistanceBeforeRecording') ||
+        state.matches('detectFaceDistanceBeforeRecording');
     const isStartView = state.matches('start') || state.matches('userCancel');
     const isRecording = state.matches('recording');
     const isNotRecording = state.matches('notRecording');
@@ -55,61 +59,74 @@ const Hint = ({ hintDisplayText }) => {
         [FaceMatchState.TOO_CLOSE]: hintDisplayText.hintTooCloseText,
         [FaceMatchState.TOO_FAR]: hintDisplayText.hintTooFarText,
         [FaceMatchState.MATCHED]: hintDisplayText.hintHoldFaceForFreshnessText,
+        [FaceMatchState.OFF_CENTER]: hintDisplayText.hintFaceOffCenterText,
     };
     const IlluminationStateStringMap = {
         [IlluminationState.BRIGHT]: hintDisplayText.hintIlluminationTooBrightText,
         [IlluminationState.DARK]: hintDisplayText.hintIlluminationTooDarkText,
         [IlluminationState.NORMAL]: hintDisplayText.hintIlluminationNormalText,
     };
-    const getInstructionContent = () => {
-        if (isStartView) {
-            return defaultToast(hintDisplayText.hintCenterFaceText, true);
+    if (isStartView) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(VisuallyHidden, { role: "alert" }, hintDisplayText.hintCenterFaceInstructionText),
+            React.createElement(DefaultToast, { text: hintDisplayText.hintCenterFaceText, isInitial: true })));
+    }
+    if (errorState ?? (isCheckFailed || isCheckSuccessful)) {
+        return null;
+    }
+    if (!isRecording) {
+        if (isCheckFaceDetectedBeforeStart) {
+            if (faceMatchStateBeforeStart === FaceMatchState.TOO_MANY) {
+                return React.createElement(DefaultToast, { text: hintDisplayText.hintTooManyFacesText });
+            }
+            return (React.createElement(DefaultToast, { text: hintDisplayText.hintMoveFaceFrontOfCameraText }));
         }
-        if (errorState ?? (isCheckFailed || isCheckSuccessful)) {
-            return;
+        // Specifically checking for false here because initially the value is undefined and we do not want to show the instruction
+        if (isCheckFaceDistanceBeforeRecording &&
+            isFaceFarEnoughBeforeRecordingState === false) {
+            return React.createElement(DefaultToast, { text: hintDisplayText.hintTooCloseText });
         }
-        if (!isRecording) {
-            if (isCheckFaceDetectedBeforeStart) {
-                if (faceMatchStateBeforeStart === FaceMatchState.TOO_MANY) {
-                    return defaultToast(FaceMatchStateStringMap[faceMatchStateBeforeStart]);
-                }
-                return defaultToast(hintDisplayText.hintMoveFaceFrontOfCameraText);
-            }
-            // Specifically checking for false here because initially the value is undefined and we do not want to show the instruction
-            if (isCheckFaceDistanceBeforeRecording &&
-                isFaceFarEnoughBeforeRecordingState === false) {
-                return defaultToast(hintDisplayText.hintTooCloseText);
-            }
-            if (isNotRecording) {
-                return (React.createElement(ToastWithLoader, { displayText: hintDisplayText.hintConnectingText }));
-            }
-            if (isUploading) {
-                return (React.createElement(ToastWithLoader, { displayText: hintDisplayText.hintVerifyingText }));
-            }
-            if (illuminationState && illuminationState !== IlluminationState.NORMAL) {
-                return defaultToast(IlluminationStateStringMap[illuminationState]);
-            }
+        if (isNotRecording) {
+            return (React.createElement(ToastWithLoader, { displayText: hintDisplayText.hintConnectingText }));
         }
-        if (isFlashingFreshness) {
-            return defaultToast(hintDisplayText.hintHoldFaceForFreshnessText);
+        if (isUploading) {
+            return (React.createElement(React.Fragment, null,
+                React.createElement(VisuallyHidden, { "aria-live": "assertive" }, hintDisplayText.hintCheckCompleteText),
+                React.createElement(ToastWithLoader, { displayText: hintDisplayText.hintVerifyingText })));
         }
-        if (isRecording && !isFlashingFreshness) {
-            // During face matching, we want to only show the TOO_CLOSE or
-            // TOO_FAR texts. If FaceMatchState matches TOO_CLOSE, we'll show
-            // the TOO_CLOSE text, but for FACE_IDENTIFED, CANT_IDENTIFY, TOO_MANY
-            // we are defaulting to the TOO_FAR text (for now).
-            let resultHintString = FaceMatchStateStringMap[FaceMatchState.TOO_FAR];
-            if (faceMatchState === FaceMatchState.TOO_CLOSE ||
-                faceMatchState === FaceMatchState.MATCHED) {
-                resultHintString = FaceMatchStateStringMap[faceMatchState];
-            }
-            return (React.createElement(Toast, { size: "large", variation: faceMatchState === FaceMatchState.TOO_CLOSE ? 'error' : 'primary' },
-                React.createElement(View, { "aria-live": "assertive", "aria-label": resultHintString }, resultHintString)));
+        if (illuminationState && illuminationState !== IlluminationState.NORMAL) {
+            return (React.createElement(DefaultToast, { text: IlluminationStateStringMap[illuminationState] }));
         }
-        return null;
-    };
-    const instructionContent = getInstructionContent();
-    return instructionContent ? instructionContent : null;
+    }
+    if (isFlashingFreshness) {
+        return React.createElement(DefaultToast, { text: hintDisplayText.hintHoldFaceForFreshnessText });
+    }
+    if (isRecording && !isFlashingFreshness) {
+        // During face matching, we want to only show the TOO_CLOSE or
+        // TOO_FAR texts. If FaceMatchState matches TOO_CLOSE, we'll show
+        // the TOO_CLOSE text, but for FACE_IDENTIFED, CANT_IDENTIFY, TOO_MANY
+        // we are defaulting to the TOO_FAR text (for now).
+        let resultHintString = FaceMatchStateStringMap[FaceMatchState.TOO_FAR];
+        if (faceMatchState === FaceMatchState.TOO_CLOSE ||
+            faceMatchState === FaceMatchState.MATCHED) {
+            resultHintString = FaceMatchStateStringMap[faceMatchState];
+        }
+        // If the face is outside the oval set the aria-label to a string about centering face in oval
+        let a11yHintString = resultHintString;
+        if (faceMatchState === FaceMatchState.OFF_CENTER) {
+            a11yHintString = FaceMatchStateStringMap[faceMatchState];
+        }
+        else if (
+        // If the face match percentage reaches 50% append it to the a11y label
+        faceMatchState === FaceMatchState.TOO_FAR &&
+            faceMatchPercentage > 50) {
+            a11yHintString = hintDisplayText.hintMatchIndicatorText;
+        }
+        return (React.createElement(Toast, { size: "large", variation: faceMatchState === FaceMatchState.TOO_CLOSE ? 'error' : 'primary' },
+            React.createElement(VisuallyHidden, { "aria-live": "assertive" }, a11yHintString),
+            React.createElement(View, { "aria-label": a11yHintString }, resultHintString)));
+    }
+    return null;
 };
 
 export { Hint, selectErrorState, selectFaceMatchState, selectFaceMatchStateBeforeStart, selectIlluminationState, selectIsFaceFarEnoughBeforeRecording };

package/dist/esm/components/FaceLivenessDetector/shared/ToastWithLoader.mjs

@@ -3,8 +3,8 @@ import { Flex, Loader, View } from '@aws-amplify/ui-react';
 import { LivenessClassNames } from '../types/classNames.mjs';
 import { Toast } from './Toast.mjs';
 
-const ToastWithLoader = ({ displayText, labelText, }) => {
-    return (React.createElement(Toast, { "aria-live": "polite", "aria-label": labelText ?? displayText },
+const ToastWithLoader = ({ displayText, }) => {
+    return (React.createElement(Toast, { "aria-live": "polite" },
         React.createElement(Flex, { className: LivenessClassNames.HintText },
             React.createElement(Loader, null),
             React.createElement(View, null, displayText))));

package/dist/esm/components/FaceLivenessDetector/utils/getDisplayText.mjs

@@ -12,7 +12,7 @@ function getDisplayText(overrideDisplayText) {
         ...defaultLivenessDisplayText,
         ...overrideDisplayText,
     };
-    const { a11yVideoLabelText, cameraMinSpecificationsHeadingText, cameraMinSpecificationsMessageText, cameraNotFoundHeadingText, cameraNotFoundMessageText, cancelLivenessCheckText, clientHeaderText, clientMessageText, hintCanNotIdentifyText, hintCenterFaceText, hintConnectingText, hintFaceDetectedText, hintHoldFaceForFreshnessText, hintIlluminationNormalText, hintIlluminationTooBrightText, hintIlluminationTooDarkText, hintMoveFaceFrontOfCameraText, hintTooManyFacesText, hintTooCloseText, hintTooFarText, hintVerifyingText, faceDistanceHeaderText, faceDistanceMessageText, goodFitCaptionText, goodFitAltText, landscapeHeaderText, landscapeMessageText, multipleFacesHeaderText, multipleFacesMessageText, photosensitivityWarningBodyText, photosensitivityWarningHeadingText, photosensitivityWarningInfoText, photosensitivityWarningLabelText, photosensitivyWarningBodyText, photosensitivyWarningHeadingText, photosensitivyWarningInfoText, photosensitivyWarningLabelText, portraitMessageText, retryCameraPermissionsText, recordingIndicatorText, serverHeaderText, serverMessageText, startScreenBeginCheckText, timeoutHeaderText, timeoutMessageText, tooFarCaptionText, tooFarAltText, tryAgainText, waitingCameraPermissionText, } = displayText;
+    const { a11yVideoLabelText, cameraMinSpecificationsHeadingText, cameraMinSpecificationsMessageText, cameraNotFoundHeadingText, cameraNotFoundMessageText, cancelLivenessCheckText, clientHeaderText, clientMessageText, errorLabelText, hintCanNotIdentifyText, hintCenterFaceText, hintCenterFaceInstructionText, hintFaceOffCenterText, hintConnectingText, hintFaceDetectedText, hintHoldFaceForFreshnessText, hintIlluminationNormalText, hintIlluminationTooBrightText, hintIlluminationTooDarkText, hintMoveFaceFrontOfCameraText, hintTooManyFacesText, hintTooCloseText, hintTooFarText, hintVerifyingText, hintCheckCompleteText, hintMatchIndicatorText, faceDistanceHeaderText, faceDistanceMessageText, goodFitCaptionText, goodFitAltText, landscapeHeaderText, landscapeMessageText, multipleFacesHeaderText, multipleFacesMessageText, photosensitivityWarningBodyText, photosensitivityWarningHeadingText, photosensitivityWarningInfoText, photosensitivityWarningLabelText, photosensitivyWarningBodyText, photosensitivyWarningHeadingText, photosensitivyWarningInfoText, photosensitivyWarningLabelText, portraitMessageText, retryCameraPermissionsText, recordingIndicatorText, serverHeaderText, serverMessageText, startScreenBeginCheckText, timeoutHeaderText, timeoutMessageText, tooFarCaptionText, tooFarAltText, tryAgainText, waitingCameraPermissionText, } = displayText;
     const hintDisplayText = {
         hintMoveFaceFrontOfCameraText,
         hintTooManyFacesText,
@@ -22,11 +22,15 @@ function getDisplayText(overrideDisplayText) {
         hintTooFarText,
         hintConnectingText,
         hintVerifyingText,
+        hintCheckCompleteText,
         hintIlluminationTooBrightText,
         hintIlluminationTooDarkText,
         hintIlluminationNormalText,
         hintHoldFaceForFreshnessText,
         hintCenterFaceText,
+        hintCenterFaceInstructionText,
+        hintFaceOffCenterText,
+        hintMatchIndicatorText,
     };
     const cameraDisplayText = {
         cameraMinSpecificationsHeadingText,
@@ -57,6 +61,7 @@ function getDisplayText(overrideDisplayText) {
         recordingIndicatorText,
     };
     const errorDisplayText = {
+        errorLabelText,
         timeoutHeaderText,
         timeoutMessageText,
         faceDistanceHeaderText,

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '3.0.8';
+const VERSION = '3.0.10';
 
 export { VERSION };

package/dist/index.js

@@ -78,6 +78,7 @@ var FaceMatchState;
     FaceMatchState["CANT_IDENTIFY"] = "CANNOT IDENTIFY";
     FaceMatchState["FACE_IDENTIFIED"] = "ONE FACE IDENTIFIED";
     FaceMatchState["TOO_MANY"] = "TOO MANY FACES";
+    FaceMatchState["OFF_CENTER"] = "OFF CENTER";
 })(FaceMatchState || (FaceMatchState = {}));
 
 /**
@@ -272,6 +273,16 @@ function drawLivenessOvalInCanvas({ canvas, oval, scaleFactor, videoEl, isStartS
         throw new Error('Cannot find Canvas.');
     }
 }
+function clearOvalCanvas({ canvas, }) {
+    const ctx = canvas.getContext('2d');
+    if (ctx) {
+        ctx.restore();
+        ctx.clearRect(0, 0, Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER);
+    }
+    else {
+        throw new Error('Cannot find Canvas.');
+    }
+}
 /**
  * Returns the state of the provided face with respect to the provided liveness oval.
  */
@@ -306,12 +317,17 @@ function getFaceMatchStateInLivenessOval(face, ovalDetails, initialFaceIntersect
     const faceMatchPercentage = Math.max(Math.min(1, (0.75 * (intersection - initialFaceIntersection)) /
         (intersectionThreshold - initialFaceIntersection) +
         0.25), 0) * 100;
+    const faceIsOutsideOvalToTheLeft = minOvalX > minFaceX && maxOvalX > maxFaceX;
+    const faceIsOutsideOvalToTheRight = minFaceX > minOvalX && maxFaceX > maxOvalX;
     if (intersection > intersectionThreshold &&
         Math.abs(minOvalX - minFaceX) < ovalMatchWidthThreshold &&
         Math.abs(maxOvalX - maxFaceX) < ovalMatchWidthThreshold &&
         Math.abs(maxOvalY - maxFaceY) < ovalMatchHeightThreshold) {
         faceMatchState = FaceMatchState.MATCHED;
     }
+    else if (faceIsOutsideOvalToTheLeft || faceIsOutsideOvalToTheRight) {
+        faceMatchState = FaceMatchState.OFF_CENTER;
+    }
     else if (minOvalY - minFaceY > faceDetectionHeightThreshold ||
         maxFaceY - maxOvalY > faceDetectionHeightThreshold ||
         (minOvalX - minFaceX > faceDetectionWidthThreshold &&
@@ -771,7 +787,7 @@ class VideoRecorder {
     }
 }
 
-const VERSION = '3.0.8';
+const VERSION = '3.0.10';
 
 const BASE_USER_AGENT = `ui-react-liveness/${VERSION}`;
 const getLivenessUserAgent = () => {
@@ -2530,8 +2546,8 @@ const Toast = ({ variation = 'default', size = 'medium', children, isInitial = f
             React__namespace.createElement(uiReact.Flex, { className: LivenessClassNames.ToastMessage, ...(isInitial ? { color: tokens.colors.font.primary } : {}) }, children))));
 };
 
-const ToastWithLoader = ({ displayText, labelText, }) => {
-    return (React__namespace.createElement(Toast, { "aria-live": "polite", "aria-label": labelText ?? displayText },
+const ToastWithLoader = ({ displayText, }) => {
+    return (React__namespace.createElement(Toast, { "aria-live": "polite" },
         React__namespace.createElement(uiReact.Flex, { className: LivenessClassNames.HintText },
             React__namespace.createElement(uiReact.Loader, null),
             React__namespace.createElement(uiReact.View, null, displayText))));
@@ -2542,9 +2558,10 @@ const selectFaceMatchState$1 = createLivenessSelector((state) => state.context.f
 const selectIlluminationState = createLivenessSelector((state) => state.context.faceMatchAssociatedParams.illuminationState);
 const selectIsFaceFarEnoughBeforeRecording = createLivenessSelector((state) => state.context.isFaceFarEnoughBeforeRecording);
 const selectFaceMatchStateBeforeStart = createLivenessSelector((state) => state.context.faceMatchStateBeforeStart);
-const defaultToast = (text, isInitial = false) => {
+const selectFaceMatchPercentage$1 = createLivenessSelector((state) => state.context.faceMatchAssociatedParams?.faceMatchPercentage);
+const DefaultToast = ({ text, isInitial = false, }) => {
     return (React__namespace.createElement(Toast, { size: "large", variation: "primary", isInitial: isInitial },
-        React__namespace.createElement(uiReact.View, { "aria-live": "assertive", "aria-label": text }, text)));
+        React__namespace.createElement(uiReact.View, { "aria-live": "assertive" }, text)));
 };
 const Hint = ({ hintDisplayText }) => {
     const [state] = useLivenessActor();
@@ -2554,8 +2571,11 @@ const Hint = ({ hintDisplayText }) => {
     const illuminationState = useLivenessSelector(selectIlluminationState);
     const faceMatchStateBeforeStart = useLivenessSelector(selectFaceMatchStateBeforeStart);
     const isFaceFarEnoughBeforeRecordingState = useLivenessSelector(selectIsFaceFarEnoughBeforeRecording);
-    const isCheckFaceDetectedBeforeStart = state.matches('checkFaceDetectedBeforeStart');
-    const isCheckFaceDistanceBeforeRecording = state.matches('checkFaceDistanceBeforeRecording');
+    const faceMatchPercentage = useLivenessSelector(selectFaceMatchPercentage$1);
+    const isCheckFaceDetectedBeforeStart = state.matches('checkFaceDetectedBeforeStart') ||
+        state.matches('detectFaceBeforeStart');
+    const isCheckFaceDistanceBeforeRecording = state.matches('checkFaceDistanceBeforeRecording') ||
+        state.matches('detectFaceDistanceBeforeRecording');
     const isStartView = state.matches('start') || state.matches('userCancel');
     const isRecording = state.matches('recording');
     const isNotRecording = state.matches('notRecording');
@@ -2572,61 +2592,74 @@ const Hint = ({ hintDisplayText }) => {
         [FaceMatchState.TOO_CLOSE]: hintDisplayText.hintTooCloseText,
         [FaceMatchState.TOO_FAR]: hintDisplayText.hintTooFarText,
         [FaceMatchState.MATCHED]: hintDisplayText.hintHoldFaceForFreshnessText,
+        [FaceMatchState.OFF_CENTER]: hintDisplayText.hintFaceOffCenterText,
     };
     const IlluminationStateStringMap = {
         [IlluminationState.BRIGHT]: hintDisplayText.hintIlluminationTooBrightText,
         [IlluminationState.DARK]: hintDisplayText.hintIlluminationTooDarkText,
         [IlluminationState.NORMAL]: hintDisplayText.hintIlluminationNormalText,
     };
-    const getInstructionContent = () => {
-        if (isStartView) {
-            return defaultToast(hintDisplayText.hintCenterFaceText, true);
+    if (isStartView) {
+        return (React__namespace.createElement(React__namespace.Fragment, null,
+            React__namespace.createElement(uiReact.VisuallyHidden, { role: "alert" }, hintDisplayText.hintCenterFaceInstructionText),
+            React__namespace.createElement(DefaultToast, { text: hintDisplayText.hintCenterFaceText, isInitial: true })));
+    }
+    if (errorState ?? (isCheckFailed || isCheckSuccessful)) {
+        return null;
+    }
+    if (!isRecording) {
+        if (isCheckFaceDetectedBeforeStart) {
+            if (faceMatchStateBeforeStart === FaceMatchState.TOO_MANY) {
+                return React__namespace.createElement(DefaultToast, { text: hintDisplayText.hintTooManyFacesText });
+            }
+            return (React__namespace.createElement(DefaultToast, { text: hintDisplayText.hintMoveFaceFrontOfCameraText }));
         }
-        if (errorState ?? (isCheckFailed || isCheckSuccessful)) {
-            return;
+        // Specifically checking for false here because initially the value is undefined and we do not want to show the instruction
+        if (isCheckFaceDistanceBeforeRecording &&
+            isFaceFarEnoughBeforeRecordingState === false) {
+            return React__namespace.createElement(DefaultToast, { text: hintDisplayText.hintTooCloseText });
         }
-        if (!isRecording) {
-            if (isCheckFaceDetectedBeforeStart) {
-                if (faceMatchStateBeforeStart === FaceMatchState.TOO_MANY) {
-                    return defaultToast(FaceMatchStateStringMap[faceMatchStateBeforeStart]);
-                }
-                return defaultToast(hintDisplayText.hintMoveFaceFrontOfCameraText);
-            }
-            // Specifically checking for false here because initially the value is undefined and we do not want to show the instruction
-            if (isCheckFaceDistanceBeforeRecording &&
-                isFaceFarEnoughBeforeRecordingState === false) {
-                return defaultToast(hintDisplayText.hintTooCloseText);
-            }
-            if (isNotRecording) {
-                return (React__namespace.createElement(ToastWithLoader, { displayText: hintDisplayText.hintConnectingText }));
-            }
-            if (isUploading) {
-                return (React__namespace.createElement(ToastWithLoader, { displayText: hintDisplayText.hintVerifyingText }));
-            }
-            if (illuminationState && illuminationState !== IlluminationState.NORMAL) {
-                return defaultToast(IlluminationStateStringMap[illuminationState]);
-            }
+        if (isNotRecording) {
+            return (React__namespace.createElement(ToastWithLoader, { displayText: hintDisplayText.hintConnectingText }));
         }
-        if (isFlashingFreshness) {
-            return defaultToast(hintDisplayText.hintHoldFaceForFreshnessText);
+        if (isUploading) {
+            return (React__namespace.createElement(React__namespace.Fragment, null,
+                React__namespace.createElement(uiReact.VisuallyHidden, { "aria-live": "assertive" }, hintDisplayText.hintCheckCompleteText),
+                React__namespace.createElement(ToastWithLoader, { displayText: hintDisplayText.hintVerifyingText })));
         }
-        if (isRecording && !isFlashingFreshness) {
-            // During face matching, we want to only show the TOO_CLOSE or
-            // TOO_FAR texts. If FaceMatchState matches TOO_CLOSE, we'll show
-            // the TOO_CLOSE text, but for FACE_IDENTIFED, CANT_IDENTIFY, TOO_MANY
-            // we are defaulting to the TOO_FAR text (for now).
-            let resultHintString = FaceMatchStateStringMap[FaceMatchState.TOO_FAR];
-            if (faceMatchState === FaceMatchState.TOO_CLOSE ||
-                faceMatchState === FaceMatchState.MATCHED) {
-                resultHintString = FaceMatchStateStringMap[faceMatchState];
-            }
-            return (React__namespace.createElement(Toast, { size: "large", variation: faceMatchState === FaceMatchState.TOO_CLOSE ? 'error' : 'primary' },
-                React__namespace.createElement(uiReact.View, { "aria-live": "assertive", "aria-label": resultHintString }, resultHintString)));
+        if (illuminationState && illuminationState !== IlluminationState.NORMAL) {
+            return (React__namespace.createElement(DefaultToast, { text: IlluminationStateStringMap[illuminationState] }));
         }
-        return null;
-    };
-    const instructionContent = getInstructionContent();
-    return instructionContent ? instructionContent : null;
+    }
+    if (isFlashingFreshness) {
+        return React__namespace.createElement(DefaultToast, { text: hintDisplayText.hintHoldFaceForFreshnessText });
+    }
+    if (isRecording && !isFlashingFreshness) {
+        // During face matching, we want to only show the TOO_CLOSE or
+        // TOO_FAR texts. If FaceMatchState matches TOO_CLOSE, we'll show
+        // the TOO_CLOSE text, but for FACE_IDENTIFED, CANT_IDENTIFY, TOO_MANY
+        // we are defaulting to the TOO_FAR text (for now).
+        let resultHintString = FaceMatchStateStringMap[FaceMatchState.TOO_FAR];
+        if (faceMatchState === FaceMatchState.TOO_CLOSE ||
+            faceMatchState === FaceMatchState.MATCHED) {
+            resultHintString = FaceMatchStateStringMap[faceMatchState];
+        }
+        // If the face is outside the oval set the aria-label to a string about centering face in oval
+        let a11yHintString = resultHintString;
+        if (faceMatchState === FaceMatchState.OFF_CENTER) {
+            a11yHintString = FaceMatchStateStringMap[faceMatchState];
+        }
+        else if (
+        // If the face match percentage reaches 50% append it to the a11y label
+        faceMatchState === FaceMatchState.TOO_FAR &&
+            faceMatchPercentage > 50) {
+            a11yHintString = hintDisplayText.hintMatchIndicatorText;
+        }
+        return (React__namespace.createElement(Toast, { size: "large", variation: faceMatchState === FaceMatchState.TOO_CLOSE ? 'error' : 'primary' },
+            React__namespace.createElement(uiReact.VisuallyHidden, { "aria-live": "assertive" }, a11yHintString),
+            React__namespace.createElement(uiReact.View, { "aria-label": a11yHintString }, resultHintString)));
+    }
+    return null;
 };
 
 const MatchIndicator = ({ percentage, initialPercentage = 25, testId, }) => {
@@ -2662,6 +2695,7 @@ const RecordingIcon = ({ children }) => {
 };
 
 const defaultErrorDisplayText = {
+    errorLabelText: 'Error',
     timeoutHeaderText: 'Time out',
     timeoutMessageText: "Face didn't fit inside oval in time limit. Try again and completely fill the oval with face in it.",
     faceDistanceHeaderText: 'Forward movement detected',
@@ -2687,6 +2721,8 @@ const defaultLivenessDisplayText = {
     goodFitCaptionText: 'Good fit',
     goodFitAltText: "Ilustration of a person's face, perfectly fitting inside of an oval.",
     hintCenterFaceText: 'Center your face',
+    hintCenterFaceInstructionText: 'Instruction: Before starting the check, make sure your camera is at the center top of your screen and center your face to the camera. When the check starts an oval will show up in the center. You will be prompted to move forward into the oval and then prompted to hold still. After holding still for a few seconds, you should hear check complete.',
+    hintFaceOffCenterText: 'Face is not in the oval, center your face to the camera.',
     hintMoveFaceFrontOfCameraText: 'Move face in front of camera',
     hintTooManyFacesText: 'Ensure only one face is in front of camera',
     hintFaceDetectedText: 'Face detected',
@@ -2695,10 +2731,12 @@ const defaultLivenessDisplayText = {
     hintTooFarText: 'Move closer',
     hintConnectingText: 'Connecting...',
     hintVerifyingText: 'Verifying...',
+    hintCheckCompleteText: 'Check complete',
     hintIlluminationTooBrightText: 'Move to dimmer area',
     hintIlluminationTooDarkText: 'Move to brighter area',
     hintIlluminationNormalText: 'Lighting conditions normal',
     hintHoldFaceForFreshnessText: 'Hold still',
+    hintMatchIndicatorText: '50% completed. Keep moving closer.',
     photosensitivityWarningBodyText: 'This check flashes different colors. Use caution if you are photosensitive.',
     photosensitivityWarningHeadingText: 'Photosensitivity warning',
     photosensitivityWarningInfoText: 'Some people may experience epileptic seizures when exposed to colored lights. Use caution if you, or anyone in your family, have an epileptic condition.',
@@ -2718,7 +2756,7 @@ const defaultLivenessDisplayText = {
 
 const renderToastErrorModal = (props) => {
     const { error: errorState, displayText } = props;
-    const { timeoutHeaderText, timeoutMessageText, faceDistanceHeaderText, faceDistanceMessageText, multipleFacesHeaderText, multipleFacesMessageText, clientHeaderText, clientMessageText, serverHeaderText, serverMessageText, } = displayText;
+    const { errorLabelText, timeoutHeaderText, timeoutMessageText, faceDistanceHeaderText, faceDistanceMessageText, multipleFacesHeaderText, multipleFacesMessageText, clientHeaderText, clientMessageText, serverHeaderText, serverMessageText, } = displayText;
     let heading;
     let message;
     switch (errorState) {
@@ -2745,7 +2783,7 @@ const renderToastErrorModal = (props) => {
     }
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(uiReact.Flex, { className: LivenessClassNames.ErrorModal },
-            React__default["default"].createElement(internal.AlertIcon, { ariaHidden: true, variation: "error" }),
+            React__default["default"].createElement(internal.AlertIcon, { ariaLabel: errorLabelText, role: "img", variation: "error" }),
             React__default["default"].createElement(uiReact.Text, { className: LivenessClassNames.ErrorModalHeading, id: "amplify-liveness-error-heading" }, heading)),
         React__default["default"].createElement(uiReact.Text, { id: "amplify-liveness-error-message" }, message)));
 };
@@ -2839,6 +2877,7 @@ const showMatchIndicatorStates = [
     FaceMatchState.TOO_FAR,
     FaceMatchState.CANT_IDENTIFY,
     FaceMatchState.FACE_IDENTIFIED,
+    FaceMatchState.OFF_CENTER,
 ];
 /**
  * For now we want to memoize the HOC for MatchIndicator because to optimize renders
@@ -2866,6 +2905,7 @@ const LivenessCameraModule = (props) => {
     const isCheckingCamera = state.matches('cameraCheck');
     const isWaitingForCamera = state.matches('waitForDOMAndCameraDetails');
     const isStartView = state.matches('start') || state.matches('userCancel');
+    const isDetectFaceBeforeStart = state.matches('detectFaceBeforeStart');
     const isRecording = state.matches('recording');
     const isCheckSucceeded = state.matches('checkSucceeded');
     const isFlashingFreshness = state.matches({
@@ -2926,6 +2966,11 @@ const LivenessCameraModule = (props) => {
             setAspectRatio(videoRef.current.videoWidth / videoRef.current.videoHeight);
         }
     }, [send, videoRef, isCameraReady, isMobileScreen]);
+    React__default["default"].useEffect(() => {
+        if (isDetectFaceBeforeStart) {
+            clearOvalCanvas({ canvas: canvasRef.current });
+        }
+    }, [isDetectFaceBeforeStart]);
     const photoSensitivityWarning = React__default["default"].useMemo(() => {
         return (React__default["default"].createElement(uiReact.View, { style: { visibility: isStartView ? 'visible' : 'hidden' } },
             React__default["default"].createElement(PhotosensitiveWarning, { bodyText: instructionDisplayText.photosensitivityWarningBodyText, headingText: instructionDisplayText.photosensitivityWarningHeadingText, infoText: instructionDisplayText.photosensitivityWarningInfoText, labelText: instructionDisplayText.photosensitivityWarningLabelText })));
@@ -2960,31 +3005,35 @@ const LivenessCameraModule = (props) => {
             React__default["default"].createElement(uiReact.Loader, { size: "large", className: LivenessClassNames.Loader, "data-testid": "centered-loader", position: "unset" }),
             React__default["default"].createElement(uiReact.Text, { fontSize: "large", fontWeight: "bold", "data-testid": "waiting-camera-permission", className: `${LivenessClassNames.StartScreenCameraWaiting}__text` }, cameraDisplayText.waitingCameraPermissionText)));
     }
-    const isRecordingOnMobile = isMobileScreen && !isStartView && !isWaitingForCamera && isRecording;
+    // We don't show full screen camera on the pre check screen (isStartView/isWaitingForCamera)
+    const shouldShowFullScreenCamera = isMobileScreen && !isStartView && !isWaitingForCamera;
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         photoSensitivityWarning,
-        React__default["default"].createElement(uiReact.Flex, { className: ui.classNames(LivenessClassNames.CameraModule, isRecordingOnMobile && `${LivenessClassNames.CameraModule}--mobile`), "data-testid": testId, gap: "zero" },
+        React__default["default"].createElement(uiReact.Flex, { className: ui.classNames(LivenessClassNames.CameraModule, shouldShowFullScreenCamera &&
+                `${LivenessClassNames.CameraModule}--mobile`), "data-testid": testId, gap: "zero" },
             !isCameraReady && centeredLoader,
+            React__default["default"].createElement(Overlay, { horizontal: "center", vertical: isRecording && !isFlashingFreshness ? 'start' : 'space-between', className: LivenessClassNames.InstructionOverlay },
+                isRecording && (React__default["default"].createElement(DefaultRecordingIcon, { recordingIndicatorText: recordingIndicatorText })),
+                !isStartView && !isWaitingForCamera && !isCheckSucceeded && (React__default["default"].createElement(DefaultCancelButton, { cancelLivenessCheckText: cancelLivenessCheckText })),
+                React__default["default"].createElement(uiReact.Flex, { className: ui.classNames(LivenessClassNames.Hint, shouldShowFullScreenCamera && `${LivenessClassNames.Hint}--mobile`) },
+                    React__default["default"].createElement(Hint, { hintDisplayText: hintDisplayText })),
+                errorState && (React__default["default"].createElement(ErrorView, { onRetry: () => {
+                        send({ type: 'CANCEL' });
+                    }, displayText: errorDisplayText }, renderErrorModal({
+                    errorState,
+                    overrideErrorDisplayText: errorDisplayText,
+                }))),
+                isRecording &&
+                    !isFlashingFreshness &&
+                    showMatchIndicatorStates.includes(faceMatchState) ? (React__default["default"].createElement(MemoizedMatchIndicator, { percentage: Math.ceil(faceMatchPercentage) })) : null),
             React__default["default"].createElement(uiReact.View, { as: "canvas", ref: freshnessColorRef, className: LivenessClassNames.FreshnessCanvas, hidden: true }),
             React__default["default"].createElement(uiReact.View, { className: LivenessClassNames.VideoAnchor, style: {
                     aspectRatio: `${aspectRatio}`,
                 } },
                 React__default["default"].createElement("video", { ref: videoRef, muted: true, autoPlay: true, playsInline: true, width: mediaWidth, height: mediaHeight, onCanPlay: handleMediaPlay, "data-testid": "video", className: LivenessClassNames.Video, "aria-label": cameraDisplayText.a11yVideoLabelText }),
-                React__default["default"].createElement(uiReact.Flex, { className: ui.classNames(LivenessClassNames.OvalCanvas, isRecordingOnMobile && `${LivenessClassNames.OvalCanvas}--mobile`, isRecordingStopped && LivenessClassNames.FadeOut) },
+                React__default["default"].createElement(uiReact.Flex, { className: ui.classNames(LivenessClassNames.OvalCanvas, shouldShowFullScreenCamera &&
+                        `${LivenessClassNames.OvalCanvas}--mobile`, isRecordingStopped && LivenessClassNames.FadeOut) },
                     React__default["default"].createElement(uiReact.View, { as: "canvas", ref: canvasRef })),
-                isRecording && (React__default["default"].createElement(DefaultRecordingIcon, { recordingIndicatorText: recordingIndicatorText })),
-                !isStartView && !isWaitingForCamera && !isCheckSucceeded && (React__default["default"].createElement(DefaultCancelButton, { cancelLivenessCheckText: cancelLivenessCheckText })),
-                React__default["default"].createElement(Overlay, { horizontal: "center", vertical: isRecording && !isFlashingFreshness ? 'start' : 'space-between', className: LivenessClassNames.InstructionOverlay },
-                    React__default["default"].createElement(Hint, { hintDisplayText: hintDisplayText }),
-                    errorState && (React__default["default"].createElement(ErrorView, { onRetry: () => {
-                            send({ type: 'CANCEL' });
-                        }, displayText: errorDisplayText }, renderErrorModal({
-                        errorState,
-                        overrideErrorDisplayText: errorDisplayText,
-                    }))),
-                    isRecording &&
-                        !isFlashingFreshness &&
-                        showMatchIndicatorStates.includes(faceMatchState) ? (React__default["default"].createElement(MemoizedMatchIndicator, { percentage: Math.ceil(faceMatchPercentage) })) : null),
                 isStartView &&
                     !isMobileScreen &&
                     selectableDevices &&
@@ -3123,7 +3172,7 @@ function getDisplayText(overrideDisplayText) {
         ...defaultLivenessDisplayText,
         ...overrideDisplayText,
     };
-    const { a11yVideoLabelText, cameraMinSpecificationsHeadingText, cameraMinSpecificationsMessageText, cameraNotFoundHeadingText, cameraNotFoundMessageText, cancelLivenessCheckText, clientHeaderText, clientMessageText, hintCanNotIdentifyText, hintCenterFaceText, hintConnectingText, hintFaceDetectedText, hintHoldFaceForFreshnessText, hintIlluminationNormalText, hintIlluminationTooBrightText, hintIlluminationTooDarkText, hintMoveFaceFrontOfCameraText, hintTooManyFacesText, hintTooCloseText, hintTooFarText, hintVerifyingText, faceDistanceHeaderText, faceDistanceMessageText, goodFitCaptionText, goodFitAltText, landscapeHeaderText, landscapeMessageText, multipleFacesHeaderText, multipleFacesMessageText, photosensitivityWarningBodyText, photosensitivityWarningHeadingText, photosensitivityWarningInfoText, photosensitivityWarningLabelText, photosensitivyWarningBodyText, photosensitivyWarningHeadingText, photosensitivyWarningInfoText, photosensitivyWarningLabelText, portraitMessageText, retryCameraPermissionsText, recordingIndicatorText, serverHeaderText, serverMessageText, startScreenBeginCheckText, timeoutHeaderText, timeoutMessageText, tooFarCaptionText, tooFarAltText, tryAgainText, waitingCameraPermissionText, } = displayText;
+    const { a11yVideoLabelText, cameraMinSpecificationsHeadingText, cameraMinSpecificationsMessageText, cameraNotFoundHeadingText, cameraNotFoundMessageText, cancelLivenessCheckText, clientHeaderText, clientMessageText, errorLabelText, hintCanNotIdentifyText, hintCenterFaceText, hintCenterFaceInstructionText, hintFaceOffCenterText, hintConnectingText, hintFaceDetectedText, hintHoldFaceForFreshnessText, hintIlluminationNormalText, hintIlluminationTooBrightText, hintIlluminationTooDarkText, hintMoveFaceFrontOfCameraText, hintTooManyFacesText, hintTooCloseText, hintTooFarText, hintVerifyingText, hintCheckCompleteText, hintMatchIndicatorText, faceDistanceHeaderText, faceDistanceMessageText, goodFitCaptionText, goodFitAltText, landscapeHeaderText, landscapeMessageText, multipleFacesHeaderText, multipleFacesMessageText, photosensitivityWarningBodyText, photosensitivityWarningHeadingText, photosensitivityWarningInfoText, photosensitivityWarningLabelText, photosensitivyWarningBodyText, photosensitivyWarningHeadingText, photosensitivyWarningInfoText, photosensitivyWarningLabelText, portraitMessageText, retryCameraPermissionsText, recordingIndicatorText, serverHeaderText, serverMessageText, startScreenBeginCheckText, timeoutHeaderText, timeoutMessageText, tooFarCaptionText, tooFarAltText, tryAgainText, waitingCameraPermissionText, } = displayText;
     const hintDisplayText = {
         hintMoveFaceFrontOfCameraText,
         hintTooManyFacesText,
@@ -3133,11 +3182,15 @@ function getDisplayText(overrideDisplayText) {
         hintTooFarText,
         hintConnectingText,
         hintVerifyingText,
+        hintCheckCompleteText,
         hintIlluminationTooBrightText,
         hintIlluminationTooDarkText,
         hintIlluminationNormalText,
         hintHoldFaceForFreshnessText,
         hintCenterFaceText,
+        hintCenterFaceInstructionText,
+        hintFaceOffCenterText,
+        hintMatchIndicatorText,
     };
     const cameraDisplayText = {
         cameraMinSpecificationsHeadingText,
@@ -3168,6 +3221,7 @@ function getDisplayText(overrideDisplayText) {
         recordingIndicatorText,
     };
     const errorDisplayText = {
+        errorLabelText,
         timeoutHeaderText,
         timeoutMessageText,
         faceDistanceHeaderText,

package/dist/styles.css

@@ -197,10 +197,10 @@
   --amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100);
   --amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20);
   --amplify-components-button-outlined-success-active-color: var(--amplify-colors-green-100);
-  --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-60);
+  --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-80);
   --amplify-components-button-outlined-error-background-color: transparent;
   --amplify-components-button-outlined-error-color: var(--amplify-colors-red-100);
-  --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-60);
+  --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-80);
   --amplify-components-button-outlined-error-hover-background-color: var(--amplify-colors-red-10);
   --amplify-components-button-outlined-error-hover-color: var(--amplify-colors-red-100);
   --amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100);
@@ -851,6 +851,19 @@
   --amplify-components-passwordfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color);
   --amplify-components-passwordfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color);
   --amplify-components-passwordfield-button-disabled-color: var(--amplify-components-button-disabled-color);
+  --amplify-components-passwordfield-button-error-color: var(--amplify-components-button-outlined-error-color);
+  --amplify-components-passwordfield-button-error-background-color: var(--amplify-components-button-outlined-error-background-color);
+  --amplify-components-passwordfield-button-error-border-color: var(--amplify-components-button-outlined-error-border-color);
+  --amplify-components-passwordfield-button-error-active-border-color: var(--amplify-components-button-outlined-error-active-border-color);
+  --amplify-components-passwordfield-button-error-active-background-color: var(--amplify-components-button-outlined-error-active-background-color);
+  --amplify-components-passwordfield-button-error-active-color: var(--amplify-components-button-outlined-error-active-color);
+  --amplify-components-passwordfield-button-error-focus-border-color: var(--amplify-components-button-outlined-error-focus-border-color);
+  --amplify-components-passwordfield-button-error-focus-background-color: var(--amplify-components-button-outlined-error-focus-background-color);
+  --amplify-components-passwordfield-button-error-focus-color: var(--amplify-components-button-outlined-error-focus-color);
+  --amplify-components-passwordfield-button-error-focus-box-shadow: var(--amplify-components-button-outlined-error-focus-box-shadow);
+  --amplify-components-passwordfield-button-error-hover-border-color: var(--amplify-components-button-outlined-error-hover-border-color);
+  --amplify-components-passwordfield-button-error-hover-background-color: var(--amplify-components-button-outlined-error-hover-background-color);
+  --amplify-components-passwordfield-button-error-hover-color: var(--amplify-components-button-outlined-error-hover-color);
   --amplify-components-passwordfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
   --amplify-components-passwordfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);
   --amplify-components-passwordfield-button-focus-color: var(--amplify-components-button-focus-color);
@@ -3911,6 +3924,12 @@ html[dir=rtl] .amplify-field-group__inner-start {
   right: var(--amplify-space-medium);
 }
 
+.liveness-detector .amplify-button--primary:focus {
+  box-shadow: unset;
+  outline: var(--amplify-components-button-focus-color) solid 2px;
+  outline-offset: 2px;
+}
+
 .amplify-liveness-cancel-button {
   background-color: #fff;
   color: hsl(190, 95%, 30%);
@@ -3945,6 +3964,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
   left: 0;
   height: 100%;
   width: 100%;
+  z-index: 2;
 }
 
 .amplify-liveness-video {
@@ -4014,7 +4034,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
 }
 
 .amplify-liveness-instruction-overlay {
-  z-index: 1;
+  z-index: 2;
 }
 
 .amplify-liveness-countdown-container {
@@ -4248,6 +4268,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
   font-weight: var(--amplify-font-weights-bold);
 }
 
+.amplify-liveness-hint--mobile {
+  margin-top: var(--amplify-space-xxxl);
+}
+
 .amplify-liveness-hint__text {
   align-items: center;
   gap: var(--amplify-space-xs);
@@ -4325,6 +4349,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  text-align: center;
   height: 480px;
 }
 
@@ -4580,11 +4605,45 @@ html[dir=rtl] .amplify-field-group__inner-start {
   --amplify-components-button-hover-color: var(
     --amplify-components-passwordfield-button-hover-color
   );
-}
-
-.amplify-field__show-password--error {
-  color: var(--amplify-components-fieldcontrol-error-color);
-  border-color: var(--amplify-components-fieldcontrol-error-border-color);
+  --amplify-components-button-outlined-error-color: var(
+    --amplify-components-passwordfield-button-error-color
+  );
+  --amplify-components-button-outlined-error-border-color: var(
+    --amplify-components-passwordfield-button-error-border-color
+  );
+  --amplify-components-button-outlined-error-background-color: var(
+    --amplify-components-passwordfield-button-error-background-color
+  );
+  --amplify-components-button-outlined-error-active-color: var(
+    --amplify-components-passwordfield-button-error-active-color
+  );
+  --amplify-components-button-outlined-error-active-border-color: var(
+    --amplify-components-passwordfield-button-error-active-border-color
+  );
+  --amplify-components-button-outlined-error-active-background-color: var(
+    --amplify-components-passwordfield-button-error-active-background-color
+  );
+  --amplify-components-button-outlined-error-hover-color: var(
+    --amplify-components-passwordfield-button-error-hover-color
+  );
+  --amplify-components-button-outlined-error-hover-border-color: var(
+    --amplify-components-passwordfield-button-error-hover-border-color
+  );
+  --amplify-components-button-outlined-error-hover-background-color: var(
+    --amplify-components-passwordfield-button-error-hover-background-color
+  );
+  --amplify-components-button-outlined-error-focus-color: var(
+    --amplify-components-passwordfield-button-error-focus-color
+  );
+  --amplify-components-button-outlined-error-focus-box-shadow: var(
+    --amplify-components-passwordfield-button-error-focus-box-shadow
+  );
+  --amplify-components-button-outlined-error-focus-border-color: var(
+    --amplify-components-passwordfield-button-error-focus-border-color
+  );
+  --amplify-components-button-outlined-error-focus-background-color: var(
+    --amplify-components-passwordfield-button-error-focus-background-color
+  );
 }
 
 .amplify-phonenumberfield select:not(:focus) {
@@ -5327,6 +5386,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
     var(--amplify-components-table-header-border-width)
     var(--amplify-components-table-header-border-width);
 }
+.amplify-table--striped .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
+  background-color: var(--amplify-components-table-row-striped-background-color);
+}
 .amplify-table__caption {
   caption-side: var(--amplify-components-table-caption-caption-side);
   color: var(--amplify-components-table-caption-color);
@@ -5385,9 +5447,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
 .amplify-table__td:last-child {
   border-right-width: var(--amplify-components-table-data-border-width);
 }
-.amplify-table[data-variation=striped] .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
-  background-color: var(--amplify-components-table-row-striped-background-color);
-}
 .amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
   background-color: var(--amplify-components-table-row-hover-background-color);
 }

package/dist/types/components/FaceLivenessDetector/displayText.d.ts

@@ -1,3 +1,4 @@
+import { DisplayTextTemplate } from '@aws-amplify/ui';
 export type HintDisplayText = {
     hintMoveFaceFrontOfCameraText?: string;
     hintTooManyFacesText?: string;
@@ -7,11 +8,15 @@ export type HintDisplayText = {
     hintTooFarText?: string;
     hintConnectingText?: string;
     hintVerifyingText?: string;
+    hintCheckCompleteText?: string;
     hintIlluminationTooBrightText?: string;
     hintIlluminationTooDarkText?: string;
     hintIlluminationNormalText?: string;
     hintHoldFaceForFreshnessText?: string;
     hintCenterFaceText?: string;
+    hintCenterFaceInstructionText?: string;
+    hintFaceOffCenterText?: string;
+    hintMatchIndicatorText?: string;
 };
 export type CameraDisplayText = {
     cameraMinSpecificationsHeadingText?: string;
@@ -29,19 +34,32 @@ export type InstructionDisplayText = {
     photosensitivityWarningHeadingText?: string;
     photosensitivityWarningInfoText?: string;
     photosensitivityWarningLabelText?: string;
+    startScreenBeginCheckText?: string;
+    tooFarCaptionText?: string;
+    tooFarAltText?: string;
+    /**
+     * @deprecated `photosensitivyWarningBodyText` has been replaced with `photosensitivityWarningBodyText` amd will be removed in a future major version of `@aws-amplify/ui-react-liveness`
+     */
     photosensitivyWarningBodyText?: string;
+    /**
+     * @deprecated `photosensitivyWarningHeadingText` has been replaced with `photosensitivityWarningHeadingText` amd will be removed in a future major version of `@aws-amplify/ui-react-liveness`
+     */
     photosensitivyWarningHeadingText?: string;
+    /**
+     * @deprecated `photosensitivyWarningInfoText` has been replaced with `photosensitivityWarningInfoText` amd will be removed in a future major version of `@aws-amplify/ui-react-liveness`
+     */
     photosensitivyWarningInfoText?: string;
+    /**
+     * @deprecated `photosensitivyWarningLabelText` has been replaced with `photosensitivityWarningLabelText` amd will be removed in a future major version of `@aws-amplify/ui-react-liveness`
+     */
     photosensitivyWarningLabelText?: string;
-    startScreenBeginCheckText?: string;
-    tooFarCaptionText?: string;
-    tooFarAltText?: string;
 };
 export type StreamDisplayText = {
     recordingIndicatorText?: string;
     cancelLivenessCheckText?: string;
 };
 export declare const defaultErrorDisplayText: {
+    errorLabelText: string;
     timeoutHeaderText: string;
     timeoutMessageText: string;
     faceDistanceHeaderText: string;
@@ -57,8 +75,6 @@ export declare const defaultErrorDisplayText: {
     portraitMessageText: string;
     tryAgainText: string;
 };
-export type ErrorDisplayTextFoo = typeof defaultErrorDisplayText;
-export type ErrorDisplayText = Partial<ErrorDisplayTextFoo>;
+export type ErrorDisplayText = Partial<typeof defaultErrorDisplayText>;
 export declare const defaultLivenessDisplayText: Required<LivenessDisplayText>;
-export interface LivenessDisplayText extends HintDisplayText, CameraDisplayText, InstructionDisplayText, ErrorDisplayText, StreamDisplayText {
-}
+export type LivenessDisplayText = DisplayTextTemplate<HintDisplayText & CameraDisplayText & InstructionDisplayText & ErrorDisplayText & StreamDisplayText>;

package/dist/types/components/FaceLivenessDetector/service/types/liveness.d.ts

@@ -101,7 +101,8 @@ export declare enum FaceMatchState {
     TOO_CLOSE = "TOO CLOSE",
     CANT_IDENTIFY = "CANNOT IDENTIFY",
     FACE_IDENTIFIED = "ONE FACE IDENTIFIED",
-    TOO_MANY = "TOO MANY FACES"
+    TOO_MANY = "TOO MANY FACES",
+    OFF_CENTER = "OFF CENTER"
 }
 export interface LivenessError {
     state: ErrorState;

package/dist/types/components/FaceLivenessDetector/service/utils/liveness.d.ts

@@ -47,6 +47,9 @@ export declare function drawLivenessOvalInCanvas({ canvas, oval, scaleFactor, vi
     videoEl: HTMLVideoElement;
     isStartScreen?: boolean;
 }): void;
+export declare function clearOvalCanvas({ canvas, }: {
+    canvas: HTMLCanvasElement;
+}): void;
 interface FaceMatchStateInLivenessOval {
     faceMatchState: FaceMatchState;
     faceMatchPercentage: number;

package/dist/types/components/FaceLivenessDetector/shared/FaceLivenessErrorModal.d.ts

@@ -12,6 +12,7 @@ export interface FaceLivenessErrorModalProps {
 export declare const renderErrorModal: ({ errorState, overrideErrorDisplayText, }: {
     errorState: ErrorState;
     overrideErrorDisplayText?: Partial<{
+        errorLabelText: string;
         timeoutHeaderText: string;
         timeoutMessageText: string;
         faceDistanceHeaderText: string;

package/dist/types/components/FaceLivenessDetector/shared/ToastWithLoader.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 interface ToastWithLoaderProps {
     displayText: string;
-    labelText?: string;
 }
 export declare const ToastWithLoader: React.FC<ToastWithLoaderProps>;
 export {};

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "3.0.8";
+export declare const VERSION = "3.0.10";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-liveness",
-  "version": "3.0.8",
+  "version": "3.0.10",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -47,8 +47,8 @@
     "react-dom": "^16.14.0 || ^17.0 || ^18.0"
   },
   "dependencies": {
-    "@aws-amplify/ui": "6.0.6",
-    "@aws-amplify/ui-react": "6.1.0",
+    "@aws-amplify/ui": "6.0.8",
+    "@aws-amplify/ui-react": "6.1.2",
     "@aws-sdk/client-rekognitionstreaming": "3.398.0",
     "@aws-sdk/util-format-url": "^3.410.0",
     "@smithy/eventstream-serde-browser": "^2.0.4",
@@ -80,7 +80,7 @@
       "name": "FaceLivenessDetector",
       "path": "dist/esm/index.mjs",
       "import": "{ FaceLivenessDetector }",
-      "limit": "274 kB"
+      "limit": "275 kB"
     }
   ]
 }