@aws-amplify/ui-react-liveness 2.0.10 → 3.0.0

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

@@ -1 +1,98 @@
-import{__awaiter as e}from"tslib";class t{constructor(e,t={}){if("undefined"==typeof MediaRecorder)throw Error("MediaRecorder is not supported by this browser");this._stream=e,this._options=t,this._chunks=[],this._recorder=new MediaRecorder(e,{bitsPerSecond:1e6}),this._setupCallbacks()}getState(){return this._recorder.state}start(e){this.clearRecordedData(),this.recordingStartApiTimestamp=Date.now(),this._recorder.start(e)}stop(){return e(this,void 0,void 0,(function*(){return"recording"===this.getState()&&this._recorder.stop(),this._recorderStopped}))}pause(){this._recorder.pause()}clearRecordedData(){this._chunks=[]}dispatch(e){this._recorder.dispatchEvent(e)}getVideoChunkSize(){return this._chunks.length}_setupCallbacks(){this.videoStream=new ReadableStream({start:e=>{this._recorder&&(this._recorder.ondataavailable=t=>{t.data&&t.data.size>0&&(0===this._chunks.length&&(this.firstChunkTimestamp=Date.now()),this._chunks.push(t.data),e.enqueue(t.data))},this._recorder.addEventListener("clientSesssionInfo",(t=>{e.enqueue(t.data.clientInfo)})),this._recorder.addEventListener("stopVideo",(()=>{e.enqueue("stopVideo")})),this._recorder.addEventListener("endStream",(()=>{e.close()})),this._recorder.addEventListener("endStreamWithCode",(t=>{e.enqueue({type:"endStreamWithCode",code:t.data.code})})))}}),this.recorderStarted=new Promise((e=>{this._recorder.onstart=()=>{this.recorderStartTimestamp=Date.now(),e()}})),this._recorderStopped=new Promise((e=>{this._recorder.onstop=()=>{this.recorderEndTimestamp=Date.now(),e()}})),this._recorder.onerror=()=>{"stopped"!==this.getState()&&this.stop()}}}export{t as VideoRecorder};
+/**
+ * Helper wrapper class over the native MediaRecorder.
+ */
+class VideoRecorder {
+    constructor(stream, options = {}) {
+        if (typeof MediaRecorder === 'undefined') {
+            throw Error('MediaRecorder is not supported by this browser');
+        }
+        this._stream = stream;
+        this._options = options;
+        this._chunks = [];
+        this._recorder = new MediaRecorder(stream, { bitsPerSecond: 1000000 });
+        this._setupCallbacks();
+    }
+    getState() {
+        return this._recorder.state;
+    }
+    start(timeSlice) {
+        this.clearRecordedData();
+        this.recordingStartApiTimestamp = Date.now();
+        this._recorder.start(timeSlice);
+    }
+    async stop() {
+        if (this.getState() === 'recording') {
+            this._recorder.stop();
+        }
+        return this._recorderStopped;
+    }
+    pause() {
+        this._recorder.pause();
+    }
+    clearRecordedData() {
+        this._chunks = [];
+    }
+    dispatch(event) {
+        this._recorder.dispatchEvent(event);
+    }
+    getVideoChunkSize() {
+        return this._chunks.length;
+    }
+    _setupCallbacks() {
+        // Creates a Readablestream of video chunks. Waits to receive a clientSessionInfo event before pushing
+        //  a livenessActionDocument to the ReadableStream and finally closing the ReadableStream
+        this.videoStream = new ReadableStream({
+            start: (controller) => {
+                if (!this._recorder) {
+                    return;
+                }
+                this._recorder.ondataavailable = (e) => {
+                    if (e.data && e.data.size > 0) {
+                        if (this._chunks.length === 0) {
+                            this.firstChunkTimestamp = Date.now();
+                        }
+                        this._chunks.push(e.data);
+                        controller.enqueue(e.data);
+                    }
+                };
+                this._recorder.addEventListener('clientSesssionInfo', (e) => {
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
+                    controller.enqueue(e.data.clientInfo);
+                });
+                this._recorder.addEventListener('stopVideo', () => {
+                    controller.enqueue('stopVideo');
+                });
+                this._recorder.addEventListener('endStream', () => {
+                    controller.close();
+                });
+                this._recorder.addEventListener('endStreamWithCode', (e) => {
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
+                    controller.enqueue({
+                        type: 'endStreamWithCode',
+                        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+                        code: e.data.code,
+                    });
+                });
+            },
+        });
+        this.recorderStarted = new Promise((resolve) => {
+            this._recorder.onstart = () => {
+                this.recorderStartTimestamp = Date.now();
+                resolve();
+            };
+        });
+        this._recorderStopped = new Promise((resolve) => {
+            this._recorder.onstop = () => {
+                this.recorderEndTimestamp = Date.now();
+                resolve();
+            };
+        });
+        this._recorder.onerror = () => {
+            if (this.getState() !== 'stopped') {
+                this.stop();
+            }
+        };
+    }
+}
+
+export { VideoRecorder };

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

@@ -1 +1,24 @@
-import e from"react";import{Button as t}from"@aws-amplify/ui-react";import{IconClose as r}from"@aws-amplify/ui-react/internal";import{useLivenessActor as a}from"../hooks/useLivenessActor.mjs";import"@xstate/react";import"../providers/FaceLivenessDetectorProvider.mjs";import"@aws-amplify/ui";import{LivenessClassNames as i}from"../types/classNames.mjs";const o=({ariaLabel:o})=>{const[s,m]=a();return s.done?null:e.createElement(t,{autoFocus:!0,variation:"link",onClick:()=>{m({type:"CANCEL"})},size:"large",className:i.CancelButton,"aria-label":o},e.createElement(r,{"aria-hidden":"true","data-testid":"close-icon"}))};export{o as CancelButton};
+import React__default from 'react';
+import { Button } from '@aws-amplify/ui-react';
+import { IconClose } from '@aws-amplify/ui-react/internal';
+import { useLivenessActor } from '../hooks/useLivenessActor.mjs';
+import '@xstate/react';
+import '../providers/FaceLivenessDetectorProvider.mjs';
+import '@aws-amplify/ui';
+import { LivenessClassNames } from '../types/classNames.mjs';
+
+const CancelButton = ({ ariaLabel }) => {
+    const [state, send] = useLivenessActor();
+    const isFinalState = state.done;
+    const handleClick = () => {
+        send({
+            type: 'CANCEL',
+        });
+    };
+    if (isFinalState)
+        return null;
+    return (React__default.createElement(Button, { autoFocus: true, variation: "link", onClick: handleClick, size: "large", className: LivenessClassNames.CancelButton, "aria-label": ariaLabel },
+        React__default.createElement(IconClose, { "aria-hidden": "true", "data-testid": "close-icon" })));
+};
+
+export { CancelButton };

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

@@ -1 +1,41 @@
-import e from"react";import{View as t,Flex as r,ComponentClassNames as a,Text as s}from"@aws-amplify/ui-react";import"@aws-amplify/ui-react/internal";import"@xstate/react";import"../providers/FaceLivenessDetectorProvider.mjs";import"@aws-amplify/ui";import{LivenessClassNames as o}from"../types/classNames.mjs";import"../service/machine/index.mjs";import"../service/types/liveness.mjs";import"tslib";import"@tensorflow/tfjs-core";import"@tensorflow-models/blazeface";import"@tensorflow/tfjs-backend-wasm";import"@tensorflow/tfjs-backend-cpu";import"@aws-amplify/core";import"@aws-sdk/client-rekognitionstreaming";import"@aws-sdk/util-format-url";import"@smithy/eventstream-serde-browser";import"@smithy/fetch-http-handler";import"@smithy/protocol-http";import"../service/utils/freshnessColorDisplay.mjs";import{StartScreenFigure as i}from"./StartScreenFigure.mjs";import{GoodFitIllustration as m}from"./GoodFitIllustration.mjs";import{TooFarIllustration as n}from"./TooFarIllustration.mjs";import{LivenessIconWithPopover as l}from"./LivenessIconWithPopover.mjs";const c=({headingText:r,bodyText:a})=>e.createElement(t,{className:o.StartScreenHeader},e.createElement(t,{className:o.StartScreenHeaderHeading},r),e.createElement(t,{className:o.StartScreenHeaderBody},a)),p=({headingText:s,bodyText:i,infoText:m})=>e.createElement(r,{className:`${a.Alert} ${o.StartScreenWarning}`},e.createElement(t,{flex:"1"},e.createElement(t,{className:a.AlertHeading},s),e.createElement(t,{className:a.AlertBody},i)),e.createElement(l,null,m)),d=({headingText:t,goodFitCaptionText:a,goodFitAltText:l,tooFarCaptionText:c,tooFarAltText:p,steps:d})=>e.createElement(r,{direction:"column"},e.createElement(s,{className:o.StartScreenInstructionsHeading},t),e.createElement(r,{className:o.Figures},e.createElement(i,{variation:"success",caption:a},e.createElement(m,{title:l})),e.createElement(i,{variation:"error",caption:c},e.createElement(n,{title:p}))),e.createElement(r,{as:"ol",className:o.InstructionList},d.map(((t,a)=>e.createElement(r,{as:"li",key:a+1},e.createElement(s,{as:"span","aria-hidden":"true"},a+1,"."),e.createElement(s,{as:"span"},t))))));export{c as DefaultHeader,d as DefaultInstructions,p as DefaultPhotosensitiveWarning};
+import React__default from 'react';
+import { ComponentClassName } from '@aws-amplify/ui';
+import { Flex, View } from '@aws-amplify/ui-react';
+import { CancelButton } from './CancelButton.mjs';
+import '../service/machine/index.mjs';
+import '../service/types/liveness.mjs';
+import '@tensorflow/tfjs-core';
+import '@tensorflow-models/face-detection';
+import '@tensorflow/tfjs-backend-wasm';
+import '@tensorflow/tfjs-backend-cpu';
+import '@aws-amplify/core/internals/utils';
+import 'aws-amplify/auth';
+import '@aws-sdk/client-rekognitionstreaming';
+import '@aws-sdk/util-format-url';
+import '@smithy/eventstream-serde-browser';
+import '@smithy/fetch-http-handler';
+import '@smithy/protocol-http';
+import '../service/utils/freshnessColorDisplay.mjs';
+import '@xstate/react';
+import '../providers/FaceLivenessDetectorProvider.mjs';
+import { LivenessClassNames } from '../types/classNames.mjs';
+import { RecordingIcon } from './RecordingIcon.mjs';
+import { LivenessIconWithPopover } from './LivenessIconWithPopover.mjs';
+
+const DefaultPhotosensitiveWarning = ({ headingText, bodyText, infoText, }) => {
+    return (React__default.createElement(Flex, { className: `${ComponentClassName.Alert} ${LivenessClassNames.StartScreenWarning}`, style: { zIndex: '3' } },
+        React__default.createElement(View, { flex: "1" },
+            React__default.createElement(View, { className: ComponentClassName.AlertHeading }, headingText),
+            React__default.createElement(View, { className: ComponentClassName.AlertBody }, bodyText)),
+        React__default.createElement(LivenessIconWithPopover, null, infoText)));
+};
+const DefaultRecordingIcon = ({ recordingIndicatorText, }) => {
+    return (React__default.createElement(View, { className: LivenessClassNames.RecordingIconContainer },
+        React__default.createElement(RecordingIcon, null, recordingIndicatorText)));
+};
+const DefaultCancelButton = ({ cancelLivenessCheckText, }) => {
+    return (React__default.createElement(View, { className: LivenessClassNames.CancelContainer },
+        React__default.createElement(CancelButton, { ariaLabel: cancelLivenessCheckText })));
+};
+
+export { DefaultCancelButton, DefaultPhotosensitiveWarning, DefaultRecordingIcon };

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

@@ -1 +1,88 @@
-import e from"react";import{Flex as t,Text as r,Button as s}from"@aws-amplify/ui-react";import{AlertIcon as a}from"@aws-amplify/ui-react/internal";import"../service/machine/index.mjs";import"../service/types/liveness.mjs";import{LivenessErrorState as i}from"../service/types/error.mjs";import"tslib";import"@tensorflow/tfjs-core";import"@tensorflow-models/blazeface";import"@tensorflow/tfjs-backend-wasm";import"@tensorflow/tfjs-backend-cpu";import"@aws-amplify/core";import"@aws-sdk/client-rekognitionstreaming";import"@aws-sdk/util-format-url";import"@smithy/eventstream-serde-browser";import"@smithy/fetch-http-handler";import"@smithy/protocol-http";import"../service/utils/freshnessColorDisplay.mjs";import{Toast as o}from"./Toast.mjs";import{Overlay as m}from"./Overlay.mjs";import{defaultErrorDisplayText as l}from"../displayText.mjs";import{LivenessClassNames as n}from"../types/classNames.mjs";const c=({errorState:s,overrideErrorDisplayText:o})=>{const m=Object.assign(Object.assign({},l),o);return s===i.CAMERA_ACCESS_ERROR||s===i.CAMERA_FRAMERATE_ERROR||s===i.MOBILE_LANDSCAPE_ERROR?null:(s=>{const{error:o,displayText:m}=s,{timeoutHeaderText:l,timeoutMessageText:c,faceDistanceHeaderText:p,faceDistanceMessageText:E,multipleFacesHeaderText:R,multipleFacesMessageText:f,clientHeaderText:d,clientMessageText:T,serverHeaderText:y,serverMessageText:u}=m;let x,j;switch(o){case i.TIMEOUT:x=l,j=c;break;case i.FACE_DISTANCE_ERROR:x=p,j=E;break;case i.MULTIPLE_FACES_ERROR:x=R,j=f;break;case i.RUNTIME_ERROR:x=d,j=T;break;case i.SERVER_ERROR:default:x=y,j=u}return e.createElement(e.Fragment,null,e.createElement(t,{className:n.ErrorModal},e.createElement(a,{ariaHidden:!0,variation:"error"}),e.createElement(r,{className:n.ErrorModalHeading},x)),j)})({error:s,displayText:m})},p=r=>{const{children:a,onRetry:i,displayText:c}=r,p=Object.assign(Object.assign({},l),c),{tryAgainText:E}=p;return e.createElement(m,{className:n.OpaqueOverlay},e.createElement(o,null,a,e.createElement(t,{justifyContent:"center"},e.createElement(s,{variation:"primary",type:"button",onClick:i},E))))};export{p as FaceLivenessErrorModal,c as renderErrorModal};
+import React__default from 'react';
+import { Flex, Text, Button } from '@aws-amplify/ui-react';
+import { AlertIcon } from '@aws-amplify/ui-react/internal';
+import '../service/machine/index.mjs';
+import '../service/types/liveness.mjs';
+import { LivenessErrorState } from '../service/types/error.mjs';
+import '@tensorflow/tfjs-core';
+import '@tensorflow-models/face-detection';
+import '@tensorflow/tfjs-backend-wasm';
+import '@tensorflow/tfjs-backend-cpu';
+import '@aws-amplify/core/internals/utils';
+import 'aws-amplify/auth';
+import '@aws-sdk/client-rekognitionstreaming';
+import '@aws-sdk/util-format-url';
+import '@smithy/eventstream-serde-browser';
+import '@smithy/fetch-http-handler';
+import '@smithy/protocol-http';
+import '../service/utils/freshnessColorDisplay.mjs';
+import { Toast } from './Toast.mjs';
+import { Overlay } from './Overlay.mjs';
+import { defaultErrorDisplayText } from '../displayText.mjs';
+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;
+    let heading;
+    let message;
+    switch (errorState) {
+        case LivenessErrorState.TIMEOUT:
+            heading = timeoutHeaderText;
+            message = timeoutMessageText;
+            break;
+        case LivenessErrorState.FACE_DISTANCE_ERROR:
+            heading = faceDistanceHeaderText;
+            message = faceDistanceMessageText;
+            break;
+        case LivenessErrorState.MULTIPLE_FACES_ERROR:
+            heading = multipleFacesHeaderText;
+            message = multipleFacesMessageText;
+            break;
+        case LivenessErrorState.RUNTIME_ERROR:
+            heading = clientHeaderText;
+            message = clientMessageText;
+            break;
+        case LivenessErrorState.SERVER_ERROR:
+        default:
+            heading = serverHeaderText;
+            message = serverMessageText;
+    }
+    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(Text, { className: LivenessClassNames.ErrorModalHeading }, heading)),
+        message));
+};
+const renderErrorModal = ({ errorState, overrideErrorDisplayText, }) => {
+    const displayText = {
+        ...defaultErrorDisplayText,
+        ...overrideErrorDisplayText,
+    };
+    if (errorState === LivenessErrorState.CAMERA_ACCESS_ERROR ||
+        errorState === LivenessErrorState.CAMERA_FRAMERATE_ERROR ||
+        errorState === LivenessErrorState.MOBILE_LANDSCAPE_ERROR) {
+        return null;
+    }
+    else {
+        return renderToastErrorModal({
+            error: errorState,
+            displayText,
+        });
+    }
+};
+const FaceLivenessErrorModal = (props) => {
+    const { children, onRetry, displayText: overrideErrorDisplayText } = props;
+    const displayText = {
+        ...defaultErrorDisplayText,
+        ...overrideErrorDisplayText,
+    };
+    const { tryAgainText } = displayText;
+    return (React__default.createElement(Overlay, { className: LivenessClassNames.OpaqueOverlay },
+        React__default.createElement(Toast, null,
+            children,
+            React__default.createElement(Flex, { justifyContent: "center" },
+                React__default.createElement(Button, { variation: "primary", type: "button", onClick: onRetry }, tryAgainText)))));
+};
+
+export { FaceLivenessErrorModal, renderErrorModal };

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

@@ -1 +1,114 @@
-import*as e from"react";import{Flex as t,Loader as r,View as o}from"@aws-amplify/ui-react";import"../service/machine/index.mjs";import{FaceMatchState as a,IlluminationState as n}from"../service/types/liveness.mjs";import"tslib";import"@tensorflow/tfjs-core";import"@tensorflow-models/blazeface";import"@tensorflow/tfjs-backend-wasm";import"@tensorflow/tfjs-backend-cpu";import"@aws-amplify/core";import"@aws-sdk/client-rekognitionstreaming";import"@aws-sdk/util-format-url";import"@smithy/eventstream-serde-browser";import"@smithy/fetch-http-handler";import"@smithy/protocol-http";import"../service/utils/freshnessColorDisplay.mjs";import{useLivenessActor as i}from"../hooks/useLivenessActor.mjs";import{createLivenessSelector as s,useLivenessSelector as c}from"../hooks/useLivenessSelector.mjs";import"@aws-amplify/ui";import{Toast as l}from"./Toast.mjs";import{Overlay as m}from"./Overlay.mjs";import{LivenessClassNames as h}from"../types/classNames.mjs";const f=s((e=>e.context.errorState)),p=s((e=>e.context.faceMatchAssociatedParams.faceMatchState)),T=s((e=>e.context.faceMatchAssociatedParams.illuminationState)),u=s((e=>e.context.isFaceFarEnoughBeforeRecording)),O=s((e=>e.context.faceMatchStateBeforeStart)),E=({hintDisplayText:s})=>{const[E]=i(),d=c(f),x=c(p),F=c(T),y=c(O),g=c(u),C=E.matches("checkFaceDetectedBeforeStart"),v=E.matches("checkFaceDistanceBeforeRecording"),A=E.matches("recording"),N=E.matches("notRecording"),k=E.matches("uploading"),S=E.matches("checkSucceeded"),j=E.matches("checkFailed"),w=E.matches({recording:"flashFreshnessColors"}),M={[a.CANT_IDENTIFY]:s.hintCanNotIdentifyText,[a.FACE_IDENTIFIED]:s.hintTooFarText,[a.TOO_MANY]:s.hintTooManyFacesText,[a.TOO_CLOSE]:s.hintTooCloseText,[a.TOO_FAR]:s.hintTooFarText,[a.MATCHED]:s.hintHoldFaceForFreshnessText},D={[n.BRIGHT]:s.hintIlluminationTooBrightText,[n.DARK]:s.hintIlluminationTooDarkText,[n.NORMAL]:s.hintIlluminationNormalText},I=(()=>{if(!(d||j||S)){if(!A){if(C)return y===a.TOO_MANY?e.createElement(l,null,M[y]):e.createElement(l,null,s.hintMoveFaceFrontOfCameraText);if(v&&!1===g)return e.createElement(l,null,s.hintTooCloseText);if(N)return e.createElement(l,null,e.createElement(t,{className:h.HintText},e.createElement(r,null),e.createElement(o,null,s.hintConnectingText)));if(k)return e.createElement(m,{className:h.OpaqueOverlay,anchorOrigin:{horizontal:"center",vertical:"end"}},e.createElement(l,null,e.createElement(t,{className:h.HintText},e.createElement(r,null),e.createElement(o,null,s.hintVerifyingText))));if(F&&F!==n.NORMAL)return e.createElement(l,null,D[F])}return w?e.createElement(l,{size:"large",variation:"primary"},s.hintHoldFaceForFreshnessText):A&&!w?e.createElement(l,{size:"large",variation:x===a.TOO_CLOSE?"error":"primary"},x===a.TOO_CLOSE?M[a.TOO_CLOSE]:M[a.TOO_FAR]):null}})();return I||null};export{E as Hint,f as selectErrorState,p as selectFaceMatchState,O as selectFaceMatchStateBeforeStart,T as selectIlluminationState,u as selectIsFaceFarEnoughBeforeRecording};
+import * as React from 'react';
+import { Flex, Loader, View } from '@aws-amplify/ui-react';
+import '../service/machine/index.mjs';
+import { FaceMatchState, IlluminationState } from '../service/types/liveness.mjs';
+import '@tensorflow/tfjs-core';
+import '@tensorflow-models/face-detection';
+import '@tensorflow/tfjs-backend-wasm';
+import '@tensorflow/tfjs-backend-cpu';
+import '@aws-amplify/core/internals/utils';
+import 'aws-amplify/auth';
+import '@aws-sdk/client-rekognitionstreaming';
+import '@aws-sdk/util-format-url';
+import '@smithy/eventstream-serde-browser';
+import '@smithy/fetch-http-handler';
+import '@smithy/protocol-http';
+import '../service/utils/freshnessColorDisplay.mjs';
+import { useLivenessActor } from '../hooks/useLivenessActor.mjs';
+import { createLivenessSelector, useLivenessSelector } from '../hooks/useLivenessSelector.mjs';
+import '@aws-amplify/ui';
+import { Toast } from './Toast.mjs';
+import { LivenessClassNames } from '../types/classNames.mjs';
+
+const selectErrorState = createLivenessSelector((state) => state.context.errorState);
+const selectFaceMatchState = createLivenessSelector((state) => state.context.faceMatchAssociatedParams.faceMatchState);
+const selectIlluminationState = createLivenessSelector((state) => state.context.faceMatchAssociatedParams.illuminationState);
+const selectIsFaceFarEnoughBeforeRecording = createLivenessSelector((state) => state.context.isFaceFarEnoughBeforeRecording);
+const selectFaceMatchStateBeforeStart = createLivenessSelector((state) => state.context.faceMatchStateBeforeStart);
+const Hint = ({ hintDisplayText }) => {
+    const [state] = useLivenessActor();
+    // NOTE: Do not change order of these selectors as the unit tests depend on this order
+    const errorState = useLivenessSelector(selectErrorState);
+    const faceMatchState = useLivenessSelector(selectFaceMatchState);
+    const illuminationState = useLivenessSelector(selectIlluminationState);
+    const faceMatchStateBeforeStart = useLivenessSelector(selectFaceMatchStateBeforeStart);
+    const isFaceFarEnoughBeforeRecordingState = useLivenessSelector(selectIsFaceFarEnoughBeforeRecording);
+    const isCheckFaceDetectedBeforeStart = state.matches('checkFaceDetectedBeforeStart');
+    const isCheckFaceDistanceBeforeRecording = state.matches('checkFaceDistanceBeforeRecording');
+    const isStartView = state.matches('start') || state.matches('userCancel');
+    const isRecording = state.matches('recording');
+    const isNotRecording = state.matches('notRecording');
+    const isUploading = state.matches('uploading');
+    const isCheckSuccessful = state.matches('checkSucceeded');
+    const isCheckFailed = state.matches('checkFailed');
+    const isFlashingFreshness = state.matches({
+        recording: 'flashFreshnessColors',
+    });
+    const FaceMatchStateStringMap = {
+        [FaceMatchState.CANT_IDENTIFY]: hintDisplayText.hintCanNotIdentifyText,
+        [FaceMatchState.FACE_IDENTIFIED]: hintDisplayText.hintTooFarText,
+        [FaceMatchState.TOO_MANY]: hintDisplayText.hintTooManyFacesText,
+        [FaceMatchState.TOO_CLOSE]: hintDisplayText.hintTooCloseText,
+        [FaceMatchState.TOO_FAR]: hintDisplayText.hintTooFarText,
+        [FaceMatchState.MATCHED]: hintDisplayText.hintHoldFaceForFreshnessText,
+    };
+    const IlluminationStateStringMap = {
+        [IlluminationState.BRIGHT]: hintDisplayText.hintIlluminationTooBrightText,
+        [IlluminationState.DARK]: hintDisplayText.hintIlluminationTooDarkText,
+        [IlluminationState.NORMAL]: hintDisplayText.hintIlluminationNormalText,
+    };
+    const getInstructionContent = () => {
+        if (isStartView) {
+            return (React.createElement(Toast, { size: "large", variation: "primary", isInitial: true }, hintDisplayText.hintCenterFaceText));
+        }
+        if (errorState ?? (isCheckFailed || isCheckSuccessful)) {
+            return;
+        }
+        if (!isRecording) {
+            if (isCheckFaceDetectedBeforeStart) {
+                if (faceMatchStateBeforeStart === FaceMatchState.TOO_MANY) {
+                    return (React.createElement(Toast, { size: "large", variation: "primary" }, FaceMatchStateStringMap[faceMatchStateBeforeStart]));
+                }
+                return (React.createElement(Toast, { size: "large", variation: "primary" }, 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 (React.createElement(Toast, { size: "large", variation: "primary" }, hintDisplayText.hintTooCloseText));
+            }
+            if (isNotRecording) {
+                return (React.createElement(Toast, null,
+                    React.createElement(Flex, { className: LivenessClassNames.HintText },
+                        React.createElement(Loader, null),
+                        React.createElement(View, null, hintDisplayText.hintConnectingText))));
+            }
+            if (isUploading) {
+                return (React.createElement(Toast, null,
+                    React.createElement(Flex, { className: LivenessClassNames.HintText },
+                        React.createElement(Loader, null),
+                        React.createElement(View, null, hintDisplayText.hintVerifyingText))));
+            }
+            if (illuminationState && illuminationState !== IlluminationState.NORMAL) {
+                return (React.createElement(Toast, { size: "large", variation: "primary" }, IlluminationStateStringMap[illuminationState]));
+            }
+        }
+        if (isFlashingFreshness) {
+            return (React.createElement(Toast, { size: "large", variation: "primary" }, 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). For MATCHED state,
+            // we don't want to show any toasts.
+            return (React.createElement(Toast, { size: "large", variation: faceMatchState === FaceMatchState.TOO_CLOSE ? 'error' : 'primary' }, faceMatchState === FaceMatchState.TOO_CLOSE
+                ? FaceMatchStateStringMap[FaceMatchState.TOO_CLOSE]
+                : FaceMatchStateStringMap[FaceMatchState.TOO_FAR]));
+        }
+        return null;
+    };
+    const instructionContent = getInstructionContent();
+    return instructionContent ? instructionContent : null;
+};
+
+export { Hint, selectErrorState, selectFaceMatchState, selectFaceMatchStateBeforeStart, selectIlluminationState, selectIsFaceFarEnoughBeforeRecording };

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

@@ -1 +1,30 @@
-import*as e from"react";import{Flex as t,Text as a,Button as r}from"@aws-amplify/ui-react";import{getLandscapeMediaQuery as s}from"../utils/device.mjs";import{LivenessClassNames as n}from"../types/classNames.mjs";const o=o=>{const{onRetry:c,header:m,portraitMessage:l,landscapeMessage:i,tryAgainText:p}=o,[d,u]=e.useState(!0);return e.useLayoutEffect((()=>{const e=s();return u(e.matches),e.addEventListener("change",(e=>{u(e.matches)})),()=>{e.removeEventListener("change",(e=>u(e.matches)))}}),[]),e.createElement(t,{className:n.LandscapeErrorModal,height:d?"auto":480},e.createElement(a,{className:n.LandscapeErrorModalHeader},m),e.createElement(a,null,d?i:l),d?null:e.createElement(t,{className:n.LandscapeErrorModalButton},e.createElement(r,{variation:"primary",type:"button",onClick:c},p)))};export{o as LandscapeErrorModal};
+import * as React from 'react';
+import { Flex, Text, Button } from '@aws-amplify/ui-react';
+import { getLandscapeMediaQuery } from '../utils/device.mjs';
+import { LivenessClassNames } from '../types/classNames.mjs';
+
+const LandscapeErrorModal = (props) => {
+    const { onRetry, header, portraitMessage, landscapeMessage, tryAgainText } = props;
+    const [isLandscape, setIsLandscape] = React.useState(true);
+    React.useLayoutEffect(() => {
+        // Get orientation: landscape media query
+        const landscapeMediaQuery = getLandscapeMediaQuery();
+        // Set ui state for initial orientation
+        setIsLandscape(landscapeMediaQuery.matches);
+        // Listen for future orientation changes
+        landscapeMediaQuery.addEventListener('change', (e) => {
+            setIsLandscape(e.matches);
+        });
+        // Remove matchMedia event listener
+        return () => {
+            landscapeMediaQuery.removeEventListener('change', (e) => setIsLandscape(e.matches));
+        };
+    }, []);
+    return (React.createElement(Flex, { className: LivenessClassNames.LandscapeErrorModal, height: isLandscape ? 'auto' : 480 },
+        React.createElement(Text, { className: LivenessClassNames.LandscapeErrorModalHeader }, header),
+        React.createElement(Text, null, isLandscape ? landscapeMessage : portraitMessage),
+        !isLandscape ? (React.createElement(Flex, { className: LivenessClassNames.LandscapeErrorModalButton },
+            React.createElement(Button, { variation: "primary", type: "button", onClick: onRetry }, tryAgainText))) : null));
+};
+
+export { LandscapeErrorModal };

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

@@ -1 +1,37 @@
-import*as e from"react";import{Flex as t}from"@aws-amplify/ui-react";import{useThemeBreakpoint as r,AlertIcon as o}from"@aws-amplify/ui-react/internal";import{LivenessClassNames as n}from"../types/classNames.mjs";const a=({children:a})=>{const s=r(),[c,m]=e.useState(!1),i=e.useRef(null),l="base"===s;return e.useEffect((()=>{function e(e){c&&i.current&&!i.current.contains(e.target)&&m(!1)}return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[i,c]),e.createElement(t,{className:n.Popover,onClick:()=>m(!c),ref:i,testId:"popover-icon"},e.createElement(o,{ariaHidden:!0,variation:"info"}),c&&e.createElement(e.Fragment,null,e.createElement(t,{className:n.PopoverAnchor}),e.createElement(t,{className:n.PopoverAnchorSecondary}),e.createElement(t,{className:n.PopoverContainer,left:l?-190:-108,"data-testid":"popover-text"},a)))};a.displayName="LivenessIconWithPopover";export{a as LivenessIconWithPopover};
+import * as React from 'react';
+import { Flex } from '@aws-amplify/ui-react';
+import { useThemeBreakpoint, AlertIcon } from '@aws-amplify/ui-react/internal';
+import { LivenessClassNames } from '../types/classNames.mjs';
+
+/**
+ * Copied from src/primitives/Alert/AlertIcon.tsx because we want to re-use the icon but it is not currently expored by AlertIcon.
+ * We currently don't want to make a change to the AlertIcon primitive itself and may expose the icon in the future but for now so as not to introduce cross component dependencies we have duplicated it.
+ */
+const LivenessIconWithPopover = ({ children }) => {
+    const breakpoint = useThemeBreakpoint();
+    const [shouldShowPopover, setShouldShowPopover] = React.useState(false);
+    const wrapperRef = React.useRef(null);
+    const isMobileScreen = breakpoint === 'base';
+    React.useEffect(() => {
+        function handleClickOutside(event) {
+            if (shouldShowPopover &&
+                wrapperRef.current &&
+                !wrapperRef.current.contains(event.target)) {
+                setShouldShowPopover(false);
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [wrapperRef, shouldShowPopover]);
+    return (React.createElement(Flex, { className: LivenessClassNames.Popover, onClick: () => setShouldShowPopover(!shouldShowPopover), ref: wrapperRef, testId: "popover-icon" },
+        React.createElement(AlertIcon, { ariaHidden: true, variation: "info" }),
+        shouldShowPopover && (React.createElement(React.Fragment, null,
+            React.createElement(Flex, { className: LivenessClassNames.PopoverAnchor }),
+            React.createElement(Flex, { className: LivenessClassNames.PopoverAnchorSecondary }),
+            React.createElement(Flex, { className: LivenessClassNames.PopoverContainer, left: isMobileScreen ? -190 : -108, "data-testid": "popover-text" }, children)))));
+};
+LivenessIconWithPopover.displayName = 'LivenessIconWithPopover';
+
+export { LivenessIconWithPopover };

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

@@ -1 +1,24 @@
-import e from"react";import{LivenessClassNames as t}from"../types/classNames.mjs";const a=({percentage:a,initialPercentage:c=25,testId:s})=>{const[r,n]=e.useState(c);e.useEffect((()=>{n(a<0?0:a>100?100:a)}),[a]);const i={"--percentage":`${r}%`};return e.createElement("div",{className:t.MatchIndicator,"data-testid":s},e.createElement("div",{className:`${t.MatchIndicator}__bar`,style:i}))};export{a as MatchIndicator};
+import React__default from 'react';
+import { LivenessClassNames } from '../types/classNames.mjs';
+
+const MatchIndicator = ({ percentage, initialPercentage = 25, testId, }) => {
+    const [matchPercentage, setMatchPercentage] = React__default.useState(initialPercentage);
+    React__default.useEffect(() => {
+        if (percentage < 0) {
+            setMatchPercentage(0);
+        }
+        else if (percentage > 100) {
+            setMatchPercentage(100);
+        }
+        else {
+            setMatchPercentage(percentage);
+        }
+    }, [percentage]);
+    const percentageStyles = {
+        '--percentage': `${matchPercentage}%`,
+    };
+    return (React__default.createElement("div", { className: LivenessClassNames.MatchIndicator, "data-testid": testId },
+        React__default.createElement("div", { className: `${LivenessClassNames.MatchIndicator}__bar`, style: percentageStyles })));
+};
+
+export { MatchIndicator };

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

@@ -1 +1,9 @@
-import{__rest as r}from"tslib";import*as e from"react";import{Flex as a}from"@aws-amplify/ui-react";import{LivenessClassNames as t}from"../types/classNames.mjs";const i=i=>{var{children:s,anchorOrigin:c={horizontal:"center",vertical:"center"},className:n}=i,o=r(i,["children","anchorOrigin","className"]);return e.createElement(a,Object.assign({className:`${t.Overlay} ${n}`,alignItems:c.horizontal,justifyContent:c.vertical},o),s)};export{i as Overlay};
+import * as React from 'react';
+import { Flex } from '@aws-amplify/ui-react';
+import { LivenessClassNames } from '../types/classNames.mjs';
+
+const Overlay = ({ children, horizontal = 'center', vertical = 'center', className, ...rest }) => {
+    return (React.createElement(Flex, { className: `${LivenessClassNames.Overlay} ${className}`, alignItems: horizontal, justifyContent: vertical, ...rest }, children));
+};
+
+export { Overlay };

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

@@ -1 +1,13 @@
-import e from"react";import{Flex as t,Icon as r,Text as c}from"@aws-amplify/ui-react";import{LivenessClassNames as i}from"../types/classNames.mjs";const a=({children:a})=>e.createElement(t,{className:i.RecordingIcon},e.createElement(t,{"data-testid":"rec-icon",justifyContent:"center"},e.createElement(r,{viewBox:{width:20,height:20},width:"20",height:"20"},e.createElement("circle",{cx:"10",cy:"10",r:"8",fill:"red"}))),e.createElement(c,{as:"span",fontWeight:"bold"},a));export{a as RecordingIcon};
+import React__default from 'react';
+import { Flex, Icon, Text } from '@aws-amplify/ui-react';
+import { LivenessClassNames } from '../types/classNames.mjs';
+
+const RecordingIcon = ({ children }) => {
+    return (React__default.createElement(Flex, { className: LivenessClassNames.RecordingIcon },
+        React__default.createElement(Flex, { "data-testid": "rec-icon", justifyContent: "center" },
+            React__default.createElement(Icon, { viewBox: { width: 20, height: 20 }, width: "20", height: "20" },
+                React__default.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "red" }))),
+        React__default.createElement(Text, { as: "span", fontWeight: "bold" }, children)));
+};
+
+export { RecordingIcon };

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

@@ -1 +1,12 @@
-import{__rest as a}from"tslib";import*as e from"react";import{View as s,Flex as t}from"@aws-amplify/ui-react";import{LivenessClassNames as r}from"../types/classNames.mjs";const m=m=>{var{variation:i="default",size:o="medium",children:l}=m,c=a(m,["variation","size","children"]);return e.createElement(s,Object.assign({className:`${r.Toast} ${r.Toast}--${i} ${r.Toast}--${o}`,maxWidth:{base:"100%",small:"70%"}},c),e.createElement(t,{className:r.ToastContainer},e.createElement(t,{className:r.ToastMessage},l)))};export{m as Toast};
+import * as React from 'react';
+import { useTheme, View, Flex } from '@aws-amplify/ui-react';
+import { LivenessClassNames } from '../types/classNames.mjs';
+
+const Toast = ({ variation = 'default', size = 'medium', children, isInitial = false, ...rest }) => {
+    const { tokens } = useTheme();
+    return (React.createElement(View, { className: `${LivenessClassNames.Toast} ${LivenessClassNames.Toast}--${variation} ${LivenessClassNames.Toast}--${size}`, ...(isInitial && { backgroundColor: tokens.colors.background.primary }), ...rest },
+        React.createElement(Flex, { className: LivenessClassNames.ToastContainer },
+            React.createElement(Flex, { className: LivenessClassNames.ToastMessage, ...(isInitial ? { color: tokens.colors.font.primary } : {}) }, children))));
+};
+
+export { Toast };

package/dist/esm/components/FaceLivenessDetector/types/classNames.mjs

@@ -1 +1,54 @@
-var e;!function(e){e.CameraModule="amplify-liveness-camera-module",e.CancelContainer="amplify-liveness-cancel-container",e.CancelButton="amplify-liveness-cancel-button",e.CountdownContainer="amplify-liveness-countdown-container",e.DescriptionBullet="amplify-liveness-description-bullet",e.DescriptionBulletIndex="amplify-liveness-description-bullet__index",e.DescriptionBulletIndexText="amplify-liveness-description-bullet__index__text",e.DescriptionBulletMessage="amplify-liveness-description-bullet__message",e.ErrorModal="amplify-liveness-error-modal",e.ErrorModalHeading="amplify-liveness-error-modal__heading",e.FadeOut="amplify-liveness-fade-out",e.FreshnessCanvas="amplify-liveness-freshness-canvas",e.InstructionList="amplify-liveness-instruction-list",e.InstructionOverlay="amplify-liveness-instruction-overlay",e.Figure="amplify-liveness-figure",e.FigureCaption="amplify-liveness-figure__caption",e.FigureIcon="amplify-liveness-figure__icon",e.FigureImage="amplify-liveness-figure__image",e.Figures="amplify-liveness-figures",e.Hint="amplify-liveness-hint",e.HintText="amplify-liveness-hint__text",e.LandscapeErrorModal="amplify-liveness-landscape-error-modal",e.LandscapeErrorModalButton="amplify-liveness-landscape-error-modal__button",e.LandscapeErrorModalHeader="amplify-liveness-landscape-error-modal__header",e.Loader="amplify-liveness-loader",e.MatchIndicator="amplify-liveness-match-indicator",e.OvalCanvas="amplify-liveness-oval-canvas",e.OpaqueOverlay="amplify-liveness-overlay-opaque",e.Overlay="amplify-liveness-overlay",e.Popover="amplify-liveness-popover",e.PopoverContainer="amplify-liveness-popover__container",e.PopoverAnchor="amplify-liveness-popover__anchor",e.PopoverAnchorSecondary="amplify-liveness-popover__anchor-secondary",e.RecordingIconContainer="amplify-liveness-recording-icon-container",e.RecordingIcon="amplify-liveness-recording-icon",e.StartScreenHeader="amplify-liveness-start-screen-header",e.StartScreenHeaderBody="amplify-liveness-start-screen-header__body",e.StartScreenHeaderHeading="amplify-liveness-start-screen-header__heading",e.StartScreenWarning="amplify-liveness-start-screen-warning",e.StartScreenInstructions="amplify-liveness-start-screen-instructions",e.StartScreenInstructionsHeading="amplify-liveness-start-screen-instructions__heading",e.Toast="amplify-liveness-toast",e.ToastContainer="amplify-liveness-toast__container",e.ToastMessage="amplify-liveness-toast__message",e.Video="amplify-liveness-video",e.VideoAnchor="amplify-liveness-video-anchor"}(e||(e={}));export{e as LivenessClassNames};
+var LivenessClassNames;
+(function (LivenessClassNames) {
+    LivenessClassNames["CameraModule"] = "amplify-liveness-camera-module";
+    LivenessClassNames["CancelContainer"] = "amplify-liveness-cancel-container";
+    LivenessClassNames["CancelButton"] = "amplify-liveness-cancel-button";
+    LivenessClassNames["CountdownContainer"] = "amplify-liveness-countdown-container";
+    LivenessClassNames["DescriptionBullet"] = "amplify-liveness-description-bullet";
+    LivenessClassNames["DescriptionBulletIndex"] = "amplify-liveness-description-bullet__index";
+    LivenessClassNames["DescriptionBulletIndexText"] = "amplify-liveness-description-bullet__index__text";
+    LivenessClassNames["DescriptionBulletMessage"] = "amplify-liveness-description-bullet__message";
+    LivenessClassNames["ErrorModal"] = "amplify-liveness-error-modal";
+    LivenessClassNames["ErrorModalHeading"] = "amplify-liveness-error-modal__heading";
+    LivenessClassNames["FadeOut"] = "amplify-liveness-fade-out";
+    LivenessClassNames["FreshnessCanvas"] = "amplify-liveness-freshness-canvas";
+    LivenessClassNames["InstructionList"] = "amplify-liveness-instruction-list";
+    LivenessClassNames["InstructionOverlay"] = "amplify-liveness-instruction-overlay";
+    LivenessClassNames["Figure"] = "amplify-liveness-figure";
+    LivenessClassNames["FigureCaption"] = "amplify-liveness-figure__caption";
+    LivenessClassNames["FigureIcon"] = "amplify-liveness-figure__icon";
+    LivenessClassNames["FigureImage"] = "amplify-liveness-figure__image";
+    LivenessClassNames["Figures"] = "amplify-liveness-figures";
+    LivenessClassNames["Hint"] = "amplify-liveness-hint";
+    LivenessClassNames["HintText"] = "amplify-liveness-hint__text";
+    LivenessClassNames["LandscapeErrorModal"] = "amplify-liveness-landscape-error-modal";
+    LivenessClassNames["LandscapeErrorModalButton"] = "amplify-liveness-landscape-error-modal__button";
+    LivenessClassNames["LandscapeErrorModalHeader"] = "amplify-liveness-landscape-error-modal__header";
+    LivenessClassNames["Loader"] = "amplify-liveness-loader";
+    LivenessClassNames["MatchIndicator"] = "amplify-liveness-match-indicator";
+    LivenessClassNames["OvalCanvas"] = "amplify-liveness-oval-canvas";
+    LivenessClassNames["OpaqueOverlay"] = "amplify-liveness-overlay-opaque";
+    LivenessClassNames["Overlay"] = "amplify-liveness-overlay";
+    LivenessClassNames["Popover"] = "amplify-liveness-popover";
+    LivenessClassNames["PopoverContainer"] = "amplify-liveness-popover__container";
+    LivenessClassNames["PopoverAnchor"] = "amplify-liveness-popover__anchor";
+    LivenessClassNames["PopoverAnchorSecondary"] = "amplify-liveness-popover__anchor-secondary";
+    LivenessClassNames["RecordingIconContainer"] = "amplify-liveness-recording-icon-container";
+    LivenessClassNames["RecordingIcon"] = "amplify-liveness-recording-icon";
+    LivenessClassNames["StartScreenCameraSelect"] = "amplify-liveness-start-screen-camera-select";
+    LivenessClassNames["StartScreenCameraSelectContainer"] = "amplify-liveness-start-screen-camera-select__container";
+    LivenessClassNames["StartScreenCameraWaiting"] = "amplify-liveness-start-screen-camera-waiting";
+    LivenessClassNames["StartScreenHeader"] = "amplify-liveness-start-screen-header";
+    LivenessClassNames["StartScreenHeaderBody"] = "amplify-liveness-start-screen-header__body";
+    LivenessClassNames["StartScreenHeaderHeading"] = "amplify-liveness-start-screen-header__heading";
+    LivenessClassNames["StartScreenWarning"] = "amplify-liveness-start-screen-warning";
+    LivenessClassNames["StartScreenInstructions"] = "amplify-liveness-start-screen-instructions";
+    LivenessClassNames["StartScreenInstructionsHeading"] = "amplify-liveness-start-screen-instructions__heading";
+    LivenessClassNames["Toast"] = "amplify-liveness-toast";
+    LivenessClassNames["ToastContainer"] = "amplify-liveness-toast__container";
+    LivenessClassNames["ToastMessage"] = "amplify-liveness-toast__message";
+    LivenessClassNames["Video"] = "amplify-liveness-video";
+    LivenessClassNames["VideoAnchor"] = "amplify-liveness-video-anchor";
+})(LivenessClassNames || (LivenessClassNames = {}));
+
+export { LivenessClassNames };

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

@@ -1 +1,24 @@
-function n(){return/Android|iPhone|iPad/i.test(navigator.userAgent)||/Macintosh/i.test(navigator.userAgent)&&!!navigator.maxTouchPoints&&navigator.maxTouchPoints>1}function t(){return window.matchMedia("(orientation: landscape)")}export{t as getLandscapeMediaQuery,n as isMobileScreen};
+function isNewerIpad() {
+    // iPads on iOS13+ return as if a desktop Mac
+    // so check for maxTouchPoints also.
+    return (/Macintosh/i.test(navigator.userAgent) &&
+        !!navigator.maxTouchPoints &&
+        navigator.maxTouchPoints > 1);
+}
+function isMobileScreen() {
+    const isMobileDevice = 
+    // Test Android/iPhone/iPad
+    /Android|iPhone|iPad/i.test(navigator.userAgent) || isNewerIpad();
+    return isMobileDevice;
+}
+/**
+ * Use window.matchMedia to direct landscape orientation
+ * screen.orientation is not supported in Safari so we will use
+ * media query detection to listen for changes instead.
+ * @returns MediaQueryList object
+ */
+function getLandscapeMediaQuery() {
+    return window.matchMedia('(orientation: landscape)');
+}
+
+export { getLandscapeMediaQuery, isMobileScreen };