@levo-so/studio 0.1.81 → 0.1.82

package/dist/index-vtvLeTPv.js

@@ -0,0 +1,793 @@
+"use client";
+import { jsx as e, jsxs as a, Fragment as G } from "react/jsx-runtime";
+import { useLevo as X, LevoOAuth as $, successToast as Z, errorHandler as ee } from "@levo-so/react";
+import { useState as v, useEffect as z, useRef as F, useMemo as P } from "react";
+import { g as V, i as D, A as te } from "./index-DvqlCYn2.js";
+import { getLevoError as W } from "@levo-so/core";
+import { useFormik as R } from "formik";
+import { parsePhoneNumberWithError as ne } from "libphonenumber-js";
+import * as B from "yup";
+import re from "react-otp-input";
+import { ChevronDown as oe } from "lucide-react";
+import { Popover as I } from "radix-ui";
+import { usePhoneInput as ie, defaultCountries as M, parseCountry as j, FlagImage as q } from "react-international-phone";
+const H = B.string().required("Email is required").email("Please enter a valid email address").trim(), U = B.string().required("Please enter the verification code").length(4, "Verification code must be 4 digits").matches(/^\d+$/, "Verification code must contain only numbers"), K = B.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;
+  }
+}), Y = B.object({
+  email: H
+}), se = B.object({
+  email: H,
+  otp: U
+}), ae = B.object({
+  phone: K
+}), le = B.object({
+  phone: K,
+  otp: U
+}), ce = Y, de = "_button_1je4h_2", ue = "_content_1je4h_70", me = "_icon_1je4h_77", pe = "_spinner_1je4h_89", he = "_iconEnter_1je4h_103", fe = "_text_1je4h_119", S = {
+  button: de,
+  content: ue,
+  icon: me,
+  spinner: pe,
+  iconEnter: he,
+  text: fe
+}, T = ({
+  className: r,
+  children: l,
+  isLoading: t = !1,
+  isError: m = !1,
+  loadingText: c = "Loading...",
+  successText: u = "Success!",
+  errorText: s = "Error!",
+  variant: o = "default",
+  size: f = "default",
+  disabled: p,
+  ...i
+}) => {
+  const [b, y] = v(!1), [n, g] = v(!1), [x, _] = v(t);
+  z(() => {
+    if (x && !t)
+      if (m) {
+        g(!0);
+        const k = setTimeout(() => {
+          g(!1);
+        }, 2e3);
+        return () => clearTimeout(k);
+      } else {
+        y(!0);
+        const k = setTimeout(() => {
+          y(!1);
+        }, 2e3);
+        return () => clearTimeout(k);
+      }
+    _(t);
+  }, [t, x, m]);
+  const h = () => t ? c : b ? u : n ? s : l, C = () => n ? "destructive" : b ? "success" : o, E = () => t ? /* @__PURE__ */ e("div", { className: `${S.icon} ${S.iconEnter}`, children: /* @__PURE__ */ e("svg", { className: S.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"
+    }
+  ) }) }) : b && !t ? /* @__PURE__ */ e("div", { className: `${S.icon} ${S.iconEnter}`, children: /* @__PURE__ */ a("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"
+      }
+    )
+  ] }) }) : n && !t ? /* @__PURE__ */ e("div", { className: `${S.icon} ${S.iconEnter}`, children: /* @__PURE__ */ a(
+    "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: `${S.button} ${r || ""}`,
+      "data-variant": C(),
+      "data-size": f,
+      disabled: p || t,
+      ...i,
+      children: /* @__PURE__ */ a("div", { className: S.content, children: [
+        E(),
+        /* @__PURE__ */ e("span", { className: S.text, children: h() })
+      ] })
+    }
+  );
+}, _e = "_container_wx5fd_1", ge = "_label_wx5fd_5", ve = "_inputWrapper_wx5fd_13", be = "_input_wx5fd_13", ye = "_editButton_wx5fd_38", O = {
+  container: _e,
+  label: ge,
+  inputWrapper: ve,
+  input: be,
+  editButton: ye
+}, J = ({ email: r, setEmail: l, otpSent: t, handleReset: m }) => /* @__PURE__ */ a("div", { className: O.container, children: [
+  /* @__PURE__ */ e("label", { className: O.label, children: "Email" }),
+  /* @__PURE__ */ a("div", { className: O.inputWrapper, children: [
+    /* @__PURE__ */ e(
+      "input",
+      {
+        type: "email",
+        value: r,
+        onChange: (c) => l(c.target.value),
+        className: O.input,
+        placeholder: "Enter your email",
+        disabled: t
+      }
+    ),
+    t && /* @__PURE__ */ e(
+      T,
+      {
+        variant: "outline",
+        onClick: () => m(),
+        className: O.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", w = {
+  container: Ne,
+  iconWrapper: Se,
+  icon: xe,
+  content: Ce,
+  title: we,
+  message: Ee,
+  submessage: Te,
+  actions: ke,
+  resetButton: Be
+}, We = ({ email: r, onReset: l }) => /* @__PURE__ */ a("div", { className: w.container, children: [
+  /* @__PURE__ */ e("div", { className: w.iconWrapper, children: /* @__PURE__ */ e("svg", { className: w.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__ */ a("div", { className: w.content, children: [
+    /* @__PURE__ */ e("h3", { className: w.title, children: "Check your email" }),
+    /* @__PURE__ */ a("p", { className: w.message, children: [
+      "We've sent a magic link to ",
+      /* @__PURE__ */ e("strong", { children: r })
+    ] }),
+    /* @__PURE__ */ e("p", { className: w.submessage, children: "Click the link in your email to sign in. The link will expire in 15 minutes." })
+  ] }),
+  /* @__PURE__ */ e("div", { className: w.actions, children: /* @__PURE__ */ e(T, { variant: "outline", onClick: l, className: w.resetButton, children: "Use a different email" }) })
+] }), Oe = "_container_1mfd3_1", Le = "_errorContainer_1mfd3_5", Ie = "_divider_1mfd3_9", $e = "_dividerLine_1mfd3_15", Ve = "_dividerText_1mfd3_21", De = "_formSection_1mfd3_27", Re = "_buttonWrapper_1mfd3_33", Ae = "_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: Oe,
+  errorContainer: Le,
+  divider: Ie,
+  dividerLine: $e,
+  dividerText: Ve,
+  formSection: De,
+  buttonWrapper: Re,
+  fullWidthButton: Ae,
+  oauthContainer: Fe,
+  googleButton: Pe,
+  googleIcon: Me,
+  errorContent: je,
+  errorText: qe,
+  errorTitle: Ge,
+  errorMessage: ze,
+  errorDismiss: He
+}, A = ({ error: r, onDismiss: l }) => /* @__PURE__ */ e("div", { className: d.errorContainer, children: /* @__PURE__ */ a("div", { className: d.errorContent, children: [
+  /* @__PURE__ */ a("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" })
+  ] }),
+  l && /* @__PURE__ */ e("button", { onClick: l, className: d.errorDismiss, "aria-label": "Dismiss error", children: "×" })
+] }) }), Ue = ({
+  onMagicLinkSent: r,
+  onPendingApproval: l
+}) => {
+  const { sendMagicLink: t } = V(), [m, c] = v(!1), [u, s] = v(null);
+  z(() => {
+    r?.(m);
+  }, [m, r]);
+  const o = R({
+    initialValues: {
+      email: ""
+    },
+    validationSchema: ce,
+    validateOnChange: !1,
+    validateOnBlur: !1,
+    onSubmit: async (p, { setSubmitting: i, setFieldError: b }) => {
+      try {
+        s(null), await t(p.email), c(!0);
+      } catch (y) {
+        const n = W(y);
+        if (D(n.code)) {
+          l?.();
+          return;
+        }
+        n.hasFieldErrors ? n.fieldErrors.forEach((g) => {
+          b(g.param, g.message);
+        }) : s(n);
+      } finally {
+        i(!1);
+      }
+    }
+  }), f = () => {
+    c(!1), o.resetForm(), s(null);
+  };
+  return m ? /* @__PURE__ */ e(We, { email: o.values.email, onReset: f }) : /* @__PURE__ */ a(
+    "form",
+    {
+      onSubmit: o.handleSubmit,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "1rem"
+      },
+      children: [
+        /* @__PURE__ */ e(
+          J,
+          {
+            email: o.values.email,
+            setEmail: (p) => o.setFieldValue("email", p),
+            otpSent: !1,
+            handleReset: f
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: d.buttonWrapper, children: /* @__PURE__ */ e(
+          T,
+          {
+            type: "submit",
+            isLoading: o.isSubmitting,
+            isError: !!u,
+            disabled: o.isSubmitting,
+            className: d.fullWidthButton,
+            loadingText: "Sending Magic Link...",
+            errorText: "Failed to Send",
+            children: "Send Magic Link"
+          }
+        ) }),
+        u && /* @__PURE__ */ e(A, { error: u, 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
+}, Q = ({
+  otpSent: r,
+  isResendingOtp: l,
+  otp: t,
+  resendOTP: m,
+  setOtp: c
+}) => {
+  const [u, s] = v(0), o = () => {
+    m(() => {
+      s(30);
+      const f = setInterval(() => {
+        s((p) => p <= 1 ? (clearInterval(f), 0) : p - 1);
+      }, 1e3);
+    });
+  };
+  return r ? /* @__PURE__ */ a("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: c,
+        numInputs: 4,
+        inputStyle: {
+          marginRight: "12px"
+        },
+        inputType: "tel",
+        skipDefaultStyles: !0,
+        renderInput: ({ className: f, ...p }) => /* @__PURE__ */ e("input", { className: `${L.input} ${f}`, ...p })
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      "button",
+      {
+        onClick: o,
+        disabled: l || u > 0,
+        className: L.resendButton,
+        children: l ? "Resending..." : u > 0 ? `Resend in ${u}s` : "Resend Code"
+      }
+    )
+  ] }) : null;
+}, Ze = ({ onPendingApproval: r }) => {
+  const { sendOTP: l, verifyOTP: t, resendOTP: m } = V(), [c, u] = v(!1), [s, o] = v(null), [f, p] = v(!1), i = R({
+    initialValues: {
+      email: "",
+      otp: ""
+    },
+    validationSchema: c ? se : Y,
+    validateOnChange: !1,
+    validateOnBlur: !1,
+    onSubmit: async (n, { setSubmitting: g, setFieldError: x }) => {
+      try {
+        o(null), c ? await t(n.email, n.otp) : (await l({ email: n.email }), u(!0));
+      } catch (_) {
+        const h = W(_);
+        if (D(h.code)) {
+          r?.();
+          return;
+        }
+        h.hasFieldErrors ? h.fieldErrors.forEach((C) => {
+          x(C.param, C.message);
+        }) : o(h);
+      } finally {
+        g(!1);
+      }
+    }
+  }), b = () => {
+    u(!1), i.resetForm(), o(null);
+  }, y = async () => {
+    try {
+      p(!0), o(null), await m({ email: i.values.email });
+    } catch (n) {
+      const g = W(n);
+      o(g);
+    } finally {
+      p(!1);
+    }
+  };
+  return /* @__PURE__ */ a(
+    "form",
+    {
+      onSubmit: i.handleSubmit,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "1rem"
+      },
+      children: [
+        /* @__PURE__ */ e(
+          J,
+          {
+            email: i.values.email,
+            setEmail: (n) => i.setFieldValue("email", n),
+            otpSent: c,
+            handleReset: b
+          }
+        ),
+        /* @__PURE__ */ e(
+          Q,
+          {
+            otpSent: c,
+            otp: i.values.otp,
+            setOtp: (n) => i.setFieldValue("otp", n),
+            isResendingOtp: f,
+            resendOTP: y
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: d.buttonWrapper, children: c ? /* @__PURE__ */ e(
+          T,
+          {
+            type: "submit",
+            isLoading: i.isSubmitting,
+            isError: !!s,
+            disabled: i.isSubmitting || !i.values.otp,
+            className: d.fullWidthButton,
+            loadingText: "Verifying...",
+            errorText: "Verification Failed",
+            children: "Verify & Sign In"
+          }
+        ) : /* @__PURE__ */ e(
+          T,
+          {
+            type: "submit",
+            isLoading: i.isSubmitting,
+            isError: !!s,
+            disabled: i.isSubmitting,
+            className: d.fullWidthButton,
+            loadingText: "Sending Code...",
+            errorText: "Failed to Send",
+            children: "Send Code"
+          }
+        ) }),
+        s && /* @__PURE__ */ e(A, { 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", N = {
+  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: l, otpSent: t, handleReset: m }) => {
+  const [c, u] = v(!1), [s, o] = v(""), f = F(null), p = F(null), { inputValue: i, handlePhoneValueChange: b, inputRef: y, country: n, setCountry: g } = ie({
+    defaultCountry: "in",
+    value: r,
+    countries: M,
+    onChange: (_) => {
+      l(_.phone);
+    },
+    disableDialCodePrefill: !0,
+    forceDialCode: !0
+  }), x = M.filter((_) => {
+    const h = j(_);
+    return h.name.toLowerCase().includes(s.toLowerCase()) || h.dialCode.includes(s);
+  });
+  return /* @__PURE__ */ a("div", { children: [
+    /* @__PURE__ */ e("label", { className: N.label, children: "Phone Number" }),
+    /* @__PURE__ */ a("div", { className: N.inputWrapper, children: [
+      /* @__PURE__ */ a("div", { className: N.phoneInputWrapper, children: [
+        /* @__PURE__ */ a(I.Root, { open: c, onOpenChange: u, children: [
+          /* @__PURE__ */ e(I.Trigger, { asChild: !0, disabled: t, children: /* @__PURE__ */ a("button", { type: "button", className: N.selector, disabled: t, children: [
+            /* @__PURE__ */ e(q, { iso2: n.iso2, style: { width: "24px", height: "16px" } }),
+            /* @__PURE__ */ e(oe, { size: 16, style: { marginLeft: "4px", opacity: 0.5 } })
+          ] }) }),
+          /* @__PURE__ */ e(I.Portal, { children: /* @__PURE__ */ a(
+            I.Content,
+            {
+              className: N.dropdownContent,
+              align: "start",
+              side: "bottom",
+              sideOffset: 4,
+              onOpenAutoFocus: (_) => {
+                _.preventDefault(), p.current?.focus();
+              },
+              children: [
+                /* @__PURE__ */ e("div", { style: { padding: "0.5rem" }, children: /* @__PURE__ */ e(
+                  "input",
+                  {
+                    ref: p,
+                    type: "text",
+                    placeholder: "Search country...",
+                    value: s,
+                    onChange: (_) => o(_.target.value),
+                    onKeyDown: (_) => {
+                      _.key === "ArrowDown" && (_.preventDefault(), f.current?.firstElementChild?.focus());
+                    },
+                    className: N.input,
+                    style: {
+                      borderRadius: "0.375rem",
+                      borderLeft: "1px solid #d1d5db"
+                    }
+                  }
+                ) }),
+                /* @__PURE__ */ a("div", { ref: f, style: { overflowY: "auto", flex: 1 }, children: [
+                  x.map((_) => {
+                    const h = j(_), C = h.iso2 === n.iso2;
+                    return /* @__PURE__ */ a(
+                      "button",
+                      {
+                        type: "button",
+                        className: N.countryItem,
+                        "data-selected": C,
+                        onClick: () => {
+                          g(h.iso2), u(!1), o("");
+                        },
+                        onKeyDown: (E) => {
+                          if (E.key === "ArrowDown")
+                            E.preventDefault(), E.currentTarget.nextElementSibling?.focus();
+                          else if (E.key === "ArrowUp") {
+                            E.preventDefault();
+                            const k = E.currentTarget.previousElementSibling;
+                            k ? k.focus() : p.current?.focus();
+                          }
+                        },
+                        children: [
+                          /* @__PURE__ */ e(q, { iso2: h.iso2, className: N.flag }),
+                          /* @__PURE__ */ e("span", { className: N.countryName, children: h.name }),
+                          /* @__PURE__ */ a("span", { className: N.dialCode, children: [
+                            "+",
+                            h.dialCode
+                          ] })
+                        ]
+                      },
+                      h.iso2
+                    );
+                  }),
+                  x.length === 0 && /* @__PURE__ */ e(
+                    "div",
+                    {
+                      style: {
+                        padding: "1rem",
+                        textAlign: "center",
+                        color: "#6b7280",
+                        fontSize: "0.875rem"
+                      },
+                      children: "No countries found"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ e(
+          "input",
+          {
+            ref: y,
+            type: "tel",
+            value: i,
+            onChange: b,
+            className: N.input,
+            disabled: t
+          }
+        )
+      ] }),
+      t && /* @__PURE__ */ e(
+        T,
+        {
+          variant: "outline",
+          onClick: () => m(),
+          className: N.editButton,
+          children: "Edit"
+        }
+      )
+    ] })
+  ] });
+}, mt = ({ onPendingApproval: r }) => {
+  const { sendOTP: l, verifyOTP: t, resendOTP: m } = V(), [c, u] = v(!1), [s, o] = v(null), [f, p] = v(!1), i = R({
+    initialValues: {
+      phone: "",
+      otp: ""
+    },
+    validationSchema: c ? le : ae,
+    validateOnChange: !1,
+    validateOnBlur: !1,
+    onSubmit: async (n, { setSubmitting: g, setFieldError: x }) => {
+      try {
+        o(null), c ? await t(n.phone, n.otp) : (await l({ phone: n.phone, medium: "whatsapp" }), u(!0));
+      } catch (_) {
+        const h = W(_);
+        if (D(h.code)) {
+          r?.();
+          return;
+        }
+        h.hasFieldErrors ? h.fieldErrors.forEach((C) => {
+          x(C.param, C.message);
+        }) : o(h);
+      } finally {
+        g(!1);
+      }
+    }
+  }), b = () => {
+    u(!1), i.resetForm(), o(null);
+  }, y = async () => {
+    try {
+      p(!0), o(null), await m({ phone: i.values.phone, medium: "whatsapp" });
+    } catch (n) {
+      const g = W(n);
+      o(g);
+    } finally {
+      p(!1);
+    }
+  };
+  return /* @__PURE__ */ a(
+    "form",
+    {
+      onSubmit: i.handleSubmit,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "1rem"
+      },
+      children: [
+        /* @__PURE__ */ e(
+          ut,
+          {
+            phone: i.values.phone,
+            setPhone: (n) => i.setFieldValue("phone", n),
+            otpSent: c,
+            handleReset: b
+          }
+        ),
+        /* @__PURE__ */ e(
+          Q,
+          {
+            otpSent: c,
+            otp: i.values.otp,
+            setOtp: (n) => i.setFieldValue("otp", n),
+            isResendingOtp: f,
+            resendOTP: y
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: d.buttonWrapper, children: c ? /* @__PURE__ */ e(
+          T,
+          {
+            type: "submit",
+            isLoading: i.isSubmitting,
+            isError: !!s,
+            disabled: i.isSubmitting,
+            className: d.fullWidthButton,
+            loadingText: "Verifying...",
+            errorText: "Verification Failed",
+            children: "Verify & Sign In"
+          }
+        ) : /* @__PURE__ */ e(
+          T,
+          {
+            type: "submit",
+            isLoading: i.isSubmitting,
+            isError: !!s,
+            disabled: i.isSubmitting,
+            className: d.fullWidthButton,
+            loadingText: "Sending Code...",
+            errorText: "Failed to Send",
+            children: "Send Code"
+          }
+        ) }),
+        s && /* @__PURE__ */ e(A, { error: s })
+      ]
+    }
+  );
+}, pt = ({
+  method: r,
+  onMagicLinkSent: l,
+  onPendingApproval: t
+}) => {
+  switch (r) {
+    case "otp":
+      return /* @__PURE__ */ e(Ze, { onPendingApproval: t });
+    case "whatsapp":
+      return /* @__PURE__ */ e(mt, { onPendingApproval: t });
+    case "magiclink":
+      return /* @__PURE__ */ e(
+        Ue,
+        {
+          onMagicLinkSent: l,
+          onPendingApproval: t
+        }
+      );
+    default:
+      return null;
+  }
+}, ht = ({ method: r }) => {
+  switch (r) {
+    case "google":
+      return /* @__PURE__ */ e($.Button, { provider: "google", children: /* @__PURE__ */ a("button", { type: "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($.Button, { provider: "microsoft", children: /* @__PURE__ */ a("button", { type: "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($.Button, { provider: "linkedin", children: /* @__PURE__ */ a("button", { type: "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(G, {});
+  }
+}, ft = ({
+  otpSent: r,
+  oAuthTitle: l,
+  onOAuthSuccess: t,
+  onOAuthError: m,
+  oAuthMethods: c
+}) => {
+  const { logger: u } = X();
+  return /* @__PURE__ */ e("div", { className: d.oauthContainer, children: !r && /* @__PURE__ */ e(
+    $.Container,
+    {
+      title: l,
+      onSuccess: () => {
+        Z("You are logged in successfully", "Login Successful", {
+          position: "top-right"
+        }), t && t();
+      },
+      onError: (s) => {
+        const o = W(s);
+        u?.error("OAuth login failed", o.message), m && m(o);
+      },
+      children: c?.map((s) => /* @__PURE__ */ e(ht, { method: s }, s))
+    }
+  ) });
+}, _t = ({
+  oAuthMethods: r,
+  oAuthTitle: l = "Studio",
+  showDivider: t,
+  dividerText: m,
+  onOAuthSuccess: c,
+  onOAuthError: u
+}) => /* @__PURE__ */ a(G, { children: [
+  /* @__PURE__ */ e(
+    ft,
+    {
+      otpSent: !t,
+      oAuthTitle: l,
+      onOAuthSuccess: c,
+      onOAuthError: u,
+      oAuthMethods: r
+    }
+  ),
+  t && /* @__PURE__ */ a("div", { className: d.divider, children: [
+    /* @__PURE__ */ e("div", { className: d.dividerLine }),
+    /* @__PURE__ */ e("div", { className: d.dividerText, children: m }),
+    /* @__PURE__ */ e("div", { className: d.dividerLine })
+  ] })
+] }), kt = ({
+  className: r,
+  oAuthTitle: l = "Studio",
+  page: t,
+  magicLinkSent: m,
+  setMagicLinkSent: c,
+  oAuthMethods: u,
+  onPendingApproval: s
+}) => {
+  const { refetchLoginStatus: o } = V(), f = P(() => t?.access?.[0]?.kind === "authentication" && t?.access?.[0]?.options?.primary_method || "otp", [t?.access]), p = P(() => u || (t?.access?.[0]?.kind === "authentication" ? t?.access?.[0]?.options?.methods?.filter((n) => te.includes(n)) || [] : []), [t?.access, u]), i = () => {
+    o();
+  }, b = (n) => {
+    if (D(n?.code)) {
+      s?.();
+      return;
+    }
+    ee(n);
+  }, y = () => {
+    switch (f) {
+      case "whatsapp":
+        return "or sign in with WhatsApp";
+      case "magiclink":
+      case "otp":
+      default:
+        return "or sign in with email";
+    }
+  };
+  return /* @__PURE__ */ a("div", { className: `${d.container} ${r || ""}`, children: [
+    p.length > 0 && !m && /* @__PURE__ */ e(
+      _t,
+      {
+        oAuthMethods: p,
+        oAuthTitle: l,
+        showDivider: !0,
+        dividerText: y(),
+        onOAuthSuccess: i,
+        onOAuthError: b
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: d.formSection, children: /* @__PURE__ */ e(
+      pt,
+      {
+        method: f,
+        onMagicLinkSent: c,
+        onPendingApproval: s
+      }
+    ) })
+  ] });
+};
+export {
+  kt as L
+};