@aws-amplify/ui-react-liveness 3.0.3 → 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 (10) hide show
  1. package/dist/esm/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.mjs +6 -6
  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/utils/getDisplayText.mjs +2 -1
  5. package/dist/esm/version.mjs +1 -1
  6. package/dist/index.js +9 -7
  7. package/dist/styles.css +34 -26
  8. package/dist/types/components/FaceLivenessDetector/displayText.d.ts +1 -0
  9. package/dist/types/version.d.ts +1 -1
  10. 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);
@@ -48,7 +48,7 @@ const MemoizedMatchIndicator = React__default.memo(MatchIndicator);
48
48
  const LivenessCameraModule = (props) => {
49
49
  const { isMobileScreen, isRecordingStopped, instructionDisplayText, streamDisplayText, hintDisplayText, errorDisplayText, cameraDisplayText, components: customComponents, testId, } = props;
50
50
  const { cancelLivenessCheckText, recordingIndicatorText } = streamDisplayText;
51
- const { ErrorView = FaceLivenessErrorModal } = customComponents ?? {};
51
+ const { ErrorView = FaceLivenessErrorModal, PhotosensitiveWarning = DefaultPhotosensitiveWarning, } = customComponents ?? {};
52
52
  const [state, send] = useLivenessActor();
53
53
  const videoStream = useLivenessSelector(selectVideoStream);
54
54
  const videoConstraints = useLivenessSelector(selectVideoConstraints);
@@ -127,8 +127,8 @@ const LivenessCameraModule = (props) => {
127
127
  }, [send, videoRef, isCameraReady, isMobileScreen]);
128
128
  const photoSensitivtyWarning = React__default.useMemo(() => {
129
129
  return (React__default.createElement(View, { style: { visibility: isStartView ? 'visible' : 'hidden' } },
130
- React__default.createElement(DefaultPhotosensitiveWarning, { headingText: instructionDisplayText.photosensitivyWarningHeadingText, bodyText: instructionDisplayText.photosensitivyWarningBodyText, infoText: instructionDisplayText.photosensitivyWarningInfoText })));
131
- }, [instructionDisplayText, isStartView]);
130
+ React__default.createElement(PhotosensitiveWarning, { headingText: instructionDisplayText.photosensitivyWarningHeadingText, bodyText: instructionDisplayText.photosensitivyWarningBodyText, infoText: instructionDisplayText.photosensitivyWarningInfoText })));
131
+ }, [PhotosensitiveWarning, instructionDisplayText, isStartView]);
132
132
  const handleMediaPlay = () => {
133
133
  setIsCameraReady(true);
134
134
  };
@@ -168,7 +168,7 @@ const LivenessCameraModule = (props) => {
168
168
  React__default.createElement(View, { className: LivenessClassNames.VideoAnchor, style: {
169
169
  aspectRatio: `${aspectRatio}`,
170
170
  } },
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 }),
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 }),
172
172
  React__default.createElement(Flex, { className: classNames(LivenessClassNames.OvalCanvas, isRecordingOnMobile && `${LivenessClassNames.OvalCanvas}--mobile`, isRecordingStopped && LivenessClassNames.FadeOut) },
173
173
  React__default.createElement(View, { as: "canvas", ref: canvasRef })),
174
174
  isRecording && (React__default.createElement(DefaultRecordingIcon, { recordingIndicatorText: recordingIndicatorText })),
@@ -177,7 +177,7 @@ const LivenessCameraModule = (props) => {
177
177
  React__default.createElement(Hint, { hintDisplayText: hintDisplayText }),
178
178
  errorState && (React__default.createElement(ErrorView, { onRetry: () => {
179
179
  send({ type: 'CANCEL' });
180
- } }, renderErrorModal({
180
+ }, displayText: errorDisplayText }, renderErrorModal({
181
181
  errorState,
182
182
  overrideErrorDisplayText: errorDisplayText,
183
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/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.3';
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.3';
774
+ const VERSION = '3.0.4';
775
775
 
776
776
  const BASE_USER_AGENT = `ui-react-liveness/${VERSION}`;
777
777
  const getLivenessUserAgent = () => {
@@ -2687,6 +2687,7 @@ const defaultLivenessDisplayText = {
2687
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.',
2688
2688
  retryCameraPermissionsText: 'Retry',
2689
2689
  waitingCameraPermissionText: 'Waiting for you to allow camera permission.',
2690
+ a11yVideoLabelText: 'Webcam for liveness check',
2690
2691
  cancelLivenessCheckText: 'Cancel Liveness check',
2691
2692
  recordingIndicatorText: 'Rec',
2692
2693
  hintMoveFaceFrontOfCameraText: 'Move face in front of camera',
@@ -2836,7 +2837,7 @@ const MemoizedMatchIndicator = React__default["default"].memo(MatchIndicator);
2836
2837
  const LivenessCameraModule = (props) => {
2837
2838
  const { isMobileScreen, isRecordingStopped, instructionDisplayText, streamDisplayText, hintDisplayText, errorDisplayText, cameraDisplayText, components: customComponents, testId, } = props;
2838
2839
  const { cancelLivenessCheckText, recordingIndicatorText } = streamDisplayText;
2839
- const { ErrorView = FaceLivenessErrorModal } = customComponents ?? {};
2840
+ const { ErrorView = FaceLivenessErrorModal, PhotosensitiveWarning = DefaultPhotosensitiveWarning, } = customComponents ?? {};
2840
2841
  const [state, send] = useLivenessActor();
2841
2842
  const videoStream = useLivenessSelector(selectVideoStream);
2842
2843
  const videoConstraints = useLivenessSelector(selectVideoConstraints);
@@ -2915,8 +2916,8 @@ const LivenessCameraModule = (props) => {
2915
2916
  }, [send, videoRef, isCameraReady, isMobileScreen]);
2916
2917
  const photoSensitivtyWarning = React__default["default"].useMemo(() => {
2917
2918
  return (React__default["default"].createElement(uiReact.View, { style: { visibility: isStartView ? 'visible' : 'hidden' } },
2918
- React__default["default"].createElement(DefaultPhotosensitiveWarning, { headingText: instructionDisplayText.photosensitivyWarningHeadingText, bodyText: instructionDisplayText.photosensitivyWarningBodyText, infoText: instructionDisplayText.photosensitivyWarningInfoText })));
2919
- }, [instructionDisplayText, isStartView]);
2919
+ React__default["default"].createElement(PhotosensitiveWarning, { headingText: instructionDisplayText.photosensitivyWarningHeadingText, bodyText: instructionDisplayText.photosensitivyWarningBodyText, infoText: instructionDisplayText.photosensitivyWarningInfoText })));
2920
+ }, [PhotosensitiveWarning, instructionDisplayText, isStartView]);
2920
2921
  const handleMediaPlay = () => {
2921
2922
  setIsCameraReady(true);
2922
2923
  };
@@ -2956,7 +2957,7 @@ const LivenessCameraModule = (props) => {
2956
2957
  React__default["default"].createElement(uiReact.View, { className: LivenessClassNames.VideoAnchor, style: {
2957
2958
  aspectRatio: `${aspectRatio}`,
2958
2959
  } },
2959
- 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 }),
2960
2961
  React__default["default"].createElement(uiReact.Flex, { className: ui.classNames(LivenessClassNames.OvalCanvas, isRecordingOnMobile && `${LivenessClassNames.OvalCanvas}--mobile`, isRecordingStopped && LivenessClassNames.FadeOut) },
2961
2962
  React__default["default"].createElement(uiReact.View, { as: "canvas", ref: canvasRef })),
2962
2963
  isRecording && (React__default["default"].createElement(DefaultRecordingIcon, { recordingIndicatorText: recordingIndicatorText })),
@@ -2965,7 +2966,7 @@ const LivenessCameraModule = (props) => {
2965
2966
  React__default["default"].createElement(Hint, { hintDisplayText: hintDisplayText }),
2966
2967
  errorState && (React__default["default"].createElement(ErrorView, { onRetry: () => {
2967
2968
  send({ type: 'CANCEL' });
2968
- } }, renderErrorModal({
2969
+ }, displayText: errorDisplayText }, renderErrorModal({
2969
2970
  errorState,
2970
2971
  overrideErrorDisplayText: errorDisplayText,
2971
2972
  }))),
@@ -3110,7 +3111,7 @@ function getDisplayText(overrideDisplayText) {
3110
3111
  ...defaultLivenessDisplayText,
3111
3112
  ...overrideDisplayText,
3112
3113
  };
3113
- 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;
3114
3115
  const hintDisplayText = {
3115
3116
  hintMoveFaceFrontOfCameraText,
3116
3117
  hintTooManyFacesText,
@@ -3133,6 +3134,7 @@ function getDisplayText(overrideDisplayText) {
3133
3134
  cameraNotFoundMessageText,
3134
3135
  retryCameraPermissionsText,
3135
3136
  waitingCameraPermissionText,
3137
+ a11yVideoLabelText,
3136
3138
  };
3137
3139
  const instructionDisplayText = {
3138
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.3";
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.3",
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
  }