idmission-web-sdk 2.1.35 → 2.1.36

package/dist/components/id_capture/IdCapture.d.ts

@@ -5,6 +5,7 @@ import { IdCaptureImagePreviewClassNames } from '../common/SelfieProgressPreview
 import { CustomerSuppliedVerbiage } from '../../lib/locales';
 import { CapturedDocumentType } from './CapturedDocuments';
 import { IdCaptureFitGuideClassNames } from './IdCaptureFitGuide';
+import { OverrideWrongDocumentTypeGuidanceDialogClassNames, OverrideWrongDocumentTypeGuidanceDialogVerbiage } from './OverrideWrongDocumentTypeGuidanceDialog';
 export type IdCaptureAssets = {
     portraitGuidesImageUrl?: string;
     landscapeGuidesImageUrl?: string;
@@ -16,6 +17,7 @@ export type IdCaptureClassNames = {
     guidanceMessage?: string;
     imagePreview?: IdCaptureImagePreviewClassNames;
     exitCaptureBtn?: string;
+    overrideWrongDocumentTypeGuidanceDialog?: OverrideWrongDocumentTypeGuidanceDialogClassNames;
 };
 export type IdCaptureColors = {
     guideBoxUnsatisfiedColor?: string;
@@ -37,6 +39,7 @@ export type IdCaptureVerbiage = {
     guidanceNotCenteredText?: CustomerSuppliedVerbiage;
     guidanceTooCloseText?: CustomerSuppliedVerbiage;
     guidanceNotDetectedText?: CustomerSuppliedVerbiage;
+    overrideWrongDocumentTypeGuidanceDialog?: OverrideWrongDocumentTypeGuidanceDialogVerbiage;
 };
 export type IdCaptureProps = {
     requiredDocumentType?: CapturedDocumentType;

package/dist/components/id_capture/IdCaptureStateProvider.d.ts

@@ -29,8 +29,8 @@ export type IdCaptureState = {
     backDetectedFirst: boolean;
     enableOverrideWrongDocumentTypeDialog: boolean;
     allowOverrideWrongDocumentTypeAfterMs: number;
-    allowOverrideFlipRequirement: boolean;
-    overrideFlipRequirement: boolean;
+    allowOverrideWrongDocumentTypeGuidance: boolean;
+    overrideWrongDocumentTypeGuidance: boolean;
     wrongDocumentTypePredictions: number;
     idCardFrontDetectionScore: number;
     idCardFrontDetectionThresholdMet: boolean;

package/dist/components/id_capture/OverrideWrongDocumentTypeGuidanceDialog.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { CustomerSuppliedVerbiage } from '../../lib/locales';
+export type OverrideWrongDocumentTypeGuidanceDialogClassNames = {
+    container?: string;
+    inner?: string;
+    message?: string;
+    buttonContainer?: string;
+    button?: string;
+};
+export type OverrideWrongDocumentTypeGuidanceDialogVerbiage = {
+    messageText?: CustomerSuppliedVerbiage;
+    buttonText?: CustomerSuppliedVerbiage;
+};
+export type OverrideWrongDocumentTypeGuidanceDialogProps = {
+    classNames?: OverrideWrongDocumentTypeGuidanceDialogClassNames;
+    verbiage?: OverrideWrongDocumentTypeGuidanceDialogVerbiage;
+};
+export default function OverrideWrongDocumentTypeGuidanceDialog({ classNames, verbiage: rawVerbiage, }: OverrideWrongDocumentTypeGuidanceDialogProps): React.JSX.Element | null;

package/dist/lib/locales/es/translation.d.ts

@@ -99,5 +99,7 @@ declare const _default: {
     'Loading guided capture experience...': string;
     'Guided capture experience ready': string;
     "Let's Go!": string;
+    'We are having trouble identifying the correct side of your id, do you want to continue with capture anyway?': string;
+    OK: string;
 };
 export default _default;

package/dist/lib/locales/index.d.ts

@@ -107,6 +107,8 @@ export declare const resources: {
             'Loading guided capture experience...': string;
             'Guided capture experience ready': string;
             "Let's Go!": string;
+            'We are having trouble identifying the correct side of your id, do you want to continue with capture anyway?': string;
+            OK: string;
         };
     };
 };

package/dist/sdk2.cjs.development.js

@@ -234,7 +234,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var webSdkVersion = '2.1.35';
+var webSdkVersion = '2.1.36';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -391,7 +391,7 @@ function videoDataUrlToB64(url) {
   });
 }
 
-var PageContainerDiv = styled__default.default.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  ", "\n\n  ", "\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"], ["\n  ", "\n\n  ", "\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"])), function (props) {
+var PageContainerDiv = styled__default.default.div(templateObject_1$H || (templateObject_1$H = __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) {
@@ -431,22 +431,22 @@ var PageContainer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }, dimensionsCalculated && children);
 });
 PageContainer.displayName = 'PageContainer';
-var templateObject_1$G;
+var templateObject_1$H;
 
-var OverlayContainer = styled__default.default(PageContainer)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  background: ", ";\n  ", "\n  z-index: 10000;\n"], ["\n  background: ", ";\n  ", "\n  z-index: 10000;\n"])), function (props) {
+var OverlayContainer = styled__default.default(PageContainer)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  background: ", ";\n  ", "\n  z-index: 10000;\n"], ["\n  background: ", ";\n  ", "\n  z-index: 10000;\n"])), function (props) {
   return props.theme.background ? "".concat(props.theme.background) : "white";
 }, function (props) {
   return props.theme.textColor ? "color: ".concat(props.theme.textColor, ";") : "";
 });
-var OverlayInner$2 = styled__default.default.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  max-height: var(--app-height);\n  height: 100%;\n  ", "\n"], ["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  max-height: var(--app-height);\n  height: 100%;\n  ", "\n"])), function (props) {
+var OverlayInner$2 = styled__default.default.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  max-height: var(--app-height);\n  height: 100%;\n  ", "\n"], ["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  max-height: var(--app-height);\n  height: 100%;\n  ", "\n"])), function (props) {
   var _a;
   return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
 }, function (props) {
   return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
 });
-var OverlayImageContainer = styled__default.default.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-bottom: 25px;\n  max-width: var(--app-width);\n  max-height: var(--app-height);\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: var(--app-width);\n  max-height: var(--app-height);\n  overflow: hidden;\n\n  & > img,\n  & > svg {\n    margin: 0 auto;\n    width: max-content;\n    max-width: 100%;\n    max-height: 100%;\n    aspect-ratio: initial;\n    object-fit: contain;\n    display: block;\n  }\n"])));
-var OverlayImageRow = styled__default.default.div(templateObject_4$g || (templateObject_4$g = __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 templateObject_1$F, templateObject_2$r, templateObject_3$l, templateObject_4$g;
+var OverlayImageContainer = styled__default.default.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-bottom: 25px;\n  max-width: var(--app-width);\n  max-height: var(--app-height);\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: var(--app-width);\n  max-height: var(--app-height);\n  overflow: hidden;\n\n  & > img,\n  & > svg {\n    margin: 0 auto;\n    width: max-content;\n    max-width: 100%;\n    max-height: 100%;\n    aspect-ratio: initial;\n    object-fit: contain;\n    display: block;\n  }\n"])));
+var OverlayImageRow = styled__default.default.div(templateObject_4$h || (templateObject_4$h = __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 templateObject_1$G, templateObject_2$s, templateObject_3$m, templateObject_4$h;
 
 var LoaderButton = function LoaderButton(_a) {
   var children = _a.children,
@@ -505,11 +505,11 @@ var LoaderButton = function LoaderButton(_a) {
     className: "ladda-label"
   }, children));
 };
-var StyledButton = styled__default.default.button(templateObject_1$E || (templateObject_1$E = __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  @keyframes ladda-spinner-line-fade {\n    0%,\n    100% {\n      opacity: 0.22;\n    }\n    1% {\n      opacity: 1;\n    }\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  @keyframes ladda-spinner-line-fade {\n    0%,\n    100% {\n      opacity: 0.22;\n    }\n    1% {\n      opacity: 1;\n    }\n  }\n\n  position: relative;\n\n  .ladda-spinner {\n    position: absolute;\n    z-index: 2;\n    display: inline-block;\n    width: 32px;\n    top: 50%;\n    margin-top: 0;\n    opacity: 0;\n    pointer-events: none;\n  }\n  .ladda-label {\n    position: relative;\n    z-index: 3;\n  }\n  .ladda-progress {\n    position: absolute;\n    width: 0;\n    height: 100%;\n    left: 0;\n    top: 0;\n    background: rgba(0, 0, 0, 0.2);\n    display: none;\n    transition: 0.1s linear all !important;\n  }\n  &[data-loading] .ladda-progress {\n    display: block;\n  }\n\n  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n  .ladda-spinner,\n  .ladda-label {\n    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n  }\n  &[data-style='zoom-in'],\n  &[data-style='zoom-in'] .ladda-spinner,\n  &[data-style='zoom-in'] .ladda-label,\n  &[data-style='zoom-out'],\n  &[data-style='zoom-out'] .ladda-spinner,\n  &[data-style='zoom-out'] .ladda-label {\n    transition: 0.3s ease all !important;\n  }\n  &[data-style='expand-right'] .ladda-spinner {\n    right: -6px;\n  }\n  &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n  &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n    right: -12px;\n  }\n  &[data-style='expand-right'][data-loading] {\n    padding-right: 56px;\n  }\n  &[data-style='expand-right'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='expand-right'][data-loading][data-size='s'],\n  &[data-style='expand-right'][data-loading][data-size='xs'] {\n    padding-right: 40px;\n  }\n  &[data-style='expand-left'] .ladda-spinner {\n    left: 26px;\n  }\n  &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n  &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n    left: 4px;\n  }\n  &[data-style='expand-left'][data-loading] {\n    padding-left: 56px;\n  }\n  &[data-style='expand-left'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='expand-left'][data-loading][data-size='s'],\n  &[data-style='expand-left'][data-loading][data-size='xs'] {\n    padding-left: 40px;\n  }\n  &[data-style='expand-up'] {\n    overflow: hidden;\n  }\n  &[data-style='expand-up'] .ladda-spinner {\n    top: -32px;\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='expand-up'][data-loading] {\n    padding-top: 54px;\n  }\n  &[data-style='expand-up'][data-loading] .ladda-spinner {\n    opacity: 1;\n    top: 26px;\n    margin-top: 0;\n  }\n  &[data-style='expand-up'][data-loading][data-size='s'],\n  &[data-style='expand-up'][data-loading][data-size='xs'] {\n    padding-top: 32px;\n  }\n  &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n  &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n    top: 4px;\n  }\n  &[data-style='expand-down'] {\n    overflow: hidden;\n  }\n  &[data-style='expand-down'] .ladda-spinner {\n    top: 62px;\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n  &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n    top: 40px;\n  }\n  &[data-style='expand-down'][data-loading] {\n    padding-bottom: 54px;\n  }\n  &[data-style='expand-down'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='expand-down'][data-loading][data-size='s'],\n  &[data-style='expand-down'][data-loading][data-size='xs'] {\n    padding-bottom: 32px;\n  }\n  &[data-style='slide-left'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-left'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-left'] .ladda-spinner {\n    left: 100%;\n    margin-left: 0;\n  }\n  &[data-style='slide-left'][data-loading] .ladda-label {\n    opacity: 0;\n    left: -100%;\n  }\n  &[data-style='slide-left'][data-loading] .ladda-spinner {\n    opacity: 1;\n    left: 50%;\n  }\n  &[data-style='slide-right'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-right'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-right'] .ladda-spinner {\n    right: 100%;\n    margin-left: 0;\n    left: 16px;\n  }\n  [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n    right: auto;\n  }\n  &[data-style='slide-right'][data-loading] .ladda-label {\n    opacity: 0;\n    left: 100%;\n  }\n  &[data-style='slide-right'][data-loading] .ladda-spinner {\n    opacity: 1;\n    left: 50%;\n  }\n  &[data-style='slide-up'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-up'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-up'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n    margin-top: 1em;\n  }\n  &[data-style='slide-up'][data-loading] .ladda-label {\n    opacity: 0;\n    top: -1em;\n  }\n  &[data-style='slide-up'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-top: 0;\n  }\n  &[data-style='slide-down'] {\n    overflow: hidden;\n  }\n  &[data-style='slide-down'] .ladda-label {\n    position: relative;\n  }\n  &[data-style='slide-down'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n    margin-top: -2em;\n  }\n  &[data-style='slide-down'][data-loading] .ladda-label {\n    opacity: 0;\n    top: 1em;\n  }\n  &[data-style='slide-down'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-top: 0;\n  }\n  &[data-style='zoom-out'] {\n    overflow: hidden;\n  }\n  &[data-style='zoom-out'] .ladda-spinner {\n    left: 50%;\n    margin-left: 32px;\n    transform: scale(2.5);\n  }\n  &[data-style='zoom-out'] .ladda-label {\n    position: relative;\n    display: inline-block;\n  }\n  &[data-style='zoom-out'][data-loading] .ladda-label {\n    opacity: 0;\n    transform: scale(0.5);\n  }\n  &[data-style='zoom-out'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-left: 0;\n    transform: none;\n  }\n  &[data-style='zoom-in'] {\n    overflow: hidden;\n  }\n  &[data-style='zoom-in'] .ladda-spinner {\n    left: 50%;\n    margin-left: -16px;\n    transform: scale(0.2);\n  }\n  &[data-style='zoom-in'] .ladda-label {\n    position: relative;\n    display: inline-block;\n  }\n  &[data-style='zoom-in'][data-loading] .ladda-label {\n    opacity: 0;\n    transform: scale(2.2);\n  }\n  &[data-style='zoom-in'][data-loading] .ladda-spinner {\n    opacity: 1;\n    margin-left: 0;\n    transform: none;\n  }\n  &[data-style='contract'] {\n    overflow: hidden;\n    width: 100px;\n  }\n  &[data-style='contract'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='contract'][data-loading] {\n    border-radius: 50%;\n    width: 52px;\n  }\n  &[data-style='contract'][data-loading] .ladda-label {\n    opacity: 0;\n  }\n  &[data-style='contract'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  &[data-style='contract-overlay'] {\n    overflow: hidden;\n    width: 100px;\n    box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n  }\n  &[data-style='contract-overlay'] .ladda-spinner {\n    left: 50%;\n    margin-left: 0;\n  }\n  &[data-style='contract-overlay'][data-loading] {\n    border-radius: 50%;\n    width: 52px;\n    box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n  }\n  &[data-style='contract-overlay'][data-loading] .ladda-label {\n    opacity: 0;\n  }\n  &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n    opacity: 1;\n  }\n  [dir='rtl'] .ladda-spinner > div {\n    left: 25% !important;\n  }\n"])), function (props) {
+var StyledButton = styled__default.default.button(templateObject_1$F || (templateObject_1$F = __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  @keyframes ladda-spinner-line-fade {\n    0%,\n    100% {\n      opacity: 0.22;\n    }\n    1% {\n      opacity: 1;\n    }\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  @keyframes ladda-spinner-line-fade {\n    0%,\n    100% {\n      opacity: 0.22;\n    }\n    1% {\n      opacity: 1;\n    }\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$E;
+var templateObject_1$F;
 
 var GeolocationAccessDeniedOverlay = function GeolocationAccessDeniedOverlay(_a) {
   var accessBlockedImageUrl = _a.accessBlockedImageUrl;
@@ -756,7 +756,7 @@ var SessionValidationErrorOverlay = function SessionValidationErrorOverlay(_a) {
   }, retryText)))));
 };
 
-var Spinner = styled__default.default.div(templateObject_1$D || (templateObject_1$D = __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: lds-dual-ring 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\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: lds-dual-ring 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])), function (_a) {
+var Spinner = styled__default.default.div(templateObject_1$E || (templateObject_1$E = __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: lds-dual-ring 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\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: lds-dual-ring 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])), function (_a) {
   var $size = _a.$size;
   return $size !== null && $size !== void 0 ? $size : 80;
 }, function (_a) {
@@ -781,7 +781,7 @@ var Spinner = styled__default.default.div(templateObject_1$D || (templateObject_
   var $color = _a.$color;
   return $color !== null && $color !== void 0 ? $color : '#888';
 });
-var templateObject_1$D;
+var templateObject_1$E;
 
 exports.defaultAuthUrl = 'https://portal-api.idmission.com';
 var allowedAuthUrls = ['https://portal-api.idmission.com', 'https://portal-api-uat.idmission.com', 'https://portal-api-demo.idmission.com', 'https://portal-api-dev.idmission.com', 'http://localhost:10000'];
@@ -1844,7 +1844,7 @@ function getFrameDimensions(frame) {
   return [frameWidth, frameHeight];
 }
 
-var InvisibleCanvas = styled__default.default.canvas(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
+var InvisibleCanvas = styled__default.default.canvas(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
 function drawToCanvas(canvas, frame, width, height) {
   if (!canvas) return;
   var ctx = canvas.getContext('2d');
@@ -1864,7 +1864,7 @@ 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$C;
+var templateObject_1$D;
 
 function listAvailableCameras(facingMode_1) {
   return __awaiter(this, arguments, void 0, function (facingMode, requestMicAccess) {
@@ -6142,8 +6142,8 @@ var initialState$4 = {
   backDetectedFirst: false,
   enableOverrideWrongDocumentTypeDialog: false,
   allowOverrideWrongDocumentTypeAfterMs: 8000,
-  allowOverrideFlipRequirement: false,
-  overrideFlipRequirement: false,
+  allowOverrideWrongDocumentTypeGuidance: false,
+  overrideWrongDocumentTypeGuidance: false,
   wrongDocumentTypePredictions: 0,
   idCardFrontDetectionScore: 0,
   idCardFrontDetectionThresholdMet: false,
@@ -6267,8 +6267,8 @@ var _reducer = function reducer(state, action) {
           goodFramesThreshold = Math.ceil(3 * frameCaptureRate);
         }
       }
-      var flipRequired = !state.overrideFlipRequirement && (state.allowIdCardBackToFrontCapture ? 'idCardFront' in state.capturedDocuments && detectedDocumentType === 'idCardFront' : state.requestedDocumentType === 'idCardBack' && detectedDocumentType === 'idCardFront');
-      var backDetectedFirst = !state.overrideFlipRequirement && (state.allowIdCardBackToFrontCapture ? 'idCardBack' in state.capturedDocuments && detectedDocumentType === 'idCardBack' : state.requestedDocumentType === 'idCardFront' && detectedDocumentType === 'idCardBack');
+      var flipRequired = !state.overrideWrongDocumentTypeGuidance && (state.allowIdCardBackToFrontCapture ? 'idCardFront' in state.capturedDocuments && detectedDocumentType === 'idCardFront' : state.requestedDocumentType === 'idCardBack' && detectedDocumentType === 'idCardFront');
+      var backDetectedFirst = !state.overrideWrongDocumentTypeGuidance && (state.allowIdCardBackToFrontCapture ? 'idCardBack' in state.capturedDocuments && detectedDocumentType === 'idCardBack' : state.requestedDocumentType === 'idCardFront' && detectedDocumentType === 'idCardBack');
       var wrongDocumentTypePredictions = state.wrongDocumentTypePredictions;
       if (state.captureState === 'capturing' && (flipRequired || backDetectedFirst)) {
         wrongDocumentTypePredictions += 1;
@@ -6297,7 +6297,7 @@ var _reducer = function reducer(state, action) {
       }
       var hasBeenRunningForLongEnough = !!state.captureStartedAt && new Date().getTime() - state.captureStartedAt.getTime() > 1000;
       var overrideFlipRequirementThreshold = Math.ceil(state.allowOverrideWrongDocumentTypeAfterMs / 1000 * frameCaptureRate);
-      var allowOverrideFlipRequirement = state.enableOverrideWrongDocumentTypeDialog && hasBeenRunningForLongEnough && !state.overrideFlipRequirement && overrideFlipRequirementThreshold > 0 && (state.allowOverrideFlipRequirement || wrongDocumentTypePredictions >= overrideFlipRequirementThreshold);
+      var allowOverrideFlipRequirement = state.enableOverrideWrongDocumentTypeDialog && hasBeenRunningForLongEnough && !state.overrideWrongDocumentTypeGuidance && overrideFlipRequirementThreshold > 0 && (state.allowOverrideWrongDocumentTypeGuidance || wrongDocumentTypePredictions >= overrideFlipRequirementThreshold);
       return _assign(_assign({}, state), {
         videoWidth: frameWidth,
         videoHeight: frameHeight,
@@ -6310,7 +6310,7 @@ var _reducer = function reducer(state, action) {
         documentTooClose: documentTooClose,
         flipRequired: flipRequired,
         backDetectedFirst: backDetectedFirst,
-        allowOverrideFlipRequirement: allowOverrideFlipRequirement,
+        allowOverrideWrongDocumentTypeGuidance: allowOverrideFlipRequirement,
         wrongDocumentTypePredictions: wrongDocumentTypePredictions,
         idCardFrontDetectionScore: idCardFrontDetectionScore,
         idCardFrontDetectionThresholdMet: idCardFrontDetectionThresholdMet,
@@ -6425,18 +6425,18 @@ var _reducer = function reducer(state, action) {
     case 'flipRequestCompleted':
       return _assign(_assign({}, state), {
         captureState: 'capturing',
-        allowOverrideFlipRequirement: false,
-        overrideFlipRequirement: false,
+        allowOverrideWrongDocumentTypeGuidance: false,
+        overrideWrongDocumentTypeGuidance: false,
         wrongDocumentTypePredictions: 0
       });
     case 'allowOverrideFlipRequirement':
       return _assign(_assign({}, state), {
-        allowOverrideFlipRequirement: true
+        allowOverrideWrongDocumentTypeGuidance: true
       });
     case 'overrideFlipRequirement':
       return _assign(_assign({}, state), {
-        allowOverrideFlipRequirement: false,
-        overrideFlipRequirement: true
+        allowOverrideWrongDocumentTypeGuidance: false,
+        overrideWrongDocumentTypeGuidance: true
       });
     case 'resetWizard':
       return _assign(_assign({}, initialState$4), {
@@ -6466,10 +6466,10 @@ var IdCaptureStateProvider = function IdCaptureStateProvider(_a) {
   }, [onResize]);
   var setRequiredDocumentType = React.useContext(IdCaptureModelsContext).setRequiredDocumentType;
   React.useEffect(function () {
-    if (state.overrideFlipRequirement) {
+    if (state.overrideWrongDocumentTypeGuidance) {
       setRequiredDocumentType('none');
     }
-  }, [state.overrideFlipRequirement, setRequiredDocumentType]);
+  }, [state.overrideWrongDocumentTypeGuidance, setRequiredDocumentType]);
   return /*#__PURE__*/React__namespace.default.createElement(IdCaptureStateContext.Provider, {
     value: state
   }, /*#__PURE__*/React__namespace.default.createElement(IdCaptureDispatchContext.Provider, {
@@ -6490,12 +6490,12 @@ function DebugStatsPane(_a) {
   if (!portalLocation) return element;
   return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
 }
-var DebugStatsPaneDiv = styled__default.default.span(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  font-size: 16px;\n  font-family: monospace;\n  position: absolute;\n  left: 20px;\n  bottom: 20px;\n  margin-right: 20px;\n  padding: 8px;\n  color: limegreen;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 10002;\n"], ["\n  font-size: 16px;\n  font-family: monospace;\n  position: absolute;\n  left: 20px;\n  bottom: 20px;\n  margin-right: 20px;\n  padding: 8px;\n  color: limegreen;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 10002;\n"])));
-var ObjectDetectionDebugOverlayDiv = styled__default.default.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1001;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"], ["\n  position: absolute;\n  z-index: 1001;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"])), function (_a) {
+var DebugStatsPaneDiv = styled__default.default.span(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  font-size: 16px;\n  font-family: monospace;\n  position: absolute;\n  left: 20px;\n  bottom: 20px;\n  margin-right: 20px;\n  padding: 8px;\n  color: limegreen;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 10002;\n"], ["\n  font-size: 16px;\n  font-family: monospace;\n  position: absolute;\n  left: 20px;\n  bottom: 20px;\n  margin-right: 20px;\n  padding: 8px;\n  color: limegreen;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 10002;\n"])));
+var ObjectDetectionDebugOverlayDiv = styled__default.default.div(templateObject_2$r || (templateObject_2$r = __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 $flipX = _a.$flipX;
   return $flipX ? 'transform: scaleX(-1);' : '';
 });
-var ObjectDetectionDebugBox = styled__default.default.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  font: 10px monospace;\n  position: absolute;\n  border: 3px solid ", ";\n  color: ", ";\n  ", "\n"], ["\n  font: 10px monospace;\n  position: absolute;\n  border: 3px solid ", ";\n  color: ", ";\n  ", "\n"])), function (_a) {
+var ObjectDetectionDebugBox = styled__default.default.div(templateObject_3$l || (templateObject_3$l = __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 $color = _a.$color;
   return $color !== null && $color !== void 0 ? $color : 'green';
 }, function (_a) {
@@ -6505,7 +6505,7 @@ var ObjectDetectionDebugBox = styled__default.default.div(templateObject_3$k ||
   var $flipX = _a.$flipX;
   return $flipX ? 'transform: scaleX(-1);' : '';
 });
-var FaceDetectionKeypointMarker = styled__default.default.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border: 2px solid ", ";\n  font: 10px monospace;\n  color: ", ";\n  border-radius: 50%;\n  ", "\n"], ["\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border: 2px solid ", ";\n  font: 10px monospace;\n  color: ", ";\n  border-radius: 50%;\n  ", "\n"])), function (_a) {
+var FaceDetectionKeypointMarker = styled__default.default.div(templateObject_4$g || (templateObject_4$g = __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 $color = _a.$color;
   return $color !== null && $color !== void 0 ? $color : 'red';
 }, function (_a) {
@@ -6696,7 +6696,7 @@ function SelfieCaptureFaceKeypoint(_a) {
     }
   });
 }
-var templateObject_1$B, templateObject_2$q, templateObject_3$k, templateObject_4$f;
+var templateObject_1$C, templateObject_2$r, templateObject_3$l, templateObject_4$g;
 
 var enTranslation = {};
 
@@ -6800,7 +6800,9 @@ var esTranslation = {
   'Camera ready': 'Cámara está lista',
   'Loading guided capture experience...': 'Cargando la experiencia guiada para la captura....',
   'Guided capture experience ready': 'La experiencia guiada está lista',
-  "Let's Go!": 'Vamos!'
+  "Let's Go!": 'Vamos!',
+  'We are having trouble identifying the correct side of your id, do you want to continue with capture anyway?': 'Estamos teniendo problemas para identificar el lado correcto de tu identificación, quieres continuar con la captura?',
+  OK: 'Sí'
 };
 
 var resources = {
@@ -6864,7 +6866,7 @@ function useTranslations(verbiage, fallbacks) {
   }, [fallbacks, i18n.language, t, verbiage]);
 }
 
-var GuidanceMessageContainerDiv = styled__default.default.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  position: absolute;\n  top: calc(", ");\n  ", "\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"], ["\n  position: absolute;\n  top: calc(", ");\n  ", "\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"])), function (_a) {
+var GuidanceMessageContainerDiv = styled__default.default.div(templateObject_1$B || (templateObject_1$B = __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) {
@@ -6877,17 +6879,61 @@ var GuidanceMessageContainer = function GuidanceMessageContainer(props) {
   if (!portalLocation) return element;
   return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
 };
-var GuidanceMessage = styled__default.default.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n  z-index: 10001;\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n  z-index: 10001;\n"])), function (props) {
+var GuidanceMessage = styled__default.default.div(templateObject_2$q || (templateObject_2$q = __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$A, templateObject_2$p;
+var templateObject_1$B, templateObject_2$q;
 
 var DEFAULT_CDN_URL = 'https://websdk-cdn-dev.idmission.com/assets';
 
+function OverrideWrongDocumentTypeGuidanceDialog(_a) {
+  var _b = _a.classNames,
+    classNames = _b === void 0 ? {} : _b,
+    _c = _a.verbiage,
+    rawVerbiage = _c === void 0 ? {} : _c;
+  var _d = useIdCaptureState(),
+    state = _d[0],
+    dispatch = _d[1];
+  var verbiage = useTranslations(rawVerbiage, {
+    messageText: 'We are having trouble identifying the correct side of your id, do you want to continue with capture anyway?',
+    buttonText: 'OK'
+  });
+  if (!state.allowOverrideWrongDocumentTypeGuidance) return null;
+  return /*#__PURE__*/React__namespace.default.createElement(Container$1, {
+    className: classNames.container
+  }, /*#__PURE__*/React__namespace.default.createElement(InnerContainer, {
+    className: classNames.inner
+  }, /*#__PURE__*/React__namespace.default.createElement(Message, {
+    className: classNames.message
+  }, verbiage.messageText), /*#__PURE__*/React__namespace.default.createElement(ButtonContainer, {
+    className: classNames.buttonContainer
+  }, /*#__PURE__*/React__namespace.default.createElement(Button, {
+    variant: "positive",
+    className: classNames.button,
+    onClick: function onClick() {
+      return dispatch({
+        type: 'overrideFlipRequirement'
+      });
+    }
+  }, verbiage.buttonText))));
+}
+var Container$1 = styled__default.default.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  width: 100dvw;\n  background: ", ";\n  color: ", ";\n  display: flex;\n  z-index: 100001;\n"], ["\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  width: 100dvw;\n  background: ", ";\n  color: ", ";\n  display: flex;\n  z-index: 100001;\n"])), function (props) {
+  var _a, _b, _c;
+  return (_c = (_b = (_a = props.theme.idCapture) === null || _a === void 0 ? void 0 : _a.overrideWrongDocumentTypeGuidance) === null || _b === void 0 ? void 0 : _b.backgroundColor) !== null && _c !== void 0 ? _c : '#eed202';
+}, function (props) {
+  var _a, _b, _c;
+  return (_c = (_b = (_a = props.theme.idCapture) === null || _a === void 0 ? void 0 : _a.overrideWrongDocumentTypeGuidance) === null || _b === void 0 ? void 0 : _b.textColor) !== null && _c !== void 0 ? _c : 'black';
+});
+var InnerContainer = styled__default.default.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding: 16px 24px;\n  margin: auto 0;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding: 16px 24px;\n  margin: auto 0;\n  width: 100%;\n"])));
+var Message = styled__default.default.span(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  display: block;\n  margin: auto 12px auto 0;\n"], ["\n  display: block;\n  margin: auto 12px auto 0;\n"])));
+var ButtonContainer = styled__default.default.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  display: flex;\n  margin-left: auto;\n"], ["\n  display: flex;\n  margin-left: auto;\n"])));
+var Button = styled__default.default(LoaderButton)(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n  white-space: nowrap;\n  margin: auto;\n"], ["\n  white-space: nowrap;\n  margin: auto;\n"])));
+var templateObject_1$A, templateObject_2$p, templateObject_3$k, templateObject_4$f, templateObject_5$9;
+
 var IdCapture = function IdCapture(_a) {
   var _b, _c, _d, _e, _f, _g, _h, _j;
   var requiredDocumentType = _a.requiredDocumentType,
@@ -7022,46 +7068,10 @@ var IdCapture = function IdCapture(_a) {
   }, /*#__PURE__*/React__namespace.default.createElement(GuidanceMessage, {
     "$variant": satisfied ? 'positive' : 'default',
     className: classNames.guidanceMessage
-  }, guidanceMessage), state.allowOverrideFlipRequirement && ( /*#__PURE__*/React__namespace.default.createElement("div", {
-    style: {
-      position: 'fixed',
-      left: 0,
-      bottom: 0,
-      width: '100dvw',
-      background: '#eed202',
-      display: 'flex',
-      zIndex: 100001
-    }
-  }, /*#__PURE__*/React__namespace.default.createElement("div", {
-    style: {
-      display: 'flex',
-      flexDirection: 'row',
-      padding: '16px 24px',
-      margin: 'auto 0',
-      width: '100%'
-    }
-  }, /*#__PURE__*/React__namespace.default.createElement("span", {
-    style: {
-      display: 'block',
-      margin: 'auto 12px auto 0'
-    }
-  }, "It appears that you are attempting to capture the wrong side of your ID card, but perhaps we are wrong about that. Would you like to proceed with capture anyway?"), /*#__PURE__*/React__namespace.default.createElement("div", {
-    style: {
-      marginLeft: 'auto',
-      display: 'flex'
-    }
-  }, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
-    variant: "positive",
-    style: {
-      whiteSpace: 'nowrap',
-      margin: 'auto'
-    },
-    onClick: function onClick() {
-      return dispatch({
-        type: 'overrideFlipRequirement'
-      });
-    }
-  }, "Capture Anyway"))))))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugBoundingBoxOverlay, {
+  }, guidanceMessage), /*#__PURE__*/React__namespace.default.createElement(OverrideWrongDocumentTypeGuidanceDialog, {
+    classNames: classNames.overrideWrongDocumentTypeGuidanceDialog,
+    verbiage: rawVerbiage.overrideWrongDocumentTypeGuidanceDialog
+  }))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugBoundingBoxOverlay, {
     "$flipX": !((_j = cameraRef.current) === null || _j === void 0 ? void 0 : _j.isRearFacing),
     scaling: debugScalingDetails
   }, state.detectedObjects.map(function (obj, i) {