@incodetech/web 2.2.0 → 2.3.0-rc.0

package/dist/video-selfie/styles.css

@@ -37,6 +37,28 @@
   }
 }
 
+@keyframes incodeToastFadeInOut {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -20px);
+  }
+
+  15% {
+    opacity: 1;
+    transform: translate(-50%);
+  }
+
+  85% {
+    opacity: 1;
+    transform: translate(-50%);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -20px);
+  }
+}
+
 .IncodeCaptureContainer {
   flex-direction: column;
   flex: 1;
@@ -51,12 +73,12 @@
 
 .IncodeCaptureContainer .IncodeCaptureFrame {
   aspect-ratio: 1;
+  width: 100%;
+  max-width: var(--face-capture-frame-max-w);
   border-radius: var(--radius-full, var(--border-radius-full));
   border-style: var(--tw-border-style);
   border-width: 12px;
   border-color: #0000;
-  width: 100%;
-  max-width: 335px;
   position: relative;
 }
 
@@ -68,7 +90,7 @@
   translate: var(--tw-translate-x) var(--tw-translate-y);
   transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
   border-radius: var(--radius-full, var(--border-radius-full));
-  background-color: var(--color-white, #fff);
+  background-color: var(--color-surface-neutral-100-static, var(--surface-neutral-100-static));
   justify-content: center;
   align-items: center;
   display: flex;
@@ -86,12 +108,17 @@
 }
 
 .IncodeCaptureContainer .IncodeCaptureVideoElement {
+  inset: var(--spacing-0, var(--spacing-none, 0px));
   object-fit: cover;
   width: 100%;
   height: 100%;
   position: absolute;
 }
 
+.IncodeCaptureContainer .IncodeCaptureVideoElement.IncodeMediaCoverPending {
+  opacity: 0;
+}
+
 .IncodeCaptureContainer .IncodeCaptureVideoElement.IncodeCaptureVideoMirrored {
   transform: scaleX(-1);
 }
@@ -103,12 +130,17 @@
 }
 
 .IncodeCaptureContainer .IncodeCaptureAvatarElement {
+  inset: var(--spacing-0, var(--spacing-none, 0px));
   object-fit: cover;
   width: 100%;
   height: 100%;
   position: absolute;
 }
 
+.IncodeCaptureContainer .IncodeCaptureAvatarElement.IncodeMediaCoverPending {
+  opacity: 0;
+}
+
 .IncodeCaptureContainer .IncodeCaptureAvatarElement.IncodeCaptureAvatarMirrored {
   transform: scaleX(-1);
 }
@@ -133,7 +165,7 @@
 .IncodeLoadingBorder {
   aspect-ratio: 1;
   width: 100%;
-  max-width: 335px;
+  max-width: var(--face-capture-frame-max-w);
   position: absolute;
 }
 
@@ -188,9 +220,9 @@
   background-color: var(--color-surface-neutral-900-80, var(--surface-neutral-900-80));
   width: 100%;
   padding-inline: var(--spacing-20, var(--spacing-20, 20px));
+  box-shadow: var(--id-capture-notification-content-shadow);
   display: flex;
   overflow: hidden;
-  box-shadow: 0 2.079px 36.379px #00000059;
 }
 
 .IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText {
@@ -230,7 +262,7 @@
 }
 
 .IncodeVideoSelfieCapturePage {
-  background-color: var(--color-black, #000);
+  background-color: var(--capture-page-backdrop-color);
 }
 
 .IncodeVideoSelfieCapturePage .IncodePageInner {
@@ -380,7 +412,7 @@
 }
 
 .IncodeVideoSelfieTutorialStartButton {
-  max-width: 420px;
+  max-width: var(--incode-form-max-w);
   margin: auto;
 }
 
@@ -622,20 +654,22 @@
 }
 
 .IncodeVsPoaBanner {
-  background: #000c;
+  top: var(--spacing-0, var(--spacing-none, 0px));
+  right: var(--spacing-0, var(--spacing-none, 0px));
+  left: var(--spacing-0, var(--spacing-none, 0px));
+  background-color: var(--color-surface-neutral-1000-80-static, var(--surface-neutral-1000-80-static));
+  padding-inline: var(--spacing-16, var(--spacing-16, 16px));
+  padding-top: var(--poa-mask-banner-padding-top);
+  padding-bottom: var(--spacing-16, var(--spacing-16, 16px));
   justify-content: center;
   align-items: center;
-  padding: 80px 16px 16px;
   display: flex;
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
 }
 
 .IncodeVsPoaBannerText {
   text-align: center;
-  color: #fff;
+  color: var(--poa-mask-banner-text-color);
   margin: 0;
   font-size: 1.5rem;
   font-weight: 700;
@@ -643,16 +677,16 @@
 }
 
 .IncodeVsPoaBannerEmphasis {
-  color: #00b2fd;
+  color: var(--poa-mask-emphasis-color);
 }
 
 .IncodeVsPoaActions {
+  right: var(--spacing-16, var(--spacing-16, 16px));
+  bottom: var(--spacing-16, var(--spacing-16, 16px));
+  left: var(--spacing-16, var(--spacing-16, 16px));
   justify-content: center;
   display: flex;
   position: absolute;
-  bottom: 16px;
-  left: 16px;
-  right: 16px;
 }
 
 .IncodeVsPoaButton {

package/dist/video-selfie/styles.css.js

@@ -0,0 +1 @@
+export default "/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n@layer properties {\n  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n    .IncodeComponent, .IncodeComponent *, .IncodeComponent :before, .IncodeComponent :after, .IncodeComponent ::backdrop {\n      --tw-border-style: solid;\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n    }\n  }\n}\n\n@layer incode-theme, incode-utilities, incode-base, incode-components;\n\n@keyframes slideUp {\n  from {\n    transform: translateY(100%);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes incodeToastFadeInOut {\n  0% {\n    opacity: 0;\n    transform: translate(-50%, -20px);\n  }\n\n  15% {\n    opacity: 1;\n    transform: translate(-50%);\n  }\n\n  85% {\n    opacity: 1;\n    transform: translate(-50%);\n  }\n\n  100% {\n    opacity: 0;\n    transform: translate(-50%, -20px);\n  }\n}\n\n.IncodeCaptureContainer {\n  flex-direction: column;\n  flex: 1;\n  justify-content: flex-start;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  position: relative;\n  overflow: hidden;\n}\n\n.IncodeCaptureContainer .IncodeCaptureFrame {\n  aspect-ratio: 1;\n  width: 100%;\n  max-width: var(--face-capture-frame-max-w);\n  border-radius: var(--radius-full, var(--border-radius-full));\n  border-style: var(--tw-border-style);\n  border-width: 12px;\n  border-color: #0000;\n  position: relative;\n}\n\n.IncodeCaptureContainer .IncodeCaptureVideoWrapper {\n  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n  width: calc(100% - 24px);\n  height: calc(100% - 24px);\n  translate: var(--tw-translate-x) var(--tw-translate-y);\n  transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );\n  border-radius: var(--radius-full, var(--border-radius-full));\n  background-color: var(--color-surface-neutral-100-static, var(--surface-neutral-100-static));\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  overflow: hidden;\n}\n\n.IncodeCaptureContainer .IncodeCaptureVideo {\n  z-index: 50;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n}\n\n.IncodeCaptureContainer .IncodeCaptureVideoElement {\n  inset: var(--spacing-0, var(--spacing-none, 0px));\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n}\n\n.IncodeCaptureContainer .IncodeCaptureVideoElement.IncodeMediaCoverPending {\n  opacity: 0;\n}\n\n.IncodeCaptureContainer .IncodeCaptureVideoElement.IncodeCaptureVideoMirrored {\n  transform: scaleX(-1);\n}\n\n.IncodeCaptureContainer .IncodeCaptureAvatarHost {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n}\n\n.IncodeCaptureContainer .IncodeCaptureAvatarElement {\n  inset: var(--spacing-0, var(--spacing-none, 0px));\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n}\n\n.IncodeCaptureContainer .IncodeCaptureAvatarElement.IncodeMediaCoverPending {\n  opacity: 0;\n}\n\n.IncodeCaptureContainer .IncodeCaptureAvatarElement.IncodeCaptureAvatarMirrored {\n  transform: scaleX(-1);\n}\n\n.IncodeCaptureVisuallyHidden {\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border-width: 0;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  position: absolute;\n  overflow: hidden;\n}\n\n.IncodeFaceOutline {\n  width: 100%;\n  height: 100%;\n}\n\n.IncodeLoadingBorder {\n  aspect-ratio: 1;\n  width: 100%;\n  max-width: var(--face-capture-frame-max-w);\n  position: absolute;\n}\n\n.IncodeLoadingBorder .IncodeLoadingBorderBase, .IncodeLoadingBorder .IncodeLoadingBorderForeground {\n  inset: var(--spacing-0, var(--spacing-none, 0px));\n  position: absolute;\n}\n\n.IncodeLoadingBorder .IncodeLoadingBorderForeground.IncodeLoadingBorderSpinning {\n  animation: var(--animate-spin, spin 1s linear infinite);\n}\n\n.IncodeLoadingBorder .IncodeLoadingBorderPath {\n  transition: all 1s ease-in-out;\n}\n\n.IncodeNotification {\n  flex-direction: column;\n  align-items: center;\n  display: flex;\n}\n\n.IncodeNotification .IncodeNotificationText {\n  text-align: center;\n  font-family: var(--typography-feedback-family);\n  font-size: var(--typography-feedback-l-size);\n  font-weight: var(--typography-feedback-l-weight);\n  line-height: var(--typography-feedback-l-line-height);\n  letter-spacing: var(--typography-feedback-l-letter-spacing);\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeIdCaptureNotification {\n  top: var(--spacing-24, var(--spacing-24, 24px));\n  right: var(--spacing-24, var(--spacing-24, 24px));\n  left: var(--spacing-24, var(--spacing-24, 24px));\n  z-index: 100;\n  max-width: var(--incode-form-max-w);\n  padding-bottom: var(--spacing-32, var(--spacing-32, 32px));\n  align-items: flex-end;\n  margin: auto;\n  display: flex;\n  position: absolute;\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent {\n  z-index: 100;\n  border-radius: var(--radius-large, var(--border-radius-large));\n  border-style: var(--tw-border-style);\n  border-width: 2px;\n  border-color: var(--color-border-neutral-300, var(--border-neutral-300));\n  background-color: var(--color-surface-neutral-900-80, var(--surface-neutral-900-80));\n  width: 100%;\n  padding-inline: var(--spacing-20, var(--spacing-20, 20px));\n  box-shadow: var(--id-capture-notification-content-shadow);\n  display: flex;\n  overflow: hidden;\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText {\n  justify-content: center;\n  gap: var(--spacing-8, var(--spacing-8, 8px));\n  padding-top: var(--spacing-16, var(--spacing-16, 16px));\n  padding-bottom: var(--spacing-12, var(--spacing-12, 12px));\n  text-align: center;\n  color: var(--color-text-body-0-static, var(--text-body-0-static));\n  flex-direction: column;\n  display: flex;\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationTitle {\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h3-size);\n  font-weight: var(--typography-headline-h3-weight);\n  line-height: var(--typography-headline-h3-line-height);\n  letter-spacing: var(--typography-headline-h3-letter-spacing);\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationDescription {\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h5-size);\n  font-weight: var(--typography-headline-h5-weight);\n  line-height: var(--typography-headline-h5-line-height);\n  letter-spacing: var(--typography-headline-h5-letter-spacing);\n  color: var(--color-text-body-tertiary-static, var(--text-body-300-tertiary-static));\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationAnimation {\n  height: var(--id-capture-notification-animation-height);\n  justify-content: center;\n  align-items: center;\n  width: auto;\n  display: flex;\n}\n\n.IncodeVideoSelfieCapturePage {\n  background-color: var(--capture-page-backdrop-color);\n}\n\n.IncodeVideoSelfieCapturePage .IncodePageInner {\n  padding: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeVideoSelfieCapturePage .IncodePageContent {\n  flex: 1;\n  position: relative;\n}\n\n.IncodeVideoSelfieOverlay {\n  pointer-events: none;\n  inset: var(--spacing-0, var(--spacing-none, 0px));\n  z-index: 10;\n  flex-direction: column;\n  align-items: center;\n  display: flex;\n  position: absolute;\n  container-type: inline-size;\n}\n\n.IncodeVideoSelfieSwitchingCameraPage {\n  background-color: var(--color-surface-neutral-900-static, var(--surface-neutral-900-static));\n}\n\n.IncodeVideoSelfieSwitchingCameraPage .IncodePageInner {\n  padding: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeVideoSelfieSwitchingCameraPage .IncodePageContent {\n  flex: 1;\n  position: relative;\n}\n\n.IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCamera {\n  width: 100%;\n  height: 100%;\n  padding-inline: var(--spacing-24, var(--spacing-24, 24px));\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  position: relative;\n}\n\n.IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCameraContent {\n  align-items: center;\n  gap: var(--spacing-16, var(--spacing-16, 16px));\n  text-align: center;\n  flex-direction: column;\n  display: flex;\n}\n\n.IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCameraIcon {\n  width: var(--spacing-40, var(--spacing-40, 40px));\n  height: var(--spacing-40, var(--spacing-40, 40px));\n}\n\n.IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCameraTitle {\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h2-size);\n  font-weight: var(--typography-headline-h2-weight);\n  line-height: var(--typography-headline-h2-line-height);\n  letter-spacing: var(--typography-headline-h2-letter-spacing);\n  color: var(--color-text-body-0-static, var(--text-body-0-static));\n}\n\n.IncodeVideoSelfieTutorialPage .IncodePageContent {\n  min-height: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeVideoSelfieTutorialBody {\n  margin-top: var(--spacing-24, var(--spacing-24, 24px));\n  min-height: var(--spacing-0, var(--spacing-none, 0px));\n  flex: 1;\n  overflow-y: auto;\n}\n\n.IncodeVideoSelfieTutorialSteps {\n  width: 100%;\n  max-width: var(--incode-form-max-w);\n  gap: var(--spacing-8, var(--spacing-8, 8px));\n  flex-direction: column;\n  margin-inline: auto;\n  display: flex;\n}\n\n.IncodeVideoSelfieTutorialStep {\n  align-items: center;\n  gap: var(--spacing-12, var(--spacing-12, 12px));\n  display: flex;\n}\n\n.IncodeVideoSelfieTutorialStepIcon {\n  width: var(--spacing-40, var(--spacing-40, 40px));\n  height: var(--spacing-40, var(--spacing-40, 40px));\n  border-radius: var(--radius-small, var(--border-radius-small));\n  border-style: var(--tw-border-style);\n  border-width: 2px;\n  border-color: var(--color-border-neutral-100, var(--border-neutral-100));\n  background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n  color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  position: relative;\n}\n\n.IncodeVideoSelfieTutorialStepIcon svg {\n  height: var(--spacing-24, var(--spacing-24, 24px));\n  width: var(--spacing-24, var(--spacing-24, 24px));\n}\n\n.IncodeVideoSelfieTutorialStep:not(:last-child) .IncodeVideoSelfieTutorialStepIcon:after {\n  content: \"\";\n  height: var(--spacing-8, var(--spacing-8, 8px));\n  width: var(--spacing-2, var(--spacing-2, 2px));\n  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n  translate: var(--tw-translate-x) var(--tw-translate-y);\n  background-color: var(--color-border-neutral-100, var(--border-neutral-100));\n  position: absolute;\n  top: 100%;\n  left: 50%;\n}\n\n.IncodeVideoSelfieTutorialStepLabel {\n  text-align: left;\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h4-size);\n  font-weight: var(--typography-headline-h4-weight);\n  line-height: var(--typography-headline-h4-line-height);\n  letter-spacing: var(--typography-headline-h4-letter-spacing);\n  color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n}\n\n.IncodeVideoSelfieTutorialActions {\n  bottom: var(--spacing-0, var(--spacing-none, 0px));\n  background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n  width: 100%;\n  padding-top: var(--spacing-24, var(--spacing-24, 24px));\n  padding-bottom: var(--spacing-24, var(--spacing-24, 24px));\n  flex-shrink: 0;\n  display: flex;\n  position: sticky;\n}\n\n.IncodeVideoSelfieTutorialStartButton {\n  max-width: var(--incode-form-max-w);\n  margin: auto;\n}\n\n.IncodeVsStepsHeader {\n  inset-inline: var(--spacing-0, var(--spacing-none, 0px));\n  top: var(--spacing-0, var(--spacing-none, 0px));\n  gap: var(--spacing-2, var(--spacing-2, 2px));\n  width: 100%;\n  padding-inline: var(--spacing-24, var(--spacing-24, 24px));\n  padding-top: var(--spacing-24, var(--spacing-24, 24px));\n  color: var(--color-text-body-0-static, var(--text-body-0-static));\n  z-index: var(--video-selfie-chrome-z-index);\n  background-color: #0000;\n  list-style-type: none;\n  display: flex;\n  position: absolute;\n}\n\n.IncodeVsStepsHeader .IncodeVsStepsHeaderStep {\n  align-items: center;\n  gap: var(--spacing-8, var(--spacing-8, 8px));\n  width: 100%;\n  height: var(--video-selfie-stepper-height);\n  flex-direction: column;\n  flex: 1;\n  display: flex;\n  position: relative;\n}\n\n.IncodeVsStepsHeader .IncodeVsStepsHeaderStep img {\n  width: var(--spacing-32, var(--spacing-32, 32px));\n  height: var(--spacing-32, var(--spacing-32, 32px));\n}\n\n.IncodeVsStepsHeader .IncodeVsStepsHeaderPill {\n  border-radius: var(--radius-full, var(--border-radius-full));\n  background-color: var(--color-surface-neutral-200, var(--surface-neutral-200));\n  width: 100%;\n  height: var(--video-selfie-stepper-pill-height);\n  opacity: .25;\n  transition: opacity .3s ease-in-out;\n}\n\n.IncodeVsStepsHeader .IncodeVsStepsHeaderStepCompleted .IncodeVsStepsHeaderPill {\n  opacity: .5;\n}\n\n.IncodeVsStepsHeader .IncodeVsStepsHeaderStepCurrent .IncodeVsStepsHeaderPill {\n  opacity: 1;\n}\n\n.IncodeVsStepsHeader.IncodeVsStepsHeaderFinished .IncodeVsStepsHeaderPill {\n  background-color: var(--border-status-positive-static);\n  opacity: 1;\n}\n\n.IncodeVsSelfieManualCapture {\n  pointer-events: auto;\n}\n\n.IncodeVideoSelfieOverlay .IncodeVsSelfieMask {\n  border-radius: var(--radius-full, var(--border-radius-full));\n  z-index: var(--video-selfie-mask-z-index);\n  width: 86cqw;\n  height: 86cqw;\n  box-shadow: var(--video-selfie-mask-vignette-shadow);\n  position: absolute;\n  top: calc(50% - 7cqw);\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.IncodeVideoSelfieOverlay .IncodeVsSelfieMask .IncodeVsSelfieMaskRing {\n  inset: var(--spacing-0, var(--spacing-none, 0px));\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  overflow: visible;\n}\n\n.IncodeVideoSelfieOverlay .IncodeVsSelfieMaskFeedback {\n  inset-inline: var(--spacing-0, var(--spacing-none, 0px));\n  align-items: center;\n  gap: var(--spacing-16, var(--spacing-16, 16px));\n  text-align: center;\n  width: 100%;\n  z-index: var(--video-selfie-chrome-z-index);\n  max-width: var(--video-selfie-feedback-max-width);\n  flex-direction: column;\n  margin-inline: auto;\n  display: flex;\n  position: absolute;\n  top: calc(50% + 36cqw + 40px);\n}\n\n.IncodeVideoSelfieOverlay .IncodeVsSelfieMaskIcon {\n  width: var(--spacing-32, var(--spacing-32, 32px));\n  height: var(--spacing-32, var(--spacing-32, 32px));\n}\n\n.IncodeVideoSelfieOverlay .IncodeVsSelfieMaskText {\n  margin: var(--spacing-0, var(--spacing-none, 0px));\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h2-size);\n  font-weight: var(--typography-headline-h2-weight);\n  line-height: var(--typography-headline-h2-line-height);\n  letter-spacing: var(--typography-headline-h2-letter-spacing);\n  color: var(--color-text-body-0-static, var(--text-body-0-static));\n}\n\n.IncodeVsIdMask {\n  z-index: 50;\n  padding-inline: var(--spacing-24);\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  position: absolute;\n  inset: 0;\n}\n\n.IncodeVsIdMask .IncodeVsIdManualCapture {\n  bottom: var(--spacing-32);\n  z-index: 60;\n  pointer-events: auto;\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.IncodeVsIdMask .IncodeIdCaptureNotification {\n  top: calc(var(--spacing-24) + var(--video-selfie-stepper-height) + var(--spacing-16));\n}\n\n.IncodeVsIdMask .IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent {\n  background-color: var(--surface-neutral-900-static);\n}\n\n.IncodeVsIdMask .IncodeVsIdFeedback {\n  z-index: 100;\n  justify-content: center;\n  align-items: center;\n  gap: var(--spacing-12, var(--spacing-12, 12px));\n  border-radius: var(--radius-medium, var(--border-radius-medium));\n  padding: var(--spacing-32, var(--spacing-32, 32px));\n  text-align: center;\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h2-size);\n  font-weight: var(--typography-headline-h2-weight);\n  line-height: var(--typography-headline-h2-line-height);\n  letter-spacing: var(--typography-headline-h2-letter-spacing);\n  color: var(--color-text-body-0-static, var(--text-body-0-static));\n  background-color: var(--surface-neutral-900-static);\n  border: var(--border-width-regular) solid var(--border-neutral-100-static);\n  width: max-content;\n  max-width: var(--video-selfie-id-feedback-max-width);\n  flex-direction: column;\n  display: flex;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  overflow: hidden;\n  transform: translate(-50%, -50%);\n}\n\n.IncodeVsIdMask .IncodeVsIdFeedback.IncodeVsIdFeedbackError {\n  width: var(--video-selfie-id-feedback-width);\n}\n\n.IncodeVsIdMask .IncodeVsIdFeedback.IncodeVsIdFeedbackProcessing {\n  gap: var(--spacing-16);\n  color: var(--text-body-50-static);\n  width: var(--video-selfie-id-processing-feedback-width);\n  height: var(--video-selfie-id-processing-feedback-height);\n}\n\n.IncodeVsIdMask .IncodeVsIdFeedback.IncodeVsIdFeedbackProcessing p {\n  white-space: nowrap;\n}\n\n.IncodeVsIdMask .IncodeVsIdFeedback .IncodeVsIdFeedbackSpinnerPrimary {\n  fill: var(--spinner-surface-primary);\n}\n\n.IncodeVsIdMask .IncodeVsIdFeedback .IncodeVsIdFeedbackSpinnerSecondary {\n  fill: var(--surface-brand-900-static);\n}\n\n.IncodeVsIdFlipModal .IncodeModalDialog {\n  max-width: none;\n  height: 100%;\n}\n\n.IncodeVsIdFlipModal .IncodeModalContent {\n  border-radius: var(--radius-none, var(--border-radius-none));\n  background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n  max-width: none;\n  height: 100%;\n  padding: var(--spacing-24, var(--spacing-24, 24px));\n  justify-content: center;\n  gap: var(--video-selfie-id-flip-gap);\n}\n\n.IncodeVsIdFlipModal .IncodeModalTitleSectionCenter {\n  margin: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeVsIdFlipModal .IncodeVsIdFlipAnimation {\n  height: var(--video-selfie-id-flip-animation-height);\n  width: var(--video-selfie-id-flip-animation-width);\n  overflow: hidden;\n}\n\n.IncodeVsFinalSuccess {\n  justify-content: center;\n  align-items: center;\n  gap: var(--spacing-12, var(--spacing-12, 12px));\n  padding-block: var(--spacing-16, var(--spacing-16, 16px));\n  flex-direction: column;\n  flex: 1;\n  display: flex;\n}\n\n.IncodeVsFinalSuccess .IncodeVsFinalSuccessTitle {\n  margin: var(--spacing-0, var(--spacing-none, 0px));\n  text-align: center;\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h2-size);\n  font-weight: var(--typography-headline-h2-weight);\n  line-height: var(--typography-headline-h2-line-height);\n  letter-spacing: var(--typography-headline-h2-letter-spacing);\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeVsPoaMask {\n  pointer-events: none;\n  z-index: 50;\n  position: absolute;\n  inset: 0;\n}\n\n.IncodeVsPoaBanner {\n  top: var(--spacing-0, var(--spacing-none, 0px));\n  right: var(--spacing-0, var(--spacing-none, 0px));\n  left: var(--spacing-0, var(--spacing-none, 0px));\n  background-color: var(--color-surface-neutral-1000-80-static, var(--surface-neutral-1000-80-static));\n  padding-inline: var(--spacing-16, var(--spacing-16, 16px));\n  padding-top: var(--poa-mask-banner-padding-top);\n  padding-bottom: var(--spacing-16, var(--spacing-16, 16px));\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  position: absolute;\n}\n\n.IncodeVsPoaBannerText {\n  text-align: center;\n  color: var(--poa-mask-banner-text-color);\n  margin: 0;\n  font-size: 1.5rem;\n  font-weight: 700;\n  line-height: 1.4;\n}\n\n.IncodeVsPoaBannerEmphasis {\n  color: var(--poa-mask-emphasis-color);\n}\n\n.IncodeVsPoaActions {\n  right: var(--spacing-16, var(--spacing-16, 16px));\n  bottom: var(--spacing-16, var(--spacing-16, 16px));\n  left: var(--spacing-16, var(--spacing-16, 16px));\n  justify-content: center;\n  display: flex;\n  position: absolute;\n}\n\n.IncodeVsPoaButton {\n  pointer-events: auto;\n  width: 100%;\n}\n\n.IncodeVsVoicePanel {\n  pointer-events: auto;\n  z-index: var(--video-selfie-mask-z-index);\n  align-items: center;\n  gap: var(--spacing-12);\n  padding: var(--spacing-20) var(--spacing-16);\n  border-radius: var(--border-radius-large);\n  background: var(--surface-neutral-0-static);\n  color: var(--text-body-800-primary-static);\n  border: var(--video-selfie-voice-panel-border-width) solid transparent;\n  box-shadow: var(--video-selfie-voice-vignette-shadow);\n  flex-direction: column;\n  transition: border-color .3s ease-in-out;\n  display: flex;\n  position: absolute;\n  bottom: 10px;\n  left: 10px;\n  right: 10px;\n}\n\n.IncodeVsVoicePanel.IncodeVsVoicePanelActive {\n  border-color: var(--border-brand-500);\n}\n\n.IncodeVsVoicePanel.IncodeVsVoicePanelProcessing {\n  border-style: var(--tw-border-style);\n  left: var(--spacing-8);\n  right: var(--spacing-8);\n  bottom: var(--spacing-8);\n  justify-content: center;\n  align-items: center;\n  gap: var(--spacing-16);\n  height: var(--video-selfie-voice-processing-height);\n  min-height: var(--video-selfie-voice-processing-height);\n  padding: var(--spacing-24) var(--spacing-16);\n  border-width: 0;\n}\n\n.IncodeVsVoicePanel .IncodeVsVoicePanelProcessingTitle {\n  margin: var(--spacing-0, var(--spacing-none, 0px));\n  text-align: center;\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h2-size);\n  font-weight: var(--typography-headline-h2-weight);\n  line-height: var(--typography-headline-h2-line-height);\n  letter-spacing: var(--typography-headline-h2-letter-spacing);\n  color: var(--color-spinner-text-title, var(--spinner-text-title));\n}\n\n.IncodeVsVoicePanel .IncodeVsVoicePanelLabel {\n  margin: var(--spacing-0, var(--spacing-none, 0px));\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h4-size);\n  font-weight: var(--typography-headline-h4-weight);\n  line-height: var(--typography-headline-h4-line-height);\n  letter-spacing: var(--typography-headline-h4-letter-spacing);\n  color: var(--text-body-500-secondary-static);\n}\n\n.IncodeVsVoicePanel .IncodeVsVoicePanelTitle {\n  margin: var(--spacing-0, var(--spacing-none, 0px));\n  padding-inline: var(--spacing-16, var(--spacing-16, 16px));\n  text-align: center;\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h2-size);\n  font-weight: var(--typography-headline-h2-weight);\n  line-height: var(--typography-headline-h2-line-height);\n  letter-spacing: var(--typography-headline-h2-letter-spacing);\n  color: var(--text-body-800-primary-static);\n}\n\n.IncodeVsVoicePanel .IncodeVsVoicePanelButton {\n  width: 100%;\n}\n\n.IncodeVsVoicePanel .IncodeVsVoiceStepper {\n  margin: var(--spacing-0, var(--spacing-none, 0px));\n  gap: var(--spacing-8, var(--spacing-8, 8px));\n  width: 100%;\n  padding: var(--spacing-0, var(--spacing-none, 0px));\n  list-style-type: none;\n  display: flex;\n}\n\n.IncodeVsVoicePanel .IncodeVsVoiceStep {\n  height: var(--spacing-4);\n  border-radius: var(--border-radius-full);\n  background: var(--surface-neutral-100-static);\n  flex: 1;\n}\n\n.IncodeVsVoicePanel .IncodeVsVoiceStepActive {\n  background: var(--surface-brand-500-static);\n}\n\n.IncodeVsVoicePanel .IncodeVsVoiceMic {\n  width: var(--spacing-16);\n  height: var(--spacing-16);\n  border-radius: var(--border-radius-full);\n  background: var(--icon-status-negative);\n  animation: 1.2s ease-in-out infinite IncodeVsVoiceMicPulse;\n}\n\n@keyframes IncodeVsVoiceMicPulse {\n  0%, 100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  50% {\n    opacity: .4;\n    transform: scale(.8);\n  }\n}\n\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n";

package/dist/video-selfie/video-selfie.es.js

@@ -1,17 +1,16 @@
-import { a as useTranslation } from "../uiConfig-Dqnjankd.js";
-import { C as k, d as T, g as q, l as A, p as d, v as y, y as u } from "../vendor-preact-BPXMFRom.js";
-import { a as TerminalErrorPage, b as useManager, f as useTimeoutHandle, l as TransitionSpinner, o as Page, r as withStandaloneModuleBootstrap, t as IncodeComponent, v as useModuleTerminalCallbacks } from "../incodeComponent-BtFz-bx2.js";
-import { d as cn, n as LoadingIcon } from "../spacer-DLEDuWEx.js";
-import { n as Title } from "../spinner-CJCOHUKx.js";
-import { r as Button } from "../incode-logo-DeIDDejm.js";
-import "../icons-ChHV5iHi.js";
-import { t as SuccessIcon } from "../successIcon-DS8BLsgy.js";
-import { a as CameraView, r as preloadCaptureAnimations } from "../manualCaptureButton-DzJFIEfu.js";
-import { n as Permissions } from "../manualCaptureButton-D58WsS-x.js";
-import { t as registerIncodeModuleElement } from "../incodeModule-9K8KUs61.js";
-import { a as IdFlipModal, c as VideoSelfieTutorial, i as IdMask, l as useVideoSelfiePermissions, n as SwitchingCameraScreen, o as preloadIdFlipAnimation, r as StepsHeader, s as SelfieMask, t as VideoSelfieFinalSuccessScreen } from "../finalSuccessScreen-B9uB3bST.js";
+import { o as useTranslation } from "../uiConfig-C1jdTj-i.js";
+import { S as k, _ as y, c as A, f as d, h as q, u as T, v as u } from "../vendor-preact-C0jX1Cbq.js";
+import { S as useManager, b as useModuleTerminalCallbacks, c as Page, d as TransitionSpinner, i as withStandaloneModuleBootstrap, m as useTimeoutHandle, s as TerminalErrorPage, t as IncodeComponent } from "../incodeComponent-D3_BSWan.js";
+import { d as cn, n as LoadingIcon } from "../spacer-ayyj5lMa.js";
+import { t as Title } from "../typography-ikD4-Z8S.js";
+import { r as SuccessIcon, x as Button } from "../icons-eIgP34nj.js";
+import { t as CameraView } from "../cameraView-DrTBPNWX.js";
+import { t as Permissions } from "../permissions-DowRodJj.js";
+import { r as preloadCaptureAnimations } from "../manualCaptureButton-igyQk3Yb.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-BQgvYKyr.js";
+import { a as IdFlipModal, c as VideoSelfieTutorial, i as IdMask, l as useVideoSelfiePermissions, n as SwitchingCameraScreen, o as preloadIdFlipAnimation, r as StepsHeader, s as SelfieMask, t as VideoSelfieFinalSuccessScreen } from "../finalSuccessScreen-BtJ5o2pi.js";
 import { eventModuleNames, eventScreenNames, screenEvent, videoSelfieEvents } from "@incodetech/core/events";
-import { createConsentRecorder, createVideoSelfieCameraWarmer, createVideoSelfieRecordingManager, facingModeForStep, getVideoSelfieQuestions, getVoiceConsentPhrase, resolveVideoSelfieSteps, warmupVideoSelfieWasm } from "@incodetech/core/video-selfie";
+import { VIDEO_SELFIE_VALIDATION_ATTEMPTS_EXHAUSTED_CODE, createConsentRecorder, createVideoSelfieCameraWarmer, createVideoSelfieRecordingManager, facingModeForStep, getVideoSelfieQuestions, getVoiceConsentPhrase, resolveVideoSelfieSteps } from "@incodetech/core/video-selfie";
 //#region src/modules/video-selfie/poaMask.tsx
 /**
 * Port of V1's `ProofOfAddressMask`: a pass-through overlay for the
@@ -431,9 +430,11 @@ var getSelfieVariant = (detectionStatus) => {
 };
 var VideoSelfieContent = ({ config, onFinish, onError }) => {
 	const { t } = useTranslation();
-	const cameraWarmer = T(() => config ? createVideoSelfieCameraWarmer(config) : null, [config]);
+	const steps = T(() => config ? resolveVideoSelfieSteps(config) : [], [config]);
+	const cameraWarmer = T(() => config ? createVideoSelfieCameraWarmer(config, steps) : null, [config, steps]);
 	const [state, manager] = useManager(() => createVideoSelfieRecordingManager({
 		config,
+		steps,
 		dependencies: cameraWarmer ? { acquireCamera: cameraWarmer.acquireCamera } : void 0
 	}), { autoLoad: false });
 	const [phase, setPhase] = d(config?.showTutorials ? "tutorial" : "permissions");
@@ -444,8 +445,7 @@ var VideoSelfieContent = ({ config, onFinish, onError }) => {
 	});
 	y(() => {
 		if ((phase === "tutorial" || phase === "permissions") && config) {
-			warmupVideoSelfieWasm(config);
-			if (config.checkIdScan) {
+			if (steps.some((step) => step === "frontId" || step === "backId")) {
 				preloadCaptureAnimations();
 				preloadIdFlipAnimation();
 			}
@@ -454,6 +454,7 @@ var VideoSelfieContent = ({ config, onFinish, onError }) => {
 	}, [
 		phase,
 		config,
+		steps,
 		cameraWarmer
 	]);
 	y(() => () => cameraWarmer?.dispose(), [cameraWarmer]);
@@ -461,14 +462,20 @@ var VideoSelfieContent = ({ config, onFinish, onError }) => {
 		if (phase !== "capture") return;
 		manager.start();
 	}, [manager, phase]);
-	useModuleTerminalCallbacks({
+	const validationAttemptsExhausted = state.status === "error" && state.errorKind === "validationAttemptsExhausted";
+	useModuleTerminalCallbacks(validationAttemptsExhausted ? {
+		status: state.status,
+		onFinish,
+		onError,
+		error: state.error,
+		moduleErrorCode: VIDEO_SELFIE_VALIDATION_ATTEMPTS_EXHAUSTED_CODE
+	} : {
 		status: state.status,
 		onFinish
 	});
-	const steps = T(() => config ? resolveVideoSelfieSteps(config) : [], [config]);
 	const step = state.step ?? "selfie";
 	if (phase === "tutorial" && config) return /* @__PURE__ */ u(VideoSelfieTutorial, {
-		config,
+		steps,
 		onStart: () => setPhase("permissions")
 	});
 	if (phase === "permissions") return /* @__PURE__ */ u(Permissions, {
@@ -476,10 +483,15 @@ var VideoSelfieContent = ({ config, onFinish, onError }) => {
 		permissionStatus
 	});
 	if (state.status === "finished" || state.status === "aborted") return null;
-	if (state.status === "error") return /* @__PURE__ */ u(TerminalErrorPage, {
-		message: state.errorKind === "connection" ? t("connectionError.subtitle") : void 0,
-		onRetry: () => manager.retry()
-	});
+	if (state.status === "error") {
+		if (validationAttemptsExhausted) return null;
+		const isTerminalTimeout = state.errorKind === "maxVideoLengthReached";
+		return /* @__PURE__ */ u(TerminalErrorPage, {
+			message: isTerminalTimeout ? t("videoSelfie.error.maxVideoLengthReached") : state.errorKind === "connection" ? t("connectionError.subtitle") : void 0,
+			retryable: !isTerminalTimeout,
+			onRetry: isTerminalTimeout ? void 0 : () => manager.retry()
+		});
+	}
 	if (state.status === "finalizing") return /* @__PURE__ */ u(VideoSelfieFinalizingScreen, {});
 	if (state.status === "success") return /* @__PURE__ */ u(VideoSelfieFinalSuccessScreen, {});
 	if (state.status === "switchingCamera") return /* @__PURE__ */ u(SwitchingCameraScreen, {

package/dist/watchlist/watchlist.es.js

@@ -1,10 +1,10 @@
-import { a as useTranslation } from "../uiConfig-Dqnjankd.js";
-import { v as y, y as u } from "../vendor-preact-BPXMFRom.js";
-import { b as useManager, r as withStandaloneModuleBootstrap, t as IncodeComponent, v as useModuleTerminalCallbacks } from "../incodeComponent-BtFz-bx2.js";
-import { n as LoadingIcon } from "../spacer-DLEDuWEx.js";
-import { t as SuccessIcon } from "../successIcon-DS8BLsgy.js";
-import { t as StatusPage } from "../statusPage-BF4qGjF3.js";
-import { t as registerIncodeModuleElement } from "../incodeModule-9K8KUs61.js";
+import { o as useTranslation } from "../uiConfig-C1jdTj-i.js";
+import { _ as y, v as u } from "../vendor-preact-C0jX1Cbq.js";
+import { S as useManager, b as useModuleTerminalCallbacks, i as withStandaloneModuleBootstrap, t as IncodeComponent } from "../incodeComponent-D3_BSWan.js";
+import { n as LoadingIcon } from "../spacer-ayyj5lMa.js";
+import { r as SuccessIcon } from "../icons-eIgP34nj.js";
+import { t as StatusPage } from "../statusPage-Bqz3Ci4f.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-BQgvYKyr.js";
 import { createWatchlistManager } from "@incodetech/core/watchlist";
 //#region src/modules/watchlist/watchlist.tsx
 var WatchlistContent = ({ manager: externalManager, onFinish }) => {

package/dist/watchlist-for-business/styles.css.js

@@ -0,0 +1 @@
+export default "/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n.IncodeWatchlistForBusinessPage {\n  height: 100%;\n}\n\n.IncodeWatchlistForBusinessPage .IncodeWatchlistForBusinessForm {\n  margin-top: var(--spacing-32, var(--spacing-32, 32px));\n  align-items: center;\n  gap: var(--spacing-16, var(--spacing-16, 16px));\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n\n.IncodeWatchlistForBusinessPage .IncodeWatchlistForBusinessForm button {\n  margin-top: auto;\n}\n";

package/dist/{watchlistForBusiness-C_zqdY4P.js → watchlistForBusiness-o4F6Czxp.js}

@@ -1,18 +1,17 @@
-import { a as useTranslation } from "./uiConfig-Dqnjankd.js";
-import { v as y, y as u } from "./vendor-preact-BPXMFRom.js";
-import { b as useManager, o as Page, r as withStandaloneModuleBootstrap, t as IncodeComponent, v as useModuleTerminalCallbacks } from "./incodeComponent-BtFz-bx2.js";
-import { n as LoadingIcon } from "./spacer-DLEDuWEx.js";
-import { r as Button } from "./incode-logo-DeIDDejm.js";
-import { t as SuccessIcon } from "./successIcon-DS8BLsgy.js";
-import { t as StatusPage } from "./statusPage-BF4qGjF3.js";
-import { t as InputComposed } from "./inputComposed-C2zTEXsp.js";
-import { t as registerIncodeModuleElement } from "./incodeModule-9K8KUs61.js";
-import { t as CountrySelector } from "./countrySelector-COZ7XQHp.js";
+import { o as useTranslation } from "./uiConfig-C1jdTj-i.js";
+import { _ as y, v as u } from "./vendor-preact-C0jX1Cbq.js";
+import { S as useManager, b as useModuleTerminalCallbacks, c as Page, i as withStandaloneModuleBootstrap, t as IncodeComponent } from "./incodeComponent-D3_BSWan.js";
+import { n as LoadingIcon } from "./spacer-ayyj5lMa.js";
+import { r as SuccessIcon, x as Button } from "./icons-eIgP34nj.js";
+import { t as StatusPage } from "./statusPage-Bqz3Ci4f.js";
+import { t as InputComposed } from "./inputComposed-CTZnsHLi.js";
+import { t as registerIncodeModuleElement } from "./incodeModule-BQgvYKyr.js";
+import { t as CountrySelector } from "./countrySelector-C60Cdc5P.js";
 import { createWatchlistForBusinessManager } from "@incodetech/core/watchlist-for-business";
 //#region src/modules/watchlist-for-business/watchlistForBusiness.tsx
-var WatchlistForBusinessContent = ({ onFinish }) => {
+var WatchlistForBusinessContent = ({ manager: externalManager, onFinish }) => {
 	const { t } = useTranslation();
-	const [state, manager] = useManager(() => createWatchlistForBusinessManager());
+	const [state, manager] = useManager(() => externalManager ?? createWatchlistForBusinessManager(), { manageLifecycle: !externalManager });
 	y(() => {
 		manager.load();
 	}, [manager]);
@@ -34,21 +33,26 @@ var WatchlistForBusinessContent = ({ onFinish }) => {
 	});
 	if (state.status === "form" || state.status === "idle") {
 		const formState = state.status === "form" ? state : null;
+		const businessNameError = formState?.validationErrors?.businessName;
 		return /* @__PURE__ */ u(Page, {
 			className: "IncodeWatchlistForBusinessPage",
 			title: t("watchlistForBusiness.title"),
+			subtitle: t("forms.subtitle"),
 			hideFooterBranding: true,
+			"data-testid": "watchlist-for-business-page",
 			children: /* @__PURE__ */ u("form", {
 				class: "IncodeWatchlistForBusinessForm",
+				"data-testid": "watchlist-for-business-form",
+				noValidate: true,
 				onSubmit: (e) => {
 					e.preventDefault();
 					manager.submit();
 				},
-				autoComplete: "off",
 				children: [
 					/* @__PURE__ */ u(CountrySelector, {
 						id: "watchlist-for-business-country",
 						label: t("watchlistForBusiness.country"),
+						required: true,
 						value: formState?.country ?? "US",
 						onChange: (country) => manager.setCountry(country),
 						"data-testid": "watchlist-for-business-country-selector"
@@ -57,12 +61,17 @@ var WatchlistForBusinessContent = ({ onFinish }) => {
 						id: "businessName",
 						name: "businessName",
 						label: t("watchlistForBusiness.businessName"),
+						"data-testid": "watchlist-for-business-name",
+						autoComplete: "organization",
+						required: true,
+						error: businessNameError ? t(businessNameError) : void 0,
+						showErrorIcon: !!businessNameError,
 						value: formState?.businessName ?? "",
 						onInput: (e) => manager.setBusinessName(e.target.value)
 					}),
 					/* @__PURE__ */ u(Button, {
 						type: "submit",
-						disabled: !formState?.isValid,
+						disabled: formState ? !formState.canSubmit : false,
 						"data-testid": "watchlist-for-business-submit",
 						children: t("watchlistForBusiness.continue")
 					})
@@ -72,8 +81,11 @@ var WatchlistForBusinessContent = ({ onFinish }) => {
 	}
 	return null;
 };
-var WatchlistForBusinessWithLocalConfig = ({ onFinish }) => /* @__PURE__ */ u(IncodeComponent, { children: /* @__PURE__ */ u(WatchlistForBusinessContent, { onFinish }) });
-var WatchlistForBusiness = withStandaloneModuleBootstrap(WatchlistForBusinessWithLocalConfig, "WATCHLIST_BUSINESS");
+var WatchlistForBusinessWithLocalConfig = ({ manager, onFinish }) => /* @__PURE__ */ u(IncodeComponent, { children: /* @__PURE__ */ u(WatchlistForBusinessContent, {
+	manager,
+	onFinish
+}) });
+var WatchlistForBusiness = withStandaloneModuleBootstrap(WatchlistForBusinessWithLocalConfig, "WATCHLIST_BUSINESS", { supportsExternalManager: true });
 registerIncodeModuleElement(WatchlistForBusiness, "incode-watchlist-for-business");
 //#endregion
 export { WatchlistForBusiness };