idmission-web-sdk 2.3.74 → 2.3.76

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.74';
+  var webSdkVersion = '2.3.76';
 
   function getPlatform() {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -500,7 +500,7 @@
   });
   var OverlayImageContainer = styled.div(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-bottom: 25px;\n  overflow: hidden;\n\n  & > img,\n  & > svg {\n    margin: 0 auto;\n    width: max-content;\n    max-width: 100%;\n    max-height: 100%;\n    aspect-ratio: initial;\n    object-fit: contain;\n    display: block;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-bottom: 25px;\n  overflow: hidden;\n\n  & > img,\n  & > svg {\n    margin: 0 auto;\n    width: max-content;\n    max-width: 100%;\n    max-height: 100%;\n    aspect-ratio: initial;\n    object-fit: contain;\n    display: block;\n  }\n"])));
   var OverlayImageRow = styled.div(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n  display: flex;\n  margin: auto;\n\n  & > div {\n    max-height: calc(100% - 320px);\n\n    & > img {\n      width: 100%;\n      max-height: 100%;\n      height: auto;\n      object-fit: contain;\n    }\n  }\n"], ["\n  display: flex;\n  margin: auto;\n\n  & > div {\n    max-height: calc(100% - 320px);\n\n    & > img {\n      width: 100%;\n      max-height: 100%;\n      height: auto;\n      object-fit: contain;\n    }\n  }\n"])));
-  var GrayOverlayContainer = styled(OverlayContainer)(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n  background: #f7f6fb;\n"], ["\n  background: #f7f6fb;\n"])));
+  var GrayOverlayContainer = styled(OverlayContainer)(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n  background: #f7f6fb;\n"], ["\n  background: #f7f6fb;\n"])));
   var ButtonsColumn = styled.div(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 15px 0;\n  justify-content: center;\n  margin-top: 24px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 15px 0;\n  justify-content: center;\n  margin-top: 24px;\n"])));
   var WideButton = styled(LoaderButton)(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n  width: 100%;\n  border-radius: 30px;\n"], ["\n  width: 100%;\n  border-radius: 30px;\n"])));
   var WideBorderButton = styled(WideButton)(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n  color: ", ";\n  background: ", ";\n  border: 1px solid\n    ", ";\n  box-sizing: border-box;\n"], ["\n  color: ", ";\n  background: ", ";\n  border: 1px solid\n    ", ";\n  box-sizing: border-box;\n"])), function (props) {
@@ -540,7 +540,7 @@
   var LoadingOverlayProgressContainer = styled.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"])));
   var LoadingOverlayCustomLoadingGraphic = styled.img(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  transform-style: preserve-3d;\n"], ["\n  transform-style: preserve-3d;\n"])));
   var LoadingOverlayContinueButtonContainer = styled.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-  var templateObject_1$N, templateObject_2$G, templateObject_3$t, templateObject_4$n, templateObject_5$e, templateObject_6$9, templateObject_7$5, templateObject_8$4, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22;
+  var templateObject_1$N, templateObject_2$G, templateObject_3$t, templateObject_4$n, templateObject_5$f, templateObject_6$9, templateObject_7$5, templateObject_8$4, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22;
 
   function _extends() {
     return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -12814,7 +12814,8 @@
     'Upload the back of the ID if it is not included in the front image.': 'Adjuntar el reverso de la ID si no se incluye en la imagen del frente',
     'Camera tampering detected': 'Se ha detectado un intento de manipulación de la cámara',
     "We're sorry, but it looks like the camera is being tampered with. Please check your device and try again by reloading the page.": 'Lo sentimos, pero parece que la cámara está siendo manipulada. Por favor, verifique su dispositivo y vuelva a intentarlo recargando la página.',
-    'Position your face in the circle and click to capture.': 'Enfoca tu cara en el círculo y da clic en capturar.'
+    'Position your face in the circle and click to capture.': 'Enfoca tu cara en el círculo y da clic en capturar.',
+    'Sign here': 'Firma aquí'
   };
 
   var de = {
@@ -12944,7 +12945,8 @@
     'Upload the back of the ID if it is not included in the front image.': 'Laden Sie die Rückseite des Ausweises hoch, wenn diese nicht im Bild der Vorderseite enthalten ist.',
     'Camera tampering detected': 'Kamera manipuliert',
     "We're sorry, but it looks like the camera is being tampered with. Please check your device and try again by reloading the page.": 'Leider scheint die Kamera manipuliert zu werden. Bitte prüfen Sie Ihr Gerät und laden Sie die Seite neu.',
-    'Position your face in the circle and click to capture.': 'Stellen Sie Ihr Gesicht im Kreis ein und klicken Sie auf Erfassen.'
+    'Position your face in the circle and click to capture.': 'Stellen Sie Ihr Gesicht im Kreis ein und klicken Sie auf Erfassen.',
+    'Sign here': 'Hier unterschreiben'
   };
 
   var fr = {
@@ -13074,7 +13076,8 @@
     'Upload the back of the ID if it is not included in the front image.': "Téléchargez le verso de la pièce d'identité si ce n'est pas inclus dans l'image du recto.",
     'Camera tampering detected': 'Manipulation de la caméra détectée',
     "We're sorry, but it looks like the camera is being tampered with. Please check your device and try again by reloading the page.": 'Nous sommes désolés, mais il semble que la caméra soit manipulée. Veuillez vérifier votre appareil et réessayer en rechargeant la page.',
-    'Position your face in the circle and click to capture.': 'Positionnez votre visage dans le cercle et cliquez pour capturer.'
+    'Position your face in the circle and click to capture.': 'Positionnez votre visage dans le cercle et cliquez pour capturer.',
+    'Sign here': 'Signer ici'
   };
 
   var it = {
@@ -13204,7 +13207,8 @@
     'Upload the back of the ID if it is not included in the front image.': "Carica il retro dell'ID se non è incluso nell'immagine del fronte.",
     'Camera tampering detected': 'Manipolazione della fotocamera rilevata',
     "We're sorry, but it looks like the camera is being tampered with. Please check your device and try again by reloading the page.": 'Siamo spiacenti, ma sembra che la fotocamera stia venendo manipolata. Controlla il tuo dispositivo e riprova ricaricando la pagina.',
-    'Position your face in the circle and click to capture.': 'Posiziona il tuo volto nel cerchio e clicca per acquisire.'
+    'Position your face in the circle and click to capture.': 'Posiziona il tuo volto nel cerchio e clicca per acquisire.',
+    'Sign here': 'Firma qui'
   };
 
   var ja = {
@@ -13334,7 +13338,8 @@
     'Upload the back of the ID if it is not included in the front image.': '表面画像に裏面が含まれていない場合は、裏面をアップロードしてください。',
     'Camera tampering detected': 'カメラの操作が検出されました',
     "We're sorry, but it looks like the camera is being tampered with. Please check your device and try again by reloading the page.": 'カメラの操作が検出されました。デバイスを確認し、ページを再読み込みしてください。',
-    'Position your face in the circle and click to capture.': '顔を円の中に合わせてクリックして撮影してください。'
+    'Position your face in the circle and click to capture.': '顔を円の中に合わせてクリックして撮影してください。',
+    'Sign here': 'ここに署名'
   };
 
   var pt = {
@@ -13464,7 +13469,8 @@
     'Upload the back of the ID if it is not included in the front image.': 'Carregue o verso do ID se não estiver incluído na imagem da frente.',
     'Camera tampering detected': 'Manipulação da câmera detectada',
     "We're sorry, but it looks like the camera is being tampered with. Please check your device and try again by reloading the page.": 'Lamentamos, mas parece que a câmera está sendo manipulada. Verifique seu dispositivo e tente novamente recarregando a página.',
-    'Position your face in the circle and click to capture.': 'Posicione seu rosto no círculo e clique para capturar.'
+    'Position your face in the circle and click to capture.': 'Posicione seu rosto no círculo e clique para capturar.',
+    'Sign here': 'Assinar aqui'
   };
 
   var ru = {
@@ -13594,7 +13600,8 @@
     'Upload the back of the ID if it is not included in the front image.': 'Загрузите заднюю сторону удостоверения, если она не включена в изображение передней стороны.',
     'Camera tampering detected': 'Обнаружена манипуляция с камерой',
     "We're sorry, but it looks like the camera is being tampered with. Please check your device and try again by reloading the page.": 'К сожалению, кажется, что камера подвергается манипуляциям. Пожалуйста, проверьте свое устройство и попробуйте снова, перезагрузив страницу.',
-    'Position your face in the circle and click to capture.': 'Поместите свое лицо в круг и нажмите для съемки.'
+    'Position your face in the circle and click to capture.': 'Поместите свое лицо в круг и нажмите для съемки.',
+    'Sign here': 'Подписать здесь'
   };
 
   var zh = {
@@ -13724,7 +13731,8 @@
     'Upload the back of the ID if it is not included in the front image.': '如果正面照片没有包含身份证背面，请上传背面照片。',
     'Camera tampering detected': '檢測到相機被篡改',
     "We're sorry, but it looks like the camera is being tampered with. Please check your device and try again by reloading the page.": '很抱歉，看起來相機被篡改了。請檢查您的設備並重新載入頁面。',
-    'Position your face in the circle and click to capture.': '將您的臉部置於圓圈中，點擊拍攝。'
+    'Position your face in the circle and click to capture.': '將您的臉部置於圓圈中，點擊拍攝。',
+    'Sign here': '在此簽名'
   };
 
   function renderVerbiage(verbiage) {
@@ -15880,8 +15888,8 @@
   var InnerContainer = styled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding: 16px 24px;\n  margin: auto 0;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding: 16px 24px;\n  margin: auto 0;\n  width: 100%;\n"])));
   var Message = styled.span(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n  display: block;\n  margin: auto 12px auto 0;\n"], ["\n  display: block;\n  margin: auto 12px auto 0;\n"])));
   var ButtonContainer = styled.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n  display: flex;\n  margin-left: auto;\n"], ["\n  display: flex;\n  margin-left: auto;\n"])));
-  var Button$1 = styled(LoaderButton)(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n  white-space: nowrap;\n  margin: auto;\n"], ["\n  white-space: nowrap;\n  margin: auto;\n"])));
-  var templateObject_1$J, templateObject_2$D, templateObject_3$r, templateObject_4$l, templateObject_5$d;
+  var Button$1 = styled(LoaderButton)(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n  white-space: nowrap;\n  margin: auto;\n"], ["\n  white-space: nowrap;\n  margin: auto;\n"])));
+  var templateObject_1$J, templateObject_2$D, templateObject_3$r, templateObject_4$l, templateObject_5$e;
 
   // This is a simplified version of https://github.com/ZeeCoder/use-resize-observer.
   // We have removed all options and made it compliant with React Compiler/React 19.
@@ -17027,7 +17035,7 @@
   var ContinuityCameraCheckboxContainer$1 = styled.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n  position: absolute;\n  bottom: 120px;\n  width: 100%;\n  display: flex;\n"], ["\n  position: absolute;\n  bottom: 120px;\n  width: 100%;\n  display: flex;\n"])));
   var ContinuityCameraCheckboxInner = styled(GuidanceMessage)(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  padding: 12px 18px;\n  margin: 0 auto;\n  font-size: 14px;\n  font-weight: bold;\n  background: white;\n  box-shadow:\n    0 1px 3px 0 rgb(0 0 0 / 0.1),\n    0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  padding: 12px 18px;\n  margin: 0 auto;\n  font-size: 14px;\n  font-weight: bold;\n  background: white;\n  box-shadow:\n    0 1px 3px 0 rgb(0 0 0 / 0.1),\n    0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])));
   var ContinuityCameraCheckbox$1 = styled.input(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
-  var ButtonsRow$1 = styled(LoadingOverlayButtonsRow)(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n  color: ", ";\n  ", "\n"], ["\n  color: ", ";\n  ", "\n"])), function (props) {
+  var ButtonsRow$1 = styled(LoadingOverlayButtonsRow)(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n  color: ", ";\n  ", "\n"], ["\n  color: ", ";\n  ", "\n"])), function (props) {
     var _a, _b, _c, _d;
     return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarTextColor) !== null && _d !== void 0 ? _d : 'white';
   }, function (props) {
@@ -17064,7 +17072,7 @@
     var _a, _b, _c, _d;
     return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.continueBtnDisabledBorder) !== null && _d !== void 0 ? _d : 'none';
   });
-  var templateObject_1$F, templateObject_2$A, templateObject_3$o, templateObject_4$i, templateObject_5$c, templateObject_6$8, templateObject_7$4, templateObject_8$3;
+  var templateObject_1$F, templateObject_2$A, templateObject_3$o, templateObject_4$i, templateObject_5$d, templateObject_6$8, templateObject_7$4, templateObject_8$3;
 
   var ContinuityCameraCheckboxContainer = styled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  margin-top: 15px;\n  margin-bottom: 15px;\n"], ["\n  margin-top: 15px;\n  margin-bottom: 15px;\n"])));
   var ContinuityCameraCheckbox = styled.input(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n  margin-right: 8px;\n"], ["\n  margin-right: 8px;\n"])));
@@ -17314,9 +17322,9 @@
   var ImagesContainer = styled(OverlayImageContainer)(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n  flex-grow: 1;\n  overflow-y: auto;\n  padding-bottom: 0;\n  max-width: 100%;\n"], ["\n  flex-grow: 1;\n  overflow-y: auto;\n  padding-bottom: 0;\n  max-width: 100%;\n"])));
   var ImageRow = styled(OverlayImageRow)(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n  max-width: 100%;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n"], ["\n  max-width: 100%;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n"])));
   var ImageCol$1 = styled.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n  width: 450px;\n  max-width: 100%;\n  max-height: none !important;\n"], ["\n  width: 450px;\n  max-width: 100%;\n  max-height: none !important;\n"])));
-  var StyledImage = styled(CapturedDocumentImg)(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n  width: 100%;\n  border-radius: 12px;\n"], ["\n  width: 100%;\n  border-radius: 12px;\n"])));
+  var StyledImage = styled(CapturedDocumentImg)(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n  width: 100%;\n  border-radius: 12px;\n"], ["\n  width: 100%;\n  border-radius: 12px;\n"])));
   var DebugPre = styled.pre(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n  display: block;\n  text-align: left;\n  width: 100%;\n  max-width: 100%;\n  overflow-x: auto;\n"], ["\n  display: block;\n  text-align: left;\n  width: 100%;\n  max-width: 100%;\n  overflow-x: auto;\n"])));
-  var templateObject_1$C, templateObject_2$x, templateObject_3$n, templateObject_4$h, templateObject_5$b, templateObject_6$7;
+  var templateObject_1$C, templateObject_2$x, templateObject_3$n, templateObject_4$h, templateObject_5$c, templateObject_6$7;
 
   function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
     var _this = this;
@@ -17525,7 +17533,7 @@
   }
   var IdCardBorderContainer = styled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  position: relative;\n  margin: auto;\n\n  & .idmSdkWaves {\n    position: absolute;\n    animation: ", " 2s ease-out infinite;\n    transform-style: preserve-3d;\n\n    &:nth-child(3) {\n      animation-delay: 0.66s;\n    }\n\n    &:nth-child(4) {\n      animation-delay: 1.33s;\n    }\n  }\n"], ["\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  position: relative;\n  margin: auto;\n\n  & .idmSdkWaves {\n    position: absolute;\n    animation: ", " 2s ease-out infinite;\n    transform-style: preserve-3d;\n\n    &:nth-child(3) {\n      animation-delay: 0.66s;\n    }\n\n    &:nth-child(4) {\n      animation-delay: 1.33s;\n    }\n  }\n"])), wavesAnimation);
   var IdCardBorderInner = styled.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n  max-height: 100%;\n  max-width: 100%;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n"], ["\n  max-height: 100%;\n  max-width: 100%;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n"])));
-  var SvgOverlay = styled.svg(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n"])));
+  var SvgOverlay = styled.svg(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n"])));
   var IdCardBorderRect = styled.rect(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n  &.idmSdkProgressBorder {\n    animation: ", " ", "\n      ", ";\n  }\n\n  &.idmSdkProgressPaused {\n    animation-play-state: paused;\n  }\n"], ["\n  &.idmSdkProgressBorder {\n    animation: ", " ", "\n      ", ";\n  }\n\n  &.idmSdkProgressPaused {\n    animation-play-state: paused;\n  }\n"])), progressBorderAnimation, function (props) {
     var _a;
     return (_a = props.$speed) !== null && _a !== void 0 ? _a : '3s';
@@ -17533,7 +17541,7 @@
     var _a;
     return (_a = props.$fillMode) !== null && _a !== void 0 ? _a : 'forwards';
   });
-  var templateObject_1$B, templateObject_2$w, templateObject_3$m, templateObject_4$g, templateObject_5$a, templateObject_6$6;
+  var templateObject_1$B, templateObject_2$w, templateObject_3$m, templateObject_4$g, templateObject_5$b, templateObject_6$6;
 
   var defaultIdCaptureGuideImages = {
     portrait: {
@@ -18032,7 +18040,7 @@
   }, function (props) {
     return props.$minHeight ? "min-height: ".concat(props.$minHeight, "px;") : "";
   });
-  var Spacer = styled(GuideRegion)(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n  display: block;\n  width: auto;\n"], ["\n  display: block;\n  width: auto;\n"])));
+  var Spacer = styled(GuideRegion)(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n  display: block;\n  width: auto;\n"], ["\n  display: block;\n  width: auto;\n"])));
   var GuideCenterRegion = styled.div(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n  ", "\n  ", "\n  transform-style: preserve-3d;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  max-height: 100%;\n  height: 100%;\n"], ["\n  ", "\n  ", "\n  transform-style: preserve-3d;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  max-height: 100%;\n  height: 100%;\n"])), function (props) {
     return props.$minWidth ? "min-width: ".concat(props.$minWidth, "px;") : "";
   }, function (props) {
@@ -18048,7 +18056,7 @@
   var GuideCenterInner = styled.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n  position: relative;\n  top: 0;\n  margin: auto;\n  ", "\n  max-height: 100%;\n  max-width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  position: relative;\n  top: 0;\n  margin: auto;\n  ", "\n  max-height: 100%;\n  max-width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (props) {
     return props.$isLandscape ? 'height: 100%;' : 'width: 90%;';
   });
-  var templateObject_1$y, templateObject_2$u, templateObject_3$l, templateObject_4$f, templateObject_5$9, templateObject_6$5, templateObject_7$3, templateObject_8$2, templateObject_9$1;
+  var templateObject_1$y, templateObject_2$u, templateObject_3$l, templateObject_4$f, templateObject_5$a, templateObject_6$5, templateObject_7$3, templateObject_8$2, templateObject_9$1;
 
   var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
@@ -18912,13 +18920,13 @@
   var FooterRow = styled.div(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: 0 20px 20px;\n  height: auto;\n  color: white;\n"], ["\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: 0 20px 20px;\n  height: auto;\n  color: white;\n"])), function (props) {
     return props.$maskColor;
   });
-  var Instructions = styled.div(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n  max-height: ", ";\n  overflow-y: auto;\n"], ["\n  max-height: ", ";\n  overflow-y: auto;\n"])), function (props) {
+  var Instructions = styled.div(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n  max-height: ", ";\n  overflow-y: auto;\n"], ["\n  max-height: ", ";\n  overflow-y: auto;\n"])), function (props) {
     var _a, _b, _c;
     return (_c = (_b = (_a = props.theme.documentCapture) === null || _a === void 0 ? void 0 : _a.instructions) === null || _b === void 0 ? void 0 : _b.maxHeight) !== null && _c !== void 0 ? _c : '8rem';
   });
   var StyledButtonsRow$8 = styled(ButtonsRow$2)(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n  padding-top: 20px;\n"], ["\n  padding-top: 20px;\n"])));
   var PreviewImage = styled.img(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n"])));
-  var templateObject_1$r, templateObject_2$p, templateObject_3$j, templateObject_4$d, templateObject_5$8, templateObject_6$4, templateObject_7$2;
+  var templateObject_1$r, templateObject_2$p, templateObject_3$j, templateObject_4$d, templateObject_5$9, templateObject_6$4, templateObject_7$2;
 
   var DocumentCaptureWizard = function DocumentCaptureWizard(_a) {
     var onSuccess = _a.onSuccess,
@@ -19193,9 +19201,9 @@
   var Heading$8 = styled.h3(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
   var Description$3 = styled.p(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
   var Instruction = styled.p(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n  font-weight: bold;\n"], ["\n  font-weight: bold;\n"])));
-  var ImageCol = styled.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  flex-grow: 1;\n  flex-basis: 0;\n"], ["\n  display: flex;\n  justify-content: center;\n  flex-grow: 1;\n  flex-basis: 0;\n"])));
+  var ImageCol = styled.div(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  flex-grow: 1;\n  flex-basis: 0;\n"], ["\n  display: flex;\n  justify-content: center;\n  flex-grow: 1;\n  flex-basis: 0;\n"])));
   var StyledButtonsRow$7 = styled(ButtonsRow$2)(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
-  var templateObject_1$q, templateObject_2$o, templateObject_3$i, templateObject_4$c, templateObject_5$7, templateObject_6$3;
+  var templateObject_1$q, templateObject_2$o, templateObject_3$i, templateObject_4$c, templateObject_5$8, templateObject_6$3;
 
   function ScalingCameraFeed() {
     var _a = useIdCaptureStore(),
@@ -19554,7 +19562,7 @@
   var ScreenPanel = styled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  flex-grow: 1;\n  background: #f7f6fb;\n  box-sizing: border-box;\n  padding: 40px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  flex-grow: 1;\n  background: #f7f6fb;\n  box-sizing: border-box;\n  padding: 40px;\n"])));
   var SelectIdCardScreenPanel = styled(ScreenPanel)(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  background: white;\n  padding: 80px 0;\n\n  @media (max-height: 1000px) {\n    padding: 40px 0;\n  }\n"], ["\n  background: white;\n  padding: 80px 0;\n\n  @media (max-height: 1000px) {\n    padding: 40px 0;\n  }\n"])));
   var ScreenPanelHeading = styled.h3(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n  margin: 0 0 30px;\n"], ["\n  margin: 0 0 30px;\n"])));
-  var ScreenActionsBar = styled.div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: end;\n  gap: 20px;\n  padding: 20px;\n  width: 100%;\n  box-sizing: border-box;\n  border-top: 1px solid #ccc;\n\n  @media (max-width: 600px) {\n    justify-content: center;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: end;\n  gap: 20px;\n  padding: 20px;\n  width: 100%;\n  box-sizing: border-box;\n  border-top: 1px solid #ccc;\n\n  @media (max-width: 600px) {\n    justify-content: center;\n  }\n"])));
+  var ScreenActionsBar = styled.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: end;\n  gap: 20px;\n  padding: 20px;\n  width: 100%;\n  box-sizing: border-box;\n  border-top: 1px solid #ccc;\n\n  @media (max-width: 600px) {\n    justify-content: center;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: end;\n  gap: 20px;\n  padding: 20px;\n  width: 100%;\n  box-sizing: border-box;\n  border-top: 1px solid #ccc;\n\n  @media (max-width: 600px) {\n    justify-content: center;\n  }\n"])));
   var DashedSeparator = styled.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n  width: 100%;\n  height: 0;\n  border-top: 2px solid #606060;\n  border-top-style: dashed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  width: 100%;\n  height: 0;\n  border-top: 2px solid #606060;\n  border-top-style: dashed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
   var OrWrapper = styled.div(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n  color: #323232;\n  font-weight: bold;\n  background: white;\n  border-radius: 50%;\n  top: -2px;\n  position: relative;\n  width: 60px;\n  height: 60px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  color: #323232;\n  font-weight: bold;\n  background: white;\n  border-radius: 50%;\n  top: -2px;\n  position: relative;\n  width: 60px;\n  height: 60px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
   var UploadIdBackHelpText = styled.p(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n  color: #323232;\n  font-style: italic;\n  margin: 30px 0 0;\n"], ["\n  color: #323232;\n  font-style: italic;\n  margin: 30px 0 0;\n"])));
@@ -19836,7 +19844,7 @@
     } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
     return bytes.toFixed(dp) + ' ' + units[u];
   }
-  var templateObject_1$p, templateObject_2$n, templateObject_3$h, templateObject_4$b, templateObject_5$6, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
+  var templateObject_1$p, templateObject_2$n, templateObject_3$h, templateObject_4$b, templateObject_5$7, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
 
   var lastDocumentDetectedAtDefaults = {
     idCardFront: null,
@@ -21221,8 +21229,8 @@
   var Heading$7 = styled.h3(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
   var Description$2 = styled.p(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
   var ImageContainer$6 = styled(OverlayImageContainer)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
-  var StyledButtonsRow$6 = styled(ButtonsRow$2)(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
-  var templateObject_1$m, templateObject_2$k, templateObject_3$f, templateObject_4$a, templateObject_5$5;
+  var StyledButtonsRow$6 = styled(ButtonsRow$2)(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
+  var templateObject_1$m, templateObject_2$k, templateObject_3$f, templateObject_4$a, templateObject_5$6;
 
   var initialState$4 = {
     busy: false,
@@ -22189,7 +22197,7 @@
     var _a, _b, _c, _d;
     return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarIndicatorColor) !== null && _d !== void 0 ? _d : 'var(--idm-color-positive-600)';
   });
-  var ContinueButton = styled(LoaderButton)(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  margin: auto;\n  white-space: nowrap;\n  ", "\n  ", "\n    \n  &:focus-visible {\n    ", "\n    box-shadow: none;\n  }\n\n  &.disabled {\n    background: ", ";\n    color: ", ";\n    border: ", ";\n    box-shadow: none;\n  }\n"], ["\n  margin: auto;\n  white-space: nowrap;\n  ", "\n  ", "\n    \n  &:focus-visible {\n    ", "\n    box-shadow: none;\n  }\n\n  &.disabled {\n    background: ", ";\n    color: ", ";\n    border: ", ";\n    box-shadow: none;\n  }\n"])), function (props) {
+  var ContinueButton = styled(LoaderButton)(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n  margin: auto;\n  white-space: nowrap;\n  ", "\n  ", "\n    \n  &:focus-visible {\n    ", "\n    box-shadow: none;\n  }\n\n  &.disabled {\n    background: ", ";\n    color: ", ";\n    border: ", ";\n    box-shadow: none;\n  }\n"], ["\n  margin: auto;\n  white-space: nowrap;\n  ", "\n  ", "\n    \n  &:focus-visible {\n    ", "\n    box-shadow: none;\n  }\n\n  &.disabled {\n    background: ", ";\n    color: ", ";\n    border: ", ";\n    box-shadow: none;\n  }\n"])), function (props) {
     var _a, _b, _c, _d, _e, _f;
     return ((_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarFontSize) ? "font-size: ".concat((_f = (_e = (_d = props.theme) === null || _d === void 0 ? void 0 : _d.selfieCapture) === null || _e === void 0 ? void 0 : _e.loadingOverlay) === null || _f === void 0 ? void 0 : _f.progressBarFontSize, ";") : '';
   }, function (props) {
@@ -22208,7 +22216,7 @@
     var _a, _b, _c, _d;
     return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.continueBtnBorder) !== null && _d !== void 0 ? _d : 'none';
   });
-  var templateObject_1$g, templateObject_2$e, templateObject_3$c, templateObject_4$8, templateObject_5$4;
+  var templateObject_1$g, templateObject_2$e, templateObject_3$c, templateObject_4$8, templateObject_5$5;
 
   var components = {
     "default": SelfieCaptureLoadingOverlayDefault,
@@ -24055,11 +24063,10 @@
       signaturePadEmptyText: '',
       headTrackingUnsatisfiedText: '',
       clearSignatureBtnText: 'Clear',
-      acceptSignatureBtnText: 'Accept'
+      acceptSignatureBtnText: 'Accept',
+      signHereText: 'Sign here'
     });
-    return /*#__PURE__*/React.createElement(SignaturePadContainer, {
-      className: classNames.signaturePadContainer
-    }, /*#__PURE__*/React.createElement(SignatureCanvasContainer, {
+    return /*#__PURE__*/React.createElement(SignatureCanvasContainer, {
       className: clsx(classNames.signatureCanvasContainer, disabled && classNames.signatureCanvasContainerDisabled),
       "$disabled": disabled,
       "$headTrackingUnsatisfied": !headTrackingSatisfied
@@ -24095,7 +24102,7 @@
       }
     }, /*#__PURE__*/React.createElement(SignaturePadContentInner, {
       className: classNames.emptyContentInner
-    }, verbiage.signaturePadEmptyText)))), /*#__PURE__*/React.createElement(SignatureButtonsContainer, {
+    }, verbiage.signaturePadEmptyText))), /*#__PURE__*/React.createElement(SignHereText, null, verbiage.signHereText)), /*#__PURE__*/React.createElement(SignatureButtonsContainer, {
       className: classNames.signatureButtonsRow
     }, /*#__PURE__*/React.createElement(LoaderButton, {
       variant: "secondary",
@@ -24109,21 +24116,21 @@
       disabled: !canSubmit,
       onClick: onAcceptBtnClicked,
       finished: true
-    }, verbiage.acceptSignatureBtnText))));
+    }, verbiage.acceptSignatureBtnText)));
   }
-  var SignaturePadContainer = styled.div(templateObject_1$b || (templateObject_1$b = __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 SignatureCanvasContainer = styled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: calc(100% - 67px);\n  ", "\n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: calc(100% - 67px);\n  ", "\n  ", "\n"])), function (props) {
+  var SignatureCanvasContainer = styled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: calc(100% - 67px);\n  ", "\n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: calc(100% - 67px);\n  ", "\n  ", "\n"])), function (props) {
     return props.$disabled ? 'opacity: 0.5; pointer-events: none;' : '';
   }, function (props) {
     return props.$headTrackingUnsatisfied ? 'pointer-events: none;' : '';
   });
-  var AcceptBtn = styled(LoaderButton)(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  margin-left: auto;\n"], ["\n  margin-left: auto;\n"])));
-  var SignaturePadContentContainer = styled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"])));
-  var SignaturePadContentInner = styled.div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  pointer-events: none;\n  color: ", ";\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  pointer-events: none;\n  color: ", ";\n"])), function (props) {
+  var AcceptBtn = styled(LoaderButton)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  margin-left: auto;\n"], ["\n  margin-left: auto;\n"])));
+  var SignaturePadContentContainer = styled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"])));
+  var SignaturePadContentInner = styled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  pointer-events: none;\n  color: ", ";\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  pointer-events: none;\n  color: ", ";\n"])), function (props) {
     var _a, _b, _c;
     return (_c = (_b = (_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.canvas) === null || _b === void 0 ? void 0 : _b.emptyTextColor) !== null && _c !== void 0 ? _c : 'black';
   });
-  var templateObject_1$b, templateObject_2$a, templateObject_3$9, templateObject_4$5, templateObject_5$3;
+  var SignHereText = styled.div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 18px;\n  left: 0;\n  right: 0;\n  width: 90%;\n  color: black;\n  display: flex;\n  justify-content: center;\n  border-top: 2px solid black;\n  margin: 0 auto;\n  padding-top: 18px;\n  font-size: 18px;\n  font-weight: bold;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  bottom: 18px;\n  left: 0;\n  right: 0;\n  width: 90%;\n  color: black;\n  display: flex;\n  justify-content: center;\n  border-top: 2px solid black;\n  margin: 0 auto;\n  padding-top: 18px;\n  font-size: 18px;\n  font-weight: bold;\n  pointer-events: none;\n"])));
+  var templateObject_1$b, templateObject_2$a, templateObject_3$9, templateObject_4$5, templateObject_5$4;
 
   function VideoSignatureGuides(_a) {
     var onAcceptBtnClicked = _a.onAcceptBtnClicked,
@@ -24140,12 +24147,29 @@
       headTrackingSatisfied = _e === void 0 ? true : _e,
       _f = _a.classNames,
       classNames = _f === void 0 ? {} : _f,
-      verbiage = _a.verbiage;
+      verbiage = _a.verbiage,
+      guideToDisplay = _a.guideToDisplay;
+    var _g = React.useState(guideToDisplay ? 'face' : 'both'),
+      mode = _g[0],
+      setMode = _g[1];
+    React.useEffect(function () {
+      var delayedTransition = setTimeout(function () {
+        if (guideToDisplay) setMode(guideToDisplay);
+      }, 2000);
+      return function () {
+        return clearTimeout(delayedTransition);
+      };
+    }, [guideToDisplay]);
     return /*#__PURE__*/React.createElement(Container$3, {
       className: classNames.container
     }, /*#__PURE__*/React.createElement(Inner$1, {
       className: classNames.inner
     }, /*#__PURE__*/React.createElement(FaceGuideContainer$1, {
+      style: {
+        opacity: mode === 'both' || mode === 'face' ? 1 : 0,
+        transitionDelay: '2s',
+        transition: 'opacity 500ms ease-in-out'
+      },
       className: classNames.faceGuideContainer
     }, /*#__PURE__*/React.createElement(StyledSelfieCaptureAnimatedMask, {
       className: classNames.faceGuide,
@@ -24153,7 +24177,14 @@
       borderWidth: faceGuideBorderWidth,
       borderColor: faceGuideBorderColor,
       verticalAlign: "bottom"
-    })), /*#__PURE__*/React.createElement(VideoSignaturePad, {
+    })), /*#__PURE__*/React.createElement(SignaturePadContainer, {
+      style: {
+        opacity: mode === 'both' || mode === 'signature' ? 1 : 0,
+        transitionDelay: '2s',
+        transition: 'opacity 500ms ease-in-out'
+      },
+      className: classNames.signaturePadContainer
+    }, /*#__PURE__*/React.createElement(VideoSignaturePad, {
       onAcceptBtnClicked: onAcceptBtnClicked,
       onClearBtnClicked: onClearBtnClicked,
       disabled: requestedAction !== 'CAPTURE_SIGNATURE',
@@ -24161,7 +24192,7 @@
       minSignaturePadPoints: minSignaturePadPoints,
       classNames: classNames,
       verbiage: verbiage
-    })));
+    }))));
   }
   var Container$3 = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  display: flex;\n  max-height: 100%;\n  position: absolute;\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  font-family: ", ";\n  box-sizing: border-box;\n  overflow: hidden;\n  padding: 40px;\n"], ["\n  display: flex;\n  max-height: 100%;\n  position: absolute;\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  font-family: ", ";\n  box-sizing: border-box;\n  overflow: hidden;\n  padding: 40px;\n"])), function (props) {
     var _a;
@@ -24170,7 +24201,8 @@
   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 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 templateObject_1$a, templateObject_2$9, templateObject_3$8, templateObject_4$4;
+  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 templateObject_1$a, templateObject_2$9, templateObject_3$8, templateObject_4$4, templateObject_5$3;
 
   var DEFAULT_MIN_SIGNATURE_PAD_POINTS = 10;
   var DEFAULT_HEAD_TRACKING_BOUNDARY_PERCENTAGE = 0.01;
@@ -24612,37 +24644,39 @@
       allowManualSelfieCaptureOnLoadingError = _m === void 0 ? false : _m,
       faceLivenessProps = _a.faceLivenessProps,
       guidesComponent = _a.guidesComponent,
-      _o = _a.assets,
-      assets = _o === void 0 ? {} : _o,
-      _p = _a.classNames,
-      classNames = _p === void 0 ? {} : _p,
-      _q = _a.colors,
-      colors = _q === void 0 ? {} : _q,
-      _r = _a.verbiage,
-      verbiage = _r === void 0 ? {} : _r,
-      _s = _a.debugMode,
-      debugMode = _s === void 0 ? false : _s;
-    var _t = useSubmissionContext(),
-      selfieImage = _t.selfieImage,
-      setSelfieImage = _t.setSelfieImage,
-      setSignatureData = _t.setSignatureData,
-      setSignatureVideoUrl = _t.setSignatureVideoUrl,
-      logSelfieCaptureAttempt = _t.logSelfieCaptureAttempt,
-      uploadDocument = _t.uploadDocument;
+      _o = _a.showFaceGuideThenSignaturePad,
+      showFaceGuideThenSignaturePad = _o === void 0 ? false : _o,
+      _p = _a.assets,
+      assets = _p === void 0 ? {} : _p,
+      _q = _a.classNames,
+      classNames = _q === void 0 ? {} : _q,
+      _r = _a.colors,
+      colors = _r === void 0 ? {} : _r,
+      _s = _a.verbiage,
+      verbiage = _s === void 0 ? {} : _s,
+      _t = _a.debugMode,
+      debugMode = _t === void 0 ? false : _t;
+    var _u = useSubmissionContext(),
+      selfieImage = _u.selfieImage,
+      setSelfieImage = _u.setSelfieImage,
+      setSignatureData = _u.setSignatureData,
+      setSignatureVideoUrl = _u.setSignatureVideoUrl,
+      logSelfieCaptureAttempt = _u.logSelfieCaptureAttempt,
+      uploadDocument = _u.uploadDocument;
     var cameraAccessDenied = useCameraStore(useShallow(function (state) {
       return {
         cameraAccessDenied: state.cameraAccessDenied
       };
     })).cameraAccessDenied;
-    var _u = React.useState(skipLivenessValidation ? 'CAPTURING_SELFIE' : 'CHECKING_LIVENESS'),
-      captureState = _u[0],
-      setCaptureState = _u[1];
+    var _v = React.useState(skipLivenessValidation ? 'CAPTURING_SELFIE' : 'CHECKING_LIVENESS'),
+      captureState = _v[0],
+      setCaptureState = _v[1];
     var operationStartedAt = React.useRef();
     var captureStartedAt = React.useRef();
     var captureEndedAt = React.useRef();
-    var _v = useSelfieGuidanceModelsContext(),
-      start = _v.start,
-      stop = _v.stop;
+    var _w = useSelfieGuidanceModelsContext(),
+      start = _w.start,
+      stop = _w.stop;
     React.useEffect(function () {
       operationStartedAt.current = new Date();
     }, []);
@@ -24692,17 +24726,17 @@
       setCaptureState('SUCCESS');
       onVideoCaptured === null || onVideoCaptured === void 0 ? void 0 : onVideoCaptured(videoData, signatureData, signatureImageData);
     }, [onVideoCaptured, setSignatureData, setSignatureVideoUrl]);
-    var _w = React.useState(true),
-      showLoadingOverlay = _w[0],
-      setShowLoadingOverlay = _w[1];
+    var _x = React.useState(true),
+      showLoadingOverlay = _x[0],
+      setShowLoadingOverlay = _x[1];
     var onSignatureCaptureFacesNotDetected = React.useCallback(function () {
       setShowLoadingOverlay(false);
       setCaptureState(skipLivenessValidation ? 'CAPTURING_SELFIE' : 'CHECKING_LIVENESS');
       useVideoSignatureStore.getState().clearRecordedData();
     }, [skipLivenessValidation]);
-    var _x = React.useState(0),
-      attempt = _x[0],
-      setAttempt = _x[1];
+    var _y = React.useState(0),
+      attempt = _y[0],
+      setAttempt = _y[1];
     var onRetry = React.useCallback(function () {
       onRetryClicked === null || onRetryClicked === void 0 ? void 0 : onRetryClicked();
       setAttempt(function (n) {
@@ -24733,7 +24767,8 @@
         verbiage: verbiage === null || verbiage === void 0 ? void 0 : verbiage.guides,
         restartVideoOnSignaturePadCleared: restartVideoOnSignaturePadCleared,
         captureAudio: captureAudio,
-        component: guidesComponent
+        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]);
     var onExitAfterFailureProp = faceLivenessProps === null || faceLivenessProps === void 0 ? void 0 : faceLivenessProps.onExitAfterFailure;
@@ -24842,7 +24877,9 @@
       _c = _a.captureAudio,
       captureAudio = _c === void 0 ? false : _c,
       component = _a.component,
-      props = __rest(_a, ["status", "restartVideoOnSignaturePadCleared", "captureAudio", "component"]);
+      _d = _a.showFaceGuideThenSignaturePad,
+      showFaceGuideThenSignaturePad = _d === void 0 ? false : _d,
+      props = __rest(_a, ["status", "restartVideoOnSignaturePadCleared", "captureAudio", "component", "showFaceGuideThenSignaturePad"]);
     var Component = component !== null && component !== void 0 ? component : VideoSignatureGuides;
     var onAcceptBtnClicked = React.useCallback(function () {
       var signaturePad = useVideoSignatureStore.getState().signaturePad;
@@ -24874,7 +24911,8 @@
       faceGuideStatus: status,
       onAcceptBtnClicked: onAcceptBtnClicked,
       onClearBtnClicked: onClearBtnClicked,
-      requestedAction: status === 'success' ? 'CAPTURE_SIGNATURE' : 'VERIFY_LIVENESS'
+      requestedAction: status === 'success' ? 'CAPTURE_SIGNATURE' : 'VERIFY_LIVENESS',
+      guideToDisplay: !showFaceGuideThenSignaturePad ? undefined : status === 'success' ? 'signature' : 'face'
     }));
   }
   var VideoSignatureWizardWithProviders = function VideoSignatureWizardWithProviders(props) {
@@ -28655,15 +28693,17 @@
       _p = _a.allowManualSelfieCaptureOnLoadingError,
       allowManualSelfieCaptureOnLoadingError = _p === void 0 ? false : _p,
       guidesComponent = _a.guidesComponent,
-      _q = _a.theme,
-      theme = _q === void 0 ? 'default' : _q,
+      _q = _a.showFaceGuideThenSignaturePad,
+      showFaceGuideThenSignaturePad = _q === void 0 ? false : _q,
+      _r = _a.theme,
+      theme = _r === void 0 ? 'default' : _r,
       classNames = _a.classNames,
       colors = _a.colors,
       verbiage = _a.verbiage,
       geolocationEnabled = _a.geolocationEnabled,
       geolocationRequired = _a.geolocationRequired,
-      _r = _a.debugMode,
-      debugMode = _r === void 0 ? false : _r;
+      _s = _a.debugMode,
+      debugMode = _s === void 0 ? false : _s;
     useLanguage(lang);
     useDebugLogging(debugMode);
     return /*#__PURE__*/React.createElement(AuthProvider, {
@@ -28724,6 +28764,7 @@
           skipLivenessValidation: skipLivenessValidation,
           allowManualSelfieCaptureOnLoadingError: allowManualSelfieCaptureOnLoadingError,
           guidesComponent: guidesComponent,
+          showFaceGuideThenSignaturePad: showFaceGuideThenSignaturePad,
           classNames: classNames,
           colors: colors,
           debugMode: debugMode,
@@ -28731,7 +28772,7 @@
           onModelError: onModelError,
           onUserCancel: onUserCancel
         };
-      }, [onLoadingStarted, onLoadingProgress, onLoadingCompleted, onLoadingFailed, onSelfieCaptured, customOverlayContent, onLoadingOverlayDismissed, loadingOverlayMode, skipSuccessScreen, captureAudio, minSignaturePadPoints, headTrackingDisabled, headTrackingBoundaryPercentage, headTrackingBoundaryType, modelLoadTimeoutMs, faceLivenessProps, allowSignatureAfterLivenessCheckFailure, restartVideoOnSignaturePadCleared, skipLivenessValidation, allowManualSelfieCaptureOnLoadingError, guidesComponent, classNames, colors, debugMode, verbiage, onModelError, onUserCancel])
+      }, [onLoadingStarted, onLoadingProgress, onLoadingCompleted, onLoadingFailed, onSelfieCaptured, customOverlayContent, onLoadingOverlayDismissed, loadingOverlayMode, skipSuccessScreen, captureAudio, minSignaturePadPoints, headTrackingDisabled, headTrackingBoundaryPercentage, headTrackingBoundaryType, modelLoadTimeoutMs, faceLivenessProps, allowSignatureAfterLivenessCheckFailure, restartVideoOnSignaturePadCleared, skipLivenessValidation, allowManualSelfieCaptureOnLoadingError, guidesComponent, showFaceGuideThenSignaturePad, classNames, colors, debugMode, verbiage, onModelError, onUserCancel])
     })))));
   };