@aws-amplify/ui-react-liveness 3.0.2 → 3.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/esm/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.mjs +6 -7
  2. package/dist/esm/components/FaceLivenessDetector/displayText.mjs +1 -0
  3. package/dist/esm/components/FaceLivenessDetector/shared/DefaultStartScreenComponents.mjs +1 -1
  4. package/dist/esm/components/FaceLivenessDetector/shared/Hint.mjs +7 -5
  5. package/dist/esm/components/FaceLivenessDetector/utils/getDisplayText.mjs +2 -1
  6. package/dist/esm/version.mjs +1 -1
  7. package/dist/index.js +16 -13
  8. package/dist/styles.css +34 -26
  9. package/dist/types/components/FaceLivenessDetector/displayText.d.ts +1 -0
  10. package/dist/types/version.d.ts +1 -1
  11. package/package.json +4 -4
package/dist/esm/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.mjs CHANGED
@@ -25,7 +25,7 @@ import { selectErrorState, Hint } from '../shared/Hint.mjs';
25
25
  import { MatchIndicator } from '../shared/MatchIndicator.mjs';
26
26
  import { Overlay } from '../shared/Overlay.mjs';
27
27
  import { renderErrorModal, FaceLivenessErrorModal } from '../shared/FaceLivenessErrorModal.mjs';
28
- import { DefaultPhotosensitiveWarning, DefaultRecordingIcon, DefaultCancelButton } from '../shared/DefaultStartScreenComponents.mjs';
28
+ import { DefaultRecordingIcon, DefaultCancelButton, DefaultPhotosensitiveWarning } from '../shared/DefaultStartScreenComponents.mjs';
29
29
 
30
30
  const selectVideoConstraints = createLivenessSelector((state) => state.context.videoAssociatedParams?.videoConstraints);
31
31
  const selectVideoStream = createLivenessSelector((state) => state.context.videoAssociatedParams?.videoMediaStream);
@@ -38,7 +38,6 @@ const showMatchIndicatorStates = [
38
38
  FaceMatchState.TOO_FAR,
39
39
  FaceMatchState.CANT_IDENTIFY,
40
40
  FaceMatchState.FACE_IDENTIFIED,
41
- FaceMatchState.MATCHED,
42
41
  ];
43
42
  /**
44
43
  * For now we want to memoize the HOC for MatchIndicator because to optimize renders
@@ -49,7 +48,7 @@ const MemoizedMatchIndicator = React__default.memo(MatchIndicator);
49
48
  const LivenessCameraModule = (props) => {
50
49
  const { isMobileScreen, isRecordingStopped, instructionDisplayText, streamDisplayText, hintDisplayText, errorDisplayText, cameraDisplayText, components: customComponents, testId, } = props;
51
50
  const { cancelLivenessCheckText, recordingIndicatorText } = streamDisplayText;
52
- const { ErrorView = FaceLivenessErrorModal } = customComponents ?? {};
51
+ const { ErrorView = FaceLivenessErrorModal, PhotosensitiveWarning = DefaultPhotosensitiveWarning, } = customComponents ?? {};
53
52
  const [state, send] = useLivenessActor();
54
53
  const videoStream = useLivenessSelector(selectVideoStream);
55
54
  const videoConstraints = useLivenessSelector(selectVideoConstraints);
@@ -128,8 +127,8 @@ const LivenessCameraModule = (props) => {
128
127
  }, [send, videoRef, isCameraReady, isMobileScreen]);
129
128
  const photoSensitivtyWarning = React__default.useMemo(() => {
130
129
  return (React__default.createElement(View, { style: { visibility: isStartView ? 'visible' : 'hidden' } },
131
- React__default.createElement(DefaultPhotosensitiveWarning, { headingText: instructionDisplayText.photosensitivyWarningHeadingText, bodyText: instructionDisplayText.photosensitivyWarningBodyText, infoText: instructionDisplayText.photosensitivyWarningInfoText })));
132
- }, [instructionDisplayText, isStartView]);
130
+ React__default.createElement(PhotosensitiveWarning, { headingText: instructionDisplayText.photosensitivyWarningHeadingText, bodyText: instructionDisplayText.photosensitivyWarningBodyText, infoText: instructionDisplayText.photosensitivyWarningInfoText })));
131
+ }, [PhotosensitiveWarning, instructionDisplayText, isStartView]);
133
132
  const handleMediaPlay = () => {
134
133
  setIsCameraReady(true);
135
134
  };
@@ -169,7 +168,7 @@ const LivenessCameraModule = (props) => {
169
168
  React__default.createElement(View, { className: LivenessClassNames.VideoAnchor, style: {
170
169
  aspectRatio: `${aspectRatio}`,
171
170
  } },
172
- React__default.createElement("video", { ref: videoRef, muted: true, autoPlay: true, playsInline: true, width: mediaWidth, height: mediaHeight, onCanPlay: handleMediaPlay, "data-testid": "video", className: LivenessClassNames.Video }),
171
+ 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 }),
173
172
  React__default.createElement(Flex, { className: classNames(LivenessClassNames.OvalCanvas, isRecordingOnMobile && `${LivenessClassNames.OvalCanvas}--mobile`, isRecordingStopped && LivenessClassNames.FadeOut) },
174
173
  React__default.createElement(View, { as: "canvas", ref: canvasRef })),
175
174
  isRecording && (React__default.createElement(DefaultRecordingIcon, { recordingIndicatorText: recordingIndicatorText })),
@@ -178,7 +177,7 @@ const LivenessCameraModule = (props) => {
178
177
  React__default.createElement(Hint, { hintDisplayText: hintDisplayText }),
179
178
  errorState && (React__default.createElement(ErrorView, { onRetry: () => {
180
179
  send({ type: 'CANCEL' });
181
- } }, renderErrorModal({
180
+ }, displayText: errorDisplayText }, renderErrorModal({
182
181
  errorState,
183
182
  overrideErrorDisplayText: errorDisplayText,
184
183
  }))),
package/dist/esm/components/FaceLivenessDetector/displayText.mjs CHANGED
@@ -30,6 +30,7 @@ const defaultLivenessDisplayText = {
30
30
  cameraNotFoundMessageText: 'Check that a camera is connected and there is not another application using the camera. You may have to go into settings to grant camera permissions and close out all instances of your browser and retry.',
31
31
  retryCameraPermissionsText: 'Retry',
32
32
  waitingCameraPermissionText: 'Waiting for you to allow camera permission.',
33
+ a11yVideoLabelText: 'Webcam for liveness check',
33
34
  cancelLivenessCheckText: 'Cancel Liveness check',
34
35
  recordingIndicatorText: 'Rec',
35
36
  hintMoveFaceFrontOfCameraText: 'Move face in front of camera',
package/dist/esm/components/FaceLivenessDetector/shared/DefaultStartScreenComponents.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import React__default from 'react';
2
2
  import { ComponentClassName } from '@aws-amplify/ui';
3
- import { Flex, View } from '@aws-amplify/ui-react';
3
+ import { View, Flex } from '@aws-amplify/ui-react';
4
4
  import { CancelButton } from './CancelButton.mjs';
5
5
  import '../service/machine/index.mjs';
6
6
  import '../service/types/liveness.mjs';
package/dist/esm/components/FaceLivenessDetector/shared/Hint.mjs CHANGED
@@ -99,11 +99,13 @@ const Hint = ({ hintDisplayText }) => {
99
99
  // During face matching, we want to only show the TOO_CLOSE or
100
100
  // TOO_FAR texts. If FaceMatchState matches TOO_CLOSE, we'll show
101
101
  // the TOO_CLOSE text, but for FACE_IDENTIFED, CANT_IDENTIFY, TOO_MANY
102
- // we are defaulting to the TOO_FAR text (for now). For MATCHED state,
103
- // we don't want to show any toasts.
104
- return (React.createElement(Toast, { size: "large", variation: faceMatchState === FaceMatchState.TOO_CLOSE ? 'error' : 'primary' }, faceMatchState === FaceMatchState.TOO_CLOSE
105
- ? FaceMatchStateStringMap[FaceMatchState.TOO_CLOSE]
106
- : FaceMatchStateStringMap[FaceMatchState.TOO_FAR]));
102
+ // we are defaulting to the TOO_FAR text (for now).
103
+ let resultHintString = FaceMatchStateStringMap[FaceMatchState.TOO_FAR];
104
+ if (faceMatchState === FaceMatchState.TOO_CLOSE ||
105
+ faceMatchState === FaceMatchState.MATCHED) {
106
+ resultHintString = FaceMatchStateStringMap[faceMatchState];
107
+ }
108
+ return (React.createElement(Toast, { size: "large", variation: faceMatchState === FaceMatchState.TOO_CLOSE ? 'error' : 'primary' }, resultHintString));
107
109
  }
108
110
  return null;
109
111
  };
package/dist/esm/components/FaceLivenessDetector/utils/getDisplayText.mjs CHANGED
@@ -12,7 +12,7 @@ function getDisplayText(overrideDisplayText) {
12
12
  ...defaultLivenessDisplayText,
13
13
  ...overrideDisplayText,
14
14
  };
15
- const { photosensitivyWarningHeadingText, photosensitivyWarningBodyText, photosensitivyWarningInfoText, goodFitCaptionText, goodFitAltText, tooFarCaptionText, tooFarAltText, cameraMinSpecificationsHeadingText, cameraMinSpecificationsMessageText, cameraNotFoundHeadingText, cameraNotFoundMessageText, retryCameraPermissionsText, waitingCameraPermissionText, cancelLivenessCheckText, recordingIndicatorText, hintMoveFaceFrontOfCameraText, hintTooManyFacesText, hintFaceDetectedText, hintCanNotIdentifyText, hintTooCloseText, hintTooFarText, hintConnectingText, hintVerifyingText, hintIlluminationTooBrightText, hintIlluminationTooDarkText, hintIlluminationNormalText, hintHoldFaceForFreshnessText, timeoutHeaderText, timeoutMessageText, faceDistanceHeaderText, faceDistanceMessageText, multipleFacesHeaderText, multipleFacesMessageText, clientHeaderText, clientMessageText, serverHeaderText, serverMessageText, landscapeHeaderText, landscapeMessageText, portraitMessageText, tryAgainText, startScreenBeginCheckText, hintCenterFaceText, } = displayText;
15
+ const { photosensitivyWarningHeadingText, photosensitivyWarningBodyText, photosensitivyWarningInfoText, goodFitCaptionText, goodFitAltText, tooFarCaptionText, tooFarAltText, cameraMinSpecificationsHeadingText, cameraMinSpecificationsMessageText, cameraNotFoundHeadingText, cameraNotFoundMessageText, retryCameraPermissionsText, waitingCameraPermissionText, a11yVideoLabelText, cancelLivenessCheckText, recordingIndicatorText, hintMoveFaceFrontOfCameraText, hintTooManyFacesText, hintFaceDetectedText, hintCanNotIdentifyText, hintTooCloseText, hintTooFarText, hintConnectingText, hintVerifyingText, hintIlluminationTooBrightText, hintIlluminationTooDarkText, hintIlluminationNormalText, hintHoldFaceForFreshnessText, timeoutHeaderText, timeoutMessageText, faceDistanceHeaderText, faceDistanceMessageText, multipleFacesHeaderText, multipleFacesMessageText, clientHeaderText, clientMessageText, serverHeaderText, serverMessageText, landscapeHeaderText, landscapeMessageText, portraitMessageText, tryAgainText, startScreenBeginCheckText, hintCenterFaceText, } = displayText;
16
16
  const hintDisplayText = {
17
17
  hintMoveFaceFrontOfCameraText,
18
18
  hintTooManyFacesText,
@@ -35,6 +35,7 @@ function getDisplayText(overrideDisplayText) {
35
35
  cameraNotFoundMessageText,
36
36
  retryCameraPermissionsText,
37
37
  waitingCameraPermissionText,
38
+ a11yVideoLabelText,
38
39
  };
39
40
  const instructionDisplayText = {
40
41
  photosensitivyWarningHeadingText,
package/dist/esm/version.mjs CHANGED
@@ -1,3 +1,3 @@
1
- const VERSION = '3.0.2';
1
+ const VERSION = '3.0.4';
2
2
 
3
3
  export { VERSION };
package/dist/index.js CHANGED
@@ -771,7 +771,7 @@ class VideoRecorder {
771
771
  }
772
772
  }
773
773
 
774
- const VERSION = '3.0.2';
774
+ const VERSION = '3.0.4';
775
775
 
776
776
  const BASE_USER_AGENT = `ui-react-liveness/${VERSION}`;
777
777
  const getLivenessUserAgent = () => {
@@ -2609,11 +2609,13 @@ const Hint = ({ hintDisplayText }) => {
2609
2609
  // During face matching, we want to only show the TOO_CLOSE or
2610
2610
  // TOO_FAR texts. If FaceMatchState matches TOO_CLOSE, we'll show
2611
2611
  // the TOO_CLOSE text, but for FACE_IDENTIFED, CANT_IDENTIFY, TOO_MANY
2612
- // we are defaulting to the TOO_FAR text (for now). For MATCHED state,
2613
- // we don't want to show any toasts.
2614
- return (React__namespace.createElement(Toast, { size: "large", variation: faceMatchState === FaceMatchState.TOO_CLOSE ? 'error' : 'primary' }, faceMatchState === FaceMatchState.TOO_CLOSE
2615
- ? FaceMatchStateStringMap[FaceMatchState.TOO_CLOSE]
2616
- : FaceMatchStateStringMap[FaceMatchState.TOO_FAR]));
2612
+ // we are defaulting to the TOO_FAR text (for now).
2613
+ let resultHintString = FaceMatchStateStringMap[FaceMatchState.TOO_FAR];
2614
+ if (faceMatchState === FaceMatchState.TOO_CLOSE ||
2615
+ faceMatchState === FaceMatchState.MATCHED) {
2616
+ resultHintString = FaceMatchStateStringMap[faceMatchState];
2617
+ }
2618
+ return (React__namespace.createElement(Toast, { size: "large", variation: faceMatchState === FaceMatchState.TOO_CLOSE ? 'error' : 'primary' }, resultHintString));
2617
2619
  }
2618
2620
  return null;
2619
2621
  };
@@ -2685,6 +2687,7 @@ const defaultLivenessDisplayText = {
2685
2687
  cameraNotFoundMessageText: 'Check that a camera is connected and there is not another application using the camera. You may have to go into settings to grant camera permissions and close out all instances of your browser and retry.',
2686
2688
  retryCameraPermissionsText: 'Retry',
2687
2689
  waitingCameraPermissionText: 'Waiting for you to allow camera permission.',
2690
+ a11yVideoLabelText: 'Webcam for liveness check',
2688
2691
  cancelLivenessCheckText: 'Cancel Liveness check',
2689
2692
  recordingIndicatorText: 'Rec',
2690
2693
  hintMoveFaceFrontOfCameraText: 'Move face in front of camera',
@@ -2824,7 +2827,6 @@ const showMatchIndicatorStates = [
2824
2827
  FaceMatchState.TOO_FAR,
2825
2828
  FaceMatchState.CANT_IDENTIFY,
2826
2829
  FaceMatchState.FACE_IDENTIFIED,
2827
- FaceMatchState.MATCHED,
2828
2830
  ];
2829
2831
  /**
2830
2832
  * For now we want to memoize the HOC for MatchIndicator because to optimize renders
@@ -2835,7 +2837,7 @@ const MemoizedMatchIndicator = React__default["default"].memo(MatchIndicator);
2835
2837
  const LivenessCameraModule = (props) => {
2836
2838
  const { isMobileScreen, isRecordingStopped, instructionDisplayText, streamDisplayText, hintDisplayText, errorDisplayText, cameraDisplayText, components: customComponents, testId, } = props;
2837
2839
  const { cancelLivenessCheckText, recordingIndicatorText } = streamDisplayText;
2838
- const { ErrorView = FaceLivenessErrorModal } = customComponents ?? {};
2840
+ const { ErrorView = FaceLivenessErrorModal, PhotosensitiveWarning = DefaultPhotosensitiveWarning, } = customComponents ?? {};
2839
2841
  const [state, send] = useLivenessActor();
2840
2842
  const videoStream = useLivenessSelector(selectVideoStream);
2841
2843
  const videoConstraints = useLivenessSelector(selectVideoConstraints);
@@ -2914,8 +2916,8 @@ const LivenessCameraModule = (props) => {
2914
2916
  }, [send, videoRef, isCameraReady, isMobileScreen]);
2915
2917
  const photoSensitivtyWarning = React__default["default"].useMemo(() => {
2916
2918
  return (React__default["default"].createElement(uiReact.View, { style: { visibility: isStartView ? 'visible' : 'hidden' } },
2917
- React__default["default"].createElement(DefaultPhotosensitiveWarning, { headingText: instructionDisplayText.photosensitivyWarningHeadingText, bodyText: instructionDisplayText.photosensitivyWarningBodyText, infoText: instructionDisplayText.photosensitivyWarningInfoText })));
2918
- }, [instructionDisplayText, isStartView]);
2919
+ React__default["default"].createElement(PhotosensitiveWarning, { headingText: instructionDisplayText.photosensitivyWarningHeadingText, bodyText: instructionDisplayText.photosensitivyWarningBodyText, infoText: instructionDisplayText.photosensitivyWarningInfoText })));
2920
+ }, [PhotosensitiveWarning, instructionDisplayText, isStartView]);
2919
2921
  const handleMediaPlay = () => {
2920
2922
  setIsCameraReady(true);
2921
2923
  };
@@ -2955,7 +2957,7 @@ const LivenessCameraModule = (props) => {
2955
2957
  React__default["default"].createElement(uiReact.View, { className: LivenessClassNames.VideoAnchor, style: {
2956
2958
  aspectRatio: `${aspectRatio}`,
2957
2959
  } },
2958
- 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 }),
2960
+ 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 }),
2959
2961
  React__default["default"].createElement(uiReact.Flex, { className: ui.classNames(LivenessClassNames.OvalCanvas, isRecordingOnMobile && `${LivenessClassNames.OvalCanvas}--mobile`, isRecordingStopped && LivenessClassNames.FadeOut) },
2960
2962
  React__default["default"].createElement(uiReact.View, { as: "canvas", ref: canvasRef })),
2961
2963
  isRecording && (React__default["default"].createElement(DefaultRecordingIcon, { recordingIndicatorText: recordingIndicatorText })),
@@ -2964,7 +2966,7 @@ const LivenessCameraModule = (props) => {
2964
2966
  React__default["default"].createElement(Hint, { hintDisplayText: hintDisplayText }),
2965
2967
  errorState && (React__default["default"].createElement(ErrorView, { onRetry: () => {
2966
2968
  send({ type: 'CANCEL' });
2967
- } }, renderErrorModal({
2969
+ }, displayText: errorDisplayText }, renderErrorModal({
2968
2970
  errorState,
2969
2971
  overrideErrorDisplayText: errorDisplayText,
2970
2972
  }))),
@@ -3109,7 +3111,7 @@ function getDisplayText(overrideDisplayText) {
3109
3111
  ...defaultLivenessDisplayText,
3110
3112
  ...overrideDisplayText,
3111
3113
  };
3112
- const { photosensitivyWarningHeadingText, photosensitivyWarningBodyText, photosensitivyWarningInfoText, goodFitCaptionText, goodFitAltText, tooFarCaptionText, tooFarAltText, cameraMinSpecificationsHeadingText, cameraMinSpecificationsMessageText, cameraNotFoundHeadingText, cameraNotFoundMessageText, retryCameraPermissionsText, waitingCameraPermissionText, cancelLivenessCheckText, recordingIndicatorText, hintMoveFaceFrontOfCameraText, hintTooManyFacesText, hintFaceDetectedText, hintCanNotIdentifyText, hintTooCloseText, hintTooFarText, hintConnectingText, hintVerifyingText, hintIlluminationTooBrightText, hintIlluminationTooDarkText, hintIlluminationNormalText, hintHoldFaceForFreshnessText, timeoutHeaderText, timeoutMessageText, faceDistanceHeaderText, faceDistanceMessageText, multipleFacesHeaderText, multipleFacesMessageText, clientHeaderText, clientMessageText, serverHeaderText, serverMessageText, landscapeHeaderText, landscapeMessageText, portraitMessageText, tryAgainText, startScreenBeginCheckText, hintCenterFaceText, } = displayText;
3114
+ const { photosensitivyWarningHeadingText, photosensitivyWarningBodyText, photosensitivyWarningInfoText, goodFitCaptionText, goodFitAltText, tooFarCaptionText, tooFarAltText, cameraMinSpecificationsHeadingText, cameraMinSpecificationsMessageText, cameraNotFoundHeadingText, cameraNotFoundMessageText, retryCameraPermissionsText, waitingCameraPermissionText, a11yVideoLabelText, cancelLivenessCheckText, recordingIndicatorText, hintMoveFaceFrontOfCameraText, hintTooManyFacesText, hintFaceDetectedText, hintCanNotIdentifyText, hintTooCloseText, hintTooFarText, hintConnectingText, hintVerifyingText, hintIlluminationTooBrightText, hintIlluminationTooDarkText, hintIlluminationNormalText, hintHoldFaceForFreshnessText, timeoutHeaderText, timeoutMessageText, faceDistanceHeaderText, faceDistanceMessageText, multipleFacesHeaderText, multipleFacesMessageText, clientHeaderText, clientMessageText, serverHeaderText, serverMessageText, landscapeHeaderText, landscapeMessageText, portraitMessageText, tryAgainText, startScreenBeginCheckText, hintCenterFaceText, } = displayText;
3113
3115
  const hintDisplayText = {
3114
3116
  hintMoveFaceFrontOfCameraText,
3115
3117
  hintTooManyFacesText,
@@ -3132,6 +3134,7 @@ function getDisplayText(overrideDisplayText) {
3132
3134
  cameraNotFoundMessageText,
3133
3135
  retryCameraPermissionsText,
3134
3136
  waitingCameraPermissionText,
3137
+ a11yVideoLabelText,
3135
3138
  };
3136
3139
  const instructionDisplayText = {
3137
3140
  photosensitivyWarningHeadingText,
package/dist/styles.css CHANGED
@@ -167,7 +167,7 @@
167
167
  --amplify-components-button-outlined-info-focus-border-color: var(--amplify-colors-blue-100);
168
168
  --amplify-components-button-outlined-info-focus-background-color: var(--amplify-colors-blue-10);
169
169
  --amplify-components-button-outlined-info-focus-color: var(--amplify-colors-blue-100);
170
- --amplify-components-button-outlined-info-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-blue-100);
170
+ --amplify-components-button-outlined-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow);
171
171
  --amplify-components-button-outlined-info-active-border-color: var(--amplify-colors-blue-100);
172
172
  --amplify-components-button-outlined-info-active-background-color: var(--amplify-colors-blue-20);
173
173
  --amplify-components-button-outlined-info-active-color: var(--amplify-colors-blue-100);
@@ -180,7 +180,7 @@
180
180
  --amplify-components-button-outlined-warning-focus-border-color: var(--amplify-colors-orange-100);
181
181
  --amplify-components-button-outlined-warning-focus-background-color: var(--amplify-colors-orange-10);
182
182
  --amplify-components-button-outlined-warning-focus-color: var(--amplify-colors-orange-100);
183
- --amplify-components-button-outlined-warning-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-orange-100);
183
+ --amplify-components-button-outlined-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow);
184
184
  --amplify-components-button-outlined-warning-active-border-color: var(--amplify-colors-orange-100);
185
185
  --amplify-components-button-outlined-warning-active-background-color: var(--amplify-colors-orange-20);
186
186
  --amplify-components-button-outlined-warning-active-color: var(--amplify-colors-orange-100);
@@ -193,7 +193,7 @@
193
193
  --amplify-components-button-outlined-success-focus-border-color: var(--amplify-colors-green-100);
194
194
  --amplify-components-button-outlined-success-focus-background-color: var(--amplify-colors-green-10);
195
195
  --amplify-components-button-outlined-success-focus-color: var(--amplify-colors-green-100);
196
- --amplify-components-button-outlined-success-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-green-100);
196
+ --amplify-components-button-outlined-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow);
197
197
  --amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100);
198
198
  --amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20);
199
199
  --amplify-components-button-outlined-success-active-color: var(--amplify-colors-green-100);
@@ -206,7 +206,7 @@
206
206
  --amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100);
207
207
  --amplify-components-button-outlined-error-focus-background-color: var(--amplify-colors-red-10);
208
208
  --amplify-components-button-outlined-error-focus-color: var(--amplify-colors-red-100);
209
- --amplify-components-button-outlined-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-red-100);
209
+ --amplify-components-button-outlined-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
210
210
  --amplify-components-button-outlined-error-active-border-color: var(--amplify-colors-red-100);
211
211
  --amplify-components-button-outlined-error-active-background-color: var(--amplify-colors-red-20);
212
212
  --amplify-components-button-outlined-error-active-color: var(--amplify-colors-red-100);
@@ -219,7 +219,7 @@
219
219
  --amplify-components-button-outlined-overlay-focus-border-color: var(--amplify-colors-overlay-90);
220
220
  --amplify-components-button-outlined-overlay-focus-background-color: var(--amplify-colors-overlay-5);
221
221
  --amplify-components-button-outlined-overlay-focus-color: var(--amplify-colors-neutral-90);
222
- --amplify-components-button-outlined-overlay-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-overlay-90);
222
+ --amplify-components-button-outlined-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
223
223
  --amplify-components-button-outlined-overlay-active-border-color: var(--amplify-colors-overlay-90);
224
224
  --amplify-components-button-outlined-overlay-active-background-color: var(--amplify-colors-overlay-10);
225
225
  --amplify-components-button-outlined-overlay-active-color: var(--amplify-colors-neutral-100);
@@ -253,7 +253,7 @@
253
253
  --amplify-components-button-primary-info-focus-border-color: transparent;
254
254
  --amplify-components-button-primary-info-focus-background-color: var(--amplify-colors-blue-90);
255
255
  --amplify-components-button-primary-info-focus-color: var(--amplify-colors-font-inverse);
256
- --amplify-components-button-primary-info-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-blue-100);
256
+ --amplify-components-button-primary-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow);
257
257
  --amplify-components-button-primary-info-active-border-color: transparent;
258
258
  --amplify-components-button-primary-info-active-background-color: var(--amplify-colors-blue-100);
259
259
  --amplify-components-button-primary-info-active-color: var(--amplify-colors-font-inverse);
@@ -266,7 +266,7 @@
266
266
  --amplify-components-button-primary-warning-focus-border-color: transparent;
267
267
  --amplify-components-button-primary-warning-focus-background-color: var(--amplify-colors-orange-90);
268
268
  --amplify-components-button-primary-warning-focus-color: var(--amplify-colors-font-inverse);
269
- --amplify-components-button-primary-warning-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-orange-100);
269
+ --amplify-components-button-primary-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
270
270
  --amplify-components-button-primary-warning-active-border-color: transparent;
271
271
  --amplify-components-button-primary-warning-active-background-color: var(--amplify-colors-orange-100);
272
272
  --amplify-components-button-primary-warning-active-color: var(--amplify-colors-font-inverse);
@@ -279,7 +279,7 @@
279
279
  --amplify-components-button-primary-error-focus-border-color: transparent;
280
280
  --amplify-components-button-primary-error-focus-background-color: var(--amplify-colors-red-90);
281
281
  --amplify-components-button-primary-error-focus-color: var(--amplify-colors-font-inverse);
282
- --amplify-components-button-primary-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-red-100);
282
+ --amplify-components-button-primary-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
283
283
  --amplify-components-button-primary-error-active-border-color: transparent;
284
284
  --amplify-components-button-primary-error-active-background-color: var(--amplify-colors-red-100);
285
285
  --amplify-components-button-primary-error-active-color: var(--amplify-colors-font-inverse);
@@ -292,7 +292,7 @@
292
292
  --amplify-components-button-primary-success-focus-border-color: transparent;
293
293
  --amplify-components-button-primary-success-focus-background-color: var(--amplify-colors-green-90);
294
294
  --amplify-components-button-primary-success-focus-color: var(--amplify-colors-font-inverse);
295
- --amplify-components-button-primary-success-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-green-100);
295
+ --amplify-components-button-primary-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow);
296
296
  --amplify-components-button-primary-success-active-border-color: transparent;
297
297
  --amplify-components-button-primary-success-active-background-color: var(--amplify-colors-green-100);
298
298
  --amplify-components-button-primary-success-active-color: var(--amplify-colors-font-inverse);
@@ -305,7 +305,7 @@
305
305
  --amplify-components-button-primary-overlay-focus-border-color: transparent;
306
306
  --amplify-components-button-primary-overlay-focus-background-color: var(--amplify-colors-overlay-90);
307
307
  --amplify-components-button-primary-overlay-focus-color: var(--amplify-colors-font-inverse);
308
- --amplify-components-button-primary-overlay-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-overlay-90);
308
+ --amplify-components-button-primary-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
309
309
  --amplify-components-button-primary-overlay-active-border-color: transparent;
310
310
  --amplify-components-button-primary-overlay-active-background-color: var(--amplify-colors-overlay-90);
311
311
  --amplify-components-button-primary-overlay-active-color: var(--amplify-colors-font-inverse);
@@ -348,7 +348,7 @@
348
348
  --amplify-components-button-link-info-focus-border-color: transparent;
349
349
  --amplify-components-button-link-info-focus-background-color: var(--amplify-colors-blue-10);
350
350
  --amplify-components-button-link-info-focus-color: var(--amplify-colors-blue-100);
351
- --amplify-components-button-link-info-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-blue-100);
351
+ --amplify-components-button-link-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow);
352
352
  --amplify-components-button-link-info-active-border-color: transparent;
353
353
  --amplify-components-button-link-info-active-background-color: var(--amplify-colors-blue-20);
354
354
  --amplify-components-button-link-info-active-color: var(--amplify-colors-blue-100);
@@ -361,7 +361,7 @@
361
361
  --amplify-components-button-link-warning-focus-border-color: transparent;
362
362
  --amplify-components-button-link-warning-focus-background-color: var(--amplify-colors-orange-10);
363
363
  --amplify-components-button-link-warning-focus-color: var(--amplify-colors-orange-100);
364
- --amplify-components-button-link-warning-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-orange-100);
364
+ --amplify-components-button-link-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow);
365
365
  --amplify-components-button-link-warning-active-border-color: transparent;
366
366
  --amplify-components-button-link-warning-active-background-color: var(--amplify-colors-orange-20);
367
367
  --amplify-components-button-link-warning-active-color: var(--amplify-colors-orange-100);
@@ -374,7 +374,7 @@
374
374
  --amplify-components-button-link-success-focus-border-color: transparent;
375
375
  --amplify-components-button-link-success-focus-background-color: var(--amplify-colors-green-10);
376
376
  --amplify-components-button-link-success-focus-color: var(--amplify-colors-green-100);
377
- --amplify-components-button-link-success-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-green-100);
377
+ --amplify-components-button-link-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow);
378
378
  --amplify-components-button-link-success-active-border-color: transparent;
379
379
  --amplify-components-button-link-success-active-background-color: var(--amplify-colors-green-20);
380
380
  --amplify-components-button-link-success-active-color: var(--amplify-colors-green-100);
@@ -387,7 +387,7 @@
387
387
  --amplify-components-button-link-error-focus-border-color: transparent;
388
388
  --amplify-components-button-link-error-focus-background-color: var(--amplify-colors-red-10);
389
389
  --amplify-components-button-link-error-focus-color: var(--amplify-colors-red-100);
390
- --amplify-components-button-link-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-red-100);
390
+ --amplify-components-button-link-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
391
391
  --amplify-components-button-link-error-active-border-color: transparent;
392
392
  --amplify-components-button-link-error-active-background-color: var(--amplify-colors-red-20);
393
393
  --amplify-components-button-link-error-active-color: var(--amplify-colors-red-100);
@@ -400,7 +400,7 @@
400
400
  --amplify-components-button-link-overlay-focus-border-color: transparent;
401
401
  --amplify-components-button-link-overlay-focus-background-color: var(--amplify-colors-overlay-5);
402
402
  --amplify-components-button-link-overlay-focus-color: var(--amplify-colors-overlay-90);
403
- --amplify-components-button-link-overlay-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-overlay-90);
403
+ --amplify-components-button-link-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
404
404
  --amplify-components-button-link-overlay-active-border-color: transparent;
405
405
  --amplify-components-button-link-overlay-active-background-color: var(--amplify-colors-overlay-10);
406
406
  --amplify-components-button-link-overlay-active-color: var(--amplify-colors-overlay-90);
@@ -493,12 +493,12 @@
493
493
  --amplify-components-checkbox-button-focus-outline-style: solid;
494
494
  --amplify-components-checkbox-button-focus-outline-width: var(--amplify-outline-widths-medium);
495
495
  --amplify-components-checkbox-button-focus-outline-offset: var(--amplify-outline-offsets-medium);
496
- --amplify-components-checkbox-button-focus-border-color: var(--amplify-colors-transparent);
497
- --amplify-components-checkbox-button-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
496
+ --amplify-components-checkbox-button-focus-border-color: var(--amplify-colors-border-focus);
497
+ --amplify-components-checkbox-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
498
498
  --amplify-components-checkbox-button-disabled-border-color: var(--amplify-colors-border-disabled);
499
499
  --amplify-components-checkbox-button-error-border-color: var(--amplify-colors-border-error);
500
- --amplify-components-checkbox-button-error-focus-border-color: var(--amplify-colors-transparent);
501
- --amplify-components-checkbox-button-error-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error);
500
+ --amplify-components-checkbox-button-error-focus-border-color: var(--amplify-colors-border-error);
501
+ --amplify-components-checkbox-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
502
502
  --amplify-components-checkbox-icon-background-color: var(--amplify-colors-primary-80);
503
503
  --amplify-components-checkbox-icon-border-radius: 20%;
504
504
  --amplify-components-checkbox-icon-opacity: var(--amplify-opacities-0);
@@ -627,19 +627,24 @@
627
627
  --amplify-components-fieldcontrol-quiet-border-inline-end: none;
628
628
  --amplify-components-fieldcontrol-quiet-border-block-start: none;
629
629
  --amplify-components-fieldcontrol-quiet-border-radius: 0;
630
- --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: var(--amplify-colors-border-focus);
631
- --amplify-components-fieldcontrol-quiet-focus-box-shadow: 0px 1px 0px var(--amplify-colors-border-focus);
630
+ --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: transparent;
631
+ --amplify-components-fieldcontrol-quiet-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
632
632
  --amplify-components-fieldcontrol-quiet-error-border-block-end-color: var(--amplify-colors-border-error);
633
- --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: 0px 1px 0px var(--amplify-colors-border-error);
633
+ --amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color: transparent;
634
+ --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
634
635
  --amplify-components-fieldcontrol-focus-border-color: var(--amplify-colors-border-focus);
635
- --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-focus);
636
+ --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
636
637
  --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled);
637
638
  --amplify-components-fieldcontrol-disabled-cursor: not-allowed;
638
639
  --amplify-components-fieldcontrol-disabled-border-color: var(--amplify-colors-transparent);
639
640
  --amplify-components-fieldcontrol-disabled-background-color: var(--amplify-colors-background-disabled);
640
641
  --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-border-error);
641
642
  --amplify-components-fieldcontrol-error-color: var(--amplify-colors-font-error);
642
- --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-error);
643
+ --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error);
644
+ --amplify-components-fieldcontrol-info-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-blue-100);
645
+ --amplify-components-fieldcontrol-warning-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-orange-100);
646
+ --amplify-components-fieldcontrol-success-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-green-100);
647
+ --amplify-components-fieldcontrol-overlay-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-overlay-90);
643
648
  --amplify-components-fieldgroup-gap: var(--amplify-space-zero);
644
649
  --amplify-components-fieldgroup-vertical-align-items: center;
645
650
  --amplify-components-fieldgroup-outer-align-items: center;
@@ -985,7 +990,7 @@
985
990
  --amplify-components-sliderfield-thumb-hover-background-color: var(--amplify-colors-background-primary);
986
991
  --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
987
992
  --amplify-components-sliderfield-thumb-focus-border-color: var(--amplify-colors-border-focus);
988
- --amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
993
+ --amplify-components-sliderfield-thumb-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
989
994
  --amplify-components-sliderfield-small-track-height: 0.25rem;
990
995
  --amplify-components-sliderfield-small-thumb-width: 1rem;
991
996
  --amplify-components-sliderfield-small-thumb-height: 1rem;
@@ -1069,7 +1074,7 @@
1069
1074
  --amplify-components-storagemanager-previewer-body-gap: var(--amplify-space-small);
1070
1075
  --amplify-components-storagemanager-previewer-footer-justify-content: flex-end;
1071
1076
  --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
1072
- --amplify-components-switchfield-focused-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
1077
+ --amplify-components-switchfield-focused-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
1073
1078
  --amplify-components-switchfield-font-size: var(--amplify-font-sizes-medium);
1074
1079
  --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large);
1075
1080
  --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
@@ -2899,6 +2904,7 @@ strong.amplify-text {
2899
2904
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
2900
2905
  }
2901
2906
  .amplify-input--quiet[aria-invalid=true]:focus {
2907
+ border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color);
2902
2908
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
2903
2909
  }
2904
2910
  .amplify-input[disabled] {
@@ -2971,6 +2977,7 @@ strong.amplify-text {
2971
2977
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
2972
2978
  }
2973
2979
  .amplify-textarea--quiet[aria-invalid=true]:focus {
2980
+ border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color);
2974
2981
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
2975
2982
  }
2976
2983
  .amplify-textarea[disabled] {
@@ -4878,6 +4885,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4878
4885
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
4879
4886
  }
4880
4887
  .amplify-select--quiet[aria-invalid=true]:focus {
4888
+ border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color);
4881
4889
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
4882
4890
  }
4883
4891
  .amplify-select[disabled] {
package/dist/types/components/FaceLivenessDetector/displayText.d.ts CHANGED
@@ -20,6 +20,7 @@ export type CameraDisplayText = {
20
20
  cameraNotFoundMessageText?: string;
21
21
  retryCameraPermissionsText?: string;
22
22
  waitingCameraPermissionText?: string;
23
+ a11yVideoLabelText?: string;
23
24
  };
24
25
  export type InstructionDisplayText = {
25
26
  photosensitivyWarningHeadingText?: string;
package/dist/types/version.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const VERSION = "3.0.2";
1
+ export declare const VERSION = "3.0.4";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui-react-liveness",
3
- "version": "3.0.2",
3
+ "version": "3.0.4",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.mjs",
6
6
  "exports": {
@@ -47,8 +47,8 @@
47
47
  "react-dom": "^16.14.0 || ^17.0 || ^18.0"
48
48
  },
49
49
  "dependencies": {
50
- "@aws-amplify/ui": "6.0.2",
51
- "@aws-amplify/ui-react": "6.0.3",
50
+ "@aws-amplify/ui": "6.0.3",
51
+ "@aws-amplify/ui-react": "6.0.4",
52
52
  "@aws-sdk/client-rekognitionstreaming": "3.398.0",
53
53
  "@aws-sdk/util-format-url": "^3.410.0",
54
54
  "@smithy/eventstream-serde-browser": "^2.0.4",
@@ -80,7 +80,7 @@
80
80
  "name": "FaceLivenessDetector",
81
81
  "path": "dist/esm/index.mjs",
82
82
  "import": "{ FaceLivenessDetector }",
83
- "limit": "291 kB"
83
+ "limit": "274 kB"
84
84
  }
85
85
  ]
86
86
  }