idmission-web-sdk 2.5.78 → 2.5.79-react16compat.0

package/dist/sdk2.umd.development.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('platform'), require('tus-js-client'), require('styled-components'), require('react-dom'), require('react-dom/client')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'platform', 'tus-js-client', 'styled-components', 'react-dom', 'react-dom/client'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Sdk2 = {}, global.React, global.platform, global.tus, global.styled, global.ReactDOM, global.ReactDOM));
-})(this, (function (exports, React, platform, tusJsClient, sc$1, reactDom, ReactDOM) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('platform'), require('tus-js-client'), require('styled-components'), require('react-dom')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'platform', 'tus-js-client', 'styled-components', 'react-dom'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Sdk2 = {}, global.React, global.platform, global.tus, global.styled, global.ReactDOM));
+})(this, (function (exports, React, platform, tusJsClient, sc$1, ReactDOM) { 'use strict';
 
   function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -11686,7 +11686,7 @@
     });
     var portalLocation = document.getElementById('idmission-above-guides-content');
     if (!portalLocation) return element;
-    return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
+    return /*#__PURE__*/ReactDOM.createPortal(element, portalLocation);
   }
   var DebugStatsPaneDiv = styled.span(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteralLoose(["\n  font-size: 16px;\n  font-family: monospace;\n  position: absolute;\n  left: 20px;\n  bottom: 20px;\n  margin-right: 20px;\n  padding: 8px;\n  color: limegreen;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 10002;\n  pointer-events: none;\n"])));
   var ObjectDetectionDebugOverlayDiv = styled.div(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 1001;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  pointer-events: none;\n  ", "\n  transform-style: preserve-3d;\n"])), function (_ref3) {
@@ -12089,7 +12089,7 @@
     }, []);
     if (!target) return null;
     var bottomColor = hiddenBottomColor != null ? hiddenBottomColor : color;
-    return /*#__PURE__*/reactDom.createPortal(jsxs(Fragment, {
+    return /*#__PURE__*/ReactDOM.createPortal(jsxs(Fragment, {
       children: [jsx(EdgeStrip, {
         "$edge": "top",
         "$color": color,
@@ -12203,7 +12203,7 @@
     var element = jsx(GuidanceMessageContainerDiv, _extends({}, props));
     var portalLocation = document.getElementById('idmission-above-guides-content');
     if (!portalLocation) return element;
-    return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
+    return /*#__PURE__*/ReactDOM.createPortal(element, portalLocation);
   };
   var GuidanceMessage = styled.div(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose(["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  border-radius: 8px;\n  z-index: 10001;\n  padding: 16px 24px;\n  font-size: 18px;\n  font-weight: bold;\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"])), function (props) {
     var _ref3, _props$$background, _props$theme, _props$$variant;
@@ -24603,7 +24603,9 @@
       _ref$verbiage = _ref.verbiage,
       rawVerbiage = _ref$verbiage === void 0 ? {} : _ref$verbiage,
       _ref$classNames = _ref.classNames,
-      classNames = _ref$classNames === void 0 ? {} : _ref$classNames;
+      classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
+      _ref$colors = _ref.colors,
+      colors = _ref$colors === void 0 ? {} : _ref$colors;
     var submitButtonRef = React.useRef(null);
     // Auto-focus submit button when session becomes ready.
     React.useEffect(function () {
@@ -24657,6 +24659,7 @@
             children: [jsx(WideButton, {
               ref: submitButtonRef,
               className: classNames.submitBtn,
+              colors: colors.submitBtn,
               variant: "positive",
               onClick: onSubmit,
               disabled: submission === 'submitting' || !sessionReady,
@@ -24664,6 +24667,7 @@
               children: submission === 'submitting' ? verbiage.submittingText : !sessionReady ? 'Initializing...' : verbiage.submitText
             }), jsx(WideBorderButton, {
               className: classNames.retryBtn,
+              colors: colors.retryBtn,
               variant: "warning",
               onClick: onRetry,
               disabled: submission !== 'idle',
@@ -26160,7 +26164,8 @@
             onSubmit: isFlipInterstitial ? handleConfirmFlip : handleSubmit,
             onRetry: handleRetake,
             verbiage: isFlipInterstitial ? reviewFlipVerbiage : verbiage.review,
-            classNames: classNames.review
+            classNames: classNames.review,
+            colors: colors.review
           }), !screenTakeover && state.phase === 'error' && state.error !== null && jsx(ErrorScreen, {
             error: state.error,
             onRetry: handleRetry,
@@ -30098,13 +30103,12 @@
     return props.$verticalAlign === 'bottom' ? 'flex-end' : 'center';
   });
   function SelfieCaptureAnimatedMask(_ref3) {
-    var _theme$selfieCapture$4, _theme$selfieCapture4, _theme$selfieCapture$5, _theme$selfieCapture5;
+    var _ref4, _theme$selfieCapture4, _theme$selfieCapture$4, _theme$selfieCapture5, _theme$selfieCapture$5, _theme$selfieCapture6;
     var _ref3$frame = _ref3.frame,
       frame = _ref3$frame === void 0 ? 0 : _ref3$frame,
       _ref3$borderWidth = _ref3.borderWidth,
       borderWidth = _ref3$borderWidth === void 0 ? 5 : _ref3$borderWidth,
-      _ref3$borderColor = _ref3.borderColor,
-      borderColor = _ref3$borderColor === void 0 ? 'white' : _ref3$borderColor,
+      borderColor = _ref3.borderColor,
       _ref3$borderOpacity = _ref3.borderOpacity,
       borderOpacity = _ref3$borderOpacity === void 0 ? 0.8 : _ref3$borderOpacity,
       _ref3$verticalAlign = _ref3.verticalAlign,
@@ -30114,9 +30118,12 @@
       guideStyle = _ref3.guideStyle,
       props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
     var theme = useTheme();
-    var satisfiedColor = (_theme$selfieCapture$4 = (_theme$selfieCapture4 = theme.selfieCapture) == null || (_theme$selfieCapture4 = _theme$selfieCapture4.guides) == null ? void 0 : _theme$selfieCapture4.satisfiedColor) != null ? _theme$selfieCapture$4 : 'var(--idm-color-positive-600)';
-    var negativeColor = (_theme$selfieCapture$5 = (_theme$selfieCapture5 = theme.selfieCapture) == null || (_theme$selfieCapture5 = _theme$selfieCapture5.guides) == null ? void 0 : _theme$selfieCapture5.failureColor) != null ? _theme$selfieCapture$5 : 'var(--idm-color-negative-600)';
-    var statusBorderColor = status === 'failure' ? negativeColor : status === 'success' ? satisfiedColor : borderColor;
+    // The outline while no face is framed yet. An explicit `borderColor` wins,
+    // as the video-ID guides pass their own.
+    var unsatisfiedColor = (_ref4 = borderColor != null ? borderColor : (_theme$selfieCapture4 = theme.selfieCapture) == null || (_theme$selfieCapture4 = _theme$selfieCapture4.guides) == null ? void 0 : _theme$selfieCapture4.unsatisfiedColor) != null ? _ref4 : 'white';
+    var satisfiedColor = (_theme$selfieCapture$4 = (_theme$selfieCapture5 = theme.selfieCapture) == null || (_theme$selfieCapture5 = _theme$selfieCapture5.guides) == null ? void 0 : _theme$selfieCapture5.satisfiedColor) != null ? _theme$selfieCapture$4 : 'var(--idm-color-positive-600)';
+    var negativeColor = (_theme$selfieCapture$5 = (_theme$selfieCapture6 = theme.selfieCapture) == null || (_theme$selfieCapture6 = _theme$selfieCapture6.guides) == null ? void 0 : _theme$selfieCapture6.failureColor) != null ? _theme$selfieCapture$5 : 'var(--idm-color-negative-600)';
+    var statusBorderColor = status === 'failure' ? negativeColor : status === 'success' ? satisfiedColor : unsatisfiedColor;
     return jsxs(RelativeSvgContainer, {
       "$verticalAlign": verticalAlign,
       children: [jsx(HeadGuide, _extends({
@@ -30312,10 +30319,10 @@
       }))]
     });
   }
-  function SelfieCaptureAnimatedMaskWithStatus(_ref4) {
-    var _ref4$status = _ref4.status,
-      status = _ref4$status === void 0 ? 'ready' : _ref4$status,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+  function SelfieCaptureAnimatedMaskWithStatus(_ref5) {
+    var _ref5$status = _ref5.status,
+      status = _ref5$status === void 0 ? 'ready' : _ref5$status,
+      props = _objectWithoutPropertiesLoose(_ref5, _excluded4);
     var _useState3 = React.useState(1),
       _useState4 = _slicedToArray(_useState3, 2),
       frame = _useState4[0],
@@ -30356,8 +30363,7 @@
       guideStyle = _ref.guideStyle,
       _ref$borderWidth = _ref.borderWidth,
       borderWidth = _ref$borderWidth === void 0 ? 5 : _ref$borderWidth,
-      _ref$borderColor = _ref.borderColor,
-      borderColor = _ref$borderColor === void 0 ? 'white' : _ref$borderColor,
+      borderColor = _ref.borderColor,
       _ref$borderOpacity = _ref.borderOpacity,
       borderOpacity = _ref$borderOpacity === void 0 ? 0.8 : _ref$borderOpacity;
     return jsx(FaceCaptureGuideContainer, {
@@ -37646,6 +37652,8 @@
       verbiage = _ref.verbiage,
       _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
+      _ref$colors = _ref.colors,
+      colors = _ref$colors === void 0 ? {} : _ref$colors,
       _ref$assets = _ref.assets,
       assets = _ref$assets === void 0 ? {} : _ref$assets,
       providedVideoRef = _ref.videoRef,
@@ -38019,6 +38027,8 @@
           children: [text.headingText && (!legacyVideoLayout || sessionReady) ? jsx(SignatureHeading, {
             as: "h1",
             className: classNames.heading,
+            "$background": colors.headingBackgroundColor,
+            "$textColor": colors.headingTextColor,
             "$legacyVideoLayout": legacyVideoLayout,
             children: text.headingText
           }) : null, !legacyVideoLayout ? jsx(Guidance, {
@@ -38078,6 +38088,7 @@
             variant: "warning",
             finished: true,
             className: classNames.retryBtn,
+            colors: colors.retryBtn,
             onClick: function onClick() {
               var _padRef$current3;
               (_padRef$current3 = padRef.current) == null || _padRef$current3.clear();
@@ -38088,6 +38099,7 @@
             variant: "positive",
             finished: true,
             className: classNames.doneBtn,
+            colors: colors.doneBtn,
             onClick: handleDone,
             children: text.doneBtnText
           })]
@@ -38097,6 +38109,7 @@
           return handledByState(controller.actions.retry());
         },
         classNames: classNames.microphoneAccessDenied,
+        colors: colors.microphoneAccessDenied,
         verbiage: verbiage == null ? void 0 : verbiage.microphoneAccessDenied
       }) : null, state.phase === "error" && !micDenied && recordingInterrupted && !restarting && RecordingInterruptedScreen ? jsx(RecordingInterruptedScreen, {
         onStartOver: handleStartOver,
@@ -39944,7 +39957,7 @@
     });
   }
   function VideoIdCaptureViewContent(_ref) {
-    var _state$error, _state$artifact2, _state$artifact4, _state$artifact5, _state$error2, _state$error3;
+    var _state$error, _state$artifact2, _state$artifact4, _state$artifact5, _state$error2, _state$error3, _colors$loadingOverla;
     var controller = _ref.controller,
       sessionReadyProp = _ref.sessionReady,
       _ref$autoStart = _ref.autoStart,
@@ -39967,6 +39980,8 @@
       verbiage = _ref.verbiage,
       _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
+      _ref$colors = _ref.colors,
+      colors = _ref$colors === void 0 ? {} : _ref$colors,
       _ref$guideImages = _ref.guideImages,
       guideImages = _ref$guideImages === void 0 ? defaultIdCaptureGuideImages : _ref$guideImages,
       loadingOverlayAssets = _ref.loadingOverlayAssets,
@@ -40145,6 +40160,7 @@
           finished: true,
           disabled: !state.reading.canFinish,
           className: classNames.readTextDoneBtn,
+          colors: colors.readTextDoneBtn,
           onClick: function onClick() {
             onReadingFinished == null || onReadingFinished();
             void controller.actions.finishReading();
@@ -40164,6 +40180,7 @@
         transitionFromPreviousStage: transitionFromFaceCapture,
         assets: loadingOverlayAssets,
         classNames: classNames.loadingOverlay,
+        colors: colors.loadingOverlay,
         verbiage: loadingOverlayVerbiage,
         onDismissed: function onDismissed() {
           return setOverlayDismissed(true);
@@ -40199,6 +40216,7 @@
             finished: true,
             variant: "warning",
             className: classNames.retryBtn,
+            colors: colors.retryBtn,
             onClick: function onClick() {
               return void controller.actions.retry();
             },
@@ -40207,6 +40225,7 @@
             finished: true,
             variant: "positive",
             className: classNames.doneBtn,
+            colors: colors.doneBtn,
             onClick: controller.actions.done,
             children: text.doneBtnText
           })]
@@ -40216,6 +40235,7 @@
           return void controller.actions.retry();
         },
         classNames: classNames.microphoneAccessDenied,
+        colors: colors.microphoneAccessDenied,
         verbiage: verbiage == null ? void 0 : verbiage.microphoneAccessDenied
       }) : null, state.phase === 'error' && !micDenied ? jsxs(ErrorPanel, {
         role: "alert",
@@ -40226,6 +40246,10 @@
           children: (_state$error2 = state.error) == null ? void 0 : _state$error2.message
         }), (_state$error3 = state.error) != null && _state$error3.recoverable ? jsx(LoaderButton, {
           finished: true,
+          // This panel is the video-ID stage's camera-denied screen too;
+          // sdk2 coloured that screen's retry from the loading overlay bag.
+          // An unavailable camera was the same 2.x screen (see ErrorScreen).
+          colors: state.error.code === 'CAMERA_PERMISSION_DENIED' || state.error.code === 'CAMERA_UNAVAILABLE' ? (_colors$loadingOverla = colors.loadingOverlay) == null || (_colors$loadingOverla = _colors$loadingOverla.cameraAccessDenied) == null ? void 0 : _colors$loadingOverla.retryBtn : undefined,
           onClick: function onClick() {
             return void controller.actions.retry();
           },
@@ -52014,7 +52038,8 @@
    * async decision, so the mapper cannot know which path will run, and dropping
    * the flow-level classes for a customer who set only those would be the same
    * "my CSS stopped applying" failure this gate exists to catch. The more
-   * specific bag still wins wherever both name the same leaf.
+   * specific bag still wins wherever both name the same leaf. Callers merge only
+   * when the video path can run at all.
    */
   function mergeStyleBags(base, override) {
     if (!base) return override;
@@ -52327,32 +52352,43 @@
     }
     return compactOrUndefined(copy);
   }
+  /**
+   * One stage's colour bag. Unlike `stageBag`, a multi-stage flow (`prefixed`)
+   * never falls back to the root: its root `success` is a DIFFERENT screen's
+   * (the video-ID or signature review), so the fallback would paint that
+   * screen's buttons onto this stage's.
+   */
+  function colorStage(rawBag, stage, prefixed) {
+    return prefixed ? subBag(rawBag, stage) : stageBag(rawBag, stage);
+  }
   /**
    * The half of sdk2's `colors` bag that stayed a component prop: the per-screen
    * BUTTON colours. Everything else in the bag is a theme field now — see
    * `mapThemeWithColors` in ./themes.ts, which the flows apply to `theme`.
    *
-   * The ID side keeps the loading overlay's continue button and the
-   * camera-denied retry button (the face mapper below already kept both). sdk2's
-   * `success.doneBtn`/`success.retryBtn` have no per-screen home: 3.0's
-   * ReviewScreen colours its buttons by `variant` off `theme.buttons`, so those
-   * two are reported in `__fixtures__/dispositions.md` as theme-level rather
-   * than silently dropped here.
+   * The ID side keeps the loading overlay's buttons, the fallback screen's, and
+   * sdk2's `success` pair, which is the review screen's.
    */
-  function mapIdColors(rawBag) {
-    var bag = stageBag(rawBag, 'idCapture');
+  function mapIdColors(rawBag, prefixed) {
+    var bag = colorStage(rawBag, 'idCapture', prefixed);
     if (!bag) return undefined;
     var loadingOverlay = bag.loadingOverlay;
+    var success = subBag(bag, 'success');
     return compactOrUndefined({
       loadingOverlay: compactOrUndefined({
         continueBtn: loadingOverlay === null || loadingOverlay === void 0 ? void 0 : loadingOverlay.continueBtn,
         cameraAccessDenied: loadingOverlay === null || loadingOverlay === void 0 ? void 0 : loadingOverlay.cameraAccessDenied
+      }),
+      fallback: bag.fallback,
+      review: compactOrUndefined({
+        submitBtn: success === null || success === void 0 ? void 0 : success.doneBtn,
+        retryBtn: success === null || success === void 0 ? void 0 : success.retryBtn
       })
     });
   }
   /** The same for the face stage, whose success/failure screens DO take colours. */
-  function mapFaceColors(rawBag) {
-    var bag = stageBag(rawBag, 'faceLiveness');
+  function mapFaceColors(rawBag, prefixed) {
+    var bag = colorStage(rawBag, 'faceLiveness', prefixed);
     if (!bag) return undefined;
     var loadingOverlay = bag.loadingOverlay;
     return compactOrUndefined({
@@ -52529,6 +52565,61 @@
       microphoneAccessDenied: subBag(subBag(bag, 'loadingOverlay'), 'microphoneAccessDenied')
     });
   }
+  /**
+   * The microphone-denied screen's colours. sdk2 showed that screen from the
+   * loading overlay of the stage that asked for the microphone: the selfie
+   * stage, on both the video signature and video ID (IdVideoCaptureWizard.tsx
+   * asks only once ID capture is over). So each view reads that stage, then the
+   * other, then a flat bag's own `loadingOverlay`.
+   */
+  function micDeniedColors(colors, first, second) {
+    var _a, _b;
+    var read = function read(bag) {
+      return subBag(subBag(bag, 'loadingOverlay'), 'microphoneAccessDenied');
+    };
+    return (_b = (_a = read(subBag(colors, first))) !== null && _a !== void 0 ? _a : read(subBag(colors, second))) !== null && _b !== void 0 ? _b : read(colors);
+  }
+  /**
+   * sdk2's video-signature colours (`VideoSignatureColors`) ->
+   * `SignatureCaptureViewColors`. `bag` is that bag: the root on SignatureKYC,
+   * `videoSignatureCapture` everywhere else. `flowColors` is the flow's whole
+   * bag, for the microphone screen, which the selfie overlay showed first.
+   */
+  function mapSignatureColors(bag, flowColors) {
+    var success = subBag(bag, 'success');
+    return compactOrUndefined({
+      headingBackgroundColor: bag === null || bag === void 0 ? void 0 : bag.guidanceMessageBackgroundColor,
+      headingTextColor: bag === null || bag === void 0 ? void 0 : bag.guidanceMessageTextColor,
+      retryBtn: success === null || success === void 0 ? void 0 : success.retryBtn,
+      doneBtn: success === null || success === void 0 ? void 0 : success.doneBtn,
+      microphoneAccessDenied: micDeniedColors(flowColors, 'faceLiveness', 'idCapture')
+    });
+  }
+  /**
+   * sdk2's video-ID wizard colours (`VideoIdWizardColors`, or VideoIdValidation's
+   * root, the same shape) -> `VideoIdCaptureViewColors`. The guide colours are
+   * theme fields (./themes.ts). The ID stage's loading overlay is the one this
+   * view embeds. A camera denial here is on the front camera, which sdk2's
+   * selfie stage asked for, so that stage's denied colours come first, as for
+   * the microphone.
+   */
+  function mapVideoIdColors(bag) {
+    var _a;
+    var capture = subBag(bag, 'idVideoCapture');
+    var success = subBag(bag, 'success');
+    var idOverlay = subBag(subBag(bag, 'idCapture'), 'loadingOverlay');
+    var faceOverlay = subBag(subBag(bag, 'faceLiveness'), 'loadingOverlay');
+    return compactOrUndefined({
+      readTextDoneBtn: capture === null || capture === void 0 ? void 0 : capture.readTextDoneBtn,
+      retryBtn: success === null || success === void 0 ? void 0 : success.retryBtn,
+      doneBtn: success === null || success === void 0 ? void 0 : success.doneBtn,
+      loadingOverlay: compactOrUndefined({
+        continueBtn: idOverlay === null || idOverlay === void 0 ? void 0 : idOverlay.continueBtn,
+        cameraAccessDenied: (_a = faceOverlay === null || faceOverlay === void 0 ? void 0 : faceOverlay.cameraAccessDenied) !== null && _a !== void 0 ? _a : idOverlay === null || idOverlay === void 0 ? void 0 : idOverlay.cameraAccessDenied
+      }),
+      microphoneAccessDenied: micDeniedColors(bag, 'faceLiveness', 'idCapture')
+    });
+  }
   /**
    * sdk2's `idVideoCapture` and video `success` copy ->
    * `VideoIdCaptureViewVerbiage`. The read-aloud keys are renamed, as
@@ -52676,7 +52767,7 @@
       onExitAfterTamperSealPopped: props.onExitAfterTamperSealPopped,
       verbiage: mapIdVerbiage(props.verbiage),
       classNames: mapIdClassNames(props.classNames),
-      colors: mapIdColors(props.colors),
+      colors: mapIdColors(props.colors, prefixed),
       assets: mapIdViewAssets(props.assets, guideImages)
     });
     return {
@@ -52769,7 +52860,7 @@
       customOverlayContent: props.customOverlayContent,
       verbiage: mapFaceVerbiage(props.verbiage),
       classNames: mapFaceClassNames(props.classNames),
-      colors: mapFaceColors(props.colors),
+      colors: mapFaceColors(props.colors, prefixed),
       assets: mapFaceAssets(props.assets)
     });
     return {
@@ -52910,6 +53001,8 @@
    *   guidesUnsatisfiedColor        -> selfieCapture.guides.unsatisfiedColor
    *   guidanceMessages*Satisfied*   -> guidanceMessages.positive.*
    *   guidanceMessages*Unsatisfied* -> guidanceMessages.default.*
+   *   idVideoCapture.guides*Color   -> idVideoCapture.{faceGuides,idCardGuides}.*
+   *                                    and selfieCapture.guides.*, over guides*
    *
    * The satisfied/unsatisfied split maps onto `positive`/`default` because that
    * is the pair the views actually select between (`IdCaptureView` renders the
@@ -52920,6 +53013,7 @@
    * (`colors.guideBoxSatisfiedColor ?? theme…`, IdCapture.tsx:236-239).
    */
   function themeFromColors(rawColors) {
+    var _a, _b;
     if (!rawColors) return undefined;
     // Same two shapes as the other style bags (see `stageBag` in ./shared.ts):
     // single-stage flows declare these fields FLAT, multi-stage ones nest one
@@ -52954,9 +53048,15 @@
       satisfiedColor: fromId('guideBoxSatisfiedColor'),
       unsatisfiedColor: fromId('guideBoxUnsatisfiedColor')
     });
+    // Only ever nested: no flat flow has a video-ID stage. sdk2 coloured the face
+    // and card guides with the same pair (IdVideoCapture.tsx:608-617), and its
+    // liveness guide too, in place of the face stage's own
+    // (IdVideoCaptureWizard.tsx:357-369). 3.0's video-ID liveness stage is the
+    // flow's selfie stage, so the pair wins the selfie guides.
+    var videoStage = stageColors(rawColors, 'idVideoCapture');
     var guides = stripUndefined({
-      satisfiedColor: fromFace('guidesSatisfiedColor'),
-      unsatisfiedColor: fromFace('guidesUnsatisfiedColor')
+      satisfiedColor: (_a = videoStage.guidesSatisfiedColor) !== null && _a !== void 0 ? _a : fromFace('guidesSatisfiedColor'),
+      unsatisfiedColor: (_b = videoStage.guidesUnsatisfiedColor) !== null && _b !== void 0 ? _b : fromFace('guidesUnsatisfiedColor')
     });
     var positive = stripUndefined({
       backgroundColor: shared('guidanceMessagesSatisfiedBackgroundColor'),
@@ -52966,6 +53066,10 @@
       backgroundColor: shared('guidanceMessagesUnsatisfiedBackgroundColor'),
       textColor: shared('guidanceMessagesUnsatisfiedTextColor')
     });
+    var videoGuides = stripUndefined({
+      satisfiedColor: videoStage.guidesSatisfiedColor,
+      unsatisfiedColor: videoStage.guidesUnsatisfiedColor
+    });
     var out = {};
     if (!isEmptyRecord(guideBox)) out.idCapture = {
       guideBox: guideBox
@@ -52973,6 +53077,12 @@
     if (!isEmptyRecord(guides)) out.selfieCapture = {
       guides: guides
     };
+    if (!isEmptyRecord(videoGuides)) {
+      out.idVideoCapture = {
+        faceGuides: videoGuides,
+        idCardGuides: videoGuides
+      };
+    }
     var guidanceMessages = {};
     if (!isEmptyRecord(positive)) guidanceMessages.positive = positive;
     if (!isEmptyRecord(byDefault)) guidanceMessages["default"] = byDefault;
@@ -53087,7 +53197,10 @@
       activeCopy = _b[1];
     return compactOrUndefined({
       classNames: mapSignatureClassNames(mergeStyleBags(baseClasses, activeClasses)),
-      verbiage: compactOrUndefined(_assign(_assign({}, mapSignatureVerbiage(baseCopy)), mapSignatureVerbiage(activeCopy)))
+      verbiage: compactOrUndefined(_assign(_assign({}, mapSignatureVerbiage(baseCopy)), mapSignatureVerbiage(activeCopy))),
+      // Only the video signature took colours in 2.x; sdk2's still
+      // `SignatureCapture` had no colours prop.
+      colors: props.captureSignature ? undefined : mapSignatureColors(subBag(props.colors, 'videoSignatureCapture'), props.colors)
     });
   }
   /**
@@ -53364,7 +53477,7 @@
   }
   // --- 4. SignatureKYC ------------------------------------------------------
   function mapSignatureKYCProps(props, ctx) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     if (ctx === void 0) {
       ctx = EMPTY_CONTEXT;
     }
@@ -53396,7 +53509,10 @@
       verbiage: mergeStyleBags(compactOrUndefined({
         cameraStoreProvider: subBag(signatureVerbiage, 'cameraStoreProvider')
       }), (_c = signatureVerbiage === null || signatureVerbiage === void 0 ? void 0 : signatureVerbiage.faceLiveness) !== null && _c !== void 0 ? _c : nestedFaceProps.verbiage),
-      assets: (_d = signatureAssets === null || signatureAssets === void 0 ? void 0 : signatureAssets.faceLiveness) !== null && _d !== void 0 ? _d : nestedFaceProps.assets
+      assets: (_d = signatureAssets === null || signatureAssets === void 0 ? void 0 : signatureAssets.faceLiveness) !== null && _d !== void 0 ? _d : nestedFaceProps.assets,
+      // The root bag's `success` is the signature review's, so the face stage
+      // reads only its own.
+      colors: (_e = subBag(props.colors, 'faceLiveness')) !== null && _e !== void 0 ? _e : nestedFaceProps.colors
     });
     var face = mapFaceCapture(faceInputs);
     var nested = props.faceLivenessProps;
@@ -53442,7 +53558,7 @@
         // rather than in the shared mapper: `faceInputs` has already folded the
         // nested `faceLivenessProps` bag in, so a nested `true` is honoured and
         // only a genuinely absent prop falls back to 2.x's `false`.
-        debugShowSamplePoints: (_e = face.view.debugShowSamplePoints) !== null && _e !== void 0 ? _e : false,
+        debugShowSamplePoints: (_f = face.view.debugShowSamplePoints) !== null && _f !== void 0 ? _f : false,
         onExitAfterFailure: typeof faceInputs.onExitAfterFailure === 'function' ? function () {
           var _a, _b;
           return faceInputs.onExitAfterFailure(null, (_b = (_a = ctx.lastLivenessRequest) === null || _a === void 0 ? void 0 : _a.call(ctx)) !== null && _b !== void 0 ? _b : null);
@@ -53492,7 +53608,8 @@
         showCaptureDiagnostics: props.debugMode,
         recordingInterruptedComponent: props.recordingInterruptedComponent,
         classNames: mapSignatureClassNames(signatureClassNames),
-        verbiage: mapSignatureVerbiage(signatureVerbiage)
+        verbiage: mapSignatureVerbiage(signatureVerbiage),
+        colors: mapSignatureColors(props.colors, props.colors)
       }),
       allowVirtualCameras: props.allowVirtualCameras,
       skipLivenessValidation: props.skipLivenessValidation,
@@ -53503,7 +53620,7 @@
       showFaceGuideThenSignaturePad: props.showFaceGuideThenSignaturePad,
       submission: mapSubmission(props),
       theme: mapThemeWithColors(props.theme, props.colors),
-      className: (_f = props.classNames) === null || _f === void 0 ? void 0 : _f.container,
+      className: (_g = props.classNames) === null || _g === void 0 ? void 0 : _g.container,
       geolocationEnabled: props.geolocationEnabled,
       geolocationRequired: props.geolocationRequired,
       captureProgress: props.captureProgress,
@@ -53593,7 +53710,8 @@
         guideImages: props.idCaptureGuideImages,
         onExit: props.onExitCapture,
         classNames: mapVideoIdViewClassNames(props.classNames),
-        verbiage: mapVideoIdViewVerbiage(props.verbiage)
+        verbiage: mapVideoIdViewVerbiage(props.verbiage),
+        colors: mapVideoIdColors(props.colors)
       }),
       // sdk2 spread the verbiage sentence over this prop, so it wins for
       // display; only the prop turns the read-aloud stage on (`readText` above).
@@ -53874,12 +53992,17 @@
     // separate component instances there, but the very same `idView`/`faceView`
     // here, because `buildVideoIdSteps` reuses them. Folding the wrapper in
     // before the stage mappers run is what gives those sub-bags a destination;
-    // see `mergeStyleBags` for why it merges rather than overriding.
+    // see `mergeStyleBags` for why it merges rather than overriding. With video
+    // ID off (false or unset) the wrapper's wizard never runs, so its bags do not
+    // apply; an async `captureVideoId` might, so they merge.
+    var videoBag = function videoBag(bag) {
+      return props.captureVideoId ? subBag(bag, 'videoIdCapture') : undefined;
+    };
     var styled = _assign(_assign({}, props), {
-      classNames: mergeStyleBags(props.classNames, subBag(props.classNames, 'videoIdCapture')),
-      verbiage: mergeStyleBags(props.verbiage, subBag(props.verbiage, 'videoIdCapture')),
-      assets: mergeStyleBags(props.assets, subBag(props.assets, 'videoIdCapture')),
-      colors: mergeStyleBags(props.colors, subBag(props.colors, 'videoIdCapture'))
+      classNames: mergeStyleBags(props.classNames, videoBag(props.classNames)),
+      verbiage: mergeStyleBags(props.verbiage, videoBag(props.verbiage)),
+      assets: mergeStyleBags(props.assets, videoBag(props.assets)),
+      colors: mergeStyleBags(props.colors, videoBag(props.colors))
     });
     var id = mapIdCapture(styled, true);
     var face = mapFaceCapture(styled, true);
@@ -53917,7 +54040,8 @@
       })),
       videoIdView: compactOrUndefined({
         classNames: mapVideoIdViewClassNames(subBag(props.classNames, 'videoIdCapture')),
-        verbiage: mapVideoIdViewVerbiage(subBag(props.verbiage, 'videoIdCapture'))
+        verbiage: mapVideoIdViewVerbiage(subBag(props.verbiage, 'videoIdCapture')),
+        colors: mapVideoIdColors(subBag(props.colors, 'videoIdCapture'))
       }),
       captureSignature: props.captureSignature,
       captureSignatureVideo: props.captureSignatureVideo,
@@ -53926,7 +54050,7 @@
         enrollmentId: props.enrollmentId
       }),
       initialArtifacts: mapInitialArtifacts(props),
-      theme: mapThemeWithColors(props.theme, props.colors),
+      theme: mapThemeWithColors(props.theme, styled.colors),
       className: (_b = props.classNames) === null || _b === void 0 ? void 0 : _b.container,
       ringScreenClassNames: mapRingScreenClassNames(props.classNames),
       additionalDocumentClassNames: mapAdditionalDocumentClassNames(props.classNames),
@@ -53949,7 +54073,7 @@
     });
   }
 
-  var webSdkVersion = '2.5.78';
+  var webSdkVersion = '2.5.79-react16compat.0';
 
   // GENERATED by scripts/styleBagTypes.mjs from
   // src/__fixtures__/sdk2StyleBags.json and the mapper sweep — do not
@@ -55300,13 +55424,7 @@
         "videoSignatureCapture.cameraStoreProvider": 2
       },
       "colors": {
-        "loadingOverlay.microphoneAccessDenied": 2,
-        "success": 2,
-        "fallback": 2,
-        "videoSignatureCapture.guidanceMessageBackgroundColor": 2,
-        "videoSignatureCapture.guidanceMessageTextColor": 2,
-        "videoSignatureCapture.faceLiveness": 0,
-        "videoSignatureCapture.success": 2
+        "videoSignatureCapture.faceLiveness": 0
       }
     },
     "FaceValidation": {
@@ -55320,7 +55438,7 @@
         "successScreen": 2
       },
       "colors": {
-        "loadingOverlay.microphoneAccessDenied": 2
+        "loadingOverlay.microphoneAccessDenied": 1
       }
     },
     "IdAndFaceValidation": {
@@ -55351,14 +55469,7 @@
         "videoSignatureCapture.cameraStoreProvider": 2
       },
       "colors": {
-        "idCapture.loadingOverlay.microphoneAccessDenied": 2,
-        "idCapture.success": 2,
-        "idCapture.fallback": 2,
-        "faceLiveness.loadingOverlay.microphoneAccessDenied": 2,
-        "videoSignatureCapture.guidanceMessageBackgroundColor": 2,
-        "videoSignatureCapture.guidanceMessageTextColor": 2,
-        "videoSignatureCapture.faceLiveness": 0,
-        "videoSignatureCapture.success": 2
+        "videoSignatureCapture.faceLiveness": 0
       }
     },
     "SignatureKYC": {
@@ -55377,11 +55488,6 @@
       "verbiage": {
         "finishingScreen": 2,
         "successScreen": 2
-      },
-      "colors": {
-        "guidanceMessageBackgroundColor": 2,
-        "guidanceMessageTextColor": 2,
-        "faceLiveness.loadingOverlay.microphoneAccessDenied": 2
       }
     },
     "VideoIdValidation": {
@@ -55421,15 +55527,7 @@
         "videoSignatureCapture.cameraStoreProvider": 2
       },
       "colors": {
-        "idCapture.loadingOverlay.microphoneAccessDenied": 2,
-        "idCapture.success": 2,
-        "idCapture.fallback": 2,
-        "faceLiveness.loadingOverlay.microphoneAccessDenied": 2,
-        "idVideoCapture": 2,
-        "videoSignatureCapture.guidanceMessageBackgroundColor": 2,
-        "videoSignatureCapture.guidanceMessageTextColor": 2,
-        "videoSignatureCapture.faceLiveness": 0,
-        "videoSignatureCapture.success": 2
+        "videoSignatureCapture.faceLiveness": 0
       }
     },
     "CustomerBiometricsEnrollment": {
@@ -55452,11 +55550,7 @@
         "videoSignatureCapture.cameraStoreProvider": 2
       },
       "colors": {
-        "faceLiveness.loadingOverlay.microphoneAccessDenied": 2,
-        "videoSignatureCapture.guidanceMessageBackgroundColor": 2,
-        "videoSignatureCapture.guidanceMessageTextColor": 2,
-        "videoSignatureCapture.faceLiveness": 0,
-        "videoSignatureCapture.success": 2
+        "videoSignatureCapture.faceLiveness": 0
       }
     },
     "CustomerIdAndBiometricsEnrollment": {
@@ -55506,31 +55600,7 @@
         "videoSignatureCapture.cameraStoreProvider": 2
       },
       "colors": {
-        "idCapture.loadingOverlay.microphoneAccessDenied": 2,
-        "idCapture.success": 2,
-        "idCapture.fallback": 2,
-        "faceLiveness.loadingOverlay.microphoneAccessDenied": 2,
-        "videoIdCapture.idCapture.guideBoxUnsatisfiedColor": 2,
-        "videoIdCapture.idCapture.guideBoxSatisfiedColor": 2,
-        "videoIdCapture.idCapture.guidanceMessagesSatisfiedBackgroundColor": 2,
-        "videoIdCapture.idCapture.guidanceMessagesUnsatisfiedBackgroundColor": 2,
-        "videoIdCapture.idCapture.guidanceMessagesSatisfiedTextColor": 2,
-        "videoIdCapture.idCapture.guidanceMessagesUnsatisfiedTextColor": 2,
-        "videoIdCapture.idCapture.loadingOverlay.microphoneAccessDenied": 2,
-        "videoIdCapture.idCapture.success": 2,
-        "videoIdCapture.idCapture.fallback": 2,
-        "videoIdCapture.faceLiveness.guidesUnsatisfiedColor": 2,
-        "videoIdCapture.faceLiveness.guidesSatisfiedColor": 2,
-        "videoIdCapture.faceLiveness.guidanceMessagesSatisfiedBackgroundColor": 2,
-        "videoIdCapture.faceLiveness.guidanceMessagesUnsatisfiedBackgroundColor": 2,
-        "videoIdCapture.faceLiveness.guidanceMessagesSatisfiedTextColor": 2,
-        "videoIdCapture.faceLiveness.guidanceMessagesUnsatisfiedTextColor": 2,
-        "videoIdCapture.faceLiveness.loadingOverlay.microphoneAccessDenied": 2,
-        "videoIdCapture.idVideoCapture": 2,
-        "videoSignatureCapture.guidanceMessageBackgroundColor": 2,
-        "videoSignatureCapture.guidanceMessageTextColor": 2,
-        "videoSignatureCapture.faceLiveness": 0,
-        "videoSignatureCapture.success": 2
+        "videoSignatureCapture.faceLiveness": 0
       }
     }
   };
@@ -55759,12 +55829,11 @@
    *   - guide-box / guide / guidance-message colours become theme overrides
    *     (`mapThemeWithColors`, ./themes.ts), merged over whatever `theme` the
    *     caller also passed, with the colours winning exactly as in 2.x;
-   *   - per-screen BUTTON colours reach the view bags `IdCaptureView.colors` /
-   *     `FaceLivenessView.colors` (`mapIdColors`/`mapFaceColors`, ./shared.ts).
+   *   - per-screen BUTTON colours reach each view's `colors` bag (the
+   *     `map*Colors` mappers in ./shared.ts).
    *
-   * The leaves with no 3.0 screen — sdk2's fallback screen, and the ReviewScreen
-   * buttons 3.0 colours by `variant` off `theme.buttons` — are recorded in
-   * `__fixtures__/dispositions.md` rather than silently implied to work.
+   * The leaves no 3.0 screen renders are in the colours ledger
+   * (./styleBagLedger.ts), and so in the docs tables and the style-key warnings.
    */
   var STYLE_WITH_ASSETS = {
     assets: MAPPED,
@@ -56607,6 +56676,25 @@
     }, mapCustomerIdAndBiometricsEnrollmentProps(props, ctx)), props.children);
   };
 
+  /**
+   * react-16-compat: React 16/17 have no `createRoot`, so this adapts the legacy
+   * `ReactDOM.render` API to the root shape the rest of this module expects.
+   * Keeping that shape means the teardown logic below stays byte-identical to
+   * develop and merges cleanly. Runs on React 16.14 through 18; React 19
+   * removed `ReactDOM.render`, which is why this build's peer range stops at 18.
+   */
+  function createRoot(container) {
+    return {
+      render: function render(element) {
+        // eslint-disable-next-line react/no-deprecated -- the only mount API React 16 has
+        ReactDOM.render(element, container);
+      },
+      unmount: function unmount() {
+        // eslint-disable-next-line react/no-deprecated -- pairs with ReactDOM.render above
+        ReactDOM.unmountComponentAtNode(container);
+      }
+    };
+  }
   /**
    * Targets whose `remove` this module has already wrapped. Permanent: the
    * wrapper is installed at most once per element, so repeat renders can never
@@ -56634,8 +56722,7 @@
       targetElement = document.createElement('div');
       document.body.append(targetElement);
     }
-    var root = ReactDOM.createRoot(targetElement);
-    root.render(/*#__PURE__*/React.createElement(OverlayContainer, null, component));
+    var root = createRoot(targetElement);
     if ('remove' in targetElement) {
       var element_1 = targetElement;
       // Always point at the newest root, even when the wrapper is already
@@ -56685,6 +56772,10 @@
         };
       }
     }
+    // react-16-compat: render LAST. A legacy root mounts synchronously, so layout
+    // effects (e.g. a customer `loadingSpinner`) run inside this call; one that
+    // calls `.remove()` must already hit the wrapper above, not the native method.
+    root.render(/*#__PURE__*/React.createElement(OverlayContainer, null, component));
     return targetElement;
   }
   function renderComponent(Component, targetElement, options) {