flowlink-auth 2.8.0 → 2.8.1

package/dist/SignUp.js

@@ -22,19 +22,25 @@ function SignUp({ agency = { name: "MyApp", logo: "" } }) {
   const toastId = useRef(0);
   const [toasts, setToasts] = useState([]);
   useEffect(() => {
+    const meta = document.createElement("meta");
+    meta.name = "viewport";
+    meta.content = "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no";
+    document.head.appendChild(meta);
     return () => {
       if (redirectTimer.current) clearTimeout(redirectTimer.current);
-      toasts.forEach((t) => clearTimeout(t._timer));
+      const existing = document.querySelector('meta[name="viewport"]');
+      if (existing && existing.content === meta.content) {
+        document.head.removeChild(existing);
+      }
+      toasts.forEach((t) => {
+        if (t._timer) clearTimeout(t._timer);
+      });
     };
   }, []);
   function showToast(type, message, ms = 5e3) {
     const id = ++toastId.current;
-    const created = Date.now();
-    const t = { id, type, message, created, _timer: null };
-    setToasts((prev) => {
-      const next = [t, ...prev].slice(0, 6);
-      return next;
-    });
+    const t = { id, type, message, _timer: null };
+    setToasts((prev) => [t, ...prev].slice(0, 6));
     const timer = setTimeout(() => {
       setToasts((prev) => prev.filter((x) => x.id !== id));
     }, ms);
@@ -43,7 +49,7 @@ function SignUp({ agency = { name: "MyApp", logo: "" } }) {
   function removeToast(id) {
     setToasts((prev) => {
       prev.forEach((t) => {
-        if (t.id === id) clearTimeout(t._timer);
+        if (t.id === id && t._timer) clearTimeout(t._timer);
       });
       return prev.filter((x) => x.id !== id);
     });
@@ -85,8 +91,8 @@ function SignUp({ agency = { name: "MyApp", logo: "" } }) {
         body: JSON.stringify({ name: name.trim(), email: email.trim(), password })
       });
       const data = await res.json().catch(async () => {
-        const text = await res.text().catch(() => "");
-        return { _raw: text };
+        const txt = await res.text().catch(() => "");
+        return { _raw: txt };
       });
       if (!res.ok) {
         const errMsg = data?.error || data?._raw || `Signup failed (${res.status})`;
@@ -117,9 +123,7 @@ function SignUp({ agency = { name: "MyApp", logo: "" } }) {
       const callbackUrl = encodeURIComponent(`${typeof window !== "undefined" ? window.location.origin : ""}/signup`);
       const sdkBase = baseUrl || (typeof window !== "undefined" ? window.location.origin.replace(/\/+$/, "") : "");
       const startUrl = `${sdkBase}/sdk/auth/start?rid=${rid}&source=${encodeURIComponent(provider)}&callbackUrl=${callbackUrl}`;
-      if (!publishableKey) {
-        throw new Error("Missing publishable key (client side).");
-      }
+      if (!publishableKey) throw new Error("Missing publishable key (client side).");
       const res = await fetch(startUrl, {
         method: "GET",
         headers: { "x-publishable-key": publishableKey }
@@ -142,18 +146,17 @@ function SignUp({ agency = { name: "MyApp", logo: "" } }) {
     if (e && typeof e.preventDefault === "function") e.preventDefault();
     startOAuthFlow("github");
   };
-  return /* @__PURE__ */ React.createElement("div", { style: overlay }, /* @__PURE__ */ React.createElement("div", { style: toastContainer }, toasts.map((t) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { style: styles.overlay }, /* @__PURE__ */ React.createElement("div", { style: styles.toastContainer, "aria-live": "polite", "aria-atomic": "true" }, toasts.map((t) => /* @__PURE__ */ React.createElement(
     "div",
     {
       key: t.id,
       role: "status",
-      "aria-live": "polite",
       style: {
-        ...toastBase,
-        ...t.type === "error" ? toastError : t.type === "success" ? toastSuccess : toastInfo
+        ...styles.toastBase,
+        ...t.type === "error" ? styles.toastError : t.type === "success" ? styles.toastSuccess : styles.toastInfo
       },
       onMouseEnter: () => {
-        clearTimeout(t._timer);
+        if (t._timer) clearTimeout(t._timer);
       },
       onMouseLeave: () => {
         const timer = setTimeout(() => removeToast(t.id), 3e3);
@@ -161,13 +164,13 @@ function SignUp({ agency = { name: "MyApp", logo: "" } }) {
       }
     },
     /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }, t.message),
-    /* @__PURE__ */ React.createElement("button", { "aria-label": "Dismiss", onClick: () => removeToast(t.id), style: toastCloseBtn }, "\u2715")
-  ))), /* @__PURE__ */ React.createElement("div", { style: modal }, /* @__PURE__ */ React.createElement("div", { style: modalInner }, /* @__PURE__ */ React.createElement("header", { style: header }, /* @__PURE__ */ React.createElement("div", { style: brandRow }, /* @__PURE__ */ React.createElement("div", { style: logo }, /* @__PURE__ */ React.createElement("div", { style: logoCircle, "aria-hidden": true })), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("h1", { style: title }, "Sign up to ", agency?.name || "App"), /* @__PURE__ */ React.createElement("div", { style: subtitle }, "Welcome! Create your account.")))), /* @__PURE__ */ React.createElement("section", { style: oauthSection }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("button", { "aria-label": "Dismiss", onClick: () => removeToast(t.id), style: styles.toastCloseBtn }, "\u2715")
+  ))), /* @__PURE__ */ React.createElement("div", { style: styles.modal, role: "dialog", "aria-modal": "true", "aria-labelledby": "signup-title" }, /* @__PURE__ */ React.createElement("div", { style: styles.modalInner }, /* @__PURE__ */ React.createElement("header", { style: styles.header }, /* @__PURE__ */ React.createElement("div", { style: styles.brandRow }, /* @__PURE__ */ React.createElement("div", { style: styles.logo, "aria-hidden": true }, /* @__PURE__ */ React.createElement("div", { style: styles.logoCircle })), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("h1", { id: "signup-title", style: styles.title }, "Sign up to ", agency?.name || "App"), /* @__PURE__ */ React.createElement("div", { style: styles.subtitle }, "Welcome \u2014 create your account.")))), /* @__PURE__ */ React.createElement("section", { style: styles.oauthSection }, /* @__PURE__ */ React.createElement(
     "button",
     {
       onClick: handleGoogle,
       type: "button",
-      style: { ...oauthButton, ...oauthGoogle },
+      style: { ...styles.oauthButton, ...styles.oauthGoogle },
       disabled: loading || loadingOauth.google,
       "aria-disabled": loading || loadingOauth.google
     },
@@ -178,13 +181,13 @@ function SignUp({ agency = { name: "MyApp", logo: "" } }) {
     {
       onClick: handleGithub,
       type: "button",
-      style: { ...oauthButton, ...oauthGithub },
+      style: { ...styles.oauthButton, ...styles.oauthGithub },
       disabled: loading || loadingOauth.github,
       "aria-disabled": loading || loadingOauth.github
     },
     /* @__PURE__ */ React.createElement("svg", { width: 18, style: { marginRight: 10 }, xmlns: "http://www.w3.org/2000/svg", fill: "white", viewBox: "0 0 20 20", "aria-hidden": true }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", d: "M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z", clipRule: "evenodd" })),
     /* @__PURE__ */ React.createElement("span", null, loadingOauth.github ? "Loading..." : "Continue with GitHub")
-  )), /* @__PURE__ */ React.createElement("div", { style: dividerRow }, /* @__PURE__ */ React.createElement("div", { style: line }), /* @__PURE__ */ React.createElement("div", { style: orText }, "or"), /* @__PURE__ */ React.createElement("div", { style: line })), /* @__PURE__ */ React.createElement("form", { onSubmit: submit, style: form }, /* @__PURE__ */ React.createElement("label", { style: label, htmlFor: "name" }, /* @__PURE__ */ React.createElement("span", { style: labelText }, "Name"), /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement("div", { style: styles.dividerRow }, /* @__PURE__ */ React.createElement("div", { style: styles.line }), /* @__PURE__ */ React.createElement("div", { style: styles.orText }, "or"), /* @__PURE__ */ React.createElement("div", { style: styles.line })), /* @__PURE__ */ React.createElement("form", { onSubmit: submit, style: styles.form }, /* @__PURE__ */ React.createElement("label", { style: styles.label, htmlFor: "name" }, /* @__PURE__ */ React.createElement("span", { style: styles.labelText }, "Name"), /* @__PURE__ */ React.createElement(
     "input",
     {
       id: "name",
@@ -192,10 +195,10 @@ function SignUp({ agency = { name: "MyApp", logo: "" } }) {
       value: name,
       onChange: (e) => setName(e.target.value),
       placeholder: "Your name",
-      style: input,
+      style: styles.input,
       autoComplete: "name"
     }
-  )), /* @__PURE__ */ React.createElement("label", { style: label, htmlFor: "email" }, /* @__PURE__ */ React.createElement("span", { style: labelText }, "Email address"), /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement("label", { style: styles.label, htmlFor: "email" }, /* @__PURE__ */ React.createElement("span", { style: styles.labelText }, "Email address"), /* @__PURE__ */ React.createElement(
     "input",
     {
       id: "email",
@@ -204,10 +207,10 @@ function SignUp({ agency = { name: "MyApp", logo: "" } }) {
       onChange: (e) => setEmail(e.target.value),
       required: true,
       placeholder: "you@example.com",
-      style: input,
+      style: styles.input,
       autoComplete: "email"
     }
-  )), /* @__PURE__ */ React.createElement("label", { style: label, htmlFor: "password" }, /* @__PURE__ */ React.createElement("span", { style: labelText }, "Password"), /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement("label", { style: styles.label, htmlFor: "password" }, /* @__PURE__ */ React.createElement("span", { style: styles.labelText }, "Password"), /* @__PURE__ */ React.createElement(
     "input",
     {
       id: "password",
@@ -216,251 +219,262 @@ function SignUp({ agency = { name: "MyApp", logo: "" } }) {
       onChange: (e) => setPassword(e.target.value),
       required: true,
       placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
-      style: input,
+      style: styles.input,
       autoComplete: "new-password"
     }
   )), /* @__PURE__ */ React.createElement(
     "button",
     {
       type: "submit",
-      style: submitButton,
+      style: styles.submitButton,
       disabled: loading,
       "aria-disabled": loading
     },
     loading ? "Signing up..." : "Sign Up"
-  ))), /* @__PURE__ */ React.createElement("div", { style: modalFooter }, /* @__PURE__ */ React.createElement("div", { style: belowRow }, /* @__PURE__ */ React.createElement("span", { style: muted }, "Already have an account? "), /* @__PURE__ */ React.createElement(Link, { href: "/sign-in", style: link }, "Sign in")), /* @__PURE__ */ React.createElement("div", { style: dividerThin }), /* @__PURE__ */ React.createElement("div", { style: secured }, /* @__PURE__ */ React.createElement("div", { style: securedText }, "Secured by auth")))));
+  ))), /* @__PURE__ */ React.createElement("div", { style: styles.modalFooter }, /* @__PURE__ */ React.createElement("div", { style: styles.belowRow }, /* @__PURE__ */ React.createElement("span", { style: styles.muted }, "Already have an account? "), /* @__PURE__ */ React.createElement(Link, { href: "/sign-in", style: styles.link }, "Sign in")), /* @__PURE__ */ React.createElement("div", { style: styles.dividerThin }), /* @__PURE__ */ React.createElement("div", { style: styles.secured }, /* @__PURE__ */ React.createElement("div", { style: styles.securedText }, "Secured by auth")))));
 }
-const overlay = {
-  position: "fixed",
-  inset: 0,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  padding: 20,
-  background: "linear-gradient(180deg, rgba(2,6,23,0.22), rgba(2,6,23,0.32))",
-  backdropFilter: "blur(6px)",
-  minHeight: "100vh",
-  zIndex: 9999
-};
-const modal = {
-  width: "100%",
-  maxWidth: 560,
-  borderRadius: 14,
-  background: "linear-gradient(180deg, rgba(15,19,24,0.6), rgba(10,12,16,0.6))",
-  // translucent neutral so background peeks through
-  border: "1px solid rgba(99,102,106,0.12)",
-  // slightly stronger neutral border
-  boxShadow: "0 20px 50px rgba(2,6,23,0.55), inset 0 1px 0 rgba(255,255,255,0.02)",
-  overflow: "hidden",
-  display: "flex",
-  flexDirection: "column",
-  transform: "translateY(-6px)"
-};
-const modalInner = {
-  padding: 18,
-  display: "flex",
-  flexDirection: "column",
-  gap: 12
-};
-const header = {
-  paddingBottom: 6,
-  borderBottom: "1px solid rgba(148,163,184,0.04)"
-};
-const brandRow = {
-  display: "flex",
-  alignItems: "center",
-  gap: 12
-};
-const logo = {
-  width: 44,
-  height: 44,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center"
-};
-const logoCircle = {
-  width: 36,
-  height: 36,
-  borderRadius: 999,
-  background: "linear-gradient(135deg,#2f3438,#11151a)",
-  boxShadow: "0 4px 12px rgba(2,6,23,0.6)"
-};
-const title = {
-  margin: 0,
-  fontSize: 18,
-  fontWeight: 600,
-  color: "#e6e6e6"
-};
-const subtitle = {
-  fontSize: 13,
-  color: "rgba(230,230,230,0.72)",
-  marginTop: 4
-};
-const oauthSection = {
-  marginTop: 8,
-  display: "flex",
-  gap: 8
-};
-const oauthButton = {
-  flex: 1,
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  padding: "10px 12px",
-  borderRadius: 10,
-  border: "1px solid rgba(148,163,184,0.08)",
-  fontSize: 14,
-  cursor: "pointer",
-  userSelect: "none",
-  gap: 8,
-  minHeight: 40
-};
-const oauthGoogle = {
-  background: "linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01))",
-  color: "#fff"
-};
-const oauthGithub = {
-  background: "linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00))",
-  color: "#fff"
-};
-const dividerRow = {
-  display: "flex",
-  alignItems: "center",
-  gap: 10,
-  marginTop: 12
-};
-const line = {
-  flex: 1,
-  height: 1,
-  background: "rgba(148,163,184,0.06)"
-};
-const orText = {
-  fontSize: 13,
-  color: "rgba(230,230,230,0.65)",
-  padding: "0 8px"
-};
-const form = {
-  display: "flex",
-  flexDirection: "column",
-  gap: 10,
-  marginTop: 6
-};
-const label = {
-  display: "flex",
-  flexDirection: "column",
-  gap: 6
-};
-const labelText = {
-  fontSize: 13,
-  color: "rgba(230,230,230,0.68)"
-};
-const input = {
-  width: "100%",
-  padding: "10px 12px",
-  borderRadius: 10,
-  background: "rgba(255,255,255,0.02)",
-  color: "#e6e6e6",
-  border: "1px solid rgba(148,163,184,0.10)",
-  fontSize: 14,
-  outline: "none",
-  boxSizing: "border-box",
-  transition: "box-shadow 120ms, border-color 120ms"
-};
-const submitButton = {
-  marginTop: 6,
-  width: "100%",
-  padding: "10px 12px",
-  borderRadius: 10,
-  background: "linear-gradient(180deg,#475569,#94a3b8)",
-  border: "none",
-  color: "#fff",
-  fontWeight: 600,
-  cursor: "pointer",
-  fontSize: 15,
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  minHeight: 44
-};
-const modalFooter = {
-  padding: "12px 18px 18px 18px",
-  borderTop: "1px solid rgba(148,163,184,0.03)",
-  display: "flex",
-  flexDirection: "column",
-  gap: 8
-};
-const belowRow = {
-  textAlign: "center",
-  display: "flex",
-  justifyContent: "center",
-  gap: 8,
-  alignItems: "center"
-};
-const muted = {
-  color: "rgba(230,230,230,0.66)",
-  fontSize: 13
-};
-const link = {
-  color: "#9fb0d9",
-  textDecoration: "none",
-  fontWeight: 600
-};
-const dividerThin = {
-  height: 1,
-  background: "rgba(148,163,184,0.04)",
-  marginTop: 6,
-  marginBottom: 6
-};
-const secured = {
-  textAlign: "center"
-};
-const securedText = {
-  color: "rgba(230,230,230,0.9)",
-  fontSize: 13,
-  fontWeight: 600
-};
-const toastContainer = {
-  position: "fixed",
-  top: 18,
-  right: 18,
-  width: 360,
-  maxWidth: "calc(100% - 36px)",
-  display: "flex",
-  flexDirection: "column",
-  gap: 10,
-  zIndex: 6e4
-};
-const toastBase = {
-  display: "flex",
-  gap: 10,
-  alignItems: "center",
-  padding: "10px 12px",
-  borderRadius: 10,
-  boxShadow: "0 8px 20px rgba(2,6,23,0.6)",
-  color: "#fff",
-  fontSize: 13,
-  minWidth: 120
-};
-const toastError = {
-  background: "#000000",
-  border: "1px solid rgba(255,255,255,0.06)"
-};
-const toastSuccess = {
-  background: "#000000",
-  border: "1px solid rgba(255,255,255,0.06)"
-};
-const toastInfo = {
-  background: "#000000",
-  border: "1px solid rgba(255,255,255,0.06)"
-};
-const toastCloseBtn = {
-  marginLeft: 8,
-  background: "transparent",
-  border: "none",
-  color: "rgba(255,255,255,0.7)",
-  cursor: "pointer",
-  fontSize: 14,
-  lineHeight: 1
+const styles = {
+  overlay: {
+    position: "fixed",
+    inset: 0,
+    display: "block",
+    // use block + scrolling container for zoom resilience
+    padding: 20,
+    background: "linear-gradient(180deg, rgba(2,6,23,0.22), rgba(2,6,23,0.32))",
+    backdropFilter: "blur(6px)",
+    overflowY: "auto",
+    // allow page scroll when zoomed
+    WebkitOverflowScrolling: "touch",
+    minHeight: "100vh",
+    zIndex: 9999
+  },
+  // modal: reduced width (not too wide), centered with margin auto, allows internal scroll
+  modal: {
+    width: "100%",
+    maxWidth: 460,
+    // reduced width per request
+    margin: "40px auto",
+    // vertical margin so modal isn't glued to top when zoomed
+    borderRadius: 14,
+    background: "linear-gradient(180deg, rgba(15,19,24,0.85), rgba(10,12,16,0.85))",
+    // translucent neutral
+    border: "1px solid rgba(99,102,106,0.12)",
+    // visible neutral border
+    boxShadow: "0 18px 48px rgba(2,6,23,0.55), inset 0 1px 0 rgba(255,255,255,0.02)",
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column",
+    maxHeight: "calc(100vh - 80px)"
+    // keep inside viewport
+  },
+  modalInner: {
+    padding: 18,
+    display: "flex",
+    flexDirection: "column",
+    gap: 12,
+    overflowY: "auto"
+  },
+  header: {
+    paddingBottom: 6,
+    borderBottom: "1px solid rgba(148,163,184,0.04)"
+  },
+  brandRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: 12
+  },
+  logo: {
+    width: 44,
+    height: 44,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  logoCircle: {
+    width: 36,
+    height: 36,
+    borderRadius: 999,
+    background: "linear-gradient(135deg,#2f3438,#11151a)",
+    boxShadow: "0 4px 12px rgba(2,6,23,0.6)"
+  },
+  title: {
+    margin: 0,
+    fontSize: 18,
+    fontWeight: 600,
+    color: "#e6e6e6"
+  },
+  subtitle: {
+    fontSize: 13,
+    color: "rgba(230,230,230,0.72)",
+    marginTop: 4
+  },
+  oauthSection: {
+    marginTop: 8,
+    display: "flex",
+    gap: 8
+  },
+  oauthButton: {
+    flex: 1,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "10px 12px",
+    borderRadius: 10,
+    border: "1px solid rgba(148,163,184,0.08)",
+    fontSize: 14,
+    cursor: "pointer",
+    userSelect: "none",
+    gap: 8,
+    minHeight: 40,
+    background: "transparent",
+    color: "#fff"
+  },
+  oauthGoogle: {
+    background: "linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01))"
+  },
+  oauthGithub: {
+    background: "linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00))"
+  },
+  dividerRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    marginTop: 12
+  },
+  line: {
+    flex: 1,
+    height: 1,
+    background: "rgba(148,163,184,0.06)"
+  },
+  orText: {
+    fontSize: 13,
+    color: "rgba(230,230,230,0.65)",
+    padding: "0 8px"
+  },
+  form: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 10,
+    marginTop: 6
+  },
+  label: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 6
+  },
+  labelText: {
+    fontSize: 13,
+    color: "rgba(230,230,230,0.68)"
+  },
+  input: {
+    width: "100%",
+    padding: "10px 12px",
+    borderRadius: 10,
+    background: "rgba(255,255,255,0.02)",
+    color: "#e6e6e6",
+    border: "1px solid rgba(148,163,184,0.10)",
+    fontSize: 14,
+    outline: "none",
+    boxSizing: "border-box",
+    transition: "box-shadow 120ms, border-color 120ms"
+  },
+  submitButton: {
+    marginTop: 6,
+    width: "100%",
+    padding: "10px 12px",
+    borderRadius: 10,
+    background: "linear-gradient(180deg,#475569,#94a3b8)",
+    border: "none",
+    color: "#fff",
+    fontWeight: 600,
+    cursor: "pointer",
+    fontSize: 15,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: 44
+  },
+  modalFooter: {
+    padding: "12px 18px 18px 18px",
+    borderTop: "1px solid rgba(148,163,184,0.03)",
+    display: "flex",
+    flexDirection: "column",
+    gap: 8
+  },
+  belowRow: {
+    textAlign: "center",
+    display: "flex",
+    justifyContent: "center",
+    gap: 8,
+    alignItems: "center"
+  },
+  muted: {
+    color: "rgba(230,230,230,0.66)",
+    fontSize: 13
+  },
+  link: {
+    color: "#9fb0d9",
+    textDecoration: "none",
+    fontWeight: 600
+  },
+  dividerThin: {
+    height: 1,
+    background: "rgba(148,163,184,0.04)",
+    marginTop: 6,
+    marginBottom: 6
+  },
+  secured: {
+    textAlign: "center"
+  },
+  securedText: {
+    color: "rgba(230,230,230,0.9)",
+    fontSize: 13,
+    fontWeight: 600
+  },
+  /* Toasts: black background */
+  toastContainer: {
+    position: "fixed",
+    top: 18,
+    right: 18,
+    width: 360,
+    maxWidth: "calc(100% - 36px)",
+    display: "flex",
+    flexDirection: "column",
+    gap: 10,
+    zIndex: 6e4
+  },
+  toastBase: {
+    display: "flex",
+    gap: 10,
+    alignItems: "center",
+    padding: "10px 12px",
+    borderRadius: 10,
+    boxShadow: "0 8px 20px rgba(2,6,23,0.6)",
+    color: "#fff",
+    fontSize: 13,
+    minWidth: 120
+  },
+  toastError: {
+    background: "#000000",
+    border: "1px solid rgba(255,255,255,0.06)"
+  },
+  toastSuccess: {
+    background: "#000000",
+    border: "1px solid rgba(255,255,255,0.06)"
+  },
+  toastInfo: {
+    background: "#000000",
+    border: "1px solid rgba(255,255,255,0.06)"
+  },
+  toastCloseBtn: {
+    marginLeft: 8,
+    background: "transparent",
+    border: "none",
+    color: "rgba(255,255,255,0.7)",
+    cursor: "pointer",
+    fontSize: 14,
+    lineHeight: 1
+  }
 };
 export {
   SignUp as default