npm - idmission-web-sdk - Versions diffs - 2.2.34 → 2.2.36 - Mend

idmission-web-sdk 2.2.34 → 2.2.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

package/dist/sdk2.esm.js CHANGED Viewed

@@ -8,10 +8,12 @@ import { Upload } from 'tus-js-client';
 import SparkMD5 from 'spark-md5';
 import useResizeObserver from 'use-resize-observer';
 import { ImageSegmenter, FilesetResolver, ImageClassifier, FaceDetector, ObjectDetector } from '@mediapipe/tasks-vision';
+import { createStore, useStore } from 'zustand';
 import { useDebouncedCallback, useThrottledCallback } from 'use-debounce';
 import { createPortal } from 'react-dom';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import i18n from 'i18next';
+import { useShallow } from 'zustand/react/shallow';
 import SignatureCanvas from 'react-signature-canvas';
 /******************************************************************************
@@ -201,7 +203,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
-var webSdkVersion = '2.2.34';
+var webSdkVersion = '2.2.36';
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -362,7 +364,7 @@ function videoDataUrlToB64(url) {
   });
 }
-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) {
@@ -402,7 +404,7 @@ var PageContainer = /*#__PURE__*/forwardRef(function (_a, ref) {
   }, dimensionsCalculated && children);
 });
 PageContainer.displayName = 'PageContainer';
-var templateObject_1$J;
+var templateObject_1$L;
 var LoaderButton = function LoaderButton(_a) {
   var children = _a.children,
@@ -461,30 +463,30 @@ var LoaderButton = function LoaderButton(_a) {
     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;
 var GeolocationAccessDeniedOverlay = function GeolocationAccessDeniedOverlay(_a) {
   var accessBlockedImageUrl = _a.accessBlockedImageUrl;
@@ -731,13 +733,13 @@ var SessionValidationErrorOverlay = function SessionValidationErrorOverlay(_a) {
   }, retryText)))));
 };
-var wavesAnimation = 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 = 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 = 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 = 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 = 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 = 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 = 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 = keyframes(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n    to {\n        stroke-dashoffset: 0;\n    }\n"], ["\n    to {\n        stroke-dashoffset: 0;\n    }\n"])));
+var templateObject_1$I, templateObject_2$z, templateObject_3$q, templateObject_4$k;
-var Spinner = styled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  display: inline-block;\n  width: ", "px;\n  height: ", "px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: ", "px;\n    height: ", "px;\n    margin: 8px;\n    border-radius: 50%;\n    border: ", "px solid\n      ", ";\n    border-color: ", " transparent\n      ", " transparent;\n    animation: ", " 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n"], ["\n  display: inline-block;\n  width: ", "px;\n  height: ", "px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: ", "px;\n    height: ", "px;\n    margin: 8px;\n    border-radius: 50%;\n    border: ", "px solid\n      ", ";\n    border-color: ", " transparent\n      ", " transparent;\n    animation: ", " 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n"])), function (_a) {
+var Spinner = styled.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) {
@@ -762,7 +764,7 @@ var Spinner = styled.div(templateObject_1$F || (templateObject_1$F = __makeTempl
   var $color = _a.$color;
   return $color !== null && $color !== void 0 ? $color : '#888';
 }, dualRingSpinnerAnimation);
-var templateObject_1$F;
+var templateObject_1$H;
 var 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'];
@@ -770,11 +772,11 @@ function setDefaultAuthUrl(url) {
   if (!allowedAuthUrls.includes(url)) throw new Error('invalid auth url');
   defaultAuthUrl = url;
 }
-var initialState$5 = {
+var initialState$6 = {
   authUrl: defaultAuthUrl,
   sessionCheckState: 'READY'
 };
-var AuthStateContext = /*#__PURE__*/createContext(initialState$5);
+var AuthStateContext = /*#__PURE__*/createContext(initialState$6);
 var AuthDispatchContext = /*#__PURE__*/createContext(function () {});
 var reducer$4 = function reducer(state, action) {
   switch (action.type) {
@@ -806,7 +808,7 @@ function useAuthReducer(authUrl, sessionId) {
   if (authUrl === void 0) {
     authUrl = defaultAuthUrl;
   }
-  var _a = useReducer(reducer$4, _assign(_assign({}, initialState$5), {
+  var _a = useReducer(reducer$4, _assign(_assign({}, initialState$6), {
       authUrl: authUrl
     })),
     state = _a[0],
@@ -1886,608 +1888,6 @@ function calculateMd5(blob) {
   });
 }
-function getFrameDimensions(frame) {
-  var frameWidth = frame.width,
-    frameHeight = frame.height;
-  if (frame instanceof HTMLImageElement) {
-    frameWidth = frame.naturalWidth;
-    frameHeight = frame.naturalHeight;
-  }
-  if (frame instanceof HTMLVideoElement) {
-    frameWidth = frame.videoWidth;
-    frameHeight = frame.videoHeight;
-  }
-  return [frameWidth, frameHeight];
-}
-var InvisibleCanvas = styled.canvas(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
-function drawToCanvas(canvas, frame, width, height) {
-  if (!canvas) return;
-  var ctx = canvas.getContext('2d');
-  if (!ctx) return;
-  if (!width || !height) {
-    var _a = getFrameDimensions(frame),
-      frameWidth = _a[0],
-      frameHeight = _a[1];
-    width || (width = frameWidth);
-    height || (height = frameHeight);
-  }
-  canvas.width = width;
-  canvas.height = height;
-  ctx.drawImage(frame, 0, 0, width, height);
-}
-function clearCanvas(canvas) {
-  var _a;
-  (_a = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.clearRect(0, 0, canvas === null || canvas === void 0 ? void 0 : canvas.width, canvas === null || canvas === void 0 ? void 0 : canvas.height);
-}
-var templateObject_1$E;
-function listAvailableCameras(facingMode_1) {
-  return __awaiter(this, arguments, void 0, function (facingMode, requestMicAccess) {
-    var cameraEnumerationStream, videoDevices;
-    if (requestMicAccess === void 0) {
-      requestMicAccess = false;
-    }
-    return __generator(this, function (_a) {
-      switch (_a.label) {
-        case 0:
-          return [4 /*yield*/, navigator.mediaDevices.getUserMedia({
-            video: {
-              facingMode: {
-                exact: facingMode
-              }
-            },
-            audio: requestMicAccess
-          })
-          // This lists all available cameras attached to the user's device.
-          ];
-        case 1:
-          cameraEnumerationStream = _a.sent();
-          return [4 /*yield*/, navigator.mediaDevices.enumerateDevices()];
-        case 2:
-          videoDevices = _a.sent().filter(function (_a) {
-            var kind = _a.kind;
-            return kind === 'videoinput';
-          });
-          // Release the access to the user's camera that we obtained for enumeration purposes.
-          cameraEnumerationStream.getVideoTracks().forEach(function (track) {
-            track.enabled = false;
-            track.stop();
-          });
-          cameraEnumerationStream = null;
-          return [2 /*return*/, videoDevices];
-      }
-    });
-  });
-}
-var frontLabels = ['front', 'avant', 'anteriore', 'cameraaanvoorzijde', 'kamerapåframsidan', 'forsidekamera', 'kamerapåforsiden', 'aparatprzedni', 'etukamera', 'kameradepan', 'ÖnKamera', 'cameramặttrước', 'camerăfață', 'prednákamera', 'prednjakamera', 'előlapikamera', 'přednífotoaparát', 'μπροστινήκάμερα', 'переднякамера', 'передняякамера', 'преднакамера', 'алдыңғыкамера', 'מצלמה קדמית', 'الكاميرا الأمامية', 'फ़्रंटकैमरा', '前置相机', '前置鏡頭', '前面カメラ', '전면카메라', 'กล้องด้านหน้า'].map(function (s) {
-  return s.toLocaleLowerCase().split(' ').join('');
-});
-var rearLabels = ['back', 'rear', 'posterior', 'trasera', 'traseira', 'arrière', 'rückkamera', 'fotocamera(posteriore)', 'cameraaanachterzijde', 'kamerapåbaksidan', 'kamerapåbaksiden', 'bagsidekamera', 'aparattylny', 'takakamera', 'arkakamera', 'kamerabelakang', 'cameramặtsau', 'camerăspate', 'stražnjakamera', 'zadnákamera', 'hátoldalikamera', 'zadnífotoaparát', 'πίσωκάμερα', 'заднякамера', 'Задняякамера', 'заднакамера', 'артқыкамера', 'מצלמה אחורית', 'الكاميرا الخلفية', 'बैककैमरा', '后置相机', '後置鏡頭', '背面カメラ', '후면카메라', 'กล้องด้านหลัง'].map(function (s) {
-  return s.toLocaleLowerCase().split(' ').join('');
-});
-var backUltraWideLabels = ['backdualwidecamera', 'backultrawidecamera', 'ultraampliaposterior', 'ultra-angulartraseira', 'ultragrandeangulartraseira', 'ultragrandangle', 'ultragranangular', 'ultra-weitwinkelkamera', 'ultra-grandangolo', 'ultrabredecameraaanachterzijde', 'ultravidvinkelkamerapåbaksidan', 'ultravidvinkelkameraetpåbagsiden', 'ultravidvinkelkamerabak', 'ultragenişkameraarkayüzü', 'ultralaajakulmainentakakamera', 'tylnyaparatultraszerokokątny', 'cameracựcrộngmặtsau', 'camerăcuobiectivultra‑superangularspate', 'ultraszéleslátószögűkamera', 'kameraultralebarbelakang', 'stražnjaultraširokakamera', 'zadníultraširokoúhlýfotoaparát', 'ultraširokouhlá', 'πίσωυπερευρείακάμερα', 'заднянадширококутнакамера', 'Задняясверхширокоугольнаякамера', 'Задна свръх широкоъгълна камера', 'артқыультракеңбұрыштыкамера', 'מצלמה אולטרה רחבה אחורית', 'كاميرا خلفية عريضة جدًا', 'बैकअल्ट्रावाइडकैमरा', '后置超广角相机', '後置超廣角鏡頭相機', '背面超広角カメラ', '후면울트라와이드카메라', 'กล้องด้านหลังอัลตร้าไวด์'].map(function (s) {
-  return s.toLocaleLowerCase().split(' ').join('');
-});
-var labelMatches = function labelMatches(labelOrDevice, labelSetOrLabel) {
-  var label = labelOrDevice instanceof MediaDeviceInfo ? getDeviceLabel(labelOrDevice) : labelOrDevice;
-  var labelSet = typeof labelSetOrLabel === 'string' ? [labelSetOrLabel] : labelSetOrLabel;
-  return labelSet.some(function (l) {
-    return label.includes(l);
-  });
-};
-var getDeviceLabel = function getDeviceLabel(deviceInfo) {
-  return deviceInfo.label.toLocaleLowerCase().split(' ').join('');
-};
-var currentCamera;
-var currentAudioStream;
-function obtainCameraAccess(stream, deviceLabel, video) {
-  releaseCameraAccess();
-  log('obtaining camera access...');
-  var _a = stream.getVideoTracks()[0].getSettings(),
-    width = _a.width,
-    height = _a.height;
-  var label = deviceLabel.toLocaleLowerCase().split(' ').join('');
-  var isRearFacing = labelMatches(label, __spreadArray(__spreadArray(__spreadArray([], rearLabels, true), backUltraWideLabels, true), ['iphone'], false));
-  var release = function release() {
-    stream.getTracks().forEach(function (track) {
-      track.enabled = false;
-      track.stop();
-    });
-    if (video) {
-      video.pause();
-      video.srcObject = null;
-      video.src = '';
-    }
-  };
-  width || (width = 0);
-  height || (height = 0);
-  currentCamera = {
-    label: deviceLabel,
-    stream: stream,
-    width: width,
-    height: height,
-    isRearFacing: isRearFacing,
-    release: release
-  };
-  if (video) video.srcObject = stream;
-  return currentCamera;
-}
-function releaseCameraAccess() {
-  if (!currentCamera) return;
-  log('releasing camera access...');
-  currentCamera.release();
-  currentCamera = undefined;
-}
-function releaseMicrophoneAccess() {
-  var _a;
-  if (!currentAudioStream) return;
-  log('releasing microphone access...');
-  (_a = currentAudioStream.stop) === null || _a === void 0 ? void 0 : _a.call(currentAudioStream);
-  currentAudioStream.getAudioTracks().forEach(function (t) {
-    var _a;
-    (_a = t.stop) === null || _a === void 0 ? void 0 : _a.call(t);
-  });
-  currentAudioStream = undefined;
-}
-function usePreferredCaptureDevice(_a) {
-  var _b = _a === void 0 ? {} : _a,
-    _c = _b.requestAccessAutomatically,
-    requestAccessAutomatically = _c === void 0 ? true : _c,
-    _d = _b.preferFrontFacingCamera,
-    preferFrontFacingCamera = _d === void 0 ? false : _d,
-    _e = _b.preferContinuityCamera,
-    preferContinuityCamera = _e === void 0 ? true : _e,
-    _f = _b.requireMicrophoneAccess,
-    requireMicrophoneAccess = _f === void 0 ? false : _f,
-    _g = _b.maxVideoWidth,
-    maxVideoWidth = _g === void 0 ? 1920 : _g,
-    maxFps = _b.maxFps,
-    _h = _b.debugMode,
-    debugMode = _h === void 0 ? false : _h;
-  var videoRef = useRef(null);
-  var videoRefStack = useRef([]);
-  var cameraRef = useRef(null);
-  var _j = useState(false),
-    cameraReady = _j[0],
-    setCameraReady = _j[1];
-  var _k = useState(false),
-    microphoneReady = _k[0],
-    setMicrophoneReady = _k[1];
-  var _l = useState(null),
-    videoDevice = _l[0],
-    setVideoDevice = _l[1];
-  var _m = useState(null),
-    audioStream = _m[0],
-    setAudioStream = _m[1];
-  var _o = useState(false),
-    videoLoaded = _o[0],
-    setVideoLoaded = _o[1];
-  var _p = useState(false),
-    iphoneContinuityCameraAvailable = _p[0],
-    setIphoneContinuityCameraAvailable = _p[1];
-  var _q = useState(preferContinuityCamera),
-    iphoneContinuityCameraAllowed = _q[0],
-    setIphoneContinuityCameraAllowed = _q[1];
-  var _r = useState(false),
-    iphoneContinuityCameraDenied = _r[0],
-    setIphoneContinuityCameraDenied = _r[1];
-  var _s = useState(false),
-    cameraAccessDenied = _s[0],
-    setCameraAccessDenied = _s[1];
-  var _t = useState(false),
-    microphoneAccessDenied = _t[0],
-    setMicrophoneAccessDenied = _t[1];
-  var videoRefElement = videoRef.current;
-  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 = 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);
-  }, []);
-  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 = 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]);
-  useEffect(function requestCameraAccessAutomatically() {
-    if (requestAccessAutomatically && !cameraAccessDenied) {
-      requestCameraAccess()["catch"](error);
-    }
-  }, [cameraAccessDenied, requestAccessAutomatically, requestCameraAccess]);
-  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]);
-  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 = 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*/];
-        }
-      });
-    });
-  }, []);
-  useEffect(function requestMicrophoneAccessIfNeeded() {
-    if (!requireMicrophoneAccess || microphoneAccessDenied) return;
-    requestMicrophoneAccess()["catch"](error);
-    return function () {
-      releaseMicrophoneAccess();
-      setAudioStream(null);
-      setMicrophoneReady(false);
-    };
-  }, [microphoneAccessDenied, requestMicrophoneAccess, requireMicrophoneAccess]);
-  var takePhoto = 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 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__*/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
-  });
-  useEffect(function () {
-    if (captureDevice.cameraAccessDenied) onCameraAccessDenied === null || onCameraAccessDenied === void 0 ? void 0 : onCameraAccessDenied();
-  }, [captureDevice.cameraAccessDenied, onCameraAccessDenied]);
-  useEffect(function () {
-    if (captureDevice.microphoneAccessDenied) onMicrophoneAccessDenied === null || onMicrophoneAccessDenied === void 0 ? void 0 : onMicrophoneAccessDenied();
-  }, [captureDevice.microphoneAccessDenied, onMicrophoneAccessDenied]);
-  var releaseCameraAccess = captureDevice.releaseCameraAccess;
-  useEffect(function () {
-    return function () {
-      releaseCameraAccess();
-    };
-  }, [releaseCameraAccess]);
-  return /*#__PURE__*/React__default.createElement(CameraStateContext.Provider, {
-    value: captureDevice
-  }, children);
-};
 var visionTasksBasePath = "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.7/wasm";
 var visionRuntimePreloading = false;
 function preloadVisionRuntime() {
@@ -2530,6 +1930,42 @@ function preloadVisionRuntime() {
   });
 }
+function getFrameDimensions(frame) {
+  var frameWidth = frame.width,
+    frameHeight = frame.height;
+  if (frame instanceof HTMLImageElement) {
+    frameWidth = frame.naturalWidth;
+    frameHeight = frame.naturalHeight;
+  }
+  if (frame instanceof HTMLVideoElement) {
+    frameWidth = frame.videoWidth;
+    frameHeight = frame.videoHeight;
+  }
+  return [frameWidth, frameHeight];
+}
+var InvisibleCanvas = styled.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;
@@ -2833,7 +2269,8 @@ function useLoadFocusModel(_a) {
     modelPath = _b === void 0 ? defaultFocusModelPath : _b,
     _c = _a.modelLoadTimeoutMs,
     modelLoadTimeoutMs = _c === void 0 ? defaultFocusModelLoadTimeoutMs : _c,
-    onModelError = _a.onModelError;
+    onModelError = _a.onModelError,
+    videoRef = _a.videoRef;
   var _d = useState(false),
     ready = _d[0],
     setReady = _d[1];
@@ -2843,7 +2280,6 @@ function useLoadFocusModel(_a) {
   var _f = useState(null),
     modelError = _f[0],
     setModelError = _f[1];
-  var videoRef = useContext(CameraStateContext).videoRef;
   useEffect(function loadModel() {
     var _this = this;
     setReady(false);
@@ -2981,7 +2417,8 @@ function closeFaceDetector() {
 function useLoadFaceDetector(_a) {
   var onModelError = _a.onModelError,
     _b = _a.modelLoadTimeoutMs,
-    modelLoadTimeoutMs = _b === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _b;
+    modelLoadTimeoutMs = _b === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _b,
+    videoRef = _a.videoRef;
   var _c = useState(false),
     ready = _c[0],
     setReady = _c[1];
@@ -2991,7 +2428,6 @@ function useLoadFaceDetector(_a) {
   var _e = useState(null),
     modelError = _e[0],
     setModelError = _e[1];
-  var videoRef = useContext(CameraStateContext).videoRef;
   useEffect(function loadModel() {
     var _this = this;
     setReady(false);
@@ -3472,7 +2908,8 @@ function useLoadDocumentDetector(_a) {
     modelLoadTimeoutMs = _c === void 0 ? defaultDocumentDetectionModelLoadTimeoutMs : _c,
     _d = _a.scoreThreshold,
     scoreThreshold = _d === void 0 ? defaultDocumentDetectionScoreThreshold : _d,
-    onModelError = _a.onModelError;
+    onModelError = _a.onModelError,
+    videoRef = _a.videoRef;
   var _e = useState(false),
     ready = _e[0],
     setReady = _e[1];
@@ -3482,7 +2919,6 @@ function useLoadDocumentDetector(_a) {
   var _g = useState(null),
     modelError = _g[0],
     setModelError = _g[1];
-  var videoRef = useContext(CameraStateContext).videoRef;
   useEffect(function loadModel() {
     var _this = this;
     setReady(false);
@@ -3791,6 +3227,470 @@ function useFrameLoop(fn, _a) {
   };
 }
+function listAvailableCameras(facingMode_1) {
+  return __awaiter(this, arguments, void 0, function (facingMode, requestMicAccess) {
+    var cameraEnumerationStream, videoDevices;
+    if (requestMicAccess === void 0) {
+      requestMicAccess = false;
+    }
+    return __generator(this, function (_a) {
+      switch (_a.label) {
+        case 0:
+          return [4 /*yield*/, navigator.mediaDevices.getUserMedia({
+            video: {
+              facingMode: {
+                exact: facingMode
+              }
+            },
+            audio: requestMicAccess
+          })
+          // This lists all available cameras attached to the user's device.
+          ];
+        case 1:
+          cameraEnumerationStream = _a.sent();
+          return [4 /*yield*/, navigator.mediaDevices.enumerateDevices()];
+        case 2:
+          videoDevices = _a.sent().filter(function (_a) {
+            var kind = _a.kind;
+            return kind === 'videoinput';
+          });
+          // Release the access to the user's camera that we obtained for enumeration purposes.
+          cameraEnumerationStream.getVideoTracks().forEach(function (track) {
+            track.enabled = false;
+            track.stop();
+          });
+          cameraEnumerationStream = null;
+          return [2 /*return*/, videoDevices];
+      }
+    });
+  });
+}
+var frontCameraLabels = ['front', 'avant', 'anteriore', 'cameraaanvoorzijde', 'kamerapåframsidan', 'forsidekamera', 'kamerapåforsiden', 'aparatprzedni', 'etukamera', 'kameradepan', 'ÖnKamera', 'cameramặttrước', 'camerăfață', 'prednákamera', 'prednjakamera', 'előlapikamera', 'přednífotoaparát', 'μπροστινήκάμερα', 'переднякамера', 'передняякамера', 'преднакамера', 'алдыңғыкамера', 'מצלמה קדמית', 'الكاميرا الأمامية', 'फ़्रंटकैमरा', '前置相机', '前置鏡頭', '前面カメラ', '전면카메라', 'กล้องด้านหน้า'].map(function (s) {
+  return s.toLocaleLowerCase().split(' ').join('');
+});
+var rearCameraLabels = ['back', 'rear', 'posterior', 'trasera', 'traseira', 'arrière', 'rückkamera', 'fotocamera(posteriore)', 'cameraaanachterzijde', 'kamerapåbaksidan', 'kamerapåbaksiden', 'bagsidekamera', 'aparattylny', 'takakamera', 'arkakamera', 'kamerabelakang', 'cameramặtsau', 'camerăspate', 'stražnjakamera', 'zadnákamera', 'hátoldalikamera', 'zadnífotoaparát', 'πίσωκάμερα', 'заднякамера', 'Задняякамера', 'заднакамера', 'артқыкамера', 'מצלמה אחורית', 'الكاميرا الخلفية', 'बैककैमरा', '后置相机', '後置鏡頭', '背面カメラ', '후면카메라', 'กล้องด้านหลัง'].map(function (s) {
+  return s.toLocaleLowerCase().split(' ').join('');
+});
+var backUltraWideCameraLabels = ['backdualwidecamera', 'backultrawidecamera', 'ultraampliaposterior', 'ultra-angulartraseira', 'ultragrandeangulartraseira', 'ultragrandangle', 'ultragranangular', 'ultra-weitwinkelkamera', 'ultra-grandangolo', 'ultrabredecameraaanachterzijde', 'ultravidvinkelkamerapåbaksidan', 'ultravidvinkelkameraetpåbagsiden', 'ultravidvinkelkamerabak', 'ultragenişkameraarkayüzü', 'ultralaajakulmainentakakamera', 'tylnyaparatultraszerokokątny', 'cameracựcrộngmặtsau', 'camerăcuobiectivultra‑superangularspate', 'ultraszéleslátószögűkamera', 'kameraultralebarbelakang', 'stražnjaultraširokakamera', 'zadníultraširokoúhlýfotoaparát', 'ultraširokouhlá', 'πίσωυπερευρείακάμερα', 'заднянадширококутнакамера', 'Задняясверхширокоугольнаякамера', 'Задна свръх широкоъгълна камера', 'артқыультракеңбұрыштыкамера', 'מצלמה אולטרה רחבה אחורית', 'كاميرا خلفية عريضة جدًا', 'बैकअल्ट्रावाइडकैमरा', '后置超广角相机', '後置超廣角鏡頭相機', '背面超広角カメラ', '후면울트라와이드카메라', 'กล้องด้านหลังอัลตร้าไวด์'].map(function (s) {
+  return s.toLocaleLowerCase().split(' ').join('');
+});
+var cameraLabelMatches = function cameraLabelMatches(labelOrDevice, labelSetOrLabel) {
+  var label = labelOrDevice instanceof MediaDeviceInfo ? getDeviceLabel(labelOrDevice) : labelOrDevice;
+  var labelSet = typeof labelSetOrLabel === 'string' ? [labelSetOrLabel] : labelSetOrLabel;
+  return labelSet.some(function (l) {
+    return label.includes(l);
+  });
+};
+var getDeviceLabel = function getDeviceLabel(deviceInfo) {
+  return deviceInfo.label.toLocaleLowerCase().split(' ').join('');
+};
+var currentCamera;
+function obtainCameraAccess(stream, deviceLabel, video) {
+  releaseCameraAccess();
+  log('obtaining camera access...');
+  var _a = stream.getVideoTracks()[0].getSettings(),
+    width = _a.width,
+    height = _a.height;
+  log('camera dimensions', width, height);
+  var label = deviceLabel.toLocaleLowerCase().split(' ').join('');
+  log('camera label', label);
+  var isRearFacing = cameraLabelMatches(label, __spreadArray(__spreadArray(__spreadArray([], rearCameraLabels, true), backUltraWideCameraLabels, true), ['iphone'], false));
+  log('is rear facing?', isRearFacing);
+  var release = function release() {
+    stream.getTracks().forEach(function (track) {
+      track.enabled = false;
+      track.stop();
+    });
+    if (video) {
+      video.pause();
+      video.srcObject = null;
+      video.src = '';
+    }
+  };
+  width || (width = 0);
+  height || (height = 0);
+  currentCamera = {
+    label: deviceLabel,
+    stream: stream,
+    width: width,
+    height: height,
+    isRearFacing: isRearFacing,
+    release: release
+  };
+  log('camera access granted');
+  if (video) video.srcObject = stream;
+  log('video source initialized');
+  return currentCamera;
+}
+function releaseCameraAccess() {
+  if (!currentCamera) return;
+  log('releasing camera access...');
+  currentCamera.release();
+  currentCamera = undefined;
+}
+var initialState$5 = {
+  videoRef: {
+    current: null
+  },
+  videoLoaded: false,
+  videoStream: null,
+  videoDevice: null,
+  isRearFacing: false,
+  camera: null,
+  cameraReady: false,
+  cameraAccessDenied: false,
+  iphoneContinuityCameraAvailable: false,
+  iphoneContinuityCameraDenied: false,
+  preferIphoneContinuityCamera: true,
+  audioStream: null,
+  microphoneReady: false,
+  microphoneAccessDenied: false
+};
+var createCameraStore = function createCameraStore(config) {
+  var store = createStore(function (set, get) {
+    return _assign(_assign(_assign({}, initialState$5), config), {
+      reset: function reset() {
+        return set(_assign(_assign({}, initialState$5), config));
+      },
+      setConfig: function setConfig(config) {
+        return set(config);
+      },
+      onVideoMounted: function onVideoMounted() {
+        return set({
+          videoLoaded: true
+        });
+      },
+      setIphoneContinuityCameraAllowed: function setIphoneContinuityCameraAllowed(value) {
+        return set({
+          preferIphoneContinuityCamera: value
+        });
+      },
+      requestCameraAccess: function requestCameraAccess() {
+        return __awaiter(this, void 0, void 0, function () {
+          var _a, releaseCameraAccess, preferIphoneContinuityCamera, iphoneContinuityCameraDenied, availableCameras, selectedCamera, platform_1, iphoneContinuityCamera, constraints, stream, e_1, iphoneContinuityCameraAvailable_1, handleStreamEnded_1, camera, e_3;
+          var _b, _c, _d;
+          return __generator(this, function (_e) {
+            switch (_e.label) {
+              case 0:
+                _a = get(), releaseCameraAccess = _a.releaseCameraAccess, preferIphoneContinuityCamera = _a.preferIphoneContinuityCamera, iphoneContinuityCameraDenied = _a.iphoneContinuityCameraDenied;
+                releaseCameraAccess();
+                _e.label = 1;
+              case 1:
+                _e.trys.push([1, 11,, 12]);
+                return [4 /*yield*/, listAvailableCameras()];
+              case 2:
+                availableCameras = _e.sent();
+                selectedCamera = void 0;
+                debug('availableCameras', availableCameras);
+                platform_1 = getPlatform();
+                debug('platformDetails', platform_1);
+                if (!iphoneContinuityCameraDenied && (!(platform_1 === null || platform_1 === void 0 ? void 0 : platform_1.os) || platform_1.os.family === 'OS X')) {
+                  iphoneContinuityCamera = availableCameras.find(function (deviceInfo) {
+                    return cameraLabelMatches(deviceInfo, 'iphone');
+                  });
+                  set({
+                    iphoneContinuityCameraAvailable: !!iphoneContinuityCamera
+                  });
+                  if (iphoneContinuityCamera && preferIphoneContinuityCamera) {
+                    selectedCamera = iphoneContinuityCamera;
+                  }
+                } else if (((_b = platform_1 === null || platform_1 === void 0 ? void 0 : platform_1.os) === null || _b === void 0 ? void 0 : _b.family) === 'Android' || availableCameras.every(function (c) {
+                  return c.label.startsWith('camera2 ');
+                })) {
+                  availableCameras = availableCameras.sort(function (a, b) {
+                    return a.label.toLowerCase().localeCompare(b.label.toLowerCase());
+                  });
+                  debug('cameras have been sorted', availableCameras);
+                }
+                if (config.preferFrontFacingCamera) {
+                  selectedCamera = availableCameras.find(function (deviceInfo) {
+                    return cameraLabelMatches(deviceInfo, frontCameraLabels);
+                  });
+                }
+                selectedCamera || (selectedCamera = availableCameras.find(function (deviceInfo) {
+                  return cameraLabelMatches(deviceInfo, 'backtriplecamera');
+                }));
+                selectedCamera || (selectedCamera = availableCameras.find(function (deviceInfo) {
+                  return cameraLabelMatches(deviceInfo, 'backdualcamera');
+                }));
+                selectedCamera || (selectedCamera = availableCameras.find(function (deviceInfo) {
+                  return cameraLabelMatches(deviceInfo, rearCameraLabels) && !cameraLabelMatches(deviceInfo, backUltraWideCameraLabels);
+                }));
+                selectedCamera || (selectedCamera = availableCameras.find(function (deviceInfo) {
+                  return cameraLabelMatches(deviceInfo, rearCameraLabels);
+                }));
+                // on iOS, the front facing camera always is at the first position in the list, so we skip it if all else fails.
+                if (!config.preferFrontFacingCamera && ((_c = platform_1 === null || platform_1 === void 0 ? void 0 : platform_1.os) === null || _c === void 0 ? void 0 : _c.family) === 'iOS' && availableCameras.length > 0) {
+                  selectedCamera || (selectedCamera = availableCameras[1]);
+                }
+                selectedCamera || (selectedCamera = availableCameras[0]);
+                debug('selectedCamera', selectedCamera);
+                set({
+                  videoDevice: selectedCamera
+                });
+                constraints = {
+                  audio: false,
+                  video: {
+                    deviceId: {
+                      exact: selectedCamera.deviceId
+                    },
+                    width: {
+                      ideal: config.maxVideoWidth
+                    },
+                    aspectRatio: 1.777777778,
+                    frameRate: {}
+                  }
+                };
+                if (config.maxFps) {
+                  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                  // @ts-ignore
+                  constraints.video.frameRate = {
+                    max: config.maxFps
+                  };
+                }
+                stream = null;
+                _e.label = 3;
+              case 3:
+                _e.trys.push([3, 5,, 6]);
+                debug('obtaining camera access with constraints', constraints);
+                return [4 /*yield*/, navigator.mediaDevices.getUserMedia(constraints)];
+              case 4:
+                stream = _e.sent();
+                return [3 /*break*/, 6];
+              case 5:
+                e_1 = _e.sent();
+                if (e_1.name === 'NotAllowedError') {
+                  if (preferIphoneContinuityCamera) {
+                    set({
+                      iphoneContinuityCameraAvailable: false,
+                      iphoneContinuityCameraDenied: true
+                    });
+                  } else {
+                    set({
+                      cameraAccessDenied: true
+                    });
+                  }
+                  return [2 /*return*/];
+                }
+                return [3 /*break*/, 6];
+              case 6:
+                if (!!stream) return [3 /*break*/, 10];
+                _e.label = 7;
+              case 7:
+                _e.trys.push([7, 9,, 10]);
+                return [4 /*yield*/, navigator.mediaDevices.getUserMedia({
+                  audio: false,
+                  video: true
+                })];
+              case 8:
+                stream = _e.sent();
+                debug('opened stream with no width and height constraints');
+                return [3 /*break*/, 10];
+              case 9:
+                _e.sent();
+                debug('cannot open stream at all');
+                return [3 /*break*/, 10];
+              case 10:
+                if (!stream) {
+                  error('failed to open camera');
+                  throw new Error('failed to open camera');
+                }
+                debug('camera access granted with constraints', constraints);
+                iphoneContinuityCameraAvailable_1 = get().iphoneContinuityCameraAvailable;
+                handleStreamEnded_1 = function handleStreamEnded_1() {
+                  if (iphoneContinuityCameraAvailable_1 && preferIphoneContinuityCamera) {
+                    debug('someone unplugged the continuity camera');
+                    releaseCameraAccess();
+                    set({
+                      videoStream: null,
+                      videoDevice: null,
+                      iphoneContinuityCameraAvailable: false,
+                      iphoneContinuityCameraDenied: true
+                    });
+                  } else {
+                    debug('someone unplugged the webcam');
+                    releaseCameraAccess();
+                    set({
+                      videoStream: null,
+                      videoDevice: null,
+                      videoLoaded: false,
+                      cameraAccessDenied: true
+                    });
+                  }
+                };
+                (_d = config.videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('ended', handleStreamEnded_1);
+                stream.getVideoTracks().forEach(function (track) {
+                  track.onended = handleStreamEnded_1;
+                });
+                camera = obtainCameraAccess(stream, selectedCamera.label, config.videoRef.current);
+                set({
+                  camera: camera,
+                  cameraReady: true,
+                  isRearFacing: camera.isRearFacing,
+                  videoStream: stream
+                });
+                return [3 /*break*/, 12];
+              case 11:
+                e_3 = _e.sent();
+                if (e_3.name === 'NotAllowedError') {
+                  error('camera access has been blocked by the user', e_3);
+                  set({
+                    cameraAccessDenied: true
+                  });
+                } else {
+                  error('camera access encountered some other error', e_3);
+                  throw e_3;
+                }
+                return [3 /*break*/, 12];
+              case 12:
+                return [2 /*return*/];
+            }
+          });
+        });
+      },
+      releaseCameraAccess: function releaseCameraAccess() {
+        return __awaiter(this, void 0, void 0, function () {
+          var camera;
+          return __generator(this, function (_a) {
+            camera = get().camera;
+            if (!camera) return [2 /*return*/];
+            camera.release();
+            set({
+              camera: null,
+              cameraReady: false,
+              cameraAccessDenied: false
+            });
+            return [2 /*return*/];
+          });
+        });
+      },
+      requestMicrophoneAccess: function requestMicrophoneAccess() {
+        return __awaiter(this, void 0, void 0, function () {
+          var stream;
+          return __generator(this, function (_a) {
+            switch (_a.label) {
+              case 0:
+                get().releaseMicrophoneAccess();
+                _a.label = 1;
+              case 1:
+                _a.trys.push([1, 3,, 4]);
+                return [4 /*yield*/, navigator.mediaDevices.getUserMedia({
+                  audio: true,
+                  video: false
+                })];
+              case 2:
+                stream = _a.sent();
+                set({
+                  audioStream: stream,
+                  microphoneReady: true
+                });
+                stream.getAudioTracks().forEach(function (track) {
+                  track.onended = function () {
+                    set({
+                      microphoneAccessDenied: true
+                    });
+                  };
+                });
+                return [3 /*break*/, 4];
+              case 3:
+                _a.sent();
+                set({
+                  microphoneAccessDenied: true
+                });
+                return [3 /*break*/, 4];
+              case 4:
+                return [2 /*return*/];
+            }
+          });
+        });
+      },
+      releaseMicrophoneAccess: function releaseMicrophoneAccess() {
+        var _a;
+        var audioStream = get().audioStream;
+        (_a = audioStream === null || audioStream === void 0 ? void 0 : audioStream.stop) === null || _a === void 0 ? void 0 : _a.call(audioStream);
+        audioStream === null || audioStream === void 0 ? void 0 : audioStream.getAudioTracks().forEach(function (track) {
+          var _a;
+          (_a = track.stop) === null || _a === void 0 ? void 0 : _a.call(track);
+        });
+        set({
+          audioStream: null,
+          microphoneReady: false,
+          microphoneAccessDenied: false
+        });
+      }
+    });
+  });
+  if (config.requestAccessAutomatically) {
+    store.getState().requestCameraAccess();
+  }
+  if (config.requireMicrophoneAccess) {
+    store.getState().requestMicrophoneAccess();
+  }
+  return _assign(_assign({}, store), {
+    destroy: function destroy() {
+      store.getState().releaseCameraAccess();
+      store.getState().releaseMicrophoneAccess();
+    }
+  });
+};
+var CameraStoreContext = /*#__PURE__*/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 = useRef(null);
+  var store = useRef();
+  store.current || (store.current = createCameraStore({
+    videoRef: videoRef,
+    requestAccessAutomatically: requestAccessAutomatically,
+    preferIphoneContinuityCamera: preferIphoneContinuityCamera,
+    preferFrontFacingCamera: preferFrontFacingCamera,
+    maxVideoWidth: maxVideoWidth,
+    maxFps: maxFps,
+    onCameraAccessDenied: onCameraAccessDenied,
+    onMicrophoneAccessDenied: onMicrophoneAccessDenied,
+    requireMicrophoneAccess: requireMicrophoneAccess
+  }));
+  useEffect(function () {
+    var _a, _b, _c;
+    var state = (_a = store.current) === null || _a === void 0 ? void 0 : _a.getState();
+    if (!state) return;
+    if (preferIphoneContinuityCamera !== (state === null || state === void 0 ? void 0 : state.preferIphoneContinuityCamera) || preferFrontFacingCamera !== (state === null || state === void 0 ? void 0 : state.preferFrontFacingCamera)) {
+      (_b = store.current) === null || _b === void 0 ? void 0 : _b.setState({
+        preferIphoneContinuityCamera: preferIphoneContinuityCamera,
+        preferFrontFacingCamera: preferFrontFacingCamera
+      });
+      (_c = store.current) === null || _c === void 0 ? void 0 : _c.getState().requestCameraAccess();
+    }
+  }, [preferFrontFacingCamera, preferIphoneContinuityCamera]);
+  useEffect(function () {
+    return function () {
+      var _a;
+      return (_a = store.current) === null || _a === void 0 ? void 0 : _a.destroy();
+    };
+  }, []);
+  return /*#__PURE__*/React__default.createElement(CameraStoreContext.Provider, {
+    value: store.current
+  }, children);
+}
+function useCameraStore(selector) {
+  var store = useContext(CameraStoreContext);
+  if (!store) throw new Error('useCameraStore cannot be used without Provider');
+  return useStore(store, selector);
+}
 var DocumentDetectionModelContext = /*#__PURE__*/createContext({
   startDocumentDetection: function startDocumentDetection() {
     return null;
@@ -3836,7 +3736,7 @@ function DocumentDetectionModelProvider(_a) {
     _g = _a.documentDetectionModelLoadTimeoutMs,
     documentDetectionModelLoadTimeoutMs = _g === void 0 ? defaultDocumentDetectionModelLoadTimeoutMs : _g,
     onDocumentDetectionModelError = _a.onDocumentDetectionModelError;
-  var _h = useContext(CameraStateContext),
+  var _h = useCameraStore(),
     videoRef = _h.videoRef,
     videoLoaded = _h.videoLoaded,
     cameraReady = _h.cameraReady;
@@ -3859,7 +3759,8 @@ function DocumentDetectionModelProvider(_a) {
       modelPath: documentDetectionModelPath,
       modelLoadTimeoutMs: documentDetectionModelLoadTimeoutMs,
       scoreThreshold: documentDetectionModelScoreThreshold,
-      onModelError: onDocumentDetectionModelError
+      onModelError: onDocumentDetectionModelError,
+      videoRef: videoRef
     }),
     ready = _o.ready,
     modelDownloadProgress = _o.modelDownloadProgress,
@@ -3976,10 +3877,12 @@ function FocusModelProvider(_a) {
   var _e = 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,
@@ -4651,12 +4554,12 @@ function DebugStatsPane(_a) {
   if (!portalLocation) return element;
   return /*#__PURE__*/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) {
@@ -4666,7 +4569,7 @@ var ObjectDetectionDebugBox = styled.div(templateObject_3$n || (templateObject_3
   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) {
@@ -4857,7 +4760,7 @@ function SelfieCaptureFaceKeypoint(_a) {
     }
   });
 }
-var templateObject_1$D, templateObject_2$w, templateObject_3$n, templateObject_4$h;
+var templateObject_1$F, templateObject_2$y, templateObject_3$p, templateObject_4$j;
 var enTranslation = {};
@@ -5034,7 +4937,7 @@ function useTranslations(verbiage, fallbacks) {
   }, [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) {
@@ -5047,14 +4950,14 @@ var GuidanceMessageContainer = function GuidanceMessageContainer(props) {
   if (!portalLocation) return element;
   return /*#__PURE__*/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,
@@ -5069,7 +4972,7 @@ function OverrideWrongDocumentTypeGuidanceDialog(_a) {
     buttonText: 'OK'
   });
   if (!state.allowOverrideWrongDocumentTypeGuidance) return null;
-  return /*#__PURE__*/React__default.createElement(Container$1, {
+  return /*#__PURE__*/React__default.createElement(Container$2, {
     className: classNames.container
   }, /*#__PURE__*/React__default.createElement(InnerContainer, {
     className: classNames.inner
@@ -5087,45 +4990,47 @@ function OverrideWrongDocumentTypeGuidanceDialog(_a) {
     }
   }, 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 = 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 = useContext(IdCaptureModelsContext),
     modelsReady = _u.ready,
     setThresholds = _u.setThresholds,
@@ -5237,17 +5142,16 @@ var IdCapture = function IdCapture(_a) {
     classNames: classNames.overrideWrongDocumentTypeGuidanceDialog,
     verbiage: rawVerbiage.overrideWrongDocumentTypeGuidanceDialog
   }))), debugMode && ( /*#__PURE__*/React__default.createElement(DebugBoundingBoxOverlay, {
-    "$flipX": !((_j = cameraRef.current) === null || _j === void 0 ? void 0 : _j.isRearFacing),
+    "$flipX": !isRearFacing,
     scaling: debugScalingDetails
   }, state.detectedObjects.map(function (obj, i) {
-    var _a;
     return /*#__PURE__*/React__default.createElement(IdCaptureDetectedObjectDebugBox, {
       key: i,
       obj: obj,
       scaling: debugScalingDetails,
-      flipX: !((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing)
+      flipX: !isRearFacing
     });
-  }))), debugMode && ( /*#__PURE__*/React__default.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__default.createElement("br", null), state.frameCaptureRate > 0.75 ? '✅' : '👎', " Frame Rate:", ' ', Math.round((state.frameCaptureRate + Number.EPSILON) * 1000) / 1000, ' ', "fps (", detectionTime, "ms doc detect, ", focusPredictionTime, "ms focus)", /*#__PURE__*/React__default.createElement("br", null), modelsReady ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, state.detectionThresholdMet ? '✅' : '❌', " Detected Document Type: ", state.detectedDocumentType, /*#__PURE__*/React__default.createElement("br", null), state.idCardFrontDetectionThresholdMet ? '✅' : '❌', " ID Card Front Score: ", state.idCardFrontDetectionScore.toFixed(3), /*#__PURE__*/React__default.createElement("br", null), state.idCardBackDetectionThresholdMet ? '✅' : '❌', " ID Card Back Score: ", state.idCardBackDetectionScore.toFixed(3), /*#__PURE__*/React__default.createElement("br", null), state.passportDetectionThresholdMet ? '✅' : '❌', " Passport Score: ", state.passportDetectionScore.toFixed(3), /*#__PURE__*/React__default.createElement("br", null), state.focusThresholdMet ? '✅' : '❌', " Focus Score:", ' ', state.focusScore.toFixed(3), /*#__PURE__*/React__default.createElement("br", null), state.documentInBounds ? '✅' : '❌', " Document In Bounds", /*#__PURE__*/React__default.createElement("br", null), state.documentIsStable ? '✅' : '❌', " Document Is Stable", /*#__PURE__*/React__default.createElement("br", null), state.goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', state.goodFramesCount, "/", state.goodFramesThreshold)) : ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\u274C Models not ready")))));
+  }))), debugMode && ( /*#__PURE__*/React__default.createElement(DebugStatsPane, null, camera ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\u2705 Camera: ", camera.label, " (", camera.width, "x", camera.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__default.createElement("br", null), state.frameCaptureRate > 0.75 ? '✅' : '👎', " Frame Rate:", ' ', Math.round((state.frameCaptureRate + Number.EPSILON) * 1000) / 1000, ' ', "fps (", detectionTime, "ms doc detect, ", focusPredictionTime, "ms focus)", /*#__PURE__*/React__default.createElement("br", null), modelsReady ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, state.detectionThresholdMet ? '✅' : '❌', " Detected Document Type: ", state.detectedDocumentType, /*#__PURE__*/React__default.createElement("br", null), state.idCardFrontDetectionThresholdMet ? '✅' : '❌', " ID Card Front Score: ", state.idCardFrontDetectionScore.toFixed(3), /*#__PURE__*/React__default.createElement("br", null), state.idCardBackDetectionThresholdMet ? '✅' : '❌', " ID Card Back Score: ", state.idCardBackDetectionScore.toFixed(3), /*#__PURE__*/React__default.createElement("br", null), state.passportDetectionThresholdMet ? '✅' : '❌', " Passport Score: ", state.passportDetectionScore.toFixed(3), /*#__PURE__*/React__default.createElement("br", null), state.focusThresholdMet ? '✅' : '❌', " Focus Score:", ' ', state.focusScore.toFixed(3), /*#__PURE__*/React__default.createElement("br", null), state.documentInBounds ? '✅' : '❌', " Document In Bounds", /*#__PURE__*/React__default.createElement("br", null), state.documentIsStable ? '✅' : '❌', " Document Is Stable", /*#__PURE__*/React__default.createElement("br", null), state.goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', state.goodFramesCount, "/", state.goodFramesThreshold)) : ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\u274C Models not ready")))));
 };
 var timeSince = function timeSince(t) {
   if (!t) return 0;
@@ -5264,7 +5168,9 @@ var CameraAccessDeniedOverlay = function CameraAccessDeniedOverlay(_a) {
     colors = _e === void 0 ? {} : _e,
     _f = _a.verbiage,
     rawVerbiage = _f === void 0 ? {} : _f;
-  var requestCameraAccess = 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',
@@ -5293,13 +5199,13 @@ var CameraAccessDeniedOverlay = function CameraAccessDeniedOverlay(_a) {
     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;
@@ -5343,10 +5249,10 @@ var ExitCaptureButton = function ExitCaptureButton(_a) {
     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;
@@ -5375,25 +5281,15 @@ function IdCaptureLoadingGraphicDesktop(_a) {
   var theme = 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__default.createElement("div", {
-    style: {
-      display: 'flex',
-      width: '100%',
-      height: '100%'
-    }
-  }, /*#__PURE__*/React__default.createElement("svg", {
+  return /*#__PURE__*/React__default.createElement(LoadingGraphicWrapper, null, /*#__PURE__*/React__default.createElement(LoadingGraphicSvg, {
     className: className,
     width: width,
     height: height,
+    "$frame": frame,
+    "$borderColor": accentColor,
     viewBox: "0 0 698 452",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    style: {
-      margin: 'auto',
-      transform: "scale(".concat(frame > 1 ? 1 : frame === 1 ? 1.25 : 0.75, ")"),
-      transition: 'transform 0.2s linear, border-width 0.2s linear',
-      border: "".concat(frame >= 5 ? 10 : 0, "px solid ").concat(accentColor)
-    }
+    xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/React__default.createElement("g", {
     filter: frame === 1 ? 'url(#filter0_f_91_884)' : undefined
   }, /*#__PURE__*/React__default.createElement("path", {
@@ -5621,12 +5517,9 @@ function IdCaptureLoadingGraphicMobile(_a) {
     viewBox: "0 0 428 747",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default.createElement("g", {
+  }, /*#__PURE__*/React__default.createElement(LoadingGraphicCardGroup, {
     id: "card",
-    style: {
-      transform: "translate(".concat(frame < 1 ? '-500px' : '0', ", 0)"),
-      transition: 'transform 0.3s linear'
-    }
+    "$offScreen": frame < 1
   }, /*#__PURE__*/React__default.createElement("path", {
     d: "M76.5001 181.274C76.5001 176.027 80.7534 171.774 86.0001 171.774L342 171.774C347.247 171.774 351.5 176.027 351.5 181.274L351.5 586C351.5 591.247 347.247 595.5 342 595.5L86.0001 595.5C80.7534 595.5 76.5001 591.247 76.5001 586L76.5001 181.274Z",
     fill: "#F3F3F3",
@@ -5809,13 +5702,10 @@ function IdCaptureLoadingGraphicMobile(_a) {
     strokeWidth: "5",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }))), /*#__PURE__*/React__default.createElement("g", {
+  }))), /*#__PURE__*/React__default.createElement(LoadingGraphicPhoneGroup, {
     id: "phone",
     clipPath: "url(#clip0_29_1778)",
-    style: {
-      transform: "translate(".concat(frame < 1 ? '40px' : '0', ", 0)"),
-      transition: 'transform 0.3s linear'
-    }
+    "$offScreen": frame < 1
   }, /*#__PURE__*/React__default.createElement("rect", {
     x: "154",
     y: "693",
@@ -5843,6 +5733,21 @@ function IdCaptureLoadingGraphicMobile(_a) {
     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,
@@ -5913,7 +5818,7 @@ var IdCaptureLoadingOverlayDefault = function IdCaptureLoadingOverlayDefault(_a)
   var _o = useContext(IdCaptureModelsContext),
     modelsReady = _o.ready,
     modelDownloadProgress = _o.modelDownloadProgress;
-  var _p = useContext(CameraStateContext),
+  var _p = useCameraStore(),
     cameraReady = _p.cameraReady,
     cameraAccessDenied = _p.cameraAccessDenied,
     iphoneContinuityCameraAvailable = _p.iphoneContinuityCameraAvailable,
@@ -6037,24 +5942,24 @@ var IdCaptureLoadingOverlayDefault = function IdCaptureLoadingOverlayDefault(_a)
     }
   }, 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';
@@ -6080,7 +5985,7 @@ var ProgressIndicator$1 = styled.span(templateObject_15$1 || (templateObject_15$
   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;
@@ -6089,10 +5994,10 @@ var ContinueButton$1 = styled(LoaderButton)(templateObject_18 || (templateObject
   var _a, _b, _c, _d, _e, _f;
   return ((_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.continueBtnBorder) ? "border: ".concat((_f = (_e = (_d = props.theme) === null || _d === void 0 ? void 0 : _d.idCapture) === null || _e === void 0 ? void 0 : _e.loadingOverlay) === null || _f === void 0 ? void 0 : _f.continueBtnBorder, ";") : '';
 });
-var templateObject_1$x, templateObject_2$s, templateObject_3$k, templateObject_4$e, templateObject_5$9, templateObject_6$7, templateObject_7$4, templateObject_8$2, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16, templateObject_17, templateObject_18;
+var templateObject_1$y, templateObject_2$t, templateObject_3$l, templateObject_4$f, templateObject_5$a, templateObject_6$8, templateObject_7$5, templateObject_8$2, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16, templateObject_17, templateObject_18;
-var ContinuityCameraCheckboxContainer = styled.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,
@@ -6111,7 +6016,14 @@ var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
   var _l = useContext(IdCaptureModelsContext),
     modelsReady = _l.ready,
     modelDownloadProgress = _l.modelDownloadProgress;
-  var _m = 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,
@@ -6203,7 +6115,7 @@ var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
     }
   }, cameraReady && modelsReady ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? verbiage.modelsWarmingUpText : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)"))));
 };
-var templateObject_1$w, templateObject_2$r;
+var templateObject_1$x, templateObject_2$s;
 var components$1 = {
   "default": IdCaptureLoadingOverlayDefault,
@@ -6261,9 +6173,9 @@ var CapturedDocumentImg = function CapturedDocumentImg(_a) {
   });
 };
-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,
@@ -6338,13 +6250,13 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
     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;
@@ -6396,10 +6308,10 @@ function resetCanvasDimensions(canvas) {
   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;' : '';
@@ -6541,16 +6453,16 @@ function IdCardBorderSvg(_a) {
     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: {
@@ -6656,12 +6568,82 @@ function getOrientation(allowPortraitOnMobile) {
   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 = useState(1),
+    transitionTime = _d[0],
+    setTransitionTime = _d[1];
+  var _e = 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)');
+  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__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(FlipImageContainer, {
+    className: classNames.frontImageContainer,
+    status: "disabled",
+    borderWidth: borderWidth,
+    borderColor: borderColor,
+    borderRadius: borderRadius,
+    "$transforms": frontTransforms.join(' '),
+    "$transitionTime": transitionTime,
+    "$isVisible": true
+  }, /*#__PURE__*/React__default.createElement(IdCardGuideImage, {
+    src: idCaptureGuideImages.landscape.SHOW_ID_FRONT.url,
+    className: classNames.frontImage,
+    alt: "",
+    style: imageStyle
+  })), /*#__PURE__*/React__default.createElement(FlipImageContainer, {
+    className: classNames.backImageContainer,
+    status: "disabled",
+    borderWidth: borderWidth,
+    borderColor: borderColor,
+    borderRadius: borderRadius,
+    "$transforms": backTransforms.join(' '),
+    "$transitionTime": transitionTime,
+    "$isVisible": true
+  }, /*#__PURE__*/React__default.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__*/createContext({
   orientation: 'landscape',
@@ -6950,10 +6932,10 @@ var regionClsx = function regionClsx(classNames, which) {
     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) {
@@ -6964,13 +6946,13 @@ var GuideRegion = styled.div(templateObject_4$b || (templateObject_4$b = __makeT
 }, 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) {
@@ -6978,7 +6960,7 @@ var GuideCenterBorder = styled.div(templateObject_7$3 || (templateObject_7$3 = _
 });
 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;
@@ -7121,36 +7103,37 @@ var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
     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 = useContext(CameraStateContext).cameraRef;
+  var isRearFacing = useCameraStore(function (state) {
+    return state.isRearFacing;
+  });
   var verbiage = useTranslations(rawVerbiage, {
     instructionText: 'Scan the front of ID',
     capturingText: 'Capturing...',
@@ -7162,7 +7145,7 @@ function IdCaptureGuides(_a) {
     status: status,
     progress: progress,
     instruction: state.captureFailed ? verbiage.captureFailedText : state.capturing ? verbiage === null || verbiage === void 0 ? void 0 : verbiage.capturingText : verbiage.instructionText,
-    isMirrored: !((_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing),
+    isMirrored: !isRearFacing,
     borderColor: state.isGoodFrame ? colors.guideBoxSatisfiedColor : colors.guideBoxUnsatisfiedColor,
     imageVisible: requestedAction === 'FLIP_ID' || !state.idCardFrontDetectionThresholdMet || !state.documentInBounds || state.documentTooClose
   })), guideType === 'fit' && ( /*#__PURE__*/React__default.createElement(IdCaptureFitGuide, {
@@ -7172,7 +7155,7 @@ function IdCaptureGuides(_a) {
     status: status,
     progress: progress,
     instruction: state.captureFailed ? verbiage.captureFailedText : state.capturing ? verbiage === null || verbiage === void 0 ? void 0 : verbiage.capturingText : verbiage.instructionText,
-    isMirrored: !((_c = cameraRef.current) === null || _c === void 0 ? void 0 : _c.isRearFacing),
+    isMirrored: !isRearFacing,
     isBackToFront: isBackToFront,
     portraitGuidesOnMobile: portraitGuidesOnMobile,
     borderColor: state.isGoodFrame ? colors.guideBoxSatisfiedColor : colors.guideBoxUnsatisfiedColor,
@@ -7265,53 +7248,11 @@ var SelfieProgressPreview = function SelfieProgressPreview(_a) {
     onError: onError
   })));
 };
-var StyledSpinner = styled(Spinner)(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  position: relative;\n  top: 4px;\n  left: -3px;\n  margin: 0 3px 0 -12px;\n"], ["\n  position: relative;\n  top: 4px;\n  left: -3px;\n  margin: 0 3px 0 -12px;\n"])));
-var ImagePreviewWrapper = styled.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 = useContext(CameraStateContext),
-    videoRef = _c.videoRef,
-    setVideoLoaded = _c.setVideoLoaded,
-    onVideoUnmounted = _c.onVideoUnmounted,
-    cameraRef = _c.cameraRef;
-  useEffect(function notifyCameraProviderOfUnmount() {
-    var videoElement = videoRef.current;
-    if (!videoElement) return;
-    return function () {
-      onVideoUnmounted(videoElement);
-    };
-  }, [onVideoUnmounted, videoRef]);
-  useEffect(function setVideoLoadedToFalseOnMount() {
-    setVideoLoaded(false);
-  }, [setVideoLoaded]);
-  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 = useCallback(function () {
-    setVideoLoaded(true);
-  }, [setVideoLoaded]);
-  return /*#__PURE__*/React__default.createElement(FullscreenVideoTag, {
-    className: className,
-    autoPlay: true,
-    playsInline: true,
-    muted: true,
-    ref: videoRef,
-    onLoadedData: onLoadedData,
-    "$isRearFacing": (_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing
-  });
-};
-var FullscreenVideoTag = styled.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)(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: [],
@@ -7431,8 +7372,8 @@ var DocumentCaptureStateProvider = function DocumentCaptureStateProvider(_a) {
   var _c = useReducer(documentCaptureStateReducer, documentCaptureInitialState),
     state = _c[0],
     dispatch = _c[1];
-  var _d = useContext(CameraStateContext),
-    cameraRef = _d.cameraRef,
+  var _d = useCameraStore(),
+    videoStream = _d.videoStream,
     videoRef = _d.videoRef;
   var uploadDocument = useContext(SubmissionContext).uploadDocument;
   var uploadCapturedDocument = useCallback(function (content, filetype) {
@@ -7523,8 +7464,7 @@ var DocumentCaptureStateProvider = function DocumentCaptureStateProvider(_a) {
   }, [onResize]);
   var videoTag = videoRef.current;
   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);
@@ -7537,7 +7477,7 @@ var DocumentCaptureStateProvider = function DocumentCaptureStateProvider(_a) {
       });
     }
     if (typeof ImageCapture !== 'undefined') {
-      var tracks = cameraRef.current.stream.getTracks();
+      var tracks = videoStream.getTracks();
       var videoCameraTrack = tracks.find(function (track) {
         return track.kind === 'video';
       });
@@ -7552,7 +7492,7 @@ var DocumentCaptureStateProvider = function DocumentCaptureStateProvider(_a) {
       drawToCanvas(canvas, videoTag);
       canvas.toBlob(onComplete);
     }
-  }, [cameraRef, state.capturing, videoTag]);
+  }, [state.capturing, videoStream, videoTag]);
   var stateWithActions = useMemo(function () {
     return _assign(_assign({}, state), {
       uploadCapturedDocument: uploadCapturedDocument
@@ -7667,52 +7607,85 @@ var DocumentCaptureGuideOverlay = function DocumentCaptureGuideOverlay(_a) {
     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;
+  useEffect(function attachCameraStreamToVideoTagWhenReady() {
+    if (videoRef.current && videoStream) {
+      debug('attaching camera stream to video tag');
+      videoRef.current.srcObject = videoStream;
+    }
+  }, [videoStream, videoRef]);
+  return /*#__PURE__*/React__default.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 = useContext(CameraStateContext),
-    cameraRef = _p.cameraRef,
-    cameraReady = _p.cameraReady,
-    cameraAccessDenied = _p.cameraAccessDenied,
-    requestCameraAccess = _p.requestCameraAccess;
-  var _q = 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 = useState(false),
+    cameraAccessRequested = _o[0],
+    setCameraAccessRequested = _o[1];
   var cameraAccessNeeded =
   // we should force the browser to ask for camera access if...
   uploadState === 'not_started' &&
@@ -7721,14 +7694,14 @@ var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
   // and the user hasn't passed a media blob for the current document...
   !cameraAccessRequested &&
   // and we haven't already tried to force a camera request...
-  !((_d = (_c = cameraRef.current) === null || _c === void 0 ? void 0 : _c.stream) === null || _d === void 0 ? void 0 : _d.active); // and we don't already have camera access.
+  !(videoStream === null || videoStream === void 0 ? void 0 : videoStream.active); // and we don't already have camera access.
   useEffect(function requestCameraAccessIfNeeded() {
     if (!cameraAccessNeeded) return;
     setCameraAccessRequested(true);
     requestCameraAccess();
   }, [cameraAccessNeeded, requestCameraAccess]);
   var theme = 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...',
@@ -7761,7 +7734,7 @@ var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
     });
   }
   return /*#__PURE__*/React__default.createElement(PageContainer, {
-    className: "flex ".concat((_h = classNames.container) !== null && _h !== void 0 ? _h : '')
+    className: "flex ".concat((_f = classNames.container) !== null && _f !== void 0 ? _f : '')
   }, /*#__PURE__*/React__default.createElement(CameraFeedWrapper, {
     className: classNames.cameraFeedWrapper,
     "$mode": cameraFeedMode !== null && cameraFeedMode !== void 0 ? cameraFeedMode : 'snapToGuides',
@@ -7826,21 +7799,21 @@ var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
     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,
@@ -8109,13 +8082,13 @@ var IdCaptureFallback = function IdCaptureFallback(_a) {
     }
   }, 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 = useContext(IdCaptureStateContext),
@@ -8186,7 +8159,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
   var _3 = useIdCaptureState(),
     state = _3[0],
     dispatch = _3[1];
-  var _4 = useContext(CameraStateContext),
+  var _4 = useCameraStore(),
     cameraAccessDenied = _4.cameraAccessDenied,
     requestCameraAccess = _4.requestCameraAccess,
     releaseCameraAccess = _4.releaseCameraAccess;
@@ -8801,7 +8774,7 @@ var HeadGuideSvg = /*#__PURE__*/forwardRef(function (_a, ref) {
   }))));
 });
 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,
@@ -8851,8 +8824,8 @@ function HeadGuide(_a) {
     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) {
@@ -9079,10 +9052,10 @@ function SelfieCaptureAnimatedMaskWithStatus(_a) {
     status: status
   }));
 }
-var templateObject_1$j, templateObject_2$h, templateObject_3$d;
+var templateObject_1$k, templateObject_2$i, templateObject_3$e;
-var FaceCaptureGuideContainer = styled.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,
@@ -9104,7 +9077,7 @@ var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
     verticalAlign: "center"
   })));
 };
-var templateObject_1$i, templateObject_2$g;
+var templateObject_1$j, templateObject_2$h;
 var SelfieGuidanceModelsContext = /*#__PURE__*/createContext({
   start: function start() {
@@ -9134,7 +9107,13 @@ function SelfieGuidanceModelsProvider(_a) {
     modelLoadTimeoutMs = _c === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _c,
     _d = _a.requireVerticalFaceCentering,
     requireVerticalFaceCentering = _d === void 0 ? true : _d;
-  var _e = 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;
@@ -9142,7 +9121,8 @@ function SelfieGuidanceModelsProvider(_a) {
   var onPredictionHandler = useRef();
   var _f = useLoadFaceDetector({
       onModelError: onModelError,
-      modelLoadTimeoutMs: modelLoadTimeoutMs
+      modelLoadTimeoutMs: modelLoadTimeoutMs,
+      videoRef: videoRef
     }),
     ready = _f.ready,
     modelDownloadProgress = _f.modelDownloadProgress,
@@ -9408,12 +9388,12 @@ var SelfieCaptureFallback = function SelfieCaptureFallback(_a) {
     }
   }, !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,
@@ -9475,8 +9455,14 @@ var SelfieCapture = function SelfieCapture(_a) {
     prediction = _t.prediction,
     dispatch = _s[1];
   var lastPredictionCanvas = useRef(null);
-  var _u = 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 = useContext(SelfieGuidanceModelsContext),
     onPredictionMade = _v.onPredictionMade,
@@ -9566,7 +9552,7 @@ var SelfieCapture = function SelfieCapture(_a) {
     face: prediction.face,
     scaling: debugScalingDetails,
     color: satisfied ? 'green' : 'red'
-  }))), debugMode && ( /*#__PURE__*/React__default.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceNotCentered) ? '✅' : '❌', " Face Centered", /*#__PURE__*/React__default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceTooClose) && !(prediction === null || prediction === void 0 ? void 0 : prediction.faceTooFar) ? '✅' : '❌', ' ', "Face", ' ', (prediction === null || prediction === void 0 ? void 0 : prediction.faceTooClose) ? 'Too Close' : (prediction === null || prediction === void 0 ? void 0 : prediction.faceTooFar) ? 'Too Far' : 'Distance Correct', /*#__PURE__*/React__default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceLookingAway) ? '✅' : '❌', " Face Looking Forward", /*#__PURE__*/React__default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceIsStable) ? '✅' : '❌', " Face Is Stable", /*#__PURE__*/React__default.createElement("br", null), !timedOut ? '✅' : '❌', " Time Remaining:", ' ', Math.max(0, timeoutDurationMs - (new Date().getTime() - (timeoutStartedAt !== null && timeoutStartedAt !== void 0 ? timeoutStartedAt : new Date()).getTime())), "ms")), /*#__PURE__*/React__default.createElement(ExitCaptureButton, {
+  }))), debugMode && ( /*#__PURE__*/React__default.createElement(DebugStatsPane, null, camera ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\u2705 Camera: ", camera.label, " (", camera.width, "x", camera.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceNotCentered) ? '✅' : '❌', " Face Centered", /*#__PURE__*/React__default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceTooClose) && !(prediction === null || prediction === void 0 ? void 0 : prediction.faceTooFar) ? '✅' : '❌', ' ', "Face", ' ', (prediction === null || prediction === void 0 ? void 0 : prediction.faceTooClose) ? 'Too Close' : (prediction === null || prediction === void 0 ? void 0 : prediction.faceTooFar) ? 'Too Far' : 'Distance Correct', /*#__PURE__*/React__default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceLookingAway) ? '✅' : '❌', " Face Looking Forward", /*#__PURE__*/React__default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceIsStable) ? '✅' : '❌', " Face Is Stable", /*#__PURE__*/React__default.createElement("br", null), !timedOut ? '✅' : '❌', " Time Remaining:", ' ', Math.max(0, timeoutDurationMs - (new Date().getTime() - (timeoutStartedAt !== null && timeoutStartedAt !== void 0 ? timeoutStartedAt : new Date()).getTime())), "ms")), /*#__PURE__*/React__default.createElement(ExitCaptureButton, {
     onClick: onExit,
     className: classNames.exitCaptureBtn
   }));
@@ -9957,9 +9943,9 @@ var FaceLivenessSuccess = function FaceLivenessSuccess(_a) {
     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,
@@ -10008,9 +9994,9 @@ var FaceLivenessFailure = function FaceLivenessFailure(_a) {
     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;
@@ -10022,7 +10008,9 @@ var MicrophoneAccessDeniedOverlay = function MicrophoneAccessDeniedOverlay(_a) {
     colors = _e === void 0 ? {} : _e,
     _f = _a.verbiage,
     rawVerbiage = _f === void 0 ? {} : _f;
-  var requestMicrophoneAccess = 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',
@@ -10051,11 +10039,11 @@ var MicrophoneAccessDeniedOverlay = function MicrophoneAccessDeniedOverlay(_a) {
     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,
@@ -10070,7 +10058,13 @@ var SelfieCaptureLoadingOverlayLegacy = function SelfieCaptureLoadingOverlayLega
     colors = _e === void 0 ? {} : _e,
     _f = _a.verbiage,
     rawVerbiage = _f === void 0 ? {} : _f;
-  var _g = 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;
@@ -10138,9 +10132,9 @@ var SelfieCaptureLoadingOverlayLegacy = function SelfieCaptureLoadingOverlayLega
     }
   }, cameraReady && allModelsReady ? verbiage.continueText : allModelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? "".concat(verbiage.modelsWarmingUpText) : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)")))));
 };
-var StyledGuidanceMessage$1 = styled(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) {
@@ -10157,7 +10151,13 @@ var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDef
     colors = _e === void 0 ? {} : _e,
     _f = _a.verbiage,
     rawVerbiage = _f === void 0 ? {} : _f;
-  var _g = 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;
@@ -10265,30 +10265,30 @@ var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDef
     }
   }, 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) {
@@ -10314,7 +10314,7 @@ var ContinueButton = styled(LoaderButton)(templateObject_15 || (templateObject_1
   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,
@@ -10374,7 +10374,13 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
     livenessCheckRequest = _t.livenessCheckRequest,
     setSelfieImage = _t.setSelfieImage,
     logSelfieCaptureAttempt = _t.logSelfieCaptureAttempt;
-  var _u = 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;
@@ -10643,7 +10649,7 @@ var AdditionalDocumentCapture = function AdditionalDocumentCapture(_a) {
   }
   return /*#__PURE__*/React__default.createElement(OverlayContainer, {
     className: classNames.container
-  }, /*#__PURE__*/React__default.createElement(Inner$1, {
+  }, /*#__PURE__*/React__default.createElement(Inner$2, {
     className: classNames.inner
   }, /*#__PURE__*/React__default.createElement(Heading$4, {
     className: classNames.heading
@@ -10673,11 +10679,11 @@ var AdditionalDocumentCapture = function AdditionalDocumentCapture(_a) {
     }
   }, 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,
@@ -10821,7 +10827,7 @@ function convertSVGtoImg(svgData_1) {
   });
 }
-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) {
@@ -10831,8 +10837,8 @@ var SignaturePaperBacking = styled.div(templateObject_1$a || (templateObject_1$a
   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) {
@@ -10842,8 +10848,8 @@ var SignaturePad = styled.div(templateObject_3$8 || (templateObject_3$8 = __make
   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;
@@ -10914,8 +10920,8 @@ var SignatureCapture = function SignatureCapture(_a) {
     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) {
@@ -11095,10 +11101,10 @@ function VideoSignatureContextProvider(_a) {
     setSignatureVideoUrl = _e[1];
   var signatureRecorder = useRef(null);
   var recordedChunks = useRef([]);
-  var _f = 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,
@@ -11166,8 +11172,8 @@ function VideoSignatureContextProvider(_a) {
   var animationFrame = useRef(0);
   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;
@@ -11200,7 +11206,7 @@ function VideoSignatureContextProvider(_a) {
     return function () {
       cancelAnimationFrame(animationFrame.current);
     };
-  }, [cameraRef, isRecording, isRecordingVideo, videoRef]);
+  }, [camera, isRecording, isRecordingVideo, videoRef]);
   var onAcceptClicked = useCallback(function () {
     return __awaiter(_this, void 0, void 0, function () {
       var imageUrl;
@@ -11275,11 +11281,11 @@ function VideoSignatureGuides(_a) {
       className: classNames.signatureCanvas
     };
   }, [classNames.signatureCanvas, height, width]);
-  return /*#__PURE__*/React__default.createElement(Container, {
+  return /*#__PURE__*/React__default.createElement(Container$1, {
     className: classNames.container
-  }, /*#__PURE__*/React__default.createElement(Inner, {
+  }, /*#__PURE__*/React__default.createElement(Inner$1, {
     className: classNames.inner
-  }, /*#__PURE__*/React__default.createElement(FaceGuideContainer, {
+  }, /*#__PURE__*/React__default.createElement(FaceGuideContainer$1, {
     className: classNames.faceGuideContainer
   }, /*#__PURE__*/React__default.createElement(StyledSelfieCaptureAnimatedMask, {
     className: classNames.faceGuide,
@@ -11314,42 +11320,44 @@ function VideoSignatureGuides(_a) {
     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 = 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 = 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;
   useEffect(function () {
     startRecording();
     return function () {
@@ -11366,9 +11374,9 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
       onVideoCaptured === null || onVideoCaptured === void 0 ? void 0 : onVideoCaptured(signatureVideoData, signatureData, signatureDataUrl);
     }
   }, [onVideoCaptured, signatureData, signatureDataUrl, signatureVideoData]);
-  var _k = useState(0),
-    numFramesWithoutFaces = _k[0],
-    setNumFramesWithoutFaces = _k[1];
+  var _h = useState(0),
+    numFramesWithoutFaces = _h[0],
+    setNumFramesWithoutFaces = _h[1];
   useEffect(function () {
     onPredictionMade(function (_a) {
       var face = _a.face;
@@ -11395,7 +11403,7 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
   }, verbiage.guidanceMessageText))), /*#__PURE__*/React__default.createElement(GuidesComponent, {
     classNames: classNames.videoSignatureGuidesClassNames,
     status: "success"
-  }), debugMode && ( /*#__PURE__*/React__default.createElement(DebugStatsPane, null, "Video: ", (_c = cameraRef.current) === null || _c === void 0 ? void 0 : _c.width, "x", (_d = cameraRef.current) === null || _d === void 0 ? void 0 : _d.height)), /*#__PURE__*/React__default.createElement(ExitCaptureButton, {
+  }), debugMode && ( /*#__PURE__*/React__default.createElement(DebugStatsPane, null, "Video: ", camera === null || camera === void 0 ? void 0 : camera.width, "x", camera === null || camera === void 0 ? void 0 : camera.height)), /*#__PURE__*/React__default.createElement(ExitCaptureButton, {
     onClick: onExit,
     className: classNames.exitCaptureBtn
   }));
@@ -11454,8 +11462,8 @@ var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
     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;
@@ -11489,7 +11497,13 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
     setSignatureData = _l.setSignatureData,
     setSignatureVideoUrl = _l.setSignatureVideoUrl,
     logSelfieCaptureAttempt = _l.logSelfieCaptureAttempt;
-  var _m = 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;
@@ -11648,6 +11662,129 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
   }()));
 };
+var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+  var _z = _a.requestedAction,
+    requestedAction = _z === void 0 ? 'SHOW_ID_FRONT' : _z,
+    _0 = _a.satisfied,
+    satisfied = _0 === void 0 ? false : _0,
+    _1 = _a.faceGuideStatus,
+    faceGuideStatus = _1 === void 0 ? 'success' : _1,
+    faceGuideBorderWidth = _a.faceGuideBorderWidth,
+    faceGuideBorderColor = _a.faceGuideBorderColor,
+    _2 = _a.idCardGuideStatus,
+    idCardGuideStatus = _2 === void 0 ? 'ready' : _2,
+    idCardGuideBorderWidth = _a.idCardGuideBorderWidth,
+    idCardGuideBorderColor = _a.idCardGuideBorderColor,
+    idCardCaptureProgress = _a.idCardCaptureProgress,
+    _3 = _a.idCardCaptureGuideImages,
+    userSuppliedImages = _3 === void 0 ? defaultIdCaptureGuideImages : _3,
+    _4 = _a.classNames,
+    classNames = _4 === void 0 ? {} : _4,
+    _5 = _a.verbiage,
+    rawVerbiage = _5 === void 0 ? {} : _5;
+  var isRearFacing = useCameraStore(function (state) {
+    return state.isRearFacing;
+  });
+  var verbiage = useTranslations(rawVerbiage, {
+    idFrontInstructionText: 'Display the front of your ID card...',
+    idBackInstructionText: 'Display the back of your ID card...',
+    flipIdInstructionText: 'Please flip your ID card...',
+    verifyLivenessInstructionText: 'Performing facial recognition, please hold still...'
+  });
+  var instructionText = requestedAction === 'VERIFY_LIVENESS' ? verbiage.verifyLivenessInstructionText : requestedAction === 'SHOW_ID_FRONT' ? verbiage.idFrontInstructionText : requestedAction === 'FLIP_ID' ? verbiage.flipIdInstructionText : verbiage.idBackInstructionText;
+  var theme = 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 = useState(undefined),
+    aspectRatio = _9[0],
+    setAspectRatio = _9[1];
+  var onImageLoaded = 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 = 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__default.createElement(Container, {
+    className: classNames.container
+  }, /*#__PURE__*/React__default.createElement(Inner, null, /*#__PURE__*/React__default.createElement(FaceGuideContainer, {
+    className: classNames.faceGuideContainer
+  }, /*#__PURE__*/React__default.createElement(SelfieCaptureAnimatedMaskWithStatus, {
+    className: classNames.faceGuide,
+    status: requestedAction === 'VERIFY_LIVENESS' ? faceGuideStatus : 'success',
+    borderWidth: faceGuideBorderWidth,
+    borderColor: faceGuideBorderColor,
+    verticalAlign: "bottom"
+  })), !disableIdGuides && ( /*#__PURE__*/React__default.createElement(IdCardGuideContainer, {
+    className: classNames.idCardGuideContainer,
+    ref: idCardGuideRef
+  }, /*#__PURE__*/React__default.createElement(IdCardGuideInner, {
+    className: classNames.idCardGuideInner,
+    style: {
+      aspectRatio: aspectRatio
+    }
+  }, /*#__PURE__*/React__default.createElement(IdCardGuideImageContainer, {
+    className: classNames.idCardGuideImageContainer,
+    status: requestedAction === 'VERIFY_LIVENESS' ? 'disabled' : idCardGuideStatus,
+    borderWidth: idCardGuideBorderWidth,
+    borderColor: idCardGuideBorderColor,
+    aspectRatio: aspectRatio,
+    "$isVisible": requestedAction !== 'FLIP_ID',
+    progress: requestedAction === 'VERIFY_LIVENESS' ? undefined : idCardCaptureProgress
+  }, /*#__PURE__*/React__default.createElement(IdCardGuideImage, {
+    alt: "",
+    className: classNames.idCardGuideImage,
+    "$isMirrored": !isRearFacing,
+    style: idCardImageStyle,
+    src: requestedAction === 'SHOW_ID_BACK' ? idCaptureGuideImages.landscape.SHOW_ID_BACK.url : idCaptureGuideImages.landscape.SHOW_ID_FRONT.url,
+    onLoad: onImageLoaded
+  })), requestedAction === 'FLIP_ID' && ( /*#__PURE__*/React__default.createElement(IdVideoCaptureFlipIdPrompt, {
+    idCaptureGuideImages: idCaptureGuideImages,
+    classNames: classNames.flipIdPrompt,
+    borderWidth: idCardGuideBorderWidth,
+    borderColor: idCardGuideBorderColor,
+    imageStyle: idCardImageStyle
+  }))), /*#__PURE__*/React__default.createElement(IdCardGuideInstructionsContainer, {
+    className: classNames.idCardGuideInstructionsContainer
+  }, /*#__PURE__*/React__default.createElement(IdCardGuideInstructions, {
+    className: classNames.idCardGuideInstructions,
+    "$textColor": (_w = (_v = theme.idVideoCapture) === null || _v === void 0 ? void 0 : _v.idCardGuides) === null || _w === void 0 ? void 0 : _w.instructionsTextColor,
+    "$background": (_y = (_x = theme.idVideoCapture) === null || _x === void 0 ? void 0 : _x.idCardGuides) === null || _y === void 0 ? void 0 : _y.instructionsBackgroundColor
+  }, instructionText))))));
+};
+var Container = styled.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,
@@ -11778,18 +11915,18 @@ var defaultVideoIdCaptureThresholds = {
   flipShortcutThreshold: 0.7
 };
 var IdVideoCapture = function IdVideoCapture(_a) {
-  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
   var onComplete = _a.onComplete,
     onIdFrontImageCaptured = _a.onIdFrontImageCaptured,
     onIdBackImageCaptured = _a.onIdBackImageCaptured,
     onFaceNotDetected = _a.onFaceNotDetected,
     onRecordingFailed = _a.onRecordingFailed,
     onExitCapture = _a.onExitCapture,
-    _x = _a.idCaptureModelsEnabled,
-    idCaptureModelsEnabled = _x === void 0 ? true : _x,
-    // idCardCaptureGuideImages = defaultIdCaptureGuideImages,
+    _w = _a.idCaptureModelsEnabled,
+    idCaptureModelsEnabled = _w === void 0 ? true : _w,
+    _x = _a.idCardCaptureGuideImages,
+    idCardCaptureGuideImages = _x === void 0 ? defaultIdCaptureGuideImages : _x,
     _y = _a.idCardFrontDelay,
-    // idCardCaptureGuideImages = defaultIdCaptureGuideImages,
     idCardFrontDelay = _y === void 0 ? 1000 : _y,
     _z = _a.videoIdCaptureThresholds,
     videoIdCaptureThresholds = _z === void 0 ? defaultVideoIdCaptureThresholds : _z,
@@ -11810,67 +11947,68 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     mergeAVStreams = _6 === void 0 ? false : _6,
     _7 = _a.classNames,
     classNames = _7 === void 0 ? {} : _7,
-    // colors = {},
-    _8 = _a.verbiage,
-    // colors = {},
-    rawVerbiage = _8 === void 0 ? {} : _8,
-    _9 = _a.debugMode,
-    debugMode = _9 === void 0 ? false : _9;
-  var _10 = useResizeObserver(),
-    ref = _10.ref,
-    _11 = _10.width,
-    width = _11 === void 0 ? 1 : _11,
-    _12 = _10.height,
-    height = _12 === void 0 ? 1 : _12;
-  var _13 = 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 = useState([]),
-    detectedObjects = _14[0],
-    setDetectedObjects = _14[1];
-  var _15 = useState(null),
-    face = _15[0],
-    setFace = _15[1];
-  var _16 = 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 = useState(null),
-    videoStartsAt = _17[0],
-    setVideoStartsAt = _17[1];
-  var _18 = useContext(SubmissionContext),
-    setIdCaptureVideoAudioStartsAt = _18.setIdCaptureVideoAudioStartsAt,
-    setExpectedAudioText = _18.setExpectedAudioText;
-  var _19 = 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 = useState([]),
+    detectedObjects = _15[0],
+    setDetectedObjects = _15[1];
+  var _16 = useState(null),
+    face = _16[0],
+    setFace = _16[1];
+  var _17 = 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 = useState(null),
+    videoStartsAt = _18[0],
+    setVideoStartsAt = _18[1];
+  var _19 = useContext(SubmissionContext),
+    setIdCaptureVideoAudioStartsAt = _19.setIdCaptureVideoAudioStartsAt,
+    setExpectedAudioText = _19.setExpectedAudioText;
+  var _20 = 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 = useRef(undefined);
-  var _21 = useState(-1),
-    countdownRemaining = _21[0],
-    setCountdownRemaining = _21[1];
+  var _22 = useState(-1),
+    countdownRemaining = _22[0],
+    setCountdownRemaining = _22[1];
   useEffect(function () {
     if (!isRecordingVideo && !videoUrl) {
       startRecordingVideo();
@@ -11881,18 +12019,18 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     var needsAudio = !!readTextPrompt && !mergeAVStreams;
     var audioReady = !needsAudio || audioUrl;
     if (videoUrl && audioReady) {
-      setVideoLoaded(false);
+      releaseCameraAccess();
       onComplete === null || onComplete === void 0 ? void 0 : onComplete(videoUrl, audioUrl);
     }
-  }, [audioUrl, isRecordingVideo, mergeAVStreams, onComplete, readTextPrompt, setVideoLoaded, startRecordingVideo, videoUrl]);
+  }, [audioUrl, isRecordingVideo, mergeAVStreams, onComplete, readTextPrompt, releaseCameraAccess, startRecordingVideo, videoUrl]);
   useEffect(function () {
     if (videoRecordingUnintentionallyStopped || audioRecordingUnintentionallyStopped) {
       onRecordingFailed === null || onRecordingFailed === void 0 ? void 0 : onRecordingFailed();
     }
   }, [audioRecordingUnintentionallyStopped, onRecordingFailed, videoRecordingUnintentionallyStopped]);
-  var _22 = useState('SHOW_ID_FRONT'),
-    requestedAction = _22[0],
-    setRequestedAction = _22[1];
+  var _23 = useState('SHOW_ID_FRONT'),
+    requestedAction = _23[0],
+    setRequestedAction = _23[1];
   var shouldRunIdModels = idCaptureModelsEnabled && videoLoaded && cameraReady && idModelsReady && !idModelError && requestedAction !== 'READ_TEXT' && (!readTextPrompt || microphoneReady);
   useEffect(function startModelsWhenCapturing() {
     if (!shouldRunIdModels) return;
@@ -11912,18 +12050,18 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       bottom: 1
     });
   }, [setDocumentDetectionBoundaries]);
-  var _23 = useState(0),
-    currentDetectionScore = _23[0],
-    setCurrentDetectionScore = _23[1];
-  var _24 = useState('none'),
-    currentDetectedDocumentType = _24[0],
-    setCurrentDetectedDocumentType = _24[1];
-  var _25 = useState(0),
-    currentFocusScore = _25[0],
-    setCurrentFocusScore = _25[1];
+  var _24 = useState(0),
+    currentDetectionScore = _24[0],
+    setCurrentDetectionScore = _24[1];
+  var _25 = useState('none'),
+    currentDetectedDocumentType = _25[0],
+    setCurrentDetectedDocumentType = _25[1];
   var _26 = useState(0),
-    goodFramesCount = _26[0],
-    setGoodFramesCount = _26[1];
+    currentFocusScore = _26[0],
+    setCurrentFocusScore = _26[1];
+  var _27 = useState(0),
+    goodFramesCount = _27[0],
+    setGoodFramesCount = _27[1];
   var goodFramesThreshold = requestedAction === 'SHOW_ID_FRONT' ? videoIdCaptureThresholds.goodFrames.idCardFront : videoIdCaptureThresholds.goodFrames.idCardBack;
   var goodFramesThresholdMet = goodFramesCount >= goodFramesThreshold;
   useEffect(function () {
@@ -11944,9 +12082,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       } : 0);
     });
   }, [idCaptureModelsEnabled, onIdPredictionMade, idModelError, requestedAction, videoIdCaptureThresholds.flipShortcutThreshold]);
-  var _27 = useState(null),
-    idFrontCaptureStartedAt = _27[0],
-    setFirstGoodFrameTime = _27[1];
+  var _28 = useState(null),
+    idFrontCaptureStartedAt = _28[0],
+    setFirstGoodFrameTime = _28[1];
   useEffect(function () {
     if (goodFramesCount === 1) setFirstGoodFrameTime(new Date().getTime());
   }, [goodFramesCount]);
@@ -11967,9 +12105,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
   var frameHeight = (_e = (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) !== null && _e !== void 0 ? _e : 0;
   var faceBox = face === null || face === void 0 ? void 0 : face.box;
   var faceCentered = !faceBox || !frameWidth || faceBox.xMin > frameWidth * edgeBoundary && faceBox.yMin > frameHeight * edgeBoundary && faceBox.xMax < frameWidth * (1 - edgeBoundary) && faceBox.yMax < frameHeight * (1 - edgeBoundary);
-  var _28 = useState(),
-    countdownStartedAt = _28[0],
-    setCountdownStartedAt = _28[1];
+  var _29 = useState(),
+    countdownStartedAt = _29[0],
+    setCountdownStartedAt = _29[1];
   var photoCanvas = useRef(null);
   var frameLock = useRef(false);
   var captureFrame = useCallback(function () {
@@ -12092,9 +12230,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       stopSelfieGuidance();
     };
   }, [startSelfieGuidance, stopSelfieGuidance]);
-  var _29 = useState(0),
-    numFramesWithoutFaces = _29[0],
-    setNumFramesWithoutFaces = _29[1];
+  var _30 = useState(0),
+    numFramesWithoutFaces = _30[0],
+    setNumFramesWithoutFaces = _30[1];
   onSelfiePredictionMade(useThrottledCallback(useCallback(function (_a) {
     var face = _a.face;
     if (selfieModelError) return;
@@ -12110,12 +12248,12 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     }
   }, [disableFaceDetectionWhileAudioCapture, disableFaceDetectionWhileAudioCaptureMsDelay, numFramesWithoutFaces, onFaceNotDetected, timeoutStartedAt]);
   var theme = 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,
@@ -12140,16 +12278,25 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     classNames: classNames.readTextPrompt,
     verbiage: rawVerbiage.readTextPrompt,
     onComplete: stopRecording
-  })) : ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, debugMode && capturingId && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ObjectDetectionDebugOverlayDiv, {
-    "$flipX": !((_l = cameraRef.current) === null || _l === void 0 ? void 0 : _l.isRearFacing)
+  })) : ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IdVideoCaptureGuides, {
+    classNames: classNames.guides,
+    verbiage: rawVerbiage.guides,
+    requestedAction: requestedAction,
+    satisfied: satisfied,
+    idCardGuideStatus: countdownStartedAt ? 'capturing' : 'ready',
+    idCardCaptureProgress: !!countdownStartedAt ? 1 : 0,
+    idCardCaptureGuideImages: idCardCaptureGuideImages,
+    faceGuideBorderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor,
+    idCardGuideBorderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor
+  }), debugMode && capturingId && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ObjectDetectionDebugOverlayDiv, {
+    "$flipX": !isRearFacing
   }, detectedObjects.map(function (obj, i) {
-    var _a;
     return /*#__PURE__*/React__default.createElement(IdCaptureDetectedObjectDebugBox, {
       key: i,
       obj: obj,
       scaling: debugScalingDetails,
       color: "blue",
-      flipX: !((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing)
+      flipX: !isRearFacing
     });
   })), /*#__PURE__*/React__default.createElement(DebugBoundingBoxOverlay, null, face && ( /*#__PURE__*/React__default.createElement(SelfieCaptureFaceDebugBox, {
     face: face,
@@ -12158,9 +12305,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     className: classNames.guidanceMessageContainer
   }, /*#__PURE__*/React__default.createElement(GuidanceMessage, {
     className: classNames.guidanceMessage,
-    "$background": (_p = (_o = (_m = theme.guidanceMessages) === null || _m === void 0 ? void 0 : _m.negative) === null || _o === void 0 ? void 0 : _o.backgroundColor) !== null && _p !== void 0 ? _p : 'red',
-    "$textColor": (_s = (_r = (_q = theme.guidanceMessages) === null || _q === void 0 ? void 0 : _q.negative) === null || _r === void 0 ? void 0 : _r.textColor) !== null && _s !== void 0 ? _s : 'white'
-  }, guidanceText))), debugMode && ( /*#__PURE__*/React__default.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__default.createElement("br", null), isRecordingVideo ? '✅ Recording' : '❌ Not recording', /*#__PURE__*/React__default.createElement("br", null), goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', goodFramesCount, "/", goodFramesThreshold, /*#__PURE__*/React__default.createElement("br", null), "Document Type: ", currentDetectedDocumentType, /*#__PURE__*/React__default.createElement("br", null), "Detection Score: ", currentDetectionScore, /*#__PURE__*/React__default.createElement("br", null), "Focus Score: ", currentFocusScore, /*#__PURE__*/React__default.createElement("br", null), "Best Frame Detection Score:", ' ', (_u = (_t = bestFrameDetails.current) === null || _t === void 0 ? void 0 : _t.detectionScore) !== null && _u !== void 0 ? _u : 0, /*#__PURE__*/React__default.createElement("br", null), "Best Frame Focus Score: ", (_w = (_v = bestFrameDetails.current) === null || _v === void 0 ? void 0 : _v.focusScore) !== null && _w !== void 0 ? _w : 0)), countdownRemaining > 0 && capturingId && ( /*#__PURE__*/React__default.createElement(CountdownContainer, {
+    "$background": (_o = (_m = (_l = theme.guidanceMessages) === null || _l === void 0 ? void 0 : _l.negative) === null || _m === void 0 ? void 0 : _m.backgroundColor) !== null && _o !== void 0 ? _o : 'red',
+    "$textColor": (_r = (_q = (_p = theme.guidanceMessages) === null || _p === void 0 ? void 0 : _p.negative) === null || _q === void 0 ? void 0 : _q.textColor) !== null && _r !== void 0 ? _r : 'white'
+  }, guidanceText))), debugMode && ( /*#__PURE__*/React__default.createElement(DebugStatsPane, null, camera ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\u2705 Camera: ", camera.label, " (", camera.width, "x", camera.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__default.createElement("br", null), isRecordingVideo ? '✅ Recording' : '❌ Not recording', /*#__PURE__*/React__default.createElement("br", null), goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', goodFramesCount, "/", goodFramesThreshold, /*#__PURE__*/React__default.createElement("br", null), "Document Type: ", currentDetectedDocumentType, /*#__PURE__*/React__default.createElement("br", null), "Detection Score: ", currentDetectionScore, /*#__PURE__*/React__default.createElement("br", null), "Focus Score: ", currentFocusScore, /*#__PURE__*/React__default.createElement("br", null), "Best Frame Detection Score:", ' ', (_t = (_s = bestFrameDetails.current) === null || _s === void 0 ? void 0 : _s.detectionScore) !== null && _t !== void 0 ? _t : 0, /*#__PURE__*/React__default.createElement("br", null), "Best Frame Focus Score: ", (_v = (_u = bestFrameDetails.current) === null || _u === void 0 ? void 0 : _u.focusScore) !== null && _v !== void 0 ? _v : 0)), countdownRemaining > 0 && capturingId && ( /*#__PURE__*/React__default.createElement(CountdownContainer, {
     className: classNames.countdownContainer
   }, /*#__PURE__*/React__default.createElement(Countdown, {
     className: classNames.countdown
@@ -12440,42 +12587,31 @@ var VideoIdWizard = function VideoIdWizard(_a) {
     onExitCapture === null || onExitCapture === void 0 ? void 0 : onExitCapture();
   }, [onExitCapture]);
   var faceLivenessGuides = 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__default.createElement(IdVideoCaptureGuides, {
+      idCardCaptureGuideImages: idCaptureGuideImages,
+      classNames: (_b = classNames.idVideoCapture) === null || _b === void 0 ? void 0 : _b.guides,
+      verbiage: (_c = verbiage.idVideoCapture) === null || _c === void 0 ? void 0 : _c.guides,
+      requestedAction: "VERIFY_LIVENESS",
+      faceGuideStatus: status,
+      faceGuideBorderColor: status === 'success' ? (_d = colors.idVideoCapture) === null || _d === void 0 ? void 0 : _d.guidesSatisfiedColor : (_e = colors.idVideoCapture) === null || _e === void 0 ? void 0 : _e.guidesUnsatisfiedColor,
+      idCardGuideStatus: "disabled"
+    });
+  }, [(_b = classNames.idVideoCapture) === null || _b === void 0 ? void 0 : _b.guides, (_c = colors.idVideoCapture) === null || _c === void 0 ? void 0 : _c.guidesSatisfiedColor, (_d = colors.idVideoCapture) === null || _d === void 0 ? void 0 : _d.guidesUnsatisfiedColor, idCaptureGuideImages, (_e = verbiage.idVideoCapture) === null || _e === void 0 ? void 0 : _e.guides]);
   if (submissionStatus === SubmissionStatus.SUBMITTING) {
     return /*#__PURE__*/React__default.createElement(PageContainer, {
       className: "flex"
     }, /*#__PURE__*/React__default.createElement(Spinner, null));
   }
-  return /*#__PURE__*/React__default.createElement(CameraProvider, {
-    key: "".concat(isCapturingId ? 'id' : 'selfie', "-camera-").concat(attempt),
-    preferContinuityCamera: isCapturingId,
+  return /*#__PURE__*/React__default.createElement(CameraStoreProvider, {
+    preferIphoneContinuityCamera: isCapturingId,
     preferFrontFacingCamera: !isCapturingId,
     requireMicrophoneAccess: !isCapturingId && !!readTextPrompt,
     maxVideoWidth: isCapturingId ? 1920 : 1280,
     maxFps: isCapturingId ? 60 : 30,
     onCameraAccessDenied: onCameraAccessDenied,
-    onMicrophoneAccessDenied: onMicrophoneAccessDenied,
-    debugMode: debugMode
+    onMicrophoneAccessDenied: onMicrophoneAccessDenied
   }, /*#__PURE__*/React__default.createElement(IdCaptureModelsProvider, {
     autoStart: false,
     documentDetectionModelUrl: (_g = (_f = idCaptureProps.assets) === null || _f === void 0 ? void 0 : _f.documentDetectionModelUrl) !== null && _g !== void 0 ? _g : '',
@@ -12601,17 +12737,15 @@ function CompositeWizard(_a) {
     _o = _a.captureSignatureVideo,
     captureSignatureVideo = _o === void 0 ? false : _o,
     onCameraAccessDenied = _a.onCameraAccessDenied,
-    onMicrophoneAccessDenied = _a.onMicrophoneAccessDenied,
-    _p = _a.debugMode,
-    debugMode = _p === void 0 ? false : _p;
-  var _q = useContext(SubmissionContext),
-    submit = _q.submit,
-    submissionStatus = _q.submissionStatus,
-    setSignatureData = _q.setSignatureData,
-    setAdditionalDocuments = _q.setAdditionalDocuments;
-  var _r = useState(0),
-    checkIndex = _r[0],
-    setCheckIndex = _r[1];
+    onMicrophoneAccessDenied = _a.onMicrophoneAccessDenied;
+  var _p = useContext(SubmissionContext),
+    submit = _p.submit,
+    submissionStatus = _p.submissionStatus,
+    setSignatureData = _p.setSignatureData,
+    setAdditionalDocuments = _p.setAdditionalDocuments;
+  var _q = useState(0),
+    checkIndex = _q[0],
+    setCheckIndex = _q[1];
   var checks = useMemo(function () {
     var _a, _b;
     var checks = __spreadArray([], userChecks, true);
@@ -12689,16 +12823,6 @@ function CompositeWizard(_a) {
       return i + 1;
     });
   }, [onVideoSignatureCompleteProp]);
-  var _s = useState(0),
-    videoSignatureAttempts = _s[0],
-    setVideoSignatureAttempts = _s[1];
-  var onVideoSignatureRetryProp = videoSignatureCaptureProps.onRetryClicked;
-  var onVideoSignatureRetry = 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 = useCallback(function (uploadedDocuments) {
     setAdditionalDocuments(uploadedDocuments);
@@ -12727,11 +12851,9 @@ function CompositeWizard(_a) {
   }
   switch (checks[checkIndex]) {
     case 'IdCapture':
-      return /*#__PURE__*/React__default.createElement(CameraProvider, {
-        key: "IdCaptureCamera",
+      return /*#__PURE__*/React__default.createElement(CameraStoreProvider, {
         onCameraAccessDenied: onCameraAccessDenied,
-        onMicrophoneAccessDenied: onMicrophoneAccessDenied,
-        debugMode: debugMode
+        onMicrophoneAccessDenied: onMicrophoneAccessDenied
       }, /*#__PURE__*/React__default.createElement(IdCaptureModelsProvider, {
         autoStart: false,
         documentDetectionModelUrl: (_d = (_c = idCaptureProps.assets) === null || _c === void 0 ? void 0 : _c.documentDetectionModelUrl) !== null && _d !== void 0 ? _d : '',
@@ -12748,13 +12870,11 @@ function CompositeWizard(_a) {
         onMicrophoneAccessDenied: onMicrophoneAccessDenied
       }));
     case 'FaceLiveness':
-      return /*#__PURE__*/React__default.createElement(CameraProvider, {
-        key: "FaceLivenessCamera",
+      return /*#__PURE__*/React__default.createElement(CameraStoreProvider, {
         preferFrontFacingCamera: true,
-        preferContinuityCamera: false,
+        preferIphoneContinuityCamera: false,
         onCameraAccessDenied: onCameraAccessDenied,
-        onMicrophoneAccessDenied: onMicrophoneAccessDenied,
-        debugMode: debugMode
+        onMicrophoneAccessDenied: onMicrophoneAccessDenied
       }, /*#__PURE__*/React__default.createElement(SelfieGuidanceModelsProvider, {
         autoStart: false,
         onModelError: faceLivenessProps.onModelError,
@@ -12767,15 +12887,13 @@ function CompositeWizard(_a) {
         onAccept: onSignatureCaptureSuccess
       }));
     case 'VideoSignatureCapture':
-      return /*#__PURE__*/React__default.createElement(CameraProvider, {
-        key: "SignatureKycCamera-".concat(videoSignatureAttempts),
-        preferContinuityCamera: false,
+      return /*#__PURE__*/React__default.createElement(CameraStoreProvider, {
+        preferIphoneContinuityCamera: false,
         preferFrontFacingCamera: true,
         maxVideoWidth: 1280,
         maxFps: 30,
         onCameraAccessDenied: onCameraAccessDenied,
-        onMicrophoneAccessDenied: onMicrophoneAccessDenied,
-        debugMode: debugMode
+        onMicrophoneAccessDenied: onMicrophoneAccessDenied
       }, /*#__PURE__*/React__default.createElement(SelfieGuidanceModelsProvider, {
         autoStart: false,
         throttleMs: 250,
@@ -12783,8 +12901,7 @@ function CompositeWizard(_a) {
         modelLoadTimeoutMs: videoSignatureCaptureProps.modelLoadTimeoutMs,
         requireVerticalFaceCentering: false
       }, /*#__PURE__*/React__default.createElement(VideoSignatureWizard, _assign({}, videoSignatureCaptureProps, {
-        onComplete: onVideoSignatureComplete,
-        onRetryClicked: onVideoSignatureRetry
+        onComplete: onVideoSignatureComplete
       }))));
     case 'AdditionalDocumentCapture':
       return /*#__PURE__*/React__default.createElement(AdditionalDocumentCaptureWizard, _assign({}, additionalDocumentCaptureProps, {
@@ -13235,8 +13352,7 @@ var IdValidation = function IdValidation(_a) {
     videoSignatureCaptureProps: videoSignatureCaptureProps,
     captureSignature: captureSignature,
     captureSignatureVideo: captureSignatureVideo,
-    onCameraAccessDenied: onCameraAccessDenied,
-    debugMode: debugMode
+    onCameraAccessDenied: onCameraAccessDenied
   }))));
 };
@@ -13342,8 +13458,7 @@ var FaceValidation = function FaceValidation(_a) {
       return ['FaceLiveness'];
     }, []),
     faceLivenessProps: faceLivenessProps,
-    onCameraAccessDenied: onCameraAccessDenied,
-    debugMode: debugMode
+    onCameraAccessDenied: onCameraAccessDenied
   }))));
 };
@@ -13576,8 +13691,7 @@ var IdAndFaceValidation = function IdAndFaceValidation(_a) {
     additionalDocumentCaptureProps: additionalDocumentCaptureProps,
     captureSignature: captureSignature,
     captureSignatureVideo: captureSignatureVideo,
-    onCameraAccessDenied: onCameraAccessDenied,
-    debugMode: debugMode
+    onCameraAccessDenied: onCameraAccessDenied
   }))));
 };
@@ -13832,8 +13946,7 @@ var CustomerIdAndBiometricsEnrollment = function CustomerIdAndBiometricsEnrollme
     videoSignatureCaptureProps: videoSignatureCaptureProps,
     captureSignature: captureSignature,
     captureSignatureVideo: captureSignatureVideo,
-    onCameraAccessDenied: onCameraAccessDenied,
-    debugMode: debugMode
+    onCameraAccessDenied: onCameraAccessDenied
   }))));
 };
@@ -14165,7 +14278,7 @@ var CustomerVerificationWizard = function CustomerVerificationWizard(_a) {
   var _l = useState('LOADING'),
     captureState = _l[0],
     setCaptureState = _l[1];
-  var _m = useContext(CameraStateContext),
+  var _m = useCameraStore(),
     cameraAccessDenied = _m.cameraAccessDenied,
     releaseCameraAccess = _m.releaseCameraAccess;
   var _o = useContext(SelfieGuidanceModelsContext),
@@ -14371,10 +14484,9 @@ var CustomerVerification = function CustomerVerification(_a) {
     onSubmit: onSubmit,
     geolocationEnabled: geolocationEnabled,
     geolocationRequired: geolocationRequired
-  }, /*#__PURE__*/React__default.createElement(CameraProvider, {
+  }, /*#__PURE__*/React__default.createElement(CameraStoreProvider, {
     preferFrontFacingCamera: true,
-    onCameraAccessDenied: onCameraAccessDenied,
-    debugMode: debugMode
+    onCameraAccessDenied: onCameraAccessDenied
   }, /*#__PURE__*/React__default.createElement(SelfieGuidanceModelsProvider, {
     autoStart: false,
     onModelError: onModelError,
@@ -14723,7 +14835,7 @@ var CustomerIdentificationWizard = function CustomerIdentificationWizard(_a) {
   var _l = useState('LOADING'),
     captureState = _l[0],
     setCaptureState = _l[1];
-  var _m = useContext(CameraStateContext),
+  var _m = useCameraStore(),
     cameraAccessDenied = _m.cameraAccessDenied,
     releaseCameraAccess = _m.releaseCameraAccess;
   var _o = useContext(SelfieGuidanceModelsContext),
@@ -14927,10 +15039,9 @@ var CustomerIdentification = function CustomerIdentification(_a) {
     onSubmit: onSubmit,
     geolocationEnabled: geolocationEnabled,
     geolocationRequired: geolocationRequired
-  }, /*#__PURE__*/React__default.createElement(CameraProvider, {
+  }, /*#__PURE__*/React__default.createElement(CameraStoreProvider, {
     preferFrontFacingCamera: true,
-    onCameraAccessDenied: onCameraAccessDenied,
-    debugMode: debugMode
+    onCameraAccessDenied: onCameraAccessDenied
   }, /*#__PURE__*/React__default.createElement(SelfieGuidanceModelsProvider, {
     autoStart: false,
     modelLoadTimeoutMs: modelLoadTimeoutMs,
@@ -15257,8 +15368,7 @@ var VideoIdValidation = function VideoIdValidation(_a) {
     captureSignature: captureSignature,
     captureSignatureVideo: captureSignatureVideo,
     onCameraAccessDenied: onCameraAccessDenied,
-    onMicrophoneAccessDenied: onMicrophoneAccessDenied,
-    debugMode: debugMode
+    onMicrophoneAccessDenied: onMicrophoneAccessDenied
   }))));
 };
@@ -15415,8 +15525,7 @@ var CustomerBiometricsEnrollment = function CustomerBiometricsEnrollment(_a) {
     videoSignatureCaptureProps: videoSignatureCaptureProps,
     captureSignature: captureSignature,
     captureSignatureVideo: captureSignatureVideo,
-    onCameraAccessDenied: onCameraAccessDenied,
-    debugMode: debugMode
+    onCameraAccessDenied: onCameraAccessDenied
   }))));
 };
@@ -15474,11 +15583,10 @@ var DocumentCapture = function DocumentCapture(_a) {
     onDocumentUploadFailed: onDocumentUploadFailed,
     geolocationEnabled: geolocationEnabled,
     geolocationRequired: geolocationRequired
-  }, /*#__PURE__*/React__default.createElement(CameraProvider, {
+  }, /*#__PURE__*/React__default.createElement(CameraStoreProvider, {
     requestAccessAutomatically: false,
-    preferContinuityCamera: true,
-    onCameraAccessDenied: onCameraAccessDenied,
-    debugMode: debugMode
+    preferIphoneContinuityCamera: true,
+    onCameraAccessDenied: onCameraAccessDenied
   }, /*#__PURE__*/React__default.createElement(DocumentCaptureWizard, {
     onSuccess: onComplete,
     onExitCapture: onExitCapture,