flowlink-auth 2.8.1 → 2.8.3

package/dist/SignUp.js

@@ -24,7 +24,7 @@ function SignUp({ agency = { name: "MyApp", logo: "" } }) {
   useEffect(() => {
     const meta = document.createElement("meta");
     meta.name = "viewport";
-    meta.content = "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no";
+    meta.content = "width=device-width, initial-scale=1, maximum-scale=1";
     document.head.appendChild(meta);
     return () => {
       if (redirectTimer.current) clearTimeout(redirectTimer.current);
@@ -40,7 +40,10 @@ function SignUp({ agency = { name: "MyApp", logo: "" } }) {
   function showToast(type, message, ms = 5e3) {
     const id = ++toastId.current;
     const t = { id, type, message, _timer: null };
-    setToasts((prev) => [t, ...prev].slice(0, 6));
+    setToasts((prev) => {
+      const next = [t, ...prev].slice(0, 6);
+      return next;
+    });
     const timer = setTimeout(() => {
       setToasts((prev) => prev.filter((x) => x.id !== id));
     }, ms);
@@ -91,8 +94,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 txt = await res.text().catch(() => "");
-        return { _raw: txt };
+        const text = await res.text().catch(() => "");
+        return { _raw: text };
       });
       if (!res.ok) {
         const errMsg = data?.error || data?._raw || `Signup failed (${res.status})`;
@@ -123,7 +126,9 @@ 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 }
@@ -146,14 +151,15 @@ function SignUp({ agency = { name: "MyApp", logo: "" } }) {
     if (e && typeof e.preventDefault === "function") e.preventDefault();
     startOAuthFlow("github");
   };
-  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(
+  return /* @__PURE__ */ React.createElement("div", { style: overlay }, /* @__PURE__ */ React.createElement("div", { style: toastContainer, "aria-live": "polite", "aria-atomic": "true" }, toasts.map((t) => /* @__PURE__ */ React.createElement(
     "div",
     {
       key: t.id,
       role: "status",
+      "aria-live": "polite",
       style: {
-        ...styles.toastBase,
-        ...t.type === "error" ? styles.toastError : t.type === "success" ? styles.toastSuccess : styles.toastInfo
+        ...toastBase,
+        ...t.type === "error" ? toastError : t.type === "success" ? toastSuccess : toastInfo
       },
       onMouseEnter: () => {
         if (t._timer) clearTimeout(t._timer);
@@ -164,13 +170,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: 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(
+    /* @__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(
     "button",
     {
       onClick: handleGoogle,
       type: "button",
-      style: { ...styles.oauthButton, ...styles.oauthGoogle },
+      style: { ...oauthButton, ...oauthGoogle },
       disabled: loading || loadingOauth.google,
       "aria-disabled": loading || loadingOauth.google
     },
@@ -181,13 +187,13 @@ function SignUp({ agency = { name: "MyApp", logo: "" } }) {
     {
       onClick: handleGithub,
       type: "button",
-      style: { ...styles.oauthButton, ...styles.oauthGithub },
+      style: { ...oauthButton, ...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: 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(
+  )), /* @__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(
     "input",
     {
       id: "name",
@@ -195,10 +201,10 @@ function SignUp({ agency = { name: "MyApp", logo: "" } }) {
       value: name,
       onChange: (e) => setName(e.target.value),
       placeholder: "Your name",
-      style: styles.input,
+      style: input,
       autoComplete: "name"
     }
-  )), /* @__PURE__ */ React.createElement("label", { style: styles.label, htmlFor: "email" }, /* @__PURE__ */ React.createElement("span", { style: styles.labelText }, "Email address"), /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement("label", { style: label, htmlFor: "email" }, /* @__PURE__ */ React.createElement("span", { style: labelText }, "Email address"), /* @__PURE__ */ React.createElement(
     "input",
     {
       id: "email",
@@ -207,10 +213,10 @@ function SignUp({ agency = { name: "MyApp", logo: "" } }) {
       onChange: (e) => setEmail(e.target.value),
       required: true,
       placeholder: "you@example.com",
-      style: styles.input,
+      style: input,
       autoComplete: "email"
     }
-  )), /* @__PURE__ */ React.createElement("label", { style: styles.label, htmlFor: "password" }, /* @__PURE__ */ React.createElement("span", { style: styles.labelText }, "Password"), /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement("label", { style: label, htmlFor: "password" }, /* @__PURE__ */ React.createElement("span", { style: labelText }, "Password"), /* @__PURE__ */ React.createElement(
     "input",
     {
       id: "password",
@@ -219,262 +225,253 @@ function SignUp({ agency = { name: "MyApp", logo: "" } }) {
       onChange: (e) => setPassword(e.target.value),
       required: true,
       placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
-      style: styles.input,
+      style: input,
       autoComplete: "new-password"
     }
   )), /* @__PURE__ */ React.createElement(
     "button",
     {
       type: "submit",
-      style: styles.submitButton,
+      style: submitButton,
       disabled: loading,
       "aria-disabled": loading
     },
     loading ? "Signing up..." : "Sign Up"
-  ))), /* @__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")))));
+  ))), /* @__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")))));
 }
-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
-  }
+const overlay = {
+  position: "fixed",
+  inset: 0,
+  display: "block",
+  // page scroll model
+  padding: 20,
+  background: "linear-gradient(180deg, rgba(2,6,23,0.22), rgba(2,6,23,0.32))",
+  backdropFilter: "blur(6px)",
+  overflowY: "auto",
+  WebkitOverflowScrolling: "touch",
+  minHeight: "100vh",
+  zIndex: 9999
+};
+const modal = {
+  width: "100%",
+  maxWidth: 460,
+  // reduced width per request
+  margin: "40px auto",
+  borderRadius: 14,
+  background: "linear-gradient(180deg, rgba(15,19,24,0.6), rgba(10,12,16,0.6))",
+  border: "1px solid rgba(99,102,106,0.12)",
+  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",
+  maxHeight: "calc(100vh - 80px)"
+};
+const modalInner = {
+  padding: 18,
+  display: "flex",
+  flexDirection: "column",
+  gap: 12,
+  overflowY: "auto"
+};
+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
 };
 export {
   SignUp as default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowlink-auth",
-  "version": "2.8.1",
+  "version": "2.8.3",
   "description": "Custom auth library",
   "main": "dist/index.js",
   "types": "src/index.d.ts",