@alfadocs/ui-kit 1.73.3 → 1.74.0

package/dist/_chunks/registration-form-B6qqeXP1.js

@@ -0,0 +1,1310 @@
+import { jsx as s, jsxs as g, Fragment as er } from "react/jsx-runtime";
+import { useState as C, useRef as R, useEffect as S, useCallback as ge, forwardRef as hn, useId as Ce, useMemo as vn, Fragment as gn } from "react";
+import { useTranslation as le, Trans as Sr } from "react-i18next";
+import { c as V } from "./index-D2ZczOXr.js";
+import { parsePhoneNumberFromString as Cn } from "libphonenumber-js/min";
+import { i as Ze, E as Er } from "./email-input-C7THAwh2.js";
+import { A as ce } from "./alert-9kEwDza3.js";
+import { B as oe } from "./button-DohK_Ak_.js";
+import { C as kr } from "./card-BA4Ig_kn.js";
+import { C as wn } from "./checkbox-BjDv-r3o.js";
+import { D as bn } from "./dev-bypass-button-B7ePcJcg.js";
+import { E as Nn } from "./error-summary-mGxIyDAY.js";
+import { F as z } from "./form-field-Ani72sVY.js";
+import { L as Ir } from "./list-CNnn7DOD.js";
+import { P as Rr } from "./password-input-BokZ_rnT.js";
+import { u as yn } from "./use-password-requirements-C8DdwPEy.js";
+import { P as Fn } from "./phone-input-EwVuqFik.js";
+import { R as xn } from "./recaptcha-widget-CsvwlYTE.js";
+import { S as Sn } from "./select-4S-eYZUf.js";
+import { S as Ar } from "./state-backed-text-input-Cgh4ms3p.js";
+import { i as Kr } from "./is-development-CLUAnsU7.js";
+import { u as Lr } from "./use-state-backed-input-DhRQo6gM.js";
+import { a as Xr, i as En } from "./safe-href-5dbsfbQn.js";
+import { u as qr } from "./use-field-match-C8ug3sdQ.js";
+import { B as kn } from "./brand-mark-DLk9kD8g.js";
+import { u as In, b as Rn, a as An } from "./use-registration-submit-CLGHxwoT.js";
+import { O as Ln } from "./otp-input-CGMu30_e.js";
+import { C as qn } from "./circle-check-BN6rz4NV.js";
+import { P as Jr } from "./pencil-B1sKKyuT.js";
+import { C as Pn } from "./check-DrFSN__t.js";
+import { C as Tn } from "./circle-alert-rGDZ73Wh.js";
+const Dn = [
+  "invalid",
+  "expired",
+  "rate_limited",
+  "error"
+], we = { ok: !1, reason: "error" }, Pr = (n) => typeof n == "number" && Number.isFinite(n) && n >= 0 ? n : void 0;
+function Bn(n) {
+  if (typeof n != "object" || n === null) return null;
+  const r = n;
+  if (typeof r.ok != "boolean") return null;
+  const c = { ok: r.ok };
+  typeof r.message == "string" && (c.message = r.message), Dn.includes(r.reason) && (c.reason = r.reason);
+  const t = Pr(r.retryAfterSeconds);
+  t !== void 0 && (c.retryAfterSeconds = t);
+  const d = Pr(r.resendAfterSeconds);
+  return d !== void 0 && (c.resendAfterSeconds = d), typeof r.devCode == "string" && (c.devCode = r.devCode), typeof r.value == "string" && (c.value = r.value), c;
+}
+function On(n) {
+  const r = n.headers.get("Retry-After");
+  if (!(!r || !/^\d+$/.test(r.trim())))
+    return Number(r.trim());
+}
+async function Tr(n, r) {
+  if (!Xr(n))
+    return Kr() && console.warn(
+      `RegistrationForm: verification URL "${n}" is not a path or an address on this site, so no request was sent.`
+    ), we;
+  try {
+    const c = await fetch(n, {
+      method: "POST",
+      credentials: "same-origin",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        "X-Requested-With": "XMLHttpRequest"
+      },
+      body: JSON.stringify(r)
+    }), t = c.status === 429;
+    if (!t && (c.status < 200 || c.status >= 500))
+      return we;
+    let d = null;
+    try {
+      d = await c.json();
+    } catch {
+      d = null;
+    }
+    const w = Bn(d);
+    if (t) {
+      const l = w ?? { ok: !1 }, a = l.retryAfterSeconds ?? On(c) ?? void 0;
+      return {
+        ...l,
+        ok: !1,
+        reason: "rate_limited",
+        ...a !== void 0 ? { retryAfterSeconds: a } : {}
+      };
+    }
+    return w ? c.status >= 400 ? w.ok ? we : { ...w, reason: w.reason ?? "error" } : w : we;
+  } catch {
+    return we;
+  }
+}
+function Dr(n) {
+  if ("sendUrl" in n && n.sendUrl !== void 0) {
+    const { sendUrl: r, verifyUrl: c } = n;
+    return {
+      onSendCode: (t) => Tr(r, { value: t }),
+      onVerifyCode: (t, d) => Tr(c, { value: t, code: d })
+    };
+  }
+  return {
+    onSendCode: n.onSendCode,
+    onVerifyCode: n.onVerifyCode
+  };
+}
+const Br = 6, Mn = 30, Or = (n) => ({
+  reason: n.reason ?? "error",
+  message: n.message
+});
+function Mr({
+  config: n,
+  value: r
+}) {
+  const c = (n == null ? void 0 : n.codeLength) ?? Br, [t, d] = C("idle"), [w, l] = C(""), [a, b] = C(
+    null
+  ), [ee, N] = C(0), [U, E] = C(), [q, B] = C(""), W = R({ config: n, value: r });
+  W.current = { config: n, value: r };
+  const A = R(0), [k] = C(
+    () => (n == null ? void 0 : n.verified) === !0 ? r : null
+  ), [G, O] = C(!1), K = (n == null ? void 0 : n.verified) === !0 && !G, X = K || t === "verified", J = R(!1);
+  S(() => {
+    var v, p;
+    t === "verified" && !J.current && (J.current = !0, (p = (v = W.current.config) == null ? void 0 : v.onVerifiedChange) == null || p.call(v, !0));
+  }, [t]), S(() => {
+    if (ee <= 0) return;
+    const v = setTimeout(() => N((p) => p - 1), 1e3);
+    return () => clearTimeout(v);
+  }, [ee]);
+  const I = (v, p) => v.trim().toLowerCase() === p.trim().toLowerCase();
+  S(() => {
+    G && k !== null && I(r, k) && O(!1);
+  }, [r]);
+  const P = ge(() => {
+    A.current += 1, d((v) => v === "verified" ? v : "idle"), l(""), b(null), E(void 0), B(""), N(0);
+  }, []);
+  S(() => {
+    t !== "verified" && (t === "sent" || t === "verifying" || t === "sending") && r !== q && P();
+  }, [r, q, t, P]);
+  const be = R(r);
+  S(() => {
+    be.current !== r && (be.current = r, t === "idle" && b(null));
+  }, [r, t]);
+  const Ie = ge(() => {
+    const { config: v, value: p } = W.current;
+    if (!v) return;
+    const te = A.current += 1;
+    d("sending"), b(null), l(""), B(p), Dr(v).onSendCode(p).then(
+      (x) => x,
+      () => ({ ok: !1, reason: "error" })
+    ).then((x) => {
+      if (te === A.current) {
+        if (x.ok) {
+          d("sent"), E(x.devCode), N(x.resendAfterSeconds ?? Mn);
+          return;
+        }
+        d("idle"), B(""), b(Or(x)), x.reason === "rate_limited" && x.retryAfterSeconds && N(x.retryAfterSeconds);
+      }
+    });
+  }, []), y = ge(
+    (v) => {
+      const { config: p, value: te } = W.current;
+      if (!p) return;
+      const x = p.codeLength ?? Br, Ne = v ?? w;
+      if (Ne.length !== x) return;
+      const Re = A.current += 1;
+      d("verifying"), b(null), Dr(p).onVerifyCode(te, Ne).then(
+        (m) => m,
+        () => ({ ok: !1, reason: "error" })
+      ).then((m) => {
+        if (Re === A.current) {
+          if (m.ok) {
+            d("verified"), l(""), E(void 0), N(0);
+            return;
+          }
+          d("sent"), l(""), b(Or(m)), m.reason === "rate_limited" && m.retryAfterSeconds && N(m.retryAfterSeconds), m.reason === "expired" && N(0);
+        }
+      });
+    },
+    [w]
+  ), me = K && (n == null ? void 0 : n.allowChange) === !0, M = ge(() => {
+    A.current += 1, O(!0), d("idle"), l(""), b(null), E(void 0), B(""), N(0);
+  }, []), fe = ge((v) => {
+    l(v), b((p) => p && null);
+  }, []);
+  return {
+    enabled: n !== void 0,
+    status: K ? "verified" : t,
+    verified: X,
+    codeLength: c,
+    code: w,
+    setCode: fe,
+    failure: a,
+    cooldown: ee,
+    devCode: U,
+    sentTo: q,
+    send: Ie,
+    verify: y,
+    reset: P,
+    changeable: me,
+    unlock: M
+  };
+}
+function Yr(n) {
+  const { t: r } = le("ui");
+  if (n) {
+    if (n.message) return n.message;
+    switch (n.reason) {
+      case "invalid":
+        return r("registrationForm.verification.invalidCode");
+      case "expired":
+        return r("registrationForm.verification.expiredCode");
+      case "rate_limited":
+        return r("registrationForm.verification.rateLimited");
+      default:
+        return r("registrationForm.verification.sendFailed");
+    }
+  }
+}
+function _r(n) {
+  const r = Yr(n.failure);
+  return n.status === "idle" ? r : void 0;
+}
+function jr({
+  state: n,
+  canSend: r
+}) {
+  const { t: c } = le("ui"), t = n.status === "sending";
+  if (n.status !== "idle" && !t) return null;
+  const d = n.cooldown > 0;
+  return /* @__PURE__ */ s(
+    oe,
+    {
+      type: "button",
+      intent: "secondary",
+      loading: t,
+      disabled: !r,
+      "aria-disabled": d || void 0,
+      "data-action": "send-code",
+      className: "ds:shrink-0",
+      onClick: () => {
+        d || n.send();
+      },
+      children: t ? c("registrationForm.verification.sendingCode") : d ? c("registrationForm.verification.resendIn", {
+        seconds: n.cooldown
+      }) : c("registrationForm.verification.sendCode")
+    }
+  );
+}
+function Hr({
+  field: n,
+  state: r,
+  canChange: c = !0,
+  changeWhenVerified: t = !1,
+  onUnlocked: d,
+  onVerified: w
+}) {
+  const { t: l } = le("ui"), a = R(null), b = Yr(r.failure), ee = r.status === "sent" || r.status === "verifying", N = r.status === "verifying", U = r.code.length === r.codeLength, E = () => {
+    var I, P;
+    return (P = (I = a.current) == null ? void 0 : I.querySelector("input")) == null ? void 0 : P.focus();
+  }, q = R(r.status), B = R(r.failure);
+  S(() => {
+    const I = q.current;
+    q.current = r.status, r.status === "sent" && I === "sending" && E(), r.status === "sent" && I === "verifying" && r.failure && E(), r.status === "verified" && I === "verifying" && w();
+  }, [r.status]), S(() => {
+    r.failure && r.failure !== B.current && r.status === "sent" && E(), B.current = r.failure;
+  }, [r.failure, r.status]);
+  const [W, A] = C(""), k = r.cooldown > 0, G = R(!1);
+  S(() => {
+    k && !G.current ? A(
+      l("registrationForm.verification.resendIn", {
+        seconds: r.cooldown
+      })
+    ) : !k && G.current && A(l("registrationForm.verification.resendCode")), G.current = k;
+  }, [k, l]);
+  const O = n === "email", K = O ? l("registrationForm.verification.codeSentEmail", {
+    value: r.sentTo
+  }) : l("registrationForm.verification.codeSentPhone", {
+    value: r.sentTo
+  }), X = l(O ? "registrationForm.verification.changeEmail" : "registrationForm.verification.changePhone"), J = l(O ? "registrationForm.verification.verifiedEmail" : "registrationForm.verification.verifiedPhone");
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      ref: a,
+      "data-slot": "verification",
+      className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]",
+      children: [
+        /* @__PURE__ */ s("div", { role: "status", className: r.verified ? void 0 : "ds:sr-only", children: r.verified ? /* @__PURE__ */ g("p", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)] type-body-sm ds:text-success", children: [
+          /* @__PURE__ */ s(qn, { "aria-hidden": "true", className: "ds:size-4 ds:shrink-0" }),
+          /* @__PURE__ */ s("span", { children: J })
+        ] }) : W }),
+        t && r.changeable && /* @__PURE__ */ s(
+          oe,
+          {
+            type: "button",
+            intent: "secondary",
+            startIcon: /* @__PURE__ */ s(Jr, { "aria-hidden": "true" }),
+            "data-action": "change-value",
+            className: "ds:self-start",
+            onClick: () => {
+              r.unlock(), d == null || d();
+            },
+            children: X
+          }
+        ),
+        ee && /* @__PURE__ */ g(er, { children: [
+          /* @__PURE__ */ s("p", { className: "type-body-sm ds:text-[var(--muted-foreground)]", children: K }),
+          r.devCode && /* @__PURE__ */ s(ce, { variant: "info", announce: "off", children: /* @__PURE__ */ s(ce.Description, { children: l("registrationForm.verification.devCode", {
+            code: r.devCode
+          }) }) }),
+          /* @__PURE__ */ s(
+            z,
+            {
+              label: l("registrationForm.verification.codeLabel"),
+              error: b,
+              children: /* @__PURE__ */ s(
+                Ln,
+                {
+                  length: r.codeLength,
+                  mode: "numeric",
+                  webOtp: n === "phone",
+                  value: r.code,
+                  onChange: r.setCode,
+                  onComplete: (I) => r.verify(I),
+                  disabled: N
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ g("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-sm)]", children: [
+            /* @__PURE__ */ s(
+              oe,
+              {
+                type: "button",
+                intent: "primary",
+                size: "md",
+                loading: N,
+                "aria-disabled": !U || void 0,
+                "data-action": "verify-code",
+                onClick: () => {
+                  U && r.verify();
+                },
+                children: l(N ? "registrationForm.verification.verifying" : "registrationForm.verification.verify")
+              }
+            ),
+            /* @__PURE__ */ s(
+              oe,
+              {
+                type: "button",
+                intent: "outline",
+                size: "md",
+                disabled: N,
+                "aria-disabled": k || void 0,
+                "data-action": "resend-code",
+                onClick: () => {
+                  k || r.send();
+                },
+                children: k ? l("registrationForm.verification.resendIn", {
+                  seconds: r.cooldown
+                }) : l("registrationForm.verification.resendCode")
+              }
+            ),
+            c && /* @__PURE__ */ s(
+              oe,
+              {
+                type: "button",
+                intent: "link",
+                size: "md",
+                disabled: N,
+                "data-action": "change-value",
+                onClick: r.reset,
+                children: X
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function _n({
+  field: n,
+  state: r,
+  onUnlocked: c
+}) {
+  const { t } = le("ui");
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      "data-slot": "change-slot",
+      className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]",
+      children: [
+        /* @__PURE__ */ s(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "type-label ds:invisible ds:hidden ds:@[544px]/registration:block",
+            children: " "
+          }
+        ),
+        /* @__PURE__ */ s(
+          oe,
+          {
+            type: "button",
+            intent: "secondary",
+            startIcon: /* @__PURE__ */ s(Jr, { "aria-hidden": "true" }),
+            "data-action": "change-value",
+            className: "ds:self-start",
+            onClick: () => {
+              r.unlock(), c();
+            },
+            children: t(n === "email" ? "registrationForm.verification.changeEmail" : "registrationForm.verification.changePhone")
+          }
+        )
+      ]
+    }
+  );
+}
+const $r = [
+  "firstName",
+  "lastName",
+  "email",
+  "emailConfirm",
+  "password",
+  "passwordConfirm",
+  "phone",
+  "branch",
+  "terms"
+], jn = V(
+  "ds:@container/registration ds:w-full ds:text-start ds:text-[var(--foreground)]"
+), Hn = V(
+  "ds:grid ds:grid-cols-1 ds:items-start ds:gap-[var(--spacing-md)]",
+  {
+    variants: {
+      columns: {
+        /** A field alone in its row takes the full width. */
+        one: "",
+        /** Two fields side by side once the card is wide enough. */
+        two: "ds:@[544px]/registration:grid-cols-2"
+      }
+    },
+    defaultVariants: { columns: "two" }
+  }
+), $n = V("ds:relative ds:flex ds:gap-[var(--spacing-sm)]", {
+  variants: {
+    logo: {
+      /** A centred column under the mark. */
+      true: "ds:flex-col ds:items-center",
+      /** The heading at the start edge, the shortcut at the end. */
+      false: "ds:items-start ds:justify-between"
+    }
+  },
+  defaultVariants: { logo: !0 }
+}), zn = V(
+  "ds:flex ds:min-w-0 ds:flex-col ds:gap-[var(--spacing-xs)]",
+  {
+    variants: {
+      centred: { true: "ds:items-center ds:text-center", false: "" }
+    },
+    defaultVariants: { centred: !0 }
+  }
+), Un = V("ds:shrink-0", {
+  variants: {
+    corner: { true: "ds:absolute ds:top-0 ds:end-0", false: "" }
+  },
+  defaultVariants: { corner: !0 }
+}), Wn = V(
+  "ds:rounded-[var(--radius-sm)] ds:underline ds:underline-offset-4 ds:text-[var(--foreground)] ds:focus-visible:outline-solid ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+  {
+    variants: {
+      weight: { normal: "", strong: "ds:font-semibold" }
+    },
+    defaultVariants: { weight: "normal" }
+  }
+), Gn = V(
+  "ds:focus-visible:outline-solid ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]"
+), Kn = V(
+  "ds:text-destructive ds:ms-[var(--spacing-xs)]"
+), Xn = {
+  minLength: 12,
+  uppercase: !0,
+  lowercase: !0,
+  digit: !0,
+  charset: "ascii"
+}, Jn = "Alfadocs", Yn = /<(terms|privacy)>([\s\S]*?)<\/\1>/, Qn = /<\/?(?!(?:terms|privacy)\b)[a-z][^>]*>/gi, Ve = (n) => n && En(n) ? n : void 0, zr = (n) => Object.values(n).some(Boolean), Ur = (n) => {
+  var r;
+  return ((r = Cn(n)) == null ? void 0 : r.isPossible()) ?? !1;
+};
+function ke({
+  href: n,
+  newTab: r = !1,
+  weight: c,
+  action: t,
+  children: d
+}) {
+  const { t: w } = le("ui");
+  return /* @__PURE__ */ g(
+    "a",
+    {
+      href: n,
+      target: r ? "_blank" : void 0,
+      rel: r ? "noopener noreferrer" : void 0,
+      "data-action": t,
+      className: Wn({ weight: c }),
+      children: [
+        d,
+        r && /* @__PURE__ */ s("span", { className: "ds:sr-only", children: w("link.opensInNewTab") })
+      ]
+    }
+  );
+}
+function Wr({ children: n }) {
+  return /* @__PURE__ */ s(er, { children: n });
+}
+function Gr(n) {
+  if (n.enabled)
+    return n.verified ? "verified" : n.status === "sent" || n.status === "verifying" ? "sent" : "idle";
+}
+const Zn = [
+  ["firstName", "lastName"],
+  ["email", "emailConfirm"],
+  ["password", "passwordConfirm"],
+  ["phone", "branch"]
+];
+function Vn(n) {
+  const r = [];
+  for (const c of Zn) {
+    const t = c.filter(n);
+    if (t.length === 0) continue;
+    const d = r[r.length - 1];
+    t.length === 1 && (d == null ? void 0 : d.length) === 1 ? d.push(t[0]) : r.push(t);
+  }
+  return r;
+}
+const es = hn(
+  ({
+    title: n,
+    description: r,
+    headingLevel: c = 2,
+    showLogo: t = !0,
+    logoMotion: d = "assemble",
+    children: w,
+    fields: l,
+    initialValues: a,
+    errors: b,
+    emailReadOnly: ee = !1,
+    emailDescription: N,
+    blockPaste: U,
+    blockCopy: E,
+    branches: q,
+    passwordPolicy: B = Xn,
+    termsHref: W,
+    privacyHref: A,
+    termsLabel: k,
+    termsDescription: G,
+    termsLabelText: O,
+    termsDescriptionText: K,
+    notice: X,
+    benefits: J,
+    loginHref: I,
+    recaptchaSiteKey: P,
+    submitLabel: be,
+    submitting: Ie = !1,
+    devBypass: y,
+    onSubmit: me,
+    fieldNames: M,
+    action: fe,
+    hiddenFields: v,
+    verification: p,
+    requireVerification: te = !0,
+    className: x,
+    ...Ne
+  }, Re) => {
+    const { t: m, i18n: rr } = le("ui"), nr = Ce(), Qr = Ce(), T = (e) => `${Qr}-${e}`, sr = Ce(), or = Ce(), tr = Ce(), Y = M !== void 0, Zr = !!(q && q.length > 0), [Vr] = C(() => !!(a != null && a.email)), Q = ee && Vr, f = (e) => e === "email" || e === "password" ? !0 : l && !l.includes(e) ? !1 : e === "branch" ? Zr : e === "emailConfirm" ? !Q && !pe : !0, [i, Ae] = C(() => ({
+      firstName: (a == null ? void 0 : a.firstName) ?? "",
+      lastName: (a == null ? void 0 : a.lastName) ?? "",
+      email: (a == null ? void 0 : a.email) ?? "",
+      emailConfirm: (a == null ? void 0 : a.emailConfirm) ?? "",
+      password: "",
+      passwordConfirm: "",
+      phone: (a == null ? void 0 : a.phone) ?? "",
+      branch: (a == null ? void 0 : a.branch) ?? "",
+      terms: (a == null ? void 0 : a.terms) ?? !1
+    })), [Le, ir] = C(
+      () => Ur((a == null ? void 0 : a.phone) ?? "")
+    ), [en, qe] = C(() => ({
+      email: !!(a != null && a.email)
+    })), [ue, ar] = C(!1), [Pe, Te] = C(
+      () => b ?? {}
+    ), _ = Mr({
+      config: p == null ? void 0 : p.email,
+      value: i.email
+    }), re = Mr({
+      config: f("phone") ? p == null ? void 0 : p.phone : void 0,
+      value: i.phone
+    }), pe = _.verified, De = re.verified, ye = $r.filter(f), dr = !Q && pe && _.changeable, Be = te && _.enabled && !pe, Oe = te && re.enabled && !De, rn = _r(_), nn = _r(re), D = (e, o) => {
+      Ae((u) => ({ ...u, [e]: o })), Te(
+        (u) => u[e] ? { ...u, [e]: void 0 } : u
+      );
+    }, ie = (e) => qe(
+      (o) => o[e] ? o : { ...o, [e]: !0 }
+    ), cr = () => {
+      Ae((e) => ({
+        ...e,
+        password: "",
+        passwordConfirm: ""
+      })), qe((e) => ({
+        ...e,
+        password: !1,
+        passwordConfirm: !1
+      }));
+    }, ae = (e) => ({
+      blockPaste: (U == null ? void 0 : U.includes(e)) ?? !1,
+      blockCopy: (E == null ? void 0 : E.includes(e)) ?? !1
+    }), lr = yn(B), Me = qr({
+      value: i.email,
+      confirmValue: i.emailConfirm,
+      kind: "email",
+      submitted: ue
+    }), _e = qr({
+      value: i.password,
+      confirmValue: i.passwordConfirm,
+      kind: "password",
+      submitted: ue
+    }), mr = {
+      firstName: f("firstName") && i.firstName.trim() === "",
+      lastName: f("lastName") && i.lastName.trim() === "",
+      // The user cannot fix a locked address, so the server judges it.
+      email: !Q && !Ze(i.email) || Be,
+      emailConfirm: f("emailConfirm") && (i.emailConfirm === "" || !Me.matches),
+      password: i.password === "" || !lr.every((e) => e.test(i.password)),
+      passwordConfirm: f("passwordConfirm") && (i.passwordConfirm === "" || !_e.matches),
+      phone: f("phone") && (i.phone === "" || !Le || Oe),
+      branch: f("branch") && i.branch === "",
+      terms: f("terms") && !i.terms
+    }, je = (e) => ue || e !== "terms" && en[e] === !0, j = m("registrationForm.required"), H = {
+      firstName: m("registrationForm.firstName"),
+      lastName: m("registrationForm.lastName"),
+      email: m("registrationForm.email"),
+      emailConfirm: m("registrationForm.emailConfirm"),
+      password: m("registrationForm.password"),
+      passwordConfirm: m("registrationForm.passwordConfirm"),
+      phone: m("registrationForm.phone"),
+      branch: m("registrationForm.branch")
+    }, ne = (e, o) => je(e) && mr[e] ? o : void 0, sn = {
+      firstName: ne("firstName", j),
+      lastName: ne("lastName", j),
+      email: je("email") && !Q && !Ze(i.email) ? i.email === "" ? j : m("inputs.email.invalid") : ue && Be ? m("registrationForm.verification.emailRequired") : void 0,
+      emailConfirm: i.emailConfirm === "" ? ne("emailConfirm", j) : Me.error,
+      password: ne(
+        "password",
+        i.password === "" ? j : m("registrationForm.passwordInvalid")
+      ),
+      passwordConfirm: i.passwordConfirm === "" ? ne("passwordConfirm", j) : _e.error,
+      phone: je("phone") && f("phone") && (i.phone === "" || !Le) ? i.phone === "" ? j : m("registrationForm.phoneInvalid") : ue && Oe ? m("registrationForm.verification.phoneRequired") : void 0,
+      branch: ne("branch", j),
+      terms: ne("terms", m("registrationForm.termsRequired"))
+    }, on = {
+      email: rn,
+      phone: nn
+    }, L = (e) => Pe[e] ?? on[e] ?? sn[e], se = R({}), $ = vn(() => {
+      const e = (o) => (u) => {
+        se.current[o] = u;
+      };
+      return {
+        firstName: e("firstName"),
+        lastName: e("lastName"),
+        email: e("email"),
+        emailConfirm: e("emailConfirm"),
+        password: e("password"),
+        passwordConfirm: e("passwordConfirm"),
+        phone: e("phone"),
+        branch: e("branch"),
+        terms: e("terms")
+      };
+    }, []), fr = Lr(i.email, $.email), ur = Lr(
+      i.emailConfirm,
+      $.emailConfirm
+    ), pr = R(null), hr = (e) => ye.find((o) => e[o]) ?? (zr(e) ? "form" : void 0), [vr] = C(
+      () => ye.some((e) => !!(b != null && b[e]))
+    ), F = In(ye, L, vr), [Fe, He] = C(() => {
+      const e = vr ? void 0 : hr(b ?? {});
+      return e ? { target: e } : null;
+    });
+    S(() => {
+      var e, o;
+      Fe && (Fe.target === "form" ? (e = pr.current) == null || e.focus() : (o = se.current[Fe.target]) == null || o.focus());
+    }, [Fe]);
+    const $e = f("phone");
+    S(() => {
+      const e = se.current.phone;
+      if (!$e || !e) return;
+      const o = () => qe(
+        (u) => u.phone ? u : { ...u, phone: !0 }
+      );
+      return e.addEventListener("blur", o), () => e.removeEventListener("blur", o);
+    }, [$e]);
+    const ze = R(null), Ue = R(null), [gr, tn] = C(null);
+    S(() => {
+      var e;
+      gr && ((e = ze.current) == null || e.requestSubmit());
+    }, [gr]);
+    const an = () => {
+      var o;
+      const e = y == null ? void 0 : y.values;
+      if (e) {
+        const u = Q || pe ? void 0 : e.email, h = {};
+        f("firstName") && e.firstName !== void 0 && (h.firstName = e.firstName), f("lastName") && e.lastName !== void 0 && (h.lastName = e.lastName), u !== void 0 && (h.email = u), f("emailConfirm") && u !== void 0 && (h.emailConfirm = u), e.password !== void 0 && (h.password = e.password), f("passwordConfirm") && e.password !== void 0 && (h.passwordConfirm = e.password), f("phone") && !De && e.phone !== void 0 && (h.phone = e.phone), f("branch") && e.branch !== void 0 && (h.branch = e.branch), f("terms") && e.terms !== void 0 && (h.terms = e.terms), Ae((de) => ({ ...de, ...h })), h.phone !== void 0 && ir(Ur(h.phone)), Te((de) => {
+          const ve = { ...de };
+          for (const Ee of Object.keys(h))
+            ve[Ee] = void 0;
+          return ve;
+        }), y.submit && tn({});
+      }
+      (o = y == null ? void 0 : y.onClick) == null || o.call(y);
+    }, he = Rn({
+      errors: b,
+      submitting: Ie,
+      native: Y,
+      captcha: !!P,
+      firstProblem: () => ye.find((e) => mr[e]),
+      onRefused: (e) => {
+        ar(!0), F.open(() => He({ target: e }));
+      },
+      deliver: (e) => {
+        var u;
+        if (Y) {
+          Ue.current && e && (Ue.current.value = e), (u = ze.current) == null || u.submit();
+          return;
+        }
+        const o = (h) => f(h) ? i[h] : "";
+        me == null || me({
+          firstName: o("firstName"),
+          lastName: o("lastName"),
+          email: i.email,
+          emailConfirm: o("emailConfirm"),
+          password: i.password,
+          passwordConfirm: o("passwordConfirm"),
+          phone: o("phone"),
+          branch: o("branch"),
+          terms: f("terms") && i.terms,
+          captchaToken: e
+        });
+      },
+      onAnswer: (e) => {
+        const o = e;
+        Te(o), zr(o) && (cr(), ar(!1), F.open(() => {
+          const u = hr(o);
+          u && He({ target: u });
+        }));
+      },
+      // The page came back from the browser's cache as it was left:
+      // the passwords must not come back with it.
+      onRestore: cr
+    }), { busy: We, captchaFailed: Ge } = he;
+    S(() => {
+      Ge && He({ target: "form" });
+    }, [Ge]);
+    const Z = (e) => Y ? M[e] : e, dn = `h${c}`, Ke = Ve(W), Xe = Ve(A), Cr = Ve(I), wr = (e) => {
+      const o = e.replace(Qn, "").split(Yn);
+      return o.map((u, h) => {
+        if (h % 3 !== 0) return null;
+        const de = o[h + 1], ve = o[h + 2], Ee = de === "terms" ? Ke : Xe;
+        return /* @__PURE__ */ g(gn, { children: [
+          u,
+          de === void 0 ? null : Ee ? /* @__PURE__ */ s(ke, { href: Ee, newTab: !0, children: ve }) : ve
+        ] }, h);
+      });
+    }, cn = k ?? (O ? wr(O) : void 0), Je = G ?? (K ? wr(K) : void 0), Ye = (J == null ? void 0 : J.filter(Boolean)) ?? [], ln = !!X || Ye.length > 0 || !!w, mn = Y && fe && Xr(fe) ? fe : void 0, xe = [
+      Pe.form,
+      ...$r.filter((e) => !f(e)).map(
+        (e) => Pe[e]
+      ),
+      Ge ? m("inputs.recaptcha.error") : void 0
+    ].filter(Boolean).join(" ") || void 0, fn = An(
+      xe,
+      F.listed.length > 0
+    ), Se = L("terms"), un = [
+      Je ? or : void 0,
+      Se ? sr : void 0
+    ].filter(Boolean).join(" ") || void 0, br = new Set(Object.values(M ?? {})), Nr = Y ? Object.entries(v ?? {}) : [], Qe = Nr.filter(([e]) => br.has(e)).map(([e]) => e).join(", ");
+    S(() => {
+      Qe && Kr() && console.warn(
+        `RegistrationForm: hiddenFields "${Qe}" is also named in fieldNames and was left out. The form's own field wins.`
+      );
+    }, [Qe]);
+    const yr = Q || pe, Fr = /* @__PURE__ */ s(
+      Er,
+      {
+        ref: fr.ref,
+        name: Z("email"),
+        errorMessage: null,
+        disableBuiltInValidation: yr,
+        readOnly: yr,
+        onChange: fr.quiet((e) => D("email", e.target.value)),
+        onBlur: () => ie("email"),
+        ...ae("email")
+      }
+    ), xr = /* @__PURE__ */ s(
+      Fn,
+      {
+        ref: $.phone,
+        name: Y ? void 0 : "phone",
+        value: i.phone,
+        readOnly: De,
+        onChange: (e, o) => {
+          D("phone", e), ir(o.isPossible);
+        }
+      }
+    ), pn = (e) => {
+      switch (e) {
+        case "firstName":
+          return /* @__PURE__ */ s(
+            z,
+            {
+              id: T(e),
+              label: H.firstName,
+              required: !0,
+              error: L("firstName"),
+              announceError: !F.lists("firstName"),
+              "data-field": "firstName",
+              children: /* @__PURE__ */ s(
+                Ar,
+                {
+                  ref: $.firstName,
+                  name: Z("firstName"),
+                  autoComplete: "given-name",
+                  value: i.firstName,
+                  onChange: (o) => D("firstName", o.target.value),
+                  onBlur: () => ie("firstName"),
+                  ...ae("firstName")
+                }
+              )
+            },
+            e
+          );
+        case "lastName":
+          return /* @__PURE__ */ s(
+            z,
+            {
+              id: T(e),
+              label: H.lastName,
+              required: !0,
+              error: L("lastName"),
+              announceError: !F.lists("lastName"),
+              "data-field": "lastName",
+              children: /* @__PURE__ */ s(
+                Ar,
+                {
+                  ref: $.lastName,
+                  name: Z("lastName"),
+                  autoComplete: "family-name",
+                  value: i.lastName,
+                  onChange: (o) => D("lastName", o.target.value),
+                  onBlur: () => ie("lastName"),
+                  ...ae("lastName")
+                }
+              )
+            },
+            e
+          );
+        case "email":
+          return /* @__PURE__ */ s(
+            z,
+            {
+              id: T(e),
+              label: H.email,
+              required: !Q,
+              description: N,
+              error: L("email"),
+              announceError: !F.lists("email"),
+              "data-field": "email",
+              "data-verification": Gr(_),
+              children: _.enabled ? /* @__PURE__ */ g("div", { className: "ds:@container/verify ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", children: [
+                /* @__PURE__ */ g("div", { className: "ds:flex ds:flex-col ds:items-start ds:gap-[var(--spacing-sm)] ds:@[384px]/verify:flex-row", children: [
+                  /* @__PURE__ */ s("div", { className: "ds:min-w-0 ds:w-full ds:@[384px]/verify:w-auto ds:@[384px]/verify:flex-1", children: Fr }),
+                  /* @__PURE__ */ s(
+                    jr,
+                    {
+                      state: _,
+                      canSend: Ze(i.email)
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ s(
+                  Hr,
+                  {
+                    field: "email",
+                    state: _,
+                    canChange: !Q,
+                    onVerified: () => {
+                      var o;
+                      return (o = se.current.email) == null ? void 0 : o.focus();
+                    }
+                  }
+                )
+              ] }) : Fr
+            },
+            e
+          );
+        case "emailConfirm":
+          return dr ? /* @__PURE__ */ s(
+            _n,
+            {
+              field: "email",
+              state: _,
+              onUnlocked: () => {
+                var o;
+                D("emailConfirm", ""), (o = se.current.email) == null || o.focus();
+              }
+            },
+            e
+          ) : /* @__PURE__ */ s(
+            z,
+            {
+              id: T(e),
+              label: H.emailConfirm,
+              required: !0,
+              error: L("emailConfirm"),
+              announceError: !F.lists("emailConfirm"),
+              "data-field": "emailConfirm",
+              children: /* @__PURE__ */ s(
+                Er,
+                {
+                  ref: ur.ref,
+                  name: Z("emailConfirm"),
+                  disableBuiltInValidation: !0,
+                  onChange: ur.quiet(
+                    (o) => D("emailConfirm", o.target.value)
+                  ),
+                  onBlur: () => {
+                    ie("emailConfirm"), Me.confirmProps.onBlur();
+                  },
+                  ...ae("emailConfirm")
+                }
+              )
+            },
+            e
+          );
+        case "password":
+          return /* @__PURE__ */ s(
+            z,
+            {
+              id: T(e),
+              label: H.password,
+              required: !0,
+              error: L("password"),
+              announceError: !F.lists("password"),
+              "data-field": "password",
+              children: /* @__PURE__ */ s(
+                Rr,
+                {
+                  ref: $.password,
+                  name: Z("password") ?? "",
+                  autoComplete: "new-password",
+                  requirements: lr,
+                  value: i.password,
+                  onChange: (o) => D("password", o.target.value),
+                  onBlur: () => ie("password"),
+                  ...ae("password")
+                }
+              )
+            },
+            e
+          );
+        case "passwordConfirm":
+          return /* @__PURE__ */ s(
+            z,
+            {
+              id: T(e),
+              label: H.passwordConfirm,
+              required: !0,
+              error: L("passwordConfirm"),
+              announceError: !F.lists("passwordConfirm"),
+              "data-field": "passwordConfirm",
+              children: /* @__PURE__ */ s(
+                Rr,
+                {
+                  ref: $.passwordConfirm,
+                  name: Z("passwordConfirm") ?? "",
+                  autoComplete: "new-password",
+                  value: i.passwordConfirm,
+                  onChange: (o) => D("passwordConfirm", o.target.value),
+                  onBlur: () => {
+                    ie("passwordConfirm"), _e.confirmProps.onBlur();
+                  },
+                  ...ae("passwordConfirm")
+                }
+              )
+            },
+            e
+          );
+        case "phone":
+          return /* @__PURE__ */ s(
+            z,
+            {
+              id: T(e),
+              label: H.phone,
+              required: !0,
+              error: L("phone"),
+              announceError: !F.lists("phone"),
+              "data-field": "phone",
+              "data-verification": Gr(re),
+              children: re.enabled ? /* @__PURE__ */ g("div", { className: "ds:@container/verify ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", children: [
+                /* @__PURE__ */ g("div", { className: "ds:flex ds:flex-col ds:items-start ds:gap-[var(--spacing-sm)] ds:@[384px]/verify:flex-row", children: [
+                  /* @__PURE__ */ s("div", { className: "ds:min-w-0 ds:w-full ds:@[384px]/verify:w-auto ds:@[384px]/verify:flex-1", children: xr }),
+                  /* @__PURE__ */ s(
+                    jr,
+                    {
+                      state: re,
+                      canSend: i.phone !== "" && Le
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ s(
+                  Hr,
+                  {
+                    field: "phone",
+                    state: re,
+                    changeWhenVerified: !0,
+                    onUnlocked: () => {
+                      var o;
+                      return (o = se.current.phone) == null ? void 0 : o.focus();
+                    },
+                    onVerified: () => {
+                      var o;
+                      return (o = se.current.phone) == null ? void 0 : o.focus();
+                    }
+                  }
+                )
+              ] }) : xr
+            },
+            e
+          );
+        case "branch":
+          return /* @__PURE__ */ s(
+            z,
+            {
+              id: T(e),
+              label: H.branch,
+              required: !0,
+              error: L("branch"),
+              announceError: !F.lists("branch"),
+              "data-field": "branch",
+              children: /* @__PURE__ */ s(
+                Sn,
+                {
+                  ref: $.branch,
+                  name: Z("branch"),
+                  options: q ?? [],
+                  value: i.branch,
+                  onValueChange: (o) => D("branch", o)
+                }
+              )
+            },
+            e
+          );
+      }
+    };
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        ref: Re,
+        ...Ne,
+        "data-component": "registration-form",
+        className: jn({ className: x }),
+        children: /* @__PURE__ */ s(kr, { variant: "elevated", children: /* @__PURE__ */ g(kr.Body, { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-lg)]", children: [
+          /* @__PURE__ */ g("div", { className: $n({ logo: t }), children: [
+            /* @__PURE__ */ g("div", { className: zn({ centred: t }), children: [
+              t && /* @__PURE__ */ s(kn, { motion: d, label: Jn }),
+              /* @__PURE__ */ s(dn, { id: nr, className: "type-title-card", children: n ?? m("registrationForm.title") }),
+              r && /* @__PURE__ */ s("p", { className: "type-body-sm ds:text-[var(--muted-foreground)]", children: r })
+            ] }),
+            y && (y.values || y.onClick) && /* @__PURE__ */ s("div", { className: Un({ corner: t }), children: /* @__PURE__ */ s(
+              bn,
+              {
+                label: y.label,
+                onClick: an
+              }
+            ) })
+          ] }),
+          ln ? /* @__PURE__ */ g(
+            "div",
+            {
+              "data-slot": "host-content",
+              className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]",
+              children: [
+                X ? /* @__PURE__ */ s(ce, { variant: "info", announce: "off", children: /* @__PURE__ */ s(ce.Description, { children: X }) }) : null,
+                Ye.length > 0 ? /* @__PURE__ */ s(Ir, { density: "compact", children: Ye.map((e, o) => /* @__PURE__ */ s(
+                  Ir.Item,
+                  {
+                    leading: /* @__PURE__ */ s(Pn, { "aria-hidden": "true" }),
+                    title: e
+                  },
+                  `${o}-${e}`
+                )) }) : null,
+                w
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ g(
+            "form",
+            {
+              ref: ze,
+              noValidate: !0,
+              method: "post",
+              action: mn,
+              "aria-labelledby": nr,
+              "aria-busy": We || void 0,
+              onSubmit: he.handleSubmit,
+              className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]",
+              children: [
+                /* @__PURE__ */ s(
+                  Nn,
+                  {
+                    ref: F.ref,
+                    headingLevel: c + 1,
+                    "aria-describedby": xe ? tr : void 0,
+                    errors: F.listed.map((e) => {
+                      const o = L(e) ?? "";
+                      return {
+                        field: e,
+                        message: o,
+                        // "This field is required." does not say which field:
+                        // the summary names it.
+                        label: o === j && e !== "terms" ? H[e] : void 0,
+                        targetId: T(e)
+                      };
+                    })
+                  }
+                ),
+                xe && /* @__PURE__ */ s(
+                  ce,
+                  {
+                    ref: pr,
+                    id: tr,
+                    variant: "error",
+                    announce: fn,
+                    tabIndex: -1,
+                    "data-field": "form",
+                    className: Gn(),
+                    children: /* @__PURE__ */ s(ce.Description, { children: xe })
+                  }
+                ),
+                Vn(
+                  (e) => e === "emailConfirm" ? f(e) || dr : f(e)
+                ).map((e) => /* @__PURE__ */ s(
+                  "div",
+                  {
+                    className: Hn({
+                      columns: e.length === 2 ? "two" : "one"
+                    }),
+                    children: e.map(pn)
+                  },
+                  e[0]
+                )),
+                Y && $e && M.phone && /* @__PURE__ */ s(
+                  "input",
+                  {
+                    type: "hidden",
+                    name: M.phone,
+                    value: i.phone
+                  }
+                ),
+                Y && M.captcha && /* @__PURE__ */ s(
+                  "input",
+                  {
+                    ref: Ue,
+                    type: "hidden",
+                    name: M.captcha,
+                    defaultValue: ""
+                  }
+                ),
+                Nr.filter(([e]) => !br.has(e)).map(([e, o]) => /* @__PURE__ */ s(
+                  "input",
+                  {
+                    type: "hidden",
+                    name: e,
+                    value: o
+                  },
+                  e
+                )),
+                f("terms") && /* @__PURE__ */ g(
+                  "div",
+                  {
+                    id: T("terms"),
+                    className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]",
+                    "data-field": "terms",
+                    children: [
+                      Je && /* @__PURE__ */ s(
+                        "p",
+                        {
+                          id: or,
+                          className: "type-body-sm ds:text-[var(--muted-foreground)]",
+                          children: Je
+                        }
+                      ),
+                      /* @__PURE__ */ s(
+                        wn,
+                        {
+                          ref: $.terms,
+                          name: Z("terms"),
+                          value: "1",
+                          checked: i.terms,
+                          onCheckedChange: (e) => D("terms", e === !0),
+                          "aria-required": "true",
+                          "aria-invalid": Se ? !0 : void 0,
+                          "aria-describedby": un,
+                          label: /* @__PURE__ */ g(er, { children: [
+                            cn ?? /* @__PURE__ */ s(
+                              Sr,
+                              {
+                                i18n: rr,
+                                ns: "ui",
+                                i18nKey: "registrationForm.terms",
+                                components: {
+                                  terms: Ke ? /* @__PURE__ */ s(ke, { href: Ke, newTab: !0 }) : /* @__PURE__ */ s(Wr, {}),
+                                  privacy: Xe ? /* @__PURE__ */ s(ke, { href: Xe, newTab: !0 }) : /* @__PURE__ */ s(Wr, {})
+                                }
+                              }
+                            ),
+                            /* @__PURE__ */ s(
+                              "span",
+                              {
+                                "aria-hidden": "true",
+                                className: Kn(),
+                                children: "*"
+                              }
+                            )
+                          ] })
+                        }
+                      ),
+                      Se && /* @__PURE__ */ g(
+                        "p",
+                        {
+                          id: sr,
+                          role: F.lists("terms") ? void 0 : "alert",
+                          "data-slot": "error",
+                          className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)] type-body-sm ds:text-destructive",
+                          children: [
+                            /* @__PURE__ */ s(
+                              Tn,
+                              {
+                                "aria-hidden": "true",
+                                className: "ds:size-4 ds:shrink-0"
+                              }
+                            ),
+                            /* @__PURE__ */ s("span", { children: Se })
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ s(
+                  oe,
+                  {
+                    type: "submit",
+                    intent: "primary",
+                    size: "lg",
+                    loading: We,
+                    className: "ds:w-full",
+                    "data-action": "submit",
+                    "aria-disabled": Be || Oe || void 0,
+                    children: be ?? m("registrationForm.submit")
+                  }
+                ),
+                /* @__PURE__ */ s("p", { role: "status", className: "ds:sr-only", children: We ? m("chat.message.status.sending") : "" }),
+                Cr && /* @__PURE__ */ s("p", { className: "type-body-sm ds:text-center ds:text-[var(--muted-foreground)]", children: /* @__PURE__ */ s(
+                  Sr,
+                  {
+                    i18n: rr,
+                    ns: "ui",
+                    i18nKey: "registrationForm.login",
+                    components: {
+                      login: /* @__PURE__ */ s(
+                        ke,
+                        {
+                          href: Cr,
+                          weight: "strong",
+                          action: "login"
+                        }
+                      )
+                    }
+                  }
+                ) }),
+                P && /* @__PURE__ */ s("div", { className: "ds:absolute", children: /* @__PURE__ */ s(
+                  xn,
+                  {
+                    ref: he.captcha.ref,
+                    siteKey: P,
+                    size: "invisible",
+                    announceStatus: !1,
+                    onChange: he.captcha.onChange,
+                    onError: he.captcha.onError
+                  }
+                ) })
+              ]
+            }
+          )
+        ] }) })
+      }
+    );
+  }
+);
+es.displayName = "RegistrationForm";
+export {
+  $r as R,
+  es as a
+};
+//# sourceMappingURL=registration-form-B6qqeXP1.js.map