@levo-so/studio 0.1.59 → 0.1.61

package/dist/index-CgUU2EbC.js

@@ -0,0 +1,765 @@
+"use client";
+import { jsx as e, jsxs as l, Fragment as q } from "react/jsx-runtime";
+import { useLevo as Q, useLevoInsights as X, LevoOAuth as I, successToast as Z, errorHandler as ee } from "@levo-so/react";
+import { useState as _, useEffect as G, useRef as R, useMemo as F } from "react";
+import { h as $, A as te } from "./index-BJrh8CwF.js";
+import { getLevoError as B } from "@levo-so/core";
+import { useFormik as A } from "formik";
+import { parsePhoneNumberWithError as ne } from "libphonenumber-js";
+import * as k from "yup";
+import re from "react-otp-input";
+import { ChevronDown as oe } from "lucide-react";
+import { Popover as O } from "radix-ui";
+import { usePhoneInput as ie, defaultCountries as P, parseCountry as M, FlagImage as j } from "react-international-phone";
+const z = k.string().required("Email is required").email("Please enter a valid email address").trim(), H = k.string().required("Please enter the verification code").length(4, "Verification code must be 4 digits").matches(/^\d+$/, "Verification code must contain only numbers"), U = k.string().required("Phone number is required").test("phone", "The phone number has incorrect format", (r) => {
+  if (!r) return !1;
+  try {
+    return ne(r)?.isValid() ?? !1;
+  } catch {
+    return !1;
+  }
+}), K = k.object({
+  email: z
+}), se = k.object({
+  email: z,
+  otp: H
+}), ae = k.object({
+  phone: U
+}), le = k.object({
+  phone: U,
+  otp: H
+}), ce = K, de = "_button_1je4h_2", ue = "_content_1je4h_70", me = "_icon_1je4h_77", pe = "_spinner_1je4h_89", he = "_iconEnter_1je4h_103", fe = "_text_1je4h_119", N = {
+  button: de,
+  content: ue,
+  icon: me,
+  spinner: pe,
+  iconEnter: he,
+  text: fe
+}, E = ({
+  className: r,
+  children: c,
+  isLoading: t = !1,
+  isError: a = !1,
+  loadingText: m = "Loading...",
+  successText: s = "Success!",
+  errorText: o = "Error!",
+  variant: h = "default",
+  size: u = "default",
+  disabled: n,
+  ...y
+}) => {
+  const [v, i] = _(!1), [g, C] = _(!1), [S, p] = _(t);
+  G(() => {
+    if (S && !t)
+      if (a) {
+        C(!0);
+        const T = setTimeout(() => {
+          C(!1);
+        }, 2e3);
+        return () => clearTimeout(T);
+      } else {
+        i(!0);
+        const T = setTimeout(() => {
+          i(!1);
+        }, 2e3);
+        return () => clearTimeout(T);
+      }
+    p(t);
+  }, [t, S, a]);
+  const f = () => t ? m : v ? s : g ? o : c, V = () => g ? "destructive" : v ? "success" : h, w = () => t ? /* @__PURE__ */ e("div", { className: `${N.icon} ${N.iconEnter}`, children: /* @__PURE__ */ e("svg", { className: N.spinner, viewBox: "0 0 24 24", children: /* @__PURE__ */ e(
+    "circle",
+    {
+      cx: "12",
+      cy: "12",
+      r: "10",
+      stroke: "currentColor",
+      strokeWidth: "4",
+      fill: "none",
+      strokeDasharray: "32",
+      strokeDashoffset: "32"
+    }
+  ) }) }) : v && !t ? /* @__PURE__ */ e("div", { className: `${N.icon} ${N.iconEnter}`, children: /* @__PURE__ */ l("svg", { viewBox: "0 0 24 24", children: [
+    /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor" }),
+    /* @__PURE__ */ e(
+      "path",
+      {
+        d: "m9 12 2 2 4-4",
+        stroke: "white",
+        strokeWidth: "2",
+        fill: "none",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] }) }) : g && !t ? /* @__PURE__ */ e("div", { className: `${N.icon} ${N.iconEnter}`, children: /* @__PURE__ */ l(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ e("path", { d: "m15 9-6 6" }),
+        /* @__PURE__ */ e("path", { d: "m9 9 6 6" })
+      ]
+    }
+  ) }) : null;
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      className: `${N.button} ${r || ""}`,
+      "data-variant": V(),
+      "data-size": u,
+      disabled: n || t,
+      ...y,
+      children: /* @__PURE__ */ l("div", { className: N.content, children: [
+        w(),
+        /* @__PURE__ */ e("span", { className: N.text, children: f() })
+      ] })
+    }
+  );
+}, ge = "_container_wx5fd_1", _e = "_label_wx5fd_5", ve = "_inputWrapper_wx5fd_13", be = "_input_wx5fd_13", ye = "_editButton_wx5fd_38", W = {
+  container: ge,
+  label: _e,
+  inputWrapper: ve,
+  input: be,
+  editButton: ye
+}, Y = ({ email: r, setEmail: c, otpSent: t, handleReset: a }) => /* @__PURE__ */ l("div", { className: W.container, children: [
+  /* @__PURE__ */ e("label", { className: W.label, children: "Email" }),
+  /* @__PURE__ */ l("div", { className: W.inputWrapper, children: [
+    /* @__PURE__ */ e(
+      "input",
+      {
+        type: "email",
+        value: r,
+        onChange: (m) => c(m.target.value),
+        className: W.input,
+        placeholder: "Enter your email",
+        disabled: t
+      }
+    ),
+    t && /* @__PURE__ */ e(
+      E,
+      {
+        variant: "outline",
+        onClick: () => a(),
+        className: W.editButton,
+        children: "Edit"
+      }
+    )
+  ] })
+] }), Ne = "_container_x1dec_1", Se = "_iconWrapper_x1dec_9", xe = "_icon_x1dec_9", Ce = "_content_x1dec_26", we = "_title_x1dec_30", Ee = "_message_x1dec_37", Te = "_submessage_x1dec_49", ke = "_actions_x1dec_55", Be = "_resetButton_x1dec_59", x = {
+  container: Ne,
+  iconWrapper: Se,
+  icon: xe,
+  content: Ce,
+  title: we,
+  message: Ee,
+  submessage: Te,
+  actions: ke,
+  resetButton: Be
+}, We = ({ email: r, onReset: c }) => /* @__PURE__ */ l("div", { className: x.container, children: [
+  /* @__PURE__ */ e("div", { className: x.iconWrapper, children: /* @__PURE__ */ e("svg", { className: x.icon, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e(
+    "path",
+    {
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+    }
+  ) }) }),
+  /* @__PURE__ */ l("div", { className: x.content, children: [
+    /* @__PURE__ */ e("h3", { className: x.title, children: "Check your email" }),
+    /* @__PURE__ */ l("p", { className: x.message, children: [
+      "We've sent a magic link to ",
+      /* @__PURE__ */ e("strong", { children: r })
+    ] }),
+    /* @__PURE__ */ e("p", { className: x.submessage, children: "Click the link in your email to sign in. The link will expire in 15 minutes." })
+  ] }),
+  /* @__PURE__ */ e("div", { className: x.actions, children: /* @__PURE__ */ e(E, { variant: "outline", onClick: c, className: x.resetButton, children: "Use a different email" }) })
+] }), Le = "_container_1mfd3_1", Oe = "_errorContainer_1mfd3_5", Ie = "_divider_1mfd3_9", $e = "_dividerLine_1mfd3_15", Ve = "_dividerText_1mfd3_21", Ae = "_formSection_1mfd3_27", De = "_buttonWrapper_1mfd3_33", Re = "_fullWidthButton_1mfd3_36", Fe = "_oauthContainer_1mfd3_41", Pe = "_googleButton_1mfd3_54", Me = "_googleIcon_1mfd3_78", je = "_errorContent_1mfd3_90", qe = "_errorText_1mfd3_107", Ge = "_errorTitle_1mfd3_112", ze = "_errorMessage_1mfd3_119", He = "_errorDismiss_1mfd3_125", d = {
+  container: Le,
+  errorContainer: Oe,
+  divider: Ie,
+  dividerLine: $e,
+  dividerText: Ve,
+  formSection: Ae,
+  buttonWrapper: De,
+  fullWidthButton: Re,
+  oauthContainer: Fe,
+  googleButton: Pe,
+  googleIcon: Me,
+  errorContent: je,
+  errorText: qe,
+  errorTitle: Ge,
+  errorMessage: ze,
+  errorDismiss: He
+}, D = ({ error: r, onDismiss: c }) => /* @__PURE__ */ e("div", { className: d.errorContainer, children: /* @__PURE__ */ l("div", { className: d.errorContent, children: [
+  /* @__PURE__ */ l("div", { className: d.errorText, children: [
+    r.title && /* @__PURE__ */ e("div", { className: d.errorTitle, children: r.title }),
+    /* @__PURE__ */ e("div", { className: d.errorMessage, children: r.message || "An unexpected error occurred" })
+  ] }),
+  c && /* @__PURE__ */ e("button", { onClick: c, className: d.errorDismiss, "aria-label": "Dismiss error", children: "×" })
+] }) }), Ue = ({ onMagicLinkSent: r }) => {
+  const { sendMagicLink: c } = $(), [t, a] = _(!1), [m, s] = _(null);
+  G(() => {
+    r?.(t);
+  }, [t, r]);
+  const o = A({
+    initialValues: {
+      email: ""
+    },
+    validationSchema: ce,
+    validateOnChange: !1,
+    validateOnBlur: !1,
+    onSubmit: async (u, { setSubmitting: n, setFieldError: y }) => {
+      try {
+        s(null), await c(u.email), a(!0);
+      } catch (v) {
+        const i = B(v);
+        i.hasFieldErrors ? i.fieldErrors.forEach((g) => {
+          y(g.param, g.message);
+        }) : s(i);
+      } finally {
+        n(!1);
+      }
+    }
+  }), h = () => {
+    a(!1), o.resetForm(), s(null);
+  };
+  return t ? /* @__PURE__ */ e(We, { email: o.values.email, onReset: h }) : /* @__PURE__ */ l(
+    "form",
+    {
+      onSubmit: o.handleSubmit,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "1rem"
+      },
+      children: [
+        /* @__PURE__ */ e(
+          Y,
+          {
+            email: o.values.email,
+            setEmail: (u) => o.setFieldValue("email", u),
+            otpSent: !1,
+            handleReset: h
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: d.buttonWrapper, children: /* @__PURE__ */ e(
+          E,
+          {
+            type: "submit",
+            isLoading: o.isSubmitting,
+            isError: !!m,
+            disabled: o.isSubmitting,
+            className: d.fullWidthButton,
+            loadingText: "Sending Magic Link...",
+            errorText: "Failed to Send",
+            children: "Send Magic Link"
+          }
+        ) }),
+        m && /* @__PURE__ */ e(D, { error: m, onDismiss: () => s(null) })
+      ]
+    }
+  );
+}, Ke = "_container_1c9qn_1", Ye = "_label_1c9qn_5", Je = "_inputGroup_1c9qn_13", Qe = "_input_1c9qn_13", Xe = "_resendButton_1c9qn_36", L = {
+  container: Ke,
+  label: Ye,
+  inputGroup: Je,
+  input: Qe,
+  resendButton: Xe
+}, J = ({
+  otpSent: r,
+  isResendingOtp: c,
+  otp: t,
+  resendOTP: a,
+  setOtp: m
+}) => {
+  const [s, o] = _(0), h = () => {
+    a(() => {
+      o(30);
+      const u = setInterval(() => {
+        o((n) => n <= 1 ? (clearInterval(u), 0) : n - 1);
+      }, 1e3);
+    });
+  };
+  return r ? /* @__PURE__ */ l("div", { className: L.container, children: [
+    /* @__PURE__ */ e("label", { className: L.label, children: "Verification Code" }),
+    /* @__PURE__ */ e("div", { className: L.inputGroup, children: /* @__PURE__ */ e(
+      re,
+      {
+        value: t,
+        onChange: m,
+        numInputs: 4,
+        inputStyle: {
+          marginRight: "12px"
+        },
+        inputType: "tel",
+        skipDefaultStyles: !0,
+        renderInput: ({ className: u, ...n }) => /* @__PURE__ */ e("input", { className: `${L.input} ${u}`, ...n })
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      "button",
+      {
+        onClick: h,
+        disabled: c || s > 0,
+        className: L.resendButton,
+        children: c ? "Resending..." : s > 0 ? `Resend in ${s}s` : "Resend Code"
+      }
+    )
+  ] }) : null;
+}, Ze = () => {
+  const { sendOTP: r, verifyOTP: c, resendOTP: t } = $(), [a, m] = _(!1), [s, o] = _(null), [h, u] = _(!1), n = A({
+    initialValues: {
+      email: "",
+      otp: ""
+    },
+    validationSchema: a ? se : K,
+    validateOnChange: !1,
+    validateOnBlur: !1,
+    onSubmit: async (i, { setSubmitting: g, setFieldError: C }) => {
+      try {
+        o(null), a ? await c(i.email, i.otp) : (await r({ email: i.email }), m(!0));
+      } catch (S) {
+        const p = B(S);
+        p.hasFieldErrors ? p.fieldErrors.forEach((f) => {
+          C(f.param, f.message);
+        }) : o(p);
+      } finally {
+        g(!1);
+      }
+    }
+  }), y = () => {
+    m(!1), n.resetForm(), o(null);
+  }, v = async () => {
+    try {
+      u(!0), o(null), await t({ email: n.values.email });
+    } catch (i) {
+      const g = B(i);
+      o(g);
+    } finally {
+      u(!1);
+    }
+  };
+  return /* @__PURE__ */ l(
+    "form",
+    {
+      onSubmit: n.handleSubmit,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "1rem"
+      },
+      children: [
+        /* @__PURE__ */ e(
+          Y,
+          {
+            email: n.values.email,
+            setEmail: (i) => n.setFieldValue("email", i),
+            otpSent: a,
+            handleReset: y
+          }
+        ),
+        /* @__PURE__ */ e(
+          J,
+          {
+            otpSent: a,
+            otp: n.values.otp,
+            setOtp: (i) => n.setFieldValue("otp", i),
+            isResendingOtp: h,
+            resendOTP: v
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: d.buttonWrapper, children: a ? /* @__PURE__ */ e(
+          E,
+          {
+            type: "submit",
+            isLoading: n.isSubmitting,
+            isError: !!s,
+            disabled: n.isSubmitting,
+            className: d.fullWidthButton,
+            loadingText: "Verifying...",
+            errorText: "Verification Failed",
+            children: "Verify & Sign In"
+          }
+        ) : /* @__PURE__ */ e(
+          E,
+          {
+            type: "submit",
+            isLoading: n.isSubmitting,
+            isError: !!s,
+            disabled: n.isSubmitting,
+            className: d.fullWidthButton,
+            loadingText: "Sending Code...",
+            errorText: "Failed to Send",
+            children: "Send Code"
+          }
+        ) }),
+        s && /* @__PURE__ */ e(D, { error: s, onDismiss: () => o(null) })
+      ]
+    }
+  );
+}, et = "_label_1fvbo_1", tt = "_inputWrapper_1fvbo_9", nt = "_phoneInputWrapper_1fvbo_14", rt = "_input_1fvbo_9", ot = "_selector_1fvbo_41", it = "_editButton_1fvbo_69", st = "_dropdownContent_1fvbo_73", at = "_countryItem_1fvbo_89", lt = "_flag_1fvbo_111", ct = "_countryName_1fvbo_118", dt = "_dialCode_1fvbo_125", b = {
+  label: et,
+  inputWrapper: tt,
+  phoneInputWrapper: nt,
+  input: rt,
+  selector: ot,
+  editButton: it,
+  dropdownContent: st,
+  countryItem: at,
+  flag: lt,
+  countryName: ct,
+  dialCode: dt
+}, ut = ({ phone: r, setPhone: c, otpSent: t, handleReset: a }) => {
+  const [m, s] = _(!1), [o, h] = _(""), u = R(null), n = R(null), { inputValue: y, handlePhoneValueChange: v, inputRef: i, country: g, setCountry: C } = ie({
+    defaultCountry: "in",
+    value: r,
+    countries: P,
+    onChange: (p) => {
+      c(p.phone);
+    },
+    disableDialCodePrefill: !0,
+    forceDialCode: !0
+  }), S = P.filter((p) => {
+    const f = M(p);
+    return f.name.toLowerCase().includes(o.toLowerCase()) || f.dialCode.includes(o);
+  });
+  return /* @__PURE__ */ l("div", { children: [
+    /* @__PURE__ */ e("label", { className: b.label, children: "Phone Number" }),
+    /* @__PURE__ */ l("div", { className: b.inputWrapper, children: [
+      /* @__PURE__ */ l("div", { className: b.phoneInputWrapper, children: [
+        /* @__PURE__ */ l(O.Root, { open: m, onOpenChange: s, children: [
+          /* @__PURE__ */ e(O.Trigger, { asChild: !0, disabled: t, children: /* @__PURE__ */ l("button", { type: "button", className: b.selector, disabled: t, children: [
+            /* @__PURE__ */ e(j, { iso2: g.iso2, style: { width: "24px", height: "16px" } }),
+            /* @__PURE__ */ e(oe, { size: 16, style: { marginLeft: "4px", opacity: 0.5 } })
+          ] }) }),
+          /* @__PURE__ */ e(O.Portal, { children: /* @__PURE__ */ l(
+            O.Content,
+            {
+              className: b.dropdownContent,
+              align: "start",
+              side: "bottom",
+              sideOffset: 4,
+              onOpenAutoFocus: (p) => {
+                p.preventDefault(), n.current?.focus();
+              },
+              children: [
+                /* @__PURE__ */ e("div", { style: { padding: "0.5rem" }, children: /* @__PURE__ */ e(
+                  "input",
+                  {
+                    ref: n,
+                    type: "text",
+                    placeholder: "Search country...",
+                    value: o,
+                    onChange: (p) => h(p.target.value),
+                    onKeyDown: (p) => {
+                      p.key === "ArrowDown" && (p.preventDefault(), u.current?.firstElementChild?.focus());
+                    },
+                    className: b.input,
+                    style: {
+                      borderRadius: "0.375rem",
+                      borderLeft: "1px solid #d1d5db"
+                    }
+                  }
+                ) }),
+                /* @__PURE__ */ l("div", { ref: u, style: { overflowY: "auto", flex: 1 }, children: [
+                  S.map((p) => {
+                    const f = M(p), V = f.iso2 === g.iso2;
+                    return /* @__PURE__ */ l(
+                      "button",
+                      {
+                        type: "button",
+                        className: b.countryItem,
+                        "data-selected": V,
+                        onClick: () => {
+                          C(f.iso2), s(!1), h("");
+                        },
+                        onKeyDown: (w) => {
+                          if (w.key === "ArrowDown")
+                            w.preventDefault(), w.currentTarget.nextElementSibling?.focus();
+                          else if (w.key === "ArrowUp") {
+                            w.preventDefault();
+                            const T = w.currentTarget.previousElementSibling;
+                            T ? T.focus() : n.current?.focus();
+                          }
+                        },
+                        children: [
+                          /* @__PURE__ */ e(j, { iso2: f.iso2, className: b.flag }),
+                          /* @__PURE__ */ e("span", { className: b.countryName, children: f.name }),
+                          /* @__PURE__ */ l("span", { className: b.dialCode, children: [
+                            "+",
+                            f.dialCode
+                          ] })
+                        ]
+                      },
+                      f.iso2
+                    );
+                  }),
+                  S.length === 0 && /* @__PURE__ */ e(
+                    "div",
+                    {
+                      style: {
+                        padding: "1rem",
+                        textAlign: "center",
+                        color: "#6b7280",
+                        fontSize: "0.875rem"
+                      },
+                      children: "No countries found"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ e(
+          "input",
+          {
+            ref: i,
+            type: "tel",
+            value: y,
+            onChange: v,
+            className: b.input,
+            disabled: t
+          }
+        )
+      ] }),
+      t && /* @__PURE__ */ e(
+        E,
+        {
+          variant: "outline",
+          onClick: () => a(),
+          className: b.editButton,
+          children: "Edit"
+        }
+      )
+    ] })
+  ] });
+}, mt = () => {
+  const { sendOTP: r, verifyOTP: c, resendOTP: t } = $(), [a, m] = _(!1), [s, o] = _(null), [h, u] = _(!1), n = A({
+    initialValues: {
+      phone: "",
+      otp: ""
+    },
+    validationSchema: a ? le : ae,
+    validateOnChange: !1,
+    validateOnBlur: !1,
+    onSubmit: async (i, { setSubmitting: g, setFieldError: C }) => {
+      try {
+        o(null), a ? await c(i.phone, i.otp) : (await r({ phone: i.phone, medium: "whatsapp" }), m(!0));
+      } catch (S) {
+        const p = B(S);
+        p.hasFieldErrors ? p.fieldErrors.forEach((f) => {
+          C(f.param, f.message);
+        }) : o(p);
+      } finally {
+        g(!1);
+      }
+    }
+  }), y = () => {
+    m(!1), n.resetForm(), o(null);
+  }, v = async () => {
+    try {
+      u(!0), o(null), await t({ phone: n.values.phone, medium: "whatsapp" });
+    } catch (i) {
+      const g = B(i);
+      o(g);
+    } finally {
+      u(!1);
+    }
+  };
+  return /* @__PURE__ */ l(
+    "form",
+    {
+      onSubmit: n.handleSubmit,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "1rem"
+      },
+      children: [
+        /* @__PURE__ */ e(
+          ut,
+          {
+            phone: n.values.phone,
+            setPhone: (i) => n.setFieldValue("phone", i),
+            otpSent: a,
+            handleReset: y
+          }
+        ),
+        /* @__PURE__ */ e(
+          J,
+          {
+            otpSent: a,
+            otp: n.values.otp,
+            setOtp: (i) => n.setFieldValue("otp", i),
+            isResendingOtp: h,
+            resendOTP: v
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: d.buttonWrapper, children: a ? /* @__PURE__ */ e(
+          E,
+          {
+            type: "submit",
+            isLoading: n.isSubmitting,
+            isError: !!s,
+            disabled: n.isSubmitting,
+            className: d.fullWidthButton,
+            loadingText: "Verifying...",
+            errorText: "Verification Failed",
+            children: "Verify & Sign In"
+          }
+        ) : /* @__PURE__ */ e(
+          E,
+          {
+            type: "submit",
+            isLoading: n.isSubmitting,
+            isError: !!s,
+            disabled: n.isSubmitting,
+            className: d.fullWidthButton,
+            loadingText: "Sending Code...",
+            errorText: "Failed to Send",
+            children: "Send Code"
+          }
+        ) }),
+        s && /* @__PURE__ */ e(D, { error: s })
+      ]
+    }
+  );
+}, pt = ({
+  method: r,
+  onMagicLinkSent: c
+}) => {
+  switch (r) {
+    case "otp":
+      return /* @__PURE__ */ e(Ze, {});
+    case "whatsapp":
+      return /* @__PURE__ */ e(mt, {});
+    case "magiclink":
+      return /* @__PURE__ */ e(Ue, { onMagicLinkSent: c });
+    default:
+      return null;
+  }
+}, ht = ({ method: r }) => {
+  switch (r) {
+    case "google":
+      return /* @__PURE__ */ e(I.Button, { provider: "google", children: /* @__PURE__ */ l("button", { className: d.googleButton, children: [
+        /* @__PURE__ */ e("img", { className: d.googleIcon, src: "https://static.levocdn.com/png/google.png" }),
+        "Continue with Google"
+      ] }) });
+    case "microsoft":
+      return /* @__PURE__ */ e(I.Button, { provider: "microsoft", children: /* @__PURE__ */ l("button", { className: d.googleButton, children: [
+        /* @__PURE__ */ e("img", { className: d.googleIcon, src: "https://static.levocdn.com/png/microsoft.png" }),
+        "Continue with Microsoft"
+      ] }) });
+    case "linkedin":
+      return /* @__PURE__ */ e(I.Button, { provider: "linkedin", children: /* @__PURE__ */ l("button", { className: d.googleButton, children: [
+        /* @__PURE__ */ e("img", { className: d.googleIcon, src: "https://static.levocdn.com/png/linkedin.png" }),
+        "Continue with LinkedIn"
+      ] }) });
+    case "oauth":
+    default:
+      return /* @__PURE__ */ e(q, {});
+  }
+}, ft = ({
+  otpSent: r,
+  oAuthTitle: c,
+  onOAuthSuccess: t,
+  onOAuthError: a,
+  oAuthMethods: m
+}) => {
+  const { logger: s } = Q(), o = X();
+  return /* @__PURE__ */ e("div", { className: d.oauthContainer, children: !r && /* @__PURE__ */ e(
+    I.Container,
+    {
+      title: c,
+      onSuccess: () => {
+        Z("You are logged in successfully", "Login Successful", {
+          position: "top-right"
+        }), o?.identify(), t && t();
+      },
+      onError: (h) => {
+        const u = B(h);
+        s?.error("OAuth login failed", u.message), a && a(u);
+      },
+      children: m?.map((h) => /* @__PURE__ */ e(ht, { method: h }, h))
+    }
+  ) });
+}, gt = ({
+  oAuthMethods: r,
+  oAuthTitle: c = "Studio",
+  showDivider: t,
+  dividerText: a,
+  onOAuthSuccess: m,
+  onOAuthError: s
+}) => /* @__PURE__ */ l(q, { children: [
+  /* @__PURE__ */ e(
+    ft,
+    {
+      otpSent: !t,
+      oAuthTitle: c,
+      onOAuthSuccess: m,
+      onOAuthError: s,
+      oAuthMethods: r
+    }
+  ),
+  t && /* @__PURE__ */ l("div", { className: d.divider, children: [
+    /* @__PURE__ */ e("div", { className: d.dividerLine }),
+    /* @__PURE__ */ e("div", { className: d.dividerText, children: a }),
+    /* @__PURE__ */ e("div", { className: d.dividerLine })
+  ] })
+] }), kt = ({
+  className: r,
+  oAuthTitle: c = "Studio",
+  page: t,
+  magicLinkSent: a,
+  setMagicLinkSent: m,
+  oAuthMethods: s
+}) => {
+  const { refetchLoginStatus: o } = $(), h = F(() => t?.access?.[0]?.kind === "authentication" && t?.access?.[0]?.options?.primary_method || "otp", [t?.access]), u = F(() => s || (t?.access?.[0]?.kind === "authentication" ? t?.access?.[0]?.options?.methods?.filter((i) => te.includes(i)) || [] : []), [t?.access, s]), n = () => {
+    o();
+  }, y = (i) => {
+    ee(i);
+  }, v = () => {
+    switch (h) {
+      case "whatsapp":
+        return "or sign in with WhatsApp";
+      case "magiclink":
+      case "otp":
+      default:
+        return "or sign in with email";
+    }
+  };
+  return /* @__PURE__ */ l("div", { className: `${d.container} ${r || ""}`, children: [
+    u.length > 0 && !a && /* @__PURE__ */ e(
+      gt,
+      {
+        oAuthMethods: u,
+        oAuthTitle: c,
+        showDivider: !0,
+        dividerText: v(),
+        onOAuthSuccess: n,
+        onOAuthError: y
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: d.formSection, children: /* @__PURE__ */ e(
+      pt,
+      {
+        method: h,
+        onMagicLinkSent: m
+      }
+    ) })
+  ] });
+};
+export {
+  kt as L
+};