import { o as Be } from "./rolldown-runtime.js";
import { i as Le, n as Fe, t as Ve } from "./vendor/react.js";
import { t as He } from "./arrow-left.js";
import { t as $e } from "./circle-check-big.js";
import { t as Ge } from "./mail.js";
import { t as qe } from "./minus.js";
import { t as G } from "./Button.js";
import { t as Ze } from "./dist.js";
import { t as q } from "./utils.js";
import { t as Je } from "./FeaturedIcon.js";
import { t as de } from "./PageBackground.js";
var a = /* @__PURE__ */ Be(Le(), 1), Xe = Object.defineProperty, Ye = Object.defineProperties, Ke = Object.getOwnPropertyDescriptors, ae = Object.getOwnPropertySymbols, je = Object.prototype.hasOwnProperty, Ce = Object.prototype.propertyIsEnumerable, ye = (e, t, r) => t in e ? Xe(e, t, {
  enumerable: !0,
  configurable: !0,
  writable: !0,
  value: r
}) : e[t] = r, Qe = (e, t) => {
  for (var r in t || (t = {})) je.call(t, r) && ye(e, r, t[r]);
  if (ae) for (var r of ae(t)) Ce.call(t, r) && ye(e, r, t[r]);
  return e;
}, Ue = (e, t) => Ye(e, Ke(t)), et = (e, t) => {
  var r = {};
  for (var s in e) je.call(e, s) && t.indexOf(s) < 0 && (r[s] = e[s]);
  if (e != null && ae) for (var s of ae(e)) t.indexOf(s) < 0 && Ce.call(e, s) && (r[s] = e[s]);
  return r;
};
function tt(e) {
  return [
    setTimeout(e, 0),
    setTimeout(e, 10),
    setTimeout(e, 50)
  ];
}
function rt(e) {
  let t = a.useRef();
  return a.useEffect(() => {
    t.current = e;
  }), t.current;
}
var nt = 18, Ee = 40, at = `${Ee}px`, it = [
  "[data-lastpass-icon-root]",
  "com-1password-button",
  "[data-dashlanecreated]",
  '[style$="2147483647 !important;"]'
].join(",");
function lt({ containerRef: e, inputRef: t, pushPasswordManagerStrategy: r, isFocused: s }) {
  let [f, m] = a.useState(!1), [_, N] = a.useState(!1), [k, I] = a.useState(!1), F = a.useMemo(() => r === "none" ? !1 : (r === "increase-width" || r === "experimental-no-flickering") && f && _, [
    f,
    _,
    r
  ]), S = a.useCallback(() => {
    let c = e.current, E = t.current;
    if (!c || !E || k || r === "none") return;
    let v = c, P = v.getBoundingClientRect().left + v.offsetWidth, O = v.getBoundingClientRect().top + v.offsetHeight / 2, o = P - nt, R = O;
    document.querySelectorAll(it).length === 0 && document.elementFromPoint(o, R) === c || (m(!0), I(!0));
  }, [
    e,
    t,
    k,
    r
  ]);
  return a.useEffect(() => {
    let c = e.current;
    if (!c || r === "none") return;
    function E() {
      N(window.innerWidth - c.getBoundingClientRect().right >= Ee);
    }
    E();
    let v = setInterval(E, 1e3);
    return () => {
      clearInterval(v);
    };
  }, [e, r]), a.useEffect(() => {
    let c = s || document.activeElement === t.current;
    if (r === "none" || !c) return;
    let E = setTimeout(S, 0), v = setTimeout(S, 2e3), P = setTimeout(S, 5e3), O = setTimeout(() => {
      I(!0);
    }, 6e3);
    return () => {
      clearTimeout(E), clearTimeout(v), clearTimeout(P), clearTimeout(O);
    };
  }, [
    t,
    s,
    r,
    S
  ]), {
    hasPWMBadge: f,
    willPushPWMBadge: F,
    PWM_BADGE_SPACE_WIDTH: at
  };
}
var _e = a.createContext({}), Ne = a.forwardRef((e, t) => {
  var r = e, { value: s, onChange: f, maxLength: m, textAlign: _ = "left", pattern: N, placeholder: k, inputMode: I = "numeric", onComplete: F, pushPasswordManagerStrategy: S = "increase-width", pasteTransformer: c, containerClassName: E, noScriptCSSFallback: v = st, render: P, children: O } = r, o = et(r, [
    "value",
    "onChange",
    "maxLength",
    "textAlign",
    "pattern",
    "placeholder",
    "inputMode",
    "onComplete",
    "pushPasswordManagerStrategy",
    "pasteTransformer",
    "containerClassName",
    "noScriptCSSFallback",
    "render",
    "children"
  ]), R, Q, U, ee, te;
  let [V, ie] = a.useState(typeof o.defaultValue == "string" ? o.defaultValue : ""), d = s ?? V, w = rt(d), T = a.useCallback((i) => {
    f?.(i), ie(i);
  }, [f]), g = a.useMemo(() => N ? typeof N == "string" ? new RegExp(N) : N : null, [N]), u = a.useRef(null), j = a.useRef(null), le = a.useRef({
    value: d,
    onChange: T,
    isIOS: typeof window < "u" && ((Q = (R = window?.CSS) == null ? void 0 : R.supports) == null ? void 0 : Q.call(R, "-webkit-touch-callout", "none"))
  }), re = a.useRef({ prev: [
    (U = u.current) == null ? void 0 : U.selectionStart,
    (ee = u.current) == null ? void 0 : ee.selectionEnd,
    (te = u.current) == null ? void 0 : te.selectionDirection
  ] });
  a.useImperativeHandle(t, () => u.current, []), a.useEffect(() => {
    let i = u.current, l = j.current;
    if (!i || !l) return;
    le.current.value !== i.value && le.current.onChange(i.value), re.current.prev = [
      i.selectionStart,
      i.selectionEnd,
      i.selectionDirection
    ];
    function h() {
      if (document.activeElement !== i) {
        J(null), X(null);
        return;
      }
      let p = i.selectionStart, x = i.selectionEnd, ne = i.selectionDirection, C = i.maxLength, W = i.value, M = re.current.prev, z = -1, A = -1, B;
      if (W.length !== 0 && p !== null && x !== null) {
        let Ie = p === x, De = p === W.length && W.length < C;
        if (Ie && !De) {
          let L = p;
          if (L === 0) z = 0, A = 1, B = "forward";
          else if (L === C) z = L - 1, A = L, B = "backward";
          else if (C > 1 && W.length > 1) {
            let ce = 0;
            if (M[0] !== null && M[1] !== null) {
              B = L < M[1] ? "backward" : "forward";
              let We = M[0] === M[1] && M[0] < C;
              B === "backward" && !We && (ce = -1);
            }
            z = ce + L, A = ce + L + 1;
          }
        }
        z !== -1 && A !== -1 && z !== A && u.current.setSelectionRange(z, A, B);
      }
      let xe = z !== -1 ? z : p, be = A !== -1 ? A : x, Ae = B ?? ne;
      J(xe), X(be), re.current.prev = [
        xe,
        be,
        Ae
      ];
    }
    if (document.addEventListener("selectionchange", h, { capture: !0 }), h(), document.activeElement === i && se(!0), !document.getElementById("input-otp-style")) {
      let p = document.createElement("style");
      if (p.id = "input-otp-style", document.head.appendChild(p), p.sheet) {
        let x = "background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;";
        Y(p.sheet, "[data-input-otp]::selection { background: transparent !important; color: transparent !important; }"), Y(p.sheet, `[data-input-otp]:autofill { ${x} }`), Y(p.sheet, `[data-input-otp]:-webkit-autofill { ${x} }`), Y(p.sheet, "@supports (-webkit-touch-callout: none) { [data-input-otp] { letter-spacing: -.6em !important; font-weight: 100 !important; font-stretch: ultra-condensed; font-optical-sizing: none !important; left: -1px !important; right: 1px !important; } }"), Y(p.sheet, "[data-input-otp] + * { pointer-events: all !important; }");
      }
    }
    let b = () => {
      l && l.style.setProperty("--root-height", `${i.clientHeight}px`);
    };
    b();
    let y = new ResizeObserver(b);
    return y.observe(i), () => {
      document.removeEventListener("selectionchange", h, { capture: !0 }), y.disconnect();
    };
  }, []);
  let [pe, me] = a.useState(!1), [Z, se] = a.useState(!1), [D, J] = a.useState(null), [H, X] = a.useState(null);
  a.useEffect(() => {
    tt(() => {
      var i, l, h, b;
      (i = u.current) == null || i.dispatchEvent(new Event("input"));
      let y = (l = u.current) == null ? void 0 : l.selectionStart, p = (h = u.current) == null ? void 0 : h.selectionEnd, x = (b = u.current) == null ? void 0 : b.selectionDirection;
      y !== null && p !== null && (J(y), X(p), re.current.prev = [
        y,
        p,
        x
      ]);
    });
  }, [d, Z]), a.useEffect(() => {
    w !== void 0 && d !== w && w.length < m && d.length === m && F?.(d);
  }, [
    m,
    F,
    w,
    d
  ]);
  let $ = lt({
    containerRef: j,
    inputRef: u,
    pushPasswordManagerStrategy: S,
    isFocused: Z
  }), fe = a.useCallback((i) => {
    let l = i.currentTarget.value.slice(0, m);
    if (l.length > 0 && g && !g.test(l)) {
      i.preventDefault();
      return;
    }
    typeof w == "string" && l.length < w.length && document.dispatchEvent(new Event("selectionchange")), T(l);
  }, [
    m,
    T,
    w,
    g
  ]), he = a.useCallback(() => {
    var i;
    if (u.current) {
      let l = Math.min(u.current.value.length, m - 1), h = u.current.value.length;
      (i = u.current) == null || i.setSelectionRange(l, h), J(l), X(h);
    }
    se(!0);
  }, [m]), ge = a.useCallback((i) => {
    var l, h;
    let b = u.current;
    if (!c && (!le.current.isIOS || !i.clipboardData || !b)) return;
    let y = i.clipboardData.getData("text/plain"), p = c ? c(y) : y;
    i.preventDefault();
    let x = (l = u.current) == null ? void 0 : l.selectionStart, ne = (h = u.current) == null ? void 0 : h.selectionEnd, C = (x !== ne ? d.slice(0, x) + p + d.slice(ne) : d.slice(0, x) + p + d.slice(x)).slice(0, m);
    if (C.length > 0 && g && !g.test(C)) return;
    b.value = C, T(C);
    let W = Math.min(C.length, m - 1), M = C.length;
    b.setSelectionRange(W, M), J(W), X(M);
  }, [
    m,
    T,
    g,
    d
  ]), Oe = a.useMemo(() => ({
    position: "relative",
    cursor: o.disabled ? "default" : "text",
    userSelect: "none",
    WebkitUserSelect: "none",
    pointerEvents: "none"
  }), [o.disabled]), ve = a.useMemo(() => ({
    position: "absolute",
    inset: 0,
    width: $.willPushPWMBadge ? `calc(100% + ${$.PWM_BADGE_SPACE_WIDTH})` : "100%",
    clipPath: $.willPushPWMBadge ? `inset(0 ${$.PWM_BADGE_SPACE_WIDTH} 0 0)` : void 0,
    height: "100%",
    display: "flex",
    textAlign: _,
    opacity: "1",
    color: "transparent",
    pointerEvents: "all",
    background: "transparent",
    caretColor: "transparent",
    border: "0 solid transparent",
    outline: "0 solid transparent",
    boxShadow: "none",
    lineHeight: "1",
    letterSpacing: "-.5em",
    fontSize: "var(--root-height)",
    fontFamily: "monospace",
    fontVariantNumeric: "tabular-nums"
  }), [
    $.PWM_BADGE_SPACE_WIDTH,
    $.willPushPWMBadge,
    _
  ]), Re = a.useMemo(() => a.createElement("input", Ue(Qe({ autoComplete: o.autoComplete || "one-time-code" }, o), {
    "data-input-otp": !0,
    "data-input-otp-placeholder-shown": d.length === 0 || void 0,
    "data-input-otp-mss": D,
    "data-input-otp-mse": H,
    inputMode: I,
    pattern: g?.source,
    "aria-placeholder": k,
    style: ve,
    maxLength: m,
    value: d,
    ref: u,
    onPaste: (i) => {
      var l;
      ge(i), (l = o.onPaste) == null || l.call(o, i);
    },
    onChange: fe,
    onMouseOver: (i) => {
      var l;
      me(!0), (l = o.onMouseOver) == null || l.call(o, i);
    },
    onMouseLeave: (i) => {
      var l;
      me(!1), (l = o.onMouseLeave) == null || l.call(o, i);
    },
    onFocus: (i) => {
      var l;
      he(), (l = o.onFocus) == null || l.call(o, i);
    },
    onBlur: (i) => {
      var l;
      se(!1), (l = o.onBlur) == null || l.call(o, i);
    }
  })), [
    fe,
    he,
    ge,
    I,
    ve,
    m,
    H,
    D,
    o,
    g?.source,
    d
  ]), oe = a.useMemo(() => ({
    slots: Array.from({ length: m }).map((i, l) => {
      var h;
      let b = Z && D !== null && H !== null && (D === H && l === D || l >= D && l < H), y = d[l] !== void 0 ? d[l] : null;
      return {
        char: y,
        placeholderChar: d[0] !== void 0 ? null : (h = k?.[l]) != null ? h : null,
        isActive: b,
        hasFakeCaret: b && y === null
      };
    }),
    isFocused: Z,
    isHovering: !o.disabled && pe
  }), [
    Z,
    pe,
    m,
    H,
    D,
    o.disabled,
    d
  ]), ze = a.useMemo(() => P ? P(oe) : a.createElement(_e.Provider, { value: oe }, O), [
    O,
    oe,
    P
  ]);
  return a.createElement(a.Fragment, null, v !== null && a.createElement("noscript", null, a.createElement("style", null, v)), a.createElement("div", {
    ref: j,
    "data-input-otp-container": !0,
    style: Oe,
    className: E
  }, ze, a.createElement("div", { style: {
    position: "absolute",
    inset: 0,
    pointerEvents: "none"
  } }, Re)));
});
Ne.displayName = "Input";
function Y(e, t) {
  try {
    e.insertRule(t);
  } catch {
    console.error("input-otp could not insert CSS rule:", t);
  }
}
var st = `
[data-input-otp] {
  --nojs-bg: white !important;
  --nojs-fg: black !important;

  background-color: var(--nojs-bg) !important;
  color: var(--nojs-fg) !important;
  caret-color: var(--nojs-fg) !important;
  letter-spacing: .25em !important;
  text-align: center !important;
  border: 1px solid var(--nojs-fg) !important;
  border-radius: 4px !important;
  width: 100% !important;
}
@media (prefers-color-scheme: dark) {
  [data-input-otp] {
    --nojs-bg: black !important;
    --nojs-fg: white !important;
  }
}`, n = Ve(), ke = a.forwardRef(({ className: e, containerClassName: t, "aria-label": r = "One-time password", ...s }, f) => /* @__PURE__ */ (0, n.jsx)(Ne, {
  ref: f,
  "data-slot": "input-otp",
  containerClassName: q("flex items-center has-disabled:opacity-50", t),
  spellCheck: !1,
  "aria-label": r,
  className: q("disabled:cursor-not-allowed", e),
  ...s
})), Se = a.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ (0, n.jsx)("div", {
  ref: r,
  "data-slot": "input-otp-group",
  className: q("group/otp-group has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-xl has-aria-invalid:ring-[3px] flex items-center", e),
  ...t
})), Pe = a.forwardRef(({ index: e, className: t, ...r }, s) => {
  const { char: f, hasFakeCaret: m, isActive: _ } = a.useContext(_e)?.slots[e] ?? {};
  return /* @__PURE__ */ (0, n.jsxs)("div", {
    ref: s,
    "data-slot": "input-otp-slot",
    "data-active": _,
    "data-filled": !!f || void 0,
    className: q("dark:bg-input/30 border-input text-sm shadow-xs outline-none relative flex items-center justify-center size-11", "rounded-xl border", "transition-[color,border-color,box-shadow,opacity] duration-200 ease-out", "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:ring-[3px] data-[active=true]:z-10", "data-[filled]:animate-[delight-slot-fill_200ms_ease-out] motion-reduce:animate-none", "data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive", "group-[]/otp-group:rounded-none group-[]/otp-group:border-y group-[]/otp-group:border-r group-[]/otp-group:border-l-0", "group-[]/otp-group:first:rounded-l-xl group-[]/otp-group:first:border-l", "group-[]/otp-group:last:rounded-r-xl", t),
    ...r,
    children: [f, m && /* @__PURE__ */ (0, n.jsx)("div", {
      className: "pointer-events-none absolute inset-0 flex items-center justify-center animate-[delight-fade-in_150ms_ease-out] motion-reduce:animate-none",
      children: /* @__PURE__ */ (0, n.jsx)("div", { className: "animate-caret-blink motion-reduce:animate-none bg-foreground h-4 w-px duration-1000" })
    })]
  });
}), ot = a.forwardRef(({ ...e }, t) => /* @__PURE__ */ (0, n.jsx)("div", {
  ref: t,
  "data-slot": "input-otp-separator",
  className: "[&_svg:not([class*='size-'])]:size-4 flex items-center",
  role: "separator",
  ...e,
  children: /* @__PURE__ */ (0, n.jsx)(qe, { "aria-hidden": "true" })
}));
ke.displayName = "InputOTP";
Se.displayName = "InputOTPGroup";
Pe.displayName = "InputOTPSlot";
ot.displayName = "InputOTPSeparator";
var ct = Ze("flex min-h-screen w-full items-center justify-center bg-muted relative overflow-hidden", {
  variants: { variant: {
    default: "",
    sidebar: "lg:ps-64"
  } },
  defaultVariants: { variant: "default" }
}), ue = ({ type: e }) => {
  const t = {
    mail: Ge,
    success: $e
  }[e];
  return /* @__PURE__ */ (0, n.jsx)(Je, {
    icon: /* @__PURE__ */ (0, n.jsx)(t, {}),
    size: "lg"
  });
}, Te = a.forwardRef(({ className: e, variant: t, step: r = "check-email", email: s = "user@example.com", rtl: f = !1, onEnterCodeManually: m, onSubmit: _, onBackToLogin: N, onResendEmail: k, onContinue: I, value: F, onValueChange: S, loading: c = !1, title: E, subtitle: v, submitLabel: P, backToLoginLabel: O, resendText: o, resendLinkText: R, ...Q }, U) => {
  const [ee, te] = a.useState(""), V = F ?? ee, ie = (j) => {
    S ? S(j) : te(j);
  }, d = (j) => {
    j.preventDefault(), V.length === 4 && _?.(V);
  }, w = E ?? (r === "success" ? "Email verified" : "Check your email"), T = v ?? (r === "success" ? "Your email has been verified successfully. Click below to continue." : void 0), g = P ?? (r === "check-email" ? "Enter code manually" : r === "enter-code" ? "Verify email" : "Continue"), u = () => {
    switch (r) {
      case "check-email":
        return /* @__PURE__ */ (0, n.jsxs)(n.Fragment, { children: [/* @__PURE__ */ (0, n.jsxs)("div", {
          className: "flex w-full flex-col items-center gap-6",
          children: [/* @__PURE__ */ (0, n.jsxs)("div", {
            className: "relative delight-stagger",
            "aria-hidden": "true",
            children: [/* @__PURE__ */ (0, n.jsx)(de, {
              pattern: "grid",
              offset: "icon-center",
              className: "-z-10"
            }), /* @__PURE__ */ (0, n.jsx)(ue, { type: "mail" })]
          }), /* @__PURE__ */ (0, n.jsxs)("div", {
            className: "flex w-full flex-col gap-3 text-center delight-stagger",
            style: { "--delight-delay": "100ms" },
            children: [/* @__PURE__ */ (0, n.jsx)("h1", {
              className: "font-display text-display-xs md:text-display-sm font-semibold text-foreground",
              children: w
            }), /* @__PURE__ */ (0, n.jsx)("p", {
              className: "text-md leading-6 text-muted-foreground",
              children: T ?? /* @__PURE__ */ (0, n.jsxs)(n.Fragment, { children: [
                "We sent a verification link to",
                " ",
                /* @__PURE__ */ (0, n.jsx)("span", {
                  className: "font-medium",
                  children: s
                })
              ] })
            })]
          })]
        }), /* @__PURE__ */ (0, n.jsx)("div", {
          className: "w-full delight-stagger",
          style: { "--delight-delay": "200ms" },
          children: /* @__PURE__ */ (0, n.jsx)(G, {
            size: "lg",
            className: "w-full",
            onClick: m,
            disabled: c,
            children: g
          })
        })] });
      case "enter-code":
        return /* @__PURE__ */ (0, n.jsxs)(n.Fragment, { children: [
          /* @__PURE__ */ (0, n.jsxs)("div", {
            className: "flex w-full flex-col items-center gap-6",
            children: [/* @__PURE__ */ (0, n.jsxs)("div", {
              className: "relative delight-stagger",
              "aria-hidden": "true",
              children: [/* @__PURE__ */ (0, n.jsx)(de, {
                pattern: "grid",
                offset: "icon-center",
                className: "-z-10"
              }), /* @__PURE__ */ (0, n.jsx)(ue, { type: "mail" })]
            }), /* @__PURE__ */ (0, n.jsxs)("div", {
              className: "flex w-full flex-col gap-3 text-center delight-stagger",
              style: { "--delight-delay": "100ms" },
              children: [/* @__PURE__ */ (0, n.jsx)("h1", {
                className: "font-display text-display-xs md:text-display-sm font-semibold text-foreground",
                children: w
              }), /* @__PURE__ */ (0, n.jsx)("p", {
                className: "text-md leading-6 text-muted-foreground",
                children: T ?? /* @__PURE__ */ (0, n.jsxs)(n.Fragment, { children: [
                  "We sent a verification link to",
                  " ",
                  /* @__PURE__ */ (0, n.jsx)("span", {
                    className: "font-medium",
                    children: s
                  })
                ] })
              })]
            })]
          }),
          /* @__PURE__ */ (0, n.jsxs)("form", {
            onSubmit: d,
            className: "flex w-full flex-col gap-8 delight-stagger",
            style: { "--delight-delay": "200ms" },
            "aria-label": "Email verification code",
            children: [/* @__PURE__ */ (0, n.jsx)("div", {
              className: "flex w-full justify-center",
              children: /* @__PURE__ */ (0, n.jsx)(ke, {
                maxLength: 4,
                value: V,
                onChange: ie,
                disabled: c,
                containerClassName: "gap-2",
                children: /* @__PURE__ */ (0, n.jsx)(Se, {
                  className: "gap-2",
                  children: [
                    0,
                    1,
                    2,
                    3
                  ].map((j) => /* @__PURE__ */ (0, n.jsx)(Pe, {
                    index: j,
                    className: "size-16 md:size-20 border-2 border-primary rounded-xl shadow-xs text-display-md md:text-display-lg font-medium leading-[60px] tracking-[-0.02em] text-primary"
                  }, j))
                })
              })
            }), /* @__PURE__ */ (0, n.jsx)(G, {
              type: "submit",
              size: "lg",
              className: "w-full",
              disabled: V.length !== 4 || c,
              loading: c,
              children: g
            })]
          }),
          /* @__PURE__ */ (0, n.jsxs)("div", {
            className: "flex w-full items-center justify-center gap-1 text-sm delight-stagger",
            style: { "--delight-delay": "300ms" },
            children: [/* @__PURE__ */ (0, n.jsx)("span", {
              className: "leading-5 text-muted-foreground",
              children: o ?? "Didn't receive the email?"
            }), /* @__PURE__ */ (0, n.jsx)(G, {
              appearance: "link",
              variant: "primary",
              size: "sm",
              onClick: k,
              disabled: c,
              children: R ?? "Click to resend"
            })]
          })
        ] });
      case "success":
        return /* @__PURE__ */ (0, n.jsxs)(n.Fragment, { children: [
          /* @__PURE__ */ (0, n.jsxs)("div", {
            className: "flex w-full flex-col items-center gap-6",
            children: [/* @__PURE__ */ (0, n.jsxs)("div", {
              className: "relative delight-bounce-in",
              "aria-hidden": "true",
              children: [/* @__PURE__ */ (0, n.jsx)(de, {
                pattern: "grid",
                offset: "icon-center",
                className: "-z-10"
              }), /* @__PURE__ */ (0, n.jsx)(ue, { type: "success" })]
            }), /* @__PURE__ */ (0, n.jsxs)("div", {
              className: "flex w-full flex-col gap-3 text-center delight-stagger",
              style: { "--delight-delay": "100ms" },
              children: [/* @__PURE__ */ (0, n.jsx)("h1", {
                className: "font-display text-display-xs md:text-display-sm font-semibold text-foreground",
                children: w
              }), /* @__PURE__ */ (0, n.jsx)("p", {
                className: "text-md leading-6 text-muted-foreground",
                children: T
              })]
            })]
          }),
          /* @__PURE__ */ (0, n.jsx)("div", {
            className: "w-full delight-stagger",
            style: { "--delight-delay": "200ms" },
            children: /* @__PURE__ */ (0, n.jsx)(G, {
              size: "lg",
              className: "w-full",
              onClick: I,
              disabled: c,
              children: g
            })
          }),
          /* @__PURE__ */ (0, n.jsxs)("div", {
            className: "flex w-full items-center justify-center gap-1 text-sm delight-stagger",
            style: { "--delight-delay": "300ms" },
            children: [/* @__PURE__ */ (0, n.jsx)("span", {
              className: "leading-5 text-muted-foreground",
              children: o ?? "Didn't receive the email?"
            }), /* @__PURE__ */ (0, n.jsx)(G, {
              appearance: "link",
              variant: "primary",
              size: "sm",
              onClick: k,
              disabled: c,
              children: R ?? "Click to resend"
            })]
          })
        ] });
      default:
        return null;
    }
  };
  return /* @__PURE__ */ (0, n.jsx)("div", {
    ref: U,
    dir: f ? "rtl" : "ltr",
    "data-slot": "verify-email-page",
    className: q(ct({ variant: t }), e),
    ...Q,
    children: /* @__PURE__ */ (0, n.jsxs)("main", {
      className: "relative z-10 mx-auto flex w-full max-w-[360px] flex-col items-center gap-8 px-4",
      "aria-live": "polite",
      children: [u(), /* @__PURE__ */ (0, n.jsx)("div", {
        className: "delight-stagger",
        style: { "--delight-delay": "400ms" },
        children: /* @__PURE__ */ (0, n.jsx)(G, {
          type: "button",
          appearance: "link",
          variant: "primary",
          size: "sm",
          onClick: N,
          disabled: c,
          startIcon: /* @__PURE__ */ (0, n.jsx)(He, {
            className: q("size-5", f && "rotate-180"),
            strokeWidth: 2,
            "aria-hidden": "true"
          }),
          className: f ? "flex-row-reverse" : "",
          children: O ?? "Back to log in"
        })
      })]
    })
  });
});
Te.displayName = "VerifyEmailPage";
var dt = Fe();
function ut(e) {
  return {
    onEnterCodeManually: (t) => {
      e.dispatchEvent(new CustomEvent("enter-code-manually", {
        detail: t,
        bubbles: !0,
        composed: !0
      }));
    },
    onSubmit: (t) => {
      e.dispatchEvent(new CustomEvent("submit", {
        detail: t,
        bubbles: !0,
        composed: !0
      }));
    },
    onBackToLogin: (t) => {
      e.dispatchEvent(new CustomEvent("back-to-login", {
        detail: t,
        bubbles: !0,
        composed: !0
      }));
    },
    onResendEmail: (t) => {
      e.dispatchEvent(new CustomEvent("resend-email", {
        detail: t,
        bubbles: !0,
        composed: !0
      }));
    },
    onContinue: (t) => {
      e.dispatchEvent(new CustomEvent("continue", {
        detail: t,
        bubbles: !0,
        composed: !0
      }));
    },
    onValueChange: (t) => {
      e.dispatchEvent(new CustomEvent("value-change", {
        detail: t,
        bubbles: !0,
        composed: !0
      }));
    }
  };
}
function pt(e) {
  const { _hostElement: t, ...r } = e, s = a.useMemo(() => t ? ut(t) : {}, [t]);
  return a.createElement(Te, {
    ...r,
    ...s
  });
}
var K = {
  variant: "string",
  size: "string",
  step: "string",
  email: "string",
  rtl: "boolean",
  value: "string",
  loading: "boolean",
  title: "string",
  subtitle: "string",
  submitLabel: "string",
  backToLoginLabel: "string",
  resendText: "string",
  resendLinkText: "string"
};
function we(e, t) {
  if (e !== null)
    switch (t) {
      case "number":
        return Number(e);
      case "boolean":
        return e !== "false" && e !== "0";
      case "json":
        try {
          return JSON.parse(e);
        } catch {
          return e;
        }
      default:
        return e;
    }
}
var Me = class extends HTMLElement {
  _root = null;
  _childrenContainer = null;
  _props = {};
  _initialized = !1;
  connectedCallback() {
    setTimeout(() => this._initialize(), 0);
  }
  _initialize() {
    if (this._initialized) return;
    this._initialized = !0;
    const e = [];
    for (const r of Array.from(this.childNodes))
      r.nodeType === Node.TEXT_NODE && !r.textContent?.trim() || e.push(r);
    const t = document.createElement("div");
    for (t.style.display = "contents", this._childrenContainer = document.createElement("div"), this._childrenContainer.style.display = "contents", e.forEach((r) => this._childrenContainer.appendChild(r)); this.firstChild; ) this.removeChild(this.firstChild);
    this.appendChild(t), this._root = (0, dt.createRoot)(t), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(e, t, r) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(K).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(e, t) {
    const r = K[e] || "string";
    this._props[e] = this._parseValue(t, r), this._render();
  }
  _parseValue(e, t) {
    if (t === "boolean" && typeof e == "boolean" || t === "number" && typeof e == "number" || t === "string" && typeof e == "string") return e;
    if (typeof e == "string") switch (t) {
      case "boolean":
        return e !== "false" && e !== "0" && e !== "";
      case "number":
        return Number(e);
      case "json":
        try {
          return JSON.parse(e);
        } catch {
          return e;
        }
      default:
        return e;
    }
    return e;
  }
  _getProp(e) {
    if (e in this._props) return this._props[e];
    const t = e.replace(/([A-Z])/g, "-$1").toLowerCase(), r = K[e] || "string";
    return we(this.getAttribute(t), r);
  }
  _render() {
    if (!this._root || !this._childrenContainer) return;
    const e = {};
    for (const [r, s] of Object.entries(K)) if (r in this._props) e[r] = this._props[r];
    else {
      const f = r.replace(/([A-Z])/g, "-$1").toLowerCase();
      e[r] = we(this.getAttribute(f), s);
    }
    const t = a.createElement(pt, {
      ...e,
      _hostElement: this
    }, a.createElement("span", {
      ref: (r) => {
        r && this._childrenContainer && r.replaceWith(this._childrenContainer);
      },
      style: { display: "contents" }
    }));
    this._root.render(t);
  }
};
for (const e of Object.keys(K)) Object.defineProperty(Me.prototype, e, {
  get() {
    return this._getProp(e);
  },
  set(t) {
    this._setProp(e, t);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-verify-email-page") && customElements.define("hf-verify-email-page", Me);
export {
  Me as VerifyEmailPageWC,
  Me as default
};

//# sourceMappingURL=hf-verify-email-page.js.map