idmission-web-sdk 2.3.74 → 2.3.76

package/dist/sdk2.esm.js

@@ -205,7 +205,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   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
@@ -494,7 +494,7 @@ var OverlayInner$2 = styled.div(templateObject_2$G || (templateObject_2$G = __ma
 });
 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) {
@@ -534,7 +534,7 @@ var LoadingOverlayLoadingListItem = styled.li(templateObject_19 || (templateObje
 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;
 
 var GeolocationAccessDeniedOverlay = function GeolocationAccessDeniedOverlay(_a) {
   var accessBlockedImageUrl = _a.accessBlockedImageUrl;
@@ -3860,7 +3860,8 @@ var es = {
   '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 = {
@@ -3990,7 +3991,8 @@ var de = {
   '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 = {
@@ -4120,7 +4122,8 @@ var fr = {
   '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 = {
@@ -4250,7 +4253,8 @@ var it = {
   '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 = {
@@ -4380,7 +4384,8 @@ var ja = {
   '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 = {
@@ -4510,7 +4515,8 @@ var pt = {
   '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 = {
@@ -4640,7 +4646,8 @@ var ru = {
   '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 = {
@@ -4770,7 +4777,8 @@ var zh = {
   '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) {
@@ -6581,8 +6589,8 @@ var Container$7 = styled.div(templateObject_1$J || (templateObject_1$J = __makeT
 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.
@@ -7713,7 +7721,7 @@ var OverlayInner$1 = styled(LoadingOverlayInner)(templateObject_1$F || (template
 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) {
@@ -7750,7 +7758,7 @@ var ContinueButton$1 = styled(LoaderButton)(templateObject_8$3 || (templateObjec
   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"])));
@@ -8000,9 +8008,9 @@ var Heading$a = styled.h1(templateObject_1$C || (templateObject_1$C = __makeTemp
 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;
@@ -8211,7 +8219,7 @@ function IdCardBorderSvg(_a) {
 }
 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';
@@ -8219,7 +8227,7 @@ var IdCardBorderRect = styled.rect(templateObject_6$6 || (templateObject_6$6 = _
   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: {
@@ -8718,7 +8726,7 @@ var GuideRegion = styled.div(templateObject_4$f || (templateObject_4$f = __makeT
 }, 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) {
@@ -8734,7 +8742,7 @@ var GuideText = styled.span(templateObject_8$2 || (templateObject_8$2 = __makeTe
 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;
@@ -9598,13 +9606,13 @@ var Heading$9 = styled.h1(templateObject_3$j || (templateObject_3$j = __makeTemp
 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,
@@ -9879,9 +9887,9 @@ var StyledOverlayInner$2 = styled(OverlayInner$2)(templateObject_1$q || (templat
 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(),
@@ -10240,7 +10248,7 @@ var ScreenContainer = styled.div(templateObject_1$p || (templateObject_1$p = __m
 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"])));
@@ -10522,7 +10530,7 @@ function humanFileSize(bytes, si, dp) {
   } 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,
@@ -11907,8 +11915,8 @@ var StyledOverlayInner$1 = styled(OverlayInner$2)(templateObject_1$m || (templat
 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,
@@ -12875,7 +12883,7 @@ var ProgressIndicator = styled(LoadingOverlayProgressIndicator)(templateObject_4
   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) {
@@ -12894,7 +12902,7 @@ var ContinueButton = styled(LoaderButton)(templateObject_5$4 || (templateObject_
   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,
@@ -13973,11 +13981,10 @@ function VideoSignaturePad(_a) {
     signaturePadEmptyText: '',
     headTrackingUnsatisfiedText: '',
     clearSignatureBtnText: 'Clear',
-    acceptSignatureBtnText: 'Accept'
+    acceptSignatureBtnText: 'Accept',
+    signHereText: 'Sign here'
   });
-  return /*#__PURE__*/React__default.createElement(SignaturePadContainer, {
-    className: classNames.signaturePadContainer
-  }, /*#__PURE__*/React__default.createElement(SignatureCanvasContainer, {
+  return /*#__PURE__*/React__default.createElement(SignatureCanvasContainer, {
     className: cn(classNames.signatureCanvasContainer, disabled && classNames.signatureCanvasContainerDisabled),
     "$disabled": disabled,
     "$headTrackingUnsatisfied": !headTrackingSatisfied
@@ -14013,7 +14020,7 @@ function VideoSignaturePad(_a) {
     }
   }, /*#__PURE__*/React__default.createElement(SignaturePadContentInner, {
     className: classNames.emptyContentInner
-  }, verbiage.signaturePadEmptyText)))), /*#__PURE__*/React__default.createElement(SignatureButtonsContainer, {
+  }, verbiage.signaturePadEmptyText))), /*#__PURE__*/React__default.createElement(SignHereText, null, verbiage.signHereText)), /*#__PURE__*/React__default.createElement(SignatureButtonsContainer, {
     className: classNames.signatureButtonsRow
   }, /*#__PURE__*/React__default.createElement(LoaderButton, {
     variant: "secondary",
@@ -14027,21 +14034,21 @@ function VideoSignaturePad(_a) {
     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,
@@ -14058,12 +14065,29 @@ function VideoSignatureGuides(_a) {
     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 = useState(guideToDisplay ? 'face' : 'both'),
+    mode = _g[0],
+    setMode = _g[1];
+  useEffect(function () {
+    var delayedTransition = setTimeout(function () {
+      if (guideToDisplay) setMode(guideToDisplay);
+    }, 2000);
+    return function () {
+      return clearTimeout(delayedTransition);
+    };
+  }, [guideToDisplay]);
   return /*#__PURE__*/React__default.createElement(Container$3, {
     className: classNames.container
   }, /*#__PURE__*/React__default.createElement(Inner$1, {
     className: classNames.inner
   }, /*#__PURE__*/React__default.createElement(FaceGuideContainer$1, {
+    style: {
+      opacity: mode === 'both' || mode === 'face' ? 1 : 0,
+      transitionDelay: '2s',
+      transition: 'opacity 500ms ease-in-out'
+    },
     className: classNames.faceGuideContainer
   }, /*#__PURE__*/React__default.createElement(StyledSelfieCaptureAnimatedMask, {
     className: classNames.faceGuide,
@@ -14071,7 +14095,14 @@ function VideoSignatureGuides(_a) {
     borderWidth: faceGuideBorderWidth,
     borderColor: faceGuideBorderColor,
     verticalAlign: "bottom"
-  })), /*#__PURE__*/React__default.createElement(VideoSignaturePad, {
+  })), /*#__PURE__*/React__default.createElement(SignaturePadContainer, {
+    style: {
+      opacity: mode === 'both' || mode === 'signature' ? 1 : 0,
+      transitionDelay: '2s',
+      transition: 'opacity 500ms ease-in-out'
+    },
+    className: classNames.signaturePadContainer
+  }, /*#__PURE__*/React__default.createElement(VideoSignaturePad, {
     onAcceptBtnClicked: onAcceptBtnClicked,
     onClearBtnClicked: onClearBtnClicked,
     disabled: requestedAction !== 'CAPTURE_SIGNATURE',
@@ -14079,7 +14110,7 @@ function VideoSignatureGuides(_a) {
     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;
@@ -14088,7 +14119,8 @@ var Container$3 = styled.div(templateObject_1$a || (templateObject_1$a = __makeT
 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;
@@ -14530,37 +14562,39 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
     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 = useState(skipLivenessValidation ? 'CAPTURING_SELFIE' : 'CHECKING_LIVENESS'),
-    captureState = _u[0],
-    setCaptureState = _u[1];
+  var _v = useState(skipLivenessValidation ? 'CAPTURING_SELFIE' : 'CHECKING_LIVENESS'),
+    captureState = _v[0],
+    setCaptureState = _v[1];
   var operationStartedAt = useRef();
   var captureStartedAt = useRef();
   var captureEndedAt = useRef();
-  var _v = useSelfieGuidanceModelsContext(),
-    start = _v.start,
-    stop = _v.stop;
+  var _w = useSelfieGuidanceModelsContext(),
+    start = _w.start,
+    stop = _w.stop;
   useEffect(function () {
     operationStartedAt.current = new Date();
   }, []);
@@ -14610,17 +14644,17 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
     setCaptureState('SUCCESS');
     onVideoCaptured === null || onVideoCaptured === void 0 ? void 0 : onVideoCaptured(videoData, signatureData, signatureImageData);
   }, [onVideoCaptured, setSignatureData, setSignatureVideoUrl]);
-  var _w = useState(true),
-    showLoadingOverlay = _w[0],
-    setShowLoadingOverlay = _w[1];
+  var _x = useState(true),
+    showLoadingOverlay = _x[0],
+    setShowLoadingOverlay = _x[1];
   var onSignatureCaptureFacesNotDetected = useCallback(function () {
     setShowLoadingOverlay(false);
     setCaptureState(skipLivenessValidation ? 'CAPTURING_SELFIE' : 'CHECKING_LIVENESS');
     useVideoSignatureStore.getState().clearRecordedData();
   }, [skipLivenessValidation]);
-  var _x = useState(0),
-    attempt = _x[0],
-    setAttempt = _x[1];
+  var _y = useState(0),
+    attempt = _y[0],
+    setAttempt = _y[1];
   var onRetry = useCallback(function () {
     onRetryClicked === null || onRetryClicked === void 0 ? void 0 : onRetryClicked();
     setAttempt(function (n) {
@@ -14651,7 +14685,8 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
       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;
@@ -14760,7 +14795,9 @@ function VideoSignatureWizardGuides(_a) {
     _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 = useCallback(function () {
     var signaturePad = useVideoSignatureStore.getState().signaturePad;
@@ -14792,7 +14829,8 @@ function VideoSignatureWizardGuides(_a) {
     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) {
@@ -18573,15 +18611,17 @@ var SignatureKYC = function SignatureKYC(_a) {
     _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__default.createElement(AuthProvider, {
@@ -18642,6 +18682,7 @@ var SignatureKYC = function SignatureKYC(_a) {
         skipLivenessValidation: skipLivenessValidation,
         allowManualSelfieCaptureOnLoadingError: allowManualSelfieCaptureOnLoadingError,
         guidesComponent: guidesComponent,
+        showFaceGuideThenSignaturePad: showFaceGuideThenSignaturePad,
         classNames: classNames,
         colors: colors,
         debugMode: debugMode,
@@ -18649,7 +18690,7 @@ var SignatureKYC = function SignatureKYC(_a) {
         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])
   })))));
 };