@mesob/auth-react 0.4.0 → 0.4.2

package/dist/components/profile/change-phone-form.js

@@ -1,777 +1,15 @@
 "use client";
-
-// src/components/profile/change-phone-form.tsx
 import {
-  Button as Button3,
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger
-} from "@mesob/ui/components";
-import { IconChevronDown } from "@tabler/icons-react";
-import { useState as useState5 } from "react";
-
-// src/provider.tsx
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { deepmerge } from "deepmerge-ts";
-import createFetchClient from "openapi-fetch";
-import createClient from "openapi-react-query";
-import { createContext, useContext, useMemo, useState } from "react";
-
-// src/lib/translations.ts
-function createTranslator(messages, namespace) {
-  return (key, params) => {
-    const fullKey = namespace ? `${namespace}.${key}` : key;
-    const keys = fullKey.split(".");
-    let value = messages;
-    for (const k of keys) {
-      if (value && typeof value === "object" && value !== null) {
-        value = value[k];
-      } else {
-        return fullKey;
-      }
-    }
-    if (typeof value !== "string") {
-      return fullKey;
-    }
-    if (params) {
-      return value.replace(
-        /\{(\w+)\}/g,
-        (_, param) => String(params[param] ?? `{${param}}`)
-      );
-    }
-    return value;
-  };
-}
-
-// src/utils/cookie.ts
-var isProduction = typeof process !== "undefined" && process.env.NODE_ENV === "production";
-
-// src/provider.tsx
-import { jsx } from "react/jsx-runtime";
-var SessionContext = createContext(null);
-var ApiContext = createContext(null);
-var ConfigContext = createContext(null);
-var queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false
-    }
-  }
-});
-function useSession() {
-  const context = useContext(SessionContext);
-  if (!context) {
-    throw new Error("useSession must be used within MesobAuthProvider");
-  }
-  return context;
-}
-function useApi() {
-  const context = useContext(ApiContext);
-  if (!context) {
-    throw new Error("useApi must be used within MesobAuthProvider");
-  }
-  return context;
-}
-function useConfig() {
-  const context = useContext(ConfigContext);
-  if (!context) {
-    throw new Error("useConfig must be used within MesobAuthProvider");
-  }
-  return context;
-}
-
-// src/components/profile/request-change-phone-form.tsx
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Button, Input, Label, Spinner } from "@mesob/ui/components";
-import { IconEye, IconEyeOff } from "@tabler/icons-react";
-import { useEffect, useState as useState2 } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
-
-// src/utils/normalize-phone.ts
-function normalizePhone(phone) {
-  const cleaned = phone.trim().replace(/\s/g, "");
-  if (cleaned.startsWith("+2519") || cleaned.startsWith("+2517")) {
-    return cleaned;
-  }
-  if (cleaned.startsWith("2519") || cleaned.startsWith("2517")) {
-    return `+${cleaned}`;
-  }
-  if (cleaned.startsWith("09") || cleaned.startsWith("07")) {
-    return `+251${cleaned.slice(1)}`;
-  }
-  if ((cleaned.startsWith("9") || cleaned.startsWith("7")) && cleaned.length === 9) {
-    return `+251${cleaned}`;
-  }
-  return cleaned;
-}
-
-// src/components/profile/request-change-phone-form.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var phonePasswordSchema = (phoneRegex) => z.object({
-  phone: z.string().trim().min(1, { message: "Phone number is required" }).refine(
-    (val) => {
-      const isPhone = phoneRegex.test(val);
-      return isPhone;
-    },
-    {
-      message: "Invalid phone number"
-    }
-  ),
-  password: z.string().min(8, "Password must be at least 8 characters").max(128, "Password too long")
-});
-function isAuthError(error) {
-  return typeof error === "object" && error !== null && ("code" in error || "message" in error || "name" in error);
-}
-function getErrorCode(error) {
-  if (error.code) {
-    return error.code;
-  }
-  if (error.message) {
-    const upperMessage = error.message.toUpperCase().trim();
-    const validCodes = [
-      "USER_NOT_FOUND",
-      "USER_EXISTS",
-      "INVALID_PASSWORD",
-      "VERIFICATION_EXPIRED",
-      "VERIFICATION_MISMATCH",
-      "VERIFICATION_NOT_FOUND",
-      "TOO_MANY_ATTEMPTS",
-      "UNAUTHORIZED"
-    ];
-    if (validCodes.includes(upperMessage)) {
-      return upperMessage;
-    }
-  }
-  return void 0;
-}
-function getErrorMessage(error) {
-  if (isAuthError(error)) {
-    const errorCode = getErrorCode(error);
-    switch (errorCode) {
-      case "USER_EXISTS":
-        return "This phone number is already taken. Please use a different number.";
-      case "VERIFICATION_EXPIRED":
-        return "Verification code has expired. Please request a new one.";
-      case "VERIFICATION_MISMATCH":
-        return "Invalid verification code. Please try again.";
-      case "VERIFICATION_NOT_FOUND":
-        return "Verification not found. Please request a new code.";
-      default:
-        return error.message || "An error occurred. Please try again.";
-    }
-  }
-  if (error instanceof Error) {
-    return error.message;
-  }
-  return "An error occurred. Please try again.";
-}
-function RequestChangePhoneForm({
-  onSuccess,
-  onCancel,
-  buttonText
-}) {
-  const { user } = useSession();
-  const { hooks } = useApi();
-  const { config } = useConfig();
-  const [isSubmitting, setIsSubmitting] = useState2(false);
-  const [isChecking, setIsChecking] = useState2(true);
-  const [showPassword, setShowPassword] = useState2(false);
-  const phoneRegex = typeof config.phoneRegex === "string" ? new RegExp(config.phoneRegex) : config.phoneRegex || /^(\+2519|\+2517|2519|2517|09|07)\d{8}$/;
-  const getPendingAccountChangeQuery = hooks.useQuery(
-    "get",
-    "/account-change/pending",
-    {},
-    { enabled: false }
-  );
-  const verifyPasswordMutation = hooks.useMutation("post", "/password/verify");
-  const checkUserMutation = hooks.useMutation("post", "/check-account");
-  const requestPhoneOtpMutation = hooks.useMutation(
-    "post",
-    "/phone/verification/request"
-  );
-  const phonePasswordForm = useForm({
-    resolver: zodResolver(phonePasswordSchema(phoneRegex)),
-    defaultValues: {
-      phone: "",
-      password: ""
-    }
-  });
-  const {
-    register,
-    handleSubmit,
-    getValues,
-    setValue,
-    formState: { errors }
-  } = phonePasswordForm;
-  useEffect(() => {
-    let active = true;
-    const run = async () => {
-      try {
-        const data = await getPendingAccountChangeQuery.refetch();
-        if (!active) {
-          return;
-        }
-        const accountChange = data.data?.accountChange;
-        const verificationId = data.data?.verificationId;
-        if (accountChange?.changeType !== "phone") {
-          setIsChecking(false);
-          return;
-        }
-        if (!accountChange.newPhone) {
-          setIsChecking(false);
-          return;
-        }
-        if (getValues("phone")) {
-          setIsChecking(false);
-          return;
-        }
-        setValue("phone", accountChange.newPhone, { shouldValidate: true });
-        if (verificationId) {
-          toast.message("Resuming verification\u2026");
-          onSuccess(verificationId, accountChange.newPhone);
-          return;
-        }
-        setIsChecking(false);
-      } catch {
-        setIsChecking(false);
-      }
-    };
-    run().catch(() => void 0);
-    return () => {
-      active = false;
-    };
-  }, [getPendingAccountChangeQuery.refetch, getValues, onSuccess, setValue]);
-  const onPhonePasswordSubmit = async (data) => {
-    if (!user) {
-      toast.error("User not found");
-      return;
-    }
-    try {
-      setIsSubmitting(true);
-      const normalizedPhone = normalizePhone(data.phone);
-      await verifyPasswordMutation.mutateAsync({
-        body: { password: data.password }
-      });
-      const checkResult = await checkUserMutation.mutateAsync({
-        body: { identifier: normalizedPhone }
-      });
-      if (checkResult.data?.exists) {
-        if (user?.phone?.replace(/\s/g, "") === normalizedPhone.replace(/\s/g, "")) {
-          toast.error("This is already your current phone number.");
-          return;
-        }
-        toast.error(
-          "This phone number is already taken. Please use a different number."
-        );
-        return;
-      }
-      const verification = await requestPhoneOtpMutation.mutateAsync({
-        body: {
-          phone: normalizedPhone,
-          context: "change-phone"
-        }
-      });
-      toast.success("Verification code sent to your phone");
-      onSuccess(verification.data?.verificationId ?? "", normalizedPhone);
-    } catch (error) {
-      const errorMessage = getErrorMessage(error);
-      if (isAuthError(error)) {
-        const errorCode = getErrorCode(error);
-        if (errorCode === "INVALID_PASSWORD" || errorCode === "USER_NOT_FOUND") {
-          toast.error("Incorrect password. Please try again.");
-          return;
-        }
-      }
-      toast.error(errorMessage);
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-  const isLoading = isSubmitting || isChecking;
-  return /* @__PURE__ */ jsxs(
-    "form",
-    {
-      onSubmit: handleSubmit(onPhonePasswordSubmit),
-      className: "p-4 space-y-4 border-t",
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "space-y-4 w-full md:w-1/2", children: [
-          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx2(Label, { htmlFor: "phone", children: "Phone Number" }),
-            /* @__PURE__ */ jsx2(
-              Input,
-              {
-                id: "phone",
-                type: "tel",
-                placeholder: "Enter your new phone number",
-                ...register("phone"),
-                disabled: isLoading
-              }
-            ),
-            errors.phone && /* @__PURE__ */ jsx2("p", { className: "text-sm text-destructive", children: errors.phone.message })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx2(Label, { htmlFor: "password", children: "Password" }),
-            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx2(
-                Input,
-                {
-                  id: "password",
-                  type: showPassword ? "text" : "password",
-                  autoComplete: "current-password",
-                  placeholder: "Enter your password",
-                  ...register("password"),
-                  disabled: isLoading
-                }
-              ),
-              /* @__PURE__ */ jsx2(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setShowPassword(!showPassword),
-                  className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
-                  children: showPassword ? /* @__PURE__ */ jsx2(IconEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx2(IconEye, { className: "h-4 w-4" })
-                }
-              )
-            ] }),
-            errors.password && /* @__PURE__ */ jsx2("p", { className: "text-sm text-destructive", children: errors.password.message })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ jsx2(
-            Button,
-            {
-              type: "button",
-              variant: "outline",
-              onClick: onCancel,
-              disabled: isLoading,
-              children: "Cancel"
-            }
-          ),
-          /* @__PURE__ */ jsxs(Button, { type: "submit", disabled: isLoading, children: [
-            isLoading && /* @__PURE__ */ jsx2(Spinner, { className: "mr-2 h-4 w-4" }),
-            isChecking ? "Checking\u2026" : buttonText
-          ] })
-        ] })
-      ]
-    }
-  );
-}
-
-// src/components/profile/verify-change-phone-form.tsx
-import { useState as useState4 } from "react";
-import { toast as toast2 } from "sonner";
-
-// src/components/profile/otp-verification-modal.tsx
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle
-} from "@mesob/ui/components";
-
-// src/components/auth/verification-form.tsx
-import { zodResolver as zodResolver2 } from "@hookform/resolvers/zod";
-import {
-  Button as Button2,
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSlot
-} from "@mesob/ui/components";
-import { useForm as useForm2 } from "react-hook-form";
-import { z as z2 } from "zod";
-
-// src/hooks/use-translator.ts
-import { useMesob } from "@mesob/ui/providers";
-function useTranslator(namespace) {
-  const mesob = useMesob();
-  const { config } = useConfig();
-  if (mesob?.t) {
-    return (key, params) => {
-      const fullKey = namespace ? `${namespace}.${key}` : key;
-      return mesob.t?.(fullKey, params) ?? fullKey;
-    };
-  }
-  return createTranslator(config.messages || {}, namespace);
-}
-
-// src/components/auth/countdown.tsx
-import { Spinner as Spinner2 } from "@mesob/ui/components";
-import { useEffect as useEffect2, useState as useState3 } from "react";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var Countdown = ({
-  initialSeconds = 60,
-  onResend,
-  resending = false
-}) => {
-  const t = useTranslator("Common");
-  const [seconds, setSeconds] = useState3(initialSeconds);
-  const [isResending, setIsResending] = useState3(false);
-  useEffect2(() => {
-    if (seconds <= 0) {
-      return;
-    }
-    const timer = setInterval(() => {
-      setSeconds((prev) => {
-        if (prev <= 1) {
-          clearInterval(timer);
-          return 0;
-        }
-        return prev - 1;
-      });
-    }, 1e3);
-    return () => clearInterval(timer);
-  }, [seconds]);
-  const handleResend = async () => {
-    setIsResending(true);
-    try {
-      await onResend();
-      setSeconds(initialSeconds);
-    } catch (_error) {
-    } finally {
-      setIsResending(false);
-    }
-  };
-  const busy = isResending || resending;
-  if (seconds > 0) {
-    return /* @__PURE__ */ jsx3("p", { className: "text-sm text-muted-foreground", children: t("resendIn", { seconds }) });
-  }
-  return /* @__PURE__ */ jsxs2(
-    "button",
-    {
-      type: "button",
-      onClick: handleResend,
-      disabled: busy,
-      className: "text-sm text-primary hover:underline disabled:opacity-50 flex items-center gap-1",
-      children: [
-        busy && /* @__PURE__ */ jsx3(Spinner2, { className: "h-3 w-3" }),
-        t("resend")
-      ]
-    }
-  );
-};
-
-// src/components/auth/verification-form.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var verificationSchema = (t) => z2.object({
-  code: z2.string().length(6, t("form.codeLength"))
-});
-var VerificationForm = ({
-  onSubmit,
-  onResend,
-  isLoading = false
-}) => {
-  const t = useTranslator("Auth.verification");
-  const form = useForm2({
-    resolver: zodResolver2(verificationSchema(t)),
-    defaultValues: { code: "" }
-  });
-  const handleSubmit = form.handleSubmit(async (values) => {
-    await onSubmit(values);
-  });
-  const codeLength = form.watch("code").length;
-  return /* @__PURE__ */ jsx4(Form, { ...form, children: /* @__PURE__ */ jsxs3(
-    "form",
-    {
-      id: "verification-form",
-      onSubmit: handleSubmit,
-      className: "space-y-4",
-      children: [
-        /* @__PURE__ */ jsx4(
-          FormField,
-          {
-            control: form.control,
-            name: "code",
-            render: ({ field }) => /* @__PURE__ */ jsxs3(FormItem, { children: [
-              /* @__PURE__ */ jsx4("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx4(FormLabel, { children: t("form.codeLabel") }) }),
-              /* @__PURE__ */ jsx4(FormControl, { children: /* @__PURE__ */ jsx4(
-                InputOTP,
-                {
-                  maxLength: 6,
-                  required: true,
-                  value: field.value ?? "",
-                  onChange: field.onChange,
-                  onBlur: field.onBlur,
-                  containerClassName: "gap-4 justify-center mb-2 flex items-center",
-                  children: /* @__PURE__ */ jsxs3(InputOTPGroup, { className: "gap-3 *:data-[slot=input-otp-slot]:h-12 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl", children: [
-                    /* @__PURE__ */ jsx4(InputOTPSlot, { className: "h-12", index: 0 }),
-                    /* @__PURE__ */ jsx4(InputOTPSlot, { className: "h-12", index: 1 }),
-                    /* @__PURE__ */ jsx4(InputOTPSlot, { className: "h-12", index: 2 }),
-                    /* @__PURE__ */ jsx4(InputOTPSlot, { className: "h-12", index: 3 }),
-                    /* @__PURE__ */ jsx4(InputOTPSlot, { className: "h-12", index: 4 }),
-                    /* @__PURE__ */ jsx4(InputOTPSlot, { className: "h-12", index: 5 })
-                  ] })
-                }
-              ) }),
-              /* @__PURE__ */ jsx4(FormMessage, {})
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsx4(
-          Button2,
-          {
-            type: "submit",
-            form: "verification-form",
-            className: "w-full",
-            disabled: isLoading || codeLength !== 6,
-            loading: isLoading,
-            children: t("form.confirm")
-          }
-        ),
-        /* @__PURE__ */ jsx4("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx4(Countdown, { onResend, resending: isLoading }) })
-      ]
-    }
-  ) });
-};
-
-// src/components/profile/otp-verification-modal.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-function OtpVerificationModal({
-  open,
-  title,
-  description,
-  verificationId,
-  isLoading,
-  onSubmit,
-  onResend,
-  onCancel
-}) {
-  return /* @__PURE__ */ jsx5(
-    Dialog,
-    {
-      open,
-      onOpenChange: (nextOpen) => {
-        if (!nextOpen) {
-          onCancel?.();
-        }
-      },
-      children: /* @__PURE__ */ jsxs4(DialogContent, { children: [
-        /* @__PURE__ */ jsxs4(DialogHeader, { children: [
-          /* @__PURE__ */ jsx5(DialogTitle, { children: title }),
-          description && /* @__PURE__ */ jsx5(DialogDescription, { children: description })
-        ] }),
-        /* @__PURE__ */ jsx5(
-          VerificationForm,
-          {
-            verificationId,
-            isLoading,
-            onSubmit: async ({ code }) => onSubmit(code),
-            onResend: onResend ?? (() => void 0)
-          }
-        )
-      ] })
-    }
-  );
-}
-
-// src/components/profile/verify-change-phone-form.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-function isAuthError2(error) {
-  return typeof error === "object" && error !== null && ("code" in error || "message" in error || "name" in error);
-}
-function getErrorCode2(error) {
-  if (error.code) {
-    return error.code;
-  }
-  if (error.message) {
-    const upperMessage = error.message.toUpperCase().trim();
-    const validCodes = [
-      "USER_NOT_FOUND",
-      "USER_EXISTS",
-      "INVALID_PASSWORD",
-      "VERIFICATION_EXPIRED",
-      "VERIFICATION_MISMATCH",
-      "VERIFICATION_NOT_FOUND",
-      "TOO_MANY_ATTEMPTS",
-      "UNAUTHORIZED"
-    ];
-    if (validCodes.includes(upperMessage)) {
-      return upperMessage;
-    }
-  }
-  return void 0;
-}
-function getErrorMessage2(error) {
-  if (isAuthError2(error)) {
-    const errorCode = getErrorCode2(error);
-    switch (errorCode) {
-      case "USER_EXISTS":
-        return "This phone number is already taken. Please use a different number.";
-      case "VERIFICATION_EXPIRED":
-        return "Verification code has expired. Please request a new one.";
-      case "VERIFICATION_MISMATCH":
-        return "Invalid verification code. Please try again.";
-      case "VERIFICATION_NOT_FOUND":
-        return "Verification not found. Please request a new code.";
-      default:
-        return error.message || "An error occurred. Please try again.";
-    }
-  }
-  if (error instanceof Error) {
-    return error.message;
-  }
-  return "An error occurred. Please try again.";
-}
-function VerifyChangePhoneForm({
-  phone,
-  verificationId,
-  onSuccess,
-  onCancel
-}) {
-  const { refresh } = useSession();
-  const { hooks } = useApi();
-  const [isSubmitting, setIsSubmitting] = useState4(false);
-  const [currentVerificationId, setCurrentVerificationId] = useState4(verificationId);
-  const verifyPhoneOtpMutation = hooks.useMutation(
-    "post",
-    "/phone/verification/confirm"
-  );
-  const updatePhoneMutation = hooks.useMutation("put", "/profile/phone");
-  const requestPhoneOtpMutation = hooks.useMutation(
-    "post",
-    "/phone/verification/request"
-  );
-  const onOtpSubmit = async (code) => {
-    if (!currentVerificationId) {
-      toast2.error("Verification not found. Please request a new code.");
-      return;
-    }
-    try {
-      setIsSubmitting(true);
-      await verifyPhoneOtpMutation.mutateAsync({
-        body: {
-          verificationId: currentVerificationId,
-          code,
-          context: "change-phone"
-        }
-      });
-      await updatePhoneMutation.mutateAsync({
-        body: { phone }
-      });
-      toast2.success("Phone number updated successfully");
-      await refresh();
-      onSuccess();
-    } catch (error) {
-      const errorMessage = getErrorMessage2(error);
-      toast2.error(errorMessage);
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-  if (!currentVerificationId) {
-    toast2.error("Verification not found. Please request a new code.");
-    return null;
-  }
-  return /* @__PURE__ */ jsx6(
-    OtpVerificationModal,
-    {
-      open: true,
-      title: "Verify phone",
-      description: `Enter the verification code sent to ${phone}`,
-      verificationId: currentVerificationId,
-      isLoading: isSubmitting,
-      onSubmit: onOtpSubmit,
-      onResend: async () => {
-        try {
-          setIsSubmitting(true);
-          const next = await requestPhoneOtpMutation.mutateAsync({
-            body: {
-              phone,
-              context: "change-phone"
-            }
-          });
-          setCurrentVerificationId(next.data?.verificationId ?? null);
-          toast2.success("Verification code resent");
-        } catch (error) {
-          toast2.error(getErrorMessage2(error));
-        } finally {
-          setIsSubmitting(false);
-        }
-      },
-      onCancel
-    }
-  );
-}
-
-// src/components/profile/change-phone-form.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-function ChangePhoneForm() {
-  const { user } = useSession();
-  const [isOpen, setIsOpen] = useState5(false);
-  const [showOtp, setShowOtp] = useState5(false);
-  const [verificationId, setVerificationId] = useState5(null);
-  const [newPhone, setNewPhone] = useState5("");
-  const resetForms = () => {
-    setShowOtp(false);
-    setVerificationId(null);
-    setNewPhone("");
-  };
-  const handleRequestSuccess = (id, phone) => {
-    setVerificationId(id);
-    setNewPhone(phone);
-    setShowOtp(true);
-  };
-  const handleVerifySuccess = () => {
-    resetForms();
-    setIsOpen(false);
-  };
-  const handleCancel = () => {
-    resetForms();
-    setIsOpen(false);
-  };
-  const title = user?.phone ? "Change Phone" : "Add Phone";
-  const description = user?.phone ? "Update your phone number" : "Add a phone number to your account";
-  return /* @__PURE__ */ jsx7(Collapsible, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxs5("div", { className: "border rounded-lg", children: [
-    /* @__PURE__ */ jsxs5(
-      CollapsibleTrigger,
-      {
-        render: /* @__PURE__ */ jsx7(
-          Button3,
-          {
-            variant: "ghost",
-            className: "w-full justify-between p-4 h-auto"
-          }
-        ),
-        children: [
-          /* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-start", children: [
-            /* @__PURE__ */ jsx7("span", { className: "font-medium", children: title }),
-            /* @__PURE__ */ jsx7("span", { className: "text-sm text-muted-foreground", children: description })
-          ] }),
-          /* @__PURE__ */ jsx7(
-            IconChevronDown,
-            {
-              className: `h-4 w-4 transition-transform ${isOpen ? "rotate-180" : ""}`
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx7(CollapsibleContent, { children: showOtp ? /* @__PURE__ */ jsx7(
-      VerifyChangePhoneForm,
-      {
-        phone: newPhone,
-        verificationId,
-        onSuccess: handleVerifySuccess,
-        onCancel: handleCancel
-      }
-    ) : /* @__PURE__ */ jsx7(
-      RequestChangePhoneForm,
-      {
-        onSuccess: handleRequestSuccess,
-        onCancel: handleCancel,
-        buttonText: title
-      }
-    ) })
-  ] }) });
-}
+  ChangePhoneForm
+} from "../../chunk-5F5FZMHE.js";
+import "../../chunk-ZG6WFZHX.js";
+import "../../chunk-C26NPUPI.js";
+import "../../chunk-KWG4DSB5.js";
+import "../../chunk-FFR5UHTS.js";
+import "../../chunk-GP7GIUI3.js";
+import "../../chunk-V2W3WPCZ.js";
+import "../../chunk-QNCE2B5O.js";
+import "../../chunk-72YRO3A7.js";
 export {
   ChangePhoneForm
 };