idmission-web-sdk 2.3.172 → 2.3.173

package/dist/components/common/LoaderButton.d.ts

@@ -18,5 +18,14 @@ export type LoaderButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
     style?: CSSProperties;
     variant?: LoaderButtonVariant;
 };
-export declare const LoaderButton: ({ children, className, colors, disabled, finished, variant, ...props }: LoaderButtonProps) => React.JSX.Element;
+export declare const LoaderButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    children?: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    finished?: boolean;
+    colors?: LoaderButtonColors;
+    onClick?: () => void;
+    style?: CSSProperties;
+    variant?: LoaderButtonVariant;
+} & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=LoaderButton.d.ts.map

package/dist/components/common/LoaderButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoaderButton.d.ts","sourceRoot":"","sources":["../../../src/components/common/LoaderButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,aAAa,EACb,SAAS,EAIV,MAAM,OAAO,CAAA;AAId,MAAM,MAAM,mBAAmB,GAC3B,SAAS,GACT,WAAW,GACX,UAAU,GACV,UAAU,GACV,SAAS,GACT,SAAS,CAAA;AAEb,MAAM,MAAM,kBAAkB,GAAG;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,iBAAiB,GAC3B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,OAAO,CAAC,EAAE,mBAAmB,CAAA;CAC9B,CAAA;AAEH,eAAO,MAAM,YAAY,2EAQtB,iBAAiB,sBAkDnB,CAAA"}
+{"version":3,"file":"LoaderButton.d.ts","sourceRoot":"","sources":["../../../src/components/common/LoaderButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,aAAa,EACb,SAAS,EAMV,MAAM,OAAO,CAAA;AAId,MAAM,MAAM,mBAAmB,GAC3B,SAAS,GACT,WAAW,GACX,UAAU,GACV,UAAU,GACV,SAAS,GACT,SAAS,CAAA;AAEb,MAAM,MAAM,kBAAkB,GAAG;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,iBAAiB,GAC3B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,OAAO,CAAC,EAAE,mBAAmB,CAAA;CAC9B,CAAA;AAEH,eAAO,MAAM,YAAY;eAVV,SAAS;gBACR,MAAM;eACP,OAAO;eACP,OAAO;aACT,kBAAkB;cACjB,MAAM,IAAI;YACZ,aAAa;cACX,mBAAmB;2CAuEhC,CAAA"}

package/dist/components/common/overlay.d.ts

@@ -13,7 +13,16 @@ export declare const WideButton: import("styled-components/dist/types").IStyledC
     onClick?: () => void;
     style?: import("react").CSSProperties;
     variant?: import("./LoaderButton").LoaderButtonVariant;
-}, never>> & string & Omit<({ children, className, colors, disabled, finished, variant, ...props }: import("./LoaderButton").LoaderButtonProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+} & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+    children?: import("react").ReactNode;
+    className?: string;
+    disabled?: boolean;
+    finished?: boolean;
+    colors?: import("./LoaderButton").LoaderButtonColors;
+    onClick?: () => void;
+    style?: import("react").CSSProperties;
+    variant?: import("./LoaderButton").LoaderButtonVariant;
+} & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
 export declare const WideBorderButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
     children?: import("react").ReactNode;
     className?: string;
@@ -23,7 +32,7 @@ export declare const WideBorderButton: import("styled-components/dist/types").IS
     onClick?: () => void;
     style?: import("react").CSSProperties;
     variant?: import("./LoaderButton").LoaderButtonVariant;
-}, never>, never>> & string;
+} & import("react").RefAttributes<HTMLButtonElement>, never>, never>> & string;
 export declare const LoadingOverlayInner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, never>> & string;
 export declare const LoadingOverlayHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const LoadingOverlayGuidanceMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$textColor" | "$variant" | "$background"> & {

package/dist/components/common/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../src/components/common/overlay.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,gBAAgB,6NAmB5B,CAAA;AAED,eAAO,MAAM,YAAY,6NAWxB,CAAA;AAED,eAAO,MAAM,qBAAqB,6NAiBjC,CAAA;AAED,eAAO,MAAM,eAAe,6NAc3B,CAAA;AAED,eAAO,MAAM,oBAAoB,0QAEhC,CAAA;AAED,eAAO,MAAM,aAAa,6NAMzB,CAAA;AAED,eAAO,MAAM,UAAU;;;;;;;;;8NAGtB,CAAA;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;2BAM5B,CAAA;AAED,eAAO,MAAM,mBAAmB,0QAM/B,CAAA;AAED,eAAO,MAAM,oBAAoB,6NAUhC,CAAA;AAED,eAAO,MAAM,6BAA6B;;;;mBAKzC,CAAA;AAED,eAAO,MAAM,4BAA4B,0QAIxC,CAAA;AAED,eAAO,MAAM,mCAAmC,gaAQ/C,CAAA;AAED,eAAO,MAAM,yBAAyB;eACzB,MAAM;oBAUlB,CAAA;AAED,eAAO,MAAM,+BAA+B,oaAO3C,CAAA;AAED,eAAO,MAAM,wBAAwB,0QAQpC,CAAA;AAED,eAAO,MAAM,kCAAkC,6NAI9C,CAAA;AAED,eAAO,MAAM,yBAAyB,iOAKrC,CAAA;AAED,eAAO,MAAM,6BAA6B,6NAMzC,CAAA;AAED,eAAO,MAAM,+BAA+B,6NAM3C,CAAA;AAED,eAAO,MAAM,kCAAkC,oOAE9C,CAAA;AAED,eAAO,MAAM,qCAAqC,6NAEjD,CAAA"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../src/components/common/overlay.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,gBAAgB,6NAmB5B,CAAA;AAED,eAAO,MAAM,YAAY,6NAWxB,CAAA;AAED,eAAO,MAAM,qBAAqB,6NAiBjC,CAAA;AAED,eAAO,MAAM,eAAe,6NAc3B,CAAA;AAED,eAAO,MAAM,oBAAoB,0QAEhC,CAAA;AAED,eAAO,MAAM,aAAa,6NAMzB,CAAA;AAED,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;qGAGtB,CAAA;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;8EAM5B,CAAA;AAED,eAAO,MAAM,mBAAmB,0QAM/B,CAAA;AAED,eAAO,MAAM,oBAAoB,6NAUhC,CAAA;AAED,eAAO,MAAM,6BAA6B;;;;mBAKzC,CAAA;AAED,eAAO,MAAM,4BAA4B,0QAIxC,CAAA;AAED,eAAO,MAAM,mCAAmC,gaAQ/C,CAAA;AAED,eAAO,MAAM,yBAAyB;eACzB,MAAM;oBAUlB,CAAA;AAED,eAAO,MAAM,+BAA+B,oaAO3C,CAAA;AAED,eAAO,MAAM,wBAAwB,0QAQpC,CAAA;AAED,eAAO,MAAM,kCAAkC,6NAI9C,CAAA;AAED,eAAO,MAAM,yBAAyB,iOAKrC,CAAA;AAED,eAAO,MAAM,6BAA6B,6NAMzC,CAAA;AAED,eAAO,MAAM,+BAA+B,6NAM3C,CAAA;AAED,eAAO,MAAM,kCAAkC,oOAE9C,CAAA;AAED,eAAO,MAAM,qCAAqC,6NAEjD,CAAA"}

package/dist/components/id_capture/IdCaptureSuccess.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IdCaptureSuccess.d.ts","sourceRoot":"","sources":["../../../src/components/id_capture/IdCaptureSuccess.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAc,MAAM,OAAO,CAAA;AACvD,OAAO,EAAE,iBAAiB,EAAwB,MAAM,qBAAqB,CAAA;AAU7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,wBAAwB,EAAmB,MAAM,mBAAmB,CAAA;AAmB7E,MAAM,MAAM,0BAA0B,GAAG;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,WAAW,CAAC,EAAE,wBAAwB,CAAA;IACtC,UAAU,CAAC,EAAE,wBAAwB,CAAA;IACrC,cAAc,CAAC,EAAE,wBAAwB,CAAA;IACzC,SAAS,CAAC,EAAE,wBAAwB,CAAA;CACrC,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,QAAQ,CAAC,EAAE,kBAAkB,CAAA;CAC9B,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,iBAAiB,EAAE,iBAAiB,CAAA;IACpC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,UAAU,CAAC,EAAE,0BAA0B,CAAA;IACvC,MAAM,CAAC,EAAE,sBAAsB,CAAA;IAC/B,QAAQ,CAAC,EAAE,wBAAwB,CAAA;IACnC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,gBAAgB,8GAQ1B,qBAAqB,KAAG,YA0E1B,CAAA"}
+{"version":3,"file":"IdCaptureSuccess.d.ts","sourceRoot":"","sources":["../../../src/components/id_capture/IdCaptureSuccess.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAiC,MAAM,OAAO,CAAA;AAC1E,OAAO,EAAE,iBAAiB,EAAwB,MAAM,qBAAqB,CAAA;AAU7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,wBAAwB,EAAmB,MAAM,mBAAmB,CAAA;AAoB7E,MAAM,MAAM,0BAA0B,GAAG;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,WAAW,CAAC,EAAE,wBAAwB,CAAA;IACtC,UAAU,CAAC,EAAE,wBAAwB,CAAA;IACrC,cAAc,CAAC,EAAE,wBAAwB,CAAA;IACzC,SAAS,CAAC,EAAE,wBAAwB,CAAA;CACrC,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,QAAQ,CAAC,EAAE,kBAAkB,CAAA;CAC9B,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,iBAAiB,EAAE,iBAAiB,CAAA;IACpC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,UAAU,CAAC,EAAE,0BAA0B,CAAA;IACvC,MAAM,CAAC,EAAE,sBAAsB,CAAA;IAC/B,QAAQ,CAAC,EAAE,wBAAwB,CAAA;IACnC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,gBAAgB,8GAQ1B,qBAAqB,KAAG,YAuF1B,CAAA"}

package/dist/components/submission/SubmissionErrorOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SubmissionErrorOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/submission/SubmissionErrorOverlay.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAIxD,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,EAAE,eAAe,GAAG,YAAY,CAAA;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,sBAAsB,wBAGhC,2BAA2B,KAAG,YAYhC,CAAA"}
+{"version":3,"file":"SubmissionErrorOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/submission/SubmissionErrorOverlay.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAyB,MAAM,OAAO,CAAA;AAElE,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAKxD,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,EAAE,eAAe,GAAG,YAAY,CAAA;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,sBAAsB,wBAGhC,2BAA2B,KAAG,YAkBhC,CAAA"}

package/dist/sdk2.cjs.development.js

@@ -235,7 +235,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var webSdkVersion = '2.3.172';
+var webSdkVersion = '2.3.173';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -421,7 +421,7 @@ function videoDataUrlToB64(url) {
   });
 }
 
-var LoaderButton = function LoaderButton(_a) {
+var LoaderButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
     className = _a.className,
     _b = _a.colors,
@@ -436,11 +436,16 @@ var LoaderButton = function LoaderButton(_a) {
   var _d = React.useState(false),
     laddaLoaded = _d[0],
     setLaddaLoaded = _d[1];
+  // Expose the button element to the parent via ref
+  React.useImperativeHandle(ref, function () {
+    return buttonRef.current;
+  }, []);
   React.useEffect(function () {
     if (laddaLoaded || finished) return;
     var interval;
+    var isMounted = true;
     import('ladda').then(function (Ladda) {
-      if (!buttonRef.current) return;
+      if (!buttonRef.current || !isMounted) return;
       laddaRef.current = Ladda.create(buttonRef.current);
       laddaRef.current.start();
       setLaddaLoaded(true);
@@ -453,6 +458,7 @@ var LoaderButton = function LoaderButton(_a) {
     });
     return function () {
       var _a;
+      isMounted = false;
       (_a = laddaRef.current) === null || _a === void 0 ? void 0 : _a.remove();
       clearInterval(interval);
     };
@@ -475,17 +481,18 @@ var LoaderButton = function LoaderButton(_a) {
   }, props), /*#__PURE__*/React__namespace.default.createElement("span", {
     className: "ladda-label"
   }, children));
-};
-var StyledButton = styled__default.default.button(templateObject_1$R || (templateObject_1$R = __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) {
+});
+LoaderButton.displayName = 'LoaderButton';
+var StyledButton = styled__default.default.button(templateObject_1$S || (templateObject_1$S = __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  ");
+  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-color);\n      background-color: var(--bs-btn-bg);\n      border-color: var(--bs-btn-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$R;
+var templateObject_1$S;
 
-var ButtonsRow$2 = styled__default.default.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n  display: flex;\n  gap: 0 15px;\n  justify-content: center;\n  text-align: left;\n"], ["\n  display: flex;\n  gap: 0 15px;\n  justify-content: center;\n  text-align: left;\n"])));
-var templateObject_1$Q;
+var ButtonsRow$2 = styled__default.default.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n  display: flex;\n  gap: 0 15px;\n  justify-content: center;\n  text-align: left;\n"], ["\n  display: flex;\n  gap: 0 15px;\n  justify-content: center;\n  text-align: left;\n"])));
+var templateObject_1$R;
 
-var GuidanceMessageContainerDiv = styled__default.default.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n  position: absolute;\n  top: calc(", ");\n  ", "\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n  padding: 0 10%;\n  box-sizing: border-box;\n"], ["\n  position: absolute;\n  top: calc(", ");\n  ", "\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n  padding: 0 10%;\n  box-sizing: border-box;\n"])), function (_a) {
+var GuidanceMessageContainerDiv = styled__default.default.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n  position: absolute;\n  top: calc(", ");\n  ", "\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n  padding: 0 10%;\n  box-sizing: border-box;\n"], ["\n  position: absolute;\n  top: calc(", ");\n  ", "\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n  padding: 0 10%;\n  box-sizing: border-box;\n"])), function (_a) {
   var $top = _a.$top;
   return $top !== null && $top !== void 0 ? $top : '10%';
 }, function (_a) {
@@ -498,38 +505,38 @@ var GuidanceMessageContainer = function GuidanceMessageContainer(props) {
   if (!portalLocation) return element;
   return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
 };
-var GuidanceMessage = styled__default.default.div(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  border-radius: 8px;\n  z-index: 10001;\n  padding: 16px 24px;\n  font-size: 18px;\n  font-weight: bold;\n  box-shadow:\n    0 1px 3px 0 rgb(0 0 0 / 0.1),\n    0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  border-radius: 8px;\n  z-index: 10001;\n  padding: 16px 24px;\n  font-size: 18px;\n  font-weight: bold;\n  box-shadow:\n    0 1px 3px 0 rgb(0 0 0 / 0.1),\n    0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])), function (props) {
+var GuidanceMessage = styled__default.default.div(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  border-radius: 8px;\n  z-index: 10001;\n  padding: 16px 24px;\n  font-size: 18px;\n  font-weight: bold;\n  box-shadow:\n    0 1px 3px 0 rgb(0 0 0 / 0.1),\n    0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  border-radius: 8px;\n  z-index: 10001;\n  padding: 16px 24px;\n  font-size: 18px;\n  font-weight: bold;\n  box-shadow:\n    0 1px 3px 0 rgb(0 0 0 / 0.1),\n    0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])), function (props) {
   var _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 : 'white';
 }, 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$P, templateObject_2$K;
+var templateObject_1$Q, templateObject_2$L;
 
-var wavesAnimation = styled.keyframes(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n    0% {\n        opacity: 0;\n        transform: scale3d(1, 1, 1);\n    }\n    80% {\n        opacity: 1;\n    }\n    100% {\n        transform: scale3d(2, 2, 1);\n        opacity: 0;\n    }\n"], ["\n    0% {\n        opacity: 0;\n        transform: scale3d(1, 1, 1);\n    }\n    80% {\n        opacity: 1;\n    }\n    100% {\n        transform: scale3d(2, 2, 1);\n        opacity: 0;\n    }\n"])));
-var progressBarAnimation = styled.keyframes(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n    0% {\n        width: 0;\n    }\n    100% {\n        width: 100%;\n    }\n"], ["\n    0% {\n        width: 0;\n    }\n    100% {\n        width: 100%;\n    }\n"])));
-var dualRingSpinnerAnimation = styled.keyframes(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n"], ["\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n"])));
-var progressBorderAnimation = styled.keyframes(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n    to {\n        stroke-dashoffset: 0;\n    }\n"], ["\n    to {\n        stroke-dashoffset: 0;\n    }\n"])));
-var templateObject_1$O, templateObject_2$J, templateObject_3$v, templateObject_4$p;
+var wavesAnimation = styled.keyframes(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n    0% {\n        opacity: 0;\n        transform: scale3d(1, 1, 1);\n    }\n    80% {\n        opacity: 1;\n    }\n    100% {\n        transform: scale3d(2, 2, 1);\n        opacity: 0;\n    }\n"], ["\n    0% {\n        opacity: 0;\n        transform: scale3d(1, 1, 1);\n    }\n    80% {\n        opacity: 1;\n    }\n    100% {\n        transform: scale3d(2, 2, 1);\n        opacity: 0;\n    }\n"])));
+var progressBarAnimation = styled.keyframes(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n    0% {\n        width: 0;\n    }\n    100% {\n        width: 100%;\n    }\n"], ["\n    0% {\n        width: 0;\n    }\n    100% {\n        width: 100%;\n    }\n"])));
+var dualRingSpinnerAnimation = styled.keyframes(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n"], ["\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n"])));
+var progressBorderAnimation = styled.keyframes(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n    to {\n        stroke-dashoffset: 0;\n    }\n"], ["\n    to {\n        stroke-dashoffset: 0;\n    }\n"])));
+var templateObject_1$P, templateObject_2$K, templateObject_3$w, templateObject_4$q;
 
-var OverlayContainer = styled__default.default.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  flex-direction: column;\n\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  background: ", ";\n  ", "\n\n  z-index: 10000;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  flex-direction: column;\n\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  background: ", ";\n  ", "\n\n  z-index: 10000;\n"])), function (props) {
+var OverlayContainer = styled__default.default.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  flex-direction: column;\n\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  background: ", ";\n  ", "\n\n  z-index: 10000;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  flex-direction: column;\n\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  background: ", ";\n  ", "\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$I || (templateObject_2$I = __makeTemplateObject(["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  width: 100%;\n  height: 100%;\n  ", "\n"], ["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  width: 100%;\n  height: 100%;\n  ", "\n"])), function (props) {
+var OverlayInner$2 = styled__default.default.div(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  width: 100%;\n  height: 100%;\n  ", "\n"], ["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  width: 100%;\n  height: 100%;\n  ", "\n"])), function (props) {
   var _a;
   return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
 }, function (props) {
   return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
 });
-var OverlayImageContainer = styled__default.default.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-bottom: 25px;\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  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$o || (templateObject_4$o = __makeTemplateObject(["\n  display: flex;\n  margin: auto;\n\n  & > div {\n    max-height: calc(100% - 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(100% - 320px);\n\n    & > img {\n      width: 100%;\n      max-height: 100%;\n      height: auto;\n      object-fit: contain;\n    }\n  }\n"])));
-var GrayOverlayContainer = styled__default.default(OverlayContainer)(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n  background: #f7f6fb;\n"], ["\n  background: #f7f6fb;\n"])));
-var ButtonsColumn = styled__default.default.div(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 15px 0;\n  justify-content: center;\n  margin-top: 24px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 15px 0;\n  justify-content: center;\n  margin-top: 24px;\n"])));
-var WideButton = styled__default.default(LoaderButton)(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n  width: 100%;\n  border-radius: 30px;\n"], ["\n  width: 100%;\n  border-radius: 30px;\n"])));
-var WideBorderButton = styled__default.default(WideButton)(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n  color: ", ";\n  background: ", ";\n  border: 1px solid\n    ", ";\n  box-sizing: border-box;\n"], ["\n  color: ", ";\n  background: ", ";\n  border: 1px solid\n    ", ";\n  box-sizing: border-box;\n"])), function (props) {
+var OverlayImageContainer = styled__default.default.div(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-bottom: 25px;\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  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$p || (templateObject_4$p = __makeTemplateObject(["\n  display: flex;\n  margin: auto;\n\n  & > div {\n    max-height: calc(100% - 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(100% - 320px);\n\n    & > img {\n      width: 100%;\n      max-height: 100%;\n      height: auto;\n      object-fit: contain;\n    }\n  }\n"])));
+var GrayOverlayContainer = styled__default.default(OverlayContainer)(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n  background: #f7f6fb;\n"], ["\n  background: #f7f6fb;\n"])));
+var ButtonsColumn = styled__default.default.div(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 15px 0;\n  justify-content: center;\n  margin-top: 24px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 15px 0;\n  justify-content: center;\n  margin-top: 24px;\n"])));
+var WideButton = styled__default.default(LoaderButton)(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n  width: 100%;\n  border-radius: 30px;\n"], ["\n  width: 100%;\n  border-radius: 30px;\n"])));
+var WideBorderButton = styled__default.default(WideButton)(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n  color: ", ";\n  background: ", ";\n  border: 1px solid\n    ", ";\n  box-sizing: border-box;\n"], ["\n  color: ", ";\n  background: ", ";\n  border: 1px solid\n    ", ";\n  box-sizing: border-box;\n"])), function (props) {
   var _a, _b;
   return (_b = (_a = props.colors) === null || _a === void 0 ? void 0 : _a.textColor) !== null && _b !== void 0 ? _b : 'black';
 }, function (props) {
@@ -539,18 +546,18 @@ var WideBorderButton = styled__default.default(WideButton)(templateObject_8$5 ||
   var _a, _b;
   return (_b = (_a = props.colors) === null || _a === void 0 ? void 0 : _a.borderColor) !== null && _b !== void 0 ? _b : 'var(--idm-color-secondary-500)';
 });
-var LoadingOverlayInner = styled__default.default(OverlayInner$2)(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n  position: relative;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n"], ["\n  position: relative;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n"])));
-var LoadingOverlayHeader = styled__default.default.div(templateObject_10$2 || (templateObject_10$2 = __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 LoadingOverlayInner = styled__default.default(OverlayInner$2)(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n  position: relative;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n"], ["\n  position: relative;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n"])));
+var LoadingOverlayHeader = styled__default.default.div(templateObject_10$3 || (templateObject_10$3 = __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 LoadingOverlayGuidanceMessage = styled__default.default(GuidanceMessage)(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n  padding: 16px 24px;\n  margin-top: 16px;\n  font-size: 18px;\n  font-weight: bold;\n"], ["\n  padding: 16px 24px;\n  margin-top: 16px;\n  font-size: 18px;\n  font-weight: bold;\n"])));
-var LoadingOverlayImageContainer = styled__default.default(OverlayImageContainer)(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n  padding: 0;\n  max-height: 100%;\n  pointer-events: none;\n"], ["\n  padding: 0;\n  max-height: 100%;\n  pointer-events: none;\n"])));
+var LoadingOverlayGuidanceMessage = styled__default.default(GuidanceMessage)(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n  padding: 16px 24px;\n  margin-top: 16px;\n  font-size: 18px;\n  font-weight: bold;\n"], ["\n  padding: 16px 24px;\n  margin-top: 16px;\n  font-size: 18px;\n  font-weight: bold;\n"])));
+var LoadingOverlayImageContainer = styled__default.default(OverlayImageContainer)(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n  padding: 0;\n  max-height: 100%;\n  pointer-events: none;\n"], ["\n  padding: 0;\n  max-height: 100%;\n  pointer-events: none;\n"])));
 var LoadingOverlayProgressBarBackground = styled__default.default.div.attrs({
   className: 'loading-overlay-progress-bar-background'
-})(templateObject_13$2 || (templateObject_13$2 = __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"])));
+})(templateObject_13$3 || (templateObject_13$3 = __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 LoadingOverlayProgressBar = styled__default.default.span.attrs({
   className: 'loading-overlay-progress-bar'
 })(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n  display: block;\n  width: ", "%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  position: absolute;\n"], ["\n  display: block;\n  width: ", "%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  position: absolute;\n"])), function (props) {
@@ -566,7 +573,7 @@ var LoadingOverlayLoadingListItem = styled__default.default.li(templateObject_19
 var LoadingOverlayProgressContainer = styled__default.default.div(templateObject_20$1 || (templateObject_20$1 = __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 LoadingOverlayCustomLoadingGraphic = styled__default.default.img(templateObject_21$1 || (templateObject_21$1 = __makeTemplateObject(["\n  transform-style: preserve-3d;\n"], ["\n  transform-style: preserve-3d;\n"])));
 var LoadingOverlayContinueButtonContainer = styled__default.default.div(templateObject_22$1 || (templateObject_22$1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var templateObject_1$N, templateObject_2$I, templateObject_3$u, templateObject_4$o, templateObject_5$g, templateObject_6$a, templateObject_7$6, templateObject_8$5, templateObject_9$3, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1;
+var templateObject_1$O, templateObject_2$J, templateObject_3$v, templateObject_4$p, templateObject_5$h, templateObject_6$b, templateObject_7$7, templateObject_8$6, templateObject_9$4, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$3, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1;
 
 var GeolocationAccessDeniedOverlay = function GeolocationAccessDeniedOverlay(_a) {
   var accessBlockedImageUrl = _a.accessBlockedImageUrl;
@@ -639,36 +646,146 @@ var SubmissionErrorOverlay = function SubmissionErrorOverlay(_a) {
     onRetry = _a.onRetry;
   return /*#__PURE__*/React__namespace.default.createElement(OverlayContainer, null, /*#__PURE__*/React__namespace.default.createElement(OverlayInner$2, {
     style: {
-      justifyContent: 'center'
+      justifyContent: 'center',
+      alignItems: 'center',
+      display: 'flex'
     }
   }, error instanceof NetworkError ? (/*#__PURE__*/React__namespace.default.createElement(NetworkErrorContent, {
     error: error,
     onRetry: onRetry
   })) : (/*#__PURE__*/React__namespace.default.createElement(SubmissionErrorContent, {
-    error: error
+    error: error,
+    onRetry: onRetry
   }))));
 };
+var syntaxColors = {
+  key: '#7dd3fc',
+  // light blue
+  string: '#86efac',
+  // light green
+  number: '#fbbf24',
+  // amber
+  "boolean": '#f472b6',
+  // pink
+  "null": '#9ca3af',
+  // gray
+  punctuation: '#e5e7eb' // light gray
+};
+var highlightJson = function highlightJson(str) {
+  var json;
+  try {
+    var parsed = JSON.parse(str);
+    json = JSON.stringify(parsed, null, 2);
+  } catch (_a) {
+    return str;
+  }
+  var elements = [];
+  var i = 0;
+  // Regex to match JSON tokens
+  var tokenRegex = /("(?:[^"\\]|\\.)*")\s*:|("(?:[^"\\]|\\.)*")|(-?\d+\.?\d*(?:[eE][+-]?\d+)?)|(\btrue\b|\bfalse\b)|(\bnull\b)|([{}[\],:])/g;
+  var lastIndex = 0;
+  var match;
+  while ((match = tokenRegex.exec(json)) !== null) {
+    // Add any whitespace/text before this match
+    if (match.index > lastIndex) {
+      elements.push(json.slice(lastIndex, match.index));
+    }
+    var key = match[1],
+      string = match[2],
+      number = match[3],
+      _boolean = match[4],
+      nullVal = match[5],
+      punctuation = match[6];
+    if (key) {
+      // It's a key (string followed by colon) - key includes quotes but not the colon
+      elements.push(/*#__PURE__*/React__namespace.default.createElement("span", {
+        key: i++,
+        style: {
+          color: syntaxColors.key
+        }
+      }, key));
+      elements.push(/*#__PURE__*/React__namespace.default.createElement("span", {
+        key: i++,
+        style: {
+          color: syntaxColors.punctuation
+        }
+      }, ":"));
+    } else if (string) {
+      elements.push(/*#__PURE__*/React__namespace.default.createElement("span", {
+        key: i++,
+        style: {
+          color: syntaxColors.string
+        }
+      }, string));
+    } else if (number) {
+      elements.push(/*#__PURE__*/React__namespace.default.createElement("span", {
+        key: i++,
+        style: {
+          color: syntaxColors.number
+        }
+      }, number));
+    } else if (_boolean) {
+      elements.push(/*#__PURE__*/React__namespace.default.createElement("span", {
+        key: i++,
+        style: {
+          color: syntaxColors["boolean"]
+        }
+      }, _boolean));
+    } else if (nullVal) {
+      elements.push(/*#__PURE__*/React__namespace.default.createElement("span", {
+        key: i++,
+        style: {
+          color: syntaxColors["null"]
+        }
+      }, nullVal));
+    } else if (punctuation) {
+      elements.push(/*#__PURE__*/React__namespace.default.createElement("span", {
+        key: i++,
+        style: {
+          color: syntaxColors.punctuation
+        }
+      }, punctuation));
+    }
+    lastIndex = tokenRegex.lastIndex;
+  }
+  // Add any remaining text
+  if (lastIndex < json.length) {
+    elements.push(json.slice(lastIndex));
+  }
+  return elements;
+};
 var SubmissionErrorContent = function SubmissionErrorContent(_a) {
-  var error = _a.error;
+  var error = _a.error,
+    onRetry = _a.onRetry;
   var t = reactI18next.useTranslation().t;
+  var _b = React.useState(false),
+    copied = _b[0],
+    setCopied = _b[1];
   var headingText = t("We're sorry, an unexpected error has occurred.");
-  return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("h3", {
-    style: {
-      marginBottom: 8
-    }
-  }, headingText), error.status.statusCode && (/*#__PURE__*/React__namespace.default.createElement("p", {
-    style: {
-      marginBottom: 0
-    }
-  }, /*#__PURE__*/React__namespace.default.createElement("code", null, "Status: ", error.status.statusCode))), /*#__PURE__*/React__namespace.default.createElement("p", {
-    style: {
-      marginBottom: 0
-    }
-  }, "Message: ", /*#__PURE__*/React__namespace.default.createElement("code", null, error.message)), error.status.errorData && (/*#__PURE__*/React__namespace.default.createElement("p", {
-    style: {
-      marginBottom: 0
-    }
-  }, "Data: ", /*#__PURE__*/React__namespace.default.createElement("code", null, error.status.errorData))));
+  var retryText = t('Retry');
+  var copyToClipboard = React.useCallback(function () {
+    var errorDetails = _assign({
+      status: error.status.statusCode,
+      message: error.message
+    }, error.status.errorData && {
+      data: error.status.errorData
+    });
+    var text = JSON.stringify(errorDetails, null, 2);
+    navigator.clipboard.writeText(text).then(function () {
+      setCopied(true);
+      setTimeout(function () {
+        return setCopied(false);
+      }, 2000);
+    });
+  }, [error.status.statusCode, error.message, error.status.errorData]);
+  return /*#__PURE__*/React__namespace.default.createElement(ErrorContainer, null, /*#__PURE__*/React__namespace.default.createElement(ErrorIcon, null, "!"), /*#__PURE__*/React__namespace.default.createElement(Heading$b, null, headingText), error.status.statusCode && (/*#__PURE__*/React__namespace.default.createElement(StatusBadge$1, null, /*#__PURE__*/React__namespace.default.createElement(StatusLabel, null, "Status"), /*#__PURE__*/React__namespace.default.createElement(StatusValue, null, error.status.statusCode))), /*#__PURE__*/React__namespace.default.createElement(DetailsSection, null, /*#__PURE__*/React__namespace.default.createElement(DetailsHeader, null, /*#__PURE__*/React__namespace.default.createElement(DetailsLabel, null, "Error Details"), /*#__PURE__*/React__namespace.default.createElement(CopyButton, {
+    onClick: copyToClipboard,
+    type: "button"
+  }, copied ? 'Copied!' : 'Copy')), /*#__PURE__*/React__namespace.default.createElement(CodeBlock, null, /*#__PURE__*/React__namespace.default.createElement("code", null, highlightJson(error.message)))), error.status.errorData && (/*#__PURE__*/React__namespace.default.createElement(DetailsSection, null, /*#__PURE__*/React__namespace.default.createElement(DetailsLabel, null, "Additional Data"), /*#__PURE__*/React__namespace.default.createElement(CodeBlock, null, /*#__PURE__*/React__namespace.default.createElement("code", null, highlightJson(error.status.errorData))))), onRetry && (/*#__PURE__*/React__namespace.default.createElement(RetryContainer, null, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
+    variant: "warning",
+    finished: true,
+    onClick: onRetry
+  }, retryText))));
 };
 var NetworkErrorContent = function NetworkErrorContent(_a) {
   var onRetry = _a.onRetry;
@@ -676,24 +793,26 @@ var NetworkErrorContent = function NetworkErrorContent(_a) {
   var headingText = t('Network unreachable');
   var messageText = t("We're having trouble reaching our services, please check your connection and try again.");
   var retryText = t('Retry');
-  return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("h3", {
-    style: {
-      marginBottom: 8
-    }
-  }, headingText), /*#__PURE__*/React__namespace.default.createElement("p", {
-    style: {
-      marginBottom: 0
-    }
-  }, messageText), onRetry && (/*#__PURE__*/React__namespace.default.createElement("div", {
-    style: {
-      marginTop: 32
-    }
-  }, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
+  return /*#__PURE__*/React__namespace.default.createElement(ErrorContainer, null, /*#__PURE__*/React__namespace.default.createElement(ErrorIcon, null, "!"), /*#__PURE__*/React__namespace.default.createElement(Heading$b, null, headingText), /*#__PURE__*/React__namespace.default.createElement(Message$1, null, messageText), onRetry && (/*#__PURE__*/React__namespace.default.createElement(RetryContainer, null, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
     variant: "warning",
     finished: true,
     onClick: onRetry
   }, retryText))));
 };
+var ErrorContainer = styled__default.default.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  max-width: 600px;\n  width: 100%;\n  padding: 24px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,\n    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  max-width: 600px;\n  width: 100%;\n  padding: 24px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,\n    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n"])));
+var ErrorIcon = styled__default.default.div(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  background-color: #fee2e2;\n  color: #dc2626;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 24px;\n  font-weight: bold;\n  margin-bottom: 16px;\n"], ["\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  background-color: #fee2e2;\n  color: #dc2626;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 24px;\n  font-weight: bold;\n  margin-bottom: 16px;\n"])));
+var Heading$b = styled__default.default.h3(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n  margin: 0 0 16px 0;\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: #1f2937;\n  text-align: center;\n"], ["\n  margin: 0 0 16px 0;\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: #1f2937;\n  text-align: center;\n"])));
+var Message$1 = styled__default.default.p(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n  margin: 0 0 16px 0;\n  color: #6b7280;\n  text-align: center;\n  line-height: 1.5;\n"], ["\n  margin: 0 0 16px 0;\n  color: #6b7280;\n  text-align: center;\n  line-height: 1.5;\n"])));
+var StatusBadge$1 = styled__default.default.div(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  background-color: #fef2f2;\n  border: 1px solid #fecaca;\n  border-radius: 6px;\n  padding: 6px 12px;\n  margin-bottom: 20px;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  background-color: #fef2f2;\n  border: 1px solid #fecaca;\n  border-radius: 6px;\n  padding: 6px 12px;\n  margin-bottom: 20px;\n"])));
+var StatusLabel = styled__default.default.span(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: #991b1b;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n"], ["\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: #991b1b;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n"])));
+var StatusValue = styled__default.default.span(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: #dc2626;\n"], ["\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: #dc2626;\n"])));
+var DetailsSection = styled__default.default.div(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n  width: 100%;\n  margin-bottom: 16px;\n"], ["\n  width: 100%;\n  margin-bottom: 16px;\n"])));
+var DetailsHeader = styled__default.default.div(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n"])));
+var DetailsLabel = styled__default.default.span(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: #6b7280;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n"], ["\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: #6b7280;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n"])));
+var CopyButton = styled__default.default.button(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n  background-color: #f3f4f6;\n  border: 1px solid #d1d5db;\n  border-radius: 4px;\n  padding: 4px 10px;\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: #374151;\n  cursor: pointer;\n  transition: all 0.15s ease;\n\n  &:hover {\n    background-color: #e5e7eb;\n    border-color: #9ca3af;\n  }\n\n  &:active {\n    background-color: #d1d5db;\n  }\n"], ["\n  background-color: #f3f4f6;\n  border: 1px solid #d1d5db;\n  border-radius: 4px;\n  padding: 4px 10px;\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: #374151;\n  cursor: pointer;\n  transition: all 0.15s ease;\n\n  &:hover {\n    background-color: #e5e7eb;\n    border-color: #9ca3af;\n  }\n\n  &:active {\n    background-color: #d1d5db;\n  }\n"])));
+var CodeBlock = styled__default.default.pre(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n  background-color: #1f2937;\n  border-radius: 8px;\n  padding: 16px;\n  margin: 0;\n  overflow-x: auto;\n  max-height: 300px;\n  overflow-y: auto;\n  text-align: left;\n\n  code {\n    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n    font-size: 0.8125rem;\n    line-height: 1.6;\n    color: #e5e7eb;\n    white-space: pre-wrap;\n    word-break: break-word;\n    display: block;\n    text-align: left;\n  }\n"], ["\n  background-color: #1f2937;\n  border-radius: 8px;\n  padding: 16px;\n  margin: 0;\n  overflow-x: auto;\n  max-height: 300px;\n  overflow-y: auto;\n  text-align: left;\n\n  code {\n    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n    font-size: 0.8125rem;\n    line-height: 1.6;\n    color: #e5e7eb;\n    white-space: pre-wrap;\n    word-break: break-word;\n    display: block;\n    text-align: left;\n  }\n"])));
+var RetryContainer = styled__default.default.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n  margin-top: 24px;\n"], ["\n  margin-top: 24px;\n"])));
+var templateObject_1$N, templateObject_2$I, templateObject_3$u, templateObject_4$o, templateObject_5$g, templateObject_6$a, templateObject_7$6, templateObject_8$5, templateObject_9$3, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2;
 
 var SessionIdMissingOverlay = function SessionIdMissingOverlay() {
   return /*#__PURE__*/React__namespace.default.createElement(OverlayContainer, null, /*#__PURE__*/React__namespace.default.createElement(OverlayInner$2, {
@@ -8534,6 +8653,16 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
     _e = _a.debugMode,
     debugMode = _e === void 0 ? false : _e;
   var submissionStatus = React.useContext(SubmissionContext).submissionStatus;
+  var sessionCheckState = useAuthContext()[0].sessionCheckState;
+  var sessionReady = sessionCheckState === 'PASSED';
+  var submitButtonRef = React.useRef(null);
+  // Auto-focus submit button when session becomes ready
+  React.useEffect(function () {
+    var _a;
+    if (sessionReady && submissionStatus !== SubmissionStatus.SUBMITTING) {
+      (_a = submitButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }, [sessionReady, submissionStatus]);
   var verbiage = useTranslations(rawVerbiage, {
     headingText: 'ID Capture Successful',
     retryText: 'Retry',
@@ -8566,13 +8695,14 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
   }))), /*#__PURE__*/React__namespace.default.createElement(ButtonsColumn, {
     className: classNames.buttonsRow
   }, /*#__PURE__*/React__namespace.default.createElement(WideButton, {
+    ref: submitButtonRef,
     className: classNames.submitBtn,
     variant: "positive",
     onClick: onSubmitClick,
-    disabled: submissionStatus === SubmissionStatus.SUBMITTING,
+    disabled: submissionStatus === SubmissionStatus.SUBMITTING || !sessionReady,
     colors: colors.doneBtn,
     finished: true
-  }, submissionStatus === SubmissionStatus.SUBMITTING ? verbiage.submittingText : verbiage.submitText), /*#__PURE__*/React__namespace.default.createElement(WideBorderButton, {
+  }, submissionStatus === SubmissionStatus.SUBMITTING ? verbiage.submittingText : !sessionReady ? 'Initializing...' : verbiage.submitText), /*#__PURE__*/React__namespace.default.createElement(WideBorderButton, {
     className: classNames.retryBtn,
     variant: "warning",
     onClick: onRetryClick,