idmission-web-sdk 2.2.34 → 2.2.36

package/dist/sdk2.umd.development.js

@@ -211,7 +211,7 @@
     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
@@ -372,7 +372,7 @@
     });
   }
 
-  var PageContainerDiv = styled.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.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) {
@@ -412,7 +412,7 @@
     }, dimensionsCalculated && children);
   });
   PageContainer.displayName = 'PageContainer';
-  var templateObject_1$J;
+  var templateObject_1$L;
 
   var LoaderButton = function LoaderButton(_a) {
     var children = _a.children,
@@ -471,30 +471,30 @@
       className: "ladda-label"
     }, children));
   };
-  var StyledButton = styled.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.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(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(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.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.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.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.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(OverlayContainer)(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n  background: #f7f6fb;\n"], ["\n  background: #f7f6fb;\n"])));
-  var ButtonsColumn = styled.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(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.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.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(OverlayContainer)(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n  background: #f7f6fb;\n"], ["\n  background: #f7f6fb;\n"])));
+  var ButtonsColumn = styled.div(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 15px 0;\n  justify-content: center;\n  margin-top: 24px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 15px 0;\n  justify-content: center;\n  margin-top: 24px;\n"])));
+  var WideButton = styled(LoaderButton)(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n  width: 100%;\n  border-radius: 30px;\n"], ["\n  width: 100%;\n  border-radius: 30px;\n"])));
   var WideBorderButton = styled(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;
 
   function _extends() {
     return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -1049,13 +1049,13 @@
     }, 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$1 = styled.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$1 = styled.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) {
@@ -1080,7 +1080,7 @@
     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'];
@@ -1088,11 +1088,11 @@
     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) {
@@ -1124,7 +1124,7 @@
     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],
@@ -3037,721 +3037,119 @@
     }, [refCallback, size.width, size.height]);
   }
 
-  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;
+  function _typeof$1(o) {
+    "@babel/helpers - typeof";
+
+    return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+      return typeof o;
+    } : function (o) {
+      return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+    }, _typeof$1(o);
+  }
+
+  function toPrimitive(t, r) {
+    if ("object" != _typeof$1(t) || !t) return t;
+    var e = t[Symbol.toPrimitive];
+    if (void 0 !== e) {
+      var i = e.call(t, r);
+      if ("object" != _typeof$1(i)) return i;
+      throw new TypeError("@@toPrimitive must return a primitive value.");
     }
-    return [frameWidth, frameHeight];
+    return (String )(t);
   }
 
-  var InvisibleCanvas = styled.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);
+  function toPropertyKey(t) {
+    var i = toPrimitive(t, "string");
+    return "symbol" == _typeof$1(i) ? i : i + "";
+  }
+
+  function _defineProperties(e, r) {
+    for (var t = 0; t < r.length; t++) {
+      var o = r[t];
+      o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, toPropertyKey(o.key), o);
     }
-    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);
+  function _createClass(e, r, t) {
+    return r && _defineProperties(e.prototype, r), Object.defineProperty(e, "prototype", {
+      writable: !1
+    }), e;
   }
-  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];
-        }
-      });
-    });
+  function asyncGeneratorStep(n, t, e, r, o, a, c) {
+    try {
+      var i = n[a](c),
+        u = i.value;
+    } catch (n) {
+      return void e(n);
+    }
+    i.done ? t(u) : Promise.resolve(u).then(r, o);
   }
-  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();
+  function _asyncToGenerator(n) {
+    return function () {
+      var t = this,
+        e = arguments;
+      return new Promise(function (r, o) {
+        var a = n.apply(t, e);
+        function _next(n) {
+          asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
+        }
+        function _throw(n) {
+          asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
+        }
+        _next(void 0);
       });
-      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 _setPrototypeOf(t, e) {
+    return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
+      return t.__proto__ = e, t;
+    }, _setPrototypeOf(t, e);
   }
-  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 _inheritsLoose(t, o) {
+    t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
   }
-  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.createElement(CameraStateContext.Provider, {
-      value: captureDevice
-    }, children);
-  };
-
-  function _typeof$1(o) {
-    "@babel/helpers - typeof";
-
-    return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-      return typeof o;
-    } : function (o) {
-      return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-    }, _typeof$1(o);
-  }
-
-  function toPrimitive(t, r) {
-    if ("object" != _typeof$1(t) || !t) return t;
-    var e = t[Symbol.toPrimitive];
-    if (void 0 !== e) {
-      var i = e.call(t, r);
-      if ("object" != _typeof$1(i)) return i;
-      throw new TypeError("@@toPrimitive must return a primitive value.");
-    }
-    return (String )(t);
-  }
-
-  function toPropertyKey(t) {
-    var i = toPrimitive(t, "string");
-    return "symbol" == _typeof$1(i) ? i : i + "";
-  }
-
-  function _defineProperties(e, r) {
-    for (var t = 0; t < r.length; t++) {
-      var o = r[t];
-      o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, toPropertyKey(o.key), o);
-    }
-  }
-  function _createClass(e, r, t) {
-    return r && _defineProperties(e.prototype, r), Object.defineProperty(e, "prototype", {
-      writable: !1
-    }), e;
-  }
-
-  function asyncGeneratorStep(n, t, e, r, o, a, c) {
-    try {
-      var i = n[a](c),
-        u = i.value;
-    } catch (n) {
-      return void e(n);
-    }
-    i.done ? t(u) : Promise.resolve(u).then(r, o);
-  }
-  function _asyncToGenerator(n) {
-    return function () {
-      var t = this,
-        e = arguments;
-      return new Promise(function (r, o) {
-        var a = n.apply(t, e);
-        function _next(n) {
-          asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
-        }
-        function _throw(n) {
-          asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
-        }
-        _next(void 0);
-      });
-    };
-  }
-
-  function _setPrototypeOf(t, e) {
-    return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
-      return t.__proto__ = e, t;
-    }, _setPrototypeOf(t, e);
-  }
-
-  function _inheritsLoose(t, o) {
-    t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
-  }
-
-  function _getPrototypeOf(t) {
-    return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
-      return t.__proto__ || Object.getPrototypeOf(t);
-    }, _getPrototypeOf(t);
-  }
-
-  function _isNativeFunction(t) {
-    try {
-      return -1 !== Function.toString.call(t).indexOf("[native code]");
-    } catch (n) {
-      return "function" == typeof t;
-    }
-  }
-
-  function _isNativeReflectConstruct() {
-    try {
-      var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
-    } catch (t) {}
-    return (_isNativeReflectConstruct = function _isNativeReflectConstruct() {
-      return !!t;
-    })();
-  }
-
-  function _construct(t, e, r) {
-    if (_isNativeReflectConstruct()) return Reflect.construct.apply(null, arguments);
-    var o = [null];
-    o.push.apply(o, e);
-    var p = new (t.bind.apply(t, o))();
-    return r && _setPrototypeOf(p, r.prototype), p;
-  }
-
-  function _wrapNativeSuper(t) {
-    var r = "function" == typeof Map ? new Map() : void 0;
-    return _wrapNativeSuper = function _wrapNativeSuper(t) {
-      if (null === t || !_isNativeFunction(t)) return t;
-      if ("function" != typeof t) throw new TypeError("Super expression must either be null or a function");
-      if (void 0 !== r) {
-        if (r.has(t)) return r.get(t);
-        r.set(t, Wrapper);
+
+  function _getPrototypeOf(t) {
+    return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
+      return t.__proto__ || Object.getPrototypeOf(t);
+    }, _getPrototypeOf(t);
+  }
+
+  function _isNativeFunction(t) {
+    try {
+      return -1 !== Function.toString.call(t).indexOf("[native code]");
+    } catch (n) {
+      return "function" == typeof t;
+    }
+  }
+
+  function _isNativeReflectConstruct() {
+    try {
+      var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    } catch (t) {}
+    return (_isNativeReflectConstruct = function _isNativeReflectConstruct() {
+      return !!t;
+    })();
+  }
+
+  function _construct(t, e, r) {
+    if (_isNativeReflectConstruct()) return Reflect.construct.apply(null, arguments);
+    var o = [null];
+    o.push.apply(o, e);
+    var p = new (t.bind.apply(t, o))();
+    return r && _setPrototypeOf(p, r.prototype), p;
+  }
+
+  function _wrapNativeSuper(t) {
+    var r = "function" == typeof Map ? new Map() : void 0;
+    return _wrapNativeSuper = function _wrapNativeSuper(t) {
+      if (null === t || !_isNativeFunction(t)) return t;
+      if ("function" != typeof t) throw new TypeError("Super expression must either be null or a function");
+      if (void 0 !== r) {
+        if (r.has(t)) return r.get(t);
+        r.set(t, Wrapper);
       }
       function Wrapper() {
         return _construct(t, arguments, _getPrototypeOf(this).constructor);
@@ -4111,9 +3509,9 @@
   }
   var _regeneratorRuntime = /*@__PURE__*/getDefaultExportFromCjs(regenerator);
 
-  function _createForOfIteratorHelperLoose$1(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (t) return (t = t.call(r)).next.bind(t); if (Array.isArray(r) || (t = _unsupportedIterableToArray$1(r)) || e) { t && (r = t); var o = 0; return function () { return o >= r.length ? { done: !0 } : { done: !1, value: r[o++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-  function _unsupportedIterableToArray$1(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$1(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$1(r, a) : void 0; } }
-  function _arrayLikeToArray$1(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+  function _createForOfIteratorHelperLoose$2(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (t) return (t = t.call(r)).next.bind(t); if (Array.isArray(r) || (t = _unsupportedIterableToArray$2(r)) || e) { t && (r = t); var o = 0; return function () { return o >= r.length ? { done: !0 } : { done: !1, value: r[o++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+  function _unsupportedIterableToArray$2(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$2(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$2(r, a) : void 0; } }
+  function _arrayLikeToArray$2(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
   var t = self;
   function e() {
     throw Error("Invalid UTF8");
@@ -6340,7 +5738,7 @@
       height: (_hn4 = hn(e, 4)) != null ? _hn4 : 0,
       angle: 0
     }), (_en2 = en(t, ws, 4)) != null && _en2.g().length) {
-      for (var _iterator = _createForOfIteratorHelperLoose$1(en(t, ws, 4).g()), _step; !(_step = _iterator()).done;) {
+      for (var _iterator = _createForOfIteratorHelperLoose$2(en(t, ws, 4).g()), _step; !(_step = _iterator()).done;) {
         var _We, _We2, _We3, _un3;
         var _e16 = _step.value;
         i.keypoints.push({
@@ -6355,7 +5753,7 @@
   }
   function Qi(t) {
     var e = [];
-    for (var _iterator2 = _createForOfIteratorHelperLoose$1(rn(t, Fs, 1)), _step2; !(_step2 = _iterator2()).done;) {
+    for (var _iterator2 = _createForOfIteratorHelperLoose$2(rn(t, Fs, 1)), _step2; !(_step2 = _iterator2()).done;) {
       var _fn2, _fn3, _fn4;
       var _n14 = _step2.value;
       e.push({
@@ -6368,7 +5766,7 @@
   }
   function to(t) {
     var e = [];
-    for (var _iterator3 = _createForOfIteratorHelperLoose$1(rn(t, Ts, 1)), _step3; !(_step3 = _iterator3()).done;) {
+    for (var _iterator3 = _createForOfIteratorHelperLoose$2(rn(t, Ts, 1)), _step3; !(_step3 = _iterator3()).done;) {
       var _fn5, _fn6, _fn7;
       var _n15 = _step3.value;
       e.push({
@@ -6516,7 +5914,7 @@
     var r = new Uint32Array(e.length);
     for (var _n16 = 0; _n16 < e.length; _n16++) r[_n16] = t.i.stringToNewUTF8(e[_n16]);
     e = t.i._malloc(4 * r.length), t.i.HEAPU32.set(r, e >> 2), n(e);
-    for (var _iterator4 = _createForOfIteratorHelperLoose$1(r), _step4; !(_step4 = _iterator4()).done;) {
+    for (var _iterator4 = _createForOfIteratorHelperLoose$2(r), _step4; !(_step4 = _iterator4()).done;) {
       var _e17 = _step4.value;
       t.i._free(_e17);
     }
@@ -6882,7 +6280,7 @@
         }
         t.push(n);
       };
-      for (var _iterator7 = _createForOfIteratorHelperLoose$1(this.g), _step7; !(_step7 = _iterator7()).done;) {
+      for (var _iterator7 = _createForOfIteratorHelperLoose$2(this.g), _step7; !(_step7 = _iterator7()).done;) {
         _loop();
       }
       return new _Yo(t, this.ba(), this.K(), this.canvas, this.l, this.width, this.height);
@@ -7014,7 +6412,7 @@
           }
           t.push(n);
         };
-        for (var _iterator8 = _createForOfIteratorHelperLoose$1(this.g), _step8; !(_step8 = _iterator8()).done;) {
+        for (var _iterator8 = _createForOfIteratorHelperLoose$2(this.g), _step8; !(_step8 = _iterator8()).done;) {
           _loop2();
         }
         return new _ia(t, this.K(), this.canvas, this.l, this.width, this.height);
@@ -7494,7 +6892,7 @@
       yn(e, si, this.h);
       var n = new qr();
       Hr(n, "mediapipe.tasks.vision.face_detector.FaceDetectorGraph"), Yr(n, "IMAGE:image_in"), Yr(n, "NORM_RECT:norm_rect_in"), $r(n, "DETECTIONS:detections"), n.o(e), es(t, n), this.g.attachProtoVectorListener("detections", function (t, e) {
-        for (var _iterator9 = _createForOfIteratorHelperLoose$1(t), _step9; !(_step9 = _iterator9()).done;) {
+        for (var _iterator9 = _createForOfIteratorHelperLoose$2(t), _step9; !(_step9 = _iterator9()).done;) {
           var _e23 = _step9.value;
           t = Es(_e23), _this43.j.detections.push(Zi(t));
         }
@@ -7588,7 +6986,7 @@
       yn(e, di, this.h);
       var n = new qr();
       Hr(n, "mediapipe.tasks.vision.face_landmarker.FaceLandmarkerGraph"), Yr(n, "IMAGE:image_in"), Yr(n, "NORM_RECT:norm_rect"), $r(n, "NORM_LANDMARKS:face_landmarks"), n.o(e), es(t, n), this.g.attachProtoVectorListener("face_landmarks", function (t, e) {
-        for (var _iterator10 = _createForOfIteratorHelperLoose$1(t), _step10; !(_step10 = _iterator10()).done;) {
+        for (var _iterator10 = _createForOfIteratorHelperLoose$2(t), _step10; !(_step10 = _iterator10()).done;) {
           var _e24 = _step10.value;
           t = Ms(_e24), _this45.j.faceLandmarks.push(Qi(t));
         }
@@ -7597,7 +6995,7 @@
         _o(_this45, t);
       }), this.outputFaceBlendshapes && (rs(t, "blendshapes"), $r(n, "BLENDSHAPES:blendshapes"), this.g.attachProtoVectorListener("blendshapes", function (t, e) {
         if (_this45.outputFaceBlendshapes) {
-          for (var _iterator11 = _createForOfIteratorHelperLoose$1(t), _step11; !(_step11 = _iterator11()).done;) {
+          for (var _iterator11 = _createForOfIteratorHelperLoose$2(t), _step11; !(_step11 = _iterator11()).done;) {
             var _t$g;
             var _e25 = _step11.value;
             t = fs(_e25), _this45.j.faceBlendshapes.push(Ji((_t$g = t.g()) != null ? _t$g : []));
@@ -7608,7 +7006,7 @@
         _o(_this45, t);
       })), this.outputFacialTransformationMatrixes && (rs(t, "face_geometry"), $r(n, "FACE_GEOMETRY:face_geometry"), this.g.attachProtoVectorListener("face_geometry", function (t, e) {
         if (_this45.outputFacialTransformationMatrixes) {
-          for (var _iterator12 = _createForOfIteratorHelperLoose$1(t), _step12; !(_step12 = _iterator12()).done;) {
+          for (var _iterator12 = _createForOfIteratorHelperLoose$2(t), _step12; !(_step12 = _iterator12()).done;) {
             var _ln2, _ln3, _He;
             var _e26 = _step12.value;
             (t = en(ai(_e26), Ps, 2)) && _this45.j.facialTransformationMatrixes.push({
@@ -7739,11 +7137,11 @@
       e = !0;
     }
     var n = [];
-    for (var _iterator13 = _createForOfIteratorHelperLoose$1(t), _step13; !(_step13 = _iterator13()).done;) {
+    for (var _iterator13 = _createForOfIteratorHelperLoose$2(t), _step13; !(_step13 = _iterator13()).done;) {
       var _s9 = _step13.value;
       var r = fs(_s9);
       t = [];
-      for (var _iterator14 = _createForOfIteratorHelperLoose$1(r.g()), _step14; !(_step14 = _iterator14()).done;) {
+      for (var _iterator14 = _createForOfIteratorHelperLoose$2(r.g()), _step14; !(_step14 = _iterator14()).done;) {
         var _fn8, _ref9, _un4, _ref10, _un5;
         var _n24 = _step14.value;
         r = e && null != hn(_n24, 1) ? ln(hn(_n24, 1)) : -1, t.push({
@@ -7789,11 +7187,11 @@
       yn(e, Oi, this.v);
       var n = new qr();
       Hr(n, "mediapipe.tasks.vision.gesture_recognizer.GestureRecognizerGraph"), Yr(n, "IMAGE:image_in"), Yr(n, "NORM_RECT:norm_rect"), $r(n, "HAND_GESTURES:hand_gestures"), $r(n, "LANDMARKS:hand_landmarks"), $r(n, "WORLD_LANDMARKS:world_hand_landmarks"), $r(n, "HANDEDNESS:handedness"), n.o(e), es(t, n), this.g.attachProtoVectorListener("hand_landmarks", function (t, e) {
-        for (var _iterator15 = _createForOfIteratorHelperLoose$1(t), _step15; !(_step15 = _iterator15()).done;) {
+        for (var _iterator15 = _createForOfIteratorHelperLoose$2(t), _step15; !(_step15 = _iterator15()).done;) {
           var _e28 = _step15.value;
           t = Ms(_e28);
           var _n25 = [];
-          for (var _iterator16 = _createForOfIteratorHelperLoose$1(rn(t, Fs, 1)), _step16; !(_step16 = _iterator16()).done;) {
+          for (var _iterator16 = _createForOfIteratorHelperLoose$2(rn(t, Fs, 1)), _step16; !(_step16 = _iterator16()).done;) {
             var _fn9, _fn10, _fn11;
             var _e29 = _step16.value;
             _n25.push({
@@ -7808,11 +7206,11 @@
       }), this.g.attachEmptyPacketListener("hand_landmarks", function (t) {
         _o(_this49, t);
       }), this.g.attachProtoVectorListener("world_hand_landmarks", function (t, e) {
-        for (var _iterator17 = _createForOfIteratorHelperLoose$1(t), _step17; !(_step17 = _iterator17()).done;) {
+        for (var _iterator17 = _createForOfIteratorHelperLoose$2(t), _step17; !(_step17 = _iterator17()).done;) {
           var _e30 = _step17.value;
           t = Ls(_e30);
           var _n26 = [];
-          for (var _iterator18 = _createForOfIteratorHelperLoose$1(rn(t, Ts, 1)), _step18; !(_step18 = _iterator18()).done;) {
+          for (var _iterator18 = _createForOfIteratorHelperLoose$2(rn(t, Ts, 1)), _step18; !(_step18 = _iterator18()).done;) {
             var _fn12, _fn13, _fn14;
             var _e31 = _step18.value;
             _n26.push({
@@ -7897,7 +7295,7 @@
       yn(e, Si, this.j);
       var n = new qr();
       Hr(n, "mediapipe.tasks.vision.hand_landmarker.HandLandmarkerGraph"), Yr(n, "IMAGE:image_in"), Yr(n, "NORM_RECT:norm_rect"), $r(n, "LANDMARKS:hand_landmarks"), $r(n, "WORLD_LANDMARKS:world_hand_landmarks"), $r(n, "HANDEDNESS:handedness"), n.o(e), es(t, n), this.g.attachProtoVectorListener("hand_landmarks", function (t, e) {
-        for (var _iterator19 = _createForOfIteratorHelperLoose$1(t), _step19; !(_step19 = _iterator19()).done;) {
+        for (var _iterator19 = _createForOfIteratorHelperLoose$2(t), _step19; !(_step19 = _iterator19()).done;) {
           var _e32 = _step19.value;
           t = Ms(_e32), _this51.landmarks.push(Qi(t));
         }
@@ -7905,7 +7303,7 @@
       }), this.g.attachEmptyPacketListener("hand_landmarks", function (t) {
         _o(_this51, t);
       }), this.g.attachProtoVectorListener("world_hand_landmarks", function (t, e) {
-        for (var _iterator20 = _createForOfIteratorHelperLoose$1(t), _step20; !(_step20 = _iterator20()).done;) {
+        for (var _iterator20 = _createForOfIteratorHelperLoose$2(t), _step20; !(_step20 = _iterator20()).done;) {
           var _e33 = _step20.value;
           t = Ls(_e33), _this51.worldLandmarks.push(to(t));
         }
@@ -7916,11 +7314,11 @@
         var n = _this51.handedness,
           r = n.push;
         var s = [];
-        for (var _iterator21 = _createForOfIteratorHelperLoose$1(t), _step21; !(_step21 = _iterator21()).done;) {
+        for (var _iterator21 = _createForOfIteratorHelperLoose$2(t), _step21; !(_step21 = _iterator21()).done;) {
           var _e34 = _step21.value;
           t = fs(_e34);
           var _n27 = [];
-          for (var _iterator22 = _createForOfIteratorHelperLoose$1(t.g()), _step22; !(_step22 = _iterator22()).done;) {
+          for (var _iterator22 = _createForOfIteratorHelperLoose$2(t.g()), _step22; !(_step22 = _iterator22()).done;) {
             var _fn15, _ln4, _ref11, _un6, _ref12, _un7;
             var _e35 = _step22.value;
             _n27.push({
@@ -8312,7 +7710,7 @@
         dn(a, 3, !0), gn(a, 1, e.keypoint.x), gn(a, 2, e.keypoint.y), on(i, 5, oh, a);
       } else {
         if (!e.scribble) throw Error("Must provide either a keypoint or a scribble.");
-        for (var _iterator23 = _createForOfIteratorHelperLoose$1((o = new sh(), e.scribble)), _step23; !(_step23 = _iterator23()).done;) {
+        for (var _iterator23 = _createForOfIteratorHelperLoose$2((o = new sh(), e.scribble)), _step23; !(_step23 = _iterator23()).done;) {
           a = _step23.value;
           dn(e = new nh(), 3, !0), gn(e, 1, a.x), gn(e, 2, a.y), an(o, nh, e);
         }
@@ -8413,7 +7811,7 @@
       yn(e, Vi, this.h);
       var n = new qr();
       Hr(n, "mediapipe.tasks.vision.ObjectDetectorGraph"), Yr(n, "IMAGE:input_frame_gpu"), Yr(n, "NORM_RECT:norm_rect"), $r(n, "DETECTIONS:detections"), n.o(e), es(t, n), this.g.attachProtoVectorListener("detections", function (t, e) {
-        for (var _iterator24 = _createForOfIteratorHelperLoose$1(t), _step24; !(_step24 = _iterator24()).done;) {
+        for (var _iterator24 = _createForOfIteratorHelperLoose$2(t), _step24; !(_step24 = _iterator24()).done;) {
           var _e37 = _step24.value;
           t = Es(_e37), _this61.j.detections.push(Zi(t));
         }
@@ -8513,7 +7911,7 @@
       var n = new qr();
       Hr(n, "mediapipe.tasks.vision.pose_landmarker.PoseLandmarkerGraph"), Yr(n, "IMAGE:image_in"), Yr(n, "NORM_RECT:norm_rect"), $r(n, "NORM_LANDMARKS:normalized_landmarks"), $r(n, "WORLD_LANDMARKS:world_landmarks"), n.o(e), es(t, n), wo(this, t), this.g.attachProtoVectorListener("normalized_landmarks", function (t, e) {
         _this63.landmarks = [];
-        for (var _iterator25 = _createForOfIteratorHelperLoose$1(t), _step25; !(_step25 = _iterator25()).done;) {
+        for (var _iterator25 = _createForOfIteratorHelperLoose$2(t), _step25; !(_step25 = _iterator25()).done;) {
           var _e39 = _step25.value;
           t = Ms(_e39), _this63.landmarks.push(Qi(t));
         }
@@ -8522,7 +7920,7 @@
         _this63.landmarks = [], _o(_this63, t);
       }), this.g.attachProtoVectorListener("world_landmarks", function (t, e) {
         _this63.worldLandmarks = [];
-        for (var _iterator26 = _createForOfIteratorHelperLoose$1(t), _step26; !(_step26 = _iterator26()).done;) {
+        for (var _iterator26 = _createForOfIteratorHelperLoose$2(t), _step26; !(_step26 = _iterator26()).done;) {
           var _e40 = _step26.value;
           t = Ls(_e40), _this63.worldLandmarks.push(to(t));
         }
@@ -8605,17 +8003,53 @@
     });
   }
 
-  function cropToShoulders(rawCanvas, cropCanvas, resizeCanvas, frame, face, quality, maxHeight) {
-    if (quality === void 0) {
-      quality = 0.92;
+  function getFrameDimensions(frame) {
+    var frameWidth = frame.width,
+      frameHeight = frame.height;
+    if (frame instanceof HTMLImageElement) {
+      frameWidth = frame.naturalWidth;
+      frameHeight = frame.naturalHeight;
     }
-    if (!rawCanvas || !cropCanvas || !resizeCanvas) return '';
-    var rawCtx = rawCanvas.getContext('2d');
-    var cropCtx = cropCanvas.getContext('2d');
-    var resizeCtx = resizeCanvas.getContext('2d');
-    if (!rawCtx || !cropCtx || !resizeCtx) throw new Error('could not get 2d context');
-    rawCanvas.width = frame.width;
-    rawCanvas.height = frame.height;
+    if (frame instanceof HTMLVideoElement) {
+      frameWidth = frame.videoWidth;
+      frameHeight = frame.videoHeight;
+    }
+    return [frameWidth, frameHeight];
+  }
+
+  var InvisibleCanvas = styled.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;
+    }
+    if (!rawCanvas || !cropCanvas || !resizeCanvas) return '';
+    var rawCtx = rawCanvas.getContext('2d');
+    var cropCtx = cropCanvas.getContext('2d');
+    var resizeCtx = resizeCanvas.getContext('2d');
+    if (!rawCtx || !cropCtx || !resizeCtx) throw new Error('could not get 2d context');
+    rawCanvas.width = frame.width;
+    rawCanvas.height = frame.height;
     rawCtx.putImageData(frame, 0, 0);
     if (frame.height > frame.width) {
       cropCanvas.width = frame.width;
@@ -8908,7 +8342,8 @@
       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];
@@ -8918,7 +8353,6 @@
     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);
@@ -9056,7 +8490,8 @@
   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];
@@ -9066,7 +8501,6 @@
     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);
@@ -9547,7 +8981,8 @@
       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];
@@ -9557,7 +8992,6 @@
     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);
@@ -9715,155 +9149,673 @@
         return n > 0;
       });
     });
-    var bestIdCardFront = detectedObjects.find(function (obj) {
-      return obj.label === 'Document';
-    });
-    var bestIdCardBack = detectedObjects.find(function (obj) {
-      return obj.label === 'Document back';
-    });
-    var bestPassportPage = detectedObjects.find(function (obj) {
-      return obj.label === 'Passport page';
-    });
-    var idCardFrontDetectionScore = (_e = bestIdCardFront === null || bestIdCardFront === void 0 ? void 0 : bestIdCardFront.score) !== null && _e !== void 0 ? _e : 0;
-    var idCardBackDetectionScore = (_f = bestIdCardBack === null || bestIdCardBack === void 0 ? void 0 : bestIdCardBack.score) !== null && _f !== void 0 ? _f : 0;
-    var passportDetectionScore = (_g = bestPassportPage === null || bestPassportPage === void 0 ? void 0 : bestPassportPage.score) !== null && _g !== void 0 ? _g : 0;
-    var idCardFrontDetectionThresholdMet = idCardFrontDetectionScore >= ((_h = thresholds.idCardFront) !== null && _h !== void 0 ? _h : 0);
-    var idCardBackDetectionThresholdMet = idCardBackDetectionScore >= ((_j = thresholds.idCardBack) !== null && _j !== void 0 ? _j : 0);
-    var passportDetectionThresholdMet = passportDetectionScore >= ((_k = thresholds.passport) !== null && _k !== void 0 ? _k : 0);
-    var bestDocument = passportDetectionThresholdMet ? bestPassportPage : idCardBackDetectionThresholdMet ? bestIdCardBack : bestIdCardFront;
-    var detectionThreshold = passportDetectionThresholdMet ? thresholds.passport : idCardBackDetectionThresholdMet ? thresholds.idCardBack : thresholds.idCardFront;
-    var detectionScore = (_l = bestDocument === null || bestDocument === void 0 ? void 0 : bestDocument.score) !== null && _l !== void 0 ? _l : 0;
-    var detectionThresholdMet = detectionScore >= (detectionThreshold !== null && detectionThreshold !== void 0 ? detectionThreshold : 0);
-    var detectedDocumentType = 'none';
-    if (passportDetectionThresholdMet) {
-      detectedDocumentType = 'passport';
-    } else if (idCardBackDetectionThresholdMet) {
-      detectedDocumentType = 'idCardBack';
-    } else if (detectionThresholdMet) {
-      detectedDocumentType = 'idCardFront';
-    }
-    var documentInBounds = !!bestDocument;
-    if (lastDetectionTime > 0) {
-      trackFramesNeeded(1000 / lastDetectionTime);
+    var bestIdCardFront = detectedObjects.find(function (obj) {
+      return obj.label === 'Document';
+    });
+    var bestIdCardBack = detectedObjects.find(function (obj) {
+      return obj.label === 'Document back';
+    });
+    var bestPassportPage = detectedObjects.find(function (obj) {
+      return obj.label === 'Passport page';
+    });
+    var idCardFrontDetectionScore = (_e = bestIdCardFront === null || bestIdCardFront === void 0 ? void 0 : bestIdCardFront.score) !== null && _e !== void 0 ? _e : 0;
+    var idCardBackDetectionScore = (_f = bestIdCardBack === null || bestIdCardBack === void 0 ? void 0 : bestIdCardBack.score) !== null && _f !== void 0 ? _f : 0;
+    var passportDetectionScore = (_g = bestPassportPage === null || bestPassportPage === void 0 ? void 0 : bestPassportPage.score) !== null && _g !== void 0 ? _g : 0;
+    var idCardFrontDetectionThresholdMet = idCardFrontDetectionScore >= ((_h = thresholds.idCardFront) !== null && _h !== void 0 ? _h : 0);
+    var idCardBackDetectionThresholdMet = idCardBackDetectionScore >= ((_j = thresholds.idCardBack) !== null && _j !== void 0 ? _j : 0);
+    var passportDetectionThresholdMet = passportDetectionScore >= ((_k = thresholds.passport) !== null && _k !== void 0 ? _k : 0);
+    var bestDocument = passportDetectionThresholdMet ? bestPassportPage : idCardBackDetectionThresholdMet ? bestIdCardBack : bestIdCardFront;
+    var detectionThreshold = passportDetectionThresholdMet ? thresholds.passport : idCardBackDetectionThresholdMet ? thresholds.idCardBack : thresholds.idCardFront;
+    var detectionScore = (_l = bestDocument === null || bestDocument === void 0 ? void 0 : bestDocument.score) !== null && _l !== void 0 ? _l : 0;
+    var detectionThresholdMet = detectionScore >= (detectionThreshold !== null && detectionThreshold !== void 0 ? detectionThreshold : 0);
+    var detectedDocumentType = 'none';
+    if (passportDetectionThresholdMet) {
+      detectedDocumentType = 'passport';
+    } else if (idCardBackDetectionThresholdMet) {
+      detectedDocumentType = 'idCardBack';
+    } else if (detectionThresholdMet) {
+      detectedDocumentType = 'idCardFront';
+    }
+    var documentInBounds = !!bestDocument;
+    if (lastDetectionTime > 0) {
+      trackFramesNeeded(1000 / lastDetectionTime);
+    }
+    var documentIsStable = false;
+    var documentTooClose = false;
+    if (bestDocument) {
+      var _o = [bestDocument.box.width / frameWidth, bestDocument.box.height / frameHeight],
+        docWidth = _o[0],
+        docHeight = _o[1];
+      documentTooClose = docWidth > 0.85 || docHeight > 0.85;
+      if (detectionThresholdMet && documentInBounds && !documentTooClose) {
+        var thresholdSet = (_m = thresholds.stability) !== null && _m !== void 0 ? _m : defaultDocumentDetectionThresholds.stability;
+        var threshold_1 = thresholdSet[detectedDocumentType];
+        var framesNeeded = Math.ceil(average(framesNeededSamples));
+        trackBox(bestDocument.box, framesNeeded);
+        documentIsStable = lastNBoxes.length >= framesNeeded && !lastNPairs.some(function (pair) {
+          return pair.iou < threshold_1;
+        });
+      }
+    }
+    return {
+      prediction: prediction,
+      detectedObjects: detectedObjects,
+      detectionScore: detectionScore,
+      detectionTime: time,
+      detectionThresholdMet: detectionThresholdMet,
+      detectedDocumentType: detectedDocumentType,
+      idCardFrontDetectionScore: idCardFrontDetectionScore,
+      idCardFrontDetectionThresholdMet: idCardFrontDetectionThresholdMet,
+      idCardBackDetectionScore: idCardBackDetectionScore,
+      idCardBackDetectionThresholdMet: idCardBackDetectionThresholdMet,
+      passportDetectionScore: passportDetectionScore,
+      passportDetectionThresholdMet: passportDetectionThresholdMet,
+      bestDocument: bestDocument,
+      documentInBounds: documentInBounds,
+      documentTooClose: documentTooClose,
+      documentIsStable: documentIsStable,
+      frameWidth: frameWidth,
+      frameHeight: frameHeight,
+      allZero: allZero
+    };
+  }
+  function applyNonMaxSuppression(detectedObjects, isGoodBox) {
+    var maxes = {};
+    detectedObjects.forEach(function (obj, i) {
+      if (obj) {
+        if (!maxes[obj.label]) maxes[obj.label] = [0, -1];
+        if (obj.score > maxes[obj.label][0] && (isGoodBox === null || isGoodBox === void 0 ? void 0 : isGoodBox(obj))) maxes[obj.label] = [obj.score, i];
+      }
+    });
+    return Object.keys(maxes).map(function (label) {
+      return detectedObjects[maxes[label][1]];
+    }).filter(function (obj) {
+      return !!obj;
+    });
+  }
+
+  function useFrameLoop(fn, _a) {
+    var _b = _a.throttleMs,
+      throttleMs = _b === void 0 ? 0 : _b,
+      _c = _a.autoStart,
+      autoStart = _c === void 0 ? false : _c;
+    var _d = React.useState(false),
+      running = _d[0],
+      setRunning = _d[1];
+    var startedAtRef = React.useRef(null);
+    var loopId = React.useRef(0);
+    var frameId = React.useRef(0);
+    React.useEffect(function runFrameLoop() {
+      if (!running) return;
+      var timer;
+      var currentLoopId = loopId.current;
+      function renderPrediction() {
+        return __awaiter(this, void 0, void 0, function () {
+          var start, timeRunning, took, amountToThrottle;
+          var _a, _b;
+          return __generator(this, function (_c) {
+            switch (_c.label) {
+              case 0:
+                if (currentLoopId !== loopId.current) return [2 /*return*/];
+                start = new Date().getTime();
+                timeRunning = start - ((_b = (_a = startedAtRef.current) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : 0);
+                return [4 /*yield*/, fn(frameId.current, timeRunning)];
+              case 1:
+                _c.sent();
+                took = new Date().getTime() - start;
+                amountToThrottle = Math.max((throttleMs !== null && throttleMs !== void 0 ? throttleMs : 0) - took, 0);
+                timer = setTimeout(function () {
+                  frameId.current = requestAnimationFrame(renderPrediction);
+                }, amountToThrottle);
+                return [2 /*return*/];
+            }
+          });
+        });
+      }
+      renderPrediction().then();
+      return function () {
+        loopId.current += 1;
+        frameId.current && cancelAnimationFrame(frameId.current);
+        timer && clearTimeout(timer);
+      };
+    }, [fn, running, throttleMs]);
+    var start = React.useCallback(function () {
+      startedAtRef.current = new Date();
+      setRunning(true);
+    }, []);
+    var stop = React.useCallback(function () {
+      loopId.current += 1; // force the loop to stop immediately.
+      setRunning(false);
+      startedAtRef.current = null;
+    }, []);
+    React.useEffect(function startAutomatically() {
+      if (autoStart) start();
+      return function () {
+        stop();
+      };
+    }, [autoStart, start, stop]);
+    return {
+      start: start,
+      stop: stop
+    };
+  }
+
+  var createStoreImpl = function createStoreImpl(createState) {
+    var state;
+    var listeners = /* @__PURE__ */new Set();
+    var setState = function setState(partial, replace) {
+      var nextState = typeof partial === "function" ? partial(state) : partial;
+      if (!Object.is(nextState, state)) {
+        var previousState = state;
+        state = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state, nextState);
+        listeners.forEach(function (listener) {
+          return listener(state, previousState);
+        });
+      }
+    };
+    var getState = function getState() {
+      return state;
+    };
+    var getInitialState = function getInitialState() {
+      return initialState;
+    };
+    var subscribe = function subscribe(listener) {
+      listeners.add(listener);
+      return function () {
+        return listeners["delete"](listener);
+      };
+    };
+    var api = {
+      setState: setState,
+      getState: getState,
+      getInitialState: getInitialState,
+      subscribe: subscribe
+    };
+    var initialState = state = createState(setState, getState, api);
+    return api;
+  };
+  var createStore = function createStore(createState) {
+    return createState ? createStoreImpl(createState) : createStoreImpl;
+  };
+
+  var identity = function identity(arg) {
+    return arg;
+  };
+  function useStore(api, selector) {
+    if (selector === void 0) {
+      selector = identity;
+    }
+    var slice = React.useSyncExternalStore(api.subscribe, function () {
+      return selector(api.getState());
+    }, function () {
+      return selector(api.getInitialState());
+    });
+    React.useDebugValue(slice);
+    return slice;
+  }
+
+  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 = 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();
     }
-    var documentIsStable = false;
-    var documentTooClose = false;
-    if (bestDocument) {
-      var _o = [bestDocument.box.width / frameWidth, bestDocument.box.height / frameHeight],
-        docWidth = _o[0],
-        docHeight = _o[1];
-      documentTooClose = docWidth > 0.85 || docHeight > 0.85;
-      if (detectionThresholdMet && documentInBounds && !documentTooClose) {
-        var thresholdSet = (_m = thresholds.stability) !== null && _m !== void 0 ? _m : defaultDocumentDetectionThresholds.stability;
-        var threshold_1 = thresholdSet[detectedDocumentType];
-        var framesNeeded = Math.ceil(average(framesNeededSamples));
-        trackBox(bestDocument.box, framesNeeded);
-        documentIsStable = lastNBoxes.length >= framesNeeded && !lastNPairs.some(function (pair) {
-          return pair.iou < threshold_1;
-        });
-      }
+    if (config.requireMicrophoneAccess) {
+      store.getState().requestMicrophoneAccess();
     }
-    return {
-      prediction: prediction,
-      detectedObjects: detectedObjects,
-      detectionScore: detectionScore,
-      detectionTime: time,
-      detectionThresholdMet: detectionThresholdMet,
-      detectedDocumentType: detectedDocumentType,
-      idCardFrontDetectionScore: idCardFrontDetectionScore,
-      idCardFrontDetectionThresholdMet: idCardFrontDetectionThresholdMet,
-      idCardBackDetectionScore: idCardBackDetectionScore,
-      idCardBackDetectionThresholdMet: idCardBackDetectionThresholdMet,
-      passportDetectionScore: passportDetectionScore,
-      passportDetectionThresholdMet: passportDetectionThresholdMet,
-      bestDocument: bestDocument,
-      documentInBounds: documentInBounds,
-      documentTooClose: documentTooClose,
-      documentIsStable: documentIsStable,
-      frameWidth: frameWidth,
-      frameHeight: frameHeight,
-      allZero: allZero
-    };
-  }
-  function applyNonMaxSuppression(detectedObjects, isGoodBox) {
-    var maxes = {};
-    detectedObjects.forEach(function (obj, i) {
-      if (obj) {
-        if (!maxes[obj.label]) maxes[obj.label] = [0, -1];
-        if (obj.score > maxes[obj.label][0] && (isGoodBox === null || isGoodBox === void 0 ? void 0 : isGoodBox(obj))) maxes[obj.label] = [obj.score, i];
+    return _assign(_assign({}, store), {
+      destroy: function destroy() {
+        store.getState().releaseCameraAccess();
+        store.getState().releaseMicrophoneAccess();
       }
     });
-    return Object.keys(maxes).map(function (label) {
-      return detectedObjects[maxes[label][1]];
-    }).filter(function (obj) {
-      return !!obj;
-    });
-  }
-
-  function useFrameLoop(fn, _a) {
-    var _b = _a.throttleMs,
-      throttleMs = _b === void 0 ? 0 : _b,
-      _c = _a.autoStart,
-      autoStart = _c === void 0 ? false : _c;
-    var _d = React.useState(false),
-      running = _d[0],
-      setRunning = _d[1];
-    var startedAtRef = React.useRef(null);
-    var loopId = React.useRef(0);
-    var frameId = React.useRef(0);
-    React.useEffect(function runFrameLoop() {
-      if (!running) return;
-      var timer;
-      var currentLoopId = loopId.current;
-      function renderPrediction() {
-        return __awaiter(this, void 0, void 0, function () {
-          var start, timeRunning, took, amountToThrottle;
-          var _a, _b;
-          return __generator(this, function (_c) {
-            switch (_c.label) {
-              case 0:
-                if (currentLoopId !== loopId.current) return [2 /*return*/];
-                start = new Date().getTime();
-                timeRunning = start - ((_b = (_a = startedAtRef.current) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : 0);
-                return [4 /*yield*/, fn(frameId.current, timeRunning)];
-              case 1:
-                _c.sent();
-                took = new Date().getTime() - start;
-                amountToThrottle = Math.max((throttleMs !== null && throttleMs !== void 0 ? throttleMs : 0) - took, 0);
-                timer = setTimeout(function () {
-                  frameId.current = requestAnimationFrame(renderPrediction);
-                }, amountToThrottle);
-                return [2 /*return*/];
-            }
-          });
+  };
+  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();
       }
-      renderPrediction().then();
+    }, [preferFrontFacingCamera, preferIphoneContinuityCamera]);
+    React.useEffect(function () {
       return function () {
-        loopId.current += 1;
-        frameId.current && cancelAnimationFrame(frameId.current);
-        timer && clearTimeout(timer);
+        var _a;
+        return (_a = store.current) === null || _a === void 0 ? void 0 : _a.destroy();
       };
-    }, [fn, running, throttleMs]);
-    var start = React.useCallback(function () {
-      startedAtRef.current = new Date();
-      setRunning(true);
-    }, []);
-    var stop = React.useCallback(function () {
-      loopId.current += 1; // force the loop to stop immediately.
-      setRunning(false);
-      startedAtRef.current = null;
     }, []);
-    React.useEffect(function startAutomatically() {
-      if (autoStart) start();
-      return function () {
-        stop();
-      };
-    }, [autoStart, start, stop]);
-    return {
-      start: start,
-      stop: stop
-    };
+    return /*#__PURE__*/React.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 useStore(store, selector);
   }
 
   var DocumentDetectionModelContext = /*#__PURE__*/React.createContext({
@@ -9911,7 +9863,7 @@
       _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;
@@ -9934,7 +9886,8 @@
         modelPath: documentDetectionModelPath,
         modelLoadTimeoutMs: documentDetectionModelLoadTimeoutMs,
         scoreThreshold: documentDetectionModelScoreThreshold,
-        onModelError: onDocumentDetectionModelError
+        onModelError: onDocumentDetectionModelError,
+        videoRef: videoRef
       }),
       ready = _o.ready,
       modelDownloadProgress = _o.modelDownloadProgress,
@@ -10051,10 +10004,12 @@
     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,
@@ -10809,12 +10764,12 @@
     if (!portalLocation) return element;
     return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
   }
-  var DebugStatsPaneDiv = styled.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.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.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.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.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.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) {
@@ -10824,7 +10779,7 @@
     var $flipX = _a.$flipX;
     return $flipX ? 'transform: scaleX(-1);' : '';
   });
-  var FaceDetectionKeypointMarker = styled.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.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) {
@@ -11015,7 +10970,7 @@
       }
     });
   }
-  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 = {};
 
@@ -11494,9 +11449,9 @@
     return e;
   }
 
-  function _createForOfIteratorHelperLoose(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (t) return (t = t.call(r)).next.bind(t); if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) { t && (r = t); var o = 0; return function () { return o >= r.length ? { done: !0 } : { done: !1, value: r[o++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-  function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-  function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+  function _createForOfIteratorHelperLoose$1(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (t) return (t = t.call(r)).next.bind(t); if (Array.isArray(r) || (t = _unsupportedIterableToArray$1(r)) || e) { t && (r = t); var o = 0; return function () { return o >= r.length ? { done: !0 } : { done: !1, value: r[o++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+  function _unsupportedIterableToArray$1(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$1(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$1(r, a) : void 0; } }
+  function _arrayLikeToArray$1(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
   var consoleLogger = {
     type: 'logger',
     log: function log(args) {
@@ -12343,7 +12298,7 @@
       }
       if (!useOptionsReplaceForData) {
         data = _extends({}, data);
-        for (var _iterator = _createForOfIteratorHelperLoose(optionsKeys), _step; !(_step = _iterator()).done;) {
+        for (var _iterator = _createForOfIteratorHelperLoose$1(optionsKeys), _step; !(_step = _iterator()).done;) {
           var key = _step.value;
           delete data[key];
         }
@@ -13982,7 +13937,7 @@
     }, [fallbacks, i18n.language, t, verbiage]);
   }
 
-  var GuidanceMessageContainerDiv = styled.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.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) {
@@ -13995,14 +13950,14 @@
     if (!portalLocation) return element;
     return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
   };
-  var GuidanceMessage = styled.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.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,
@@ -14017,7 +13972,7 @@
       buttonText: 'OK'
     });
     if (!state.allowOverrideWrongDocumentTypeGuidance) return null;
-    return /*#__PURE__*/React.createElement(Container$1, {
+    return /*#__PURE__*/React.createElement(Container$2, {
       className: classNames.container
     }, /*#__PURE__*/React.createElement(InnerContainer, {
       className: classNames.inner
@@ -14035,45 +13990,47 @@
       }
     }, verbiage.buttonText))));
   }
-  var Container$1 = styled.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.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.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.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.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(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.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.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.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(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(),
-      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(),
+      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,
@@ -14185,17 +14142,16 @@
       classNames: classNames.overrideWrongDocumentTypeGuidanceDialog,
       verbiage: rawVerbiage.overrideWrongDocumentTypeGuidanceDialog
     }))), debugMode && ( /*#__PURE__*/React.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.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.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React.createElement(React.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React.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.createElement("br", null), modelsReady ? ( /*#__PURE__*/React.createElement(React.Fragment, null, state.detectionThresholdMet ? '✅' : '❌', " Detected Document Type: ", state.detectedDocumentType, /*#__PURE__*/React.createElement("br", null), state.idCardFrontDetectionThresholdMet ? '✅' : '❌', " ID Card Front Score: ", state.idCardFrontDetectionScore.toFixed(3), /*#__PURE__*/React.createElement("br", null), state.idCardBackDetectionThresholdMet ? '✅' : '❌', " ID Card Back Score: ", state.idCardBackDetectionScore.toFixed(3), /*#__PURE__*/React.createElement("br", null), state.passportDetectionThresholdMet ? '✅' : '❌', " Passport Score: ", state.passportDetectionScore.toFixed(3), /*#__PURE__*/React.createElement("br", null), state.focusThresholdMet ? '✅' : '❌', " Focus Score:", ' ', state.focusScore.toFixed(3), /*#__PURE__*/React.createElement("br", null), state.documentInBounds ? '✅' : '❌', " Document In Bounds", /*#__PURE__*/React.createElement("br", null), state.documentIsStable ? '✅' : '❌', " Document Is Stable", /*#__PURE__*/React.createElement("br", null), state.goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', state.goodFramesCount, "/", state.goodFramesThreshold)) : ( /*#__PURE__*/React.createElement(React.Fragment, null, "\u274C Models not ready")))));
+    }))), debugMode && ( /*#__PURE__*/React.createElement(DebugStatsPane, null, camera ? ( /*#__PURE__*/React.createElement(React.Fragment, null, "\u2705 Camera: ", camera.label, " (", camera.width, "x", camera.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React.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.createElement("br", null), modelsReady ? ( /*#__PURE__*/React.createElement(React.Fragment, null, state.detectionThresholdMet ? '✅' : '❌', " Detected Document Type: ", state.detectedDocumentType, /*#__PURE__*/React.createElement("br", null), state.idCardFrontDetectionThresholdMet ? '✅' : '❌', " ID Card Front Score: ", state.idCardFrontDetectionScore.toFixed(3), /*#__PURE__*/React.createElement("br", null), state.idCardBackDetectionThresholdMet ? '✅' : '❌', " ID Card Back Score: ", state.idCardBackDetectionScore.toFixed(3), /*#__PURE__*/React.createElement("br", null), state.passportDetectionThresholdMet ? '✅' : '❌', " Passport Score: ", state.passportDetectionScore.toFixed(3), /*#__PURE__*/React.createElement("br", null), state.focusThresholdMet ? '✅' : '❌', " Focus Score:", ' ', state.focusScore.toFixed(3), /*#__PURE__*/React.createElement("br", null), state.documentInBounds ? '✅' : '❌', " Document In Bounds", /*#__PURE__*/React.createElement("br", null), state.documentIsStable ? '✅' : '❌', " Document Is Stable", /*#__PURE__*/React.createElement("br", null), state.goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', state.goodFramesCount, "/", state.goodFramesThreshold)) : ( /*#__PURE__*/React.createElement(React.Fragment, null, "\u274C Models not ready")))));
   };
   var timeSince = function timeSince(t) {
     if (!t) return 0;
@@ -14212,7 +14168,9 @@
       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',
@@ -14241,13 +14199,13 @@
       finished: true
     }, verbiage.retryBtnText)));
   };
-  var StyledOverlayInner$3 = styled(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(OverlayImageContainer)(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  flex-grow: 0;\n"], ["\n  flex-grow: 0;\n"])));
-  var Description$4 = styled.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(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(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(OverlayImageContainer)(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n  flex-grow: 0;\n"], ["\n  flex-grow: 0;\n"])));
+  var Description$4 = styled.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(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.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.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;
@@ -14291,10 +14249,10 @@
       y2: "19.75"
     }))));
   };
-  var templateObject_1$z;
+  var templateObject_1$B;
 
-  var ButtonsRow = styled.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.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;
@@ -14323,25 +14281,15 @@
     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.createElement("div", {
-      style: {
-        display: 'flex',
-        width: '100%',
-        height: '100%'
-      }
-    }, /*#__PURE__*/React.createElement("svg", {
+    return /*#__PURE__*/React.createElement(LoadingGraphicWrapper, null, /*#__PURE__*/React.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.createElement("g", {
       filter: frame === 1 ? 'url(#filter0_f_91_884)' : undefined
     }, /*#__PURE__*/React.createElement("path", {
@@ -14569,12 +14517,9 @@
       viewBox: "0 0 428 747",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/React.createElement("g", {
+    }, /*#__PURE__*/React.createElement(LoadingGraphicCardGroup, {
       id: "card",
-      style: {
-        transform: "translate(".concat(frame < 1 ? '-500px' : '0', ", 0)"),
-        transition: 'transform 0.3s linear'
-      }
+      "$offScreen": frame < 1
     }, /*#__PURE__*/React.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",
@@ -14757,13 +14702,10 @@
       strokeWidth: "5",
       strokeLinecap: "round",
       strokeLinejoin: "round"
-    }))), /*#__PURE__*/React.createElement("g", {
+    }))), /*#__PURE__*/React.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.createElement("rect", {
       x: "154",
       y: "693",
@@ -14791,6 +14733,21 @@
       fill: "white"
     }))));
   }
+  var LoadingGraphicWrapper = styled.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.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.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.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,
@@ -14861,7 +14818,7 @@
     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,
@@ -14985,24 +14942,24 @@
       }
     }, verbiage.continueText))))));
   };
-  var OverlayInner$1 = styled.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.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.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.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(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(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.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(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.input(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n  margin-right: 8px;\n"], ["\n  margin-right: 8px;\n"])));
+  var StyledGuidanceMessage$2 = styled(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(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.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(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.input(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n  margin-right: 8px;\n"], ["\n  margin-right: 8px;\n"])));
   var StyledButtonsRow$a = styled(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';
@@ -15028,7 +14985,7 @@
     var _a, _b, _c, _d;
     return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarIndicatorColor) !== null && _d !== void 0 ? _d : 'var(--idm-color-positive-600)';
   }, progressBarAnimation);
-  var CustomLoadingGraphic$1 = styled.img(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""])));
+  var CustomLoadingGraphic$1 = styled.img(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  transform-style: preserve-3d;\n"], ["\n  transform-style: preserve-3d;\n"])));
   var ContinueButtonContainer$1 = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
   var ContinueButton$1 = styled(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;
@@ -15037,10 +14994,75 @@
     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;
+
+  function _createForOfIteratorHelperLoose(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (t) return (t = t.call(r)).next.bind(t); if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) { t && (r = t); var o = 0; return function () { return o >= r.length ? { done: !0 } : { done: !1, value: r[o++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+  function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+  function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+  var isIterable = function isIterable(obj) {
+    return Symbol.iterator in obj;
+  };
+  var compareMapLike = function compareMapLike(iterableA, iterableB) {
+    var mapA = iterableA instanceof Map ? iterableA : new Map(iterableA);
+    var mapB = iterableB instanceof Map ? iterableB : new Map(iterableB);
+    if (mapA.size !== mapB.size) return false;
+    for (var _iterator = _createForOfIteratorHelperLoose(mapA), _step; !(_step = _iterator()).done;) {
+      var _step$value = _step.value,
+        key = _step$value[0],
+        value = _step$value[1];
+      if (!Object.is(value, mapB.get(key))) {
+        return false;
+      }
+    }
+    return true;
+  };
+  function shallow(objA, objB) {
+    if (Object.is(objA, objB)) {
+      return true;
+    }
+    if (typeof objA !== "object" || objA === null || typeof objB !== "object" || objB === null) {
+      return false;
+    }
+    if (isIterable(objA) && isIterable(objB)) {
+      var iteratorA = objA[Symbol.iterator]();
+      var iteratorB = objB[Symbol.iterator]();
+      var nextA = iteratorA.next();
+      var nextB = iteratorB.next();
+      if (Array.isArray(nextA.value) && Array.isArray(nextB.value) && nextA.value.length === 2 && nextB.value.length === 2) {
+        return compareMapLike(objA, objB);
+      }
+      while (!nextA.done && !nextB.done) {
+        if (!Object.is(nextA.value, nextB.value)) {
+          return false;
+        }
+        nextA = iteratorA.next();
+        nextB = iteratorB.next();
+      }
+      return !!nextA.done && !!nextB.done;
+    }
+    var keysA = Object.keys(objA);
+    if (keysA.length !== Object.keys(objB).length) {
+      return false;
+    }
+    for (var _i = 0, _keysA = keysA; _i < _keysA.length; _i++) {
+      var keyA = _keysA[_i];
+      if (!Object.hasOwn(objB, keyA) || !Object.is(objA[keyA], objB[keyA])) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  function useShallow(selector) {
+    var prev = React.useRef();
+    return function (state) {
+      var next = selector(state);
+      return shallow(prev.current, next) ? prev.current : prev.current = next;
+    };
+  }
 
-  var ContinuityCameraCheckboxContainer = styled.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.input(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  margin-right: 8px;\n"], ["\n  margin-right: 8px;\n"])));
+  var ContinuityCameraCheckboxContainer = styled.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.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,
@@ -15059,7 +15081,14 @@
     var _l = React.useContext(IdCaptureModelsContext),
       modelsReady = _l.ready,
       modelDownloadProgress = _l.modelDownloadProgress;
-    var _m = React.useContext(CameraStateContext),
+    var _m = useCameraStore(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,
@@ -15151,7 +15180,7 @@
       }
     }, 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,
@@ -15209,9 +15238,9 @@
     });
   };
 
-  var Card = styled.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(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.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(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,
@@ -15286,13 +15315,13 @@
       finished: true
     }, verbiage.retryText)))));
   };
-  var Heading$a = styled.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(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(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.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(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.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.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(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(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.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(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.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;
@@ -15344,10 +15373,10 @@
     canvas.style.height = '0';
   }
 
-  var IdCardGuideImageContainer = styled(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(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.img(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (props) {
+  var IdCardGuideImage = styled.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;' : '';
@@ -15489,16 +15518,16 @@
       className: isProgressBar ? "idmSdkProgressBorder ".concat(progressPaused ? 'idmSdkProgressPaused' : '') : ''
     }));
   }
-  var IdCardBorderContainer = styled.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.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.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.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.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.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: {
@@ -15604,12 +15633,82 @@
     return allowPortraitOnMobile && window.innerWidth < window.innerHeight ? 'portrait' : 'landscape';
   }
 
-  var FlipImageContainer = styled(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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FlipImageContainer, {
+      className: classNames.frontImageContainer,
+      status: "disabled",
+      borderWidth: borderWidth,
+      borderColor: borderColor,
+      borderRadius: borderRadius,
+      "$transforms": frontTransforms.join(' '),
+      "$transitionTime": transitionTime,
+      "$isVisible": true
+    }, /*#__PURE__*/React.createElement(IdCardGuideImage, {
+      src: idCaptureGuideImages.landscape.SHOW_ID_FRONT.url,
+      className: classNames.frontImage,
+      alt: "",
+      style: imageStyle
+    })), /*#__PURE__*/React.createElement(FlipImageContainer, {
+      className: classNames.backImageContainer,
+      status: "disabled",
+      borderWidth: borderWidth,
+      borderColor: borderColor,
+      borderRadius: borderRadius,
+      "$transforms": backTransforms.join(' '),
+      "$transitionTime": transitionTime,
+      "$isVisible": true
+    }, /*#__PURE__*/React.createElement(IdCardGuideImage, {
+      src: idCaptureGuideImages.landscape.SHOW_ID_BACK.url,
+      className: classNames.backImage,
+      alt: "",
+      style: imageStyle
+    })));
+  };
+  var FlipImageContainer = styled(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',
@@ -15898,10 +15997,10 @@
       return v;
     }).join(' ');
   };
-  var StyledPageContainer = styled(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.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.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.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(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.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.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.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) {
@@ -15912,13 +16011,13 @@
   }, function (props) {
     return props.$minHeight ? "min-height: ".concat(props.$minHeight, "px;") : "";
   });
-  var Spacer = styled(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.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(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.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.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.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) {
@@ -15926,7 +16025,7 @@
   });
   var GuideText = styled.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.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;
@@ -16069,36 +16168,37 @@
       progress: progress
     }));
   };
-  var CanvasWrapper$1 = styled.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.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.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.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...',
@@ -16110,7 +16210,7 @@
       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.createElement(IdCaptureFitGuide, {
@@ -16120,7 +16220,7 @@
       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,
@@ -16213,53 +16313,11 @@
       onError: onError
     })));
   };
-  var StyledSpinner = styled(Spinner$1)(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.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.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.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.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.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(Spinner$1)(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.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.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.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: [],
@@ -16379,8 +16437,8 @@
     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) {
@@ -16471,8 +16529,7 @@
     }, [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);
@@ -16485,7 +16542,7 @@
         });
       }
       if (typeof ImageCapture !== 'undefined') {
-        var tracks = cameraRef.current.stream.getTracks();
+        var tracks = videoStream.getTracks();
         var videoCameraTrack = tracks.find(function (track) {
           return track.kind === 'video';
         });
@@ -16500,7 +16557,7 @@
         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
@@ -16615,52 +16672,85 @@
       ref: canvasRef
     }));
   };
-  var CanvasWrapper = styled.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.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.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.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.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+  var CameraFeedWrapper = styled.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(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.createElement(FullscreenVideoTag, _assign({
+      autoPlay: true,
+      playsInline: true,
+      muted: true,
+      ref: videoRef,
+      onLoadedData: onVideoMounted,
+      "$isRearFacing": isRearFacing
+    }, props));
+  };
+  var FullscreenVideoTag = styled.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' &&
@@ -16669,14 +16759,14 @@
     // 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...',
@@ -16709,7 +16799,7 @@
       });
     }
     return /*#__PURE__*/React.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.createElement(CameraFeedWrapper, {
       className: classNames.cameraFeedWrapper,
       "$mode": cameraFeedMode !== null && cameraFeedMode !== void 0 ? cameraFeedMode : 'snapToGuides',
@@ -16774,21 +16864,21 @@
       disabled: !cameraReady || capturing
     }, !cameraReady ? verbiage.loadingBtnText : capturing ? verbiage.capturingBtnText : verbiage.captureBtnText))))));
   };
-  var CaptureContainer = styled.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.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.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.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.h1(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  font-size: 22px;\n"], ["\n  font-size: 22px;\n"])));
-  var FooterRow = styled.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.h1(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  font-size: 22px;\n"], ["\n  font-size: 22px;\n"])));
+  var FooterRow = styled.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.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.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(ButtonsRow)(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n  padding-top: 20px;\n"], ["\n  padding-top: 20px;\n"])));
-  var PreviewImage = styled.img(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n"])));
-  var templateObject_1$l, templateObject_2$j, templateObject_3$f, templateObject_4$9, templateObject_5$5, templateObject_6$4, templateObject_7$2;
+  var StyledButtonsRow$9 = styled(ButtonsRow)(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n  padding-top: 20px;\n"], ["\n  padding-top: 20px;\n"])));
+  var PreviewImage = styled.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,
@@ -17057,13 +17147,13 @@
       }
     }, verbiage.doneBtnText))))));
   };
-  var StyledOverlayInner$2 = styled(OverlayInner$2)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
-  var Heading$8 = styled.h3(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
-  var Description$3 = styled.p(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
-  var Instruction = styled.p(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  font-weight: bold;\n"], ["\n  font-weight: bold;\n"])));
-  var ImageCol = styled.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(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(OverlayInner$2)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
+  var Heading$8 = styled.h3(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
+  var Description$3 = styled.p(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
+  var Instruction = styled.p(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  font-weight: bold;\n"], ["\n  font-weight: bold;\n"])));
+  var ImageCol = styled.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(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),
@@ -17134,7 +17224,7 @@
     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;
@@ -17749,7 +17839,7 @@
     }))));
   });
   HeadGuideSvg.displayName = 'HeadGuideSvg';
-  var PulsingHeadGuideContainer = styled.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.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,
@@ -17799,8 +17889,8 @@
       height: parentHeight
     })));
   }
-  var AbsoluteSvg = styled.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.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.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.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) {
@@ -18027,10 +18117,10 @@
       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.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.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.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.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,
@@ -18052,7 +18142,7 @@
       verticalAlign: "center"
     })));
   };
-  var templateObject_1$i, templateObject_2$g;
+  var templateObject_1$j, templateObject_2$h;
 
   var SelfieGuidanceModelsContext = /*#__PURE__*/React.createContext({
     start: function start() {
@@ -18082,7 +18172,13 @@
       modelLoadTimeoutMs = _c === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _c,
       _d = _a.requireVerticalFaceCentering,
       requireVerticalFaceCentering = _d === void 0 ? true : _d;
-    var _e = React.useContext(CameraStateContext),
+    var _e = useCameraStore(useShallow(function (state) {
+        return {
+          videoRef: state.videoRef,
+          videoLoaded: state.videoLoaded,
+          cameraReady: state.cameraReady
+        };
+      })),
       videoRef = _e.videoRef,
       videoLoaded = _e.videoLoaded,
       cameraReady = _e.cameraReady;
@@ -18090,7 +18186,8 @@
     var onPredictionHandler = React.useRef();
     var _f = useLoadFaceDetector({
         onModelError: onModelError,
-        modelLoadTimeoutMs: modelLoadTimeoutMs
+        modelLoadTimeoutMs: modelLoadTimeoutMs,
+        videoRef: videoRef
       }),
       ready = _f.ready,
       modelDownloadProgress = _f.modelDownloadProgress,
@@ -18356,12 +18453,12 @@
       }
     }, !image ? invalidSelfie ? verbiage.retryButtonText : verbiage.captureBtnText : loading ? verbiage.doneBtnLoadingText : verbiage.doneBtnText)))));
   };
-  var StyledOverlayInner$1 = styled(OverlayInner$2)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
-  var Heading$7 = styled.h3(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
-  var Description$2 = styled.p(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
-  var ImageContainer$6 = styled(OverlayImageContainer)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
-  var StyledButtonsRow$7 = styled(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(OverlayInner$2)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
+  var Heading$7 = styled.h3(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
+  var Description$2 = styled.p(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
+  var ImageContainer$6 = styled(OverlayImageContainer)(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
+  var StyledButtonsRow$7 = styled(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,
@@ -18423,8 +18520,14 @@
       prediction = _t.prediction,
       dispatch = _s[1];
     var lastPredictionCanvas = React.useRef(null);
-    var _u = React.useContext(CameraStateContext),
-      cameraRef = _u.cameraRef,
+    var _u = useCameraStore(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,
@@ -18514,7 +18617,7 @@
       face: prediction.face,
       scaling: debugScalingDetails,
       color: satisfied ? 'green' : 'red'
-    }))), debugMode && ( /*#__PURE__*/React.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React.createElement(React.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceNotCentered) ? '✅' : '❌', " Face Centered", /*#__PURE__*/React.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.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceLookingAway) ? '✅' : '❌', " Face Looking Forward", /*#__PURE__*/React.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceIsStable) ? '✅' : '❌', " Face Is Stable", /*#__PURE__*/React.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.createElement(ExitCaptureButton, {
+    }))), debugMode && ( /*#__PURE__*/React.createElement(DebugStatsPane, null, camera ? ( /*#__PURE__*/React.createElement(React.Fragment, null, "\u2705 Camera: ", camera.label, " (", camera.width, "x", camera.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceNotCentered) ? '✅' : '❌', " Face Centered", /*#__PURE__*/React.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.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceLookingAway) ? '✅' : '❌', " Face Looking Forward", /*#__PURE__*/React.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceIsStable) ? '✅' : '❌', " Face Is Stable", /*#__PURE__*/React.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.createElement(ExitCaptureButton, {
       onClick: onExit,
       className: classNames.exitCaptureBtn
     }));
@@ -18905,9 +19008,9 @@
       finished: true
     }, verbiage.retryBtnText)))));
   };
-  var ImageContainer$5 = styled.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.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.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.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,
@@ -18956,9 +19059,9 @@
       finished: true
     }, verbiage.exitBtnText)))));
   };
-  var ImageContainer$4 = styled(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.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(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.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;
@@ -18970,7 +19073,9 @@
       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',
@@ -18999,11 +19104,11 @@
       finished: true
     }, verbiage.retryBtnText)));
   };
-  var StyledOverlayInner = styled(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(OverlayImageContainer)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  flex-grow: 0;\n"], ["\n  flex-grow: 0;\n"])));
-  var Description$1 = styled.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(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(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(OverlayImageContainer)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  flex-grow: 0;\n"], ["\n  flex-grow: 0;\n"])));
+  var Description$1 = styled.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(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,
@@ -19018,7 +19123,13 @@
       colors = _e === void 0 ? {} : _e,
       _f = _a.verbiage,
       rawVerbiage = _f === void 0 ? {} : _f;
-    var _g = React.useContext(CameraStateContext),
+    var _g = useCameraStore(useShallow(function (state) {
+        return {
+          cameraReady: state.cameraReady,
+          cameraAccessDenied: state.cameraAccessDenied,
+          microphoneAccessDenied: state.microphoneAccessDenied
+        };
+      })),
       cameraReady = _g.cameraReady,
       cameraAccessDenied = _g.cameraAccessDenied,
       microphoneAccessDenied = _g.microphoneAccessDenied;
@@ -19086,9 +19197,9 @@
       }
     }, cameraReady && allModelsReady ? verbiage.continueText : allModelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? "".concat(verbiage.modelsWarmingUpText) : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)")))));
   };
-  var StyledGuidanceMessage$1 = styled(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(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(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(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) {
@@ -19105,7 +19216,13 @@
       colors = _e === void 0 ? {} : _e,
       _f = _a.verbiage,
       rawVerbiage = _f === void 0 ? {} : _f;
-    var _g = React.useContext(CameraStateContext),
+    var _g = useCameraStore(useShallow(function (state) {
+        return {
+          cameraReady: state.cameraReady,
+          cameraAccessDenied: state.cameraAccessDenied,
+          microphoneAccessDenied: state.microphoneAccessDenied
+        };
+      })),
       cameraReady = _g.cameraReady,
       cameraAccessDenied = _g.cameraAccessDenied,
       microphoneAccessDenied = _g.microphoneAccessDenied;
@@ -19213,30 +19330,30 @@
       }
     }, verbiage.continueText))))));
   };
-  var OverlayInner = styled.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.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.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.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(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(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(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(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(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.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.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(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.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.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.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.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.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) {
@@ -19262,7 +19379,7 @@
     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,
@@ -19322,7 +19439,13 @@
       livenessCheckRequest = _t.livenessCheckRequest,
       setSelfieImage = _t.setSelfieImage,
       logSelfieCaptureAttempt = _t.logSelfieCaptureAttempt;
-    var _u = React.useContext(CameraStateContext),
+    var _u = useCameraStore(useShallow(function (state) {
+        return {
+          cameraAccessDenied: state.cameraAccessDenied,
+          requestCameraAccess: state.requestCameraAccess,
+          releaseCameraAccess: state.releaseCameraAccess
+        };
+      })),
       cameraAccessDenied = _u.cameraAccessDenied,
       requestCameraAccess = _u.requestCameraAccess,
       releaseCameraAccess = _u.releaseCameraAccess;
@@ -19591,7 +19714,7 @@
     }
     return /*#__PURE__*/React.createElement(OverlayContainer, {
       className: classNames.container
-    }, /*#__PURE__*/React.createElement(Inner$1, {
+    }, /*#__PURE__*/React.createElement(Inner$2, {
       className: classNames.inner
     }, /*#__PURE__*/React.createElement(Heading$4, {
       className: classNames.heading
@@ -19621,11 +19744,11 @@
       }
     }, verbiage.captureBtnText)))));
   };
-  var Inner$1 = styled(OverlayInner$2)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
-  var Heading$4 = styled.h3(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
-  var Description = styled.p(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
-  var StyledButtonsRow$4 = styled(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(OverlayInner$2)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
+  var Heading$4 = styled.h3(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
+  var Description = styled.p(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
+  var StyledButtonsRow$4 = styled(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,
@@ -20537,7 +20660,7 @@
     });
   }
 
-  var SignaturePaperBacking = styled.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.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) {
@@ -20547,8 +20670,8 @@
     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.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.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.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.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) {
@@ -20558,8 +20681,8 @@
     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(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(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;
@@ -20630,8 +20753,8 @@
       finished: true
     }, verbiage.acceptBtnText)))));
   };
-  var AcceptBtn$1 = styled(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(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) {
@@ -20811,10 +20934,10 @@
       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,
@@ -20882,8 +21005,8 @@
     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;
@@ -20916,7 +21039,7 @@
       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;
@@ -20991,11 +21114,11 @@
         className: classNames.signatureCanvas
       };
     }, [classNames.signatureCanvas, height, width]);
-    return /*#__PURE__*/React.createElement(Container, {
+    return /*#__PURE__*/React.createElement(Container$1, {
       className: classNames.container
-    }, /*#__PURE__*/React.createElement(Inner, {
+    }, /*#__PURE__*/React.createElement(Inner$1, {
       className: classNames.inner
-    }, /*#__PURE__*/React.createElement(FaceGuideContainer, {
+    }, /*#__PURE__*/React.createElement(FaceGuideContainer$1, {
       className: classNames.faceGuideContainer
     }, /*#__PURE__*/React.createElement(StyledSelfieCaptureAnimatedMask, {
       className: classNames.faceGuide,
@@ -21030,42 +21153,44 @@
       finished: true
     }, verbiage.acceptSignatureBtnText))))));
   }
-  var Container = styled.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.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.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.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(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.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.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.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.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  position: relative;\n  height: 50%;\n"], ["\n  position: relative;\n  height: 50%;\n"])));
+  var StyledSelfieCaptureAnimatedMask = styled(SelfieCaptureAnimatedMaskWithStatus)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  max-width: 100%;\n  height: 100%;\n"], ["\n  max-width: 100%;\n  height: 100%;\n"])));
+  var SignaturePadContainer = styled.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.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(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(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 () {
@@ -21082,9 +21207,9 @@
         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;
@@ -21111,7 +21236,7 @@
     }, verbiage.guidanceMessageText))), /*#__PURE__*/React.createElement(GuidesComponent, {
       classNames: classNames.videoSignatureGuidesClassNames,
       status: "success"
-    }), debugMode && ( /*#__PURE__*/React.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.createElement(ExitCaptureButton, {
+    }), debugMode && ( /*#__PURE__*/React.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.createElement(ExitCaptureButton, {
       onClick: onExit,
       className: classNames.exitCaptureBtn
     }));
@@ -21170,8 +21295,8 @@
       finished: true
     }, verbiage.doneBtnText))));
   };
-  var StyledVideo$1 = styled.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.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;
@@ -21205,7 +21330,13 @@
       setSignatureData = _l.setSignatureData,
       setSignatureVideoUrl = _l.setSignatureVideoUrl,
       logSelfieCaptureAttempt = _l.logSelfieCaptureAttempt;
-    var _m = React.useContext(CameraStateContext),
+    var _m = useCameraStore(useShallow(function (state) {
+        return {
+          cameraAccessDenied: state.cameraAccessDenied,
+          requestCameraAccess: state.requestCameraAccess,
+          releaseCameraAccess: state.releaseCameraAccess
+        };
+      })),
       cameraAccessDenied = _m.cameraAccessDenied,
       requestCameraAccess = _m.requestCameraAccess,
       releaseCameraAccess = _m.releaseCameraAccess;
@@ -21364,6 +21495,129 @@
     }()));
   };
 
+  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(),
+      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.createElement(Container, {
+      className: classNames.container
+    }, /*#__PURE__*/React.createElement(Inner, null, /*#__PURE__*/React.createElement(FaceGuideContainer, {
+      className: classNames.faceGuideContainer
+    }, /*#__PURE__*/React.createElement(SelfieCaptureAnimatedMaskWithStatus, {
+      className: classNames.faceGuide,
+      status: requestedAction === 'VERIFY_LIVENESS' ? faceGuideStatus : 'success',
+      borderWidth: faceGuideBorderWidth,
+      borderColor: faceGuideBorderColor,
+      verticalAlign: "bottom"
+    })), !disableIdGuides && ( /*#__PURE__*/React.createElement(IdCardGuideContainer, {
+      className: classNames.idCardGuideContainer,
+      ref: idCardGuideRef
+    }, /*#__PURE__*/React.createElement(IdCardGuideInner, {
+      className: classNames.idCardGuideInner,
+      style: {
+        aspectRatio: aspectRatio
+      }
+    }, /*#__PURE__*/React.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.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.createElement(IdVideoCaptureFlipIdPrompt, {
+      idCaptureGuideImages: idCaptureGuideImages,
+      classNames: classNames.flipIdPrompt,
+      borderWidth: idCardGuideBorderWidth,
+      borderColor: idCardGuideBorderColor,
+      imageStyle: idCardImageStyle
+    }))), /*#__PURE__*/React.createElement(IdCardGuideInstructionsContainer, {
+      className: classNames.idCardGuideInstructionsContainer
+    }, /*#__PURE__*/React.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.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.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.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.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.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.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(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,
@@ -21494,18 +21748,18 @@
     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,
@@ -21526,67 +21780,68 @@
       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(),
-      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(),
+      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();
@@ -21597,18 +21852,18 @@
       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;
@@ -21628,18 +21883,18 @@
         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 () {
@@ -21660,9 +21915,9 @@
         } : 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]);
@@ -21683,9 +21938,9 @@
     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 () {
@@ -21808,9 +22063,9 @@
         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(f(React.useCallback(function (_a) {
       var face = _a.face;
       if (selfieModelError) return;
@@ -21826,12 +22081,12 @@
       }
     }, [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,
@@ -21856,16 +22111,25 @@
       classNames: classNames.readTextPrompt,
       verbiage: rawVerbiage.readTextPrompt,
       onComplete: stopRecording
-    })) : ( /*#__PURE__*/React.createElement(React.Fragment, null, debugMode && capturingId && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ObjectDetectionDebugOverlayDiv, {
-      "$flipX": !((_l = cameraRef.current) === null || _l === void 0 ? void 0 : _l.isRearFacing)
+    })) : ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ObjectDetectionDebugOverlayDiv, {
+      "$flipX": !isRearFacing
     }, detectedObjects.map(function (obj, i) {
-      var _a;
       return /*#__PURE__*/React.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.createElement(DebugBoundingBoxOverlay, null, face && ( /*#__PURE__*/React.createElement(SelfieCaptureFaceDebugBox, {
       face: face,
@@ -21874,9 +22138,9 @@
       className: classNames.guidanceMessageContainer
     }, /*#__PURE__*/React.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.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React.createElement(React.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React.createElement("br", null), isRecordingVideo ? '✅ Recording' : '❌ Not recording', /*#__PURE__*/React.createElement("br", null), goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', goodFramesCount, "/", goodFramesThreshold, /*#__PURE__*/React.createElement("br", null), "Document Type: ", currentDetectedDocumentType, /*#__PURE__*/React.createElement("br", null), "Detection Score: ", currentDetectionScore, /*#__PURE__*/React.createElement("br", null), "Focus Score: ", currentFocusScore, /*#__PURE__*/React.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.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.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.createElement(DebugStatsPane, null, camera ? ( /*#__PURE__*/React.createElement(React.Fragment, null, "\u2705 Camera: ", camera.label, " (", camera.width, "x", camera.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React.createElement("br", null), isRecordingVideo ? '✅ Recording' : '❌ Not recording', /*#__PURE__*/React.createElement("br", null), goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', goodFramesCount, "/", goodFramesThreshold, /*#__PURE__*/React.createElement("br", null), "Document Type: ", currentDetectedDocumentType, /*#__PURE__*/React.createElement("br", null), "Detection Score: ", currentDetectionScore, /*#__PURE__*/React.createElement("br", null), "Focus Score: ", currentFocusScore, /*#__PURE__*/React.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.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.createElement(CountdownContainer, {
       className: classNames.countdownContainer
     }, /*#__PURE__*/React.createElement(Countdown, {
       className: classNames.countdown
@@ -22156,42 +22420,31 @@
       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.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.createElement(PageContainer, {
         className: "flex"
       }, /*#__PURE__*/React.createElement(Spinner$1, null));
     }
-    return /*#__PURE__*/React.createElement(CameraProvider, {
-      key: "".concat(isCapturingId ? 'id' : 'selfie', "-camera-").concat(attempt),
-      preferContinuityCamera: isCapturingId,
+    return /*#__PURE__*/React.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.createElement(IdCaptureModelsProvider, {
       autoStart: false,
       documentDetectionModelUrl: (_g = (_f = idCaptureProps.assets) === null || _f === void 0 ? void 0 : _f.documentDetectionModelUrl) !== null && _g !== void 0 ? _g : '',
@@ -22317,17 +22570,15 @@
       _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);
@@ -22405,16 +22656,6 @@
         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);
@@ -22443,11 +22684,9 @@
     }
     switch (checks[checkIndex]) {
       case 'IdCapture':
-        return /*#__PURE__*/React.createElement(CameraProvider, {
-          key: "IdCaptureCamera",
+        return /*#__PURE__*/React.createElement(CameraStoreProvider, {
           onCameraAccessDenied: onCameraAccessDenied,
-          onMicrophoneAccessDenied: onMicrophoneAccessDenied,
-          debugMode: debugMode
+          onMicrophoneAccessDenied: onMicrophoneAccessDenied
         }, /*#__PURE__*/React.createElement(IdCaptureModelsProvider, {
           autoStart: false,
           documentDetectionModelUrl: (_d = (_c = idCaptureProps.assets) === null || _c === void 0 ? void 0 : _c.documentDetectionModelUrl) !== null && _d !== void 0 ? _d : '',
@@ -22464,13 +22703,11 @@
           onMicrophoneAccessDenied: onMicrophoneAccessDenied
         }));
       case 'FaceLiveness':
-        return /*#__PURE__*/React.createElement(CameraProvider, {
-          key: "FaceLivenessCamera",
+        return /*#__PURE__*/React.createElement(CameraStoreProvider, {
           preferFrontFacingCamera: true,
-          preferContinuityCamera: false,
+          preferIphoneContinuityCamera: false,
           onCameraAccessDenied: onCameraAccessDenied,
-          onMicrophoneAccessDenied: onMicrophoneAccessDenied,
-          debugMode: debugMode
+          onMicrophoneAccessDenied: onMicrophoneAccessDenied
         }, /*#__PURE__*/React.createElement(SelfieGuidanceModelsProvider, {
           autoStart: false,
           onModelError: faceLivenessProps.onModelError,
@@ -22483,15 +22720,13 @@
           onAccept: onSignatureCaptureSuccess
         }));
       case 'VideoSignatureCapture':
-        return /*#__PURE__*/React.createElement(CameraProvider, {
-          key: "SignatureKycCamera-".concat(videoSignatureAttempts),
-          preferContinuityCamera: false,
+        return /*#__PURE__*/React.createElement(CameraStoreProvider, {
+          preferIphoneContinuityCamera: false,
           preferFrontFacingCamera: true,
           maxVideoWidth: 1280,
           maxFps: 30,
           onCameraAccessDenied: onCameraAccessDenied,
-          onMicrophoneAccessDenied: onMicrophoneAccessDenied,
-          debugMode: debugMode
+          onMicrophoneAccessDenied: onMicrophoneAccessDenied
         }, /*#__PURE__*/React.createElement(SelfieGuidanceModelsProvider, {
           autoStart: false,
           throttleMs: 250,
@@ -22499,8 +22734,7 @@
           modelLoadTimeoutMs: videoSignatureCaptureProps.modelLoadTimeoutMs,
           requireVerticalFaceCentering: false
         }, /*#__PURE__*/React.createElement(VideoSignatureWizard, _assign({}, videoSignatureCaptureProps, {
-          onComplete: onVideoSignatureComplete,
-          onRetryClicked: onVideoSignatureRetry
+          onComplete: onVideoSignatureComplete
         }))));
       case 'AdditionalDocumentCapture':
         return /*#__PURE__*/React.createElement(AdditionalDocumentCaptureWizard, _assign({}, additionalDocumentCaptureProps, {
@@ -22951,8 +23185,7 @@
       videoSignatureCaptureProps: videoSignatureCaptureProps,
       captureSignature: captureSignature,
       captureSignatureVideo: captureSignatureVideo,
-      onCameraAccessDenied: onCameraAccessDenied,
-      debugMode: debugMode
+      onCameraAccessDenied: onCameraAccessDenied
     }))));
   };
 
@@ -23058,8 +23291,7 @@
         return ['FaceLiveness'];
       }, []),
       faceLivenessProps: faceLivenessProps,
-      onCameraAccessDenied: onCameraAccessDenied,
-      debugMode: debugMode
+      onCameraAccessDenied: onCameraAccessDenied
     }))));
   };
 
@@ -23292,8 +23524,7 @@
       additionalDocumentCaptureProps: additionalDocumentCaptureProps,
       captureSignature: captureSignature,
       captureSignatureVideo: captureSignatureVideo,
-      onCameraAccessDenied: onCameraAccessDenied,
-      debugMode: debugMode
+      onCameraAccessDenied: onCameraAccessDenied
     }))));
   };
 
@@ -23548,8 +23779,7 @@
       videoSignatureCaptureProps: videoSignatureCaptureProps,
       captureSignature: captureSignature,
       captureSignatureVideo: captureSignatureVideo,
-      onCameraAccessDenied: onCameraAccessDenied,
-      debugMode: debugMode
+      onCameraAccessDenied: onCameraAccessDenied
     }))));
   };
 
@@ -23881,7 +24111,7 @@
     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),
@@ -24087,10 +24317,9 @@
       onSubmit: onSubmit,
       geolocationEnabled: geolocationEnabled,
       geolocationRequired: geolocationRequired
-    }, /*#__PURE__*/React.createElement(CameraProvider, {
+    }, /*#__PURE__*/React.createElement(CameraStoreProvider, {
       preferFrontFacingCamera: true,
-      onCameraAccessDenied: onCameraAccessDenied,
-      debugMode: debugMode
+      onCameraAccessDenied: onCameraAccessDenied
     }, /*#__PURE__*/React.createElement(SelfieGuidanceModelsProvider, {
       autoStart: false,
       onModelError: onModelError,
@@ -24439,7 +24668,7 @@
     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),
@@ -24643,10 +24872,9 @@
       onSubmit: onSubmit,
       geolocationEnabled: geolocationEnabled,
       geolocationRequired: geolocationRequired
-    }, /*#__PURE__*/React.createElement(CameraProvider, {
+    }, /*#__PURE__*/React.createElement(CameraStoreProvider, {
       preferFrontFacingCamera: true,
-      onCameraAccessDenied: onCameraAccessDenied,
-      debugMode: debugMode
+      onCameraAccessDenied: onCameraAccessDenied
     }, /*#__PURE__*/React.createElement(SelfieGuidanceModelsProvider, {
       autoStart: false,
       modelLoadTimeoutMs: modelLoadTimeoutMs,
@@ -24973,8 +25201,7 @@
       captureSignature: captureSignature,
       captureSignatureVideo: captureSignatureVideo,
       onCameraAccessDenied: onCameraAccessDenied,
-      onMicrophoneAccessDenied: onMicrophoneAccessDenied,
-      debugMode: debugMode
+      onMicrophoneAccessDenied: onMicrophoneAccessDenied
     }))));
   };
 
@@ -25131,8 +25358,7 @@
       videoSignatureCaptureProps: videoSignatureCaptureProps,
       captureSignature: captureSignature,
       captureSignatureVideo: captureSignatureVideo,
-      onCameraAccessDenied: onCameraAccessDenied,
-      debugMode: debugMode
+      onCameraAccessDenied: onCameraAccessDenied
     }))));
   };
 
@@ -25190,11 +25416,10 @@
       onDocumentUploadFailed: onDocumentUploadFailed,
       geolocationEnabled: geolocationEnabled,
       geolocationRequired: geolocationRequired
-    }, /*#__PURE__*/React.createElement(CameraProvider, {
+    }, /*#__PURE__*/React.createElement(CameraStoreProvider, {
       requestAccessAutomatically: false,
-      preferContinuityCamera: true,
-      onCameraAccessDenied: onCameraAccessDenied,
-      debugMode: debugMode
+      preferIphoneContinuityCamera: true,
+      onCameraAccessDenied: onCameraAccessDenied
     }, /*#__PURE__*/React.createElement(DocumentCaptureWizard, {
       onSuccess: onComplete,
       onExitCapture: onExitCapture,