idmission-web-sdk 2.2.34 → 2.2.36

package/dist/sdk2.cjs.development.js

@@ -9,10 +9,12 @@ var tusJsClient = require('tus-js-client');
 var SparkMD5 = require('spark-md5');
 var useResizeObserver = require('use-resize-observer');
 var tasksVision = require('@mediapipe/tasks-vision');
+var zustand = require('zustand');
 var useDebounce = require('use-debounce');
 var reactDom = require('react-dom');
 var LanguageDetector = require('i18next-browser-languagedetector');
 var i18n = require('i18next');
+var shallow = require('zustand/react/shallow');
 var SignatureCanvas = require('react-signature-canvas');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -232,7 +234,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var webSdkVersion = '2.2.34';
+var webSdkVersion = '2.2.36';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -393,7 +395,7 @@ function videoDataUrlToB64(url) {
   });
 }
 
-var PageContainerDiv = styled__default.default.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  ", "\n\n  ", "\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"], ["\n  ", "\n\n  ", "\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"])), function (props) {
+var PageContainerDiv = styled__default.default.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n  ", "\n\n  ", "\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"], ["\n  ", "\n\n  ", "\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"])), function (props) {
   var _a;
   return props.theme.isFullscreen === false ? "" : "\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: var(--app-width);\n    height: calc(\n      var(--app-height) - ".concat((_a = props.$heightOffset) !== null && _a !== void 0 ? _a : 0, "px\n    );\n    overflow-x: hidden;\n    overflow-y: auto;\n  ");
 }, function (props) {
@@ -433,7 +435,7 @@ var PageContainer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }, dimensionsCalculated && children);
 });
 PageContainer.displayName = 'PageContainer';
-var templateObject_1$J;
+var templateObject_1$L;
 
 var LoaderButton = function LoaderButton(_a) {
   var children = _a.children,
@@ -492,30 +494,30 @@ var LoaderButton = function LoaderButton(_a) {
     className: "ladda-label"
   }, children));
 };
-var StyledButton = styled__default.default.button(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  ", "\n\n  /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n\n  position: relative;\n\n  .ladda-spinner {\n    position: absolute;\n    z-index: 2;\n    display: inline-block;\n    width: 32px;\n    top: 50%;\n    margin-top: 0;\n    opacity: 0;\n    pointer-events: none;\n  }\n  .ladda-label {\n    position: relative;\n    z-index: 3;\n  }\n  .ladda-progress {\n    position: absolute;\n    width: 0;\n    height: 100%;\n    left: 0;\n    top: 0;\n    background: rgba(0, 0, 0, 0.2);\n    display: none;\n    transition: 0.1s linear all !important;\n  }\n  &[data-loading] .ladda-progress {\n    display: block;\n  }\n\n  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n  .ladda-spinner,\n  .ladda-label {\n    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n  }\n  &[data-style='zoom-in'],\n  &[data-style='zoom-in'] .ladda-spinner,\n  &[data-style='zoom-in'] .ladda-label,\n  &[data-style='zoom-out'],\n  &[data-style='zoom-out'] .ladda-spinner,\n  &[data-style='zoom-out'] .ladda-label {\n    transition: 0.3s ease all !important;\n  }\n  &[data-style='expand-right'] .ladda-spinner {\n    right: -6px;\n  }\n  &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n  &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n    right: -12px;\n  }\n  &[data-style='expand-right'][data-loading] {\n    padding-right: 56px;\n  }\n  &[data-style='expand-right'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='expand-right'][data-loading][data-size='s'],\n  &[data-style='expand-right'][data-loading][data-size='xs'] {\n    padding-right: 40px;\n  }\n  &[data-style='expand-left'] .ladda-spinner {\n    left: 26px;\n  }\n  &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n  &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n    left: 4px;\n  }\n  &[data-style='expand-left'][data-loading] {\n    padding-left: 56px;\n  }\n  &[data-style='expand-left'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='expand-left'][data-loading][data-size='s'],\n  &[data-style='expand-left'][data-loading][data-size='xs'] {\n    padding-left: 40px;\n  }\n  &[data-style='expand-up'] {\n    overflow: hidden;\n  }\n  &[data-style='expand-up'] .ladda-spinner {\n    top: -32px;\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='expand-up'][data-loading] {\n    padding-top: 54px;\n  }\n  &[data-style='expand-up'][data-loading] .ladda-spinner {\n    opacity: 1;\n    top: 26px;\n    margin-top: 0;\n  }\n  &[data-style='expand-up'][data-loading][data-size='s'],\n  &[data-style='expand-up'][data-loading][data-size='xs'] {\n    padding-top: 32px;\n  }\n  &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n  &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n    top: 4px;\n  }\n  &[data-style='expand-down'] {\n    overflow: hidden;\n  }\n  &[data-style='expand-down'] .ladda-spinner {\n    top: 62px;\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n  &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n    top: 40px;\n  }\n  &[data-style='expand-down'][data-loading] {\n    padding-bottom: 54px;\n  }\n  &[data-style='expand-down'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='expand-down'][data-loading][data-size='s'],\n  &[data-style='expand-down'][data-loading][data-size='xs'] {\n    padding-bottom: 32px;\n  }\n  &[data-style='slide-left'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-left'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-left'] .ladda-spinner {\n    left: 100%;\n    margin-left: 0;\n  }\n  &[data-style='slide-left'][data-loading] .ladda-label {\n    opacity: 0;\n    left: -100%;\n  }\n  &[data-style='slide-left'][data-loading] .ladda-spinner {\n    opacity: 1;\n    left: 50%;\n  }\n  &[data-style='slide-right'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-right'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-right'] .ladda-spinner {\n    right: 100%;\n    margin-left: 0;\n    left: 16px;\n  }\n  [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n    right: auto;\n  }\n  &[data-style='slide-right'][data-loading] .ladda-label {\n    opacity: 0;\n    left: 100%;\n  }\n  &[data-style='slide-right'][data-loading] .ladda-spinner {\n    opacity: 1;\n    left: 50%;\n  }\n  &[data-style='slide-up'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-up'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-up'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n    margin-top: 1em;\n  }\n  &[data-style='slide-up'][data-loading] .ladda-label {\n    opacity: 0;\n    top: -1em;\n  }\n  &[data-style='slide-up'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-top: 0;\n  }\n  &[data-style='slide-down'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-down'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-down'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n    margin-top: -2em;\n  }\n  &[data-style='slide-down'][data-loading] .ladda-label {\n    opacity: 0;\n    top: 1em;\n  }\n  &[data-style='slide-down'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-top: 0;\n  }\n  &[data-style='zoom-out'] {\n    overflow: hidden;\n  }\n  &[data-style='zoom-out'] .ladda-spinner {\n    left: 50%;\n    margin-left: 32px;\n    transform: scale(2.5);\n  }\n  &[data-style='zoom-out'] .ladda-label {\n    position: relative;\n    display: inline-block;\n  }\n  &[data-style='zoom-out'][data-loading] .ladda-label {\n    opacity: 0;\n    transform: scale(0.5);\n  }\n  &[data-style='zoom-out'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-left: 0;\n    transform: none;\n  }\n  &[data-style='zoom-in'] {\n    overflow: hidden;\n  }\n  &[data-style='zoom-in'] .ladda-spinner {\n    left: 50%;\n    margin-left: -16px;\n    transform: scale(0.2);\n  }\n  &[data-style='zoom-in'] .ladda-label {\n    position: relative;\n    display: inline-block;\n  }\n  &[data-style='zoom-in'][data-loading] .ladda-label {\n    opacity: 0;\n    transform: scale(2.2);\n  }\n  &[data-style='zoom-in'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-left: 0;\n    transform: none;\n  }\n  &[data-style='contract'] {\n    overflow: hidden;\n    width: 100px;\n  }\n  &[data-style='contract'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='contract'][data-loading] {\n    border-radius: 50%;\n    width: 52px;\n  }\n  &[data-style='contract'][data-loading] .ladda-label {\n    opacity: 0;\n  }\n  &[data-style='contract'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='contract-overlay'] {\n    overflow: hidden;\n    width: 100px;\n    box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n  }\n  &[data-style='contract-overlay'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='contract-overlay'][data-loading] {\n    border-radius: 50%;\n    width: 52px;\n    box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n  }\n  &[data-style='contract-overlay'][data-loading] .ladda-label {\n    opacity: 0;\n  }\n  &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  [dir='rtl'] .ladda-spinner > div {\n    left: 25% !important;\n  }\n"], ["\n  ", "\n\n  /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n\n  position: relative;\n\n  .ladda-spinner {\n    position: absolute;\n    z-index: 2;\n    display: inline-block;\n    width: 32px;\n    top: 50%;\n    margin-top: 0;\n    opacity: 0;\n    pointer-events: none;\n  }\n  .ladda-label {\n    position: relative;\n    z-index: 3;\n  }\n  .ladda-progress {\n    position: absolute;\n    width: 0;\n    height: 100%;\n    left: 0;\n    top: 0;\n    background: rgba(0, 0, 0, 0.2);\n    display: none;\n    transition: 0.1s linear all !important;\n  }\n  &[data-loading] .ladda-progress {\n    display: block;\n  }\n\n  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n  .ladda-spinner,\n  .ladda-label {\n    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n  }\n  &[data-style='zoom-in'],\n  &[data-style='zoom-in'] .ladda-spinner,\n  &[data-style='zoom-in'] .ladda-label,\n  &[data-style='zoom-out'],\n  &[data-style='zoom-out'] .ladda-spinner,\n  &[data-style='zoom-out'] .ladda-label {\n    transition: 0.3s ease all !important;\n  }\n  &[data-style='expand-right'] .ladda-spinner {\n    right: -6px;\n  }\n  &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n  &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n    right: -12px;\n  }\n  &[data-style='expand-right'][data-loading] {\n    padding-right: 56px;\n  }\n  &[data-style='expand-right'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='expand-right'][data-loading][data-size='s'],\n  &[data-style='expand-right'][data-loading][data-size='xs'] {\n    padding-right: 40px;\n  }\n  &[data-style='expand-left'] .ladda-spinner {\n    left: 26px;\n  }\n  &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n  &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n    left: 4px;\n  }\n  &[data-style='expand-left'][data-loading] {\n    padding-left: 56px;\n  }\n  &[data-style='expand-left'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='expand-left'][data-loading][data-size='s'],\n  &[data-style='expand-left'][data-loading][data-size='xs'] {\n    padding-left: 40px;\n  }\n  &[data-style='expand-up'] {\n    overflow: hidden;\n  }\n  &[data-style='expand-up'] .ladda-spinner {\n    top: -32px;\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='expand-up'][data-loading] {\n    padding-top: 54px;\n  }\n  &[data-style='expand-up'][data-loading] .ladda-spinner {\n    opacity: 1;\n    top: 26px;\n    margin-top: 0;\n  }\n  &[data-style='expand-up'][data-loading][data-size='s'],\n  &[data-style='expand-up'][data-loading][data-size='xs'] {\n    padding-top: 32px;\n  }\n  &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n  &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n    top: 4px;\n  }\n  &[data-style='expand-down'] {\n    overflow: hidden;\n  }\n  &[data-style='expand-down'] .ladda-spinner {\n    top: 62px;\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n  &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n    top: 40px;\n  }\n  &[data-style='expand-down'][data-loading] {\n    padding-bottom: 54px;\n  }\n  &[data-style='expand-down'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='expand-down'][data-loading][data-size='s'],\n  &[data-style='expand-down'][data-loading][data-size='xs'] {\n    padding-bottom: 32px;\n  }\n  &[data-style='slide-left'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-left'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-left'] .ladda-spinner {\n    left: 100%;\n    margin-left: 0;\n  }\n  &[data-style='slide-left'][data-loading] .ladda-label {\n    opacity: 0;\n    left: -100%;\n  }\n  &[data-style='slide-left'][data-loading] .ladda-spinner {\n    opacity: 1;\n    left: 50%;\n  }\n  &[data-style='slide-right'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-right'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-right'] .ladda-spinner {\n    right: 100%;\n    margin-left: 0;\n    left: 16px;\n  }\n  [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n    right: auto;\n  }\n  &[data-style='slide-right'][data-loading] .ladda-label {\n    opacity: 0;\n    left: 100%;\n  }\n  &[data-style='slide-right'][data-loading] .ladda-spinner {\n    opacity: 1;\n    left: 50%;\n  }\n  &[data-style='slide-up'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-up'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-up'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n    margin-top: 1em;\n  }\n  &[data-style='slide-up'][data-loading] .ladda-label {\n    opacity: 0;\n    top: -1em;\n  }\n  &[data-style='slide-up'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-top: 0;\n  }\n  &[data-style='slide-down'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-down'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-down'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n    margin-top: -2em;\n  }\n  &[data-style='slide-down'][data-loading] .ladda-label {\n    opacity: 0;\n    top: 1em;\n  }\n  &[data-style='slide-down'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-top: 0;\n  }\n  &[data-style='zoom-out'] {\n    overflow: hidden;\n  }\n  &[data-style='zoom-out'] .ladda-spinner {\n    left: 50%;\n    margin-left: 32px;\n    transform: scale(2.5);\n  }\n  &[data-style='zoom-out'] .ladda-label {\n    position: relative;\n    display: inline-block;\n  }\n  &[data-style='zoom-out'][data-loading] .ladda-label {\n    opacity: 0;\n    transform: scale(0.5);\n  }\n  &[data-style='zoom-out'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-left: 0;\n    transform: none;\n  }\n  &[data-style='zoom-in'] {\n    overflow: hidden;\n  }\n  &[data-style='zoom-in'] .ladda-spinner {\n    left: 50%;\n    margin-left: -16px;\n    transform: scale(0.2);\n  }\n  &[data-style='zoom-in'] .ladda-label {\n    position: relative;\n    display: inline-block;\n  }\n  &[data-style='zoom-in'][data-loading] .ladda-label {\n    opacity: 0;\n    transform: scale(2.2);\n  }\n  &[data-style='zoom-in'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-left: 0;\n    transform: none;\n  }\n  &[data-style='contract'] {\n    overflow: hidden;\n    width: 100px;\n  }\n  &[data-style='contract'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='contract'][data-loading] {\n    border-radius: 50%;\n    width: 52px;\n  }\n  &[data-style='contract'][data-loading] .ladda-label {\n    opacity: 0;\n  }\n  &[data-style='contract'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='contract-overlay'] {\n    overflow: hidden;\n    width: 100px;\n    box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n  }\n  &[data-style='contract-overlay'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='contract-overlay'][data-loading] {\n    border-radius: 50%;\n    width: 52px;\n    box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n  }\n  &[data-style='contract-overlay'][data-loading] .ladda-label {\n    opacity: 0;\n  }\n  &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  [dir='rtl'] .ladda-spinner > div {\n    left: 25% !important;\n  }\n"])), function (props) {
+var StyledButton = styled__default.default.button(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  ", "\n\n  /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n\n  position: relative;\n\n  .ladda-spinner {\n    position: absolute;\n    z-index: 2;\n    display: inline-block;\n    width: 32px;\n    top: 50%;\n    margin-top: 0;\n    opacity: 0;\n    pointer-events: none;\n  }\n  .ladda-label {\n    position: relative;\n    z-index: 3;\n  }\n  .ladda-progress {\n    position: absolute;\n    width: 0;\n    height: 100%;\n    left: 0;\n    top: 0;\n    background: rgba(0, 0, 0, 0.2);\n    display: none;\n    transition: 0.1s linear all !important;\n  }\n  &[data-loading] .ladda-progress {\n    display: block;\n  }\n\n  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n  .ladda-spinner,\n  .ladda-label {\n    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n  }\n  &[data-style='zoom-in'],\n  &[data-style='zoom-in'] .ladda-spinner,\n  &[data-style='zoom-in'] .ladda-label,\n  &[data-style='zoom-out'],\n  &[data-style='zoom-out'] .ladda-spinner,\n  &[data-style='zoom-out'] .ladda-label {\n    transition: 0.3s ease all !important;\n  }\n  &[data-style='expand-right'] .ladda-spinner {\n    right: -6px;\n  }\n  &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n  &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n    right: -12px;\n  }\n  &[data-style='expand-right'][data-loading] {\n    padding-right: 56px;\n  }\n  &[data-style='expand-right'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='expand-right'][data-loading][data-size='s'],\n  &[data-style='expand-right'][data-loading][data-size='xs'] {\n    padding-right: 40px;\n  }\n  &[data-style='expand-left'] .ladda-spinner {\n    left: 26px;\n  }\n  &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n  &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n    left: 4px;\n  }\n  &[data-style='expand-left'][data-loading] {\n    padding-left: 56px;\n  }\n  &[data-style='expand-left'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='expand-left'][data-loading][data-size='s'],\n  &[data-style='expand-left'][data-loading][data-size='xs'] {\n    padding-left: 40px;\n  }\n  &[data-style='expand-up'] {\n    overflow: hidden;\n  }\n  &[data-style='expand-up'] .ladda-spinner {\n    top: -32px;\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='expand-up'][data-loading] {\n    padding-top: 54px;\n  }\n  &[data-style='expand-up'][data-loading] .ladda-spinner {\n    opacity: 1;\n    top: 26px;\n    margin-top: 0;\n  }\n  &[data-style='expand-up'][data-loading][data-size='s'],\n  &[data-style='expand-up'][data-loading][data-size='xs'] {\n    padding-top: 32px;\n  }\n  &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n  &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n    top: 4px;\n  }\n  &[data-style='expand-down'] {\n    overflow: hidden;\n  }\n  &[data-style='expand-down'] .ladda-spinner {\n    top: 62px;\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n  &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n    top: 40px;\n  }\n  &[data-style='expand-down'][data-loading] {\n    padding-bottom: 54px;\n  }\n  &[data-style='expand-down'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='expand-down'][data-loading][data-size='s'],\n  &[data-style='expand-down'][data-loading][data-size='xs'] {\n    padding-bottom: 32px;\n  }\n  &[data-style='slide-left'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-left'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-left'] .ladda-spinner {\n    left: 100%;\n    margin-left: 0;\n  }\n  &[data-style='slide-left'][data-loading] .ladda-label {\n    opacity: 0;\n    left: -100%;\n  }\n  &[data-style='slide-left'][data-loading] .ladda-spinner {\n    opacity: 1;\n    left: 50%;\n  }\n  &[data-style='slide-right'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-right'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-right'] .ladda-spinner {\n    right: 100%;\n    margin-left: 0;\n    left: 16px;\n  }\n  [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n    right: auto;\n  }\n  &[data-style='slide-right'][data-loading] .ladda-label {\n    opacity: 0;\n    left: 100%;\n  }\n  &[data-style='slide-right'][data-loading] .ladda-spinner {\n    opacity: 1;\n    left: 50%;\n  }\n  &[data-style='slide-up'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-up'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-up'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n    margin-top: 1em;\n  }\n  &[data-style='slide-up'][data-loading] .ladda-label {\n    opacity: 0;\n    top: -1em;\n  }\n  &[data-style='slide-up'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-top: 0;\n  }\n  &[data-style='slide-down'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-down'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-down'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n    margin-top: -2em;\n  }\n  &[data-style='slide-down'][data-loading] .ladda-label {\n    opacity: 0;\n    top: 1em;\n  }\n  &[data-style='slide-down'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-top: 0;\n  }\n  &[data-style='zoom-out'] {\n    overflow: hidden;\n  }\n  &[data-style='zoom-out'] .ladda-spinner {\n    left: 50%;\n    margin-left: 32px;\n    transform: scale(2.5);\n  }\n  &[data-style='zoom-out'] .ladda-label {\n    position: relative;\n    display: inline-block;\n  }\n  &[data-style='zoom-out'][data-loading] .ladda-label {\n    opacity: 0;\n    transform: scale(0.5);\n  }\n  &[data-style='zoom-out'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-left: 0;\n    transform: none;\n  }\n  &[data-style='zoom-in'] {\n    overflow: hidden;\n  }\n  &[data-style='zoom-in'] .ladda-spinner {\n    left: 50%;\n    margin-left: -16px;\n    transform: scale(0.2);\n  }\n  &[data-style='zoom-in'] .ladda-label {\n    position: relative;\n    display: inline-block;\n  }\n  &[data-style='zoom-in'][data-loading] .ladda-label {\n    opacity: 0;\n    transform: scale(2.2);\n  }\n  &[data-style='zoom-in'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-left: 0;\n    transform: none;\n  }\n  &[data-style='contract'] {\n    overflow: hidden;\n    width: 100px;\n  }\n  &[data-style='contract'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='contract'][data-loading] {\n    border-radius: 50%;\n    width: 52px;\n  }\n  &[data-style='contract'][data-loading] .ladda-label {\n    opacity: 0;\n  }\n  &[data-style='contract'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='contract-overlay'] {\n    overflow: hidden;\n    width: 100px;\n    box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n  }\n  &[data-style='contract-overlay'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='contract-overlay'][data-loading] {\n    border-radius: 50%;\n    width: 52px;\n    box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n  }\n  &[data-style='contract-overlay'][data-loading] .ladda-label {\n    opacity: 0;\n  }\n  &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  [dir='rtl'] .ladda-spinner > div {\n    left: 25% !important;\n  }\n"], ["\n  ", "\n\n  /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n\n  position: relative;\n\n  .ladda-spinner {\n    position: absolute;\n    z-index: 2;\n    display: inline-block;\n    width: 32px;\n    top: 50%;\n    margin-top: 0;\n    opacity: 0;\n    pointer-events: none;\n  }\n  .ladda-label {\n    position: relative;\n    z-index: 3;\n  }\n  .ladda-progress {\n    position: absolute;\n    width: 0;\n    height: 100%;\n    left: 0;\n    top: 0;\n    background: rgba(0, 0, 0, 0.2);\n    display: none;\n    transition: 0.1s linear all !important;\n  }\n  &[data-loading] .ladda-progress {\n    display: block;\n  }\n\n  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n  .ladda-spinner,\n  .ladda-label {\n    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n  }\n  &[data-style='zoom-in'],\n  &[data-style='zoom-in'] .ladda-spinner,\n  &[data-style='zoom-in'] .ladda-label,\n  &[data-style='zoom-out'],\n  &[data-style='zoom-out'] .ladda-spinner,\n  &[data-style='zoom-out'] .ladda-label {\n    transition: 0.3s ease all !important;\n  }\n  &[data-style='expand-right'] .ladda-spinner {\n    right: -6px;\n  }\n  &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n  &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n    right: -12px;\n  }\n  &[data-style='expand-right'][data-loading] {\n    padding-right: 56px;\n  }\n  &[data-style='expand-right'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='expand-right'][data-loading][data-size='s'],\n  &[data-style='expand-right'][data-loading][data-size='xs'] {\n    padding-right: 40px;\n  }\n  &[data-style='expand-left'] .ladda-spinner {\n    left: 26px;\n  }\n  &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n  &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n    left: 4px;\n  }\n  &[data-style='expand-left'][data-loading] {\n    padding-left: 56px;\n  }\n  &[data-style='expand-left'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='expand-left'][data-loading][data-size='s'],\n  &[data-style='expand-left'][data-loading][data-size='xs'] {\n    padding-left: 40px;\n  }\n  &[data-style='expand-up'] {\n    overflow: hidden;\n  }\n  &[data-style='expand-up'] .ladda-spinner {\n    top: -32px;\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='expand-up'][data-loading] {\n    padding-top: 54px;\n  }\n  &[data-style='expand-up'][data-loading] .ladda-spinner {\n    opacity: 1;\n    top: 26px;\n    margin-top: 0;\n  }\n  &[data-style='expand-up'][data-loading][data-size='s'],\n  &[data-style='expand-up'][data-loading][data-size='xs'] {\n    padding-top: 32px;\n  }\n  &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n  &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n    top: 4px;\n  }\n  &[data-style='expand-down'] {\n    overflow: hidden;\n  }\n  &[data-style='expand-down'] .ladda-spinner {\n    top: 62px;\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n  &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n    top: 40px;\n  }\n  &[data-style='expand-down'][data-loading] {\n    padding-bottom: 54px;\n  }\n  &[data-style='expand-down'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='expand-down'][data-loading][data-size='s'],\n  &[data-style='expand-down'][data-loading][data-size='xs'] {\n    padding-bottom: 32px;\n  }\n  &[data-style='slide-left'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-left'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-left'] .ladda-spinner {\n    left: 100%;\n    margin-left: 0;\n  }\n  &[data-style='slide-left'][data-loading] .ladda-label {\n    opacity: 0;\n    left: -100%;\n  }\n  &[data-style='slide-left'][data-loading] .ladda-spinner {\n    opacity: 1;\n    left: 50%;\n  }\n  &[data-style='slide-right'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-right'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-right'] .ladda-spinner {\n    right: 100%;\n    margin-left: 0;\n    left: 16px;\n  }\n  [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n    right: auto;\n  }\n  &[data-style='slide-right'][data-loading] .ladda-label {\n    opacity: 0;\n    left: 100%;\n  }\n  &[data-style='slide-right'][data-loading] .ladda-spinner {\n    opacity: 1;\n    left: 50%;\n  }\n  &[data-style='slide-up'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-up'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-up'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n    margin-top: 1em;\n  }\n  &[data-style='slide-up'][data-loading] .ladda-label {\n    opacity: 0;\n    top: -1em;\n  }\n  &[data-style='slide-up'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-top: 0;\n  }\n  &[data-style='slide-down'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-down'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-down'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n    margin-top: -2em;\n  }\n  &[data-style='slide-down'][data-loading] .ladda-label {\n    opacity: 0;\n    top: 1em;\n  }\n  &[data-style='slide-down'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-top: 0;\n  }\n  &[data-style='zoom-out'] {\n    overflow: hidden;\n  }\n  &[data-style='zoom-out'] .ladda-spinner {\n    left: 50%;\n    margin-left: 32px;\n    transform: scale(2.5);\n  }\n  &[data-style='zoom-out'] .ladda-label {\n    position: relative;\n    display: inline-block;\n  }\n  &[data-style='zoom-out'][data-loading] .ladda-label {\n    opacity: 0;\n    transform: scale(0.5);\n  }\n  &[data-style='zoom-out'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-left: 0;\n    transform: none;\n  }\n  &[data-style='zoom-in'] {\n    overflow: hidden;\n  }\n  &[data-style='zoom-in'] .ladda-spinner {\n    left: 50%;\n    margin-left: -16px;\n    transform: scale(0.2);\n  }\n  &[data-style='zoom-in'] .ladda-label {\n    position: relative;\n    display: inline-block;\n  }\n  &[data-style='zoom-in'][data-loading] .ladda-label {\n    opacity: 0;\n    transform: scale(2.2);\n  }\n  &[data-style='zoom-in'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-left: 0;\n    transform: none;\n  }\n  &[data-style='contract'] {\n    overflow: hidden;\n    width: 100px;\n  }\n  &[data-style='contract'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='contract'][data-loading] {\n    border-radius: 50%;\n    width: 52px;\n  }\n  &[data-style='contract'][data-loading] .ladda-label {\n    opacity: 0;\n  }\n  &[data-style='contract'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='contract-overlay'] {\n    overflow: hidden;\n    width: 100px;\n    box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n  }\n  &[data-style='contract-overlay'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='contract-overlay'][data-loading] {\n    border-radius: 50%;\n    width: 52px;\n    box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n  }\n  &[data-style='contract-overlay'][data-loading] .ladda-label {\n    opacity: 0;\n  }\n  &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  [dir='rtl'] .ladda-spinner > div {\n    left: 25% !important;\n  }\n"])), function (props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
   return ((_a = props.theme.buttons) === null || _a === void 0 ? void 0 : _a.style) === 'bootstrap' && "\n    border-radius: 0;\n    font-family: inherit;\n    font-size: inherit;\n    line-height: inherit;\n    text-transform: none;\n    -webkit-appearance: button;\n  \n    &:not(:disabled),\n    &[type='button']:not(:disabled),\n    &[type='reset']:not(:disabled),\n    &[type='submit']:not(:disabled) {\n      cursor: pointer;\n    }\n  \n    &:focus:not(:focus-visible) {\n      outline: 0;\n    }\n  \n    --bs-btn-padding-x: 0.75rem;\n    --bs-btn-padding-y: 0.375rem;\n    --bs-btn-font-family: ;\n    --bs-btn-font-size: 1rem;\n    --bs-btn-font-weight: 400;\n    --bs-btn-line-height: 1.5;\n    --bs-btn-color: var(--bs-body-color);\n    --bs-btn-bg: transparent;\n    --bs-btn-border-width: var(--bs-border-width);\n    --bs-btn-border-color: transparent;\n    --bs-btn-border-radius: var(--bs-border-radius);\n    --bs-btn-hover-border-color: transparent;\n    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),\n      0 1px 1px rgba(0, 0, 0, 0.075);\n    --bs-btn-disabled-opacity: 0.65;\n    --bs-btn-focus-box-shadow: 0 0 0 0.25rem\n      rgba(var(--bs-btn-focus-shadow-rgb), 0.5);\n    display: inline-block;\n    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);\n    font-family: var(--bs-btn-font-family);\n    font-size: var(--bs-btn-font-size);\n    font-weight: var(--bs-btn-font-weight);\n    line-height: var(--bs-btn-line-height);\n    color: var(--bs-btn-color);\n    text-align: center;\n    text-decoration: none;\n    vertical-align: middle;\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    user-select: none;\n    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);\n    border-radius: var(--bs-btn-border-radius);\n    background-color: var(--bs-btn-bg);\n    //transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,\n    //  border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  \n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  \n    &:hover {\n      filter: brightness(1.15);\n    }\n  \n    &:focus-visible {\n      color: var(--bs-btn-hover-color);\n      background-color: var(--bs-btn-hover-bg);\n      border-color: var(--bs-btn-hover-border-color);\n      outline: 0;\n      box-shadow: var(--bs-btn-focus-box-shadow);\n    }\n  \n    &:disabled,\n    &.disabled,\n    fieldset:disabled & {\n      color: var(--bs-btn-disabled-color);\n      pointer-events: none;\n      background-color: var(--bs-btn-disabled-bg);\n      border-color: var(--bs-btn-disabled-border-color);\n      opacity: var(--bs-btn-disabled-opacity);\n    }\n  \n    --bs-btn-color: ".concat((_f = (_b = props.$textColor) !== null && _b !== void 0 ? _b : (_e = (_c = props.theme.buttons) === null || _c === void 0 ? void 0 : _c[(_d = props.$variant) !== null && _d !== void 0 ? _d : 'primary']) === null || _e === void 0 ? void 0 : _e.textColor) !== null && _f !== void 0 ? _f : '#fff', ";\n    --bs-btn-bg: ").concat((_l = (_g = props.$backgroundColor) !== null && _g !== void 0 ? _g : (_k = (_h = props.theme.buttons) === null || _h === void 0 ? void 0 : _h[(_j = props.$variant) !== null && _j !== void 0 ? _j : 'primary']) === null || _k === void 0 ? void 0 : _k.backgroundColor) !== null && _l !== void 0 ? _l : '#0d6efd', ";\n    --bs-btn-border-color: var(--bs-btn-bg);\n    --bs-btn-focus-shadow-rgb: 49, 132, 253;\n    --bs-btn-active-color: #fff;\n    --bs-btn-active-bg: #0a58ca;\n    --bs-btn-active-border-color: #0a53be;\n    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n    --bs-btn-disabled-color: ").concat((_q = (_m = props.$disabledTextColor) !== null && _m !== void 0 ? _m : (_p = (_o = props.theme.buttons) === null || _o === void 0 ? void 0 : _o.loading) === null || _p === void 0 ? void 0 : _p.textColor) !== null && _q !== void 0 ? _q : '#fff', ";\n    --bs-btn-disabled-bg: ").concat((_u = (_r = props.$disabledBackgroundColor) !== null && _r !== void 0 ? _r : (_t = (_s = props.theme.buttons) === null || _s === void 0 ? void 0 : _s.loading) === null || _t === void 0 ? void 0 : _t.backgroundColor) !== null && _u !== void 0 ? _u : 'gray', ";\n    --bs-btn-disabled-border-color: ").concat((_v = props.$disabledBackgroundColor) !== null && _v !== void 0 ? _v : '#0d6efd', ";\n  \n    --bs-btn-padding-y: 14px;\n    --bs-btn-padding-x: 1rem;\n    --bs-btn-font-size: 18px;\n    --bs-btn-border-radius: 4px;\n  ");
 });
-var templateObject_1$I;
+var templateObject_1$K;
 
-var OverlayContainer = styled__default.default(PageContainer)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  background: ", ";\n  ", "\n  z-index: 10000;\n"], ["\n  background: ", ";\n  ", "\n  z-index: 10000;\n"])), function (props) {
+var OverlayContainer = styled__default.default(PageContainer)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  background: ", ";\n  ", "\n  z-index: 10000;\n"], ["\n  background: ", ";\n  ", "\n  z-index: 10000;\n"])), function (props) {
   return props.theme.background ? "".concat(props.theme.background) : "white";
 }, function (props) {
   return props.theme.textColor ? "color: ".concat(props.theme.textColor, ";") : "";
 });
-var OverlayInner$2 = styled__default.default.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  max-width: 100dvw;\n  max-height: 100dvh;\n  width: 100%;\n  height: 100%;\n  ", "\n"], ["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  max-width: 100dvw;\n  max-height: 100dvh;\n  width: 100%;\n  height: 100%;\n  ", "\n"])), function (props) {
+var OverlayInner$2 = styled__default.default.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  max-width: 100dvw;\n  max-height: 100dvh;\n  width: 100%;\n  height: 100%;\n  ", "\n"], ["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  max-width: 100dvw;\n  max-height: 100dvh;\n  width: 100%;\n  height: 100%;\n  ", "\n"])), function (props) {
   var _a;
   return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
 }, function (props) {
   return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
 });
-var OverlayImageContainer = styled__default.default.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-bottom: 25px;\n  max-width: 100dvw;\n  max-height: 100dvh;\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  max-width: 100dvw;\n  max-height: 100dvh;\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__default.default.div(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n  display: flex;\n  margin: auto;\n\n  & > div {\n    max-height: calc(100vh - 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(100vh - 320px);\n\n    & > img {\n      width: 100%;\n      max-height: 100%;\n      height: auto;\n      object-fit: contain;\n    }\n  }\n"])));
-var GrayOverlayContainer = styled__default.default(OverlayContainer)(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n  background: #f7f6fb;\n"], ["\n  background: #f7f6fb;\n"])));
-var ButtonsColumn = styled__default.default.div(templateObject_6$8 || (templateObject_6$8 = __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__default.default(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 OverlayImageContainer = styled__default.default.div(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-bottom: 25px;\n  max-width: 100dvw;\n  max-height: 100dvh;\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  max-width: 100dvw;\n  max-height: 100dvh;\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__default.default.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n  display: flex;\n  margin: auto;\n\n  & > div {\n    max-height: calc(100vh - 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(100vh - 320px);\n\n    & > img {\n      width: 100%;\n      max-height: 100%;\n      height: auto;\n      object-fit: contain;\n    }\n  }\n"])));
+var GrayOverlayContainer = styled__default.default(OverlayContainer)(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n  background: #f7f6fb;\n"], ["\n  background: #f7f6fb;\n"])));
+var ButtonsColumn = styled__default.default.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__default.default(LoaderButton)(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n  width: 100%;\n  border-radius: 30px;\n"], ["\n  width: 100%;\n  border-radius: 30px;\n"])));
 var WideBorderButton = styled__default.default(WideButton)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n  color: black;\n  background: white;\n  border: 1px solid var(--idm-color-secondary-500);\n  box-sizing: border-box;\n"], ["\n  color: black;\n  background: white;\n  border: 1px solid var(--idm-color-secondary-500);\n  box-sizing: border-box;\n"])));
-var templateObject_1$H, templateObject_2$y, templateObject_3$p, templateObject_4$j, templateObject_5$b, templateObject_6$8, templateObject_7$5, templateObject_8$3;
+var templateObject_1$J, templateObject_2$A, templateObject_3$r, templateObject_4$l, templateObject_5$c, templateObject_6$9, templateObject_7$6, templateObject_8$3;
 
 var GeolocationAccessDeniedOverlay = function GeolocationAccessDeniedOverlay(_a) {
   var accessBlockedImageUrl = _a.accessBlockedImageUrl;
@@ -762,13 +764,13 @@ var SessionValidationErrorOverlay = function SessionValidationErrorOverlay(_a) {
   }, retryText)))));
 };
 
-var wavesAnimation = styled.keyframes(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n    0% {\n        opacity: 0;\n        transform: scale3d(1, 1, 1);\n    }\n    80% {\n        opacity: 1;\n    }\n    100% {\n        transform: scale3d(2, 2, 1);\n        opacity: 0;\n    }\n"], ["\n    0% {\n        opacity: 0;\n        transform: scale3d(1, 1, 1);\n    }\n    80% {\n        opacity: 1;\n    }\n    100% {\n        transform: scale3d(2, 2, 1);\n        opacity: 0;\n    }\n"])));
-var progressBarAnimation = styled.keyframes(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n    0% {\n        width: 0;\n    }\n    100% {\n        width: 100%;\n    }\n"], ["\n    0% {\n        width: 0;\n    }\n    100% {\n        width: 100%;\n    }\n"])));
-var dualRingSpinnerAnimation = styled.keyframes(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n"], ["\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n"])));
-var progressBorderAnimation = styled.keyframes(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n    to {\n        stroke-dashoffset: 0;\n    }\n"], ["\n    to {\n        stroke-dashoffset: 0;\n    }\n"])));
-var templateObject_1$G, templateObject_2$x, templateObject_3$o, templateObject_4$i;
+var wavesAnimation = styled.keyframes(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n    0% {\n        opacity: 0;\n        transform: scale3d(1, 1, 1);\n    }\n    80% {\n        opacity: 1;\n    }\n    100% {\n        transform: scale3d(2, 2, 1);\n        opacity: 0;\n    }\n"], ["\n    0% {\n        opacity: 0;\n        transform: scale3d(1, 1, 1);\n    }\n    80% {\n        opacity: 1;\n    }\n    100% {\n        transform: scale3d(2, 2, 1);\n        opacity: 0;\n    }\n"])));
+var progressBarAnimation = styled.keyframes(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n    0% {\n        width: 0;\n    }\n    100% {\n        width: 100%;\n    }\n"], ["\n    0% {\n        width: 0;\n    }\n    100% {\n        width: 100%;\n    }\n"])));
+var dualRingSpinnerAnimation = styled.keyframes(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n"], ["\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n"])));
+var progressBorderAnimation = styled.keyframes(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n    to {\n        stroke-dashoffset: 0;\n    }\n"], ["\n    to {\n        stroke-dashoffset: 0;\n    }\n"])));
+var templateObject_1$I, templateObject_2$z, templateObject_3$q, templateObject_4$k;
 
-var Spinner = styled__default.default.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  display: inline-block;\n  width: ", "px;\n  height: ", "px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: ", "px;\n    height: ", "px;\n    margin: 8px;\n    border-radius: 50%;\n    border: ", "px solid\n      ", ";\n    border-color: ", " transparent\n      ", " transparent;\n    animation: ", " 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n"], ["\n  display: inline-block;\n  width: ", "px;\n  height: ", "px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: ", "px;\n    height: ", "px;\n    margin: 8px;\n    border-radius: 50%;\n    border: ", "px solid\n      ", ";\n    border-color: ", " transparent\n      ", " transparent;\n    animation: ", " 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n"])), function (_a) {
+var Spinner = styled__default.default.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  display: inline-block;\n  width: ", "px;\n  height: ", "px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: ", "px;\n    height: ", "px;\n    margin: 8px;\n    border-radius: 50%;\n    border: ", "px solid\n      ", ";\n    border-color: ", " transparent\n      ", " transparent;\n    animation: ", " 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n"], ["\n  display: inline-block;\n  width: ", "px;\n  height: ", "px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: ", "px;\n    height: ", "px;\n    margin: 8px;\n    border-radius: 50%;\n    border: ", "px solid\n      ", ";\n    border-color: ", " transparent\n      ", " transparent;\n    animation: ", " 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n"])), function (_a) {
   var $size = _a.$size;
   return $size !== null && $size !== void 0 ? $size : 80;
 }, function (_a) {
@@ -793,7 +795,7 @@ var Spinner = styled__default.default.div(templateObject_1$F || (templateObject_
   var $color = _a.$color;
   return $color !== null && $color !== void 0 ? $color : '#888';
 }, dualRingSpinnerAnimation);
-var templateObject_1$F;
+var templateObject_1$H;
 
 exports.defaultAuthUrl = 'https://portal-api.idmission.com';
 var allowedAuthUrls = ['https://portal-api.idmission.com', 'https://portal-api-uat.idmission.com', 'https://portal-api-demo.idmission.com', 'https://portal-api-dev.idmission.com', 'http://localhost:10000'];
@@ -801,11 +803,11 @@ function setDefaultAuthUrl(url) {
   if (!allowedAuthUrls.includes(url)) throw new Error('invalid auth url');
   exports.defaultAuthUrl = url;
 }
-var initialState$5 = {
+var initialState$6 = {
   authUrl: exports.defaultAuthUrl,
   sessionCheckState: 'READY'
 };
-var AuthStateContext = /*#__PURE__*/React.createContext(initialState$5);
+var AuthStateContext = /*#__PURE__*/React.createContext(initialState$6);
 var AuthDispatchContext = /*#__PURE__*/React.createContext(function () {});
 var reducer$4 = function reducer(state, action) {
   switch (action.type) {
@@ -837,7 +839,7 @@ function useAuthReducer(authUrl, sessionId) {
   if (authUrl === void 0) {
     authUrl = exports.defaultAuthUrl;
   }
-  var _a = React.useReducer(reducer$4, _assign(_assign({}, initialState$5), {
+  var _a = React.useReducer(reducer$4, _assign(_assign({}, initialState$6), {
       authUrl: authUrl
     })),
     state = _a[0],
@@ -1917,608 +1919,6 @@ function calculateMd5(blob) {
   });
 }
 
-function getFrameDimensions(frame) {
-  var frameWidth = frame.width,
-    frameHeight = frame.height;
-  if (frame instanceof HTMLImageElement) {
-    frameWidth = frame.naturalWidth;
-    frameHeight = frame.naturalHeight;
-  }
-  if (frame instanceof HTMLVideoElement) {
-    frameWidth = frame.videoWidth;
-    frameHeight = frame.videoHeight;
-  }
-  return [frameWidth, frameHeight];
-}
-
-var InvisibleCanvas = styled__default.default.canvas(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
-function drawToCanvas(canvas, frame, width, height) {
-  if (!canvas) return;
-  var ctx = canvas.getContext('2d');
-  if (!ctx) return;
-  if (!width || !height) {
-    var _a = getFrameDimensions(frame),
-      frameWidth = _a[0],
-      frameHeight = _a[1];
-    width || (width = frameWidth);
-    height || (height = frameHeight);
-  }
-  canvas.width = width;
-  canvas.height = height;
-  ctx.drawImage(frame, 0, 0, width, height);
-}
-function clearCanvas(canvas) {
-  var _a;
-  (_a = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.clearRect(0, 0, canvas === null || canvas === void 0 ? void 0 : canvas.width, canvas === null || canvas === void 0 ? void 0 : canvas.height);
-}
-var templateObject_1$E;
-
-function listAvailableCameras(facingMode_1) {
-  return __awaiter(this, arguments, void 0, function (facingMode, requestMicAccess) {
-    var cameraEnumerationStream, videoDevices;
-    if (requestMicAccess === void 0) {
-      requestMicAccess = false;
-    }
-    return __generator(this, function (_a) {
-      switch (_a.label) {
-        case 0:
-          return [4 /*yield*/, navigator.mediaDevices.getUserMedia({
-            video: {
-              facingMode: {
-                exact: facingMode
-              }
-            },
-            audio: requestMicAccess
-          })
-          // This lists all available cameras attached to the user's device.
-          ];
-        case 1:
-          cameraEnumerationStream = _a.sent();
-          return [4 /*yield*/, navigator.mediaDevices.enumerateDevices()];
-        case 2:
-          videoDevices = _a.sent().filter(function (_a) {
-            var kind = _a.kind;
-            return kind === 'videoinput';
-          });
-          // Release the access to the user's camera that we obtained for enumeration purposes.
-          cameraEnumerationStream.getVideoTracks().forEach(function (track) {
-            track.enabled = false;
-            track.stop();
-          });
-          cameraEnumerationStream = null;
-          return [2 /*return*/, videoDevices];
-      }
-    });
-  });
-}
-var frontLabels = ['front', 'avant', 'anteriore', 'cameraaanvoorzijde', 'kamerapåframsidan', 'forsidekamera', 'kamerapåforsiden', 'aparatprzedni', 'etukamera', 'kameradepan', 'ÖnKamera', 'cameramặttrước', 'camerăfață', 'prednákamera', 'prednjakamera', 'előlapikamera', 'přednífotoaparát', 'μπροστινήκάμερα', 'переднякамера', 'передняякамера', 'преднакамера', 'алдыңғыкамера', 'מצלמה קדמית', 'الكاميرا الأمامية', 'फ़्रंटकैमरा', '前置相机', '前置鏡頭', '前面カメラ', '전면카메라', 'กล้องด้านหน้า'].map(function (s) {
-  return s.toLocaleLowerCase().split(' ').join('');
-});
-var rearLabels = ['back', 'rear', 'posterior', 'trasera', 'traseira', 'arrière', 'rückkamera', 'fotocamera(posteriore)', 'cameraaanachterzijde', 'kamerapåbaksidan', 'kamerapåbaksiden', 'bagsidekamera', 'aparattylny', 'takakamera', 'arkakamera', 'kamerabelakang', 'cameramặtsau', 'camerăspate', 'stražnjakamera', 'zadnákamera', 'hátoldalikamera', 'zadnífotoaparát', 'πίσωκάμερα', 'заднякамера', 'Задняякамера', 'заднакамера', 'артқыкамера', 'מצלמה אחורית', 'الكاميرا الخلفية', 'बैककैमरा', '后置相机', '後置鏡頭', '背面カメラ', '후면카메라', 'กล้องด้านหลัง'].map(function (s) {
-  return s.toLocaleLowerCase().split(' ').join('');
-});
-var backUltraWideLabels = ['backdualwidecamera', 'backultrawidecamera', 'ultraampliaposterior', 'ultra-angulartraseira', 'ultragrandeangulartraseira', 'ultragrandangle', 'ultragranangular', 'ultra-weitwinkelkamera', 'ultra-grandangolo', 'ultrabredecameraaanachterzijde', 'ultravidvinkelkamerapåbaksidan', 'ultravidvinkelkameraetpåbagsiden', 'ultravidvinkelkamerabak', 'ultragenişkameraarkayüzü', 'ultralaajakulmainentakakamera', 'tylnyaparatultraszerokokątny', 'cameracựcrộngmặtsau', 'camerăcuobiectivultra‑superangularspate', 'ultraszéleslátószögűkamera', 'kameraultralebarbelakang', 'stražnjaultraširokakamera', 'zadníultraširokoúhlýfotoaparát', 'ultraširokouhlá', 'πίσωυπερευρείακάμερα', 'заднянадширококутнакамера', 'Задняясверхширокоугольнаякамера', 'Задна свръх широкоъгълна камера', 'артқыультракеңбұрыштыкамера', 'מצלמה אולטרה רחבה אחורית', 'كاميرا خلفية عريضة جدًا', 'बैकअल्ट्रावाइडकैमरा', '后置超广角相机', '後置超廣角鏡頭相機', '背面超広角カメラ', '후면울트라와이드카메라', 'กล้องด้านหลังอัลตร้าไวด์'].map(function (s) {
-  return s.toLocaleLowerCase().split(' ').join('');
-});
-var labelMatches = function labelMatches(labelOrDevice, labelSetOrLabel) {
-  var label = labelOrDevice instanceof MediaDeviceInfo ? getDeviceLabel(labelOrDevice) : labelOrDevice;
-  var labelSet = typeof labelSetOrLabel === 'string' ? [labelSetOrLabel] : labelSetOrLabel;
-  return labelSet.some(function (l) {
-    return label.includes(l);
-  });
-};
-var getDeviceLabel = function getDeviceLabel(deviceInfo) {
-  return deviceInfo.label.toLocaleLowerCase().split(' ').join('');
-};
-var currentCamera;
-var currentAudioStream;
-function obtainCameraAccess(stream, deviceLabel, video) {
-  releaseCameraAccess();
-  log('obtaining camera access...');
-  var _a = stream.getVideoTracks()[0].getSettings(),
-    width = _a.width,
-    height = _a.height;
-  var label = deviceLabel.toLocaleLowerCase().split(' ').join('');
-  var isRearFacing = labelMatches(label, __spreadArray(__spreadArray(__spreadArray([], rearLabels, true), backUltraWideLabels, true), ['iphone'], false));
-  var release = function release() {
-    stream.getTracks().forEach(function (track) {
-      track.enabled = false;
-      track.stop();
-    });
-    if (video) {
-      video.pause();
-      video.srcObject = null;
-      video.src = '';
-    }
-  };
-  width || (width = 0);
-  height || (height = 0);
-  currentCamera = {
-    label: deviceLabel,
-    stream: stream,
-    width: width,
-    height: height,
-    isRearFacing: isRearFacing,
-    release: release
-  };
-  if (video) video.srcObject = stream;
-  return currentCamera;
-}
-function releaseCameraAccess() {
-  if (!currentCamera) return;
-  log('releasing camera access...');
-  currentCamera.release();
-  currentCamera = undefined;
-}
-function releaseMicrophoneAccess() {
-  var _a;
-  if (!currentAudioStream) return;
-  log('releasing microphone access...');
-  (_a = currentAudioStream.stop) === null || _a === void 0 ? void 0 : _a.call(currentAudioStream);
-  currentAudioStream.getAudioTracks().forEach(function (t) {
-    var _a;
-    (_a = t.stop) === null || _a === void 0 ? void 0 : _a.call(t);
-  });
-  currentAudioStream = undefined;
-}
-function usePreferredCaptureDevice(_a) {
-  var _b = _a === void 0 ? {} : _a,
-    _c = _b.requestAccessAutomatically,
-    requestAccessAutomatically = _c === void 0 ? true : _c,
-    _d = _b.preferFrontFacingCamera,
-    preferFrontFacingCamera = _d === void 0 ? false : _d,
-    _e = _b.preferContinuityCamera,
-    preferContinuityCamera = _e === void 0 ? true : _e,
-    _f = _b.requireMicrophoneAccess,
-    requireMicrophoneAccess = _f === void 0 ? false : _f,
-    _g = _b.maxVideoWidth,
-    maxVideoWidth = _g === void 0 ? 1920 : _g,
-    maxFps = _b.maxFps,
-    _h = _b.debugMode,
-    debugMode = _h === void 0 ? false : _h;
-  var videoRef = React.useRef(null);
-  var videoRefStack = React.useRef([]);
-  var cameraRef = React.useRef(null);
-  var _j = React.useState(false),
-    cameraReady = _j[0],
-    setCameraReady = _j[1];
-  var _k = React.useState(false),
-    microphoneReady = _k[0],
-    setMicrophoneReady = _k[1];
-  var _l = React.useState(null),
-    videoDevice = _l[0],
-    setVideoDevice = _l[1];
-  var _m = React.useState(null),
-    audioStream = _m[0],
-    setAudioStream = _m[1];
-  var _o = React.useState(false),
-    videoLoaded = _o[0],
-    setVideoLoaded = _o[1];
-  var _p = React.useState(false),
-    iphoneContinuityCameraAvailable = _p[0],
-    setIphoneContinuityCameraAvailable = _p[1];
-  var _q = React.useState(preferContinuityCamera),
-    iphoneContinuityCameraAllowed = _q[0],
-    setIphoneContinuityCameraAllowed = _q[1];
-  var _r = React.useState(false),
-    iphoneContinuityCameraDenied = _r[0],
-    setIphoneContinuityCameraDenied = _r[1];
-  var _s = React.useState(false),
-    cameraAccessDenied = _s[0],
-    setCameraAccessDenied = _s[1];
-  var _t = React.useState(false),
-    microphoneAccessDenied = _t[0],
-    setMicrophoneAccessDenied = _t[1];
-  var videoRefElement = videoRef.current;
-  React.useEffect(function pushVideoRefToStackWhenChanged() {
-    // proceed if the video element being mounted is not already at the top of the videoRefStack.
-    var topOfStack = videoRefStack.current.slice(-1)[0];
-    if (videoRefElement && videoRefElement !== topOfStack) {
-      log('adding video to stack', videoRefElement);
-      videoRefStack.current.push(videoRefElement);
-    }
-  }, [videoRefElement]);
-  var onVideoUnmounted = React.useCallback(function (videoElement) {
-    log('removing video from stack', videoElement);
-    videoRefStack.current = videoRefStack.current.filter(function (v) {
-      return v !== videoElement;
-    });
-    videoRef.current = videoRefStack.current.slice(-1)[0]; // top of stack.
-    log('new videoRef is', videoRef.current);
-  }, []);
-  React.useEffect(function resetCameraOnContinuityPreferenceChanged() {
-    if (debugMode) {
-      log('iphone continuity camera allowed changed', iphoneContinuityCameraAllowed);
-    }
-    releaseCameraAccess();
-    cameraRef.current = null;
-    setVideoLoaded(false);
-  }, [debugMode, iphoneContinuityCameraAllowed]);
-  // NOTE: the bound callback function here is called requestCameraAccess, because
-  // it initiates the useEffect chain that results in camera access being requested
-  // (requestCameraAccessAutomatically -> chooseFromAvailableCameras -> accessChosenCamera).
-  //
-  // We chose to title the inner function "chooseFromAvailableCameras" because
-  // that's all it literally does -- the available cameras are enumerated, and then
-  // the result is parsed to decide which one we like best, which is then passed to
-  // setVideoDevice, which causes accessChosenCamera to trigger.
-  //
-  // I am not a huge fan of getUserMedia's design -- you need to call it twice in order
-  // to select the "best" camera for your application's purposes.
-  var requestCameraAccess = React.useCallback(function chooseFromAvailableCameras() {
-    return __awaiter(this, void 0, void 0, function () {
-      var availableCameras, selectedCamera, platform_1, iphoneContinuityCamera, e_1;
-      var _a, _b;
-      return __generator(this, function (_c) {
-        switch (_c.label) {
-          case 0:
-            setCameraReady(false);
-            setCameraAccessDenied(false);
-            _c.label = 1;
-          case 1:
-            _c.trys.push([1, 3,, 4]);
-            return [4 /*yield*/, listAvailableCameras()];
-          case 2:
-            availableCameras = _c.sent();
-            selectedCamera = void 0;
-            if (debugMode) {
-              log('availableCameras', availableCameras);
-            }
-            platform_1 = getPlatform();
-            if (debugMode) {
-              log('platformDetails', platform_1);
-            }
-            if (!iphoneContinuityCameraDenied && (!(platform_1 === null || platform_1 === void 0 ? void 0 : platform_1.os) || platform_1.os.family === 'OS X')) {
-              iphoneContinuityCamera = availableCameras.find(function (deviceInfo) {
-                return labelMatches(deviceInfo, 'iphone');
-              });
-              setIphoneContinuityCameraAvailable(!!iphoneContinuityCamera);
-              if (iphoneContinuityCamera && iphoneContinuityCameraAllowed) {
-                selectedCamera = iphoneContinuityCamera;
-              }
-            } else if (((_a = platform_1 === null || platform_1 === void 0 ? void 0 : platform_1.os) === null || _a === void 0 ? void 0 : _a.family) === 'Android' || availableCameras.every(function (c) {
-              return c.label.startsWith('camera2 ');
-            })) {
-              availableCameras = availableCameras.sort(function (a, b) {
-                return a.label.toLowerCase().localeCompare(b.label.toLowerCase());
-              });
-              if (debugMode) {
-                log('cameras have been sorted', availableCameras);
-              }
-            }
-            if (preferFrontFacingCamera) {
-              selectedCamera = availableCameras.find(function (deviceInfo) {
-                return labelMatches(deviceInfo, frontLabels);
-              });
-            }
-            selectedCamera || (selectedCamera = availableCameras.find(function (deviceInfo) {
-              return labelMatches(deviceInfo, 'backtriplecamera');
-            }));
-            selectedCamera || (selectedCamera = availableCameras.find(function (deviceInfo) {
-              return labelMatches(deviceInfo, 'backdualcamera');
-            }));
-            selectedCamera || (selectedCamera = availableCameras.find(function (deviceInfo) {
-              return labelMatches(deviceInfo, rearLabels) && !labelMatches(deviceInfo, backUltraWideLabels);
-            }));
-            selectedCamera || (selectedCamera = availableCameras.find(function (deviceInfo) {
-              return labelMatches(deviceInfo, rearLabels);
-            }));
-            // on iOS, the front facing camera always is at the first position in the list, so we skip it if all else fails.
-            if (!preferFrontFacingCamera && ((_b = platform_1 === null || platform_1 === void 0 ? void 0 : platform_1.os) === null || _b === void 0 ? void 0 : _b.family) === 'iOS' && availableCameras.length > 0) {
-              selectedCamera || (selectedCamera = availableCameras[1]);
-            }
-            selectedCamera || (selectedCamera = availableCameras[0]);
-            if (debugMode) log('selectedCamera', selectedCamera);
-            setVideoDevice(selectedCamera);
-            return [3 /*break*/, 4];
-          case 3:
-            e_1 = _c.sent();
-            if (e_1.name === 'NotAllowedError') {
-              error('camera access has been blocked by the user', e_1);
-              setCameraAccessDenied(true);
-            } else {
-              error('camera access encountered some other error', e_1);
-              throw e_1;
-            }
-            return [3 /*break*/, 4];
-          case 4:
-            return [2 /*return*/];
-        }
-      });
-    });
-  }, [debugMode, iphoneContinuityCameraAllowed, iphoneContinuityCameraDenied, preferFrontFacingCamera]);
-  React.useEffect(function requestCameraAccessAutomatically() {
-    if (requestAccessAutomatically && !cameraAccessDenied) {
-      requestCameraAccess()["catch"](error);
-    }
-  }, [cameraAccessDenied, requestAccessAutomatically, requestCameraAccess]);
-  React.useEffect(function accessChosenCamera() {
-    var _this = this;
-    var _a;
-    if (!videoDevice) return;
-    var cleanup = function cleanup() {
-      releaseCameraAccess();
-      cameraRef.current = null;
-      setVideoLoaded(false);
-    };
-    if (!((_a = navigator.mediaDevices) === null || _a === void 0 ? void 0 : _a.getUserMedia)) return cleanup;
-    (function () {
-      return __awaiter(_this, void 0, void 0, function () {
-        var constraints, stream, e_2, handleStreamEnded;
-        var _a;
-        return __generator(this, function (_b) {
-          switch (_b.label) {
-            case 0:
-              constraints = {
-                audio: false,
-                video: {
-                  deviceId: {
-                    exact: videoDevice.deviceId
-                  },
-                  width: {
-                    ideal: maxVideoWidth
-                  },
-                  aspectRatio: 1.777777778,
-                  frameRate: {}
-                }
-              };
-              if (maxFps) {
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                constraints.video.frameRate = {
-                  max: maxFps
-                };
-              }
-              stream = null;
-              _b.label = 1;
-            case 1:
-              _b.trys.push([1, 3,, 4]);
-              return [4 /*yield*/, navigator.mediaDevices.getUserMedia(constraints)];
-            case 2:
-              stream = _b.sent();
-              return [3 /*break*/, 4];
-            case 3:
-              e_2 = _b.sent();
-              if (e_2.name === 'NotAllowedError') {
-                if (iphoneContinuityCameraAllowed) {
-                  setIphoneContinuityCameraAvailable(false);
-                  setIphoneContinuityCameraDenied(true);
-                } else {
-                  setCameraAccessDenied(true);
-                }
-                return [2 /*return*/];
-              }
-              return [3 /*break*/, 4];
-            case 4:
-              if (!!stream) return [3 /*break*/, 8];
-              _b.label = 5;
-            case 5:
-              _b.trys.push([5, 7,, 8]);
-              return [4 /*yield*/, navigator.mediaDevices.getUserMedia({
-                audio: false,
-                video: true
-              })];
-            case 6:
-              stream = _b.sent();
-              log('opened stream with no width and height constraints');
-              return [3 /*break*/, 8];
-            case 7:
-              _b.sent();
-              log('cannot open stream at all');
-              return [3 /*break*/, 8];
-            case 8:
-              if (!stream) {
-                throw new Error('failed to open camera');
-              }
-              handleStreamEnded = function handleStreamEnded() {
-                if (iphoneContinuityCameraAvailable && iphoneContinuityCameraAllowed) {
-                  log('someone unplugged the continuity camera');
-                  releaseCameraAccess();
-                  cameraRef.current = null;
-                  setIphoneContinuityCameraAvailable(false);
-                  setIphoneContinuityCameraDenied(true);
-                  setVideoDevice(null);
-                } else {
-                  log('someone unplugged the webcam');
-                  releaseCameraAccess();
-                  cameraRef.current = null;
-                  setVideoLoaded(false);
-                  setCameraAccessDenied(true);
-                }
-              };
-              (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('ended', handleStreamEnded);
-              stream.getVideoTracks().forEach(function (track) {
-                track.onended = handleStreamEnded;
-              });
-              cameraRef.current = obtainCameraAccess(stream, videoDevice.label, videoRef.current);
-              return [2 /*return*/];
-          }
-        });
-      });
-    })();
-    return cleanup;
-  }, [iphoneContinuityCameraAllowed, iphoneContinuityCameraAvailable, maxFps, maxVideoWidth, videoDevice]);
-  React.useEffect(function triggerCameraReady() {
-    // TODO: in the future let's evaluate whether we can simplify this to just
-    // setCameraReady(!!videoDevice && videoLoaded) -- we are wondering whether
-    // we somehow depend on this being set twice.
-    setCameraReady(false);
-    if (videoDevice && videoLoaded) {
-      setCameraReady(videoDevice && videoLoaded);
-    }
-  }, [videoLoaded, videoDevice]);
-  var requestMicrophoneAccess = React.useCallback(function _requestMicrophoneAccess() {
-    return __awaiter(this, void 0, void 0, function () {
-      var stream;
-      return __generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            setMicrophoneReady(false);
-            setMicrophoneAccessDenied(false);
-            _a.label = 1;
-          case 1:
-            _a.trys.push([1, 3,, 4]);
-            return [4 /*yield*/, navigator.mediaDevices.getUserMedia({
-              audio: true,
-              video: false
-            })];
-          case 2:
-            stream = _a.sent();
-            currentAudioStream = stream;
-            setAudioStream(stream);
-            setMicrophoneReady(true);
-            stream.getAudioTracks().forEach(function (track) {
-              track.onended = function () {
-                setMicrophoneAccessDenied(true);
-              };
-            });
-            return [3 /*break*/, 4];
-          case 3:
-            _a.sent();
-            setMicrophoneAccessDenied(true);
-            return [3 /*break*/, 4];
-          case 4:
-            return [2 /*return*/];
-        }
-      });
-    });
-  }, []);
-  React.useEffect(function requestMicrophoneAccessIfNeeded() {
-    if (!requireMicrophoneAccess || microphoneAccessDenied) return;
-    requestMicrophoneAccess()["catch"](error);
-    return function () {
-      releaseMicrophoneAccess();
-      setAudioStream(null);
-      setMicrophoneReady(false);
-    };
-  }, [microphoneAccessDenied, requestMicrophoneAccess, requireMicrophoneAccess]);
-  var takePhoto = React.useCallback(function _takePhoto() {
-    return __awaiter(this, void 0, void 0, function () {
-      var canvas;
-      return __generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            if (!cameraRef.current) return [2 /*return*/, null];
-            if (!(typeof ImageCapture !== 'undefined')) return [3 /*break*/, 2];
-            return [4 /*yield*/, new ImageCapture(cameraRef.current.stream.getTracks()[0]).takePhoto()];
-          case 1:
-            return [2 /*return*/, _a.sent()];
-          case 2:
-            if (!videoRef.current) return [2 /*return*/, null];
-            canvas = document.createElement('canvas');
-            drawToCanvas(canvas, videoRef.current);
-            return [2 /*return*/, new Promise(function (resolve) {
-              return canvas.toBlob(resolve);
-            })];
-        }
-      });
-    });
-  }, []);
-  return React.useMemo(function () {
-    return {
-      videoRef: videoRef,
-      videoDevice: videoDevice,
-      videoLoaded: videoLoaded,
-      setVideoLoaded: setVideoLoaded,
-      onVideoUnmounted: onVideoUnmounted,
-      cameraRef: cameraRef,
-      cameraReady: cameraReady,
-      cameraAccessDenied: cameraAccessDenied,
-      requestCameraAccess: requestCameraAccess,
-      releaseCameraAccess: releaseCameraAccess,
-      iphoneContinuityCameraAvailable: iphoneContinuityCameraAvailable,
-      iphoneContinuityCameraAllowed: iphoneContinuityCameraAllowed,
-      setIphoneContinuityCameraAllowed: setIphoneContinuityCameraAllowed,
-      takePhoto: takePhoto,
-      audioStream: audioStream,
-      microphoneReady: microphoneReady,
-      microphoneAccessDenied: microphoneAccessDenied,
-      requestMicrophoneAccess: requestMicrophoneAccess
-    };
-  }, [audioStream, cameraAccessDenied, cameraReady, iphoneContinuityCameraAllowed, iphoneContinuityCameraAvailable, microphoneAccessDenied, microphoneReady, onVideoUnmounted, requestCameraAccess, requestMicrophoneAccess, takePhoto, videoDevice, videoLoaded]);
-}
-
-var CameraStateContext = /*#__PURE__*/React.createContext({
-  videoRef: {
-    current: null
-  },
-  videoDevice: null,
-  videoLoaded: false,
-  cameraRef: {
-    current: null
-  },
-  cameraReady: false,
-  cameraAccessDenied: false,
-  requestCameraAccess: function requestCameraAccess() {
-    return null;
-  },
-  releaseCameraAccess: function releaseCameraAccess() {
-    return null;
-  },
-  iphoneContinuityCameraAvailable: false,
-  iphoneContinuityCameraAllowed: true,
-  setIphoneContinuityCameraAllowed: function setIphoneContinuityCameraAllowed() {
-    return null;
-  },
-  takePhoto: function takePhoto() {
-    return Promise.resolve(null);
-  },
-  setVideoLoaded: function setVideoLoaded() {
-    return null;
-  },
-  onVideoUnmounted: function onVideoUnmounted() {
-    return null;
-  },
-  audioStream: null,
-  microphoneReady: false,
-  microphoneAccessDenied: false,
-  requestMicrophoneAccess: function requestMicrophoneAccess() {
-    return null;
-  }
-});
-var CameraProvider = function CameraProvider(_a) {
-  var children = _a.children,
-    _b = _a.requestAccessAutomatically,
-    requestAccessAutomatically = _b === void 0 ? true : _b,
-    _c = _a.preferFrontFacingCamera,
-    preferFrontFacingCamera = _c === void 0 ? false : _c,
-    _d = _a.preferContinuityCamera,
-    preferContinuityCamera = _d === void 0 ? true : _d,
-    _e = _a.requireMicrophoneAccess,
-    requireMicrophoneAccess = _e === void 0 ? false : _e,
-    _f = _a.maxVideoWidth,
-    maxVideoWidth = _f === void 0 ? 1920 : _f,
-    maxFps = _a.maxFps,
-    onCameraAccessDenied = _a.onCameraAccessDenied,
-    onMicrophoneAccessDenied = _a.onMicrophoneAccessDenied,
-    _g = _a.debugMode,
-    debugMode = _g === void 0 ? false : _g;
-  var captureDevice = usePreferredCaptureDevice({
-    requestAccessAutomatically: requestAccessAutomatically,
-    preferFrontFacingCamera: preferFrontFacingCamera,
-    preferContinuityCamera: preferContinuityCamera,
-    requireMicrophoneAccess: requireMicrophoneAccess,
-    maxVideoWidth: maxVideoWidth,
-    maxFps: maxFps,
-    debugMode: debugMode
-  });
-  React.useEffect(function () {
-    if (captureDevice.cameraAccessDenied) onCameraAccessDenied === null || onCameraAccessDenied === void 0 ? void 0 : onCameraAccessDenied();
-  }, [captureDevice.cameraAccessDenied, onCameraAccessDenied]);
-  React.useEffect(function () {
-    if (captureDevice.microphoneAccessDenied) onMicrophoneAccessDenied === null || onMicrophoneAccessDenied === void 0 ? void 0 : onMicrophoneAccessDenied();
-  }, [captureDevice.microphoneAccessDenied, onMicrophoneAccessDenied]);
-  var releaseCameraAccess = captureDevice.releaseCameraAccess;
-  React.useEffect(function () {
-    return function () {
-      releaseCameraAccess();
-    };
-  }, [releaseCameraAccess]);
-  return /*#__PURE__*/React__namespace.default.createElement(CameraStateContext.Provider, {
-    value: captureDevice
-  }, children);
-};
-
 var visionTasksBasePath = "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.7/wasm";
 var visionRuntimePreloading = false;
 function preloadVisionRuntime() {
@@ -2561,6 +1961,42 @@ function preloadVisionRuntime() {
   });
 }
 
+function getFrameDimensions(frame) {
+  var frameWidth = frame.width,
+    frameHeight = frame.height;
+  if (frame instanceof HTMLImageElement) {
+    frameWidth = frame.naturalWidth;
+    frameHeight = frame.naturalHeight;
+  }
+  if (frame instanceof HTMLVideoElement) {
+    frameWidth = frame.videoWidth;
+    frameHeight = frame.videoHeight;
+  }
+  return [frameWidth, frameHeight];
+}
+
+var InvisibleCanvas = styled__default.default.canvas(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
+function drawToCanvas(canvas, frame, width, height) {
+  if (!canvas) return;
+  var ctx = canvas.getContext('2d');
+  if (!ctx) return;
+  if (!width || !height) {
+    var _a = getFrameDimensions(frame),
+      frameWidth = _a[0],
+      frameHeight = _a[1];
+    width || (width = frameWidth);
+    height || (height = frameHeight);
+  }
+  canvas.width = width;
+  canvas.height = height;
+  ctx.drawImage(frame, 0, 0, width, height);
+}
+function clearCanvas(canvas) {
+  var _a;
+  (_a = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.clearRect(0, 0, canvas === null || canvas === void 0 ? void 0 : canvas.width, canvas === null || canvas === void 0 ? void 0 : canvas.height);
+}
+var templateObject_1$G;
+
 function cropToShoulders(rawCanvas, cropCanvas, resizeCanvas, frame, face, quality, maxHeight) {
   if (quality === void 0) {
     quality = 0.92;
@@ -2864,7 +2300,8 @@ function useLoadFocusModel(_a) {
     modelPath = _b === void 0 ? defaultFocusModelPath : _b,
     _c = _a.modelLoadTimeoutMs,
     modelLoadTimeoutMs = _c === void 0 ? defaultFocusModelLoadTimeoutMs : _c,
-    onModelError = _a.onModelError;
+    onModelError = _a.onModelError,
+    videoRef = _a.videoRef;
   var _d = React.useState(false),
     ready = _d[0],
     setReady = _d[1];
@@ -2874,7 +2311,6 @@ function useLoadFocusModel(_a) {
   var _f = React.useState(null),
     modelError = _f[0],
     setModelError = _f[1];
-  var videoRef = React.useContext(CameraStateContext).videoRef;
   React.useEffect(function loadModel() {
     var _this = this;
     setReady(false);
@@ -3012,7 +2448,8 @@ function closeFaceDetector() {
 function useLoadFaceDetector(_a) {
   var onModelError = _a.onModelError,
     _b = _a.modelLoadTimeoutMs,
-    modelLoadTimeoutMs = _b === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _b;
+    modelLoadTimeoutMs = _b === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _b,
+    videoRef = _a.videoRef;
   var _c = React.useState(false),
     ready = _c[0],
     setReady = _c[1];
@@ -3022,7 +2459,6 @@ function useLoadFaceDetector(_a) {
   var _e = React.useState(null),
     modelError = _e[0],
     setModelError = _e[1];
-  var videoRef = React.useContext(CameraStateContext).videoRef;
   React.useEffect(function loadModel() {
     var _this = this;
     setReady(false);
@@ -3503,7 +2939,8 @@ function useLoadDocumentDetector(_a) {
     modelLoadTimeoutMs = _c === void 0 ? defaultDocumentDetectionModelLoadTimeoutMs : _c,
     _d = _a.scoreThreshold,
     scoreThreshold = _d === void 0 ? defaultDocumentDetectionScoreThreshold : _d,
-    onModelError = _a.onModelError;
+    onModelError = _a.onModelError,
+    videoRef = _a.videoRef;
   var _e = React.useState(false),
     ready = _e[0],
     setReady = _e[1];
@@ -3513,7 +2950,6 @@ function useLoadDocumentDetector(_a) {
   var _g = React.useState(null),
     modelError = _g[0],
     setModelError = _g[1];
-  var videoRef = React.useContext(CameraStateContext).videoRef;
   React.useEffect(function loadModel() {
     var _this = this;
     setReady(false);
@@ -3822,6 +3258,470 @@ function useFrameLoop(fn, _a) {
   };
 }
 
+function listAvailableCameras(facingMode_1) {
+  return __awaiter(this, arguments, void 0, function (facingMode, requestMicAccess) {
+    var cameraEnumerationStream, videoDevices;
+    if (requestMicAccess === void 0) {
+      requestMicAccess = false;
+    }
+    return __generator(this, function (_a) {
+      switch (_a.label) {
+        case 0:
+          return [4 /*yield*/, navigator.mediaDevices.getUserMedia({
+            video: {
+              facingMode: {
+                exact: facingMode
+              }
+            },
+            audio: requestMicAccess
+          })
+          // This lists all available cameras attached to the user's device.
+          ];
+        case 1:
+          cameraEnumerationStream = _a.sent();
+          return [4 /*yield*/, navigator.mediaDevices.enumerateDevices()];
+        case 2:
+          videoDevices = _a.sent().filter(function (_a) {
+            var kind = _a.kind;
+            return kind === 'videoinput';
+          });
+          // Release the access to the user's camera that we obtained for enumeration purposes.
+          cameraEnumerationStream.getVideoTracks().forEach(function (track) {
+            track.enabled = false;
+            track.stop();
+          });
+          cameraEnumerationStream = null;
+          return [2 /*return*/, videoDevices];
+      }
+    });
+  });
+}
+var frontCameraLabels = ['front', 'avant', 'anteriore', 'cameraaanvoorzijde', 'kamerapåframsidan', 'forsidekamera', 'kamerapåforsiden', 'aparatprzedni', 'etukamera', 'kameradepan', 'ÖnKamera', 'cameramặttrước', 'camerăfață', 'prednákamera', 'prednjakamera', 'előlapikamera', 'přednífotoaparát', 'μπροστινήκάμερα', 'переднякамера', 'передняякамера', 'преднакамера', 'алдыңғыкамера', 'מצלמה קדמית', 'الكاميرا الأمامية', 'फ़्रंटकैमरा', '前置相机', '前置鏡頭', '前面カメラ', '전면카메라', 'กล้องด้านหน้า'].map(function (s) {
+  return s.toLocaleLowerCase().split(' ').join('');
+});
+var rearCameraLabels = ['back', 'rear', 'posterior', 'trasera', 'traseira', 'arrière', 'rückkamera', 'fotocamera(posteriore)', 'cameraaanachterzijde', 'kamerapåbaksidan', 'kamerapåbaksiden', 'bagsidekamera', 'aparattylny', 'takakamera', 'arkakamera', 'kamerabelakang', 'cameramặtsau', 'camerăspate', 'stražnjakamera', 'zadnákamera', 'hátoldalikamera', 'zadnífotoaparát', 'πίσωκάμερα', 'заднякамера', 'Задняякамера', 'заднакамера', 'артқыкамера', 'מצלמה אחורית', 'الكاميرا الخلفية', 'बैककैमरा', '后置相机', '後置鏡頭', '背面カメラ', '후면카메라', 'กล้องด้านหลัง'].map(function (s) {
+  return s.toLocaleLowerCase().split(' ').join('');
+});
+var backUltraWideCameraLabels = ['backdualwidecamera', 'backultrawidecamera', 'ultraampliaposterior', 'ultra-angulartraseira', 'ultragrandeangulartraseira', 'ultragrandangle', 'ultragranangular', 'ultra-weitwinkelkamera', 'ultra-grandangolo', 'ultrabredecameraaanachterzijde', 'ultravidvinkelkamerapåbaksidan', 'ultravidvinkelkameraetpåbagsiden', 'ultravidvinkelkamerabak', 'ultragenişkameraarkayüzü', 'ultralaajakulmainentakakamera', 'tylnyaparatultraszerokokątny', 'cameracựcrộngmặtsau', 'camerăcuobiectivultra‑superangularspate', 'ultraszéleslátószögűkamera', 'kameraultralebarbelakang', 'stražnjaultraširokakamera', 'zadníultraširokoúhlýfotoaparát', 'ultraširokouhlá', 'πίσωυπερευρείακάμερα', 'заднянадширококутнакамера', 'Задняясверхширокоугольнаякамера', 'Задна свръх широкоъгълна камера', 'артқыультракеңбұрыштыкамера', 'מצלמה אולטרה רחבה אחורית', 'كاميرا خلفية عريضة جدًا', 'बैकअल्ट्रावाइडकैमरा', '后置超广角相机', '後置超廣角鏡頭相機', '背面超広角カメラ', '후면울트라와이드카메라', 'กล้องด้านหลังอัลตร้าไวด์'].map(function (s) {
+  return s.toLocaleLowerCase().split(' ').join('');
+});
+var cameraLabelMatches = function cameraLabelMatches(labelOrDevice, labelSetOrLabel) {
+  var label = labelOrDevice instanceof MediaDeviceInfo ? getDeviceLabel(labelOrDevice) : labelOrDevice;
+  var labelSet = typeof labelSetOrLabel === 'string' ? [labelSetOrLabel] : labelSetOrLabel;
+  return labelSet.some(function (l) {
+    return label.includes(l);
+  });
+};
+var getDeviceLabel = function getDeviceLabel(deviceInfo) {
+  return deviceInfo.label.toLocaleLowerCase().split(' ').join('');
+};
+var currentCamera;
+function obtainCameraAccess(stream, deviceLabel, video) {
+  releaseCameraAccess();
+  log('obtaining camera access...');
+  var _a = stream.getVideoTracks()[0].getSettings(),
+    width = _a.width,
+    height = _a.height;
+  log('camera dimensions', width, height);
+  var label = deviceLabel.toLocaleLowerCase().split(' ').join('');
+  log('camera label', label);
+  var isRearFacing = cameraLabelMatches(label, __spreadArray(__spreadArray(__spreadArray([], rearCameraLabels, true), backUltraWideCameraLabels, true), ['iphone'], false));
+  log('is rear facing?', isRearFacing);
+  var release = function release() {
+    stream.getTracks().forEach(function (track) {
+      track.enabled = false;
+      track.stop();
+    });
+    if (video) {
+      video.pause();
+      video.srcObject = null;
+      video.src = '';
+    }
+  };
+  width || (width = 0);
+  height || (height = 0);
+  currentCamera = {
+    label: deviceLabel,
+    stream: stream,
+    width: width,
+    height: height,
+    isRearFacing: isRearFacing,
+    release: release
+  };
+  log('camera access granted');
+  if (video) video.srcObject = stream;
+  log('video source initialized');
+  return currentCamera;
+}
+function releaseCameraAccess() {
+  if (!currentCamera) return;
+  log('releasing camera access...');
+  currentCamera.release();
+  currentCamera = undefined;
+}
+
+var initialState$5 = {
+  videoRef: {
+    current: null
+  },
+  videoLoaded: false,
+  videoStream: null,
+  videoDevice: null,
+  isRearFacing: false,
+  camera: null,
+  cameraReady: false,
+  cameraAccessDenied: false,
+  iphoneContinuityCameraAvailable: false,
+  iphoneContinuityCameraDenied: false,
+  preferIphoneContinuityCamera: true,
+  audioStream: null,
+  microphoneReady: false,
+  microphoneAccessDenied: false
+};
+var createCameraStore = function createCameraStore(config) {
+  var store = zustand.createStore(function (set, get) {
+    return _assign(_assign(_assign({}, initialState$5), config), {
+      reset: function reset() {
+        return set(_assign(_assign({}, initialState$5), config));
+      },
+      setConfig: function setConfig(config) {
+        return set(config);
+      },
+      onVideoMounted: function onVideoMounted() {
+        return set({
+          videoLoaded: true
+        });
+      },
+      setIphoneContinuityCameraAllowed: function setIphoneContinuityCameraAllowed(value) {
+        return set({
+          preferIphoneContinuityCamera: value
+        });
+      },
+      requestCameraAccess: function requestCameraAccess() {
+        return __awaiter(this, void 0, void 0, function () {
+          var _a, releaseCameraAccess, preferIphoneContinuityCamera, iphoneContinuityCameraDenied, availableCameras, selectedCamera, platform_1, iphoneContinuityCamera, constraints, stream, e_1, iphoneContinuityCameraAvailable_1, handleStreamEnded_1, camera, e_3;
+          var _b, _c, _d;
+          return __generator(this, function (_e) {
+            switch (_e.label) {
+              case 0:
+                _a = get(), releaseCameraAccess = _a.releaseCameraAccess, preferIphoneContinuityCamera = _a.preferIphoneContinuityCamera, iphoneContinuityCameraDenied = _a.iphoneContinuityCameraDenied;
+                releaseCameraAccess();
+                _e.label = 1;
+              case 1:
+                _e.trys.push([1, 11,, 12]);
+                return [4 /*yield*/, listAvailableCameras()];
+              case 2:
+                availableCameras = _e.sent();
+                selectedCamera = void 0;
+                debug('availableCameras', availableCameras);
+                platform_1 = getPlatform();
+                debug('platformDetails', platform_1);
+                if (!iphoneContinuityCameraDenied && (!(platform_1 === null || platform_1 === void 0 ? void 0 : platform_1.os) || platform_1.os.family === 'OS X')) {
+                  iphoneContinuityCamera = availableCameras.find(function (deviceInfo) {
+                    return cameraLabelMatches(deviceInfo, 'iphone');
+                  });
+                  set({
+                    iphoneContinuityCameraAvailable: !!iphoneContinuityCamera
+                  });
+                  if (iphoneContinuityCamera && preferIphoneContinuityCamera) {
+                    selectedCamera = iphoneContinuityCamera;
+                  }
+                } else if (((_b = platform_1 === null || platform_1 === void 0 ? void 0 : platform_1.os) === null || _b === void 0 ? void 0 : _b.family) === 'Android' || availableCameras.every(function (c) {
+                  return c.label.startsWith('camera2 ');
+                })) {
+                  availableCameras = availableCameras.sort(function (a, b) {
+                    return a.label.toLowerCase().localeCompare(b.label.toLowerCase());
+                  });
+                  debug('cameras have been sorted', availableCameras);
+                }
+                if (config.preferFrontFacingCamera) {
+                  selectedCamera = availableCameras.find(function (deviceInfo) {
+                    return cameraLabelMatches(deviceInfo, frontCameraLabels);
+                  });
+                }
+                selectedCamera || (selectedCamera = availableCameras.find(function (deviceInfo) {
+                  return cameraLabelMatches(deviceInfo, 'backtriplecamera');
+                }));
+                selectedCamera || (selectedCamera = availableCameras.find(function (deviceInfo) {
+                  return cameraLabelMatches(deviceInfo, 'backdualcamera');
+                }));
+                selectedCamera || (selectedCamera = availableCameras.find(function (deviceInfo) {
+                  return cameraLabelMatches(deviceInfo, rearCameraLabels) && !cameraLabelMatches(deviceInfo, backUltraWideCameraLabels);
+                }));
+                selectedCamera || (selectedCamera = availableCameras.find(function (deviceInfo) {
+                  return cameraLabelMatches(deviceInfo, rearCameraLabels);
+                }));
+                // on iOS, the front facing camera always is at the first position in the list, so we skip it if all else fails.
+                if (!config.preferFrontFacingCamera && ((_c = platform_1 === null || platform_1 === void 0 ? void 0 : platform_1.os) === null || _c === void 0 ? void 0 : _c.family) === 'iOS' && availableCameras.length > 0) {
+                  selectedCamera || (selectedCamera = availableCameras[1]);
+                }
+                selectedCamera || (selectedCamera = availableCameras[0]);
+                debug('selectedCamera', selectedCamera);
+                set({
+                  videoDevice: selectedCamera
+                });
+                constraints = {
+                  audio: false,
+                  video: {
+                    deviceId: {
+                      exact: selectedCamera.deviceId
+                    },
+                    width: {
+                      ideal: config.maxVideoWidth
+                    },
+                    aspectRatio: 1.777777778,
+                    frameRate: {}
+                  }
+                };
+                if (config.maxFps) {
+                  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                  // @ts-ignore
+                  constraints.video.frameRate = {
+                    max: config.maxFps
+                  };
+                }
+                stream = null;
+                _e.label = 3;
+              case 3:
+                _e.trys.push([3, 5,, 6]);
+                debug('obtaining camera access with constraints', constraints);
+                return [4 /*yield*/, navigator.mediaDevices.getUserMedia(constraints)];
+              case 4:
+                stream = _e.sent();
+                return [3 /*break*/, 6];
+              case 5:
+                e_1 = _e.sent();
+                if (e_1.name === 'NotAllowedError') {
+                  if (preferIphoneContinuityCamera) {
+                    set({
+                      iphoneContinuityCameraAvailable: false,
+                      iphoneContinuityCameraDenied: true
+                    });
+                  } else {
+                    set({
+                      cameraAccessDenied: true
+                    });
+                  }
+                  return [2 /*return*/];
+                }
+                return [3 /*break*/, 6];
+              case 6:
+                if (!!stream) return [3 /*break*/, 10];
+                _e.label = 7;
+              case 7:
+                _e.trys.push([7, 9,, 10]);
+                return [4 /*yield*/, navigator.mediaDevices.getUserMedia({
+                  audio: false,
+                  video: true
+                })];
+              case 8:
+                stream = _e.sent();
+                debug('opened stream with no width and height constraints');
+                return [3 /*break*/, 10];
+              case 9:
+                _e.sent();
+                debug('cannot open stream at all');
+                return [3 /*break*/, 10];
+              case 10:
+                if (!stream) {
+                  error('failed to open camera');
+                  throw new Error('failed to open camera');
+                }
+                debug('camera access granted with constraints', constraints);
+                iphoneContinuityCameraAvailable_1 = get().iphoneContinuityCameraAvailable;
+                handleStreamEnded_1 = function handleStreamEnded_1() {
+                  if (iphoneContinuityCameraAvailable_1 && preferIphoneContinuityCamera) {
+                    debug('someone unplugged the continuity camera');
+                    releaseCameraAccess();
+                    set({
+                      videoStream: null,
+                      videoDevice: null,
+                      iphoneContinuityCameraAvailable: false,
+                      iphoneContinuityCameraDenied: true
+                    });
+                  } else {
+                    debug('someone unplugged the webcam');
+                    releaseCameraAccess();
+                    set({
+                      videoStream: null,
+                      videoDevice: null,
+                      videoLoaded: false,
+                      cameraAccessDenied: true
+                    });
+                  }
+                };
+                (_d = config.videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('ended', handleStreamEnded_1);
+                stream.getVideoTracks().forEach(function (track) {
+                  track.onended = handleStreamEnded_1;
+                });
+                camera = obtainCameraAccess(stream, selectedCamera.label, config.videoRef.current);
+                set({
+                  camera: camera,
+                  cameraReady: true,
+                  isRearFacing: camera.isRearFacing,
+                  videoStream: stream
+                });
+                return [3 /*break*/, 12];
+              case 11:
+                e_3 = _e.sent();
+                if (e_3.name === 'NotAllowedError') {
+                  error('camera access has been blocked by the user', e_3);
+                  set({
+                    cameraAccessDenied: true
+                  });
+                } else {
+                  error('camera access encountered some other error', e_3);
+                  throw e_3;
+                }
+                return [3 /*break*/, 12];
+              case 12:
+                return [2 /*return*/];
+            }
+          });
+        });
+      },
+      releaseCameraAccess: function releaseCameraAccess() {
+        return __awaiter(this, void 0, void 0, function () {
+          var camera;
+          return __generator(this, function (_a) {
+            camera = get().camera;
+            if (!camera) return [2 /*return*/];
+            camera.release();
+            set({
+              camera: null,
+              cameraReady: false,
+              cameraAccessDenied: false
+            });
+            return [2 /*return*/];
+          });
+        });
+      },
+      requestMicrophoneAccess: function requestMicrophoneAccess() {
+        return __awaiter(this, void 0, void 0, function () {
+          var stream;
+          return __generator(this, function (_a) {
+            switch (_a.label) {
+              case 0:
+                get().releaseMicrophoneAccess();
+                _a.label = 1;
+              case 1:
+                _a.trys.push([1, 3,, 4]);
+                return [4 /*yield*/, navigator.mediaDevices.getUserMedia({
+                  audio: true,
+                  video: false
+                })];
+              case 2:
+                stream = _a.sent();
+                set({
+                  audioStream: stream,
+                  microphoneReady: true
+                });
+                stream.getAudioTracks().forEach(function (track) {
+                  track.onended = function () {
+                    set({
+                      microphoneAccessDenied: true
+                    });
+                  };
+                });
+                return [3 /*break*/, 4];
+              case 3:
+                _a.sent();
+                set({
+                  microphoneAccessDenied: true
+                });
+                return [3 /*break*/, 4];
+              case 4:
+                return [2 /*return*/];
+            }
+          });
+        });
+      },
+      releaseMicrophoneAccess: function releaseMicrophoneAccess() {
+        var _a;
+        var audioStream = get().audioStream;
+        (_a = audioStream === null || audioStream === void 0 ? void 0 : audioStream.stop) === null || _a === void 0 ? void 0 : _a.call(audioStream);
+        audioStream === null || audioStream === void 0 ? void 0 : audioStream.getAudioTracks().forEach(function (track) {
+          var _a;
+          (_a = track.stop) === null || _a === void 0 ? void 0 : _a.call(track);
+        });
+        set({
+          audioStream: null,
+          microphoneReady: false,
+          microphoneAccessDenied: false
+        });
+      }
+    });
+  });
+  if (config.requestAccessAutomatically) {
+    store.getState().requestCameraAccess();
+  }
+  if (config.requireMicrophoneAccess) {
+    store.getState().requestMicrophoneAccess();
+  }
+  return _assign(_assign({}, store), {
+    destroy: function destroy() {
+      store.getState().releaseCameraAccess();
+      store.getState().releaseMicrophoneAccess();
+    }
+  });
+};
+var CameraStoreContext = /*#__PURE__*/React.createContext(undefined);
+function CameraStoreProvider(_a) {
+  var children = _a.children,
+    _b = _a.requestAccessAutomatically,
+    requestAccessAutomatically = _b === void 0 ? true : _b,
+    _c = _a.preferIphoneContinuityCamera,
+    preferIphoneContinuityCamera = _c === void 0 ? true : _c,
+    _d = _a.preferFrontFacingCamera,
+    preferFrontFacingCamera = _d === void 0 ? false : _d,
+    _e = _a.maxVideoWidth,
+    maxVideoWidth = _e === void 0 ? 1920 : _e,
+    maxFps = _a.maxFps,
+    onCameraAccessDenied = _a.onCameraAccessDenied,
+    onMicrophoneAccessDenied = _a.onMicrophoneAccessDenied,
+    _f = _a.requireMicrophoneAccess,
+    requireMicrophoneAccess = _f === void 0 ? false : _f;
+  var videoRef = React.useRef(null);
+  var store = React.useRef();
+  store.current || (store.current = createCameraStore({
+    videoRef: videoRef,
+    requestAccessAutomatically: requestAccessAutomatically,
+    preferIphoneContinuityCamera: preferIphoneContinuityCamera,
+    preferFrontFacingCamera: preferFrontFacingCamera,
+    maxVideoWidth: maxVideoWidth,
+    maxFps: maxFps,
+    onCameraAccessDenied: onCameraAccessDenied,
+    onMicrophoneAccessDenied: onMicrophoneAccessDenied,
+    requireMicrophoneAccess: requireMicrophoneAccess
+  }));
+  React.useEffect(function () {
+    var _a, _b, _c;
+    var state = (_a = store.current) === null || _a === void 0 ? void 0 : _a.getState();
+    if (!state) return;
+    if (preferIphoneContinuityCamera !== (state === null || state === void 0 ? void 0 : state.preferIphoneContinuityCamera) || preferFrontFacingCamera !== (state === null || state === void 0 ? void 0 : state.preferFrontFacingCamera)) {
+      (_b = store.current) === null || _b === void 0 ? void 0 : _b.setState({
+        preferIphoneContinuityCamera: preferIphoneContinuityCamera,
+        preferFrontFacingCamera: preferFrontFacingCamera
+      });
+      (_c = store.current) === null || _c === void 0 ? void 0 : _c.getState().requestCameraAccess();
+    }
+  }, [preferFrontFacingCamera, preferIphoneContinuityCamera]);
+  React.useEffect(function () {
+    return function () {
+      var _a;
+      return (_a = store.current) === null || _a === void 0 ? void 0 : _a.destroy();
+    };
+  }, []);
+  return /*#__PURE__*/React__namespace.default.createElement(CameraStoreContext.Provider, {
+    value: store.current
+  }, children);
+}
+function useCameraStore(selector) {
+  var store = React.useContext(CameraStoreContext);
+  if (!store) throw new Error('useCameraStore cannot be used without Provider');
+  return zustand.useStore(store, selector);
+}
+
 var DocumentDetectionModelContext = /*#__PURE__*/React.createContext({
   startDocumentDetection: function startDocumentDetection() {
     return null;
@@ -3867,7 +3767,7 @@ function DocumentDetectionModelProvider(_a) {
     _g = _a.documentDetectionModelLoadTimeoutMs,
     documentDetectionModelLoadTimeoutMs = _g === void 0 ? defaultDocumentDetectionModelLoadTimeoutMs : _g,
     onDocumentDetectionModelError = _a.onDocumentDetectionModelError;
-  var _h = React.useContext(CameraStateContext),
+  var _h = useCameraStore(),
     videoRef = _h.videoRef,
     videoLoaded = _h.videoLoaded,
     cameraReady = _h.cameraReady;
@@ -3890,7 +3790,8 @@ function DocumentDetectionModelProvider(_a) {
       modelPath: documentDetectionModelPath,
       modelLoadTimeoutMs: documentDetectionModelLoadTimeoutMs,
       scoreThreshold: documentDetectionModelScoreThreshold,
-      onModelError: onDocumentDetectionModelError
+      onModelError: onDocumentDetectionModelError,
+      videoRef: videoRef
     }),
     ready = _o.ready,
     modelDownloadProgress = _o.modelDownloadProgress,
@@ -4007,10 +3908,12 @@ function FocusModelProvider(_a) {
   var _e = React.useState({}),
     focusThresholds = _e[0],
     setFocusThresholds = _e[1];
+  var videoRef = useCameraStore().videoRef;
   var _f = useLoadFocusModel({
       modelPath: focusModelPath,
       modelLoadTimeoutMs: focusModelLoadTimeoutMs,
-      onModelError: onFocusModelError
+      onModelError: onFocusModelError,
+      videoRef: videoRef
     }),
     ready = _f.ready,
     modelDownloadProgress = _f.modelDownloadProgress,
@@ -4682,12 +4585,12 @@ function DebugStatsPane(_a) {
   if (!portalLocation) return element;
   return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
 }
-var DebugStatsPaneDiv = styled__default.default.span(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\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"], ["\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"])));
-var ObjectDetectionDebugOverlayDiv = styled__default.default.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1001;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"], ["\n  position: absolute;\n  z-index: 1001;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"])), function (_a) {
+var DebugStatsPaneDiv = styled__default.default.span(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\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"], ["\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"])));
+var ObjectDetectionDebugOverlayDiv = styled__default.default.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1001;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n  transform-style: preserve-3d;\n"], ["\n  position: absolute;\n  z-index: 1001;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n  transform-style: preserve-3d;\n"])), function (_a) {
   var $flipX = _a.$flipX;
   return $flipX ? 'transform: scaleX(-1);' : '';
 });
-var ObjectDetectionDebugBox = styled__default.default.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n  font: 10px monospace;\n  position: absolute;\n  border: 3px solid ", ";\n  color: ", ";\n  ", "\n"], ["\n  font: 10px monospace;\n  position: absolute;\n  border: 3px solid ", ";\n  color: ", ";\n  ", "\n"])), function (_a) {
+var ObjectDetectionDebugBox = styled__default.default.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n  font: 10px monospace;\n  position: absolute;\n  border: 3px solid ", ";\n  color: ", ";\n  ", "\n  transform-style: preserve-3d;\n"], ["\n  font: 10px monospace;\n  position: absolute;\n  border: 3px solid ", ";\n  color: ", ";\n  ", "\n  transform-style: preserve-3d;\n"])), function (_a) {
   var $color = _a.$color;
   return $color !== null && $color !== void 0 ? $color : 'green';
 }, function (_a) {
@@ -4697,7 +4600,7 @@ var ObjectDetectionDebugBox = styled__default.default.div(templateObject_3$n ||
   var $flipX = _a.$flipX;
   return $flipX ? 'transform: scaleX(-1);' : '';
 });
-var FaceDetectionKeypointMarker = styled__default.default.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border: 2px solid ", ";\n  font: 10px monospace;\n  color: ", ";\n  border-radius: 50%;\n  ", "\n"], ["\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border: 2px solid ", ";\n  font: 10px monospace;\n  color: ", ";\n  border-radius: 50%;\n  ", "\n"])), function (_a) {
+var FaceDetectionKeypointMarker = styled__default.default.div(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border: 2px solid ", ";\n  font: 10px monospace;\n  color: ", ";\n  border-radius: 50%;\n  ", "\n  transform-style: preserve-3d;\n"], ["\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border: 2px solid ", ";\n  font: 10px monospace;\n  color: ", ";\n  border-radius: 50%;\n  ", "\n  transform-style: preserve-3d;\n"])), function (_a) {
   var $color = _a.$color;
   return $color !== null && $color !== void 0 ? $color : 'red';
 }, function (_a) {
@@ -4888,7 +4791,7 @@ function SelfieCaptureFaceKeypoint(_a) {
     }
   });
 }
-var templateObject_1$D, templateObject_2$w, templateObject_3$n, templateObject_4$h;
+var templateObject_1$F, templateObject_2$y, templateObject_3$p, templateObject_4$j;
 
 var enTranslation = {};
 
@@ -5065,7 +4968,7 @@ function useTranslations(verbiage, fallbacks) {
   }, [fallbacks, i18n.language, t, verbiage]);
 }
 
-var GuidanceMessageContainerDiv = styled__default.default.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  position: absolute;\n  top: calc(", ");\n  ", "\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"], ["\n  position: absolute;\n  top: calc(", ");\n  ", "\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"])), function (_a) {
+var GuidanceMessageContainerDiv = styled__default.default.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  position: absolute;\n  top: calc(", ");\n  ", "\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"], ["\n  position: absolute;\n  top: calc(", ");\n  ", "\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"])), function (_a) {
   var $top = _a.$top;
   return $top !== null && $top !== void 0 ? $top : '10vh';
 }, function (_a) {
@@ -5078,14 +4981,14 @@ var GuidanceMessageContainer = function GuidanceMessageContainer(props) {
   if (!portalLocation) return element;
   return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
 };
-var GuidanceMessage = styled__default.default.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n  z-index: 10001;\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n  z-index: 10001;\n"])), function (props) {
+var GuidanceMessage = styled__default.default.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n  z-index: 10001;\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n  z-index: 10001;\n"])), function (props) {
   var _a, _b, _c, _d, _e, _f;
   return (_f = (_a = props.$background) !== null && _a !== void 0 ? _a : (_e = (_c = (_b = props.theme) === null || _b === void 0 ? void 0 : _b.guidanceMessages) === null || _c === void 0 ? void 0 : _c[(_d = props.$variant) !== null && _d !== void 0 ? _d : 'default']) === null || _e === void 0 ? void 0 : _e.backgroundColor) !== null && _f !== void 0 ? _f : '#ccc';
 }, function (props) {
   var _a, _b, _c, _d, _e, _f;
   return (_f = (_a = props.$textColor) !== null && _a !== void 0 ? _a : (_e = (_c = (_b = props.theme) === null || _b === void 0 ? void 0 : _b.guidanceMessages) === null || _c === void 0 ? void 0 : _c[(_d = props.$variant) !== null && _d !== void 0 ? _d : 'default']) === null || _e === void 0 ? void 0 : _e.textColor) !== null && _f !== void 0 ? _f : 'black';
 });
-var templateObject_1$C, templateObject_2$v;
+var templateObject_1$E, templateObject_2$x;
 
 function OverrideWrongDocumentTypeGuidanceDialog(_a) {
   var _b = _a.classNames,
@@ -5100,7 +5003,7 @@ function OverrideWrongDocumentTypeGuidanceDialog(_a) {
     buttonText: 'OK'
   });
   if (!state.allowOverrideWrongDocumentTypeGuidance) return null;
-  return /*#__PURE__*/React__namespace.default.createElement(Container$1, {
+  return /*#__PURE__*/React__namespace.default.createElement(Container$2, {
     className: classNames.container
   }, /*#__PURE__*/React__namespace.default.createElement(InnerContainer, {
     className: classNames.inner
@@ -5118,45 +5021,47 @@ function OverrideWrongDocumentTypeGuidanceDialog(_a) {
     }
   }, verbiage.buttonText))));
 }
-var Container$1 = styled__default.default.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  width: 100dvw;\n  background: ", ";\n  color: ", ";\n  display: flex;\n  z-index: 100001;\n"], ["\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  width: 100dvw;\n  background: ", ";\n  color: ", ";\n  display: flex;\n  z-index: 100001;\n"])), function (props) {
+var Container$2 = styled__default.default.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  width: 100dvw;\n  background: ", ";\n  color: ", ";\n  display: flex;\n  z-index: 100001;\n"], ["\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  width: 100dvw;\n  background: ", ";\n  color: ", ";\n  display: flex;\n  z-index: 100001;\n"])), function (props) {
   var _a, _b, _c;
   return (_c = (_b = (_a = props.theme.idCapture) === null || _a === void 0 ? void 0 : _a.overrideWrongDocumentTypeGuidance) === null || _b === void 0 ? void 0 : _b.backgroundColor) !== null && _c !== void 0 ? _c : '#eed202';
 }, function (props) {
   var _a, _b, _c;
   return (_c = (_b = (_a = props.theme.idCapture) === null || _a === void 0 ? void 0 : _a.overrideWrongDocumentTypeGuidance) === null || _b === void 0 ? void 0 : _b.textColor) !== null && _c !== void 0 ? _c : 'black';
 });
-var InnerContainer = styled__default.default.div(templateObject_2$u || (templateObject_2$u = __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__default.default.span(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n  display: block;\n  margin: auto 12px auto 0;\n"], ["\n  display: block;\n  margin: auto 12px auto 0;\n"])));
-var ButtonContainer = styled__default.default.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n  display: flex;\n  margin-left: auto;\n"], ["\n  display: flex;\n  margin-left: auto;\n"])));
-var Button = styled__default.default(LoaderButton)(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n  white-space: nowrap;\n  margin: auto;\n"], ["\n  white-space: nowrap;\n  margin: auto;\n"])));
-var templateObject_1$B, templateObject_2$u, templateObject_3$m, templateObject_4$g, templateObject_5$a;
+var InnerContainer = styled__default.default.div(templateObject_2$w || (templateObject_2$w = __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__default.default.span(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n  display: block;\n  margin: auto 12px auto 0;\n"], ["\n  display: block;\n  margin: auto 12px auto 0;\n"])));
+var ButtonContainer = styled__default.default.div(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n  display: flex;\n  margin-left: auto;\n"], ["\n  display: flex;\n  margin-left: auto;\n"])));
+var Button = styled__default.default(LoaderButton)(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n  white-space: nowrap;\n  margin: auto;\n"], ["\n  white-space: nowrap;\n  margin: auto;\n"])));
+var templateObject_1$D, templateObject_2$w, templateObject_3$o, templateObject_4$i, templateObject_5$b;
 
 var IdCapture = function IdCapture(_a) {
-  var _b, _c, _d, _e, _f, _g, _h, _j;
+  var _b, _c, _d, _e, _f, _g, _h;
   var requiredDocumentType = _a.requiredDocumentType,
-    _k = _a.thresholds,
-    thresholds = _k === void 0 ? defaultIdCaptureThresholds : _k,
+    _j = _a.thresholds,
+    thresholds = _j === void 0 ? defaultIdCaptureThresholds : _j,
     guidanceMessage = _a.guidanceMessage,
     guidanceSatisfied = _a.guidanceSatisfied,
     onCapture = _a.onCapture,
-    _l = _a.classNames,
-    classNames = _l === void 0 ? {} : _l,
-    _m = _a.colors,
-    colors = _m === void 0 ? {} : _m,
-    _o = _a.verbiage,
-    rawVerbiage = _o === void 0 ? {} : _o,
-    _p = _a.debugMode,
-    debugMode = _p === void 0 ? false : _p;
-  var _q = useResizeObserver__default.default(),
-    ref = _q.ref,
-    _r = _q.width,
-    width = _r === void 0 ? 1 : _r,
-    _s = _q.height,
-    height = _s === void 0 ? 1 : _s;
-  var _t = useIdCaptureState(),
-    state = _t[0],
-    dispatch = _t[1];
-  var cameraRef = React.useContext(CameraStateContext).cameraRef;
+    _k = _a.classNames,
+    classNames = _k === void 0 ? {} : _k,
+    _l = _a.colors,
+    colors = _l === void 0 ? {} : _l,
+    _m = _a.verbiage,
+    rawVerbiage = _m === void 0 ? {} : _m,
+    _o = _a.debugMode,
+    debugMode = _o === void 0 ? false : _o;
+  var _p = useResizeObserver__default.default(),
+    ref = _p.ref,
+    _q = _p.width,
+    width = _q === void 0 ? 1 : _q,
+    _r = _p.height,
+    height = _r === void 0 ? 1 : _r;
+  var _s = useIdCaptureState(),
+    state = _s[0],
+    dispatch = _s[1];
+  var _t = useCameraStore(),
+    camera = _t.camera,
+    isRearFacing = _t.isRearFacing;
   var _u = React.useContext(IdCaptureModelsContext),
     modelsReady = _u.ready,
     setThresholds = _u.setThresholds,
@@ -5268,17 +5173,16 @@ var IdCapture = function IdCapture(_a) {
     classNames: classNames.overrideWrongDocumentTypeGuidanceDialog,
     verbiage: rawVerbiage.overrideWrongDocumentTypeGuidanceDialog
   }))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugBoundingBoxOverlay, {
-    "$flipX": !((_j = cameraRef.current) === null || _j === void 0 ? void 0 : _j.isRearFacing),
+    "$flipX": !isRearFacing,
     scaling: debugScalingDetails
   }, state.detectedObjects.map(function (obj, i) {
-    var _a;
     return /*#__PURE__*/React__namespace.default.createElement(IdCaptureDetectedObjectDebugBox, {
       key: i,
       obj: obj,
       scaling: debugScalingDetails,
-      flipX: !((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing)
+      flipX: !isRearFacing
     });
-  }))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__namespace.default.createElement("br", null), state.frameCaptureRate > 0.75 ? '✅' : '👎', " Frame Rate:", ' ', Math.round((state.frameCaptureRate + Number.EPSILON) * 1000) / 1000, ' ', "fps (", detectionTime, "ms doc detect, ", focusPredictionTime, "ms focus)", /*#__PURE__*/React__namespace.default.createElement("br", null), modelsReady ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, state.detectionThresholdMet ? '✅' : '❌', " Detected Document Type: ", state.detectedDocumentType, /*#__PURE__*/React__namespace.default.createElement("br", null), state.idCardFrontDetectionThresholdMet ? '✅' : '❌', " ID Card Front Score: ", state.idCardFrontDetectionScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.idCardBackDetectionThresholdMet ? '✅' : '❌', " ID Card Back Score: ", state.idCardBackDetectionScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.passportDetectionThresholdMet ? '✅' : '❌', " Passport Score: ", state.passportDetectionScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.focusThresholdMet ? '✅' : '❌', " Focus Score:", ' ', state.focusScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.documentInBounds ? '✅' : '❌', " Document In Bounds", /*#__PURE__*/React__namespace.default.createElement("br", null), state.documentIsStable ? '✅' : '❌', " Document Is Stable", /*#__PURE__*/React__namespace.default.createElement("br", null), state.goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', state.goodFramesCount, "/", state.goodFramesThreshold)) : ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u274C Models not ready")))));
+  }))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, camera ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u2705 Camera: ", camera.label, " (", camera.width, "x", camera.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__namespace.default.createElement("br", null), state.frameCaptureRate > 0.75 ? '✅' : '👎', " Frame Rate:", ' ', Math.round((state.frameCaptureRate + Number.EPSILON) * 1000) / 1000, ' ', "fps (", detectionTime, "ms doc detect, ", focusPredictionTime, "ms focus)", /*#__PURE__*/React__namespace.default.createElement("br", null), modelsReady ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, state.detectionThresholdMet ? '✅' : '❌', " Detected Document Type: ", state.detectedDocumentType, /*#__PURE__*/React__namespace.default.createElement("br", null), state.idCardFrontDetectionThresholdMet ? '✅' : '❌', " ID Card Front Score: ", state.idCardFrontDetectionScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.idCardBackDetectionThresholdMet ? '✅' : '❌', " ID Card Back Score: ", state.idCardBackDetectionScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.passportDetectionThresholdMet ? '✅' : '❌', " Passport Score: ", state.passportDetectionScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.focusThresholdMet ? '✅' : '❌', " Focus Score:", ' ', state.focusScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.documentInBounds ? '✅' : '❌', " Document In Bounds", /*#__PURE__*/React__namespace.default.createElement("br", null), state.documentIsStable ? '✅' : '❌', " Document Is Stable", /*#__PURE__*/React__namespace.default.createElement("br", null), state.goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', state.goodFramesCount, "/", state.goodFramesThreshold)) : ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u274C Models not ready")))));
 };
 var timeSince = function timeSince(t) {
   if (!t) return 0;
@@ -5295,7 +5199,9 @@ var CameraAccessDeniedOverlay = function CameraAccessDeniedOverlay(_a) {
     colors = _e === void 0 ? {} : _e,
     _f = _a.verbiage,
     rawVerbiage = _f === void 0 ? {} : _f;
-  var requestCameraAccess = React.useContext(CameraStateContext).requestCameraAccess;
+  var requestCameraAccess = useCameraStore(function (state) {
+    return state.requestCameraAccess;
+  });
   assets.imageUrl || (assets.imageUrl = DEFAULT_CDN_URL + '/camera-disable-icon.png');
   var verbiage = useTranslations(rawVerbiage, {
     headingText: 'Your camera permission is disabled',
@@ -5324,13 +5230,13 @@ var CameraAccessDeniedOverlay = function CameraAccessDeniedOverlay(_a) {
     finished: true
   }, verbiage.retryBtnText)));
 };
-var StyledOverlayInner$3 = styled__default.default(OverlayInner$2)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  max-width: 500px;\n  height: auto;\n  margin: auto;\n"], ["\n  max-width: 500px;\n  height: auto;\n  margin: auto;\n"])));
-var StyledOverlayImageContainer$3 = styled__default.default(OverlayImageContainer)(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  flex-grow: 0;\n"], ["\n  flex-grow: 0;\n"])));
-var Description$4 = styled__default.default.p(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n  line-height: 1.5;\n  margin-bottom: 50px;\n"], ["\n  line-height: 1.5;\n  margin-bottom: 50px;\n"])));
-var RetryButton$1 = styled__default.default(LoaderButton)(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  width: 200px;\n  margin: 0 auto;\n"], ["\n  width: 200px;\n  margin: 0 auto;\n"])));
-var templateObject_1$A, templateObject_2$t, templateObject_3$l, templateObject_4$f;
+var StyledOverlayInner$3 = styled__default.default(OverlayInner$2)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  max-width: 500px;\n  height: auto;\n  margin: auto;\n"], ["\n  max-width: 500px;\n  height: auto;\n  margin: auto;\n"])));
+var StyledOverlayImageContainer$3 = styled__default.default(OverlayImageContainer)(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n  flex-grow: 0;\n"], ["\n  flex-grow: 0;\n"])));
+var Description$4 = styled__default.default.p(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n  line-height: 1.5;\n  margin-bottom: 50px;\n"], ["\n  line-height: 1.5;\n  margin-bottom: 50px;\n"])));
+var RetryButton$1 = styled__default.default(LoaderButton)(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n  width: 200px;\n  margin: 0 auto;\n"], ["\n  width: 200px;\n  margin: 0 auto;\n"])));
+var templateObject_1$C, templateObject_2$v, templateObject_3$n, templateObject_4$h;
 
-var ExitCaptureStyledButton = styled__default.default.button(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  font-size: 20px;\n  width: 32px;\n  height: 32px;\n  font-family: monospace;\n  z-index: 1002;\n  border: none;\n  border-radius: 4px;\n  background: #ccc;\n  cursor: pointer;\n  padding: 8px;\n  box-sizing: border-box;\n  display: flex;\n\n  &:hover {\n    background: #ddd;\n  }\n\n  & > svg {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n"], ["\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  font-size: 20px;\n  width: 32px;\n  height: 32px;\n  font-family: monospace;\n  z-index: 1002;\n  border: none;\n  border-radius: 4px;\n  background: #ccc;\n  cursor: pointer;\n  padding: 8px;\n  box-sizing: border-box;\n  display: flex;\n\n  &:hover {\n    background: #ddd;\n  }\n\n  & > svg {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n"])));
+var ExitCaptureStyledButton = styled__default.default.button(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  font-size: 20px;\n  width: 32px;\n  height: 32px;\n  font-family: monospace;\n  z-index: 1002;\n  border: none;\n  border-radius: 4px;\n  background: #ccc;\n  cursor: pointer;\n  padding: 8px;\n  box-sizing: border-box;\n  display: flex;\n\n  &:hover {\n    background: #ddd;\n  }\n\n  & > svg {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n"], ["\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  font-size: 20px;\n  width: 32px;\n  height: 32px;\n  font-family: monospace;\n  z-index: 1002;\n  border: none;\n  border-radius: 4px;\n  background: #ccc;\n  cursor: pointer;\n  padding: 8px;\n  box-sizing: border-box;\n  display: flex;\n\n  &:hover {\n    background: #ddd;\n  }\n\n  & > svg {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n"])));
 var ExitCaptureButton = function ExitCaptureButton(_a) {
   var onClick = _a.onClick,
     className = _a.className;
@@ -5374,10 +5280,10 @@ var ExitCaptureButton = function ExitCaptureButton(_a) {
     y2: "19.75"
   }))));
 };
-var templateObject_1$z;
+var templateObject_1$B;
 
-var ButtonsRow = styled__default.default.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n  display: flex;\n  gap: 0 15px;\n  justify-content: center;\n"], ["\n  display: flex;\n  gap: 0 15px;\n  justify-content: center;\n"])));
-var templateObject_1$y;
+var ButtonsRow = styled__default.default.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  display: flex;\n  gap: 0 15px;\n  justify-content: center;\n"], ["\n  display: flex;\n  gap: 0 15px;\n  justify-content: center;\n"])));
+var templateObject_1$A;
 
 function IdCaptureLoadingGraphic(props) {
   var isMobile = window.innerHeight > window.innerWidth;
@@ -5406,25 +5312,15 @@ function IdCaptureLoadingGraphicDesktop(_a) {
   var theme = styled.useTheme();
   var accentColor = (_d = (_c = (_b = theme.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.loadingGraphicAccentColor) !== null && _d !== void 0 ? _d : 'var(--idm-color-positive-600)';
   var accentOpacity = (_g = (_f = (_e = theme.idCapture) === null || _e === void 0 ? void 0 : _e.loadingOverlay) === null || _f === void 0 ? void 0 : _f.loadingGraphicAccentOpacity) !== null && _g !== void 0 ? _g : 0.2;
-  return /*#__PURE__*/React__namespace.default.createElement("div", {
-    style: {
-      display: 'flex',
-      width: '100%',
-      height: '100%'
-    }
-  }, /*#__PURE__*/React__namespace.default.createElement("svg", {
+  return /*#__PURE__*/React__namespace.default.createElement(LoadingGraphicWrapper, null, /*#__PURE__*/React__namespace.default.createElement(LoadingGraphicSvg, {
     className: className,
     width: width,
     height: height,
+    "$frame": frame,
+    "$borderColor": accentColor,
     viewBox: "0 0 698 452",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    style: {
-      margin: 'auto',
-      transform: "scale(".concat(frame > 1 ? 1 : frame === 1 ? 1.25 : 0.75, ")"),
-      transition: 'transform 0.2s linear, border-width 0.2s linear',
-      border: "".concat(frame >= 5 ? 10 : 0, "px solid ").concat(accentColor)
-    }
+    xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/React__namespace.default.createElement("g", {
     filter: frame === 1 ? 'url(#filter0_f_91_884)' : undefined
   }, /*#__PURE__*/React__namespace.default.createElement("path", {
@@ -5652,12 +5548,9 @@ function IdCaptureLoadingGraphicMobile(_a) {
     viewBox: "0 0 428 747",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__namespace.default.createElement("g", {
+  }, /*#__PURE__*/React__namespace.default.createElement(LoadingGraphicCardGroup, {
     id: "card",
-    style: {
-      transform: "translate(".concat(frame < 1 ? '-500px' : '0', ", 0)"),
-      transition: 'transform 0.3s linear'
-    }
+    "$offScreen": frame < 1
   }, /*#__PURE__*/React__namespace.default.createElement("path", {
     d: "M76.5001 181.274C76.5001 176.027 80.7534 171.774 86.0001 171.774L342 171.774C347.247 171.774 351.5 176.027 351.5 181.274L351.5 586C351.5 591.247 347.247 595.5 342 595.5L86.0001 595.5C80.7534 595.5 76.5001 591.247 76.5001 586L76.5001 181.274Z",
     fill: "#F3F3F3",
@@ -5840,13 +5733,10 @@ function IdCaptureLoadingGraphicMobile(_a) {
     strokeWidth: "5",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }))), /*#__PURE__*/React__namespace.default.createElement("g", {
+  }))), /*#__PURE__*/React__namespace.default.createElement(LoadingGraphicPhoneGroup, {
     id: "phone",
     clipPath: "url(#clip0_29_1778)",
-    style: {
-      transform: "translate(".concat(frame < 1 ? '40px' : '0', ", 0)"),
-      transition: 'transform 0.3s linear'
-    }
+    "$offScreen": frame < 1
   }, /*#__PURE__*/React__namespace.default.createElement("rect", {
     x: "154",
     y: "693",
@@ -5874,6 +5764,21 @@ function IdCaptureLoadingGraphicMobile(_a) {
     fill: "white"
   }))));
 }
+var LoadingGraphicWrapper = styled__default.default.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  height: 100%;\n"], ["\n  display: flex;\n  width: 100%;\n  height: 100%;\n"])));
+var LoadingGraphicSvg = styled__default.default.svg(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n  margin: auto;\n  transform: scale(\n    ", "\n  );\n  transform-style: preserve-3d;\n  transition:\n    transform 0.2s linear,\n    border-width 0.2s linear;\n  border: ", "px solid\n    ", ";\n"], ["\n  margin: auto;\n  transform: scale(\n    ", "\n  );\n  transform-style: preserve-3d;\n  transition:\n    transform 0.2s linear,\n    border-width 0.2s linear;\n  border: ", "px solid\n    ", ";\n"])), function (props) {
+  return props.$frame > 1 ? 1 : props.$frame === 1 ? 1.25 : 0.75;
+}, function (props) {
+  return props.$frame >= 5 ? 10 : 0;
+}, function (props) {
+  return props.$borderColor;
+});
+var LoadingGraphicCardGroup = styled__default.default.g(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n  transform: translate(", ", 0);\n  transform-style: preserve-3d;\n  transition: transform 0.3s linear;\n"], ["\n  transform: translate(", ", 0);\n  transform-style: preserve-3d;\n  transition: transform 0.3s linear;\n"])), function (props) {
+  return props.$offScreen ? '-500px' : '0';
+});
+var LoadingGraphicPhoneGroup = styled__default.default.g(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n  transform: translate(", ", 0);\n  transform-style: preserve-3d;\n  transition: transform 0.3s linear;\n"], ["\n  transform: translate(", ", 0);\n  transform-style: preserve-3d;\n  transition: transform 0.3s linear;\n"])), function (props) {
+  return props.$offScreen ? '40px' : '0';
+});
+var templateObject_1$z, templateObject_2$u, templateObject_3$m, templateObject_4$g;
 
 function LoadingListItemIndicator(_a) {
   var _b = _a.state,
@@ -5944,7 +5849,7 @@ var IdCaptureLoadingOverlayDefault = function IdCaptureLoadingOverlayDefault(_a)
   var _o = React.useContext(IdCaptureModelsContext),
     modelsReady = _o.ready,
     modelDownloadProgress = _o.modelDownloadProgress;
-  var _p = React.useContext(CameraStateContext),
+  var _p = useCameraStore(),
     cameraReady = _p.cameraReady,
     cameraAccessDenied = _p.cameraAccessDenied,
     iphoneContinuityCameraAvailable = _p.iphoneContinuityCameraAvailable,
@@ -6068,24 +5973,24 @@ var IdCaptureLoadingOverlayDefault = function IdCaptureLoadingOverlayDefault(_a)
     }
   }, verbiage.continueText))))));
 };
-var OverlayInner$1 = styled__default.default.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  color: ", ";\n"], ["\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  color: ", ";\n"])), function (props) {
+var OverlayInner$1 = styled__default.default.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  color: ", ";\n"], ["\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  color: ", ";\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.backgroundColor) !== null && _d !== void 0 ? _d : '#ecedf3';
 }, 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.textColor) !== null && _d !== void 0 ? _d : 'black';
 });
-var OverlayHeader$1 = styled__default.default.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  ", "\n  padding-bottom: 0;\n"], ["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  ", "\n  padding-bottom: 0;\n"])), function (props) {
+var OverlayHeader$1 = styled__default.default.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  ", "\n  padding-bottom: 0;\n"], ["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  ", "\n  padding-bottom: 0;\n"])), function (props) {
   var _a;
   return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
 }, function (props) {
   return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
 });
-var StyledGuidanceMessage$2 = styled__default.default(GuidanceMessage)(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  padding: 16px 24px;\n  margin-top: 16px;\n  font-size: 18px;\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  padding: 16px 24px;\n  margin-top: 16px;\n  font-size: 18px;\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 StyledOverlayImageContainer$2 = styled__default.default(OverlayImageContainer)(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n  padding: 0 0 100px;\n\n  & > svg {\n    height: 100%;\n  }\n"], ["\n  padding: 0 0 100px;\n\n  & > svg {\n    height: 100%;\n  }\n"])));
-var ContinuityCameraCheckboxContainer$1 = styled__default.default.div(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n  position: fixed;\n  bottom: 120px;\n  width: 100dvw;\n  display: flex;\n"], ["\n  position: fixed;\n  bottom: 120px;\n  width: 100dvw;\n  display: flex;\n"])));
-var ContinuityCameraCheckboxInner = styled__default.default(GuidanceMessage)(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\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  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__default.default.input(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n  margin-right: 8px;\n"], ["\n  margin-right: 8px;\n"])));
+var StyledGuidanceMessage$2 = styled__default.default(GuidanceMessage)(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n  padding: 16px 24px;\n  margin-top: 16px;\n  font-size: 18px;\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  padding: 16px 24px;\n  margin-top: 16px;\n  font-size: 18px;\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 StyledOverlayImageContainer$2 = styled__default.default(OverlayImageContainer)(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  padding: 0 0 100px;\n\n  & > svg {\n    height: 100%;\n  }\n"], ["\n  padding: 0 0 100px;\n\n  & > svg {\n    height: 100%;\n  }\n"])));
+var ContinuityCameraCheckboxContainer$1 = styled__default.default.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n  position: fixed;\n  bottom: 120px;\n  width: 100dvw;\n  display: flex;\n"], ["\n  position: fixed;\n  bottom: 120px;\n  width: 100dvw;\n  display: flex;\n"])));
+var ContinuityCameraCheckboxInner = styled__default.default(GuidanceMessage)(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\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  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__default.default.input(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n  margin-right: 8px;\n"], ["\n  margin-right: 8px;\n"])));
 var StyledButtonsRow$a = styled__default.default(ButtonsRow)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding: 15px 25px;\n  height: 100px;\n  color: ", ";\n  ", "\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100dvw;\n  box-sizing: border-box;\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding: 15px 25px;\n  height: 100px;\n  color: ", ";\n  ", "\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100dvw;\n  box-sizing: border-box;\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';
@@ -6111,7 +6016,7 @@ var ProgressIndicator$1 = styled__default.default.span(templateObject_15$1 || (t
   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.progressBarIndicatorColor) !== null && _d !== void 0 ? _d : 'var(--idm-color-positive-600)';
 }, progressBarAnimation);
-var CustomLoadingGraphic$1 = styled__default.default.img(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""])));
+var CustomLoadingGraphic$1 = styled__default.default.img(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  transform-style: preserve-3d;\n"], ["\n  transform-style: preserve-3d;\n"])));
 var ContinueButtonContainer$1 = styled__default.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 var ContinueButton$1 = styled__default.default(LoaderButton)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  margin: auto;\n  white-space: nowrap;\n  ", "\n  ", "\n"], ["\n  margin: auto;\n  white-space: nowrap;\n  ", "\n  ", "\n"])), function (props) {
   var _a, _b, _c, _d, _e, _f;
@@ -6120,10 +6025,10 @@ var ContinueButton$1 = styled__default.default(LoaderButton)(templateObject_18 |
   var _a, _b, _c, _d, _e, _f;
   return ((_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.continueBtnBorder) ? "border: ".concat((_f = (_e = (_d = props.theme) === null || _d === void 0 ? void 0 : _d.idCapture) === null || _e === void 0 ? void 0 : _e.loadingOverlay) === null || _f === void 0 ? void 0 : _f.continueBtnBorder, ";") : '';
 });
-var templateObject_1$x, templateObject_2$s, templateObject_3$k, templateObject_4$e, templateObject_5$9, templateObject_6$7, templateObject_7$4, templateObject_8$2, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16, templateObject_17, templateObject_18;
+var templateObject_1$y, templateObject_2$t, templateObject_3$l, templateObject_4$f, templateObject_5$a, templateObject_6$8, templateObject_7$5, templateObject_8$2, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16, templateObject_17, templateObject_18;
 
-var ContinuityCameraCheckboxContainer = styled__default.default.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  margin-top: 15px;\n  margin-bottom: 15px;\n"], ["\n  margin-top: 15px;\n  margin-bottom: 15px;\n"])));
-var ContinuityCameraCheckbox = styled__default.default.input(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  margin-right: 8px;\n"], ["\n  margin-right: 8px;\n"])));
+var ContinuityCameraCheckboxContainer = styled__default.default.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  margin-top: 15px;\n  margin-bottom: 15px;\n"], ["\n  margin-top: 15px;\n  margin-bottom: 15px;\n"])));
+var ContinuityCameraCheckbox = styled__default.default.input(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  margin-right: 8px;\n"], ["\n  margin-right: 8px;\n"])));
 var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
   var _b, _c, _d, _e;
   var onDismissed = _a.onDismissed,
@@ -6142,7 +6047,14 @@ var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
   var _l = React.useContext(IdCaptureModelsContext),
     modelsReady = _l.ready,
     modelDownloadProgress = _l.modelDownloadProgress;
-  var _m = React.useContext(CameraStateContext),
+  var _m = useCameraStore(shallow.useShallow(function (state) {
+      return {
+        cameraReady: state.cameraReady,
+        cameraAccessDenied: state.cameraAccessDenied,
+        iphoneContinuityCameraAvailable: state.iphoneContinuityCameraAvailable,
+        setIphoneContinuityCameraAllowed: state.setIphoneContinuityCameraAllowed
+      };
+    })),
     cameraReady = _m.cameraReady,
     cameraAccessDenied = _m.cameraAccessDenied,
     iphoneContinuityCameraAvailable = _m.iphoneContinuityCameraAvailable,
@@ -6234,7 +6146,7 @@ var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
     }
   }, cameraReady && modelsReady ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? verbiage.modelsWarmingUpText : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)"))));
 };
-var templateObject_1$w, templateObject_2$r;
+var templateObject_1$x, templateObject_2$s;
 
 var components$1 = {
   "default": IdCaptureLoadingOverlayDefault,
@@ -6292,9 +6204,9 @@ var CapturedDocumentImg = function CapturedDocumentImg(_a) {
   });
 };
 
-var Card = styled__default.default.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  background: white;\n  border-radius: 8px;\n  padding: 24px;\n  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n  margin: auto;\n  max-width: min(500px, 100dvw - 48px);\n  max-height: 100%;\n  overflow: auto;\n  box-sizing: border-box;\n"], ["\n  background: white;\n  border-radius: 8px;\n  padding: 24px;\n  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n  margin: auto;\n  max-width: min(500px, 100dvw - 48px);\n  max-height: 100%;\n  overflow: auto;\n  box-sizing: border-box;\n"])));
-var FlexCard = styled__default.default(Card)(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-var templateObject_1$v, templateObject_2$q;
+var Card = styled__default.default.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  background: white;\n  border-radius: 8px;\n  padding: 24px;\n  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n  margin: auto;\n  max-width: min(500px, 100dvw - 48px);\n  max-height: 100%;\n  overflow: auto;\n  box-sizing: border-box;\n"], ["\n  background: white;\n  border-radius: 8px;\n  padding: 24px;\n  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n  margin: auto;\n  max-width: min(500px, 100dvw - 48px);\n  max-height: 100%;\n  overflow: auto;\n  box-sizing: border-box;\n"])));
+var FlexCard = styled__default.default(Card)(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var templateObject_1$w, templateObject_2$r;
 
 var IdCaptureSuccess = function IdCaptureSuccess(_a) {
   var capturedDocuments = _a.capturedDocuments,
@@ -6369,13 +6281,13 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
     finished: true
   }, verbiage.retryText)))));
 };
-var Heading$a = styled__default.default.h1(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  font-size: 1.5rem;\n  margin-top: 0;\n  margin-bottom: 1.5rem;\n"], ["\n  font-size: 1.5rem;\n  margin-top: 0;\n  margin-bottom: 1.5rem;\n"])));
-var ImagesContainer = styled__default.default(OverlayImageContainer)(templateObject_2$p || (templateObject_2$p = __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__default.default(OverlayImageRow)(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  max-width: 100%;\n  flex-direction: column;\n  display: grid;\n  grid-gap: 12px;\n  //grid-template-columns: 1fr 1fr;\n"], ["\n  max-width: 100%;\n  flex-direction: column;\n  display: grid;\n  grid-gap: 12px;\n  //grid-template-columns: 1fr 1fr;\n"])));
-var ImageCol$1 = styled__default.default.div(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n  width: 100%;\n  max-height: none !important;\n"], ["\n  width: 100%;\n  max-height: none !important;\n"])));
-var StyledImage = styled__default.default(CapturedDocumentImg)(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n  width: 100%;\n  border-radius: 12px;\n"], ["\n  width: 100%;\n  border-radius: 12px;\n"])));
-var DebugPre = styled__default.default.pre(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n  text-align: left;\n  max-width: min(450px, 100dvw - 100px);\n  overflow-x: auto;\n"], ["\n  text-align: left;\n  max-width: min(450px, 100dvw - 100px);\n  overflow-x: auto;\n"])));
-var templateObject_1$u, templateObject_2$p, templateObject_3$j, templateObject_4$d, templateObject_5$8, templateObject_6$6;
+var Heading$a = styled__default.default.h1(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  font-size: 1.5rem;\n  margin-top: 0;\n  margin-bottom: 1.5rem;\n"], ["\n  font-size: 1.5rem;\n  margin-top: 0;\n  margin-bottom: 1.5rem;\n"])));
+var ImagesContainer = styled__default.default(OverlayImageContainer)(templateObject_2$q || (templateObject_2$q = __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__default.default(OverlayImageRow)(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  max-width: 100%;\n  flex-direction: column;\n  display: grid;\n  grid-gap: 12px;\n  //grid-template-columns: 1fr 1fr;\n"], ["\n  max-width: 100%;\n  flex-direction: column;\n  display: grid;\n  grid-gap: 12px;\n  //grid-template-columns: 1fr 1fr;\n"])));
+var ImageCol$1 = styled__default.default.div(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n  width: 100%;\n  max-height: none !important;\n"], ["\n  width: 100%;\n  max-height: none !important;\n"])));
+var StyledImage = styled__default.default(CapturedDocumentImg)(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n  width: 100%;\n  border-radius: 12px;\n"], ["\n  width: 100%;\n  border-radius: 12px;\n"])));
+var DebugPre = styled__default.default.pre(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n  text-align: left;\n  max-width: min(450px, 100dvw - 100px);\n  overflow-x: auto;\n"], ["\n  text-align: left;\n  max-width: min(450px, 100dvw - 100px);\n  overflow-x: auto;\n"])));
+var templateObject_1$v, templateObject_2$q, templateObject_3$k, templateObject_4$e, templateObject_5$9, templateObject_6$7;
 
 function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
   var _this = this;
@@ -6427,10 +6339,10 @@ function resetCanvasDimensions(canvas) {
   canvas.style.height = '0';
 }
 
-var IdCardGuideImageContainer = styled__default.default(IdCardBorder)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  position: relative;\n  ", "\n  box-sizing: border-box;\n"], ["\n  position: relative;\n  ", "\n  box-sizing: border-box;\n"])), function (props) {
+var IdCardGuideImageContainer = styled__default.default(IdCardBorder)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  position: relative;\n  ", "\n  box-sizing: border-box;\n"], ["\n  position: relative;\n  ", "\n  box-sizing: border-box;\n"])), function (props) {
   return props.$isVisible ? '' : 'opacity: 0;';
 });
-var IdCardGuideImage = styled__default.default.img(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (props) {
+var IdCardGuideImage = styled__default.default.img(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  transform-style: preserve-3d;\n  ", "\n  ", "\n"], ["\n  transform-style: preserve-3d;\n  ", "\n  ", "\n"])), function (props) {
   return props.$isMirrored ? 'transform: scaleX(-1);' : '';
 }, function (props) {
   return props.$isInvisible ? 'opacity: 0;' : '';
@@ -6572,16 +6484,16 @@ function IdCardBorderSvg(_a) {
     className: isProgressBar ? "idmSdkProgressBorder ".concat(progressPaused ? 'idmSdkProgressPaused' : '') : ''
   }));
 }
-var IdCardBorderContainer = styled__default.default.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  & > .idmSdkWaves {\n    position: absolute;\n    animation: ", " 2s ease-out infinite;\n\n    &:nth-child(2) {\n      animation-delay: 0.66s;\n    }\n\n    &:nth-child(3) {\n      animation-delay: 1.33s;\n    }\n  }\n"], ["\n  & > .idmSdkWaves {\n    position: absolute;\n    animation: ", " 2s ease-out infinite;\n\n    &:nth-child(2) {\n      animation-delay: 0.66s;\n    }\n\n    &:nth-child(3) {\n      animation-delay: 1.33s;\n    }\n  }\n"])), wavesAnimation);
-var SvgOverlay = styled__default.default.svg(templateObject_4$c || (templateObject_4$c = __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__default.default.rect(templateObject_5$7 || (templateObject_5$7 = __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 IdCardBorderContainer = styled__default.default.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  & > .idmSdkWaves {\n    position: absolute;\n    animation: ", " 2s ease-out infinite;\n    transform-style: preserve-3d;\n\n    &:nth-child(2) {\n      animation-delay: 0.66s;\n    }\n\n    &:nth-child(3) {\n      animation-delay: 1.33s;\n    }\n  }\n"], ["\n  & > .idmSdkWaves {\n    position: absolute;\n    animation: ", " 2s ease-out infinite;\n    transform-style: preserve-3d;\n\n    &:nth-child(2) {\n      animation-delay: 0.66s;\n    }\n\n    &:nth-child(3) {\n      animation-delay: 1.33s;\n    }\n  }\n"])), wavesAnimation);
+var SvgOverlay = styled__default.default.svg(templateObject_4$d || (templateObject_4$d = __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__default.default.rect(templateObject_5$8 || (templateObject_5$8 = __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';
 }, function (props) {
   var _a;
   return (_a = props.$fillMode) !== null && _a !== void 0 ? _a : 'forwards';
 });
-var templateObject_1$t, templateObject_2$o, templateObject_3$i, templateObject_4$c, templateObject_5$7;
+var templateObject_1$u, templateObject_2$p, templateObject_3$j, templateObject_4$d, templateObject_5$8;
 
 var defaultIdCaptureGuideImages = {
   portrait: {
@@ -6687,12 +6599,82 @@ function getOrientation(allowPortraitOnMobile) {
   return allowPortraitOnMobile && window.innerWidth < window.innerHeight ? 'portrait' : 'landscape';
 }
 
-var FlipImageContainer = styled__default.default(IdCardGuideImageContainer)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  backface-visibility: hidden;\n  transition: transform ", "s;\n  transform: ", ";\n  transform-style: preserve-3d;\n  position: absolute;\n  display: block;\n  top: 0;\n  width: 100%;\n  max-height: 100%;\n"], ["\n  backface-visibility: hidden;\n  transition: transform ", "s;\n  transform: ", ";\n  transform-style: preserve-3d;\n  position: absolute;\n  display: block;\n  top: 0;\n  width: 100%;\n  max-height: 100%;\n"])), function (props) {
+var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
+  var _b = _a.idCaptureGuideImages,
+    idCaptureGuideImages = _b === void 0 ? defaultIdCaptureGuideImages : _b,
+    _c = _a.classNames,
+    classNames = _c === void 0 ? {} : _c,
+    borderWidth = _a.borderWidth,
+    borderColor = _a.borderColor,
+    borderRadius = _a.borderRadius,
+    imageStyle = _a.imageStyle;
+  var isRearFacing = useCameraStore(function (state) {
+    return state.isRearFacing;
+  });
+  var isMirrored = !isRearFacing;
+  var _d = React.useState(1),
+    transitionTime = _d[0],
+    setTransitionTime = _d[1];
+  var _e = React.useState(0),
+    rotationAngle = _e[0],
+    setRotationAngle = _e[1];
+  var frontTransforms = ["rotateY(".concat(rotationAngle, "deg)")];
+  if (isMirrored) frontTransforms.push('scaleX(-1)');
+  var backTransforms = ["rotateY(".concat(180 - rotationAngle, "deg)")];
+  if (isMirrored) backTransforms.push('scaleX(-1)');
+  React.useEffect(function () {
+    var timeout;
+    function doFlip() {
+      setTransitionTime(1);
+      setRotationAngle(180);
+      timeout = setTimeout(function () {
+        setTransitionTime(0);
+        setRotationAngle(0);
+      }, 1500);
+    }
+    var interval = setInterval(doFlip, 2500);
+    timeout = setTimeout(doFlip, 250);
+    return function () {
+      clearInterval(interval);
+      clearTimeout(timeout);
+    };
+  }, []);
+  return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(FlipImageContainer, {
+    className: classNames.frontImageContainer,
+    status: "disabled",
+    borderWidth: borderWidth,
+    borderColor: borderColor,
+    borderRadius: borderRadius,
+    "$transforms": frontTransforms.join(' '),
+    "$transitionTime": transitionTime,
+    "$isVisible": true
+  }, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImage, {
+    src: idCaptureGuideImages.landscape.SHOW_ID_FRONT.url,
+    className: classNames.frontImage,
+    alt: "",
+    style: imageStyle
+  })), /*#__PURE__*/React__namespace.default.createElement(FlipImageContainer, {
+    className: classNames.backImageContainer,
+    status: "disabled",
+    borderWidth: borderWidth,
+    borderColor: borderColor,
+    borderRadius: borderRadius,
+    "$transforms": backTransforms.join(' '),
+    "$transitionTime": transitionTime,
+    "$isVisible": true
+  }, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImage, {
+    src: idCaptureGuideImages.landscape.SHOW_ID_BACK.url,
+    className: classNames.backImage,
+    alt: "",
+    style: imageStyle
+  })));
+};
+var FlipImageContainer = styled__default.default(IdCardGuideImageContainer)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  backface-visibility: hidden;\n  transition: transform ", "s;\n  transform: ", ";\n  transform-style: preserve-3d;\n  position: absolute;\n  display: block;\n  top: 0;\n  width: 100%;\n  max-height: 100%;\n"], ["\n  backface-visibility: hidden;\n  transition: transform ", "s;\n  transform: ", ";\n  transform-style: preserve-3d;\n  position: absolute;\n  display: block;\n  top: 0;\n  width: 100%;\n  max-height: 100%;\n"])), function (props) {
   return props.$transitionTime;
 }, function (props) {
   return props.$transforms;
 });
-var templateObject_1$s;
+var templateObject_1$t;
 
 var GuideOrientationContext = /*#__PURE__*/React.createContext({
   orientation: 'landscape',
@@ -6981,10 +6963,10 @@ var regionClsx = function regionClsx(classNames, which) {
     return v;
   }).join(' ');
 };
-var StyledPageContainer = styled__default.default(PageContainerDiv)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  z-index: 1000;\n  overflow-y: hidden;\n"], ["\n  z-index: 1000;\n  overflow-y: hidden;\n"])));
-var GuidesContainer = styled__default.default.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  width: 100dvw;\n  height: 100dvh;\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  width: 100dvw;\n  height: 100dvh;\n"])));
-var GuideCenterRow = styled__default.default.div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-items: center;\n  box-sizing: border-box;\n  max-width: 100%;\n  max-height: 100%;\n  min-height: 0;\n  flex: 1;\n"], ["\n  position: relative;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-items: center;\n  box-sizing: border-box;\n  max-width: 100%;\n  max-height: 100%;\n  min-height: 0;\n  flex: 1;\n"])));
-var GuideRegion = styled__default.default.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n  width: 100%;\n  position: relative;\n  z-index: 1000;\n  background: ", ";\n  color: ", ";\n  text-align: center;\n  ", "\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n  width: 100%;\n  position: relative;\n  z-index: 1000;\n  background: ", ";\n  color: ", ";\n  text-align: center;\n  ", "\n  ", "\n"])), function (props) {
+var StyledPageContainer = styled__default.default(PageContainerDiv)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  z-index: 1000;\n  overflow-y: hidden;\n"], ["\n  z-index: 1000;\n  overflow-y: hidden;\n"])));
+var GuidesContainer = styled__default.default.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  width: 100dvw;\n  height: 100dvh;\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  width: 100dvw;\n  height: 100dvh;\n"])));
+var GuideCenterRow = styled__default.default.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-items: center;\n  box-sizing: border-box;\n  max-width: 100%;\n  max-height: 100%;\n  min-height: 0;\n  flex: 1;\n"], ["\n  position: relative;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-items: center;\n  box-sizing: border-box;\n  max-width: 100%;\n  max-height: 100%;\n  min-height: 0;\n  flex: 1;\n"])));
+var GuideRegion = styled__default.default.div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n  width: 100%;\n  position: relative;\n  z-index: 1000;\n  background: ", ";\n  color: ", ";\n  text-align: center;\n  ", "\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n  width: 100%;\n  position: relative;\n  z-index: 1000;\n  background: ", ";\n  color: ", ";\n  text-align: center;\n  ", "\n  ", "\n"])), function (props) {
   var _a, _b, _c, _d, _e;
   return (_e = (_a = props.$maskColor) !== null && _a !== void 0 ? _a : (_d = (_c = (_b = props.theme) === null || _b === void 0 ? void 0 : _b.idCapture) === null || _c === void 0 ? void 0 : _c.guideOverlay) === null || _d === void 0 ? void 0 : _d.backgroundColor) !== null && _e !== void 0 ? _e : 'rgba(0, 0, 0, 0.5)';
 }, function (props) {
@@ -6995,13 +6977,13 @@ var GuideRegion = styled__default.default.div(templateObject_4$b || (templateObj
 }, function (props) {
   return props.$minHeight ? "min-height: ".concat(props.$minHeight, "px;") : "";
 });
-var Spacer = styled__default.default(GuideRegion)(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n  display: block;\n  width: auto;\n"], ["\n  display: block;\n  width: auto;\n"])));
-var GuideCenterRegion = styled__default.default.div(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n  ", "\n  ", "\n    box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  max-height: 100%;\n  height: 100%;\n"], ["\n  ", "\n  ", "\n    box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  max-height: 100%;\n  height: 100%;\n"])), function (props) {
+var Spacer = styled__default.default(GuideRegion)(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n  display: block;\n  width: auto;\n"], ["\n  display: block;\n  width: auto;\n"])));
+var GuideCenterRegion = styled__default.default.div(templateObject_6$6 || (templateObject_6$6 = __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) {
   return props.$isMirrored ? 'transform: scaleX(-1);' : '';
 });
-var GuideCenterBorder = styled__default.default.div(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  border: ", ";\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  max-height: 100%;\n  min-height: 0;\n  position: relative;\n  ", "\n"], ["\n  box-sizing: border-box;\n  border: ", ";\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  max-height: 100%;\n  min-height: 0;\n  position: relative;\n  ", "\n"])), function (props) {
+var GuideCenterBorder = styled__default.default.div(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  border: ", ";\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  max-height: 100%;\n  min-height: 0;\n  position: relative;\n  ", "\n"], ["\n  box-sizing: border-box;\n  border: ", ";\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  max-height: 100%;\n  min-height: 0;\n  position: relative;\n  ", "\n"])), function (props) {
   var _a, _b;
   return "".concat((_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 4, "px solid ").concat((_b = props.$borderColor) !== null && _b !== void 0 ? _b : 'white');
 }, function (props) {
@@ -7009,7 +6991,7 @@ var GuideCenterBorder = styled__default.default.div(templateObject_7$3 || (templ
 });
 var GuideText = styled__default.default.span(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n  align-content: center;\n  margin-top: 12px;\n  margin-bottom: 12px;\n"], ["\n  align-content: center;\n  margin-top: 12px;\n  margin-bottom: 12px;\n"])));
 var GuideCenterInner = styled__default.default.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n  position: relative;\n  margin: auto;\n"], ["\n  position: relative;\n  margin: auto;\n"])));
-var templateObject_1$r, templateObject_2$n, templateObject_3$h, templateObject_4$b, templateObject_5$6, templateObject_6$5, templateObject_7$3, templateObject_8$1, templateObject_9$1;
+var templateObject_1$s, templateObject_2$o, templateObject_3$i, templateObject_4$c, templateObject_5$7, templateObject_6$6, templateObject_7$4, templateObject_8$1, templateObject_9$1;
 
 var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
   var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
@@ -7152,36 +7134,37 @@ var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
     progress: progress
   }));
 };
-var CanvasWrapper$1 = styled__default.default.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-grow: 1;\n  background-clip: padding-box;\n  box-shadow: inset 0 0 0 2px ", ";\n  z-index: -1;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-grow: 1;\n  background-clip: padding-box;\n  box-shadow: inset 0 0 0 2px ", ";\n  z-index: -1;\n"])), function (props) {
+var CanvasWrapper$1 = styled__default.default.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-grow: 1;\n  background-clip: padding-box;\n  box-shadow: inset 0 0 0 2px ", ";\n  z-index: -1;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-grow: 1;\n  background-clip: padding-box;\n  box-shadow: inset 0 0 0 2px ", ";\n  z-index: -1;\n"])), function (props) {
   return props.$maskColor;
 });
-var Canvas$1 = styled__default.default.canvas(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
-var templateObject_1$q, templateObject_2$m;
+var Canvas$1 = styled__default.default.canvas(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
+var templateObject_1$r, templateObject_2$n;
 
 function IdCaptureGuides(_a) {
-  var _b, _c;
-  var _d = _a.guideType,
-    guideType = _d === void 0 ? 'fit' : _d,
-    _e = _a.status,
-    status = _e === void 0 ? 'ready' : _e,
-    _f = _a.progress,
-    progress = _f === void 0 ? 0 : _f,
-    _g = _a.portraitGuidesOnMobile,
-    portraitGuidesOnMobile = _g === void 0 ? true : _g,
-    _h = _a.requestedAction,
-    requestedAction = _h === void 0 ? 'SHOW_ID_FRONT' : _h,
-    _j = _a.isBackToFront,
-    isBackToFront = _j === void 0 ? false : _j,
-    _k = _a.images,
-    images = _k === void 0 ? defaultIdCaptureGuideImages : _k,
-    _l = _a.classNames,
-    classNames = _l === void 0 ? {} : _l,
-    _m = _a.colors,
-    colors = _m === void 0 ? {} : _m,
-    _o = _a.verbiage,
-    rawVerbiage = _o === void 0 ? {} : _o;
+  var _b = _a.guideType,
+    guideType = _b === void 0 ? 'fit' : _b,
+    _c = _a.status,
+    status = _c === void 0 ? 'ready' : _c,
+    _d = _a.progress,
+    progress = _d === void 0 ? 0 : _d,
+    _e = _a.portraitGuidesOnMobile,
+    portraitGuidesOnMobile = _e === void 0 ? true : _e,
+    _f = _a.requestedAction,
+    requestedAction = _f === void 0 ? 'SHOW_ID_FRONT' : _f,
+    _g = _a.isBackToFront,
+    isBackToFront = _g === void 0 ? false : _g,
+    _h = _a.images,
+    images = _h === void 0 ? defaultIdCaptureGuideImages : _h,
+    _j = _a.classNames,
+    classNames = _j === void 0 ? {} : _j,
+    _k = _a.colors,
+    colors = _k === void 0 ? {} : _k,
+    _l = _a.verbiage,
+    rawVerbiage = _l === void 0 ? {} : _l;
   var state = useIdCaptureState()[0];
-  var cameraRef = React.useContext(CameraStateContext).cameraRef;
+  var isRearFacing = useCameraStore(function (state) {
+    return state.isRearFacing;
+  });
   var verbiage = useTranslations(rawVerbiage, {
     instructionText: 'Scan the front of ID',
     capturingText: 'Capturing...',
@@ -7193,7 +7176,7 @@ function IdCaptureGuides(_a) {
     status: status,
     progress: progress,
     instruction: state.captureFailed ? verbiage.captureFailedText : state.capturing ? verbiage === null || verbiage === void 0 ? void 0 : verbiage.capturingText : verbiage.instructionText,
-    isMirrored: !((_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing),
+    isMirrored: !isRearFacing,
     borderColor: state.isGoodFrame ? colors.guideBoxSatisfiedColor : colors.guideBoxUnsatisfiedColor,
     imageVisible: requestedAction === 'FLIP_ID' || !state.idCardFrontDetectionThresholdMet || !state.documentInBounds || state.documentTooClose
   })), guideType === 'fit' && ( /*#__PURE__*/React__namespace.default.createElement(IdCaptureFitGuide, {
@@ -7203,7 +7186,7 @@ function IdCaptureGuides(_a) {
     status: status,
     progress: progress,
     instruction: state.captureFailed ? verbiage.captureFailedText : state.capturing ? verbiage === null || verbiage === void 0 ? void 0 : verbiage.capturingText : verbiage.instructionText,
-    isMirrored: !((_c = cameraRef.current) === null || _c === void 0 ? void 0 : _c.isRearFacing),
+    isMirrored: !isRearFacing,
     isBackToFront: isBackToFront,
     portraitGuidesOnMobile: portraitGuidesOnMobile,
     borderColor: state.isGoodFrame ? colors.guideBoxSatisfiedColor : colors.guideBoxUnsatisfiedColor,
@@ -7296,53 +7279,11 @@ var SelfieProgressPreview = function SelfieProgressPreview(_a) {
     onError: onError
   })));
 };
-var StyledSpinner = styled__default.default(Spinner)(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  position: relative;\n  top: 4px;\n  left: -3px;\n  margin: 0 3px 0 -12px;\n"], ["\n  position: relative;\n  top: 4px;\n  left: -3px;\n  margin: 0 3px 0 -12px;\n"])));
-var ImagePreviewWrapper = styled__default.default.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  height: 33%;\n  bottom: 12px;\n  right: 12px;\n"], ["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  height: 33%;\n  bottom: 12px;\n  right: 12px;\n"])));
-var ImagePreviewText = styled__default.default.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  display: block;\n  position: absolute;\n  top: -32px;\n  font:\n    14px -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif,\n    'Apple Color Emoji',\n    'Segoe UI Emoji',\n    'Segoe UI Symbol';\n  color: white;\n  text-align: center;\n  margin: 0 auto;\n  width: 100%;\n"], ["\n  display: block;\n  position: absolute;\n  top: -32px;\n  font:\n    14px -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif,\n    'Apple Color Emoji',\n    'Segoe UI Emoji',\n    'Segoe UI Symbol';\n  color: white;\n  text-align: center;\n  margin: 0 auto;\n  width: 100%;\n"])));
-var ImagePreviewImageWrapper = styled__default.default.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  position: relative;\n  height: calc(100% - 8px);\n  padding: 4px;\n  border-radius: 4px;\n  background: white;\n\n  & > img {\n    border-radius: 4px;\n    width: auto;\n    max-height: 100%;\n  }\n"], ["\n  position: relative;\n  height: calc(100% - 8px);\n  padding: 4px;\n  border-radius: 4px;\n  background: white;\n\n  & > img {\n    border-radius: 4px;\n    width: auto;\n    max-height: 100%;\n  }\n"])));
-var templateObject_1$p, templateObject_2$l, templateObject_3$g, templateObject_4$a;
-
-var CameraVideoTag = function CameraVideoTag(_a) {
-  var _b;
-  var className = _a.className;
-  var _c = React.useContext(CameraStateContext),
-    videoRef = _c.videoRef,
-    setVideoLoaded = _c.setVideoLoaded,
-    onVideoUnmounted = _c.onVideoUnmounted,
-    cameraRef = _c.cameraRef;
-  React.useEffect(function notifyCameraProviderOfUnmount() {
-    var videoElement = videoRef.current;
-    if (!videoElement) return;
-    return function () {
-      onVideoUnmounted(videoElement);
-    };
-  }, [onVideoUnmounted, videoRef]);
-  React.useEffect(function setVideoLoadedToFalseOnMount() {
-    setVideoLoaded(false);
-  }, [setVideoLoaded]);
-  React.useEffect(function attachCameraStreamToVideoTagWhenReady() {
-    var _a;
-    if (videoRef.current && ((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.stream)) {
-      videoRef.current.srcObject = cameraRef.current.stream;
-    }
-  }, [cameraRef, videoRef]);
-  var onLoadedData = React.useCallback(function () {
-    setVideoLoaded(true);
-  }, [setVideoLoaded]);
-  return /*#__PURE__*/React__namespace.default.createElement(FullscreenVideoTag, {
-    className: className,
-    autoPlay: true,
-    playsInline: true,
-    muted: true,
-    ref: videoRef,
-    onLoadedData: onLoadedData,
-    "$isRearFacing": (_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing
-  });
-};
-var FullscreenVideoTag = styled__default.default.video(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: cover;\n  background: black;\n  z-index: -2;\n"], ["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: cover;\n  background: black;\n  z-index: -2;\n"])), function (props) {
-  return props.$isRearFacing ? '' : 'scaleX(-1)';
-});
-var templateObject_1$o;
+var StyledSpinner = styled__default.default(Spinner)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  position: relative;\n  top: 4px;\n  left: -3px;\n  margin: 0 3px 0 -12px;\n"], ["\n  position: relative;\n  top: 4px;\n  left: -3px;\n  margin: 0 3px 0 -12px;\n"])));
+var ImagePreviewWrapper = styled__default.default.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  height: 33%;\n  bottom: 12px;\n  right: 12px;\n"], ["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  height: 33%;\n  bottom: 12px;\n  right: 12px;\n"])));
+var ImagePreviewText = styled__default.default.div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  display: block;\n  position: absolute;\n  top: -32px;\n  font:\n    14px -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif,\n    'Apple Color Emoji',\n    'Segoe UI Emoji',\n    'Segoe UI Symbol';\n  color: white;\n  text-align: center;\n  margin: 0 auto;\n  width: 100%;\n"], ["\n  display: block;\n  position: absolute;\n  top: -32px;\n  font:\n    14px -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif,\n    'Apple Color Emoji',\n    'Segoe UI Emoji',\n    'Segoe UI Symbol';\n  color: white;\n  text-align: center;\n  margin: 0 auto;\n  width: 100%;\n"])));
+var ImagePreviewImageWrapper = styled__default.default.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n  position: relative;\n  height: calc(100% - 8px);\n  padding: 4px;\n  border-radius: 4px;\n  background: white;\n\n  & > img {\n    border-radius: 4px;\n    width: auto;\n    max-height: 100%;\n  }\n"], ["\n  position: relative;\n  height: calc(100% - 8px);\n  padding: 4px;\n  border-radius: 4px;\n  background: white;\n\n  & > img {\n    border-radius: 4px;\n    width: auto;\n    max-height: 100%;\n  }\n"])));
+var templateObject_1$q, templateObject_2$m, templateObject_3$h, templateObject_4$b;
 
 var documentCaptureInitialState = {
   documents: [],
@@ -7462,8 +7403,8 @@ var DocumentCaptureStateProvider = function DocumentCaptureStateProvider(_a) {
   var _c = React.useReducer(documentCaptureStateReducer, documentCaptureInitialState),
     state = _c[0],
     dispatch = _c[1];
-  var _d = React.useContext(CameraStateContext),
-    cameraRef = _d.cameraRef,
+  var _d = useCameraStore(),
+    videoStream = _d.videoStream,
     videoRef = _d.videoRef;
   var uploadDocument = React.useContext(SubmissionContext).uploadDocument;
   var uploadCapturedDocument = React.useCallback(function (content, filetype) {
@@ -7554,8 +7495,7 @@ var DocumentCaptureStateProvider = function DocumentCaptureStateProvider(_a) {
   }, [onResize]);
   var videoTag = videoRef.current;
   React.useEffect(function () {
-    if (!state.capturing) return;
-    if (!cameraRef.current) return;
+    if (!state.capturing || !(videoStream === null || videoStream === void 0 ? void 0 : videoStream.active)) return;
     function onComplete(content) {
       if (!content) return;
       var contentUrl = URL.createObjectURL(content);
@@ -7568,7 +7508,7 @@ var DocumentCaptureStateProvider = function DocumentCaptureStateProvider(_a) {
       });
     }
     if (typeof ImageCapture !== 'undefined') {
-      var tracks = cameraRef.current.stream.getTracks();
+      var tracks = videoStream.getTracks();
       var videoCameraTrack = tracks.find(function (track) {
         return track.kind === 'video';
       });
@@ -7583,7 +7523,7 @@ var DocumentCaptureStateProvider = function DocumentCaptureStateProvider(_a) {
       drawToCanvas(canvas, videoTag);
       canvas.toBlob(onComplete);
     }
-  }, [cameraRef, state.capturing, videoTag]);
+  }, [state.capturing, videoStream, videoTag]);
   var stateWithActions = React.useMemo(function () {
     return _assign(_assign({}, state), {
       uploadCapturedDocument: uploadCapturedDocument
@@ -7698,52 +7638,85 @@ var DocumentCaptureGuideOverlay = function DocumentCaptureGuideOverlay(_a) {
     ref: canvasRef
   }));
 };
-var CanvasWrapper = styled__default.default.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  flex-grow: 1;\n  background-clip: padding-box;\n  box-shadow: inset 0 0 0 2px ", ";\n"], ["\n  flex-grow: 1;\n  background-clip: padding-box;\n  box-shadow: inset 0 0 0 2px ", ";\n"])), function (props) {
+var CanvasWrapper = styled__default.default.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  flex-grow: 1;\n  background-clip: padding-box;\n  box-shadow: inset 0 0 0 2px ", ";\n"], ["\n  flex-grow: 1;\n  background-clip: padding-box;\n  box-shadow: inset 0 0 0 2px ", ";\n"])), function (props) {
   return props.$maskColor;
 });
-var Canvas = styled__default.default.canvas(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
-var templateObject_1$n, templateObject_2$k;
+var Canvas = styled__default.default.canvas(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
+var templateObject_1$p, templateObject_2$l;
 
-var CameraFeedWrapper = styled__default.default.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var CameraFeedWrapper = styled__default.default.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
   return props.$mode === 'snapToGuides' ? "display: flex;\n         position: absolute;\n         left: ".concat(props.$x, "px;\n         top: ").concat(props.$y, "px;\n         width: ").concat(props.$w, "px;\n         height: ").concat(props.$h, "px;") : "";
 });
-var templateObject_1$m;
+var templateObject_1$o;
+
+var CameraVideoTag = function CameraVideoTag(props) {
+  var _a = useCameraStore(shallow.useShallow(function (store) {
+      return {
+        videoRef: store.videoRef,
+        videoStream: store.videoStream,
+        onVideoMounted: store.onVideoMounted,
+        isRearFacing: store.isRearFacing
+      };
+    })),
+    videoRef = _a.videoRef,
+    videoStream = _a.videoStream,
+    onVideoMounted = _a.onVideoMounted,
+    isRearFacing = _a.isRearFacing;
+  React.useEffect(function attachCameraStreamToVideoTagWhenReady() {
+    if (videoRef.current && videoStream) {
+      debug('attaching camera stream to video tag');
+      videoRef.current.srcObject = videoStream;
+    }
+  }, [videoStream, videoRef]);
+  return /*#__PURE__*/React__namespace.default.createElement(FullscreenVideoTag, _assign({
+    autoPlay: true,
+    playsInline: true,
+    muted: true,
+    ref: videoRef,
+    onLoadedData: onVideoMounted,
+    "$isRearFacing": isRearFacing
+  }, props));
+};
+var FullscreenVideoTag = styled__default.default.video(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  transform: ", ";\n  transform-style: preserve-3d;\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: cover;\n  background: black;\n  z-index: -2;\n"], ["\n  transform: ", ";\n  transform-style: preserve-3d;\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: cover;\n  background: black;\n  z-index: -2;\n"])), function (props) {
+  return props.$isRearFacing ? '' : 'scaleX(-1)';
+});
+var templateObject_1$n;
 
 var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
-  var _b, _c, _d, _e, _f, _g, _h;
+  var _b, _c, _d, _e, _f;
   var onCaptureClicked = _a.onCaptureClicked,
-    _j = _a.classNames,
-    classNames = _j === void 0 ? {} : _j,
-    _k = _a.verbiage,
-    rawVerbiage = _k === void 0 ? {} : _k;
-  var _l = useDocumentCaptureState(),
-    _m = _l[0],
-    documents = _m.documents,
-    currentDocumentIndex = _m.currentDocumentIndex,
-    rectX = _m.rectX,
-    rectY = _m.rectY,
-    rectWidth = _m.rectWidth,
-    rectHeight = _m.rectHeight,
-    rectOffsetTop = _m.rectOffsetTop,
-    capturing = _m.capturing,
-    uploadCapturedDocument = _m.uploadCapturedDocument,
-    dispatch = _l[1];
-  var _o = (_b = documents[currentDocumentIndex]) !== null && _b !== void 0 ? _b : {},
-    title = _o.title,
-    aspectRatio = _o.aspectRatio,
-    cameraFeedMode = _o.cameraFeedMode,
-    instructions = _o.instructions,
-    contentUrl = _o.contentUrl,
-    content = _o.content,
-    uploadState = _o.uploadState;
-  var _p = React.useContext(CameraStateContext),
-    cameraRef = _p.cameraRef,
-    cameraReady = _p.cameraReady,
-    cameraAccessDenied = _p.cameraAccessDenied,
-    requestCameraAccess = _p.requestCameraAccess;
-  var _q = React.useState(false),
-    cameraAccessRequested = _q[0],
-    setCameraAccessRequested = _q[1];
+    _g = _a.classNames,
+    classNames = _g === void 0 ? {} : _g,
+    _h = _a.verbiage,
+    rawVerbiage = _h === void 0 ? {} : _h;
+  var _j = useDocumentCaptureState(),
+    _k = _j[0],
+    documents = _k.documents,
+    currentDocumentIndex = _k.currentDocumentIndex,
+    rectX = _k.rectX,
+    rectY = _k.rectY,
+    rectWidth = _k.rectWidth,
+    rectHeight = _k.rectHeight,
+    rectOffsetTop = _k.rectOffsetTop,
+    capturing = _k.capturing,
+    uploadCapturedDocument = _k.uploadCapturedDocument,
+    dispatch = _j[1];
+  var _l = (_b = documents[currentDocumentIndex]) !== null && _b !== void 0 ? _b : {},
+    title = _l.title,
+    aspectRatio = _l.aspectRatio,
+    cameraFeedMode = _l.cameraFeedMode,
+    instructions = _l.instructions,
+    contentUrl = _l.contentUrl,
+    content = _l.content,
+    uploadState = _l.uploadState;
+  var _m = useCameraStore(),
+    videoStream = _m.videoStream,
+    cameraReady = _m.cameraReady,
+    cameraAccessDenied = _m.cameraAccessDenied,
+    requestCameraAccess = _m.requestCameraAccess;
+  var _o = React.useState(false),
+    cameraAccessRequested = _o[0],
+    setCameraAccessRequested = _o[1];
   var cameraAccessNeeded =
   // we should force the browser to ask for camera access if...
   uploadState === 'not_started' &&
@@ -7752,14 +7725,14 @@ var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
   // and the user hasn't passed a media blob for the current document...
   !cameraAccessRequested &&
   // and we haven't already tried to force a camera request...
-  !((_d = (_c = cameraRef.current) === null || _c === void 0 ? void 0 : _c.stream) === null || _d === void 0 ? void 0 : _d.active); // and we don't already have camera access.
+  !(videoStream === null || videoStream === void 0 ? void 0 : videoStream.active); // and we don't already have camera access.
   React.useEffect(function requestCameraAccessIfNeeded() {
     if (!cameraAccessNeeded) return;
     setCameraAccessRequested(true);
     requestCameraAccess();
   }, [cameraAccessNeeded, requestCameraAccess]);
   var theme = styled.useTheme();
-  var maskColor = (_g = (_f = (_e = theme.documentCapture) === null || _e === void 0 ? void 0 : _e.guideBox) === null || _f === void 0 ? void 0 : _f.maskColor) !== null && _g !== void 0 ? _g : cameraFeedMode === 'snapToGuides' ? '#708090' : "rgba(0, 0, 0, 0.5)";
+  var maskColor = (_e = (_d = (_c = theme.documentCapture) === null || _c === void 0 ? void 0 : _c.guideBox) === null || _d === void 0 ? void 0 : _d.maskColor) !== null && _e !== void 0 ? _e : cameraFeedMode === 'snapToGuides' ? '#708090' : "rgba(0, 0, 0, 0.5)";
   var verbiage = useTranslations(rawVerbiage, {
     headingText: title,
     loadingBtnText: 'Camera initializing...',
@@ -7792,7 +7765,7 @@ var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
     });
   }
   return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
-    className: "flex ".concat((_h = classNames.container) !== null && _h !== void 0 ? _h : '')
+    className: "flex ".concat((_f = classNames.container) !== null && _f !== void 0 ? _f : '')
   }, /*#__PURE__*/React__namespace.default.createElement(CameraFeedWrapper, {
     className: classNames.cameraFeedWrapper,
     "$mode": cameraFeedMode !== null && cameraFeedMode !== void 0 ? cameraFeedMode : 'snapToGuides',
@@ -7857,21 +7830,21 @@ var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
     disabled: !cameraReady || capturing
   }, !cameraReady ? verbiage.loadingBtnText : capturing ? verbiage.capturingBtnText : verbiage.captureBtnText))))));
 };
-var CaptureContainer = styled__default.default.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: var(--app-height);\n"], ["\n  display: flex;\n  flex-direction: column;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: var(--app-height);\n"])));
-var HeadingRow = styled__default.default.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  background: ", ";\n  text-align: center;\n  color: white;\n"], ["\n  background: ", ";\n  text-align: center;\n  color: white;\n"])), function (props) {
+var CaptureContainer = styled__default.default.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: var(--app-height);\n"], ["\n  display: flex;\n  flex-direction: column;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: var(--app-height);\n"])));
+var HeadingRow = styled__default.default.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  background: ", ";\n  text-align: center;\n  color: white;\n"], ["\n  background: ", ";\n  text-align: center;\n  color: white;\n"])), function (props) {
   return props.$maskColor;
 });
-var Heading$9 = styled__default.default.h1(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  font-size: 22px;\n"], ["\n  font-size: 22px;\n"])));
-var FooterRow = styled__default.default.div(templateObject_4$9 || (templateObject_4$9 = __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) {
+var Heading$9 = styled__default.default.h1(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  font-size: 22px;\n"], ["\n  font-size: 22px;\n"])));
+var FooterRow = styled__default.default.div(templateObject_4$a || (templateObject_4$a = __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__default.default.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n  max-height: ", ";\n  overflow-y: auto;\n"], ["\n  max-height: ", ";\n  overflow-y: auto;\n"])), function (props) {
+var Instructions = styled__default.default.div(templateObject_5$6 || (templateObject_5$6 = __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$9 = styled__default.default(ButtonsRow)(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n  padding-top: 20px;\n"], ["\n  padding-top: 20px;\n"])));
-var PreviewImage = styled__default.default.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$l, templateObject_2$j, templateObject_3$f, templateObject_4$9, templateObject_5$5, templateObject_6$4, templateObject_7$2;
+var StyledButtonsRow$9 = styled__default.default(ButtonsRow)(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n  padding-top: 20px;\n"], ["\n  padding-top: 20px;\n"])));
+var PreviewImage = styled__default.default.img(templateObject_7$3 || (templateObject_7$3 = __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$m, templateObject_2$k, templateObject_3$g, templateObject_4$a, templateObject_5$6, templateObject_6$5, templateObject_7$3;
 
 var DocumentCaptureWizard = function DocumentCaptureWizard(_a) {
   var onSuccess = _a.onSuccess,
@@ -8140,13 +8113,13 @@ var IdCaptureFallback = function IdCaptureFallback(_a) {
     }
   }, verbiage.doneBtnText))))));
 };
-var StyledOverlayInner$2 = styled__default.default(OverlayInner$2)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
-var Heading$8 = styled__default.default.h3(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
-var Description$3 = styled__default.default.p(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
-var Instruction = styled__default.default.p(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  font-weight: bold;\n"], ["\n  font-weight: bold;\n"])));
-var ImageCol = styled__default.default.div(templateObject_5$4 || (templateObject_5$4 = __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$8 = styled__default.default(ButtonsRow)(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
-var templateObject_1$k, templateObject_2$i, templateObject_3$e, templateObject_4$8, templateObject_5$4, templateObject_6$3;
+var StyledOverlayInner$2 = styled__default.default(OverlayInner$2)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
+var Heading$8 = styled__default.default.h3(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
+var Description$3 = styled__default.default.p(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
+var Instruction = styled__default.default.p(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  font-weight: bold;\n"], ["\n  font-weight: bold;\n"])));
+var ImageCol = styled__default.default.div(templateObject_5$5 || (templateObject_5$5 = __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$8 = styled__default.default(ButtonsRow)(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
+var templateObject_1$l, templateObject_2$j, templateObject_3$f, templateObject_4$9, templateObject_5$5, templateObject_6$4;
 
 function ScalingCameraFeed() {
   var _a = React.useContext(IdCaptureStateContext),
@@ -8217,7 +8190,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
   var _3 = useIdCaptureState(),
     state = _3[0],
     dispatch = _3[1];
-  var _4 = React.useContext(CameraStateContext),
+  var _4 = useCameraStore(),
     cameraAccessDenied = _4.cameraAccessDenied,
     requestCameraAccess = _4.requestCameraAccess,
     releaseCameraAccess = _4.releaseCameraAccess;
@@ -8832,7 +8805,7 @@ var HeadGuideSvg = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }))));
 });
 HeadGuideSvg.displayName = 'HeadGuideSvg';
-var PulsingHeadGuideContainer = styled__default.default.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n  height: 100%;\n  max-height: 100%;\n\n  & > .idmSdkWaves {\n    position: absolute;\n    animation: ", " 2s ease-out infinite;\n\n    &:nth-child(2) {\n      animation-delay: 0.66s;\n    }\n\n    &:nth-child(3) {\n      animation-delay: 1.33s;\n    }\n  }\n\n  & > .idmSdkWavesOrigin {\n    position: relative;\n  }\n"], ["\n  display: flex;\n  position: relative;\n  height: 100%;\n  max-height: 100%;\n\n  & > .idmSdkWaves {\n    position: absolute;\n    animation: ", " 2s ease-out infinite;\n\n    &:nth-child(2) {\n      animation-delay: 0.66s;\n    }\n\n    &:nth-child(3) {\n      animation-delay: 1.33s;\n    }\n  }\n\n  & > .idmSdkWavesOrigin {\n    position: relative;\n  }\n"])), wavesAnimation);
+var PulsingHeadGuideContainer = styled__default.default.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n  height: 100%;\n  max-height: 100%;\n\n  & > .idmSdkWaves {\n    position: absolute;\n    animation: ", " 2s ease-out infinite;\n    transform-style: preserve-3d;\n\n    &:nth-child(2) {\n      animation-delay: 0.66s;\n    }\n\n    &:nth-child(3) {\n      animation-delay: 1.33s;\n    }\n  }\n\n  & > .idmSdkWavesOrigin {\n    position: relative;\n  }\n"], ["\n  display: flex;\n  position: relative;\n  height: 100%;\n  max-height: 100%;\n\n  & > .idmSdkWaves {\n    position: absolute;\n    animation: ", " 2s ease-out infinite;\n    transform-style: preserve-3d;\n\n    &:nth-child(2) {\n      animation-delay: 0.66s;\n    }\n\n    &:nth-child(3) {\n      animation-delay: 1.33s;\n    }\n  }\n\n  & > .idmSdkWavesOrigin {\n    position: relative;\n  }\n"])), wavesAnimation);
 function HeadGuide(_a) {
   var _b;
   var _c = _a.status,
@@ -8882,8 +8855,8 @@ function HeadGuide(_a) {
     height: parentHeight
   })));
 }
-var AbsoluteSvg = styled__default.default.svg(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n"], ["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n"])));
-var RelativeSvgContainer = styled__default.default.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  position: relative;\n  height: 100%;\n  display: flex;\n  align-items: ", ";\n"], ["\n  position: relative;\n  height: 100%;\n  display: flex;\n  align-items: ", ";\n"])), function (props) {
+var AbsoluteSvg = styled__default.default.svg(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n"], ["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n"])));
+var RelativeSvgContainer = styled__default.default.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  position: relative;\n  height: 100%;\n  display: flex;\n  align-items: ", ";\n"], ["\n  position: relative;\n  height: 100%;\n  display: flex;\n  align-items: ", ";\n"])), function (props) {
   return props.$verticalAlign === 'bottom' ? 'flex-end' : 'center';
 });
 function SelfieCaptureAnimatedMask(_a) {
@@ -9110,10 +9083,10 @@ function SelfieCaptureAnimatedMaskWithStatus(_a) {
     status: status
   }));
 }
-var templateObject_1$j, templateObject_2$h, templateObject_3$d;
+var templateObject_1$k, templateObject_2$i, templateObject_3$e;
 
-var FaceCaptureGuideContainer = styled__default.default.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  position: fixed;\n  z-index: 1000;\n  width: 100dvw;\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n  box-sizing: border-box;\n"], ["\n  position: fixed;\n  z-index: 1000;\n  width: 100dvw;\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n  box-sizing: border-box;\n"])));
-var FaceCaptureGuideInner = styled__default.default.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  position: relative;\n  height: 60%;\n"], ["\n  position: relative;\n  height: 60%;\n"])));
+var FaceCaptureGuideContainer = styled__default.default.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  position: fixed;\n  z-index: 1000;\n  width: 100dvw;\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n  box-sizing: border-box;\n"], ["\n  position: fixed;\n  z-index: 1000;\n  width: 100dvw;\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n  box-sizing: border-box;\n"])));
+var FaceCaptureGuideInner = styled__default.default.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  position: relative;\n  height: 60%;\n"], ["\n  position: relative;\n  height: 60%;\n"])));
 var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
   var _b = _a.classNames,
     classNames = _b === void 0 ? {} : _b,
@@ -9135,7 +9108,7 @@ var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
     verticalAlign: "center"
   })));
 };
-var templateObject_1$i, templateObject_2$g;
+var templateObject_1$j, templateObject_2$h;
 
 var SelfieGuidanceModelsContext = /*#__PURE__*/React.createContext({
   start: function start() {
@@ -9165,7 +9138,13 @@ function SelfieGuidanceModelsProvider(_a) {
     modelLoadTimeoutMs = _c === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _c,
     _d = _a.requireVerticalFaceCentering,
     requireVerticalFaceCentering = _d === void 0 ? true : _d;
-  var _e = React.useContext(CameraStateContext),
+  var _e = useCameraStore(shallow.useShallow(function (state) {
+      return {
+        videoRef: state.videoRef,
+        videoLoaded: state.videoLoaded,
+        cameraReady: state.cameraReady
+      };
+    })),
     videoRef = _e.videoRef,
     videoLoaded = _e.videoLoaded,
     cameraReady = _e.cameraReady;
@@ -9173,7 +9152,8 @@ function SelfieGuidanceModelsProvider(_a) {
   var onPredictionHandler = React.useRef();
   var _f = useLoadFaceDetector({
       onModelError: onModelError,
-      modelLoadTimeoutMs: modelLoadTimeoutMs
+      modelLoadTimeoutMs: modelLoadTimeoutMs,
+      videoRef: videoRef
     }),
     ready = _f.ready,
     modelDownloadProgress = _f.modelDownloadProgress,
@@ -9439,12 +9419,12 @@ var SelfieCaptureFallback = function SelfieCaptureFallback(_a) {
     }
   }, !image ? invalidSelfie ? verbiage.retryButtonText : verbiage.captureBtnText : loading ? verbiage.doneBtnLoadingText : verbiage.doneBtnText)))));
 };
-var StyledOverlayInner$1 = styled__default.default(OverlayInner$2)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
-var Heading$7 = styled__default.default.h3(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
-var Description$2 = styled__default.default.p(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
-var ImageContainer$6 = styled__default.default(OverlayImageContainer)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
-var StyledButtonsRow$7 = styled__default.default(ButtonsRow)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
-var templateObject_1$h, templateObject_2$f, templateObject_3$c, templateObject_4$7, templateObject_5$3;
+var StyledOverlayInner$1 = styled__default.default(OverlayInner$2)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
+var Heading$7 = styled__default.default.h3(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
+var Description$2 = styled__default.default.p(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
+var ImageContainer$6 = styled__default.default(OverlayImageContainer)(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
+var StyledButtonsRow$7 = styled__default.default(ButtonsRow)(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
+var templateObject_1$i, templateObject_2$g, templateObject_3$d, templateObject_4$8, templateObject_5$4;
 
 var initialState$3 = {
   busy: false,
@@ -9506,8 +9486,14 @@ var SelfieCapture = function SelfieCapture(_a) {
     prediction = _t.prediction,
     dispatch = _s[1];
   var lastPredictionCanvas = React.useRef(null);
-  var _u = React.useContext(CameraStateContext),
-    cameraRef = _u.cameraRef,
+  var _u = useCameraStore(shallow.useShallow(function (state) {
+      return {
+        camera: state.camera,
+        cameraReady: state.cameraReady,
+        videoRef: state.videoRef
+      };
+    })),
+    camera = _u.camera,
     videoRef = _u.videoRef;
   var _v = React.useContext(SelfieGuidanceModelsContext),
     onPredictionMade = _v.onPredictionMade,
@@ -9597,7 +9583,7 @@ var SelfieCapture = function SelfieCapture(_a) {
     face: prediction.face,
     scaling: debugScalingDetails,
     color: satisfied ? 'green' : 'red'
-  }))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__namespace.default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceNotCentered) ? '✅' : '❌', " Face Centered", /*#__PURE__*/React__namespace.default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceTooClose) && !(prediction === null || prediction === void 0 ? void 0 : prediction.faceTooFar) ? '✅' : '❌', ' ', "Face", ' ', (prediction === null || prediction === void 0 ? void 0 : prediction.faceTooClose) ? 'Too Close' : (prediction === null || prediction === void 0 ? void 0 : prediction.faceTooFar) ? 'Too Far' : 'Distance Correct', /*#__PURE__*/React__namespace.default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceLookingAway) ? '✅' : '❌', " Face Looking Forward", /*#__PURE__*/React__namespace.default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceIsStable) ? '✅' : '❌', " Face Is Stable", /*#__PURE__*/React__namespace.default.createElement("br", null), !timedOut ? '✅' : '❌', " Time Remaining:", ' ', Math.max(0, timeoutDurationMs - (new Date().getTime() - (timeoutStartedAt !== null && timeoutStartedAt !== void 0 ? timeoutStartedAt : new Date()).getTime())), "ms")), /*#__PURE__*/React__namespace.default.createElement(ExitCaptureButton, {
+  }))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, camera ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u2705 Camera: ", camera.label, " (", camera.width, "x", camera.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__namespace.default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceNotCentered) ? '✅' : '❌', " Face Centered", /*#__PURE__*/React__namespace.default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceTooClose) && !(prediction === null || prediction === void 0 ? void 0 : prediction.faceTooFar) ? '✅' : '❌', ' ', "Face", ' ', (prediction === null || prediction === void 0 ? void 0 : prediction.faceTooClose) ? 'Too Close' : (prediction === null || prediction === void 0 ? void 0 : prediction.faceTooFar) ? 'Too Far' : 'Distance Correct', /*#__PURE__*/React__namespace.default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceLookingAway) ? '✅' : '❌', " Face Looking Forward", /*#__PURE__*/React__namespace.default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceIsStable) ? '✅' : '❌', " Face Is Stable", /*#__PURE__*/React__namespace.default.createElement("br", null), !timedOut ? '✅' : '❌', " Time Remaining:", ' ', Math.max(0, timeoutDurationMs - (new Date().getTime() - (timeoutStartedAt !== null && timeoutStartedAt !== void 0 ? timeoutStartedAt : new Date()).getTime())), "ms")), /*#__PURE__*/React__namespace.default.createElement(ExitCaptureButton, {
     onClick: onExit,
     className: classNames.exitCaptureBtn
   }));
@@ -9988,9 +9974,9 @@ var FaceLivenessSuccess = function FaceLivenessSuccess(_a) {
     finished: true
   }, verbiage.retryBtnText)))));
 };
-var ImageContainer$5 = styled__default.default.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  position: relative;\n  flex-grow: 1;\n  margin-bottom: 25px;\n  max-width: 100dvw;\n  max-height: 100dvh;\n  overflow-y: auto;\n  border-radius: 12px;\n\n  & > img,\n  & > svg {\n    width: 100%;\n    max-width: 100%;\n    margin: 0 auto;\n    display: block;\n    border-radius: 12px;\n  }\n"], ["\n  position: relative;\n  flex-grow: 1;\n  margin-bottom: 25px;\n  max-width: 100dvw;\n  max-height: 100dvh;\n  overflow-y: auto;\n  border-radius: 12px;\n\n  & > img,\n  & > svg {\n    width: 100%;\n    max-width: 100%;\n    margin: 0 auto;\n    display: block;\n    border-radius: 12px;\n  }\n"])));
-var Heading$6 = styled__default.default.h3(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  font-size: 1.2rem;\n  margin: 0;\n"], ["\n  font-size: 1.2rem;\n  margin: 0;\n"])));
-var templateObject_1$g, templateObject_2$e;
+var ImageContainer$5 = styled__default.default.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  position: relative;\n  flex-grow: 1;\n  margin-bottom: 25px;\n  max-width: 100dvw;\n  max-height: 100dvh;\n  overflow-y: auto;\n  border-radius: 12px;\n\n  & > img,\n  & > svg {\n    width: 100%;\n    max-width: 100%;\n    margin: 0 auto;\n    display: block;\n    border-radius: 12px;\n  }\n"], ["\n  position: relative;\n  flex-grow: 1;\n  margin-bottom: 25px;\n  max-width: 100dvw;\n  max-height: 100dvh;\n  overflow-y: auto;\n  border-radius: 12px;\n\n  & > img,\n  & > svg {\n    width: 100%;\n    max-width: 100%;\n    margin: 0 auto;\n    display: block;\n    border-radius: 12px;\n  }\n"])));
+var Heading$6 = styled__default.default.h3(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  font-size: 1.2rem;\n  margin: 0;\n"], ["\n  font-size: 1.2rem;\n  margin: 0;\n"])));
+var templateObject_1$h, templateObject_2$f;
 
 var FaceLivenessFailure = function FaceLivenessFailure(_a) {
   var _b = _a.canRetry,
@@ -10039,9 +10025,9 @@ var FaceLivenessFailure = function FaceLivenessFailure(_a) {
     finished: true
   }, verbiage.exitBtnText)))));
 };
-var ImageContainer$4 = styled__default.default(OverlayImageContainer)(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  max-height: calc(100vh - 185px);\n"], ["\n  max-height: calc(100vh - 185px);\n"])));
-var Heading$5 = styled__default.default.h3(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  margin-bottom: 36px;\n"], ["\n  margin-bottom: 36px;\n"])));
-var templateObject_1$f, templateObject_2$d;
+var ImageContainer$4 = styled__default.default(OverlayImageContainer)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  max-height: calc(100vh - 185px);\n"], ["\n  max-height: calc(100vh - 185px);\n"])));
+var Heading$5 = styled__default.default.h3(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  margin-bottom: 36px;\n"], ["\n  margin-bottom: 36px;\n"])));
+var templateObject_1$g, templateObject_2$e;
 
 var MicrophoneAccessDeniedOverlay = function MicrophoneAccessDeniedOverlay(_a) {
   var _b;
@@ -10053,7 +10039,9 @@ var MicrophoneAccessDeniedOverlay = function MicrophoneAccessDeniedOverlay(_a) {
     colors = _e === void 0 ? {} : _e,
     _f = _a.verbiage,
     rawVerbiage = _f === void 0 ? {} : _f;
-  var requestMicrophoneAccess = React.useContext(CameraStateContext).requestMicrophoneAccess;
+  var requestMicrophoneAccess = useCameraStore(function (state) {
+    return state.requestMicrophoneAccess;
+  });
   assets.imageUrl || (assets.imageUrl = DEFAULT_CDN_URL + '/microphone-disable-icon.svg');
   var verbiage = useTranslations(rawVerbiage, {
     headingText: 'Your microphone permission is disabled',
@@ -10082,11 +10070,11 @@ var MicrophoneAccessDeniedOverlay = function MicrophoneAccessDeniedOverlay(_a) {
     finished: true
   }, verbiage.retryBtnText)));
 };
-var StyledOverlayInner = styled__default.default(OverlayInner$2)(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  max-width: 500px;\n  height: auto;\n  margin: auto;\n"], ["\n  max-width: 500px;\n  height: auto;\n  margin: auto;\n"])));
-var StyledOverlayImageContainer$1 = styled__default.default(OverlayImageContainer)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  flex-grow: 0;\n"], ["\n  flex-grow: 0;\n"])));
-var Description$1 = styled__default.default.p(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n  line-height: 1.5;\n  margin-bottom: 50px;\n"], ["\n  line-height: 1.5;\n  margin-bottom: 50px;\n"])));
-var RetryButton = styled__default.default(LoaderButton)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  width: 200px;\n  margin: 0 auto;\n"], ["\n  width: 200px;\n  margin: 0 auto;\n"])));
-var templateObject_1$e, templateObject_2$c, templateObject_3$b, templateObject_4$6;
+var StyledOverlayInner = styled__default.default(OverlayInner$2)(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  max-width: 500px;\n  height: auto;\n  margin: auto;\n"], ["\n  max-width: 500px;\n  height: auto;\n  margin: auto;\n"])));
+var StyledOverlayImageContainer$1 = styled__default.default(OverlayImageContainer)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  flex-grow: 0;\n"], ["\n  flex-grow: 0;\n"])));
+var Description$1 = styled__default.default.p(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  line-height: 1.5;\n  margin-bottom: 50px;\n"], ["\n  line-height: 1.5;\n  margin-bottom: 50px;\n"])));
+var RetryButton = styled__default.default(LoaderButton)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  width: 200px;\n  margin: 0 auto;\n"], ["\n  width: 200px;\n  margin: 0 auto;\n"])));
+var templateObject_1$f, templateObject_2$d, templateObject_3$c, templateObject_4$7;
 
 var SelfieCaptureLoadingOverlayLegacy = function SelfieCaptureLoadingOverlayLegacy(_a) {
   var onDismissed = _a.onDismissed,
@@ -10101,7 +10089,13 @@ var SelfieCaptureLoadingOverlayLegacy = function SelfieCaptureLoadingOverlayLega
     colors = _e === void 0 ? {} : _e,
     _f = _a.verbiage,
     rawVerbiage = _f === void 0 ? {} : _f;
-  var _g = React.useContext(CameraStateContext),
+  var _g = useCameraStore(shallow.useShallow(function (state) {
+      return {
+        cameraReady: state.cameraReady,
+        cameraAccessDenied: state.cameraAccessDenied,
+        microphoneAccessDenied: state.microphoneAccessDenied
+      };
+    })),
     cameraReady = _g.cameraReady,
     cameraAccessDenied = _g.cameraAccessDenied,
     microphoneAccessDenied = _g.microphoneAccessDenied;
@@ -10169,9 +10163,9 @@ var SelfieCaptureLoadingOverlayLegacy = function SelfieCaptureLoadingOverlayLega
     }
   }, cameraReady && allModelsReady ? verbiage.continueText : allModelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? "".concat(verbiage.modelsWarmingUpText) : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)")))));
 };
-var StyledGuidanceMessage$1 = styled__default.default(GuidanceMessage)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  padding: 12px 24px;\n  font-weight: normal;\n  line-height: 1.5;\n  margin-bottom: -30px;\n"], ["\n  padding: 12px 24px;\n  font-weight: normal;\n  line-height: 1.5;\n  margin-bottom: -30px;\n"])));
-var StyledButtonsRow$6 = styled__default.default(ButtonsRow)(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  flex-direction: column;\n  padding-top: 25px;\n"], ["\n  flex-direction: column;\n  padding-top: 25px;\n"])));
-var templateObject_1$d, templateObject_2$b;
+var StyledGuidanceMessage$1 = styled__default.default(GuidanceMessage)(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  padding: 12px 24px;\n  font-weight: normal;\n  line-height: 1.5;\n  margin-bottom: -30px;\n"], ["\n  padding: 12px 24px;\n  font-weight: normal;\n  line-height: 1.5;\n  margin-bottom: -30px;\n"])));
+var StyledButtonsRow$6 = styled__default.default(ButtonsRow)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  flex-direction: column;\n  padding-top: 25px;\n"], ["\n  flex-direction: column;\n  padding-top: 25px;\n"])));
+var templateObject_1$e, templateObject_2$c;
 
 var legacyInstructionImageUrl = "".concat(DEFAULT_CDN_URL, "/Selfie-Image-1.png");
 var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDefault(_a) {
@@ -10188,7 +10182,13 @@ var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDef
     colors = _e === void 0 ? {} : _e,
     _f = _a.verbiage,
     rawVerbiage = _f === void 0 ? {} : _f;
-  var _g = React.useContext(CameraStateContext),
+  var _g = useCameraStore(shallow.useShallow(function (state) {
+      return {
+        cameraReady: state.cameraReady,
+        cameraAccessDenied: state.cameraAccessDenied,
+        microphoneAccessDenied: state.microphoneAccessDenied
+      };
+    })),
     cameraReady = _g.cameraReady,
     cameraAccessDenied = _g.cameraAccessDenied,
     microphoneAccessDenied = _g.microphoneAccessDenied;
@@ -10296,30 +10296,30 @@ var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDef
     }
   }, verbiage.continueText))))));
 };
-var OverlayInner = styled__default.default.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  color: ", ";\n"], ["\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  color: ", ";\n"])), function (props) {
+var OverlayInner = styled__default.default.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  color: ", ";\n"], ["\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  color: ", ";\n"])), function (props) {
   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.backgroundColor) !== null && _d !== void 0 ? _d : '#ecedf3';
 }, function (props) {
   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.textColor) !== null && _d !== void 0 ? _d : 'black';
 });
-var OverlayHeader = styled__default.default.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  ", "\n  padding-bottom: 0;\n"], ["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  ", "\n  padding-bottom: 0;\n"])), function (props) {
+var OverlayHeader = styled__default.default.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  ", "\n  padding-bottom: 0;\n"], ["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  ", "\n  padding-bottom: 0;\n"])), function (props) {
   var _a;
   return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
 }, function (props) {
   return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
 });
-var StyledGuidanceMessage = styled__default.default(GuidanceMessage)(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  padding: 16px 24px;\n  margin-top: 16px;\n  font-size: 18px;\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  padding: 16px 24px;\n  margin-top: 16px;\n  font-size: 18px;\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 StyledButtonsRow$5 = styled__default.default(ButtonsRow)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding: 15px 25px;\n  height: 100px;\n  color: ", ";\n  ", "\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100dvw;\n  box-sizing: border-box;\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding: 15px 25px;\n  height: 100px;\n  color: ", ";\n  ", "\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100dvw;\n  box-sizing: border-box;\n"])), function (props) {
+var StyledGuidanceMessage = styled__default.default(GuidanceMessage)(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n  padding: 16px 24px;\n  margin-top: 16px;\n  font-size: 18px;\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  padding: 16px 24px;\n  margin-top: 16px;\n  font-size: 18px;\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 StyledButtonsRow$5 = styled__default.default(ButtonsRow)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding: 15px 25px;\n  height: 100px;\n  color: ", ";\n  ", "\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100dvw;\n  box-sizing: border-box;\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding: 15px 25px;\n  height: 100px;\n  color: ", ";\n  ", "\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100dvw;\n  box-sizing: border-box;\n"])), function (props) {
   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.progressBarTextColor) !== null && _d !== void 0 ? _d : 'white';
 }, 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, ";") : '';
 });
-var StyledOverlayImageContainer = styled__default.default(OverlayImageContainer)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n  padding: 0;\n\n  & > svg {\n    height: 100%;\n  }\n"], ["\n  padding: 0;\n\n  & > svg {\n    height: 100%;\n  }\n"])));
-var LoadingListContainer = styled__default.default.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n  z-index: 2;\n"], ["\n  display: flex;\n  position: relative;\n  z-index: 2;\n"])));
-var LoadingList = styled__default.default.ul(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n  display: block;\n  margin: auto;\n  list-style: none;\n  padding: 0;\n"], ["\n  display: block;\n  margin: auto;\n  list-style: none;\n  padding: 0;\n"])));
+var StyledOverlayImageContainer = styled__default.default(OverlayImageContainer)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n  padding: 0;\n\n  & > svg {\n    height: 100%;\n  }\n"], ["\n  padding: 0;\n\n  & > svg {\n    height: 100%;\n  }\n"])));
+var LoadingListContainer = styled__default.default.div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n  z-index: 2;\n"], ["\n  display: flex;\n  position: relative;\n  z-index: 2;\n"])));
+var LoadingList = styled__default.default.ul(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n  display: block;\n  margin: auto;\n  list-style: none;\n  padding: 0;\n"], ["\n  display: block;\n  margin: auto;\n  list-style: none;\n  padding: 0;\n"])));
 var LoadingListItem = styled__default.default.li(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  padding: 2px 1.25rem 2px 0;\n  line-height: 1rem;\n"], ["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  padding: 2px 1.25rem 2px 0;\n  line-height: 1rem;\n"])));
 var ProgressContainer = styled__default.default.div(templateObject_9 || (templateObject_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 ProgressBarBackground = styled__default.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: ", ";\n  opacity: ", ";\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: ", ";\n  opacity: ", ";\n"])), function (props) {
@@ -10345,7 +10345,7 @@ var ContinueButton = styled__default.default(LoaderButton)(templateObject_15 ||
   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.continueBtnBorder) ? "border: ".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.continueBtnBorder, ";") : '';
 });
-var templateObject_1$c, templateObject_2$a, templateObject_3$a, templateObject_4$5, templateObject_5$2, templateObject_6$2, templateObject_7$1, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
+var templateObject_1$d, templateObject_2$b, templateObject_3$b, templateObject_4$6, templateObject_5$3, templateObject_6$3, templateObject_7$2, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
 
 var components = {
   "default": SelfieCaptureLoadingOverlayDefault,
@@ -10405,7 +10405,13 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
     livenessCheckRequest = _t.livenessCheckRequest,
     setSelfieImage = _t.setSelfieImage,
     logSelfieCaptureAttempt = _t.logSelfieCaptureAttempt;
-  var _u = React.useContext(CameraStateContext),
+  var _u = useCameraStore(shallow.useShallow(function (state) {
+      return {
+        cameraAccessDenied: state.cameraAccessDenied,
+        requestCameraAccess: state.requestCameraAccess,
+        releaseCameraAccess: state.releaseCameraAccess
+      };
+    })),
     cameraAccessDenied = _u.cameraAccessDenied,
     requestCameraAccess = _u.requestCameraAccess,
     releaseCameraAccess = _u.releaseCameraAccess;
@@ -10674,7 +10680,7 @@ var AdditionalDocumentCapture = function AdditionalDocumentCapture(_a) {
   }
   return /*#__PURE__*/React__namespace.default.createElement(OverlayContainer, {
     className: classNames.container
-  }, /*#__PURE__*/React__namespace.default.createElement(Inner$1, {
+  }, /*#__PURE__*/React__namespace.default.createElement(Inner$2, {
     className: classNames.inner
   }, /*#__PURE__*/React__namespace.default.createElement(Heading$4, {
     className: classNames.heading
@@ -10704,11 +10710,11 @@ var AdditionalDocumentCapture = function AdditionalDocumentCapture(_a) {
     }
   }, verbiage.captureBtnText)))));
 };
-var Inner$1 = styled__default.default(OverlayInner$2)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
-var Heading$4 = styled__default.default.h3(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
-var Description = styled__default.default.p(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
-var StyledButtonsRow$4 = styled__default.default(ButtonsRow)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
-var templateObject_1$b, templateObject_2$9, templateObject_3$9, templateObject_4$4;
+var Inner$2 = styled__default.default(OverlayInner$2)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
+var Heading$4 = styled__default.default.h3(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
+var Description = styled__default.default.p(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
+var StyledButtonsRow$4 = styled__default.default(ButtonsRow)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
+var templateObject_1$c, templateObject_2$a, templateObject_3$a, templateObject_4$5;
 
 var AdditionalDocumentCaptureWizard = function AdditionalDocumentCaptureWizard(_a) {
   var documents = _a.documents,
@@ -10852,7 +10858,7 @@ function convertSVGtoImg(svgData_1) {
   });
 }
 
-var SignaturePaperBacking = styled__default.default.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  ", "\n  ", "\n  ", "\n"], ["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  ", "\n  ", "\n  ", "\n"])), function (props) {
+var SignaturePaperBacking = styled__default.default.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  ", "\n  ", "\n  ", "\n"], ["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  ", "\n  ", "\n  ", "\n"])), function (props) {
   var _a, _b;
   return ((_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.background) ? "background: ".concat((_b = props.theme.signatureCapture) === null || _b === void 0 ? void 0 : _b.background, ";") : "";
 }, function (props) {
@@ -10862,8 +10868,8 @@ var SignaturePaperBacking = styled__default.default.div(templateObject_1$a || (t
   var _a, _b;
   return ((_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.backgroundPosition) ? "background-position: ".concat((_b = props.theme.signatureCapture) === null || _b === void 0 ? void 0 : _b.backgroundPosition, ";") : "";
 });
-var SignatureCanvasContainer$1 = styled__default.default.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  position: absolute;\n  top: 25%;\n  left: 15%;\n  width: 70%;\n  height: 50%;\n\n  @media (max-width: 800px) {\n    top: 15%;\n    left: 2%;\n    width: 96%;\n    height: 70%;\n  }\n"], ["\n  position: absolute;\n  top: 25%;\n  left: 15%;\n  width: 70%;\n  height: 50%;\n\n  @media (max-width: 800px) {\n    top: 15%;\n    left: 2%;\n    width: 96%;\n    height: 70%;\n  }\n"])));
-var SignaturePad = styled__default.default.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  position: relative;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  flex-grow: 1;\n  z-index: 100;\n  height: 100%;\n"], ["\n  position: relative;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  flex-grow: 1;\n  z-index: 100;\n  height: 100%;\n"])), function (props) {
+var SignatureCanvasContainer$1 = styled__default.default.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  position: absolute;\n  top: 25%;\n  left: 15%;\n  width: 70%;\n  height: 50%;\n\n  @media (max-width: 800px) {\n    top: 15%;\n    left: 2%;\n    width: 96%;\n    height: 70%;\n  }\n"], ["\n  position: absolute;\n  top: 25%;\n  left: 15%;\n  width: 70%;\n  height: 50%;\n\n  @media (max-width: 800px) {\n    top: 15%;\n    left: 2%;\n    width: 96%;\n    height: 70%;\n  }\n"])));
+var SignaturePad = styled__default.default.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  position: relative;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  flex-grow: 1;\n  z-index: 100;\n  height: 100%;\n"], ["\n  position: relative;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  flex-grow: 1;\n  z-index: 100;\n  height: 100%;\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.background) !== null && _c !== void 0 ? _c : 'rgba(255, 255, 255, 0.5)';
 }, function (props) {
@@ -10873,8 +10879,8 @@ var SignaturePad = styled__default.default.div(templateObject_3$8 || (templateOb
   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.borderRadius) !== null && _c !== void 0 ? _c : '16px';
 });
-var SignatureButtonsContainer = styled__default.default(ButtonsRow)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  flex-grow: 0;\n  padding-top: 12px;\n  display: flex;\n  z-index: 1000;\n  position: relative;\n"], ["\n  flex-grow: 0;\n  padding-top: 12px;\n  display: flex;\n  z-index: 1000;\n  position: relative;\n"])));
-var templateObject_1$a, templateObject_2$8, templateObject_3$8, templateObject_4$3;
+var SignatureButtonsContainer = styled__default.default(ButtonsRow)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  flex-grow: 0;\n  padding-top: 12px;\n  display: flex;\n  z-index: 1000;\n  position: relative;\n"], ["\n  flex-grow: 0;\n  padding-top: 12px;\n  display: flex;\n  z-index: 1000;\n  position: relative;\n"])));
+var templateObject_1$b, templateObject_2$9, templateObject_3$9, templateObject_4$4;
 
 var SignatureCapture = function SignatureCapture(_a) {
   var _b;
@@ -10945,8 +10951,8 @@ var SignatureCapture = function SignatureCapture(_a) {
     finished: true
   }, verbiage.acceptBtnText)))));
 };
-var AcceptBtn$1 = styled__default.default(LoaderButton)(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  margin-left: auto;\n"], ["\n  margin-left: auto;\n"])));
-var templateObject_1$9;
+var AcceptBtn$1 = styled__default.default(LoaderButton)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  margin-left: auto;\n"], ["\n  margin-left: auto;\n"])));
+var templateObject_1$a;
 
 var useVideoRecorder = function useVideoRecorder(camera, audioStream, mergeAVStreams) {
   if (mergeAVStreams === void 0) {
@@ -11126,10 +11132,10 @@ function VideoSignatureContextProvider(_a) {
     setSignatureVideoUrl = _e[1];
   var signatureRecorder = React.useRef(null);
   var recordedChunks = React.useRef([]);
-  var _f = React.useContext(CameraStateContext),
-    cameraRef = _f.cameraRef,
+  var _f = useCameraStore(),
+    camera = _f.camera,
     videoRef = _f.videoRef;
-  var _g = useVideoRecorder(cameraRef.current),
+  var _g = useVideoRecorder(camera),
     isRecordingVideo = _g.isRecordingVideo,
     startRecordingVideo = _g.startRecordingVideo,
     stopRecordingVideo = _g.stopRecordingVideo,
@@ -11197,8 +11203,8 @@ function VideoSignatureContextProvider(_a) {
   var animationFrame = React.useRef(0);
   React.useEffect(function () {
     var _a;
-    if (!signaturePad.current || !videoRef.current || !outputCanvas.current || !cameraRef.current || !isRecording || !isRecordingVideo) return;
-    var _b = [cameraRef.current.width, cameraRef.current.height],
+    if (!signaturePad.current || !videoRef.current || !outputCanvas.current || !camera || !isRecording || !isRecordingVideo) return;
+    var _b = [camera.width, camera.height],
       w = _b[0],
       h = _b[1];
     var isPortrait = typeof window !== 'undefined' && window.innerWidth < window.innerHeight;
@@ -11231,7 +11237,7 @@ function VideoSignatureContextProvider(_a) {
     return function () {
       cancelAnimationFrame(animationFrame.current);
     };
-  }, [cameraRef, isRecording, isRecordingVideo, videoRef]);
+  }, [camera, isRecording, isRecordingVideo, videoRef]);
   var onAcceptClicked = React.useCallback(function () {
     return __awaiter(_this, void 0, void 0, function () {
       var imageUrl;
@@ -11306,11 +11312,11 @@ function VideoSignatureGuides(_a) {
       className: classNames.signatureCanvas
     };
   }, [classNames.signatureCanvas, height, width]);
-  return /*#__PURE__*/React__namespace.default.createElement(Container, {
+  return /*#__PURE__*/React__namespace.default.createElement(Container$1, {
     className: classNames.container
-  }, /*#__PURE__*/React__namespace.default.createElement(Inner, {
+  }, /*#__PURE__*/React__namespace.default.createElement(Inner$1, {
     className: classNames.inner
-  }, /*#__PURE__*/React__namespace.default.createElement(FaceGuideContainer, {
+  }, /*#__PURE__*/React__namespace.default.createElement(FaceGuideContainer$1, {
     className: classNames.faceGuideContainer
   }, /*#__PURE__*/React__namespace.default.createElement(StyledSelfieCaptureAnimatedMask, {
     className: classNames.faceGuide,
@@ -11345,42 +11351,44 @@ function VideoSignatureGuides(_a) {
     finished: true
   }, verbiage.acceptSignatureBtnText))))));
 }
-var Container = styled__default.default.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  display: flex;\n  max-height: 100%;\n  position: absolute;\n  z-index: 1000;\n  width: 100dvw;\n  height: 100dvh;\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  width: 100dvw;\n  height: 100dvh;\n  font-family: ", ";\n  box-sizing: border-box;\n  overflow: hidden;\n  padding: 40px;\n"])), function (props) {
+var Container$1 = styled__default.default.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  display: flex;\n  max-height: 100%;\n  position: absolute;\n  z-index: 1000;\n  width: 100dvw;\n  height: 100dvh;\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  width: 100dvw;\n  height: 100dvh;\n  font-family: ", ";\n  box-sizing: border-box;\n  overflow: hidden;\n  padding: 40px;\n"])), function (props) {
   var _a;
   return (_a = props.theme) === null || _a === void 0 ? void 0 : _a.fontFamily;
 });
-var Inner = styled__default.default.div(templateObject_2$7 || (templateObject_2$7 = __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 = styled__default.default.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  position: relative;\n  height: 50%;\n"], ["\n  position: relative;\n  height: 50%;\n"])));
-var StyledSelfieCaptureAnimatedMask = styled__default.default(SelfieCaptureAnimatedMaskWithStatus)(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  max-width: 100%;\n  height: 100%;\n"], ["\n  max-width: 100%;\n  height: 100%;\n"])));
-var SignaturePadContainer = styled__default.default.div(templateObject_5$1 || (templateObject_5$1 = __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__default.default.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: calc(100% - 67px);\n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: calc(100% - 67px);\n  ", "\n"])), function (props) {
+var Inner$1 = styled__default.default.div(templateObject_2$8 || (templateObject_2$8 = __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__default.default.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__default.default(SelfieCaptureAnimatedMaskWithStatus)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  max-width: 100%;\n  height: 100%;\n"], ["\n  max-width: 100%;\n  height: 100%;\n"])));
+var SignaturePadContainer = styled__default.default.div(templateObject_5$2 || (templateObject_5$2 = __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__default.default.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: calc(100% - 67px);\n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: calc(100% - 67px);\n  ", "\n"])), function (props) {
   return props.$disabled ? 'opacity: 0.5; pointer-events: none;' : '';
 });
-var AcceptBtn = styled__default.default(LoaderButton)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-left: auto;\n"], ["\n  margin-left: auto;\n"])));
-var templateObject_1$8, templateObject_2$7, templateObject_3$7, templateObject_4$2, templateObject_5$1, templateObject_6$1, templateObject_7;
+var AcceptBtn = styled__default.default(LoaderButton)(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n  margin-left: auto;\n"], ["\n  margin-left: auto;\n"])));
+var templateObject_1$9, templateObject_2$8, templateObject_3$8, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7$1;
 
 var VideoSignatureCapture = function VideoSignatureCapture(_a) {
-  var _b, _c, _d;
+  var _b;
   var onVideoCaptured = _a.onVideoCaptured,
     onFaceNotDetected = _a.onFaceNotDetected,
     onExit = _a.onExit,
     guidesComponent = _a.guidesComponent,
-    _e = _a.classNames,
-    classNames = _e === void 0 ? {} : _e,
-    _f = _a.colors,
-    colors = _f === void 0 ? {} : _f,
-    _g = _a.verbiage,
-    rawVerbiage = _g === void 0 ? {} : _g,
-    _h = _a.debugMode,
-    debugMode = _h === void 0 ? false : _h;
-  var cameraRef = React.useContext(CameraStateContext).cameraRef;
+    _c = _a.classNames,
+    classNames = _c === void 0 ? {} : _c,
+    _d = _a.colors,
+    colors = _d === void 0 ? {} : _d,
+    _e = _a.verbiage,
+    rawVerbiage = _e === void 0 ? {} : _e,
+    _f = _a.debugMode,
+    debugMode = _f === void 0 ? false : _f;
+  var camera = useCameraStore(function (state) {
+    return state.camera;
+  });
   var onPredictionMade = React.useContext(SelfieGuidanceModelsContext).onPredictionMade;
-  var _j = useVideoSignatureContext(),
-    signatureData = _j.signatureData,
-    signatureDataUrl = _j.signatureDataUrl,
-    signatureVideoData = _j.signatureVideoData,
-    startRecording = _j.startRecording,
-    stopRecording = _j.stopRecording;
+  var _g = useVideoSignatureContext(),
+    signatureData = _g.signatureData,
+    signatureDataUrl = _g.signatureDataUrl,
+    signatureVideoData = _g.signatureVideoData,
+    startRecording = _g.startRecording,
+    stopRecording = _g.stopRecording;
   React.useEffect(function () {
     startRecording();
     return function () {
@@ -11397,9 +11405,9 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
       onVideoCaptured === null || onVideoCaptured === void 0 ? void 0 : onVideoCaptured(signatureVideoData, signatureData, signatureDataUrl);
     }
   }, [onVideoCaptured, signatureData, signatureDataUrl, signatureVideoData]);
-  var _k = React.useState(0),
-    numFramesWithoutFaces = _k[0],
-    setNumFramesWithoutFaces = _k[1];
+  var _h = React.useState(0),
+    numFramesWithoutFaces = _h[0],
+    setNumFramesWithoutFaces = _h[1];
   React.useEffect(function () {
     onPredictionMade(function (_a) {
       var face = _a.face;
@@ -11426,7 +11434,7 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
   }, verbiage.guidanceMessageText))), /*#__PURE__*/React__namespace.default.createElement(GuidesComponent, {
     classNames: classNames.videoSignatureGuidesClassNames,
     status: "success"
-  }), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, "Video: ", (_c = cameraRef.current) === null || _c === void 0 ? void 0 : _c.width, "x", (_d = cameraRef.current) === null || _d === void 0 ? void 0 : _d.height)), /*#__PURE__*/React__namespace.default.createElement(ExitCaptureButton, {
+  }), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, "Video: ", camera === null || camera === void 0 ? void 0 : camera.width, "x", camera === null || camera === void 0 ? void 0 : camera.height)), /*#__PURE__*/React__namespace.default.createElement(ExitCaptureButton, {
     onClick: onExit,
     className: classNames.exitCaptureBtn
   }));
@@ -11485,8 +11493,8 @@ var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
     finished: true
   }, verbiage.doneBtnText))));
 };
-var StyledVideo$1 = styled__default.default.video(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 100%;\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 100%;\n"])));
-var templateObject_1$7;
+var StyledVideo$1 = styled__default.default.video(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 100%;\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 100%;\n"])));
+var templateObject_1$8;
 
 var VideoSignatureWizard = function VideoSignatureWizard(_a) {
   var _b;
@@ -11520,7 +11528,13 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
     setSignatureData = _l.setSignatureData,
     setSignatureVideoUrl = _l.setSignatureVideoUrl,
     logSelfieCaptureAttempt = _l.logSelfieCaptureAttempt;
-  var _m = React.useContext(CameraStateContext),
+  var _m = useCameraStore(shallow.useShallow(function (state) {
+      return {
+        cameraAccessDenied: state.cameraAccessDenied,
+        requestCameraAccess: state.requestCameraAccess,
+        releaseCameraAccess: state.releaseCameraAccess
+      };
+    })),
     cameraAccessDenied = _m.cameraAccessDenied,
     requestCameraAccess = _m.requestCameraAccess,
     releaseCameraAccess = _m.releaseCameraAccess;
@@ -11679,6 +11693,129 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
   }()));
 };
 
+var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+  var _z = _a.requestedAction,
+    requestedAction = _z === void 0 ? 'SHOW_ID_FRONT' : _z,
+    _0 = _a.satisfied,
+    satisfied = _0 === void 0 ? false : _0,
+    _1 = _a.faceGuideStatus,
+    faceGuideStatus = _1 === void 0 ? 'success' : _1,
+    faceGuideBorderWidth = _a.faceGuideBorderWidth,
+    faceGuideBorderColor = _a.faceGuideBorderColor,
+    _2 = _a.idCardGuideStatus,
+    idCardGuideStatus = _2 === void 0 ? 'ready' : _2,
+    idCardGuideBorderWidth = _a.idCardGuideBorderWidth,
+    idCardGuideBorderColor = _a.idCardGuideBorderColor,
+    idCardCaptureProgress = _a.idCardCaptureProgress,
+    _3 = _a.idCardCaptureGuideImages,
+    userSuppliedImages = _3 === void 0 ? defaultIdCaptureGuideImages : _3,
+    _4 = _a.classNames,
+    classNames = _4 === void 0 ? {} : _4,
+    _5 = _a.verbiage,
+    rawVerbiage = _5 === void 0 ? {} : _5;
+  var isRearFacing = useCameraStore(function (state) {
+    return state.isRearFacing;
+  });
+  var verbiage = useTranslations(rawVerbiage, {
+    idFrontInstructionText: 'Display the front of your ID card...',
+    idBackInstructionText: 'Display the back of your ID card...',
+    flipIdInstructionText: 'Please flip your ID card...',
+    verifyLivenessInstructionText: 'Performing facial recognition, please hold still...'
+  });
+  var instructionText = requestedAction === 'VERIFY_LIVENESS' ? verbiage.verifyLivenessInstructionText : requestedAction === 'SHOW_ID_FRONT' ? verbiage.idFrontInstructionText : requestedAction === 'FLIP_ID' ? verbiage.flipIdInstructionText : verbiage.idBackInstructionText;
+  var theme = styled.useTheme();
+  if (faceGuideBorderWidth === undefined) faceGuideBorderWidth = (_d = (_c = (_b = theme.idVideoCapture) === null || _b === void 0 ? void 0 : _b.faceGuides) === null || _c === void 0 ? void 0 : _c.borderWidth) !== null && _d !== void 0 ? _d : 5;
+  if (faceGuideBorderColor === undefined) faceGuideBorderColor = (_j = satisfied ? (_f = (_e = theme.idVideoCapture) === null || _e === void 0 ? void 0 : _e.faceGuides) === null || _f === void 0 ? void 0 : _f.satisfiedColor : (_h = (_g = theme.idVideoCapture) === null || _g === void 0 ? void 0 : _g.faceGuides) === null || _h === void 0 ? void 0 : _h.unsatisfiedColor) !== null && _j !== void 0 ? _j : '#D6DCE7';
+  if (idCardGuideBorderWidth === undefined) idCardGuideBorderWidth = (_m = (_l = (_k = theme.idVideoCapture) === null || _k === void 0 ? void 0 : _k.idCardGuides) === null || _l === void 0 ? void 0 : _l.borderWidth) !== null && _m !== void 0 ? _m : 20;
+  if (idCardGuideBorderColor === undefined) idCardGuideBorderColor = (_s = satisfied ? (_p = (_o = theme.idVideoCapture) === null || _o === void 0 ? void 0 : _o.idCardGuides) === null || _p === void 0 ? void 0 : _p.satisfiedColor : (_r = (_q = theme.idVideoCapture) === null || _q === void 0 ? void 0 : _q.idCardGuides) === null || _r === void 0 ? void 0 : _r.unsatisfiedColor) !== null && _s !== void 0 ? _s : '#D6DCE7';
+  var _6 = useResizeObserver__default.default(),
+    idCardGuideRef = _6.ref,
+    _7 = _6.width,
+    idCardGuideWidth = _7 === void 0 ? 0 : _7,
+    _8 = _6.height,
+    idCardGuideHeight = _8 === void 0 ? 0 : _8;
+  var idCaptureGuideImages = useGuideImages(userSuppliedImages);
+  var idCaptureGuideImagesByUrl = useGuideImagesByUrl(idCaptureGuideImages);
+  var _9 = React.useState(undefined),
+    aspectRatio = _9[0],
+    setAspectRatio = _9[1];
+  var onImageLoaded = React.useCallback(function (e) {
+    var _a, _b, _c, _d;
+    var img = e.currentTarget;
+    var imageByUrl = idCaptureGuideImagesByUrl[img.src];
+    var naturalWidth = (_b = (_a = imageByUrl === null || imageByUrl === void 0 ? void 0 : imageByUrl.width) !== null && _a !== void 0 ? _a : img.naturalWidth) !== null && _b !== void 0 ? _b : 0;
+    var naturalHeight = (_d = (_c = imageByUrl === null || imageByUrl === void 0 ? void 0 : imageByUrl.height) !== null && _c !== void 0 ? _c : img.naturalHeight) !== null && _d !== void 0 ? _d : 0;
+    setAspectRatio(naturalHeight > 0 ? naturalWidth / naturalHeight : undefined);
+  }, [idCaptureGuideImagesByUrl]);
+  var idCardImageStyle = React.useMemo(function () {
+    return {
+      maxWidth: idCardGuideWidth > idCardGuideHeight ? idCardGuideWidth : undefined,
+      maxHeight: idCardGuideHeight > idCardGuideWidth ? idCardGuideHeight : undefined,
+      height: '100%',
+      aspectRatio: aspectRatio
+    };
+  }, [idCardGuideWidth, idCardGuideHeight, aspectRatio]);
+  var disableIdGuides = ((_u = (_t = theme.idVideoCapture) === null || _t === void 0 ? void 0 : _t.idCardGuides) === null || _u === void 0 ? void 0 : _u.disableDuringLivenessCheck) && requestedAction === 'VERIFY_LIVENESS';
+  return /*#__PURE__*/React__namespace.default.createElement(Container, {
+    className: classNames.container
+  }, /*#__PURE__*/React__namespace.default.createElement(Inner, null, /*#__PURE__*/React__namespace.default.createElement(FaceGuideContainer, {
+    className: classNames.faceGuideContainer
+  }, /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureAnimatedMaskWithStatus, {
+    className: classNames.faceGuide,
+    status: requestedAction === 'VERIFY_LIVENESS' ? faceGuideStatus : 'success',
+    borderWidth: faceGuideBorderWidth,
+    borderColor: faceGuideBorderColor,
+    verticalAlign: "bottom"
+  })), !disableIdGuides && ( /*#__PURE__*/React__namespace.default.createElement(IdCardGuideContainer, {
+    className: classNames.idCardGuideContainer,
+    ref: idCardGuideRef
+  }, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideInner, {
+    className: classNames.idCardGuideInner,
+    style: {
+      aspectRatio: aspectRatio
+    }
+  }, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImageContainer, {
+    className: classNames.idCardGuideImageContainer,
+    status: requestedAction === 'VERIFY_LIVENESS' ? 'disabled' : idCardGuideStatus,
+    borderWidth: idCardGuideBorderWidth,
+    borderColor: idCardGuideBorderColor,
+    aspectRatio: aspectRatio,
+    "$isVisible": requestedAction !== 'FLIP_ID',
+    progress: requestedAction === 'VERIFY_LIVENESS' ? undefined : idCardCaptureProgress
+  }, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImage, {
+    alt: "",
+    className: classNames.idCardGuideImage,
+    "$isMirrored": !isRearFacing,
+    style: idCardImageStyle,
+    src: requestedAction === 'SHOW_ID_BACK' ? idCaptureGuideImages.landscape.SHOW_ID_BACK.url : idCaptureGuideImages.landscape.SHOW_ID_FRONT.url,
+    onLoad: onImageLoaded
+  })), requestedAction === 'FLIP_ID' && ( /*#__PURE__*/React__namespace.default.createElement(IdVideoCaptureFlipIdPrompt, {
+    idCaptureGuideImages: idCaptureGuideImages,
+    classNames: classNames.flipIdPrompt,
+    borderWidth: idCardGuideBorderWidth,
+    borderColor: idCardGuideBorderColor,
+    imageStyle: idCardImageStyle
+  }))), /*#__PURE__*/React__namespace.default.createElement(IdCardGuideInstructionsContainer, {
+    className: classNames.idCardGuideInstructionsContainer
+  }, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideInstructions, {
+    className: classNames.idCardGuideInstructions,
+    "$textColor": (_w = (_v = theme.idVideoCapture) === null || _v === void 0 ? void 0 : _v.idCardGuides) === null || _w === void 0 ? void 0 : _w.instructionsTextColor,
+    "$background": (_y = (_x = theme.idVideoCapture) === null || _x === void 0 ? void 0 : _x.idCardGuides) === null || _y === void 0 ? void 0 : _y.instructionsBackgroundColor
+  }, instructionText))))));
+};
+var Container = styled__default.default.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  display: flex;\n  max-height: 100%;\n  position: absolute;\n  z-index: 1000;\n  width: 100dvw;\n  height: 100dvh;\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  width: 100dvw;\n  height: 100dvh;\n  font-family: ", ";\n  box-sizing: border-box;\n  overflow: hidden;\n  padding: 40px;\n"])), function (props) {
+  var _a;
+  return (_a = props.theme) === null || _a === void 0 ? void 0 : _a.fontFamily;
+});
+var Inner = styled__default.default.div(templateObject_2$7 || (templateObject_2$7 = __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  justify-content: center;\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  justify-content: center;\n"])));
+var FaceGuideContainer = styled__default.default.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  position: relative;\n  height: 65%;\n"], ["\n  position: relative;\n  height: 65%;\n"])));
+var IdCardGuideContainer = styled__default.default.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  margin: 0 auto;\n  position: relative;\n  max-width: 100%;\n  height: 35%;\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  margin: 0 auto;\n  position: relative;\n  max-width: 100%;\n  height: 35%;\n"])));
+var IdCardGuideInner = styled__default.default.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  position: relative;\n  height: 100%;\n  width: 100%;\n"], ["\n  position: relative;\n  height: 100%;\n  width: 100%;\n"])));
+var IdCardGuideInstructionsContainer = styled__default.default.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  width: 100%;\n  text-align: center;\n  color: white;\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n  padding: 0 40px;\n  position: fixed;\n  bottom: 14px;\n  left: 0;\n  right: 0;\n  box-sizing: border-box;\n"], ["\n  width: 100%;\n  text-align: center;\n  color: white;\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n  padding: 0 40px;\n  position: fixed;\n  bottom: 14px;\n  left: 0;\n  right: 0;\n  box-sizing: border-box;\n"])));
+var IdCardGuideInstructions = styled__default.default(GuidanceMessage)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-content: center;\n  margin: 12px auto;\n  padding: 8px 12px;\n  font-weight: bold;\n  font-size: 18px;\n"], ["\n  align-content: center;\n  margin: 12px auto;\n  padding: 8px 12px;\n  font-weight: bold;\n  font-size: 18px;\n"])));
+var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$2, templateObject_5$1, templateObject_6$1, templateObject_7;
+
 var ReadTextPrompt = function ReadTextPrompt(_a) {
   var text = _a.text,
     onComplete = _a.onComplete,
@@ -11809,18 +11946,18 @@ var defaultVideoIdCaptureThresholds = {
   flipShortcutThreshold: 0.7
 };
 var IdVideoCapture = function IdVideoCapture(_a) {
-  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
   var onComplete = _a.onComplete,
     onIdFrontImageCaptured = _a.onIdFrontImageCaptured,
     onIdBackImageCaptured = _a.onIdBackImageCaptured,
     onFaceNotDetected = _a.onFaceNotDetected,
     onRecordingFailed = _a.onRecordingFailed,
     onExitCapture = _a.onExitCapture,
-    _x = _a.idCaptureModelsEnabled,
-    idCaptureModelsEnabled = _x === void 0 ? true : _x,
-    // idCardCaptureGuideImages = defaultIdCaptureGuideImages,
+    _w = _a.idCaptureModelsEnabled,
+    idCaptureModelsEnabled = _w === void 0 ? true : _w,
+    _x = _a.idCardCaptureGuideImages,
+    idCardCaptureGuideImages = _x === void 0 ? defaultIdCaptureGuideImages : _x,
     _y = _a.idCardFrontDelay,
-    // idCardCaptureGuideImages = defaultIdCaptureGuideImages,
     idCardFrontDelay = _y === void 0 ? 1000 : _y,
     _z = _a.videoIdCaptureThresholds,
     videoIdCaptureThresholds = _z === void 0 ? defaultVideoIdCaptureThresholds : _z,
@@ -11841,67 +11978,68 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     mergeAVStreams = _6 === void 0 ? false : _6,
     _7 = _a.classNames,
     classNames = _7 === void 0 ? {} : _7,
-    // colors = {},
-    _8 = _a.verbiage,
-    // colors = {},
-    rawVerbiage = _8 === void 0 ? {} : _8,
-    _9 = _a.debugMode,
-    debugMode = _9 === void 0 ? false : _9;
-  var _10 = useResizeObserver__default.default(),
-    ref = _10.ref,
-    _11 = _10.width,
-    width = _11 === void 0 ? 1 : _11,
-    _12 = _10.height,
-    height = _12 === void 0 ? 1 : _12;
-  var _13 = React.useContext(CameraStateContext),
-    cameraRef = _13.cameraRef,
-    videoRef = _13.videoRef,
-    videoLoaded = _13.videoLoaded,
-    cameraReady = _13.cameraReady,
-    microphoneReady = _13.microphoneReady,
-    audioStream = _13.audioStream,
-    setVideoLoaded = _13.setVideoLoaded;
-  var _14 = React.useState([]),
-    detectedObjects = _14[0],
-    setDetectedObjects = _14[1];
-  var _15 = React.useState(null),
-    face = _15[0],
-    setFace = _15[1];
-  var _16 = React.useContext(IdCaptureModelsContext),
-    idModelsReady = _16.ready,
-    startIdModels = _16.start,
-    stopIdModels = _16.stop,
-    onIdPredictionMade = _16.onPredictionMade,
-    setThresholds = _16.setThresholds,
-    setDocumentDetectionBoundaries = _16.setDocumentDetectionBoundaries,
-    bestFrameDetails = _16.bestFrameDetails,
-    resetBestFrame = _16.resetBestFrame,
-    idModelError = _16.modelError;
-  var _17 = React.useState(null),
-    videoStartsAt = _17[0],
-    setVideoStartsAt = _17[1];
-  var _18 = React.useContext(SubmissionContext),
-    setIdCaptureVideoAudioStartsAt = _18.setIdCaptureVideoAudioStartsAt,
-    setExpectedAudioText = _18.setExpectedAudioText;
-  var _19 = React.useContext(SelfieGuidanceModelsContext),
-    startSelfieGuidance = _19.start,
-    stopSelfieGuidance = _19.stop,
-    onSelfiePredictionMade = _19.onPredictionMade,
-    selfieModelError = _19.error;
-  var _20 = useVideoRecorder(cameraRef.current, audioStream, mergeAVStreams),
-    isRecordingVideo = _20.isRecordingVideo,
-    startRecordingVideo = _20.startRecordingVideo,
-    startRecordingAudio = _20.startRecordingAudio,
-    stopRecordingVideo = _20.stopRecordingVideo,
-    stopRecordingAudio = _20.stopRecordingAudio,
-    videoRecordingUnintentionallyStopped = _20.videoRecordingUnintentionallyStopped,
-    audioRecordingUnintentionallyStopped = _20.audioRecordingUnintentionallyStopped,
-    videoUrl = _20.videoUrl,
-    audioUrl = _20.audioUrl;
+    _8 = _a.colors,
+    colors = _8 === void 0 ? {} : _8,
+    _9 = _a.verbiage,
+    rawVerbiage = _9 === void 0 ? {} : _9,
+    _10 = _a.debugMode,
+    debugMode = _10 === void 0 ? false : _10;
+  var _11 = useResizeObserver__default.default(),
+    ref = _11.ref,
+    _12 = _11.width,
+    width = _12 === void 0 ? 1 : _12,
+    _13 = _11.height,
+    height = _13 === void 0 ? 1 : _13;
+  var _14 = useCameraStore(),
+    camera = _14.camera,
+    videoRef = _14.videoRef,
+    videoLoaded = _14.videoLoaded,
+    cameraReady = _14.cameraReady,
+    microphoneReady = _14.microphoneReady,
+    audioStream = _14.audioStream,
+    isRearFacing = _14.isRearFacing,
+    releaseCameraAccess = _14.releaseCameraAccess;
+  var _15 = React.useState([]),
+    detectedObjects = _15[0],
+    setDetectedObjects = _15[1];
+  var _16 = React.useState(null),
+    face = _16[0],
+    setFace = _16[1];
+  var _17 = React.useContext(IdCaptureModelsContext),
+    idModelsReady = _17.ready,
+    startIdModels = _17.start,
+    stopIdModels = _17.stop,
+    onIdPredictionMade = _17.onPredictionMade,
+    setThresholds = _17.setThresholds,
+    setDocumentDetectionBoundaries = _17.setDocumentDetectionBoundaries,
+    bestFrameDetails = _17.bestFrameDetails,
+    resetBestFrame = _17.resetBestFrame,
+    idModelError = _17.modelError;
+  var _18 = React.useState(null),
+    videoStartsAt = _18[0],
+    setVideoStartsAt = _18[1];
+  var _19 = React.useContext(SubmissionContext),
+    setIdCaptureVideoAudioStartsAt = _19.setIdCaptureVideoAudioStartsAt,
+    setExpectedAudioText = _19.setExpectedAudioText;
+  var _20 = React.useContext(SelfieGuidanceModelsContext),
+    startSelfieGuidance = _20.start,
+    stopSelfieGuidance = _20.stop,
+    onSelfiePredictionMade = _20.onPredictionMade,
+    selfieModelError = _20.error;
+  var _21 = useVideoRecorder(camera, audioStream, mergeAVStreams),
+    isRecordingVideo = _21.isRecordingVideo,
+    startRecordingVideo = _21.startRecordingVideo,
+    startRecordingAudio = _21.startRecordingAudio,
+    stopRecordingVideo = _21.stopRecordingVideo,
+    stopRecordingAudio = _21.stopRecordingAudio,
+    videoRecordingUnintentionallyStopped = _21.videoRecordingUnintentionallyStopped,
+    audioRecordingUnintentionallyStopped = _21.audioRecordingUnintentionallyStopped,
+    videoUrl = _21.videoUrl,
+    audioUrl = _21.audioUrl;
   var countdownTimeoutRef = React.useRef(undefined);
-  var _21 = React.useState(-1),
-    countdownRemaining = _21[0],
-    setCountdownRemaining = _21[1];
+  var _22 = React.useState(-1),
+    countdownRemaining = _22[0],
+    setCountdownRemaining = _22[1];
   React.useEffect(function () {
     if (!isRecordingVideo && !videoUrl) {
       startRecordingVideo();
@@ -11912,18 +12050,18 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     var needsAudio = !!readTextPrompt && !mergeAVStreams;
     var audioReady = !needsAudio || audioUrl;
     if (videoUrl && audioReady) {
-      setVideoLoaded(false);
+      releaseCameraAccess();
       onComplete === null || onComplete === void 0 ? void 0 : onComplete(videoUrl, audioUrl);
     }
-  }, [audioUrl, isRecordingVideo, mergeAVStreams, onComplete, readTextPrompt, setVideoLoaded, startRecordingVideo, videoUrl]);
+  }, [audioUrl, isRecordingVideo, mergeAVStreams, onComplete, readTextPrompt, releaseCameraAccess, startRecordingVideo, videoUrl]);
   React.useEffect(function () {
     if (videoRecordingUnintentionallyStopped || audioRecordingUnintentionallyStopped) {
       onRecordingFailed === null || onRecordingFailed === void 0 ? void 0 : onRecordingFailed();
     }
   }, [audioRecordingUnintentionallyStopped, onRecordingFailed, videoRecordingUnintentionallyStopped]);
-  var _22 = React.useState('SHOW_ID_FRONT'),
-    requestedAction = _22[0],
-    setRequestedAction = _22[1];
+  var _23 = React.useState('SHOW_ID_FRONT'),
+    requestedAction = _23[0],
+    setRequestedAction = _23[1];
   var shouldRunIdModels = idCaptureModelsEnabled && videoLoaded && cameraReady && idModelsReady && !idModelError && requestedAction !== 'READ_TEXT' && (!readTextPrompt || microphoneReady);
   React.useEffect(function startModelsWhenCapturing() {
     if (!shouldRunIdModels) return;
@@ -11943,18 +12081,18 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       bottom: 1
     });
   }, [setDocumentDetectionBoundaries]);
-  var _23 = React.useState(0),
-    currentDetectionScore = _23[0],
-    setCurrentDetectionScore = _23[1];
-  var _24 = React.useState('none'),
-    currentDetectedDocumentType = _24[0],
-    setCurrentDetectedDocumentType = _24[1];
-  var _25 = React.useState(0),
-    currentFocusScore = _25[0],
-    setCurrentFocusScore = _25[1];
+  var _24 = React.useState(0),
+    currentDetectionScore = _24[0],
+    setCurrentDetectionScore = _24[1];
+  var _25 = React.useState('none'),
+    currentDetectedDocumentType = _25[0],
+    setCurrentDetectedDocumentType = _25[1];
   var _26 = React.useState(0),
-    goodFramesCount = _26[0],
-    setGoodFramesCount = _26[1];
+    currentFocusScore = _26[0],
+    setCurrentFocusScore = _26[1];
+  var _27 = React.useState(0),
+    goodFramesCount = _27[0],
+    setGoodFramesCount = _27[1];
   var goodFramesThreshold = requestedAction === 'SHOW_ID_FRONT' ? videoIdCaptureThresholds.goodFrames.idCardFront : videoIdCaptureThresholds.goodFrames.idCardBack;
   var goodFramesThresholdMet = goodFramesCount >= goodFramesThreshold;
   React.useEffect(function () {
@@ -11975,9 +12113,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       } : 0);
     });
   }, [idCaptureModelsEnabled, onIdPredictionMade, idModelError, requestedAction, videoIdCaptureThresholds.flipShortcutThreshold]);
-  var _27 = React.useState(null),
-    idFrontCaptureStartedAt = _27[0],
-    setFirstGoodFrameTime = _27[1];
+  var _28 = React.useState(null),
+    idFrontCaptureStartedAt = _28[0],
+    setFirstGoodFrameTime = _28[1];
   React.useEffect(function () {
     if (goodFramesCount === 1) setFirstGoodFrameTime(new Date().getTime());
   }, [goodFramesCount]);
@@ -11998,9 +12136,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
   var frameHeight = (_e = (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) !== null && _e !== void 0 ? _e : 0;
   var faceBox = face === null || face === void 0 ? void 0 : face.box;
   var faceCentered = !faceBox || !frameWidth || faceBox.xMin > frameWidth * edgeBoundary && faceBox.yMin > frameHeight * edgeBoundary && faceBox.xMax < frameWidth * (1 - edgeBoundary) && faceBox.yMax < frameHeight * (1 - edgeBoundary);
-  var _28 = React.useState(),
-    countdownStartedAt = _28[0],
-    setCountdownStartedAt = _28[1];
+  var _29 = React.useState(),
+    countdownStartedAt = _29[0],
+    setCountdownStartedAt = _29[1];
   var photoCanvas = React.useRef(null);
   var frameLock = React.useRef(false);
   var captureFrame = React.useCallback(function () {
@@ -12123,9 +12261,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       stopSelfieGuidance();
     };
   }, [startSelfieGuidance, stopSelfieGuidance]);
-  var _29 = React.useState(0),
-    numFramesWithoutFaces = _29[0],
-    setNumFramesWithoutFaces = _29[1];
+  var _30 = React.useState(0),
+    numFramesWithoutFaces = _30[0],
+    setNumFramesWithoutFaces = _30[1];
   onSelfiePredictionMade(useDebounce.useThrottledCallback(React.useCallback(function (_a) {
     var face = _a.face;
     if (selfieModelError) return;
@@ -12141,12 +12279,12 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     }
   }, [disableFaceDetectionWhileAudioCapture, disableFaceDetectionWhileAudioCaptureMsDelay, numFramesWithoutFaces, onFaceNotDetected, timeoutStartedAt]);
   var theme = styled.useTheme();
-  var _30 = useTranslations(rawVerbiage, {
+  var _31 = useTranslations(rawVerbiage, {
       faceNotCenteredText: 'Please move your face to the center...',
       captureBtnText: 'Capture'
     }),
-    captureBtnText = _30.captureBtnText,
-    faceNotCenteredText = _30.faceNotCenteredText;
+    captureBtnText = _31.captureBtnText,
+    faceNotCenteredText = _31.faceNotCenteredText;
   var debugScalingDetails = useDebugScalingDetails({
     enabled: debugMode,
     pageWidth: width,
@@ -12171,16 +12309,25 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     classNames: classNames.readTextPrompt,
     verbiage: rawVerbiage.readTextPrompt,
     onComplete: stopRecording
-  })) : ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, debugMode && capturingId && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(ObjectDetectionDebugOverlayDiv, {
-    "$flipX": !((_l = cameraRef.current) === null || _l === void 0 ? void 0 : _l.isRearFacing)
+  })) : ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(IdVideoCaptureGuides, {
+    classNames: classNames.guides,
+    verbiage: rawVerbiage.guides,
+    requestedAction: requestedAction,
+    satisfied: satisfied,
+    idCardGuideStatus: countdownStartedAt ? 'capturing' : 'ready',
+    idCardCaptureProgress: !!countdownStartedAt ? 1 : 0,
+    idCardCaptureGuideImages: idCardCaptureGuideImages,
+    faceGuideBorderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor,
+    idCardGuideBorderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor
+  }), debugMode && capturingId && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(ObjectDetectionDebugOverlayDiv, {
+    "$flipX": !isRearFacing
   }, detectedObjects.map(function (obj, i) {
-    var _a;
     return /*#__PURE__*/React__namespace.default.createElement(IdCaptureDetectedObjectDebugBox, {
       key: i,
       obj: obj,
       scaling: debugScalingDetails,
       color: "blue",
-      flipX: !((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing)
+      flipX: !isRearFacing
     });
   })), /*#__PURE__*/React__namespace.default.createElement(DebugBoundingBoxOverlay, null, face && ( /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureFaceDebugBox, {
     face: face,
@@ -12189,9 +12336,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     className: classNames.guidanceMessageContainer
   }, /*#__PURE__*/React__namespace.default.createElement(GuidanceMessage, {
     className: classNames.guidanceMessage,
-    "$background": (_p = (_o = (_m = theme.guidanceMessages) === null || _m === void 0 ? void 0 : _m.negative) === null || _o === void 0 ? void 0 : _o.backgroundColor) !== null && _p !== void 0 ? _p : 'red',
-    "$textColor": (_s = (_r = (_q = theme.guidanceMessages) === null || _q === void 0 ? void 0 : _q.negative) === null || _r === void 0 ? void 0 : _r.textColor) !== null && _s !== void 0 ? _s : 'white'
-  }, guidanceText))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__namespace.default.createElement("br", null), isRecordingVideo ? '✅ Recording' : '❌ Not recording', /*#__PURE__*/React__namespace.default.createElement("br", null), goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', goodFramesCount, "/", goodFramesThreshold, /*#__PURE__*/React__namespace.default.createElement("br", null), "Document Type: ", currentDetectedDocumentType, /*#__PURE__*/React__namespace.default.createElement("br", null), "Detection Score: ", currentDetectionScore, /*#__PURE__*/React__namespace.default.createElement("br", null), "Focus Score: ", currentFocusScore, /*#__PURE__*/React__namespace.default.createElement("br", null), "Best Frame Detection Score:", ' ', (_u = (_t = bestFrameDetails.current) === null || _t === void 0 ? void 0 : _t.detectionScore) !== null && _u !== void 0 ? _u : 0, /*#__PURE__*/React__namespace.default.createElement("br", null), "Best Frame Focus Score: ", (_w = (_v = bestFrameDetails.current) === null || _v === void 0 ? void 0 : _v.focusScore) !== null && _w !== void 0 ? _w : 0)), countdownRemaining > 0 && capturingId && ( /*#__PURE__*/React__namespace.default.createElement(CountdownContainer, {
+    "$background": (_o = (_m = (_l = theme.guidanceMessages) === null || _l === void 0 ? void 0 : _l.negative) === null || _m === void 0 ? void 0 : _m.backgroundColor) !== null && _o !== void 0 ? _o : 'red',
+    "$textColor": (_r = (_q = (_p = theme.guidanceMessages) === null || _p === void 0 ? void 0 : _p.negative) === null || _q === void 0 ? void 0 : _q.textColor) !== null && _r !== void 0 ? _r : 'white'
+  }, guidanceText))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, camera ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u2705 Camera: ", camera.label, " (", camera.width, "x", camera.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__namespace.default.createElement("br", null), isRecordingVideo ? '✅ Recording' : '❌ Not recording', /*#__PURE__*/React__namespace.default.createElement("br", null), goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', goodFramesCount, "/", goodFramesThreshold, /*#__PURE__*/React__namespace.default.createElement("br", null), "Document Type: ", currentDetectedDocumentType, /*#__PURE__*/React__namespace.default.createElement("br", null), "Detection Score: ", currentDetectionScore, /*#__PURE__*/React__namespace.default.createElement("br", null), "Focus Score: ", currentFocusScore, /*#__PURE__*/React__namespace.default.createElement("br", null), "Best Frame Detection Score:", ' ', (_t = (_s = bestFrameDetails.current) === null || _s === void 0 ? void 0 : _s.detectionScore) !== null && _t !== void 0 ? _t : 0, /*#__PURE__*/React__namespace.default.createElement("br", null), "Best Frame Focus Score: ", (_v = (_u = bestFrameDetails.current) === null || _u === void 0 ? void 0 : _u.focusScore) !== null && _v !== void 0 ? _v : 0)), countdownRemaining > 0 && capturingId && ( /*#__PURE__*/React__namespace.default.createElement(CountdownContainer, {
     className: classNames.countdownContainer
   }, /*#__PURE__*/React__namespace.default.createElement(Countdown, {
     className: classNames.countdown
@@ -12471,42 +12618,31 @@ var VideoIdWizard = function VideoIdWizard(_a) {
     onExitCapture === null || onExitCapture === void 0 ? void 0 : onExitCapture();
   }, [onExitCapture]);
   var faceLivenessGuides = React.useCallback(function (_a) {
-    return null;
-  },
-  // <IdVideoCaptureGuides
-  //   idCardCaptureGuideImages={idCaptureGuideImages}
-  //   classNames={classNames.idVideoCapture?.guides}
-  //   verbiage={verbiage.idVideoCapture?.guides}
-  //   requestedAction="VERIFY_LIVENESS"
-  //   faceGuideStatus={status}
-  //   faceGuideBorderColor={
-  //     status === 'success'
-  //       ? colors.idVideoCapture?.guidesSatisfiedColor
-  //       : colors.idVideoCapture?.guidesUnsatisfiedColor
-  //   }
-  //   idCardGuideStatus="disabled"
-  //   // idCardGuideBorderColor={
-  //   //   status === 'success'
-  //   //     ? colors.idVideoCapture?.guidesSatisfiedColor
-  //   //     : colors.idVideoCapture?.guidesUnsatisfiedColor
-  //   // }
-  // />
-  [(_b = classNames.idVideoCapture) === null || _b === void 0 ? void 0 : _b.guides, (_c = colors.idVideoCapture) === null || _c === void 0 ? void 0 : _c.guidesSatisfiedColor, (_d = colors.idVideoCapture) === null || _d === void 0 ? void 0 : _d.guidesUnsatisfiedColor, idCaptureGuideImages, (_e = verbiage.idVideoCapture) === null || _e === void 0 ? void 0 : _e.guides]);
+    var _b, _c, _d, _e;
+    var status = _a.status;
+    return /*#__PURE__*/React__namespace.default.createElement(IdVideoCaptureGuides, {
+      idCardCaptureGuideImages: idCaptureGuideImages,
+      classNames: (_b = classNames.idVideoCapture) === null || _b === void 0 ? void 0 : _b.guides,
+      verbiage: (_c = verbiage.idVideoCapture) === null || _c === void 0 ? void 0 : _c.guides,
+      requestedAction: "VERIFY_LIVENESS",
+      faceGuideStatus: status,
+      faceGuideBorderColor: status === 'success' ? (_d = colors.idVideoCapture) === null || _d === void 0 ? void 0 : _d.guidesSatisfiedColor : (_e = colors.idVideoCapture) === null || _e === void 0 ? void 0 : _e.guidesUnsatisfiedColor,
+      idCardGuideStatus: "disabled"
+    });
+  }, [(_b = classNames.idVideoCapture) === null || _b === void 0 ? void 0 : _b.guides, (_c = colors.idVideoCapture) === null || _c === void 0 ? void 0 : _c.guidesSatisfiedColor, (_d = colors.idVideoCapture) === null || _d === void 0 ? void 0 : _d.guidesUnsatisfiedColor, idCaptureGuideImages, (_e = verbiage.idVideoCapture) === null || _e === void 0 ? void 0 : _e.guides]);
   if (submissionStatus === SubmissionStatus.SUBMITTING) {
     return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
       className: "flex"
     }, /*#__PURE__*/React__namespace.default.createElement(Spinner, null));
   }
-  return /*#__PURE__*/React__namespace.default.createElement(CameraProvider, {
-    key: "".concat(isCapturingId ? 'id' : 'selfie', "-camera-").concat(attempt),
-    preferContinuityCamera: isCapturingId,
+  return /*#__PURE__*/React__namespace.default.createElement(CameraStoreProvider, {
+    preferIphoneContinuityCamera: isCapturingId,
     preferFrontFacingCamera: !isCapturingId,
     requireMicrophoneAccess: !isCapturingId && !!readTextPrompt,
     maxVideoWidth: isCapturingId ? 1920 : 1280,
     maxFps: isCapturingId ? 60 : 30,
     onCameraAccessDenied: onCameraAccessDenied,
-    onMicrophoneAccessDenied: onMicrophoneAccessDenied,
-    debugMode: debugMode
+    onMicrophoneAccessDenied: onMicrophoneAccessDenied
   }, /*#__PURE__*/React__namespace.default.createElement(IdCaptureModelsProvider, {
     autoStart: false,
     documentDetectionModelUrl: (_g = (_f = idCaptureProps.assets) === null || _f === void 0 ? void 0 : _f.documentDetectionModelUrl) !== null && _g !== void 0 ? _g : '',
@@ -12632,17 +12768,15 @@ function CompositeWizard(_a) {
     _o = _a.captureSignatureVideo,
     captureSignatureVideo = _o === void 0 ? false : _o,
     onCameraAccessDenied = _a.onCameraAccessDenied,
-    onMicrophoneAccessDenied = _a.onMicrophoneAccessDenied,
-    _p = _a.debugMode,
-    debugMode = _p === void 0 ? false : _p;
-  var _q = React.useContext(SubmissionContext),
-    submit = _q.submit,
-    submissionStatus = _q.submissionStatus,
-    setSignatureData = _q.setSignatureData,
-    setAdditionalDocuments = _q.setAdditionalDocuments;
-  var _r = React.useState(0),
-    checkIndex = _r[0],
-    setCheckIndex = _r[1];
+    onMicrophoneAccessDenied = _a.onMicrophoneAccessDenied;
+  var _p = React.useContext(SubmissionContext),
+    submit = _p.submit,
+    submissionStatus = _p.submissionStatus,
+    setSignatureData = _p.setSignatureData,
+    setAdditionalDocuments = _p.setAdditionalDocuments;
+  var _q = React.useState(0),
+    checkIndex = _q[0],
+    setCheckIndex = _q[1];
   var checks = React.useMemo(function () {
     var _a, _b;
     var checks = __spreadArray([], userChecks, true);
@@ -12720,16 +12854,6 @@ function CompositeWizard(_a) {
       return i + 1;
     });
   }, [onVideoSignatureCompleteProp]);
-  var _s = React.useState(0),
-    videoSignatureAttempts = _s[0],
-    setVideoSignatureAttempts = _s[1];
-  var onVideoSignatureRetryProp = videoSignatureCaptureProps.onRetryClicked;
-  var onVideoSignatureRetry = React.useCallback(function () {
-    onVideoSignatureRetryProp === null || onVideoSignatureRetryProp === void 0 ? void 0 : onVideoSignatureRetryProp();
-    setVideoSignatureAttempts(function (n) {
-      return n + 1;
-    });
-  }, [onVideoSignatureRetryProp]);
   var onAdditionalDocumentCaptureCompleteProp = additionalDocumentCaptureProps === null || additionalDocumentCaptureProps === void 0 ? void 0 : additionalDocumentCaptureProps.onComplete;
   var onAdditionalDocumentCaptureComplete = React.useCallback(function (uploadedDocuments) {
     setAdditionalDocuments(uploadedDocuments);
@@ -12758,11 +12882,9 @@ function CompositeWizard(_a) {
   }
   switch (checks[checkIndex]) {
     case 'IdCapture':
-      return /*#__PURE__*/React__namespace.default.createElement(CameraProvider, {
-        key: "IdCaptureCamera",
+      return /*#__PURE__*/React__namespace.default.createElement(CameraStoreProvider, {
         onCameraAccessDenied: onCameraAccessDenied,
-        onMicrophoneAccessDenied: onMicrophoneAccessDenied,
-        debugMode: debugMode
+        onMicrophoneAccessDenied: onMicrophoneAccessDenied
       }, /*#__PURE__*/React__namespace.default.createElement(IdCaptureModelsProvider, {
         autoStart: false,
         documentDetectionModelUrl: (_d = (_c = idCaptureProps.assets) === null || _c === void 0 ? void 0 : _c.documentDetectionModelUrl) !== null && _d !== void 0 ? _d : '',
@@ -12779,13 +12901,11 @@ function CompositeWizard(_a) {
         onMicrophoneAccessDenied: onMicrophoneAccessDenied
       }));
     case 'FaceLiveness':
-      return /*#__PURE__*/React__namespace.default.createElement(CameraProvider, {
-        key: "FaceLivenessCamera",
+      return /*#__PURE__*/React__namespace.default.createElement(CameraStoreProvider, {
         preferFrontFacingCamera: true,
-        preferContinuityCamera: false,
+        preferIphoneContinuityCamera: false,
         onCameraAccessDenied: onCameraAccessDenied,
-        onMicrophoneAccessDenied: onMicrophoneAccessDenied,
-        debugMode: debugMode
+        onMicrophoneAccessDenied: onMicrophoneAccessDenied
       }, /*#__PURE__*/React__namespace.default.createElement(SelfieGuidanceModelsProvider, {
         autoStart: false,
         onModelError: faceLivenessProps.onModelError,
@@ -12798,15 +12918,13 @@ function CompositeWizard(_a) {
         onAccept: onSignatureCaptureSuccess
       }));
     case 'VideoSignatureCapture':
-      return /*#__PURE__*/React__namespace.default.createElement(CameraProvider, {
-        key: "SignatureKycCamera-".concat(videoSignatureAttempts),
-        preferContinuityCamera: false,
+      return /*#__PURE__*/React__namespace.default.createElement(CameraStoreProvider, {
+        preferIphoneContinuityCamera: false,
         preferFrontFacingCamera: true,
         maxVideoWidth: 1280,
         maxFps: 30,
         onCameraAccessDenied: onCameraAccessDenied,
-        onMicrophoneAccessDenied: onMicrophoneAccessDenied,
-        debugMode: debugMode
+        onMicrophoneAccessDenied: onMicrophoneAccessDenied
       }, /*#__PURE__*/React__namespace.default.createElement(SelfieGuidanceModelsProvider, {
         autoStart: false,
         throttleMs: 250,
@@ -12814,8 +12932,7 @@ function CompositeWizard(_a) {
         modelLoadTimeoutMs: videoSignatureCaptureProps.modelLoadTimeoutMs,
         requireVerticalFaceCentering: false
       }, /*#__PURE__*/React__namespace.default.createElement(VideoSignatureWizard, _assign({}, videoSignatureCaptureProps, {
-        onComplete: onVideoSignatureComplete,
-        onRetryClicked: onVideoSignatureRetry
+        onComplete: onVideoSignatureComplete
       }))));
     case 'AdditionalDocumentCapture':
       return /*#__PURE__*/React__namespace.default.createElement(AdditionalDocumentCaptureWizard, _assign({}, additionalDocumentCaptureProps, {
@@ -13266,8 +13383,7 @@ var IdValidation = function IdValidation(_a) {
     videoSignatureCaptureProps: videoSignatureCaptureProps,
     captureSignature: captureSignature,
     captureSignatureVideo: captureSignatureVideo,
-    onCameraAccessDenied: onCameraAccessDenied,
-    debugMode: debugMode
+    onCameraAccessDenied: onCameraAccessDenied
   }))));
 };
 
@@ -13373,8 +13489,7 @@ var FaceValidation = function FaceValidation(_a) {
       return ['FaceLiveness'];
     }, []),
     faceLivenessProps: faceLivenessProps,
-    onCameraAccessDenied: onCameraAccessDenied,
-    debugMode: debugMode
+    onCameraAccessDenied: onCameraAccessDenied
   }))));
 };
 
@@ -13607,8 +13722,7 @@ var IdAndFaceValidation = function IdAndFaceValidation(_a) {
     additionalDocumentCaptureProps: additionalDocumentCaptureProps,
     captureSignature: captureSignature,
     captureSignatureVideo: captureSignatureVideo,
-    onCameraAccessDenied: onCameraAccessDenied,
-    debugMode: debugMode
+    onCameraAccessDenied: onCameraAccessDenied
   }))));
 };
 
@@ -13863,8 +13977,7 @@ var CustomerIdAndBiometricsEnrollment = function CustomerIdAndBiometricsEnrollme
     videoSignatureCaptureProps: videoSignatureCaptureProps,
     captureSignature: captureSignature,
     captureSignatureVideo: captureSignatureVideo,
-    onCameraAccessDenied: onCameraAccessDenied,
-    debugMode: debugMode
+    onCameraAccessDenied: onCameraAccessDenied
   }))));
 };
 
@@ -14196,7 +14309,7 @@ var CustomerVerificationWizard = function CustomerVerificationWizard(_a) {
   var _l = React.useState('LOADING'),
     captureState = _l[0],
     setCaptureState = _l[1];
-  var _m = React.useContext(CameraStateContext),
+  var _m = useCameraStore(),
     cameraAccessDenied = _m.cameraAccessDenied,
     releaseCameraAccess = _m.releaseCameraAccess;
   var _o = React.useContext(SelfieGuidanceModelsContext),
@@ -14402,10 +14515,9 @@ var CustomerVerification = function CustomerVerification(_a) {
     onSubmit: onSubmit,
     geolocationEnabled: geolocationEnabled,
     geolocationRequired: geolocationRequired
-  }, /*#__PURE__*/React__namespace.default.createElement(CameraProvider, {
+  }, /*#__PURE__*/React__namespace.default.createElement(CameraStoreProvider, {
     preferFrontFacingCamera: true,
-    onCameraAccessDenied: onCameraAccessDenied,
-    debugMode: debugMode
+    onCameraAccessDenied: onCameraAccessDenied
   }, /*#__PURE__*/React__namespace.default.createElement(SelfieGuidanceModelsProvider, {
     autoStart: false,
     onModelError: onModelError,
@@ -14754,7 +14866,7 @@ var CustomerIdentificationWizard = function CustomerIdentificationWizard(_a) {
   var _l = React.useState('LOADING'),
     captureState = _l[0],
     setCaptureState = _l[1];
-  var _m = React.useContext(CameraStateContext),
+  var _m = useCameraStore(),
     cameraAccessDenied = _m.cameraAccessDenied,
     releaseCameraAccess = _m.releaseCameraAccess;
   var _o = React.useContext(SelfieGuidanceModelsContext),
@@ -14958,10 +15070,9 @@ var CustomerIdentification = function CustomerIdentification(_a) {
     onSubmit: onSubmit,
     geolocationEnabled: geolocationEnabled,
     geolocationRequired: geolocationRequired
-  }, /*#__PURE__*/React__namespace.default.createElement(CameraProvider, {
+  }, /*#__PURE__*/React__namespace.default.createElement(CameraStoreProvider, {
     preferFrontFacingCamera: true,
-    onCameraAccessDenied: onCameraAccessDenied,
-    debugMode: debugMode
+    onCameraAccessDenied: onCameraAccessDenied
   }, /*#__PURE__*/React__namespace.default.createElement(SelfieGuidanceModelsProvider, {
     autoStart: false,
     modelLoadTimeoutMs: modelLoadTimeoutMs,
@@ -15288,8 +15399,7 @@ var VideoIdValidation = function VideoIdValidation(_a) {
     captureSignature: captureSignature,
     captureSignatureVideo: captureSignatureVideo,
     onCameraAccessDenied: onCameraAccessDenied,
-    onMicrophoneAccessDenied: onMicrophoneAccessDenied,
-    debugMode: debugMode
+    onMicrophoneAccessDenied: onMicrophoneAccessDenied
   }))));
 };
 
@@ -15446,8 +15556,7 @@ var CustomerBiometricsEnrollment = function CustomerBiometricsEnrollment(_a) {
     videoSignatureCaptureProps: videoSignatureCaptureProps,
     captureSignature: captureSignature,
     captureSignatureVideo: captureSignatureVideo,
-    onCameraAccessDenied: onCameraAccessDenied,
-    debugMode: debugMode
+    onCameraAccessDenied: onCameraAccessDenied
   }))));
 };
 
@@ -15505,11 +15614,10 @@ var DocumentCapture = function DocumentCapture(_a) {
     onDocumentUploadFailed: onDocumentUploadFailed,
     geolocationEnabled: geolocationEnabled,
     geolocationRequired: geolocationRequired
-  }, /*#__PURE__*/React__namespace.default.createElement(CameraProvider, {
+  }, /*#__PURE__*/React__namespace.default.createElement(CameraStoreProvider, {
     requestAccessAutomatically: false,
-    preferContinuityCamera: true,
-    onCameraAccessDenied: onCameraAccessDenied,
-    debugMode: debugMode
+    preferIphoneContinuityCamera: true,
+    onCameraAccessDenied: onCameraAccessDenied
   }, /*#__PURE__*/React__namespace.default.createElement(DocumentCaptureWizard, {
     onSuccess: onComplete,
     onExitCapture: onExitCapture,