@prosopo/procaptcha-react 0.2.39 → 0.2.40

package/dist/cjs/components/CaptchaWidget.cjs

@@ -64,8 +64,10 @@ const CaptchaWidget = ({ challenge, solution, onClick, themeColor }) => {
                         // removes whitespace below imgs
                         objectFit: "contain",
                         // contain the entire image in the img tag
-                        aspectRatio: "1/1"
+                        aspectRatio: "1/1",
                         // force AR to be 1, letterboxing images with different aspect ratios
+                        height: "auto"
+                        // make the img tag responsive to its container
                       },
                       src: item.data,
                       alt: `Captcha image ${index + 1}`

package/dist/cjs/components/Modal.cjs

@@ -1,36 +1,17 @@
 "use strict";
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+require("../style/Modal.css");
 const React = require("react");
 const ModalComponent = React.memo((props, nextProps) => {
   const { show, children } = props;
   console.log("rendering modal with show: ", show);
-  const display = show ? "flex" : "none";
+  const display = show ? "block" : "none";
   const ModalOuterDivCss = {
-    overflow: "auto",
-    width: "100%",
-    maxHeight: "100%",
-    position: "fixed",
-    top: "0",
-    left: "0",
-    height: "100%",
-    background: "rgba(0, 0, 0, 0.6)",
-    zIndex: "2147483646",
-    transition: "all 0.5s",
     display
   };
-  const ModalInnerDivCSS = {
-    maxWidth: "500px",
-    margin: "auto",
-    position: "fixed",
-    background: "white",
-    height: "100%",
-    maxHeight: "100%",
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
-    zIndex: "2147483647",
-    transition: "all 0.5s"
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: ModalOuterDivCss, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: ModalInnerDivCSS, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "modalOuter", style: ModalOuterDivCss, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modalBackground" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modalInner", children })
+  ] });
 });
 module.exports = ModalComponent;

package/dist/cjs/style/Modal.css

@@ -0,0 +1,41 @@
+.modalOuter {
+    position: fixed;
+    z-index: 1300;
+    inset: 0;
+}
+
+.modalBackground {
+    position: fixed;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    -webkit-tap-highlight-color: transparent;
+    z-index: -1;
+}
+.modalInner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 400px;
+    background-color: rgb(255, 255, 255);
+    border: none;
+    box-shadow:
+        rgba(0, 0, 0, 0.2) 0px 11px 15px -7px,
+        rgba(0, 0, 0, 0.14) 0px 24px 38px 3px,
+        rgba(0, 0, 0, 0.12) 0px 9px 46px 8px;
+}

package/dist/components/Button.js

@@ -1,59 +1,69 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { darkTheme, lightTheme } from './theme.js';
-import { useMemo, useState } from 'react';
-import addDataAttr from '../util/index.js';
+import { jsx } from "@emotion/react/jsx-runtime";
+import { lightTheme, darkTheme } from "./theme.js";
+import { useMemo, useState } from "react";
+import addDataAttr from "../util/index.js";
 const buttonStyleBase = {
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'relative',
-    boxSizing: 'border-box',
-    outline: '0px',
-    border: '0px',
-    margin: '0px',
-    cursor: 'pointer',
-    userSelect: 'none',
-    verticalAlign: 'middle',
-    appearance: undefined,
-    textDecoration: 'none',
-    fontWeight: '500',
-    fontSize: '0.875rem',
-    lineHeight: '1.75',
-    letterSpacing: '0.02857em',
-    textTransform: 'uppercase',
-    minWidth: '64px',
-    padding: '6px 16px',
-    borderRadius: '4px',
-    transition: 'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-    color: 'rgb(0, 0, 0)',
-    backgroundColor: '#ffffff',
-    boxShadow: 'rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px',
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  position: "relative",
+  boxSizing: "border-box",
+  outline: "0px",
+  border: "0px",
+  margin: "0px",
+  cursor: "pointer",
+  userSelect: "none",
+  verticalAlign: "middle",
+  appearance: void 0,
+  textDecoration: "none",
+  fontWeight: "500",
+  fontSize: "0.875rem",
+  lineHeight: "1.75",
+  letterSpacing: "0.02857em",
+  textTransform: "uppercase",
+  minWidth: "64px",
+  padding: "6px 16px",
+  borderRadius: "4px",
+  transition: "background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+  color: "rgb(0, 0, 0)",
+  backgroundColor: "#ffffff",
+  boxShadow: "rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px"
 };
 const Button = ({ themeColor, buttonType, text, onClick }) => {
-    const theme = useMemo(() => (themeColor === 'light' ? lightTheme : darkTheme), [themeColor]);
-    const [hover, setHover] = useState(false);
-    const buttonStyle = useMemo(() => {
-        const baseStyle = {
-            ...buttonStyleBase,
-            color: hover ? theme.palette.primary.contrastText : theme.palette.background.contrastText,
-        };
-        if (buttonType === 'cancel') {
-            return {
-                ...baseStyle,
-                backgroundColor: hover ? theme.palette.grey[600] : 'transparent',
-            };
-        }
-        else {
-            return {
-                ...baseStyle,
-                backgroundColor: hover ? theme.palette.primary.main : theme.palette.background.default,
-            };
-        }
-    }, [buttonType, hover, theme]);
-    return (_jsx("button", { ...addDataAttr({ dev: { cy: `button-${buttonType}` } }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), style: buttonStyle, onClick: (e) => {
-            e.preventDefault();
-            onClick();
-        }, children: text }));
+  const theme = useMemo(() => themeColor === "light" ? lightTheme : darkTheme, [themeColor]);
+  const [hover, setHover] = useState(false);
+  const buttonStyle = useMemo(() => {
+    const baseStyle = {
+      ...buttonStyleBase,
+      color: hover ? theme.palette.primary.contrastText : theme.palette.background.contrastText
+    };
+    if (buttonType === "cancel") {
+      return {
+        ...baseStyle,
+        backgroundColor: hover ? theme.palette.grey[600] : "transparent"
+      };
+    } else {
+      return {
+        ...baseStyle,
+        backgroundColor: hover ? theme.palette.primary.main : theme.palette.background.default
+      };
+    }
+  }, [buttonType, hover, theme]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...addDataAttr({ dev: { cy: `button-${buttonType}` } }),
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => setHover(false),
+      style: buttonStyle,
+      onClick: (e) => {
+        e.preventDefault();
+        onClick();
+      },
+      children: text
+    }
+  );
+};
+export {
+  Button as default
 };
-export default Button;
-//# sourceMappingURL=Button.js.map

package/dist/components/CaptchaComponent.js

@@ -1,60 +1,157 @@
-import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { CaptchaWidget } from './CaptchaWidget.js';
-import { Suspense, useMemo } from 'react';
-import { at } from '@prosopo/util';
-import { darkTheme, lightTheme } from './theme.js';
-import { useTranslation } from '@prosopo/common';
-import Button from './Button.js';
-import addDataAttr from '../util/index.js';
-const CaptchaComponent = ({ challenge, index, solutions, onSubmit, onCancel, onClick, onNext, themeColor, }) => {
-    const { t } = useTranslation();
-    const captcha = challenge.captchas ? at(challenge.captchas, index) : null;
-    const solution = solutions ? at(solutions, index) : [];
-    const theme = useMemo(() => (themeColor === 'light' ? lightTheme : darkTheme), [themeColor]);
-    return (_jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx("div", { style: {
-                overflowX: 'auto',
-                overflowY: 'auto',
-                width: '100%',
-                maxWidth: '500px',
-                maxHeight: '100%',
-                display: 'flex',
-                flexDirection: 'column',
-            }, children: _jsxs("div", { style: {
-                    backgroundColor: theme.palette.background.default,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    minWidth: '300px',
-                }, children: [_jsxs("div", { style: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            width: '100%',
-                            backgroundColor: theme.palette.primary.main,
-                            padding: '24px 16px',
-                        }, children: [_jsxs("p", { style: {
-                                    color: '#ffffff',
-                                    fontWeight: 700,
-                                    lineHeight: 1.5,
-                                }, children: [t('WIDGET.SELECT_ALL'), ': '] }), _jsx("p", { style: {
-                                    color: '#ffffff',
-                                    fontWeight: 700,
-                                    textTransform: 'capitalize',
-                                    lineHeight: 1.5,
-                                }, children: `${at(challenge.captchas, index).captcha.target}` })] }), _jsx("div", { ...addDataAttr({ dev: { cy: 'captcha-' + index } }), children: captcha && (_jsx(CaptchaWidget, { challenge: captcha, solution: solution, onClick: onClick, themeColor: themeColor })) }), _jsx("div", { style: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            width: '100%',
-                        }, ...addDataAttr({ dev: { cy: 'dots-captcha' } }) }), _jsx("div", { style: {
-                            padding: '8px 16px',
-                            display: 'flex',
-                            width: '100%',
-                        } }), _jsxs("div", { style: {
-                            padding: '0 16px 16px',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'space-between',
-                            lineHeight: 1.75,
-                        }, children: [_jsx(Button, { themeColor: themeColor, buttonType: "cancel", onClick: onCancel, text: t('WIDGET.CANCEL') }), _jsx(Button, { themeColor: themeColor, buttonType: "next", text: index < challenge.captchas.length - 1 ? t('WIDGET.NEXT') : t('WIDGET.SUBMIT'), onClick: index < challenge.captchas.length - 1 ? onNext : onSubmit })] })] }) }) }));
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { CaptchaWidget } from "./CaptchaWidget.js";
+import { useMemo, Suspense } from "react";
+import { at } from "@prosopo/util";
+import { lightTheme, darkTheme } from "./theme.js";
+import { useTranslation } from "@prosopo/common";
+import Button from "./Button.js";
+import addDataAttr from "../util/index.js";
+const CaptchaComponent = ({
+  challenge,
+  index,
+  solutions,
+  onSubmit,
+  onCancel,
+  onClick,
+  onNext,
+  themeColor
+}) => {
+  const { t } = useTranslation();
+  const captcha = challenge.captchas ? at(challenge.captchas, index) : null;
+  const solution = solutions ? at(solutions, index) : [];
+  const theme = useMemo(() => themeColor === "light" ? lightTheme : darkTheme, [themeColor]);
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        // introduce scroll bars when screen < minWidth of children
+        overflowX: "auto",
+        overflowY: "auto",
+        width: "100%",
+        maxWidth: "500px",
+        maxHeight: "100%",
+        display: "flex",
+        flexDirection: "column"
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            backgroundColor: theme.palette.background.default,
+            display: "flex",
+            flexDirection: "column",
+            minWidth: "300px"
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  width: "100%",
+                  backgroundColor: theme.palette.primary.main,
+                  padding: "24px 16px"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "p",
+                    {
+                      style: {
+                        color: "#ffffff",
+                        fontWeight: 700,
+                        lineHeight: 1.5
+                      },
+                      children: [
+                        t("WIDGET.SELECT_ALL"),
+                        ": "
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      style: {
+                        color: "#ffffff",
+                        fontWeight: 700,
+                        textTransform: "capitalize",
+                        lineHeight: 1.5
+                      },
+                      children: `${at(challenge.captchas, index).captcha.target}`
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { ...addDataAttr({ dev: { cy: "captcha-" + index } }), children: captcha && /* @__PURE__ */ jsx(
+              CaptchaWidget,
+              {
+                challenge: captcha,
+                solution,
+                onClick,
+                themeColor
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: "100%"
+                },
+                ...addDataAttr({ dev: { cy: "dots-captcha" } })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  padding: "8px 16px",
+                  display: "flex",
+                  width: "100%"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  padding: "0 16px 16px",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  lineHeight: 1.75
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      themeColor,
+                      buttonType: "cancel",
+                      onClick: onCancel,
+                      text: t("WIDGET.CANCEL")
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      themeColor,
+                      buttonType: "next",
+                      text: index < challenge.captchas.length - 1 ? t("WIDGET.NEXT") : t("WIDGET.SUBMIT"),
+                      onClick: index < challenge.captchas.length - 1 ? onNext : onSubmit
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
+};
+export {
+  CaptchaComponent as default
 };
-export default CaptchaComponent;
-//# sourceMappingURL=CaptchaComponent.js.map

package/dist/components/CaptchaPlaceholder.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { LoadingSpinner } from './LoadingSpinner.js';
-import { css } from '@emotion/react';
-import { darkTheme, lightTheme } from './theme.js';
-import { useMemo } from 'react';
-const logoStyle = css `
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { LoadingSpinner } from "./LoadingSpinner.js";
+import { css } from "@emotion/react";
+import { lightTheme, darkTheme } from "./theme.js";
+import { useMemo } from "react";
+const logoStyle = css`
     align-items: center;
     justify-content: flex-end;
     display: flex;
@@ -34,44 +34,99 @@ const logoStyle = css `
         } /* logoWithoutText */
     }
 `;
-export const ProcaptchaPlaceholder = (props) => {
-    const darkMode = props.darkMode;
-    const styleWidth = { maxWidth: '400px', minWidth: '200px', margin: '8px' };
-    const themeColor = darkMode ? 'light' : 'dark';
-    const theme = useMemo(() => (darkMode === 'light' ? lightTheme : darkTheme), [darkMode]);
-    return (_jsx("div", { children: _jsx("div", { style: { maxWidth: '100%', maxHeight: '100%', overflowX: 'auto' }, children: _jsxs("div", { style: styleWidth, "data-cy": 'button-human', children: [' ', _jsxs("div", { style: {
-                            padding: '8px',
-                            border: '1px solid',
-                            backgroundColor: theme.palette.background.default,
-                            borderColor: theme.palette.grey[300],
-                            borderRadius: '8px',
-                            display: 'flex',
-                            justifyContent: 'space-between',
-                            alignItems: 'center',
-                            flexWrap: 'wrap',
-                        }, children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsx("div", { style: {
-                                        display: 'flex',
-                                        justifyContent: 'flex-start',
-                                        alignItems: 'center',
-                                        flexWrap: 'wrap',
-                                    }, children: _jsx("div", { style: {
-                                            height: '50px',
-                                            width: '50px',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                            flexDirection: 'column',
-                                            verticalAlign: 'middle',
-                                        }, children: _jsx("div", { style: {
-                                                display: 'flex',
-                                            }, children: _jsx("div", { style: { flex: 1 }, children: _jsx(LoadingSpinner, { themeColor: themeColor }) }) }) }) }) }), _jsx("div", { children: _jsx("a", { href: "https://www.prosopo.io/#features?ref=accounts.prosopo.io&utm_campaign=widget&utm_medium=checkbox", target: "_blank", "aria-label": "Visit prosopo.io to learn more about the service and its accessibility options.", children: _jsx("div", { children: _jsxs("div", { children: [_jsx("div", { css: logoStyle, dangerouslySetInnerHTML: {
-                                                        __html: darkMode === 'light' ? logoWithoutTextBlack : logoWithoutTextWhite,
-                                                    } }), _jsx("div", { css: logoStyle, dangerouslySetInnerHTML: {
-                                                        __html: darkMode === 'light' ? logoWithTextBlack : logoWithTextWhite,
-                                                    } })] }) }) }) })] })] }) }) }));
+const ProcaptchaPlaceholder = (props) => {
+  const darkMode = props.darkMode;
+  const styleWidth = { maxWidth: "400px", minWidth: "200px", margin: "8px" };
+  const themeColor = darkMode ? "light" : "dark";
+  const theme = useMemo(() => darkMode === "light" ? lightTheme : darkTheme, [darkMode]);
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { style: { maxWidth: "100%", maxHeight: "100%", overflowX: "auto" }, children: /* @__PURE__ */ jsxs("div", { style: styleWidth, "data-cy": "button-human", children: [
+    " ",
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          padding: "8px",
+          border: "1px solid",
+          backgroundColor: theme.palette.background.default,
+          borderColor: theme.palette.grey[300],
+          borderRadius: "8px",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          flexWrap: "wrap"
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "flex-start",
+                alignItems: "center",
+                flexWrap: "wrap"
+              },
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    height: "50px",
+                    width: "50px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    flexDirection: "column",
+                    verticalAlign: "middle"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        display: "flex"
+                      },
+                      children: /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx(LoadingSpinner, { themeColor }) })
+                    }
+                  )
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: "https://www.prosopo.io/#features?ref=accounts.prosopo.io&utm_campaign=widget&utm_medium=checkbox",
+              target: "_blank",
+              "aria-label": "Visit prosopo.io to learn more about the service and its accessibility options.",
+              children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    css: logoStyle,
+                    dangerouslySetInnerHTML: {
+                      __html: darkMode === "light" ? logoWithoutTextBlack : logoWithoutTextWhite
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    css: logoStyle,
+                    dangerouslySetInnerHTML: {
+                      __html: darkMode === "light" ? logoWithTextBlack : logoWithTextWhite
+                    }
+                  }
+                )
+              ] }) })
+            }
+          ) })
+        ]
+      }
+    )
+  ] }) }) });
 };
 const logoWithTextBlack = '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2062.63 468.67" height="35px" width="140px"><defs><style>.cls-1{fill:#1d1d1b;}</style></defs><title>Prosopo Logo Black</title><path class="cls-1" d="M335.55,1825.19A147.75,147.75,0,0,1,483.3,1972.94h50.5c0-109.49-88.76-198.25-198.25-198.25v50.5Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M269.36,1891.39A147.74,147.74,0,0,1,417.1,2039.13h50.5c0-109.49-88.75-198.24-198.24-198.24v50.5Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M414,2157.17a147.75,147.75,0,0,1-147.74-147.74h-50.5c0,109.49,88.75,198.24,198.24,198.24v-50.5Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M480.17,2091a147.74,147.74,0,0,1-147.74-147.75H281.92c0,109.49,88.76,198.25,198.25,198.25V2091Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M862.8,2017.5q-27.39,22.86-78.25,22.86h-65v112.19H654.82v-312h134q46.32,0,73.86,24.13t27.55,74.72Q890.2,1994.64,862.8,2017.5ZM813,1905.1q-12.37-10.36-34.7-10.38H719.59v91.87h58.75q22.32,0,34.7-11.22t12.39-35.56Q825.43,1915.48,813,1905.1Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1045.69,1916.42c.78.08,2.51.19,5.19.32v61.81c-3.81-.42-7.2-.71-10.16-.85s-5.36-.21-7.2-.21q-36.4,0-48.89,23.71-7,13.33-7,41.06v110.29H916.89V1921.82h57.58V1962q14-23.07,24.34-31.54,16.94-14.18,44-14.18C1044,1916.32,1044.92,1916.35,1045.69,1916.42Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1265.64,2124.32q-29.21,36.06-88.69,36.06t-88.69-36.06Q1059,2088.26,1059,2037.5q0-49.9,29.22-86.5t88.69-36.59q59.47,0,88.69,36.59t29.21,86.5Q1294.85,2088.26,1265.64,2124.32ZM1217.38,2091q14.17-18.81,14.18-53.48t-14.18-53.37q-14.19-18.7-40.64-18.71T1136,1984.13q-14.29,18.72-14.29,53.37T1136,2091q14.28,18.81,40.75,18.81T1217.38,2091Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1371.81,2078.88q1.92,16.1,8.29,22.87,11.28,12.06,41.7,12.06,17.85,0,28.39-5.29t10.53-15.88a17.12,17.12,0,0,0-8.48-15.45q-8.49-5.28-63.12-18.2-39.33-9.73-55.41-24.35-16.08-14.39-16.09-41.49,0-32,25.14-54.93t70.75-23q43.26,0,70.53,17.25t31.29,59.59H1455q-1.27-11.64-6.58-18.42-10-12.27-34-12.28-19.74,0-28.13,6.14t-8.38,14.4c0,6.91,3,11.93,8.92,15q8.89,4.89,63,16.73,36,8.46,54.05,25.61,17.77,17.35,17.78,43.39,0,34.3-25.56,56t-79,21.7q-54.51,0-80.49-23t-26-58.53Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1745.54,2124.32q-29.22,36.06-88.7,36.06t-88.69-36.06q-29.2-36.06-29.21-86.82,0-49.9,29.21-86.5t88.69-36.59q59.49,0,88.7,36.59t29.21,86.5Q1774.75,2088.26,1745.54,2124.32ZM1697.27,2091q14.19-18.81,14.19-53.48t-14.19-53.37q-14.18-18.7-40.64-18.71t-40.75,18.71q-14.28,18.72-14.28,53.37t14.28,53.48q14.3,18.81,40.75,18.81T1697.27,2091Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1992.75,1946.59q28.24,29.84,28.23,87.63,0,61-27.58,92.93t-71.06,32q-27.69,0-46-13.76-10-7.62-19.6-22.23v120.24H1797V1921.82h57.79v34.08q9.79-15,20.88-23.71,20.23-15.43,48.15-15.45Q1964.53,1916.74,1992.75,1946.59Zm-46.3,43.39q-12.3-20.52-39.88-20.53-33.15,0-45.54,31.11-6.43,16.51-6.42,41.92,0,40.21,21.58,56.51,12.82,9.53,30.37,9.53,25.45,0,38.83-19.48t13.36-51.86Q1958.75,2010.51,1946.45,1990Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M2249.14,2124.32q-29.2,36.06-88.69,36.06t-88.69-36.06q-29.22-36.06-29.21-86.82,0-49.9,29.21-86.5t88.69-36.59q59.49,0,88.69,36.59t29.22,86.5Q2278.36,2088.26,2249.14,2124.32ZM2200.88,2091q14.19-18.81,14.18-53.48t-14.18-53.37q-14.18-18.7-40.64-18.71t-40.75,18.71q-14.28,18.72-14.29,53.37t14.29,53.48q14.3,18.81,40.75,18.81T2200.88,2091Z" transform="translate(-215.73 -1774.69)"/></svg>';
 const logoWithTextWhite = '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2062.63 468.67" height="35px" width="140px"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Prosopo Logo Black</title><path class="cls-1" d="M335.55,1825.19A147.75,147.75,0,0,1,483.3,1972.94h50.5c0-109.49-88.76-198.25-198.25-198.25v50.5Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M269.36,1891.39A147.74,147.74,0,0,1,417.1,2039.13h50.5c0-109.49-88.75-198.24-198.24-198.24v50.5Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M414,2157.17a147.75,147.75,0,0,1-147.74-147.74h-50.5c0,109.49,88.75,198.24,198.24,198.24v-50.5Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M480.17,2091a147.74,147.74,0,0,1-147.74-147.75H281.92c0,109.49,88.76,198.25,198.25,198.25V2091Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M862.8,2017.5q-27.39,22.86-78.25,22.86h-65v112.19H654.82v-312h134q46.32,0,73.86,24.13t27.55,74.72Q890.2,1994.64,862.8,2017.5ZM813,1905.1q-12.37-10.36-34.7-10.38H719.59v91.87h58.75q22.32,0,34.7-11.22t12.39-35.56Q825.43,1915.48,813,1905.1Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1045.69,1916.42c.78.08,2.51.19,5.19.32v61.81c-3.81-.42-7.2-.71-10.16-.85s-5.36-.21-7.2-.21q-36.4,0-48.89,23.71-7,13.33-7,41.06v110.29H916.89V1921.82h57.58V1962q14-23.07,24.34-31.54,16.94-14.18,44-14.18C1044,1916.32,1044.92,1916.35,1045.69,1916.42Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1265.64,2124.32q-29.21,36.06-88.69,36.06t-88.69-36.06Q1059,2088.26,1059,2037.5q0-49.9,29.22-86.5t88.69-36.59q59.47,0,88.69,36.59t29.21,86.5Q1294.85,2088.26,1265.64,2124.32ZM1217.38,2091q14.17-18.81,14.18-53.48t-14.18-53.37q-14.19-18.7-40.64-18.71T1136,1984.13q-14.29,18.72-14.29,53.37T1136,2091q14.28,18.81,40.75,18.81T1217.38,2091Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1371.81,2078.88q1.92,16.1,8.29,22.87,11.28,12.06,41.7,12.06,17.85,0,28.39-5.29t10.53-15.88a17.12,17.12,0,0,0-8.48-15.45q-8.49-5.28-63.12-18.2-39.33-9.73-55.41-24.35-16.08-14.39-16.09-41.49,0-32,25.14-54.93t70.75-23q43.26,0,70.53,17.25t31.29,59.59H1455q-1.27-11.64-6.58-18.42-10-12.27-34-12.28-19.74,0-28.13,6.14t-8.38,14.4c0,6.91,3,11.93,8.92,15q8.89,4.89,63,16.73,36,8.46,54.05,25.61,17.77,17.35,17.78,43.39,0,34.3-25.56,56t-79,21.7q-54.51,0-80.49-23t-26-58.53Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1745.54,2124.32q-29.22,36.06-88.7,36.06t-88.69-36.06q-29.2-36.06-29.21-86.82,0-49.9,29.21-86.5t88.69-36.59q59.49,0,88.7,36.59t29.21,86.5Q1774.75,2088.26,1745.54,2124.32ZM1697.27,2091q14.19-18.81,14.19-53.48t-14.19-53.37q-14.18-18.7-40.64-18.71t-40.75,18.71q-14.28,18.72-14.28,53.37t14.28,53.48q14.3,18.81,40.75,18.81T1697.27,2091Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1992.75,1946.59q28.24,29.84,28.23,87.63,0,61-27.58,92.93t-71.06,32q-27.69,0-46-13.76-10-7.62-19.6-22.23v120.24H1797V1921.82h57.79v34.08q9.79-15,20.88-23.71,20.23-15.43,48.15-15.45Q1964.53,1916.74,1992.75,1946.59Zm-46.3,43.39q-12.3-20.52-39.88-20.53-33.15,0-45.54,31.11-6.43,16.51-6.42,41.92,0,40.21,21.58,56.51,12.82,9.53,30.37,9.53,25.45,0,38.83-19.48t13.36-51.86Q1958.75,2010.51,1946.45,1990Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M2249.14,2124.32q-29.2,36.06-88.69,36.06t-88.69-36.06q-29.22-36.06-29.21-86.82,0-49.9,29.21-86.5t88.69-36.59q59.49,0,88.69,36.59t29.22,86.5Q2278.36,2088.26,2249.14,2124.32ZM2200.88,2091q14.19-18.81,14.18-53.48t-14.18-53.37q-14.18-18.7-40.64-18.71t-40.75,18.71q-14.28,18.72-14.29,53.37t14.29,53.48q14.3,18.81,40.75,18.81T2200.88,2091Z" transform="translate(-215.73 -1774.69)"/></svg>';
 const logoWithoutTextWhite = '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 348" height="35px"><path id="Vector" d="M95.7053 40.2707C127.005 40.2707 157.022 52.6841 179.154 74.78C201.286 96.8759 213.719 126.844 213.719 158.093H254.056C254.056 70.7808 183.16 -4.57764e-05 95.7053 -4.57764e-05V40.2707Z" fill="#fff"/><path id="Vector_2" d="M42.8365 93.0614C58.3333 93.0614 73.6784 96.1087 87.9955 102.029C102.313 107.95 115.322 116.628 126.279 127.568C137.237 138.508 145.93 151.496 151.86 165.79C157.79 180.084 160.843 195.404 160.843 210.875H201.179C201.179 123.564 130.291 52.7906 42.8365 52.7906V93.0614Z" fill="#fff"/><path id="Vector_3" d="M158.367 305.005C127.07 305.003 97.056 292.59 74.926 270.496C52.796 248.402 40.3626 218.437 40.3604 187.191H0.0239563C0.0239563 274.503 70.9123 345.276 158.367 345.276V305.005Z" fill="#fff"/><path id="Vector_4" d="M211.219 252.239C195.722 252.239 180.376 249.191 166.059 243.27C151.741 237.349 138.732 228.67 127.774 217.729C116.816 206.788 108.123 193.799 102.194 179.505C96.2637 165.21 93.2121 149.889 93.2132 134.417H52.8687C52.8687 221.729 123.765 292.509 211.219 292.509V252.239Z" fill="#fff"/></g><defs><clipPath id="clip0_1_2"><rect width="254" height="345" fill="white"/></clipPath></defs></svg>';
 const logoWithoutTextBlack = '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 348" height="35px"><path id="Vector" d="M95.7053 40.2707C127.005 40.2707 157.022 52.6841 179.154 74.78C201.286 96.8759 213.719 126.844 213.719 158.093H254.056C254.056 70.7808 183.16 -4.57764e-05 95.7053 -4.57764e-05V40.2707Z" fill="#000000"/><path id="Vector_2" d="M42.8365 93.0614C58.3333 93.0614 73.6784 96.1087 87.9955 102.029C102.313 107.95 115.322 116.628 126.279 127.568C137.237 138.508 145.93 151.496 151.86 165.79C157.79 180.084 160.843 195.404 160.843 210.875H201.179C201.179 123.564 130.291 52.7906 42.8365 52.7906V93.0614Z" fill="#000000"/><path id="Vector_3" d="M158.367 305.005C127.07 305.003 97.056 292.59 74.926 270.496C52.796 248.402 40.3626 218.437 40.3604 187.191H0.0239563C0.0239563 274.503 70.9123 345.276 158.367 345.276V305.005Z" fill="#000000"/><path id="Vector_4" d="M211.219 252.239C195.722 252.239 180.376 249.191 166.059 243.27C151.741 237.349 138.732 228.67 127.774 217.729C116.816 206.788 108.123 193.799 102.194 179.505C96.2637 165.21 93.2121 149.889 93.2132 134.417H52.8687C52.8687 221.729 123.765 292.509 211.219 292.509V252.239Z" fill="#000000"/></g><defs><clipPath id="clip0_1_2"><rect width="254" height="345" fill="white"/></clipPath></defs></svg>';
-//# sourceMappingURL=CaptchaPlaceholder.js.map
+export {
+  ProcaptchaPlaceholder
+};