idmission-web-sdk 2.3.78 → 2.3.79

package/dist/sdk2.umd.development.js

@@ -211,7 +211,7 @@
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
   };
 
-  var webSdkVersion = '2.3.78';
+  var webSdkVersion = '2.3.79';
 
   function getPlatform() {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -8758,7 +8758,29 @@
       _c = _a.stabilityThreshold,
       stabilityThreshold = _c === void 0 ? 0.7 : _c,
       _d = _a.noseDistanceThreshold,
-      noseDistanceThreshold = _d === void 0 ? 0.025 : _d;
+      noseDistanceThreshold = _d === void 0 ? 0.025 : _d,
+      _e = _a.xBoundary,
+      xBoundary = _e === void 0 ? 0.01 : _e,
+      // this represents the edge that the sides of the face box should not cross -- 1% of video width
+      _f = _a.yBoundary,
+      // this represents the edge that the sides of the face box should not cross -- 1% of video width
+      yBoundary = _f === void 0 ? 0.01 : _f,
+      // this represents the edge that the top or bottom of the face box should not cross -- 1% of video height
+      _g = _a.xCentroidBoundary,
+      // this represents the edge that the top or bottom of the face box should not cross -- 1% of video height
+      xCentroidBoundary = _g === void 0 ? 0.125 : _g,
+      // this represents the edge that the centroid of the face should not cross -- 12.5% of video width
+      _h = _a.yCentroidBoundary,
+      // this represents the edge that the centroid of the face should not cross -- 12.5% of video width
+      yCentroidBoundary = _h === void 0 ? 0.125 : _h,
+      // this represents the edge that the centroid of the face should not cross -- 12.5% of video height
+      _j = _a.foreheadRatio,
+      // this represents the edge that the centroid of the face should not cross -- 12.5% of video height
+      foreheadRatio = _j === void 0 ? 0.275 : _j,
+      // we found that the bounding box ends at the brow and misses the forehead. this ratio represents how much we should extend the box to include the forehead.
+      _k = _a.noseTrackingThreshold,
+      // we found that the bounding box ends at the brow and misses the forehead. this ratio represents how much we should extend the box to include the forehead.
+      noseTrackingThreshold = _k === void 0 ? 0.2 : _k;
     var face = faces[0];
     var faceNotDetected = faces.length === 0;
     var faceNotCentered = false,
@@ -8766,28 +8788,37 @@
       faceTooClose = false,
       faceTooFar = false;
     if (face) {
-      // calculate centroids
-      var vCX = videoWidth / 2;
-      var vCY = videoHeight / 2;
-      var fCX = (face.box.xMin + face.box.xMax) / 2;
-      var fCY = (face.box.yMin + face.box.yMax) / 2;
+      // calculate frame centroids
+      var frameCX = videoWidth / 2;
+      var frameCY = videoHeight / 2;
+      // calculate head bounding box, with forehead extension
+      var foreheadSize = face.box.height * foreheadRatio;
+      var headXMin = face.box.xMin;
+      var headXMax = face.box.xMax;
+      var headYMin = face.box.yMin - foreheadSize;
+      var headYMax = face.box.yMax;
+      // calculate head centroids
+      var headCX = (headXMin + headXMax) / 2;
+      var headCY = (headYMin + headYMax) / 2;
       // calculate thresholds
-      var vTX = videoWidth * 0.125;
-      var vTY = videoHeight * 0.125;
-      var fTW = face.box.width * 0.2;
-      var fTH = face.box.height * 0.2;
-      var nose = face.keypoints[2]; //.find((k) => k.name === 'noseTip')
-      if (nose) {
-        faceLookingAway = Math.abs(fCX - nose.x) > fTW || Math.abs(fCY - nose.y) > fTH;
-        var faceNotCenteredHorizontally = Math.abs(vCX - fCX) > vTX;
-        var faceNotCenteredVertically = Math.abs(vCY + 50 - fCY) > vTY;
-        faceNotCentered = faceNotCenteredHorizontally || requireVerticalFaceCentering && faceNotCenteredVertically;
-      }
+      var vTX = videoWidth * xBoundary;
+      var vTY = videoHeight * yBoundary;
+      var vCTX = videoWidth * xCentroidBoundary;
+      var vCTY = videoHeight * yCentroidBoundary;
+      var faceNotCenteredHorizontally = Math.abs(frameCX - headCX) > vCTX;
+      var faceNotCenteredVertically = Math.abs(frameCY - headCY) > vCTY;
+      var faceViolatesHorizontalBoundary = headXMin < vTX || headXMax > videoWidth - vTX;
+      var faceViolatesVerticalBoundary = headYMin < vTY || headYMax > videoHeight - vTY;
+      faceNotCentered = faceViolatesHorizontalBoundary || faceViolatesVerticalBoundary || faceNotCenteredHorizontally || requireVerticalFaceCentering && faceNotCenteredVertically;
       var isMobile = videoWidth < videoHeight;
       var tooCloseMultiple = 1.5;
       var tooFarMultiple = isMobile ? 6 : 7;
       faceTooClose = face.box.width > videoWidth / tooCloseMultiple;
       faceTooFar = face.box.width < videoWidth / tooFarMultiple;
+      var nose = face.keypoints[2];
+      var fTW = face.box.width * noseTrackingThreshold;
+      var fTH = face.box.height * noseTrackingThreshold;
+      faceLookingAway = !nose || Math.abs(headCX - nose.x) > fTW || Math.abs(headCY - nose.y) > fTH;
     }
     var faceInGuides = !faceNotDetected && !faceNotCentered && !faceLookingAway && !faceTooClose && !faceTooFar;
     if (lastFaceDetectionTime > 0) {
@@ -9556,18 +9587,11 @@
         return listeners["delete"](listener);
       };
     };
-    var destroy = function destroy() {
-      if ((undefined ? undefined.MODE : void 0) !== "production") {
-        console.warn("[DEPRECATED] The `destroy` method will be unsupported in a future version. Instead use unsubscribe function returned by subscribe. Everything will be garbage-collected if store is garbage-collected.");
-      }
-      listeners.clear();
-    };
     var api = {
       setState: setState,
       getState: getState,
       getInitialState: getInitialState,
-      subscribe: subscribe,
-      destroy: destroy
+      subscribe: subscribe
     };
     var initialState = state = createState(setState, getState, api);
     return api;
@@ -9576,213 +9600,25 @@
     return createState ? createStoreImpl(createState) : createStoreImpl;
   };
 
-  var withSelector = {exports: {}};
-
-  var shim = {exports: {}};
-
-  var useSyncExternalStoreShim_development = {};
-
-  /**
-   * @license React
-   * use-sync-external-store-shim.development.js
-   *
-   * Copyright (c) Meta Platforms, Inc. and affiliates.
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-  var hasRequiredUseSyncExternalStoreShim_development;
-  function requireUseSyncExternalStoreShim_development() {
-    if (hasRequiredUseSyncExternalStoreShim_development) return useSyncExternalStoreShim_development;
-    hasRequiredUseSyncExternalStoreShim_development = 1;
-    (function () {
-      function is(x, y) {
-        return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
-      }
-      function useSyncExternalStore$2(subscribe, getSnapshot) {
-        didWarnOld18Alpha || void 0 === React$1.startTransition || (didWarnOld18Alpha = !0, console.error("You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."));
-        var value = getSnapshot();
-        if (!didWarnUncachedGetSnapshot) {
-          var cachedValue = getSnapshot();
-          objectIs(value, cachedValue) || (console.error("The result of getSnapshot should be cached to avoid an infinite loop"), didWarnUncachedGetSnapshot = !0);
-        }
-        cachedValue = useState({
-          inst: {
-            value: value,
-            getSnapshot: getSnapshot
-          }
-        });
-        var inst = cachedValue[0].inst,
-          forceUpdate = cachedValue[1];
-        useLayoutEffect(function () {
-          inst.value = value;
-          inst.getSnapshot = getSnapshot;
-          checkIfSnapshotChanged(inst) && forceUpdate({
-            inst: inst
-          });
-        }, [subscribe, value, getSnapshot]);
-        useEffect(function () {
-          checkIfSnapshotChanged(inst) && forceUpdate({
-            inst: inst
-          });
-          return subscribe(function () {
-            checkIfSnapshotChanged(inst) && forceUpdate({
-              inst: inst
-            });
-          });
-        }, [subscribe]);
-        useDebugValue(value);
-        return value;
-      }
-      function checkIfSnapshotChanged(inst) {
-        var latestGetSnapshot = inst.getSnapshot;
-        inst = inst.value;
-        try {
-          var nextValue = latestGetSnapshot();
-          return !objectIs(inst, nextValue);
-        } catch (error) {
-          return !0;
-        }
-      }
-      function useSyncExternalStore$1(subscribe, getSnapshot) {
-        return getSnapshot();
-      }
-      "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React$1 = React,
-        objectIs = "function" === typeof Object.is ? Object.is : is,
-        useState = React$1.useState,
-        useEffect = React$1.useEffect,
-        useLayoutEffect = React$1.useLayoutEffect,
-        useDebugValue = React$1.useDebugValue,
-        didWarnOld18Alpha = !1,
-        didWarnUncachedGetSnapshot = !1,
-        shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
-      useSyncExternalStoreShim_development.useSyncExternalStore = void 0 !== React$1.useSyncExternalStore ? React$1.useSyncExternalStore : shim;
-      "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
-    })();
-    return useSyncExternalStoreShim_development;
-  }
-
-  var hasRequiredShim;
-  function requireShim() {
-    if (hasRequiredShim) return shim.exports;
-    hasRequiredShim = 1;
-    {
-      shim.exports = requireUseSyncExternalStoreShim_development();
-    }
-    return shim.exports;
-  }
-
-  var withSelector_development = {};
-
-  /**
-   * @license React
-   * use-sync-external-store-shim/with-selector.development.js
-   *
-   * Copyright (c) Meta Platforms, Inc. and affiliates.
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-  var hasRequiredWithSelector_development;
-  function requireWithSelector_development() {
-    if (hasRequiredWithSelector_development) return withSelector_development;
-    hasRequiredWithSelector_development = 1;
-    (function () {
-      function is(x, y) {
-        return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
-      }
-      "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React$1 = React,
-        shim = requireShim(),
-        objectIs = "function" === typeof Object.is ? Object.is : is,
-        useSyncExternalStore = shim.useSyncExternalStore,
-        useRef = React$1.useRef,
-        useEffect = React$1.useEffect,
-        useMemo = React$1.useMemo,
-        useDebugValue = React$1.useDebugValue;
-      withSelector_development.useSyncExternalStoreWithSelector = function (subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
-        var instRef = useRef(null);
-        if (null === instRef.current) {
-          var inst = {
-            hasValue: !1,
-            value: null
-          };
-          instRef.current = inst;
-        } else inst = instRef.current;
-        instRef = useMemo(function () {
-          function memoizedSelector(nextSnapshot) {
-            if (!hasMemo) {
-              hasMemo = !0;
-              memoizedSnapshot = nextSnapshot;
-              nextSnapshot = selector(nextSnapshot);
-              if (void 0 !== isEqual && inst.hasValue) {
-                var currentSelection = inst.value;
-                if (isEqual(currentSelection, nextSnapshot)) return memoizedSelection = currentSelection;
-              }
-              return memoizedSelection = nextSnapshot;
-            }
-            currentSelection = memoizedSelection;
-            if (objectIs(memoizedSnapshot, nextSnapshot)) return currentSelection;
-            var nextSelection = selector(nextSnapshot);
-            if (void 0 !== isEqual && isEqual(currentSelection, nextSelection)) return memoizedSnapshot = nextSnapshot, currentSelection;
-            memoizedSnapshot = nextSnapshot;
-            return memoizedSelection = nextSelection;
-          }
-          var hasMemo = !1,
-            memoizedSnapshot,
-            memoizedSelection,
-            maybeGetServerSnapshot = void 0 === getServerSnapshot ? null : getServerSnapshot;
-          return [function () {
-            return memoizedSelector(getSnapshot());
-          }, null === maybeGetServerSnapshot ? void 0 : function () {
-            return memoizedSelector(maybeGetServerSnapshot());
-          }];
-        }, [getSnapshot, getServerSnapshot, selector, isEqual]);
-        var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);
-        useEffect(function () {
-          inst.hasValue = !0;
-          inst.value = value;
-        }, [value]);
-        useDebugValue(value);
-        return value;
-      };
-      "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
-    })();
-    return withSelector_development;
-  }
-
-  {
-    withSelector.exports = requireWithSelector_development();
-  }
-  var withSelectorExports = withSelector.exports;
-  var useSyncExternalStoreExports = /*@__PURE__*/getDefaultExportFromCjs(withSelectorExports);
-
-  var useDebugValue = React.useDebugValue;
-  var useSyncExternalStoreWithSelector = useSyncExternalStoreExports.useSyncExternalStoreWithSelector;
-  var didWarnAboutEqualityFn = false;
   var identity = function identity(arg) {
     return arg;
   };
-  function useStore(api, selector, equalityFn) {
+  function useStore(api, selector) {
     if (selector === void 0) {
       selector = identity;
     }
-    if ((undefined ? undefined.MODE : void 0) !== "production" && equalityFn && !didWarnAboutEqualityFn) {
-      console.warn("[DEPRECATED] Use `createWithEqualityFn` instead of `create` or use `useStoreWithEqualityFn` instead of `useStore`. They can be imported from 'zustand/traditional'. https://github.com/pmndrs/zustand/discussions/1937");
-      didWarnAboutEqualityFn = true;
-    }
-    var slice = useSyncExternalStoreWithSelector(api.subscribe, api.getState, api.getServerState || api.getInitialState, selector, equalityFn);
-    useDebugValue(slice);
+    var slice = React.useSyncExternalStore(api.subscribe, function () {
+      return selector(api.getState());
+    }, function () {
+      return selector(api.getInitialState());
+    });
+    React.useDebugValue(slice);
     return slice;
   }
   var createImpl = function createImpl(createState) {
-    if ((undefined ? undefined.MODE : void 0) !== "production" && typeof createState !== "function") {
-      console.warn("[DEPRECATED] Passing a vanilla store will be unsupported in a future version. Instead use `import { useStore } from 'zustand'`.");
-    }
-    var api = typeof createState === "function" ? createStore(createState) : createState;
-    var useBoundStore = function useBoundStore(selector, equalityFn) {
-      return useStore(api, selector, equalityFn);
+    var api = createStore(createState);
+    var useBoundStore = function useBoundStore(selector) {
+      return useStore(api, selector);
     };
     Object.assign(useBoundStore, api);
     return useBoundStore;
@@ -14999,11 +14835,8 @@
       var extensionConnector;
       try {
         extensionConnector = (enabled != null ? enabled : (undefined ? undefined.MODE : void 0) !== "production") && window.__REDUX_DEVTOOLS_EXTENSION__;
-      } catch (_e) {}
+      } catch (e) {}
       if (!extensionConnector) {
-        if ((undefined ? undefined.MODE : void 0) !== "production" && enabled) {
-          console.warn("[zustand devtools middleware] Please install/enable Redux devtools extension");
-        }
         return fn(set, get, api);
       }
       var _extractConnectionInf = extractConnectionInformation(store, extensionConnector, options),
@@ -15074,7 +14907,7 @@
                   return;
                 }
                 if (Object.keys(action.state).length !== 1) {
-                  console.error("\n                    [zustand devtools middleware] Unsupported __setState action format. \n                    When using 'store' option in devtools(), the 'state' should have only one key, which is a value of 'store' that was passed in devtools(),\n                    and value of this only key should be a state object. Example: { \"type\": \"__setState\", \"state\": { \"abc123Store\": { \"foo\": \"bar\" } } }\n                    ");
+                  console.error("\n                    [zustand devtools middleware] Unsupported __setState action format.\n                    When using 'store' option in devtools(), the 'state' should have only one key, which is a value of 'store' that was passed in devtools(),\n                    and value of this only key should be a state object. Example: { \"type\": \"__setState\", \"state\": { \"abc123Store\": { \"foo\": \"bar\" } } }\n                    ");
                 }
                 var stateFromDevtools = action.state[store];
                 if (stateFromDevtools === void 0 || stateFromDevtools === null) {
@@ -15162,50 +14995,71 @@
   function _createForOfIteratorHelperLoose(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (t) return (t = t.call(r)).next.bind(t); if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) { t && (r = t); var o = 0; return function () { return o >= r.length ? { done: !0 } : { done: !1, value: r[o++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
   function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
   function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-  function shallow(objA, objB) {
-    if (Object.is(objA, objB)) {
-      return true;
-    }
-    if (typeof objA !== "object" || objA === null || typeof objB !== "object" || objB === null) {
+  var isIterable = function isIterable(obj) {
+    return Symbol.iterator in obj;
+  };
+  var hasIterableEntries = function hasIterableEntries(value) {
+    return (
+      // HACK: avoid checking entries type
+      "entries" in value
+    );
+  };
+  var compareEntries = function compareEntries(valueA, valueB) {
+    var mapA = valueA instanceof Map ? valueA : new Map(valueA.entries());
+    var mapB = valueB instanceof Map ? valueB : new Map(valueB.entries());
+    if (mapA.size !== mapB.size) {
       return false;
     }
-    if (objA instanceof Map && objB instanceof Map) {
-      if (objA.size !== objB.size) return false;
-      for (var _iterator = _createForOfIteratorHelperLoose(objA), _step; !(_step = _iterator()).done;) {
-        var _step$value = _step.value,
-          key = _step$value[0],
-          value = _step$value[1];
-        if (!Object.is(value, objB.get(key))) {
-          return false;
-        }
+    for (var _iterator = _createForOfIteratorHelperLoose(mapA), _step; !(_step = _iterator()).done;) {
+      var _step$value = _step.value,
+        key = _step$value[0],
+        value = _step$value[1];
+      if (!Object.is(value, mapB.get(key))) {
+        return false;
       }
-      return true;
     }
-    if (objA instanceof Set && objB instanceof Set) {
-      if (objA.size !== objB.size) return false;
-      for (var _iterator2 = _createForOfIteratorHelperLoose(objA), _step2; !(_step2 = _iterator2()).done;) {
-        var _value = _step2.value;
-        if (!objB.has(_value)) {
-          return false;
-        }
+    return true;
+  };
+  var compareIterables = function compareIterables(valueA, valueB) {
+    var iteratorA = valueA[Symbol.iterator]();
+    var iteratorB = valueB[Symbol.iterator]();
+    var nextA = iteratorA.next();
+    var nextB = iteratorB.next();
+    while (!nextA.done && !nextB.done) {
+      if (!Object.is(nextA.value, nextB.value)) {
+        return false;
       }
+      nextA = iteratorA.next();
+      nextB = iteratorB.next();
+    }
+    return !!nextA.done && !!nextB.done;
+  };
+  function shallow(valueA, valueB) {
+    if (Object.is(valueA, valueB)) {
       return true;
     }
-    var keysA = Object.keys(objA);
-    if (keysA.length !== Object.keys(objB).length) {
+    if (typeof valueA !== "object" || valueA === null || typeof valueB !== "object" || valueB === null) {
       return false;
     }
-    for (var _i = 0, _keysA = keysA; _i < _keysA.length; _i++) {
-      var keyA = _keysA[_i];
-      if (!Object.prototype.hasOwnProperty.call(objB, keyA) || !Object.is(objA[keyA], objB[keyA])) {
-        return false;
-      }
+    if (!isIterable(valueA) || !isIterable(valueB)) {
+      return compareEntries({
+        entries: function entries() {
+          return Object.entries(valueA);
+        }
+      }, {
+        entries: function entries() {
+          return Object.entries(valueB);
+        }
+      });
     }
-    return true;
+    if (hasIterableEntries(valueA) && hasIterableEntries(valueB)) {
+      return compareEntries(valueA, valueB);
+    }
+    return compareIterables(valueA, valueB);
   }
-  var useRef = React.useRef;
+
   function useShallow(selector) {
-    var prev = useRef();
+    var prev = React.useRef();
     return function (state) {
       var next = selector(state);
       return shallow(prev.current, next) ? prev.current : prev.current = next;
@@ -20009,7 +19863,7 @@
           });
         }
       });
-    }, [onPredictionMade, resetBestFrame]);
+    }, [documentDetectionThrottleMs, onDocumentDetected, onPredictionMade, resetBestFrame]);
     React.useEffect(function () {
       if (state.captureState === 'complete') stop();
     }, [state.captureState, stop]);
@@ -24165,12 +24019,10 @@
     }, /*#__PURE__*/React.createElement(Inner$1, {
       className: classNames.inner
     }, /*#__PURE__*/React.createElement(FaceGuideContainer$1, {
+      className: classNames.faceGuideContainer,
       style: {
-        opacity: mode === 'both' || mode === 'face' ? 1 : 0,
-        transitionDelay: '2s',
-        transition: 'opacity 500ms ease-in-out'
-      },
-      className: classNames.faceGuideContainer
+        opacity: mode === 'both' || mode === 'face' ? 1 : 0
+      }
     }, /*#__PURE__*/React.createElement(StyledSelfieCaptureAnimatedMask, {
       className: classNames.faceGuide,
       status: requestedAction === 'VERIFY_LIVENESS' ? faceGuideStatus : 'success',
@@ -24178,12 +24030,10 @@
       borderColor: faceGuideBorderColor,
       verticalAlign: "bottom"
     })), /*#__PURE__*/React.createElement(SignaturePadContainer, {
+      className: classNames.signaturePadContainer,
       style: {
-        opacity: mode === 'both' || mode === 'signature' ? 1 : 0,
-        transitionDelay: '2s',
-        transition: 'opacity 500ms ease-in-out'
-      },
-      className: classNames.signaturePadContainer
+        opacity: mode === 'both' || mode === 'signature' ? 1 : 0
+      }
     }, /*#__PURE__*/React.createElement(VideoSignaturePad, {
       onAcceptBtnClicked: onAcceptBtnClicked,
       onClearBtnClicked: onClearBtnClicked,
@@ -24199,9 +24049,9 @@
     return (_a = props.theme) === null || _a === void 0 ? void 0 : _a.fontFamily;
   });
   var Inner$1 = styled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  max-height: 1280px;\n  display: flex;\n  margin: auto;\n  align-items: center;\n  flex-direction: column;\n"], ["\n  width: 100%;\n  height: 100%;\n  max-height: 1280px;\n  display: flex;\n  margin: auto;\n  align-items: center;\n  flex-direction: column;\n"])));
-  var FaceGuideContainer$1 = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  position: relative;\n  height: 50%;\n"], ["\n  position: relative;\n  height: 50%;\n"])));
+  var FaceGuideContainer$1 = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  position: relative;\n  height: 50%;\n  transition: opacity 500ms ease-in-out;\n  transition-delay: 2s;\n"], ["\n  position: relative;\n  height: 50%;\n  transition: opacity 500ms ease-in-out;\n  transition-delay: 2s;\n"])));
   var StyledSelfieCaptureAnimatedMask = styled(SelfieCaptureAnimatedMaskWithStatus)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  max-width: 100%;\n  height: 100%;\n"], ["\n  max-width: 100%;\n  height: 100%;\n"])));
-  var SignaturePadContainer = styled.div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n  position: relative;\n  max-width: 100%;\n  height: 50%;\n  aspect-ratio: 2;\n"], ["\n  position: relative;\n  max-width: 100%;\n  height: 50%;\n  aspect-ratio: 2;\n"])));
+  var SignaturePadContainer = styled.div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n  position: relative;\n  max-width: 100%;\n  height: 50%;\n  aspect-ratio: 2;\n  transition: opacity 500ms ease-in-out;\n  transition-delay: 2s;\n"], ["\n  position: relative;\n  max-width: 100%;\n  height: 50%;\n  aspect-ratio: 2;\n  transition: opacity 500ms ease-in-out;\n  transition-delay: 2s;\n"])));
   var templateObject_1$a, templateObject_2$9, templateObject_3$8, templateObject_4$4, templateObject_5$3;
 
   var DEFAULT_MIN_SIGNATURE_PAD_POINTS = 10;
@@ -24770,7 +24620,7 @@
         component: guidesComponent,
         showFaceGuideThenSignaturePad: showFaceGuideThenSignaturePad
       }));
-    }, [captureAudio, classNames === null || classNames === void 0 ? void 0 : classNames.guides, guidesComponent, restartVideoOnSignaturePadCleared, verbiage === null || verbiage === void 0 ? void 0 : verbiage.guides]);
+    }, [captureAudio, classNames === null || classNames === void 0 ? void 0 : classNames.guides, guidesComponent, restartVideoOnSignaturePadCleared, showFaceGuideThenSignaturePad, verbiage === null || verbiage === void 0 ? void 0 : verbiage.guides]);
     var onExitAfterFailureProp = faceLivenessProps === null || faceLivenessProps === void 0 ? void 0 : faceLivenessProps.onExitAfterFailure;
     var onExitAfterFailure = React.useCallback(function (resp, req) {
       onExitAfterFailureProp === null || onExitAfterFailureProp === void 0 ? void 0 : onExitAfterFailureProp(resp, req);