@levo-so/studio 0.1.82 → 0.1.83

package/dist/LoginForm-54dtpOlx.js

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