@mesob/auth-react 0.3.2 → 0.3.3

package/dist/index.js

@@ -1,9 +1,10 @@
 "use client";
 
 // src/components/auth/auth-card.tsx
+import { Card } from "@mesob/ui/components";
 import { jsx } from "react/jsx-runtime";
 var AuthCard = ({ children }) => {
-  return /* @__PURE__ */ jsx("div", { className: "flex min-h-screen w-full p-4 items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-full min-w-[280px] max-w-[28rem] shrink-0", children: /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-border bg-card p-6 shadow-lg sm:p-8", children }) }) });
+  return /* @__PURE__ */ jsx("div", { className: "flex min-h-screen w-full p-4 items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-full min-w-[280px] max-w-[28rem] shrink-0", children: /* @__PURE__ */ jsx(Card, { padding: "lg", children }) }) });
 };
 
 // src/components/auth/forgot-password.tsx
@@ -13,17 +14,19 @@ import {
   AlertDescription,
   AlertTitle,
   Button,
-  Field,
-  FieldError,
-  FieldGroup,
-  FieldLabel,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   Input,
   Spinner
 } from "@mesob/ui/components";
 import { useMesob as useMesob2 } from "@mesob/ui/providers";
 import { IconAlertCircle } from "@tabler/icons-react";
 import { useEffect, useState as useState2 } from "react";
-import { Controller, useForm } from "react-hook-form";
+import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 
@@ -530,42 +533,48 @@ var ForgotPassword = () => {
         }
       ),
       children: [
-        /* @__PURE__ */ jsxs2("form", { id: "forgot-password-form", onSubmit: handleSubmit, children: [
-          /* @__PURE__ */ jsx4(FieldGroup, { children: /* @__PURE__ */ jsx4(
-            Controller,
-            {
-              name: "account",
-              control: form.control,
-              render: ({ field, fieldState }) => /* @__PURE__ */ jsxs2(Field, { "data-invalid": fieldState.invalid, children: [
-                /* @__PURE__ */ jsx4(FieldLabel, { htmlFor: "forgot-password-account", children: t("form.accountLabel") }),
-                /* @__PURE__ */ jsx4(
-                  Input,
-                  {
-                    ...field,
-                    id: "forgot-password-account",
-                    type: "text",
-                    placeholder: t("form.accountPlaceholder"),
-                    "aria-invalid": fieldState.invalid
-                  }
-                ),
-                fieldState.invalid && /* @__PURE__ */ jsx4(FieldError, { errors: [fieldState.error] })
-              ] })
-            }
-          ) }),
-          /* @__PURE__ */ jsx4("div", { className: "mt-4", children: /* @__PURE__ */ jsxs2(
-            Button,
-            {
-              type: "submit",
-              form: "forgot-password-form",
-              className: "w-full",
-              disabled: isLoading || forgotPasswordMutation.isPending,
-              children: [
-                isLoading || forgotPasswordMutation.isPending && /* @__PURE__ */ jsx4(Spinner, {}),
-                isLoading || forgotPasswordMutation.isPending ? t("form.submitting") : t("form.submit")
-              ]
-            }
-          ) })
-        ] }),
+        /* @__PURE__ */ jsx4(Form, { ...form, children: /* @__PURE__ */ jsxs2(
+          "form",
+          {
+            id: "forgot-password-form",
+            onSubmit: handleSubmit,
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsx4(
+                FormField,
+                {
+                  control: form.control,
+                  name: "account",
+                  render: ({ field }) => /* @__PURE__ */ jsxs2(FormItem, { children: [
+                    /* @__PURE__ */ jsx4(FormLabel, { children: t("form.accountLabel") }),
+                    /* @__PURE__ */ jsx4(FormControl, { children: /* @__PURE__ */ jsx4(
+                      Input,
+                      {
+                        ...field,
+                        type: "text",
+                        placeholder: t("form.accountPlaceholder")
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx4(FormMessage, {})
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsxs2(
+                Button,
+                {
+                  type: "submit",
+                  form: "forgot-password-form",
+                  className: "w-full",
+                  disabled: isLoading || forgotPasswordMutation.isPending,
+                  children: [
+                    isLoading || forgotPasswordMutation.isPending && /* @__PURE__ */ jsx4(Spinner, {}),
+                    isLoading || forgotPasswordMutation.isPending ? t("form.submitting") : t("form.submit")
+                  ]
+                }
+              )
+            ]
+          }
+        ) }),
         errorContent && /* @__PURE__ */ jsxs2(Alert, { variant: "destructive", className: "mt-4", children: [
           /* @__PURE__ */ jsx4(IconAlertCircle, { className: "h-4 w-4" }),
           /* @__PURE__ */ jsx4(AlertTitle, { children: errorContent.title }),
@@ -583,23 +592,59 @@ import {
   AlertDescription as AlertDescription2,
   AlertTitle as AlertTitle2,
   Button as Button2,
-  Field as Field2,
-  FieldError as FieldError2,
-  FieldGroup as FieldGroup2,
-  FieldLabel as FieldLabel2,
+  Form as Form2,
+  FormControl as FormControl2,
+  FormField as FormField2,
+  FormItem as FormItem2,
+  FormLabel as FormLabel2,
+  FormMessage as FormMessage2,
   Input as Input2,
   InputOTP,
   InputOTPGroup,
   InputOTPSlot,
-  Spinner as Spinner2
+  Spinner as Spinner2,
+  useFormField
 } from "@mesob/ui/components";
 import { useMesob as useMesob3 } from "@mesob/ui/providers";
 import { IconAlertCircle as IconAlertCircle2, IconEye, IconEyeOff } from "@tabler/icons-react";
 import { useEffect as useEffect2, useState as useState3 } from "react";
-import { Controller as Controller2, useForm as useForm2 } from "react-hook-form";
+import { useForm as useForm2 } from "react-hook-form";
 import { toast as toast2 } from "sonner";
 import { z as z2 } from "zod";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function PasswordInput({
+  field,
+  show,
+  onToggle,
+  placeholder
+}) {
+  const { formItemId, error } = useFormField();
+  return /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx5(
+      Input2,
+      {
+        ...field,
+        id: formItemId,
+        type: show ? "text" : "password",
+        placeholder,
+        "aria-invalid": !!error,
+        className: "pr-10"
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      Button2,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon",
+        className: "absolute right-0 top-0 h-full px-3 text-muted-foreground hover:text-foreground",
+        onClick: onToggle,
+        "aria-label": show ? "Hide password" : "Show password",
+        children: show ? /* @__PURE__ */ jsx5(IconEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx5(IconEye, { className: "h-4 w-4" })
+      }
+    )
+  ] });
+}
 var resetPasswordSchema = (t) => z2.object({
   code: z2.string().length(6, t("errors.codeLength")),
   password: z2.string().min(8, t("errors.passwordLength")),
@@ -717,117 +762,98 @@ var ResetPasswordForm = ({
         )
       ] }),
       children: [
-        /* @__PURE__ */ jsxs3("form", { id: "reset-password-form", onSubmit: handleSubmit, children: [
-          /* @__PURE__ */ jsxs3(FieldGroup2, { children: [
-            /* @__PURE__ */ jsx5(
-              Controller2,
-              {
-                name: "code",
-                control: form.control,
-                render: ({ field, fieldState }) => /* @__PURE__ */ jsxs3(Field2, { "data-invalid": fieldState.invalid, children: [
-                  /* @__PURE__ */ jsx5("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx5(FieldLabel2, { children: t("form.codeLabel") }) }),
-                  /* @__PURE__ */ jsx5("div", { className: "flex mt-2 justify-center", children: /* @__PURE__ */ jsx5(
-                    InputOTP,
-                    {
-                      maxLength: 6,
-                      value: field.value,
-                      onChange: field.onChange,
-                      onBlur: field.onBlur,
-                      containerClassName: "gap-4",
-                      "aria-invalid": fieldState.invalid,
-                      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__ */ jsx5(InputOTPSlot, { className: "h-12", index: 0 }),
-                        /* @__PURE__ */ jsx5(InputOTPSlot, { className: "h-12", index: 1 }),
-                        /* @__PURE__ */ jsx5(InputOTPSlot, { className: "h-12", index: 2 }),
-                        /* @__PURE__ */ jsx5(InputOTPSlot, { className: "h-12", index: 3 }),
-                        /* @__PURE__ */ jsx5(InputOTPSlot, { className: "h-12", index: 4 }),
-                        /* @__PURE__ */ jsx5(InputOTPSlot, { className: "h-12", index: 5 })
-                      ] })
-                    }
-                  ) }),
-                  fieldState.invalid && /* @__PURE__ */ jsx5(FieldError2, { errors: [fieldState.error] })
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsx5(
-              Controller2,
-              {
-                name: "password",
-                control: form.control,
-                render: ({ field, fieldState }) => /* @__PURE__ */ jsxs3(Field2, { "data-invalid": fieldState.invalid, children: [
-                  /* @__PURE__ */ jsx5(FieldLabel2, { htmlFor: "reset-password-password", children: t("form.passwordLabel") }),
-                  /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
-                    /* @__PURE__ */ jsx5(
-                      Input2,
-                      {
-                        ...field,
-                        id: "reset-password-password",
-                        type: showPassword ? "text" : "password",
-                        placeholder: t("form.passwordPlaceholder"),
-                        "aria-invalid": fieldState.invalid
-                      }
-                    ),
-                    /* @__PURE__ */ jsx5(
-                      "button",
+        /* @__PURE__ */ jsx5(Form2, { ...form, children: /* @__PURE__ */ jsxs3(
+          "form",
+          {
+            id: "reset-password-form",
+            onSubmit: handleSubmit,
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsx5(
+                FormField2,
+                {
+                  control: form.control,
+                  name: "code",
+                  render: ({ field }) => /* @__PURE__ */ jsxs3(FormItem2, { children: [
+                    /* @__PURE__ */ jsx5("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx5(FormLabel2, { children: t("form.codeLabel") }) }),
+                    /* @__PURE__ */ jsx5(FormControl2, { children: /* @__PURE__ */ jsx5(
+                      InputOTP,
                       {
-                        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__ */ jsx5(IconEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx5(IconEye, { className: "h-4 w-4" })
+                        maxLength: 6,
+                        value: field.value,
+                        onChange: field.onChange,
+                        onBlur: field.onBlur,
+                        containerClassName: "gap-4 flex justify-center mt-2",
+                        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__ */ jsx5(InputOTPSlot, { className: "h-12", index: 0 }),
+                          /* @__PURE__ */ jsx5(InputOTPSlot, { className: "h-12", index: 1 }),
+                          /* @__PURE__ */ jsx5(InputOTPSlot, { className: "h-12", index: 2 }),
+                          /* @__PURE__ */ jsx5(InputOTPSlot, { className: "h-12", index: 3 }),
+                          /* @__PURE__ */ jsx5(InputOTPSlot, { className: "h-12", index: 4 }),
+                          /* @__PURE__ */ jsx5(InputOTPSlot, { className: "h-12", index: 5 })
+                        ] })
                       }
-                    )
-                  ] }),
-                  fieldState.invalid && /* @__PURE__ */ jsx5(FieldError2, { errors: [fieldState.error] })
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsx5(
-              Controller2,
-              {
-                name: "confirmPassword",
-                control: form.control,
-                render: ({ field, fieldState }) => /* @__PURE__ */ jsxs3(Field2, { "data-invalid": fieldState.invalid, children: [
-                  /* @__PURE__ */ jsx5(FieldLabel2, { htmlFor: "reset-password-confirmPassword", children: t("form.confirmPasswordLabel") }),
-                  /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
+                    ) }),
+                    /* @__PURE__ */ jsx5(FormMessage2, {})
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx5(
+                FormField2,
+                {
+                  control: form.control,
+                  name: "password",
+                  render: ({ field }) => /* @__PURE__ */ jsxs3(FormItem2, { children: [
+                    /* @__PURE__ */ jsx5(FormLabel2, { children: t("form.passwordLabel") }),
                     /* @__PURE__ */ jsx5(
-                      Input2,
+                      PasswordInput,
                       {
-                        ...field,
-                        id: "reset-password-confirmPassword",
-                        type: showPassword ? "text" : "password",
-                        placeholder: t("form.passwordPlaceholder"),
-                        "aria-invalid": fieldState.invalid
+                        field,
+                        show: showPassword,
+                        onToggle: () => setShowPassword(!showPassword),
+                        placeholder: t("form.passwordPlaceholder")
                       }
                     ),
+                    /* @__PURE__ */ jsx5(FormMessage2, {})
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx5(
+                FormField2,
+                {
+                  control: form.control,
+                  name: "confirmPassword",
+                  render: ({ field }) => /* @__PURE__ */ jsxs3(FormItem2, { children: [
+                    /* @__PURE__ */ jsx5(FormLabel2, { children: t("form.confirmPasswordLabel") }),
                     /* @__PURE__ */ jsx5(
-                      "button",
+                      PasswordInput,
                       {
-                        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__ */ jsx5(IconEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx5(IconEye, { className: "h-4 w-4" })
+                        field,
+                        show: showPassword,
+                        onToggle: () => setShowPassword(!showPassword),
+                        placeholder: t("form.passwordPlaceholder")
                       }
-                    )
-                  ] }),
-                  fieldState.invalid && /* @__PURE__ */ jsx5(FieldError2, { errors: [fieldState.error] })
-                ] })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx5("div", { className: "mt-4", children: /* @__PURE__ */ jsxs3(
-            Button2,
-            {
-              type: "submit",
-              form: "reset-password-form",
-              className: "w-full",
-              disabled: isLoading || resetPasswordMutation.isPending,
-              children: [
-                isLoading || resetPasswordMutation.isPending && /* @__PURE__ */ jsx5(Spinner2, {}),
-                isLoading || resetPasswordMutation.isPending ? t("form.submitting") : t("form.submit")
-              ]
-            }
-          ) })
-        ] }),
+                    ),
+                    /* @__PURE__ */ jsx5(FormMessage2, {})
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsxs3(
+                Button2,
+                {
+                  type: "submit",
+                  form: "reset-password-form",
+                  className: "w-full",
+                  disabled: isLoading || resetPasswordMutation.isPending,
+                  children: [
+                    isLoading || resetPasswordMutation.isPending && /* @__PURE__ */ jsx5(Spinner2, {}),
+                    isLoading || resetPasswordMutation.isPending ? t("form.submitting") : t("form.submit")
+                  ]
+                }
+              )
+            ]
+          }
+        ) }),
         errorContent && /* @__PURE__ */ jsxs3(Alert2, { variant: "destructive", className: "mt-4", children: [
           /* @__PURE__ */ jsx5(IconAlertCircle2, { className: "h-4 w-4" }),
           /* @__PURE__ */ jsx5(AlertTitle2, { children: errorContent.title }),
@@ -845,17 +871,19 @@ import {
   AlertDescription as AlertDescription3,
   AlertTitle as AlertTitle3,
   Button as Button3,
-  Field as Field3,
-  FieldError as FieldError3,
-  FieldGroup as FieldGroup3,
-  FieldLabel as FieldLabel3,
+  Form as Form3,
+  FormControl as FormControl3,
+  FormField as FormField3,
+  FormItem as FormItem3,
+  FormLabel as FormLabel3,
+  FormMessage as FormMessage3,
   Input as Input3,
-  Spinner as Spinner3
+  useFormField as useFormField2
 } from "@mesob/ui/components";
 import { useMesob as useMesob4 } from "@mesob/ui/providers";
 import { IconAlertCircle as IconAlertCircle3, IconEye as IconEye2, IconEyeOff as IconEyeOff2 } from "@tabler/icons-react";
 import { useEffect as useEffect3, useState as useState4 } from "react";
-import { Controller as Controller3, useForm as useForm3 } from "react-hook-form";
+import { useForm as useForm3 } from "react-hook-form";
 import { toast as toast3 } from "sonner";
 import { z as z3 } from "zod";
 
@@ -878,22 +906,55 @@ function normalizePhone(phone) {
 }
 
 // src/components/auth/sign-in.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var isPhone = (s) => /^\+?[0-9()[\]\s-]{6,}$/.test(s);
-var usernameSchema = (t, phoneRegex) => z3.object({
+function PasswordInput2({
+  field,
+  show,
+  onToggle,
+  placeholder
+}) {
+  const { formItemId, error } = useFormField2();
+  return /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx6(
+      Input3,
+      {
+        ...field,
+        id: formItemId,
+        type: show ? "text" : "password",
+        placeholder,
+        autoComplete: "current-password",
+        "aria-invalid": !!error,
+        className: "pr-10"
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      Button3,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon",
+        className: "absolute right-0 top-0 h-full px-3 text-muted-foreground hover:text-foreground",
+        onClick: onToggle,
+        "aria-label": show ? "Hide password" : "Show password",
+        children: show ? /* @__PURE__ */ jsx6(IconEyeOff2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx6(IconEye2, { className: "h-4 w-4" })
+      }
+    )
+  ] });
+}
+var signInSchema = (t, phoneRegex) => z3.object({
   username: z3.string().trim().min(1, { message: t("errors.requiredField") }).refine(
     (val) => {
       const isEmail = z3.email().safeParse(val).success;
       const isPhone3 = phoneRegex.test(val);
       return isEmail || isPhone3;
     },
-    {
-      message: t("errors.invalidEmailOrPhone")
-    }
-  )
-});
-var passwordSchema = (t) => z3.object({
-  password: z3.string().min(8, t("errors.passwordLength")).max(128, t("errors.longPasswordError"))
+    { message: t("errors.invalidEmailOrPhone") }
+  ),
+  password: z3.union([
+    z3.literal(""),
+    z3.string().min(8, t("errors.passwordLength")).max(128, t("errors.longPasswordError"))
+  ]).optional()
 });
 var SignIn = ({ redirectUrl } = {}) => {
   const { hooks, setAuth } = useApi();
@@ -919,14 +980,9 @@ var SignIn = ({ redirectUrl } = {}) => {
     }
   });
   const logoImage = config.ui.logoImage;
-  const usernameForm = useForm3({
-    resolver: zodResolver3(usernameSchema(t, phoneRegex)),
-    defaultValues: { username: "" },
-    mode: "onChange"
-  });
-  const passwordForm = useForm3({
-    resolver: zodResolver3(passwordSchema(t)),
-    defaultValues: { password: "" },
+  const form = useForm3({
+    resolver: zodResolver3(signInSchema(t, phoneRegex)),
+    defaultValues: { username: "", password: "" },
     mode: "onChange"
   });
   useEffect3(() => {
@@ -947,6 +1003,7 @@ var SignIn = ({ redirectUrl } = {}) => {
       });
       if (result.exists) {
         setUsername(normalizedUsername);
+        form.setValue("username", normalizedUsername);
         setShowPasswordField(true);
       } else {
         const email = isPhone(normalizedUsername) ? "" : normalizedUsername;
@@ -959,15 +1016,22 @@ var SignIn = ({ redirectUrl } = {}) => {
         }
       }
     } catch {
-      usernameForm.setError("username", {
-        message: t("errors.checkAccountFailed")
-      });
+      form.setError("username", { message: t("errors.checkAccountFailed") });
     } finally {
       setIsChecking(false);
     }
   };
-  const handleUsernameSubmit = async (values) => {
-    await handleCheckAccount(values.username);
+  const onSubmit = async (values) => {
+    if (showPasswordField) {
+      const pwd = values.password;
+      if (!pwd || pwd.length < 8) {
+        form.setError("password", { message: t("errors.passwordLength") });
+        return;
+      }
+      await handlePasswordSubmit({ password: pwd });
+    } else {
+      await handleCheckAccount(values.username);
+    }
   };
   const handlePasswordSubmit = async (values) => {
     setIsLoading(true);
@@ -997,9 +1061,15 @@ var SignIn = ({ redirectUrl } = {}) => {
   const handleBack = () => {
     setShowPasswordField(false);
     setUsername("");
-    passwordForm.reset();
+    form.setValue("password", "");
   };
   const isSubmitting = isLoading || checkUserMutation.isPending || signInMutation.isPending || isChecking;
+  let submitLabel = t("form.continue");
+  if (isSubmitting) {
+    submitLabel = showPasswordField ? t("form.submitting") : t("form.checking");
+  } else if (showPasswordField) {
+    submitLabel = t("form.submit");
+  }
   let errorContent = null;
   if (error) {
     if (typeof error === "string") {
@@ -1008,101 +1078,92 @@ var SignIn = ({ redirectUrl } = {}) => {
       errorContent = error;
     }
   }
-  const formContent = showPasswordField ? /* @__PURE__ */ jsxs4(
+  const formContent = /* @__PURE__ */ jsx6(Form3, { ...form, children: /* @__PURE__ */ jsxs4(
     "form",
     {
       id: "sign-in-form",
-      onSubmit: passwordForm.handleSubmit(handlePasswordSubmit),
+      onSubmit: form.handleSubmit(onSubmit),
+      className: "space-y-4",
       children: [
-        /* @__PURE__ */ jsxs4(FieldGroup3, { children: [
-          /* @__PURE__ */ jsxs4("div", { className: "text-center mb-4", children: [
-            /* @__PURE__ */ jsx6("p", { className: "text-sm text-muted-foreground mb-1", children: t("form.enterPasswordFor") }),
-            /* @__PURE__ */ jsx6("p", { className: "font-medium text-foreground", children: username }),
+        showPasswordField ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsxs4(FormItem3, { children: [
+            /* @__PURE__ */ jsxs4(FormLabel3, { className: "flex justify-between items-center", children: [
+              t("form.accountLabel"),
+              /* @__PURE__ */ jsx6(
+                Button3,
+                {
+                  type: "button",
+                  variant: "link",
+                  size: "sm",
+                  className: "p-0 m-0 h-auto",
+                  onClick: handleBack,
+                  children: t("changeAccount")
+                }
+              )
+            ] }),
             /* @__PURE__ */ jsx6(
-              "button",
+              Input3,
               {
-                type: "button",
-                onClick: handleBack,
-                className: "text-sm text-primary hover:underline mt-2",
-                children: t("changeAccount")
+                id: "sign-in-username",
+                type: "text",
+                value: username,
+                disabled: true
               }
             )
           ] }),
           /* @__PURE__ */ jsx6(
-            Controller3,
+            FormField3,
             {
+              control: form.control,
               name: "password",
-              control: passwordForm.control,
-              render: ({ field, fieldState }) => /* @__PURE__ */ jsxs4(Field3, { "data-invalid": fieldState.invalid, children: [
-                /* @__PURE__ */ jsx6(FieldLabel3, { htmlFor: "sign-in-password", children: t("form.passwordLabel") }),
-                /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
-                  /* @__PURE__ */ jsx6(
-                    Input3,
-                    {
-                      ...field,
-                      id: "sign-in-password",
-                      type: showPassword ? "text" : "password",
-                      placeholder: t("form.passwordPlaceholder"),
-                      autoComplete: "current-password",
-                      "aria-invalid": fieldState.invalid
-                    }
-                  ),
-                  /* @__PURE__ */ jsx6(
-                    "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__ */ jsx6(IconEyeOff2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx6(IconEye2, { className: "h-4 w-4" })
-                    }
-                  )
-                ] }),
-                fieldState.invalid && /* @__PURE__ */ jsx6(FieldError3, { errors: [fieldState.error] })
+              render: ({ field }) => /* @__PURE__ */ jsxs4(FormItem3, { children: [
+                /* @__PURE__ */ jsx6(FormLabel3, { children: t("form.passwordLabel") }),
+                /* @__PURE__ */ jsx6(
+                  PasswordInput2,
+                  {
+                    field: { ...field, value: field.value ?? "" },
+                    show: showPassword,
+                    onToggle: () => setShowPassword(!showPassword),
+                    placeholder: t("form.passwordPlaceholder")
+                  }
+                ),
+                /* @__PURE__ */ jsx6(FormMessage3, {})
               ] })
             }
           )
-        ] }),
-        /* @__PURE__ */ jsx6("div", { className: "mt-4", children: /* @__PURE__ */ jsxs4(Button3, { type: "submit", className: "w-full", disabled: isSubmitting, children: [
-          isSubmitting && /* @__PURE__ */ jsx6(Spinner3, {}),
-          isSubmitting ? t("form.submitting") : t("form.submit")
-        ] }) })
-      ]
-    }
-  ) : /* @__PURE__ */ jsxs4(
-    "form",
-    {
-      id: "sign-in-form",
-      onSubmit: usernameForm.handleSubmit(handleUsernameSubmit),
-      children: [
-        /* @__PURE__ */ jsx6(FieldGroup3, { children: /* @__PURE__ */ jsx6(
-          Controller3,
+        ] }) : /* @__PURE__ */ jsx6(
+          FormField3,
           {
+            control: form.control,
             name: "username",
-            control: usernameForm.control,
-            render: ({ field, fieldState }) => /* @__PURE__ */ jsxs4(Field3, { "data-invalid": fieldState.invalid, children: [
-              /* @__PURE__ */ jsx6(FieldLabel3, { htmlFor: "sign-in-username", children: t("form.accountLabel") }),
-              /* @__PURE__ */ jsx6(
+            render: ({ field }) => /* @__PURE__ */ jsxs4(FormItem3, { children: [
+              /* @__PURE__ */ jsx6(FormLabel3, { children: t("form.accountLabel") }),
+              /* @__PURE__ */ jsx6(FormControl3, { children: /* @__PURE__ */ jsx6(
                 Input3,
                 {
                   ...field,
-                  id: "sign-in-username",
                   type: "text",
                   placeholder: t("form.accountPlaceholder"),
-                  autoComplete: "username",
-                  "aria-invalid": fieldState.invalid
+                  autoComplete: "username"
                 }
-              ),
-              fieldState.invalid && /* @__PURE__ */ jsx6(FieldError3, { errors: [fieldState.error] })
+              ) }),
+              /* @__PURE__ */ jsx6(FormMessage3, {})
             ] })
           }
-        ) }),
-        /* @__PURE__ */ jsx6("div", { className: "mt-4", children: /* @__PURE__ */ jsxs4(Button3, { type: "submit", className: "w-full", disabled: isSubmitting, children: [
-          isSubmitting && /* @__PURE__ */ jsx6(Spinner3, {}),
-          isSubmitting ? t("form.submitting") : t("form.continue")
-        ] }) })
+        ),
+        /* @__PURE__ */ jsx6(
+          Button3,
+          {
+            type: "submit",
+            className: "w-full",
+            disabled: isSubmitting,
+            loading: isSubmitting,
+            children: submitLabel
+          }
+        )
       ]
     }
-  );
+  ) });
   return /* @__PURE__ */ jsx6("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs4(
     AuthLayout,
     {
@@ -1147,20 +1208,56 @@ import {
   AlertDescription as AlertDescription4,
   AlertTitle as AlertTitle4,
   Button as Button4,
-  Field as Field4,
-  FieldError as FieldError4,
-  FieldGroup as FieldGroup4,
-  FieldLabel as FieldLabel4,
-  Input as Input4
+  Form as Form4,
+  FormControl as FormControl4,
+  FormField as FormField4,
+  FormItem as FormItem4,
+  FormLabel as FormLabel4,
+  FormMessage as FormMessage4,
+  Input as Input4,
+  useFormField as useFormField3
 } from "@mesob/ui/components";
 import { useMesob as useMesob5 } from "@mesob/ui/providers";
 import { IconAlertCircle as IconAlertCircle4, IconEye as IconEye3, IconEyeOff as IconEyeOff3 } from "@tabler/icons-react";
 import { useEffect as useEffect4, useState as useState5 } from "react";
-import { Controller as Controller4, useForm as useForm4 } from "react-hook-form";
+import { useForm as useForm4 } from "react-hook-form";
 import { toast as toast4 } from "sonner";
 import { z as z4 } from "zod";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var isPhone2 = (s) => /^\+?[0-9()[\]\s-]{6,}$/.test(s);
+function PasswordInput3({
+  field,
+  show,
+  onToggle,
+  placeholder
+}) {
+  const { formItemId, error } = useFormField3();
+  return /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx7(
+      Input4,
+      {
+        ...field,
+        id: formItemId,
+        type: show ? "text" : "password",
+        placeholder,
+        "aria-invalid": !!error,
+        className: "pr-10"
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      Button4,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon",
+        className: "absolute right-0 top-0 h-full px-3 text-muted-foreground hover:text-foreground",
+        onClick: onToggle,
+        "aria-label": show ? "Hide password" : "Show password",
+        children: show ? /* @__PURE__ */ jsx7(IconEyeOff3, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx7(IconEye3, { className: "h-4 w-4" })
+      }
+    )
+  ] });
+}
 var signUpSchema = (t) => z4.object({
   fullName: z4.string().min(1, t("errors.fullNameRequired")),
   identifier: z4.string().min(1, t("errors.contactRequired")).refine(
@@ -1306,123 +1403,92 @@ var SignUp = ({
         )
       ] }),
       children: [
-        /* @__PURE__ */ jsxs5("form", { id: "sign-up-form", onSubmit: handleSubmit, children: [
-          /* @__PURE__ */ jsxs5(FieldGroup4, { children: [
-            /* @__PURE__ */ jsx7(
-              Controller4,
-              {
-                name: "fullName",
-                control: form.control,
-                render: ({ field, fieldState }) => /* @__PURE__ */ jsxs5(Field4, { "data-invalid": fieldState.invalid, children: [
-                  /* @__PURE__ */ jsx7(FieldLabel4, { htmlFor: "sign-up-fullName", children: t("form.fullNameLabel") }),
-                  /* @__PURE__ */ jsx7(
-                    Input4,
-                    {
-                      ...field,
-                      id: "sign-up-fullName",
-                      placeholder: t("form.fullNamePlaceholder"),
-                      "aria-invalid": fieldState.invalid
-                    }
-                  ),
-                  fieldState.invalid && /* @__PURE__ */ jsx7(FieldError4, { errors: [fieldState.error] })
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsx7(
-              Controller4,
-              {
-                name: "identifier",
-                control: form.control,
-                render: ({ field, fieldState }) => /* @__PURE__ */ jsxs5(Field4, { "data-invalid": fieldState.invalid, children: [
-                  /* @__PURE__ */ jsx7(
-                    FieldLabel4,
-                    {
-                      htmlFor: "sign-up-identifier",
-                      className: hasInitialIdentifier ? "block" : void 0,
-                      children: identifierLabel
-                    }
-                  ),
-                  /* @__PURE__ */ jsx7(
-                    Input4,
-                    {
-                      ...field,
-                      id: "sign-up-identifier",
-                      type: field.value.includes("@") ? "email" : "tel",
-                      placeholder: hasInitialIdentifier ? void 0 : t("form.accountPlaceholder") || "Email or phone number",
-                      disabled: hasInitialIdentifier,
-                      "aria-invalid": fieldState.invalid
-                    }
-                  ),
-                  fieldState.invalid && /* @__PURE__ */ jsx7(FieldError4, { errors: [fieldState.error] })
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsx7(
-              Controller4,
-              {
-                name: "password",
-                control: form.control,
-                render: ({ field, fieldState }) => /* @__PURE__ */ jsxs5(Field4, { "data-invalid": fieldState.invalid, children: [
-                  /* @__PURE__ */ jsx7(FieldLabel4, { htmlFor: "sign-up-password", children: t("form.passwordLabel") }),
-                  /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
-                    /* @__PURE__ */ jsx7(
-                      Input4,
-                      {
-                        ...field,
-                        id: "sign-up-password",
-                        type: showPassword ? "text" : "password",
-                        placeholder: t("form.passwordPlaceholder"),
-                        "aria-invalid": fieldState.invalid
-                      }
-                    ),
-                    /* @__PURE__ */ jsx7(
-                      "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__ */ jsx7(IconEyeOff3, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx7(IconEye3, { className: "h-4 w-4" })
-                      }
-                    )
-                  ] }),
-                  fieldState.invalid && /* @__PURE__ */ jsx7(FieldError4, { errors: [fieldState.error] })
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsx7(
-              Controller4,
-              {
-                name: "confirmPassword",
-                control: form.control,
-                render: ({ field, fieldState }) => /* @__PURE__ */ jsxs5(Field4, { "data-invalid": fieldState.invalid, children: [
-                  /* @__PURE__ */ jsx7(FieldLabel4, { htmlFor: "sign-up-confirmPassword", children: t("form.confirmPasswordLabel") }),
-                  /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
-                    /* @__PURE__ */ jsx7(
-                      Input4,
-                      {
-                        ...field,
-                        id: "sign-up-confirmPassword",
-                        type: showConfirmPassword ? "text" : "password",
-                        placeholder: t("form.passwordPlaceholder"),
-                        "aria-invalid": fieldState.invalid
-                      }
-                    ),
-                    /* @__PURE__ */ jsx7(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => setShowConfirmPassword(!showConfirmPassword),
-                        className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
-                        children: showConfirmPassword ? /* @__PURE__ */ jsx7(IconEyeOff3, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx7(IconEye3, { className: "h-4 w-4" })
-                      }
-                    )
-                  ] }),
-                  fieldState.invalid && /* @__PURE__ */ jsx7(FieldError4, { errors: [fieldState.error] })
-                ] })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx7("div", { className: "mt-4", children: /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx7(Form4, { ...form, children: /* @__PURE__ */ jsxs5("form", { id: "sign-up-form", onSubmit: handleSubmit, className: "space-y-4", children: [
+          /* @__PURE__ */ jsx7(
+            FormField4,
+            {
+              control: form.control,
+              name: "fullName",
+              render: ({ field }) => /* @__PURE__ */ jsxs5(FormItem4, { children: [
+                /* @__PURE__ */ jsx7(FormLabel4, { children: t("form.fullNameLabel") }),
+                /* @__PURE__ */ jsx7(FormControl4, { children: /* @__PURE__ */ jsx7(
+                  Input4,
+                  {
+                    ...field,
+                    placeholder: t("form.fullNamePlaceholder")
+                  }
+                ) }),
+                /* @__PURE__ */ jsx7(FormMessage4, {})
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx7(
+            FormField4,
+            {
+              control: form.control,
+              name: "identifier",
+              render: ({ field }) => /* @__PURE__ */ jsxs5(FormItem4, { children: [
+                /* @__PURE__ */ jsx7(
+                  FormLabel4,
+                  {
+                    className: hasInitialIdentifier ? "block" : void 0,
+                    children: identifierLabel
+                  }
+                ),
+                /* @__PURE__ */ jsx7(FormControl4, { children: /* @__PURE__ */ jsx7(
+                  Input4,
+                  {
+                    ...field,
+                    type: field.value.includes("@") ? "email" : "tel",
+                    placeholder: hasInitialIdentifier ? void 0 : t("form.accountPlaceholder") || "Email or phone number",
+                    disabled: hasInitialIdentifier
+                  }
+                ) }),
+                /* @__PURE__ */ jsx7(FormMessage4, {})
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx7(
+            FormField4,
+            {
+              control: form.control,
+              name: "password",
+              render: ({ field }) => /* @__PURE__ */ jsxs5(FormItem4, { children: [
+                /* @__PURE__ */ jsx7(FormLabel4, { children: t("form.passwordLabel") }),
+                /* @__PURE__ */ jsx7(
+                  PasswordInput3,
+                  {
+                    field,
+                    show: showPassword,
+                    onToggle: () => setShowPassword(!showPassword),
+                    placeholder: t("form.passwordPlaceholder")
+                  }
+                ),
+                /* @__PURE__ */ jsx7(FormMessage4, {})
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx7(
+            FormField4,
+            {
+              control: form.control,
+              name: "confirmPassword",
+              render: ({ field }) => /* @__PURE__ */ jsxs5(FormItem4, { children: [
+                /* @__PURE__ */ jsx7(FormLabel4, { children: t("form.confirmPasswordLabel") }),
+                /* @__PURE__ */ jsx7(
+                  PasswordInput3,
+                  {
+                    field,
+                    show: showConfirmPassword,
+                    onToggle: () => setShowConfirmPassword(!showConfirmPassword),
+                    placeholder: t("form.passwordPlaceholder")
+                  }
+                ),
+                /* @__PURE__ */ jsx7(FormMessage4, {})
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx7(
             Button4,
             {
               type: "submit",
@@ -1431,8 +1497,8 @@ var SignUp = ({
               disabled: isLoading || signUpMutation.isPending,
               children: isLoading || signUpMutation.isPending ? t("form.submitting") : t("form.submit")
             }
-          ) })
-        ] }),
+          )
+        ] }) }),
         errorContent && /* @__PURE__ */ jsxs5(Alert4, { variant: "destructive", className: "mt-4", children: [
           /* @__PURE__ */ jsx7(IconAlertCircle4, { className: "h-4 w-4" }),
           /* @__PURE__ */ jsx7(AlertTitle4, { children: errorContent.title }),
@@ -1447,19 +1513,22 @@ var SignUp = ({
 import { zodResolver as zodResolver5 } from "@hookform/resolvers/zod";
 import {
   Button as Button6,
-  Field as Field5,
-  FieldError as FieldError5,
-  FieldGroup as FieldGroup5,
+  Form as Form5,
+  FormControl as FormControl5,
+  FormField as FormField5,
+  FormItem as FormItem5,
+  FormLabel as FormLabel5,
+  FormMessage as FormMessage5,
   InputOTP as InputOTP2,
   InputOTPGroup as InputOTPGroup2,
   InputOTPSlot as InputOTPSlot2,
-  Spinner as Spinner5
+  Spinner as Spinner4
 } from "@mesob/ui/components";
-import { Controller as Controller5, useForm as useForm5 } from "react-hook-form";
+import { useForm as useForm5 } from "react-hook-form";
 import { z as z5 } from "zod";
 
 // src/components/auth/countdown.tsx
-import { Button as Button5, Spinner as Spinner4 } from "@mesob/ui/components";
+import { Button as Button5, Spinner as Spinner3 } from "@mesob/ui/components";
 import { useEffect as useEffect5, useState as useState6 } from "react";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var Countdown = ({
@@ -1505,7 +1574,7 @@ var Countdown = ({
       onClick: handleResend,
       disabled: isResending || resending,
       children: [
-        isResending || resending && /* @__PURE__ */ jsx8(Spinner4, {}),
+        isResending || resending && /* @__PURE__ */ jsx8(Spinner3, {}),
         t("resend")
       ]
     }
@@ -1532,54 +1601,61 @@ var VerificationForm = ({
   const handleSubmit = form.handleSubmit(async (values) => {
     await onSubmit(values);
   });
-  return /* @__PURE__ */ jsxs7("form", { id: "verification-form", onSubmit: handleSubmit, children: [
-    /* @__PURE__ */ jsx9(FieldGroup5, { children: /* @__PURE__ */ jsx9(
-      Controller5,
-      {
-        name: "code",
-        control: form.control,
-        render: ({ field, fieldState }) => /* @__PURE__ */ jsxs7(Field5, { "data-invalid": fieldState.invalid, children: [
-          /* @__PURE__ */ jsx9("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx9(
-            InputOTP2,
+  return /* @__PURE__ */ jsx9(Form5, { ...form, children: /* @__PURE__ */ jsxs7(
+    "form",
+    {
+      id: "verification-form",
+      onSubmit: handleSubmit,
+      className: "space-y-4",
+      children: [
+        /* @__PURE__ */ jsx9(
+          FormField5,
+          {
+            control: form.control,
+            name: "code",
+            render: ({ field }) => /* @__PURE__ */ jsxs7(FormItem5, { children: [
+              /* @__PURE__ */ jsx9("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx9(FormLabel5, { children: t("form.codeLabel") }) }),
+              /* @__PURE__ */ jsx9(FormControl5, { children: /* @__PURE__ */ jsx9(
+                InputOTP2,
+                {
+                  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__ */ jsxs7(InputOTPGroup2, { 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__ */ jsx9(InputOTPSlot2, { className: "h-12", index: 0 }),
+                    /* @__PURE__ */ jsx9(InputOTPSlot2, { className: "h-12", index: 1 }),
+                    /* @__PURE__ */ jsx9(InputOTPSlot2, { className: "h-12", index: 2 }),
+                    /* @__PURE__ */ jsx9(InputOTPSlot2, { className: "h-12", index: 3 }),
+                    /* @__PURE__ */ jsx9(InputOTPSlot2, { className: "h-12", index: 4 }),
+                    /* @__PURE__ */ jsx9(InputOTPSlot2, { className: "h-12", index: 5 })
+                  ] })
+                }
+              ) }),
+              /* @__PURE__ */ jsx9(FormMessage5, {})
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs7("div", { className: "flex justify-between items-center", children: [
+          /* @__PURE__ */ jsx9(Countdown, { onResend, resending: isLoading }),
+          /* @__PURE__ */ jsxs7(
+            Button6,
             {
-              maxLength: 6,
-              id: "otp",
-              required: true,
-              value: field.value ?? "",
-              onChange: field.onChange,
-              onBlur: field.onBlur,
-              containerClassName: "gap-4 justify-center mb-2 flex items-center",
-              "aria-invalid": fieldState.invalid,
-              children: /* @__PURE__ */ jsxs7(InputOTPGroup2, { 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__ */ jsx9(InputOTPSlot2, { className: "h-12", index: 0 }),
-                /* @__PURE__ */ jsx9(InputOTPSlot2, { className: "h-12", index: 1 }),
-                /* @__PURE__ */ jsx9(InputOTPSlot2, { className: "h-12", index: 2 }),
-                /* @__PURE__ */ jsx9(InputOTPSlot2, { className: "h-12", index: 3 }),
-                /* @__PURE__ */ jsx9(InputOTPSlot2, { className: "h-12", index: 4 }),
-                /* @__PURE__ */ jsx9(InputOTPSlot2, { className: "h-12", index: 5 })
-              ] })
+              type: "submit",
+              form: "verification-form",
+              disabled: isLoading || form.watch("code").length !== 6,
+              children: [
+                isLoading && /* @__PURE__ */ jsx9(Spinner4, {}),
+                t("form.confirm")
+              ]
             }
-          ) }),
-          fieldState.invalid && /* @__PURE__ */ jsx9(FieldError5, { errors: [fieldState.error] })
+          )
         ] })
-      }
-    ) }),
-    /* @__PURE__ */ jsxs7("div", { className: "flex justify-between items-center mt-4", children: [
-      /* @__PURE__ */ jsx9(Countdown, { onResend, resending: isLoading }),
-      /* @__PURE__ */ jsxs7(
-        Button6,
-        {
-          type: "submit",
-          form: "verification-form",
-          disabled: isLoading || form.watch("code").length !== 6,
-          children: [
-            isLoading && /* @__PURE__ */ jsx9(Spinner5, {}),
-            t("form.confirm")
-          ]
-        }
-      )
-    ] })
-  ] });
+      ]
+    }
+  ) });
 };
 
 // src/components/auth/verify-email.tsx
@@ -2541,7 +2617,7 @@ import { useState as useState16 } from "react";
 
 // src/components/profile/request-change-email-form.tsx
 import { zodResolver as zodResolver6 } from "@hookform/resolvers/zod";
-import { Button as Button13, Input as Input5, Label, Spinner as Spinner6 } from "@mesob/ui/components";
+import { Button as Button13, Input as Input5, Label, Spinner as Spinner5 } from "@mesob/ui/components";
 import { IconEye as IconEye4, IconEyeOff as IconEyeOff4 } from "@tabler/icons-react";
 import { useEffect as useEffect8, useState as useState14 } from "react";
 import { useForm as useForm6 } from "react-hook-form";
@@ -2776,7 +2852,7 @@ function RequestChangeEmailForm({
             }
           ),
           /* @__PURE__ */ jsxs19(Button13, { type: "submit", disabled: isLoading, children: [
-            isLoading && /* @__PURE__ */ jsx21(Spinner6, { className: "mr-2 h-4 w-4" }),
+            isLoading && /* @__PURE__ */ jsx21(Spinner5, { className: "mr-2 h-4 w-4" }),
             isChecking ? "Checking\u2026" : buttonText
           ] })
         ] })
@@ -3042,7 +3118,7 @@ import {
   CollapsibleTrigger as CollapsibleTrigger2,
   Input as Input6,
   Label as Label2,
-  Spinner as Spinner7
+  Spinner as Spinner6
 } from "@mesob/ui/components";
 import { IconChevronDown as IconChevronDown2, IconEye as IconEye5, IconEyeOff as IconEyeOff5 } from "@tabler/icons-react";
 import { useState as useState17 } from "react";
@@ -3254,7 +3330,7 @@ function ChangePasswordForm() {
               }
             ),
             /* @__PURE__ */ jsxs22(Button15, { type: "submit", disabled: isSubmitting, children: [
-              isSubmitting && /* @__PURE__ */ jsx25(Spinner7, { className: "mr-2 h-4 w-4" }),
+              isSubmitting && /* @__PURE__ */ jsx25(Spinner6, { className: "mr-2 h-4 w-4" }),
               "Change Password"
             ] })
           ] })
@@ -3276,7 +3352,7 @@ import { useState as useState20 } from "react";
 
 // src/components/profile/request-change-phone-form.tsx
 import { zodResolver as zodResolver8 } from "@hookform/resolvers/zod";
-import { Button as Button16, Input as Input7, Label as Label3, Spinner as Spinner8 } from "@mesob/ui/components";
+import { Button as Button16, Input as Input7, Label as Label3, Spinner as Spinner7 } from "@mesob/ui/components";
 import { IconEye as IconEye6, IconEyeOff as IconEyeOff6 } from "@tabler/icons-react";
 import { useEffect as useEffect9, useState as useState18 } from "react";
 import { useForm as useForm8 } from "react-hook-form";
@@ -3524,7 +3600,7 @@ function RequestChangePhoneForm({
             }
           ),
           /* @__PURE__ */ jsxs23(Button16, { type: "submit", disabled: isLoading, children: [
-            isLoading && /* @__PURE__ */ jsx26(Spinner8, { className: "mr-2 h-4 w-4" }),
+            isLoading && /* @__PURE__ */ jsx26(Spinner7, { className: "mr-2 h-4 w-4" }),
             isChecking ? "Checking\u2026" : buttonText
           ] })
         ] })