@mesob/auth-react 0.1.1 → 0.2.1

package/dist/index.js

@@ -3,18 +3,34 @@
 // src/components/auth/auth-card.tsx
 import { jsx } from "react/jsx-runtime";
 var AuthCard = ({ children }) => {
-  return /* @__PURE__ */ jsx("div", { className: "flex min-h-screen p-4 items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx("div", { className: "rounded-xl border bg-card p-8 shadow-lg", 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 }) }) });
 };
 
-// src/components/auth/pages/forgot-password-page.tsx
+// src/components/auth/forgot-password.tsx
+import { zodResolver } from "@hookform/resolvers/zod";
 import {
   Alert,
   AlertDescription,
   AlertTitle
 } from "@mesob/ui/components/alert";
-import { toast } from "@mesob/ui/components/sonner";
+import { Button } from "@mesob/ui/components/button";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel
+} from "@mesob/ui/components/field";
+import { Input } from "@mesob/ui/components/input";
+import { useMesob as useMesob2 } from "@mesob/ui/components/mesob-context";
+import { Spinner } from "@mesob/ui/components/spinner";
 import { IconAlertCircle } from "@tabler/icons-react";
-import { useEffect as useEffect2, useState as useState2 } from "react";
+import { useEffect, useState as useState2 } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+// src/hooks/use-translator.ts
+import { useMesob } from "@mesob/ui/components/mesob-context";
 
 // src/lib/translations.ts
 function createTranslator(messages, namespace) {
@@ -47,7 +63,7 @@ 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, useEffect, useState } from "react";
+import { createContext, useContext, useMemo, useState } from "react";
 
 // src/types.ts
 var defaultAuthClientConfig = {
@@ -62,57 +78,45 @@ var defaultAuthClientConfig = {
   navigation: {
     locale: "en"
   },
-  cookiePrefix: "msb"
+  cookiePrefix: "msb",
+  phoneRegex: /^(\+2519|\+2517|2519|2517|09|07)\d{8}$/
+};
+
+// src/utils/cookie.ts
+var isProduction = typeof process !== "undefined" && process.env.NODE_ENV === "production";
+var getSessionCookieName = (config) => {
+  const prefix = config.cookiePrefix || "";
+  const baseName = "session_token";
+  if (prefix) {
+    return `${prefix}_${baseName}`;
+  }
+  return isProduction ? "__Host-session_token" : baseName;
 };
 
 // src/utils/custom-fetch.ts
-var createCustomFetch = (config) => {
+var createCustomFetch = (_config) => {
   return (input, init) => {
-    const baseUrl = config.baseURL;
     if (input instanceof Request) {
-      const originalUrl = input.url;
-      const fullUrl2 = originalUrl.startsWith("http") ? originalUrl : `${baseUrl}${originalUrl}`;
-      if (originalUrl === fullUrl2) {
-        return fetch(input, {
-          credentials: "include"
-        });
-      }
-      const clonedRequest = input.clone();
-      const requestInit = {
-        method: clonedRequest.method,
-        headers: clonedRequest.headers,
-        credentials: "include"
-      };
-      if (clonedRequest.body !== null) {
-        requestInit.body = clonedRequest.body;
-        requestInit.duplex = "half";
-      }
-      return fetch(fullUrl2, requestInit);
-    }
-    const urlString = typeof input === "string" ? input : input.toString();
-    const fullUrl = urlString.startsWith("http") ? urlString : `${baseUrl}${urlString}`;
-    return fetch(fullUrl, {
-      ...init,
-      headers: {
-        "Content-Type": "application/json",
-        ...init?.headers
-      },
-      credentials: "include"
-    });
+      return fetch(input, { ...init, credentials: "include" });
+    }
+    return fetch(input, { ...init, credentials: "include" });
   };
 };
 
 // src/provider.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
+function isServer() {
+  return typeof document === "undefined";
+}
+function hasAuthCookie(_cookieName) {
+  return false;
+}
 var SessionContext = createContext(null);
 var ApiContext = createContext(null);
 var ConfigContext = createContext(null);
 var queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      staleTime: 1e3 * 60 * 5,
-      gcTime: 1e3 * 60 * 10,
-      retry: 1,
       refetchOnWindowFocus: false
     }
   }
@@ -138,35 +142,54 @@ function useConfig() {
   }
   return context;
 }
+function useHasAuthCookie() {
+  const { status } = useSession();
+  return status === "authenticated" || status === "loading";
+}
 function MesobAuthProvider({
   config,
   children
 }) {
-  const mergedConfig = deepmerge(
-    { ...defaultAuthClientConfig },
-    config
+  const mergedConfig = useMemo(
+    () => deepmerge(
+      { ...defaultAuthClientConfig },
+      config
+    ),
+    [config]
   );
-  const api = createFetchClient({
-    baseUrl: mergedConfig.baseURL,
-    fetch: createCustomFetch(mergedConfig)
-  });
-  const hooks = createClient(api);
-  return /* @__PURE__ */ jsx2(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx2(AuthStateProvider, { config: mergedConfig, hooks, children }) });
+  const api = useMemo(
+    () => createFetchClient({
+      baseUrl: mergedConfig.baseURL,
+      fetch: createCustomFetch(mergedConfig)
+    }),
+    [mergedConfig]
+  );
+  const hooks = useMemo(() => createClient(api), [api]);
+  const cookieName = useMemo(
+    () => getSessionCookieName(mergedConfig),
+    [mergedConfig]
+  );
+  return /* @__PURE__ */ jsx2(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx2(
+    AuthStateProvider,
+    {
+      config: mergedConfig,
+      hooks,
+      cookieName,
+      children
+    }
+  ) });
 }
 function AuthStateProvider({
   config,
   hooks,
+  cookieName,
   children
 }) {
-  const [authState, setAuthState] = useState({
-    user: null,
-    session: null,
-    isLoading: false,
-    error: null
-  });
+  const [override, setOverride] = useState(null);
   const {
     data: sessionData,
-    isLoading: sessionLoading,
+    isLoading,
+    isFetched,
     error: sessionError,
     refetch
   } = hooks.useQuery(
@@ -174,63 +197,93 @@ function AuthStateProvider({
     "/session",
     {},
     {
-      enabled: true,
-      refetchOnMount: true,
+      enabled: !(override || isServer()),
+      refetchOnMount: false,
       refetchOnWindowFocus: false,
       refetchOnReconnect: false,
-      retry: false
+      retry: false,
+      gcTime: 0,
+      staleTime: 0
     }
   );
-  useEffect(() => {
-    if (sessionLoading) {
-      setAuthState((prev) => ({ ...prev, isLoading: true }));
-      return;
+  const user = override?.user ?? sessionData?.user ?? null;
+  const session = override?.session ?? sessionData?.session ?? null;
+  const error = override?.error ?? sessionError;
+  const errorStatus = (() => {
+    if (!sessionError) {
+      return null;
+    }
+    const err = sessionError;
+    return err.status ?? null;
+  })();
+  const isNetworkError = (() => {
+    if (!sessionError) {
+      return false;
+    }
+    const error2 = sessionError;
+    const errorMessage = error2.message || String(error2) || JSON.stringify(error2);
+    if (error2 instanceof TypeError || error2 instanceof DOMException || error2.name === "TypeError" || errorMessage.includes("Failed to fetch") || errorMessage.includes("ERR_CONNECTION_REFUSED") || errorMessage.includes("NetworkError") || errorMessage.includes("Network request failed") || errorMessage.includes("fetch failed")) {
+      return true;
+    }
+    if (error2.cause) {
+      const causeStr = String(error2.cause);
+      if (causeStr.includes("Failed to fetch") || causeStr.includes("ERR_CONNECTION_REFUSED") || causeStr.includes("NetworkError")) {
+        return true;
+      }
     }
-    if (sessionError) {
-      setAuthState({
-        user: null,
-        session: null,
-        isLoading: false,
-        error: sessionError
-      });
-      return;
+    return false;
+  })();
+  const status = (() => {
+    if (override) {
+      return override.status;
     }
-    if (sessionData) {
-      setAuthState({
-        user: sessionData.user,
-        session: sessionData.session,
-        isLoading: false,
-        error: null
-      });
-      return;
+    if (isServer()) {
+      return "loading";
     }
-    setAuthState({
-      user: null,
-      session: null,
-      isLoading: false,
-      error: null
-    });
-  }, [sessionData, sessionLoading, sessionError]);
-  const refresh = async () => {
-    await refetch();
-  };
+    if (user && session) {
+      return "authenticated";
+    }
+    if (isNetworkError || errorStatus === 401) {
+      return "unauthenticated";
+    }
+    if (sessionError && !isNetworkError && errorStatus !== 401) {
+      if (errorStatus && errorStatus >= 500) {
+        return "authenticated";
+      }
+      if (isFetched) {
+        return "unauthenticated";
+      }
+    }
+    if (isLoading || !isFetched) {
+      return "loading";
+    }
+    if (isFetched && !user && !session) {
+      return "unauthenticated";
+    }
+    return "unauthenticated";
+  })();
+  const signOutMutation = hooks.useMutation("post", "/sign-out");
+  const t = createTranslator(config.messages || {});
   const setAuth = (auth) => {
-    setAuthState({
+    setOverride({
       user: auth.user,
       session: auth.session,
-      isLoading: false,
+      status: "authenticated",
       error: null
     });
   };
   const clearAuth = () => {
-    setAuthState({
+    setOverride({
       user: null,
       session: null,
-      isLoading: false,
+      status: "unauthenticated",
       error: null
     });
   };
-  const signOutMutation = hooks.useMutation("post", "/sign-out");
+  const refresh = async () => {
+    setOverride(null);
+    await refetch();
+  };
   const signOut = async () => {
     try {
       await signOutMutation.mutateAsync({});
@@ -238,16 +291,16 @@ function AuthStateProvider({
       clearAuth();
     }
   };
-  const t = createTranslator(config.messages || {});
-  return /* @__PURE__ */ jsx2(ConfigContext.Provider, { value: { config, t }, children: /* @__PURE__ */ jsx2(ApiContext.Provider, { value: { hooks, setAuth, clearAuth, refresh }, children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx2(ConfigContext.Provider, { value: { config, cookieName, t }, children: /* @__PURE__ */ jsx2(ApiContext.Provider, { value: { hooks, setAuth, clearAuth, refresh }, children: /* @__PURE__ */ jsx2(
     SessionContext.Provider,
     {
       value: {
-        user: authState.user,
-        session: authState.session,
-        isLoading: authState.isLoading,
-        isAuthenticated: !!authState.user && !!authState.session,
-        error: authState.error,
+        user,
+        session,
+        status,
+        error,
+        isLoading: status === "loading",
+        isAuthenticated: status === "authenticated",
         refresh,
         signOut
       },
@@ -256,6 +309,16 @@ function AuthStateProvider({
   ) }) });
 }
 
+// src/hooks/use-translator.ts
+function useTranslator(namespace) {
+  const mesob = useMesob();
+  const { config } = useConfig();
+  if (mesob?.t) {
+    return (key, params) => mesob.t(namespace ? `${namespace}.${key}` : key, params);
+  }
+  return createTranslator(config.messages || {}, namespace);
+}
+
 // src/constants/auth.error.codes.ts
 var AUTH_ERROR_MAPPING = {
   USER_NOT_FOUND: {
@@ -321,6 +384,14 @@ function extractErrorCode(err) {
   }
   return "";
 }
+function sanitizeErrorMessage(message) {
+  const lowerMessage = message.toLowerCase();
+  const isDatabaseError = lowerMessage.includes("failed query") || lowerMessage.includes("select") || lowerMessage.includes("insert") || lowerMessage.includes("update") || lowerMessage.includes("delete") || lowerMessage.includes("from") || lowerMessage.includes("where") || lowerMessage.includes("limit") || lowerMessage.includes("params:") || lowerMessage.includes("query") || message.includes('"iam".') || message.includes('"tenants"') || message.includes('"users"') || message.includes('"sessions"') || message.includes('"accounts"') || lowerMessage.includes("relation") || lowerMessage.includes("column") || lowerMessage.includes("syntax error") || lowerMessage.includes("database") || lowerMessage.includes("postgres") || lowerMessage.includes("sql");
+  if (isDatabaseError) {
+    return "An error occurred while processing your request";
+  }
+  return message;
+}
 function handleAuthError(err, setError, t) {
   const errorCode = extractErrorCode(err);
   if (errorCode && AUTH_ERROR_MAPPING[errorCode]) {
@@ -331,16 +402,20 @@ function handleAuthError(err, setError, t) {
     });
     return;
   }
+  const sanitizedMessage = sanitizeErrorMessage(
+    err.message || t("errors.fallback")
+  );
   setError({
     title: t("errors.fallback"),
-    description: err.message || t("errors.fallback")
+    description: sanitizedMessage
   });
 }
 function handleGenericError(err, setError, t) {
-  const message = err instanceof Error ? err.message : t("errors.fallback");
+  const rawMessage = err instanceof Error ? err.message : t("errors.fallback");
+  const sanitizedMessage = sanitizeErrorMessage(rawMessage);
   setError({
     title: "Error",
-    description: message
+    description: sanitizedMessage
   });
 }
 var handleError = (err, setError, t) => {
@@ -351,9 +426,9 @@ var handleError = (err, setError, t) => {
   }
 };
 
-// src/components/auth/auth-page-layout.tsx
+// src/components/auth/auth-layout.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var AuthPageLayout = ({
+var AuthLayout = ({
   title,
   description,
   children,
@@ -371,108 +446,41 @@ var AuthPageLayout = ({
   ] });
 };
 
-// src/components/auth/forgot-password.tsx
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Button } from "@mesob/ui/components/button";
-import {
-  Field,
-  FieldError,
-  FieldGroup,
-  FieldLabel
-} from "@mesob/ui/components/field";
-import { Input } from "@mesob/ui/components/input";
-import { Spinner } from "@mesob/ui/components/spinner";
-import { Controller, useForm } from "react-hook-form";
-import { z } from "zod";
-
-// src/hooks/use-translator.ts
-function useTranslator(namespace) {
-  const { config } = useConfig();
-  return createTranslator(config.messages || {}, namespace);
-}
-
 // src/components/auth/forgot-password.tsx
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var forgotPasswordSchema = (t) => z.object({
   account: z.string().min(1, t("errors.accountRequired"))
 });
-var ForgotPassword = ({
-  onSubmit,
-  isLoading = false
-}) => {
-  const t = useTranslator("Auth.forgotPassword");
-  const form = useForm({
-    resolver: zodResolver(forgotPasswordSchema(t)),
-    defaultValues: {
-      account: ""
-    }
-  });
-  const handleSubmit = form.handleSubmit(async (values) => {
-    await onSubmit(values);
-  });
-  return /* @__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,
-        children: [
-          isLoading && /* @__PURE__ */ jsx4(Spinner, {}),
-          isLoading ? t("form.submitting") : t("form.submit")
-        ]
-      }
-    ) })
-  ] });
-};
-
-// src/components/auth/pages/forgot-password-page.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var ForgotPasswordPage = (_props = {}) => {
+var ForgotPassword = () => {
   const { hooks } = useApi();
   const { config } = useConfig();
-  const t = createTranslator(config.messages || {}, "Auth.forgotPassword");
+  const mesob = useMesob2();
+  const t = useTranslator("Auth.forgotPassword");
+  const Link3 = mesob?.linkComponent ?? config.navigation?.linkComponent;
   const [isLoading, setIsLoading] = useState2(false);
   const [error, setError] = useState2(null);
   const forgotPasswordMutation = hooks.useMutation("post", "/password/forgot");
   const signInLink = config.navigation?.links?.signIn || "/auth/sign-in";
-  const Link = config.navigation?.linkComponent;
   const onNavigate = config.navigation?.onNavigate || ((path) => {
     if (typeof window !== "undefined") {
       window.location.href = path;
     }
   });
   const logoImage = config.ui.logoImage;
-  useEffect2(() => {
+  const form = useForm({
+    resolver: zodResolver(forgotPasswordSchema(t)),
+    defaultValues: {
+      account: ""
+    }
+  });
+  useEffect(() => {
     if (error) {
       toast.error(error.title || "Error", {
         description: error.description
       });
     }
   }, [error]);
-  const handleSubmit = async (values) => {
+  const handleSubmit = form.handleSubmit(async (values) => {
     setIsLoading(true);
     setError(null);
     try {
@@ -493,10 +501,7 @@ var ForgotPasswordPage = (_props = {}) => {
     } finally {
       setIsLoading(false);
     }
-  };
-  const handleBack = () => {
-    onNavigate(signInLink);
-  };
+  });
   let errorContent = null;
   if (error) {
     if (typeof error === "string") {
@@ -505,13 +510,13 @@ var ForgotPasswordPage = (_props = {}) => {
       errorContent = error;
     }
   }
-  return /* @__PURE__ */ jsxs3(
-    AuthPageLayout,
+  return /* @__PURE__ */ jsxs2(
+    AuthLayout,
     {
       title: t("title"),
       description: t("description"),
       logoImage,
-      footer: Link ? /* @__PURE__ */ jsx5(Link, { href: signInLink, className: "text-primary hover:underline", children: t("footer.backToSignIn") }) : /* @__PURE__ */ jsx5(
+      footer: Link3 ? /* @__PURE__ */ jsx4(Link3, { href: signInLink, className: "text-primary hover:underline", children: t("footer.backToSignIn") }) : /* @__PURE__ */ jsx4(
         "a",
         {
           href: signInLink,
@@ -524,36 +529,59 @@ var ForgotPasswordPage = (_props = {}) => {
         }
       ),
       children: [
-        /* @__PURE__ */ jsx5(
-          ForgotPassword,
-          {
-            onSubmit: handleSubmit,
-            isLoading: isLoading || forgotPasswordMutation.isPending,
-            onBack: handleBack
-          }
-        ),
-        errorContent && /* @__PURE__ */ jsxs3(Alert, { variant: "destructive", className: "mt-4", children: [
-          /* @__PURE__ */ jsx5(IconAlertCircle, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx5(AlertTitle, { children: errorContent.title }),
-          /* @__PURE__ */ jsx5(AlertDescription, { children: errorContent.description })
+        /* @__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")
+              ]
+            }
+          ) })
+        ] }),
+        errorContent && /* @__PURE__ */ jsxs2(Alert, { variant: "destructive", className: "mt-4", children: [
+          /* @__PURE__ */ jsx4(IconAlertCircle, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx4(AlertTitle, { children: errorContent.title }),
+          /* @__PURE__ */ jsx4(AlertDescription, { children: errorContent.description })
         ] })
       ]
     }
   );
 };
 
-// src/components/auth/pages/reset-password-page.tsx
+// src/components/auth/reset-password-form.tsx
+import { zodResolver as zodResolver2 } from "@hookform/resolvers/zod";
 import {
   Alert as Alert2,
   AlertDescription as AlertDescription2,
   AlertTitle as AlertTitle2
 } from "@mesob/ui/components/alert";
-import { toast as toast2 } from "@mesob/ui/components/sonner";
-import { IconAlertCircle as IconAlertCircle2 } from "@tabler/icons-react";
-import { useEffect as useEffect3, useState as useState4 } from "react";
-
-// src/components/auth/reset-password-form.tsx
-import { zodResolver as zodResolver2 } from "@hookform/resolvers/zod";
 import { Button as Button2 } from "@mesob/ui/components/button";
 import {
   Field as Field2,
@@ -567,12 +595,14 @@ import {
   InputOTPGroup,
   InputOTPSlot
 } from "@mesob/ui/components/input-otp";
+import { Link } from "@mesob/ui/components/link";
 import { Spinner as Spinner2 } from "@mesob/ui/components/spinner";
-import { IconEye, IconEyeOff } from "@tabler/icons-react";
-import { useState as useState3 } from "react";
+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 { toast as toast2 } from "sonner";
 import { z as z2 } from "zod";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var resetPasswordSchema = (t) => z2.object({
   code: z2.string().length(6, t("errors.codeLength")),
   password: z2.string().min(8, t("errors.passwordLength")),
@@ -582,151 +612,19 @@ var resetPasswordSchema = (t) => z2.object({
   path: ["confirmPassword"]
 });
 var ResetPasswordForm = ({
-  onSubmit,
-  isLoading = false
-}) => {
-  const t = useTranslator("Auth.resetPassword");
-  const [showPassword, setShowPassword] = useState3(false);
-  const form = useForm2({
-    resolver: zodResolver2(resetPasswordSchema(t)),
-    defaultValues: {
-      code: "",
-      password: "",
-      confirmPassword: ""
-    }
-  });
-  const handleSubmit = form.handleSubmit(async (values) => {
-    await onSubmit(values);
-  });
-  return /* @__PURE__ */ jsxs4("form", { id: "reset-password-form", onSubmit: handleSubmit, children: [
-    /* @__PURE__ */ jsxs4(FieldGroup2, { children: [
-      /* @__PURE__ */ jsx6(
-        Controller2,
-        {
-          name: "code",
-          control: form.control,
-          render: ({ field, fieldState }) => /* @__PURE__ */ jsxs4(Field2, { "data-invalid": fieldState.invalid, children: [
-            /* @__PURE__ */ jsx6("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx6(FieldLabel2, { children: t("form.codeLabel") }) }),
-            /* @__PURE__ */ jsx6("div", { className: "flex mt-2 justify-center", children: /* @__PURE__ */ jsx6(
-              InputOTP,
-              {
-                maxLength: 6,
-                value: field.value,
-                onChange: field.onChange,
-                onBlur: field.onBlur,
-                containerClassName: "gap-4",
-                "aria-invalid": fieldState.invalid,
-                children: /* @__PURE__ */ jsxs4(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__ */ jsx6(InputOTPSlot, { className: "h-12", index: 0 }),
-                  /* @__PURE__ */ jsx6(InputOTPSlot, { className: "h-12", index: 1 }),
-                  /* @__PURE__ */ jsx6(InputOTPSlot, { className: "h-12", index: 2 }),
-                  /* @__PURE__ */ jsx6(InputOTPSlot, { className: "h-12", index: 3 }),
-                  /* @__PURE__ */ jsx6(InputOTPSlot, { className: "h-12", index: 4 }),
-                  /* @__PURE__ */ jsx6(InputOTPSlot, { className: "h-12", index: 5 })
-                ] })
-              }
-            ) }),
-            fieldState.invalid && /* @__PURE__ */ jsx6(FieldError2, { errors: [fieldState.error] })
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsx6(
-        Controller2,
-        {
-          name: "password",
-          control: form.control,
-          render: ({ field, fieldState }) => /* @__PURE__ */ jsxs4(Field2, { "data-invalid": fieldState.invalid, children: [
-            /* @__PURE__ */ jsx6(FieldLabel2, { htmlFor: "reset-password-password", children: t("form.passwordLabel") }),
-            /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx6(
-                Input2,
-                {
-                  ...field,
-                  id: "reset-password-password",
-                  type: showPassword ? "text" : "password",
-                  placeholder: t("form.passwordPlaceholder"),
-                  "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(IconEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx6(IconEye, { className: "h-4 w-4" })
-                }
-              )
-            ] }),
-            fieldState.invalid && /* @__PURE__ */ jsx6(FieldError2, { errors: [fieldState.error] })
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsx6(
-        Controller2,
-        {
-          name: "confirmPassword",
-          control: form.control,
-          render: ({ field, fieldState }) => /* @__PURE__ */ jsxs4(Field2, { "data-invalid": fieldState.invalid, children: [
-            /* @__PURE__ */ jsx6(FieldLabel2, { htmlFor: "reset-password-confirmPassword", children: t("form.confirmPasswordLabel") }),
-            /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx6(
-                Input2,
-                {
-                  ...field,
-                  id: "reset-password-confirmPassword",
-                  type: showPassword ? "text" : "password",
-                  placeholder: t("form.passwordPlaceholder"),
-                  "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(IconEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx6(IconEye, { className: "h-4 w-4" })
-                }
-              )
-            ] }),
-            fieldState.invalid && /* @__PURE__ */ jsx6(FieldError2, { errors: [fieldState.error] })
-          ] })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx6("div", { className: "mt-4", children: /* @__PURE__ */ jsxs4(
-      Button2,
-      {
-        type: "submit",
-        form: "reset-password-form",
-        className: "w-full",
-        disabled: isLoading,
-        children: [
-          isLoading && /* @__PURE__ */ jsx6(Spinner2, {}),
-          isLoading ? t("form.submitting") : t("form.submit")
-        ]
-      }
-    ) })
-  ] });
-};
-
-// src/components/auth/pages/reset-password-page.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var ResetPasswordPage = ({
   verificationId,
   redirectUrl
 }) => {
   const { hooks, refresh } = useApi();
   const { config } = useConfig();
-  const t = createTranslator(config.messages || {}, "Auth.resetPassword");
-  const common = createTranslator(config.messages || {}, "Common");
-  const [isLoading, setIsLoading] = useState4(false);
-  const [error, setError] = useState4(null);
+  const t = useTranslator("Auth.resetPassword");
+  const common = useTranslator("Common");
+  const [isLoading, setIsLoading] = useState3(false);
+  const [error, setError] = useState3(null);
+  const [showPassword, setShowPassword] = useState3(false);
   const resetPasswordMutation = hooks.useMutation("post", "/password/reset");
   const signInLink = config.navigation?.links?.signIn || "/auth/sign-in";
   const forgotPasswordLink = config.navigation?.links?.forgotPassword || "/auth/forgot-password";
-  const Link = config.navigation?.linkComponent;
   const onNavigate = config.navigation?.onNavigate || ((path) => {
     if (typeof window !== "undefined") {
       window.location.href = path;
@@ -734,14 +632,22 @@ var ResetPasswordPage = ({
   });
   const logoImage = config.ui.logoImage;
   const defaultRedirect = redirectUrl || config.navigation?.defaultRedirectUrl || "/";
-  useEffect3(() => {
+  const form = useForm2({
+    resolver: zodResolver2(resetPasswordSchema(t)),
+    defaultValues: {
+      code: "",
+      password: "",
+      confirmPassword: ""
+    }
+  });
+  useEffect2(() => {
     if (error) {
       toast2.error(error.title || "Error", {
         description: error.description
       });
     }
   }, [error]);
-  const handleSubmit = async (values) => {
+  const handleSubmit = form.handleSubmit(async (values) => {
     if (!verificationId) {
       setError({
         title: t("errors.fallback"),
@@ -766,34 +672,23 @@ var ResetPasswordPage = ({
     } finally {
       setIsLoading(false);
     }
-  };
+  });
   if (!verificationId) {
-    return /* @__PURE__ */ jsx7(
-      AuthPageLayout,
+    return /* @__PURE__ */ jsx5(
+      AuthLayout,
       {
         title: common("invalidLinkTitle"),
         description: common("invalidLinkDescription"),
         logoImage,
-        footer: Link ? /* @__PURE__ */ jsx7(
+        footer: /* @__PURE__ */ jsx5(
           Link,
           {
             href: forgotPasswordLink,
             className: "text-primary hover:underline",
             children: t("footer.requestNew")
           }
-        ) : /* @__PURE__ */ jsx7(
-          "a",
-          {
-            href: forgotPasswordLink,
-            onClick: (e) => {
-              e.preventDefault();
-              onNavigate(forgotPasswordLink);
-            },
-            className: "text-primary hover:underline",
-            children: t("footer.requestNew")
-          }
         ),
-        children: /* @__PURE__ */ jsx7("div", {})
+        children: /* @__PURE__ */ jsx5("div", {})
       }
     );
   }
@@ -805,15 +700,15 @@ var ResetPasswordPage = ({
       errorContent = error;
     }
   }
-  return /* @__PURE__ */ jsxs5(
-    AuthPageLayout,
+  return /* @__PURE__ */ jsxs3(
+    AuthLayout,
     {
       title: t("title"),
       description: t("description"),
       logoImage,
-      footer: Link ? /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between w-full gap-2", children: [
-        /* @__PURE__ */ jsx7(Link, { href: signInLink, className: "text-primary hover:underline", children: t("footer.backToSignIn") }),
-        /* @__PURE__ */ jsx7(
+      footer: /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between w-full gap-2", children: [
+        /* @__PURE__ */ jsx5(Link, { href: signInLink, className: "text-primary hover:underline", children: t("footer.backToSignIn") }),
+        /* @__PURE__ */ jsx5(
           Link,
           {
             href: forgotPasswordLink,
@@ -821,64 +716,136 @@ var ResetPasswordPage = ({
             children: t("footer.changeAccount")
           }
         )
-      ] }) : /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between w-full gap-2", children: [
-        /* @__PURE__ */ jsx7(
-          "a",
-          {
-            href: forgotPasswordLink,
-            onClick: (e) => {
-              e.preventDefault();
-              onNavigate(forgotPasswordLink);
-            },
-            className: "text-primary hover:underline",
-            children: t("footer.backToSignIn")
-          }
-        ),
-        /* @__PURE__ */ jsx7(
-          "a",
-          {
-            href: forgotPasswordLink,
-            onClick: (e) => {
-              e.preventDefault();
-              onNavigate(forgotPasswordLink);
-            },
-            className: "text-primary hover:underline",
-            children: t("footer.changeAccount")
-          }
-        )
       ] }),
       children: [
-        /* @__PURE__ */ jsx7(
-          ResetPasswordForm,
-          {
-            verificationId,
-            onSubmit: handleSubmit,
-            isLoading: isLoading || resetPasswordMutation.isPending,
-            error
-          }
-        ),
-        errorContent && /* @__PURE__ */ jsxs5(Alert2, { variant: "destructive", className: "mt-4", children: [
-          /* @__PURE__ */ jsx7(IconAlertCircle2, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx7(AlertTitle2, { children: errorContent.title }),
-          /* @__PURE__ */ jsx7(AlertDescription2, { children: errorContent.description })
+        /* @__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",
+                      {
+                        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" })
+                      }
+                    )
+                  ] }),
+                  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(
+                      Input2,
+                      {
+                        ...field,
+                        id: "reset-password-confirmPassword",
+                        type: showPassword ? "text" : "password",
+                        placeholder: t("form.passwordPlaceholder"),
+                        "aria-invalid": fieldState.invalid
+                      }
+                    ),
+                    /* @__PURE__ */ jsx5(
+                      "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__ */ jsx5(IconEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx5(IconEye, { className: "h-4 w-4" })
+                      }
+                    )
+                  ] }),
+                  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")
+              ]
+            }
+          ) })
+        ] }),
+        errorContent && /* @__PURE__ */ jsxs3(Alert2, { variant: "destructive", className: "mt-4", children: [
+          /* @__PURE__ */ jsx5(IconAlertCircle2, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx5(AlertTitle2, { children: errorContent.title }),
+          /* @__PURE__ */ jsx5(AlertDescription2, { children: errorContent.description })
         ] })
       ]
     }
   );
 };
 
-// src/components/auth/pages/sign-in-page.tsx
+// src/components/auth/sign-in.tsx
+import { zodResolver as zodResolver3 } from "@hookform/resolvers/zod";
 import {
   Alert as Alert3,
   AlertDescription as AlertDescription3,
   AlertTitle as AlertTitle3
 } from "@mesob/ui/components/alert";
-import { toast as toast3 } from "@mesob/ui/components/sonner";
-import { IconAlertCircle as IconAlertCircle3 } from "@tabler/icons-react";
-import { useEffect as useEffect5, useState as useState6 } from "react";
-
-// src/components/auth/sign-in.tsx
-import { zodResolver as zodResolver3 } from "@hookform/resolvers/zod";
 import { Button as Button3 } from "@mesob/ui/components/button";
 import {
   Field as Field3,
@@ -887,39 +854,41 @@ import {
   FieldLabel as FieldLabel3
 } from "@mesob/ui/components/field";
 import { Input as Input3 } from "@mesob/ui/components/input";
+import { useMesob as useMesob3 } from "@mesob/ui/components/mesob-context";
 import { Spinner as Spinner3 } from "@mesob/ui/components/spinner";
-import { IconEye as IconEye2, IconEyeOff as IconEyeOff2 } from "@tabler/icons-react";
-import { useEffect as useEffect4, useState as useState5 } from "react";
+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 { toast as toast3 } from "sonner";
 import { z as z3 } from "zod";
 
 // src/utils/normalize-phone.ts
 function normalizePhone(phone) {
   const cleaned = phone.trim().replace(/\s/g, "");
-  if (cleaned.startsWith("+2519")) {
+  if (cleaned.startsWith("+2519") || cleaned.startsWith("+2517")) {
     return cleaned;
   }
-  if (cleaned.startsWith("2519")) {
+  if (cleaned.startsWith("2519") || cleaned.startsWith("2517")) {
     return `+${cleaned}`;
   }
-  if (cleaned.startsWith("09")) {
+  if (cleaned.startsWith("09") || cleaned.startsWith("07")) {
     return `+251${cleaned.slice(1)}`;
   }
-  if (cleaned.startsWith("9") && cleaned.length === 9) {
+  if ((cleaned.startsWith("9") || cleaned.startsWith("7")) && cleaned.length === 9) {
     return `+251${cleaned}`;
   }
   return cleaned;
 }
 
 // src/components/auth/sign-in.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-var identifierSchema = (t) => z3.object({
-  identifier: z3.string().trim().min(1, { message: t("errors.requiredField") }).refine(
+import { 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({
+  username: z3.string().trim().min(1, { message: t("errors.requiredField") }).refine(
     (val) => {
       const isEmail = z3.email().safeParse(val).success;
-      const phoneRegex = /^(\+2519|2519|09)\d{8}$/;
-      const isPhone4 = phoneRegex.test(val);
-      return isEmail || isPhone4;
+      const isPhone3 = phoneRegex.test(val);
+      return isEmail || isPhone3;
     },
     {
       message: t("errors.invalidEmailOrPhone")
@@ -929,253 +898,111 @@ var identifierSchema = (t) => z3.object({
 var passwordSchema = (t) => z3.object({
   password: z3.string().min(8, t("errors.passwordLength")).max(128, t("errors.longPasswordError"))
 });
-var SignIn = ({
-  onSubmit,
-  isLoading = false,
-  identifier: initialIdentifier = "",
-  step = "identifier",
-  onBack: _onBack
-}) => {
-  const { hooks } = useApi();
-  const t = useTranslator("Auth.signIn");
-  const [showPassword, setShowPassword] = useState5(false);
-  const [currentIdentifier, setCurrentIdentifier] = useState5(initialIdentifier);
-  const identifierForm = useForm3({
-    resolver: zodResolver3(identifierSchema(t)),
-    defaultValues: {
-      identifier: initialIdentifier
-    },
-    mode: "onChange"
-  });
-  const passwordForm = useForm3({
-    resolver: zodResolver3(passwordSchema(t)),
-    defaultValues: {
-      password: ""
-    },
-    mode: "onChange"
-  });
-  const signInMutation = hooks.useMutation("post", "/sign-in");
-  useEffect4(() => {
-    if (initialIdentifier) {
-      identifierForm.setValue("identifier", initialIdentifier);
-      setCurrentIdentifier(initialIdentifier);
-    }
-  }, [initialIdentifier, identifierForm]);
-  const handleIdentifierSubmit = async (values) => {
-    const phoneRegex = /^(\+2519|2519|09)\d{8}$/;
-    const normalizedIdentifier = phoneRegex.test(values.identifier) ? normalizePhone(values.identifier) : values.identifier;
-    setCurrentIdentifier(normalizedIdentifier);
-    identifierForm.setValue("identifier", normalizedIdentifier);
-    await onSubmit(
-      { identifier: normalizedIdentifier, password: "" },
-      "identifier"
-    );
-  };
-  const handlePasswordSubmit = async (values) => {
-    try {
-      await signInMutation.mutateAsync({
-        body: {
-          identifier: currentIdentifier || identifierForm.getValues("identifier"),
-          password: values.password
-        }
-      });
-      await onSubmit(
-        {
-          identifier: currentIdentifier || identifierForm.getValues("identifier"),
-          password: values.password
-        },
-        "password"
-      );
-    } catch {
-      await onSubmit(
-        {
-          identifier: currentIdentifier || identifierForm.getValues("identifier"),
-          password: values.password
-        },
-        "password"
-      );
-    }
-  };
-  const isPasswordStep = step === "password";
-  const isSubmitting = isLoading || signInMutation.isPending;
-  if (isPasswordStep) {
-    return /* @__PURE__ */ jsxs6(
-      "form",
-      {
-        id: "sign-in-password-form",
-        onSubmit: passwordForm.handleSubmit(handlePasswordSubmit),
-        children: [
-          /* @__PURE__ */ jsxs6(FieldGroup3, { children: [
-            /* @__PURE__ */ jsxs6("div", { className: "text-center", children: [
-              /* @__PURE__ */ jsx8("p", { className: "text-sm text-muted-foreground mb-2", children: t("form.enterPasswordFor") }),
-              /* @__PURE__ */ jsx8("p", { className: "font-bold", children: currentIdentifier || identifierForm.getValues("identifier") })
-            ] }),
-            /* @__PURE__ */ jsx8(
-              Controller3,
-              {
-                name: "password",
-                control: passwordForm.control,
-                render: ({ field, fieldState }) => /* @__PURE__ */ jsxs6(Field3, { "data-invalid": fieldState.invalid, children: [
-                  /* @__PURE__ */ jsx8(FieldLabel3, { htmlFor: "sign-in-password", children: t("form.passwordLabel") }),
-                  /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
-                    /* @__PURE__ */ jsx8(
-                      Input3,
-                      {
-                        ...field,
-                        id: "sign-in-password",
-                        type: showPassword ? "text" : "password",
-                        placeholder: t("form.passwordPlaceholder"),
-                        autoComplete: "current-password",
-                        "aria-invalid": fieldState.invalid
-                      }
-                    ),
-                    /* @__PURE__ */ jsx8(
-                      "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__ */ jsx8(IconEyeOff2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx8(IconEye2, { className: "h-4 w-4" })
-                      }
-                    )
-                  ] }),
-                  fieldState.invalid && /* @__PURE__ */ jsx8(FieldError3, { errors: [fieldState.error] })
-                ] })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx8("div", { className: "mt-4", children: /* @__PURE__ */ jsxs6(Button3, { type: "submit", className: "w-full", disabled: isSubmitting, children: [
-            isSubmitting && /* @__PURE__ */ jsx8(Spinner3, {}),
-            isSubmitting ? t("form.submitting") : t("form.submit")
-          ] }) })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs6(
-    "form",
-    {
-      id: "sign-in-identifier-form",
-      onSubmit: identifierForm.handleSubmit(handleIdentifierSubmit),
-      children: [
-        /* @__PURE__ */ jsx8(FieldGroup3, { children: /* @__PURE__ */ jsx8(
-          Controller3,
-          {
-            name: "identifier",
-            control: identifierForm.control,
-            render: ({ field, fieldState }) => /* @__PURE__ */ jsxs6(Field3, { "data-invalid": fieldState.invalid, children: [
-              /* @__PURE__ */ jsx8(FieldLabel3, { htmlFor: "sign-in-identifier", children: t("form.accountLabel") }),
-              /* @__PURE__ */ jsx8(
-                Input3,
-                {
-                  ...field,
-                  id: "sign-in-identifier",
-                  type: "text",
-                  placeholder: t("form.accountPlaceholder"),
-                  autoComplete: "username",
-                  "aria-invalid": fieldState.invalid
-                }
-              ),
-              fieldState.invalid && /* @__PURE__ */ jsx8(FieldError3, { errors: [fieldState.error] })
-            ] })
-          }
-        ) }),
-        /* @__PURE__ */ jsx8("div", { className: "mt-4", children: /* @__PURE__ */ jsxs6(Button3, { type: "submit", className: "w-full", disabled: isSubmitting, children: [
-          isSubmitting && /* @__PURE__ */ jsx8(Spinner3, {}),
-          isSubmitting ? t("form.submitting") : t("form.continue")
-        ] }) })
-      ]
-    }
-  );
-};
-
-// src/components/auth/pages/sign-in-page.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
-var isPhone = (s) => /^\+?[0-9()[\]\s-]{6,}$/.test(s);
-var SignInPage = ({ redirectUrl } = {}) => {
+var SignIn = ({ redirectUrl } = {}) => {
   const { hooks, setAuth } = useApi();
   const { config } = useConfig();
-  const t = createTranslator(config.messages || {}, "Auth.signIn");
-  const [isLoading, setIsLoading] = useState6(false);
-  const [error, setError] = useState6(null);
-  const [step, setStep] = useState6("identifier");
-  const [identifier, setIdentifier] = useState6("");
-  const checkUserMutation = hooks.useMutation("post", "/check-user");
+  const mesob = useMesob3();
+  const t = useTranslator("Auth.signIn");
+  const Link3 = mesob?.linkComponent ?? config.navigation?.linkComponent;
+  const [isLoading, setIsLoading] = useState4(false);
+  const [error, setError] = useState4(null);
+  const [showPasswordField, setShowPasswordField] = useState4(false);
+  const [showPassword, setShowPassword] = useState4(false);
+  const [username, setUsername] = useState4("");
+  const [isChecking, setIsChecking] = useState4(false);
+  const checkUserMutation = hooks.useMutation("post", "/check-account");
   const signInMutation = hooks.useMutation("post", "/sign-in");
+  const phoneRegex = typeof config.phoneRegex === "string" ? new RegExp(config.phoneRegex) : config.phoneRegex || /^(\+2519|\+2517|2519|2517|09|07)\d{8}$/;
   const defaultRedirect = redirectUrl || config.navigation?.defaultRedirectUrl || "/dashboard";
   const forgotPasswordLink = config.navigation?.links?.forgotPassword || "/auth/forgot-password";
   const signUpLink = config.navigation?.links?.signUp || "/auth/sign-up";
-  const Link = config.navigation?.linkComponent;
   const onNavigate = config.navigation?.onNavigate || ((path) => {
     if (typeof window !== "undefined") {
       window.location.href = path;
     }
   });
   const logoImage = config.ui.logoImage;
-  useEffect5(() => {
+  const usernameForm = useForm3({
+    resolver: zodResolver3(usernameSchema(t, phoneRegex)),
+    defaultValues: { username: "" },
+    mode: "onChange"
+  });
+  const passwordForm = useForm3({
+    resolver: zodResolver3(passwordSchema(t)),
+    defaultValues: { password: "" },
+    mode: "onChange"
+  });
+  useEffect3(() => {
     if (error) {
       toast3.error(error.title || "Error", {
         description: error.description
       });
     }
   }, [error]);
-  const handleIdentifierStep = async (identifierValue) => {
-    const checkResult = await checkUserMutation.mutateAsync({
-      body: {
-        identifier: identifierValue
+  const handleCheckAccount = async (usernameValue) => {
+    setIsChecking(true);
+    try {
+      const normalizedUsername = phoneRegex.test(usernameValue) ? normalizePhone(usernameValue) : usernameValue;
+      const result = await checkUserMutation.mutateAsync({
+        body: {
+          username: normalizedUsername
+        }
+      });
+      if (result.exists) {
+        setUsername(normalizedUsername);
+        setShowPasswordField(true);
+      } else {
+        const email = isPhone(normalizedUsername) ? "" : normalizedUsername;
+        if (email) {
+          onNavigate(`${signUpLink}?email=${encodeURIComponent(email)}`);
+        } else {
+          onNavigate(
+            `${signUpLink}?phone=${encodeURIComponent(normalizedUsername)}`
+          );
+        }
       }
-    });
-    if (checkResult.exists) {
-      setIdentifier(identifierValue);
-      setStep("password");
-      return;
-    }
-    const email = isPhone(identifierValue) ? "" : identifierValue;
-    if (email) {
-      onNavigate(`${signUpLink}?email=${encodeURIComponent(email)}`);
-    } else {
-      onNavigate(`${signUpLink}?phone=${encodeURIComponent(identifierValue)}`);
+    } catch {
+      usernameForm.setError("username", {
+        message: t("errors.checkAccountFailed")
+      });
+    } finally {
+      setIsChecking(false);
     }
   };
-  const handlePasswordStep = async (passwordValue) => {
-    const res = await signInMutation.mutateAsync({
-      body: {
-        identifier,
-        password: passwordValue
-      }
-    });
-    if ("verificationId" in res && res.verificationId) {
-      const verifyPath = isPhone(identifier) ? `/auth/verify-phone?context=sign-in&verificationId=${res.verificationId}&identifier=${encodeURIComponent(identifier)}` : `/auth/verify-email?verificationId=${res.verificationId}`;
-      onNavigate(verifyPath);
-      return;
-    }
-    if ("user" in res && "session" in res) {
-      setAuth(res);
-    }
-    onNavigate(defaultRedirect);
+  const handleUsernameSubmit = async (values) => {
+    await handleCheckAccount(values.username);
   };
-  const handleSubmit = async (values, currentStep) => {
+  const handlePasswordSubmit = async (values) => {
     setIsLoading(true);
     setError(null);
     try {
-      if (currentStep === "identifier") {
-        await handleIdentifierStep(values.identifier);
-      } else {
-        await handlePasswordStep(values.password || "");
+      const res = await signInMutation.mutateAsync({
+        body: {
+          identifier: username,
+          password: values.password
+        }
+      });
+      if ("verificationId" in res && res.verificationId) {
+        const verifyPath = isPhone(username) ? `/auth/verify-phone?context=sign-in&verificationId=${res.verificationId}&identifier=${encodeURIComponent(username)}` : `/auth/verify-email?verificationId=${res.verificationId}`;
+        onNavigate(verifyPath);
+        return;
       }
+      if ("user" in res && "session" in res) {
+        setAuth(res);
+      }
+      onNavigate(defaultRedirect);
     } catch (err) {
       handleError(err, setError, t);
     } finally {
       setIsLoading(false);
     }
   };
-  const isSubmitting = isLoading || checkUserMutation.isPending || signInMutation.isPending;
   const handleBack = () => {
-    setStep("identifier");
-    setIdentifier("");
-    setError(null);
+    setShowPasswordField(false);
+    setUsername("");
+    passwordForm.reset();
   };
-  const isStepPassword = step === "password";
+  const isSubmitting = isLoading || checkUserMutation.isPending || signInMutation.isPending || isChecking;
   let errorContent = null;
   if (error) {
     if (typeof error === "string") {
@@ -1184,79 +1011,145 @@ var SignInPage = ({ redirectUrl } = {}) => {
       errorContent = error;
     }
   }
-  return /* @__PURE__ */ jsx9("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs7(
-    AuthPageLayout,
+  const formContent = showPasswordField ? /* @__PURE__ */ jsxs4(
+    "form",
     {
-      title: t("title"),
-      description: isStepPassword ? void 0 : t("description"),
-      logoImage,
-      footer: /* @__PURE__ */ jsxs7(
-        "div",
-        {
-          className: "flex items-center justify-center w-full gap-2",
-          style: {
-            justifyContent: isStepPassword ? "space-between" : "center"
-          },
-          children: [
-            isStepPassword && // biome-ignore lint/a11y/useKeyWithClickEvents: change account
-            /* @__PURE__ */ jsx9(
-              "p",
+      id: "sign-in-form",
+      onSubmit: passwordForm.handleSubmit(handlePasswordSubmit),
+      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 }),
+            /* @__PURE__ */ jsx6(
+              "button",
               {
-                className: "text-primary inline-block cursor-pointer hover:underline",
+                type: "button",
                 onClick: handleBack,
+                className: "text-sm text-primary hover:underline mt-2",
                 children: t("changeAccount")
               }
-            ),
-            Link ? /* @__PURE__ */ jsx9(
-              Link,
-              {
-                href: forgotPasswordLink,
-                className: "text-primary inline-block hover:underline",
-                children: t("footer.forgotPassword")
-              }
-            ) : /* @__PURE__ */ jsx9(
-              "a",
-              {
-                href: forgotPasswordLink,
-                className: "text-primary inline-block hover:underline",
-                children: t("footer.forgotPassword")
-              }
             )
-          ]
-        }
-      ),
-      children: [
-        /* @__PURE__ */ jsx9(
-          SignIn,
-          {
-            onSubmit: handleSubmit,
-            isLoading: isSubmitting,
-            identifier,
-            step
-          }
-        ),
-        errorContent && /* @__PURE__ */ jsxs7(Alert3, { variant: "destructive", className: "mt-4", children: [
-          /* @__PURE__ */ jsx9(IconAlertCircle3, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx9(AlertTitle3, { children: errorContent.title }),
-          /* @__PURE__ */ jsx9(AlertDescription3, { children: errorContent.description })
+          ] }),
+          /* @__PURE__ */ jsx6(
+            Controller3,
+            {
+              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] })
+              ] })
+            }
+          )
+        ] }),
+        /* @__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,
+          {
+            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(
+                Input3,
+                {
+                  ...field,
+                  id: "sign-in-username",
+                  type: "text",
+                  placeholder: t("form.accountPlaceholder"),
+                  autoComplete: "username",
+                  "aria-invalid": fieldState.invalid
+                }
+              ),
+              fieldState.invalid && /* @__PURE__ */ jsx6(FieldError3, { errors: [fieldState.error] })
+            ] })
+          }
+        ) }),
+        /* @__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")
+        ] }) })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx6("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs4(
+    AuthLayout,
+    {
+      title: t("title"),
+      description: t("description"),
+      logoImage,
+      footer: showPasswordField ? /* @__PURE__ */ jsx6("div", { className: "flex items-center justify-center w-full", children: Link3 ? /* @__PURE__ */ jsx6(
+        Link3,
+        {
+          href: forgotPasswordLink,
+          className: "text-primary inline-block hover:underline",
+          children: t("footer.forgotPassword")
+        }
+      ) : /* @__PURE__ */ jsx6(
+        "a",
+        {
+          href: forgotPasswordLink,
+          onClick: (e) => {
+            e.preventDefault();
+            onNavigate(forgotPasswordLink);
+          },
+          className: "text-primary inline-block hover:underline",
+          children: t("footer.forgotPassword")
+        }
+      ) }) : void 0,
+      children: [
+        formContent,
+        errorContent && /* @__PURE__ */ jsxs4(Alert3, { variant: "destructive", className: "mt-4", children: [
+          /* @__PURE__ */ jsx6(IconAlertCircle3, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx6(AlertTitle3, { children: errorContent.title }),
+          /* @__PURE__ */ jsx6(AlertDescription3, { children: errorContent.description })
         ] })
       ]
     }
   ) });
 };
 
-// src/components/auth/pages/sign-up-page.tsx
+// src/components/auth/sign-up.tsx
+import { zodResolver as zodResolver4 } from "@hookform/resolvers/zod";
 import {
   Alert as Alert4,
   AlertDescription as AlertDescription4,
   AlertTitle as AlertTitle4
 } from "@mesob/ui/components/alert";
-import { toast as toast4 } from "@mesob/ui/components/sonner";
-import { IconAlertCircle as IconAlertCircle4 } from "@tabler/icons-react";
-import { useEffect as useEffect7, useState as useState8 } from "react";
-
-// src/components/auth/sign-up.tsx
-import { zodResolver as zodResolver4 } from "@hookform/resolvers/zod";
 import { Button as Button4 } from "@mesob/ui/components/button";
 import {
   Field as Field4,
@@ -1265,11 +1158,13 @@ import {
   FieldLabel as FieldLabel4
 } from "@mesob/ui/components/field";
 import { Input as Input4 } from "@mesob/ui/components/input";
-import { IconEye as IconEye3, IconEyeOff as IconEyeOff3 } from "@tabler/icons-react";
-import { useEffect as useEffect6, useState as useState7 } from "react";
+import { useMesob as useMesob4 } from "@mesob/ui/components/mesob-context";
+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 { toast as toast4 } from "sonner";
 import { z as z4 } from "zod";
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var isPhone2 = (s) => /^\+?[0-9()[\]\s-]{6,}$/.test(s);
 var signUpSchema = (t) => z4.object({
   fullName: z4.string().min(1, t("errors.fullNameRequired")),
@@ -1291,14 +1186,28 @@ var signUpSchema = (t) => z4.object({
   path: ["confirmPassword"]
 });
 var SignUp = ({
-  onSubmit,
-  isLoading = false,
+  redirectUrl,
   initialIdentifier
-}) => {
+} = {}) => {
+  const { hooks, setAuth } = useApi();
+  const { config } = useConfig();
+  const mesob = useMesob4();
   const t = useTranslator("Auth.signUp");
+  const Link3 = mesob?.linkComponent ?? config.navigation?.linkComponent;
+  const [isLoading, setIsLoading] = useState5(false);
+  const [error, setError] = useState5(null);
+  const [showPassword, setShowPassword] = useState5(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState5(false);
+  const signUpMutation = hooks.useMutation("post", "/sign-up");
+  const signInLink = config.navigation?.links?.signIn || "/auth/sign-in";
+  const onNavigate = config.navigation?.onNavigate || ((path) => {
+    if (typeof window !== "undefined") {
+      window.location.href = path;
+    }
+  });
+  const logoImage = config.ui.logoImage;
+  const defaultRedirect = redirectUrl || config.navigation?.defaultRedirectUrl || "/";
   const hasInitialIdentifier = !!initialIdentifier;
-  const [showPassword, setShowPassword] = useState7(false);
-  const [showConfirmPassword, setShowConfirmPassword] = useState7(false);
   const form = useForm4({
     resolver: zodResolver4(signUpSchema(t)),
     defaultValues: {
@@ -1308,188 +1217,24 @@ var SignUp = ({
       confirmPassword: ""
     }
   });
-  useEffect6(() => {
+  useEffect4(() => {
     if (initialIdentifier) {
       form.setValue("identifier", initialIdentifier);
     }
   }, [initialIdentifier, form]);
-  const handleSubmit = form.handleSubmit(async (values) => {
-    await onSubmit(values);
-  });
-  const getIdentifierLabel = () => {
-    if (!hasInitialIdentifier) {
-      return t("form.accountLabel") || "Email/Phone";
-    }
-    if (initialIdentifier?.includes("@")) {
-      return t("form.emailLabel");
-    }
-    return t("form.phoneLabel");
-  };
-  const identifierLabel = getIdentifierLabel();
-  return /* @__PURE__ */ jsxs8("form", { id: "sign-up-form", onSubmit: handleSubmit, children: [
-    /* @__PURE__ */ jsxs8(FieldGroup4, { children: [
-      /* @__PURE__ */ jsx10(
-        Controller4,
-        {
-          name: "fullName",
-          control: form.control,
-          render: ({ field, fieldState }) => /* @__PURE__ */ jsxs8(Field4, { "data-invalid": fieldState.invalid, children: [
-            /* @__PURE__ */ jsx10(FieldLabel4, { htmlFor: "sign-up-fullName", children: t("form.fullNameLabel") }),
-            /* @__PURE__ */ jsx10(
-              Input4,
-              {
-                ...field,
-                id: "sign-up-fullName",
-                placeholder: t("form.fullNamePlaceholder"),
-                "aria-invalid": fieldState.invalid
-              }
-            ),
-            fieldState.invalid && /* @__PURE__ */ jsx10(FieldError4, { errors: [fieldState.error] })
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsx10(
-        Controller4,
-        {
-          name: "identifier",
-          control: form.control,
-          render: ({ field, fieldState }) => /* @__PURE__ */ jsxs8(Field4, { "data-invalid": fieldState.invalid, children: [
-            /* @__PURE__ */ jsx10(
-              FieldLabel4,
-              {
-                htmlFor: "sign-up-identifier",
-                className: hasInitialIdentifier ? "block" : void 0,
-                children: identifierLabel
-              }
-            ),
-            /* @__PURE__ */ jsx10(
-              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__ */ jsx10(FieldError4, { errors: [fieldState.error] })
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsx10(
-        Controller4,
-        {
-          name: "password",
-          control: form.control,
-          render: ({ field, fieldState }) => /* @__PURE__ */ jsxs8(Field4, { "data-invalid": fieldState.invalid, children: [
-            /* @__PURE__ */ jsx10(FieldLabel4, { htmlFor: "sign-up-password", children: t("form.passwordLabel") }),
-            /* @__PURE__ */ jsxs8("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx10(
-                Input4,
-                {
-                  ...field,
-                  id: "sign-up-password",
-                  type: showPassword ? "text" : "password",
-                  placeholder: t("form.passwordPlaceholder"),
-                  "aria-invalid": fieldState.invalid
-                }
-              ),
-              /* @__PURE__ */ jsx10(
-                "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__ */ jsx10(IconEyeOff3, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx10(IconEye3, { className: "h-4 w-4" })
-                }
-              )
-            ] }),
-            fieldState.invalid && /* @__PURE__ */ jsx10(FieldError4, { errors: [fieldState.error] })
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsx10(
-        Controller4,
-        {
-          name: "confirmPassword",
-          control: form.control,
-          render: ({ field, fieldState }) => /* @__PURE__ */ jsxs8(Field4, { "data-invalid": fieldState.invalid, children: [
-            /* @__PURE__ */ jsx10(FieldLabel4, { htmlFor: "sign-up-confirmPassword", children: t("form.confirmPasswordLabel") }),
-            /* @__PURE__ */ jsxs8("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx10(
-                Input4,
-                {
-                  ...field,
-                  id: "sign-up-confirmPassword",
-                  type: showConfirmPassword ? "text" : "password",
-                  placeholder: t("form.passwordPlaceholder"),
-                  "aria-invalid": fieldState.invalid
-                }
-              ),
-              /* @__PURE__ */ jsx10(
-                "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__ */ jsx10(IconEyeOff3, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx10(IconEye3, { className: "h-4 w-4" })
-                }
-              )
-            ] }),
-            fieldState.invalid && /* @__PURE__ */ jsx10(FieldError4, { errors: [fieldState.error] })
-          ] })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx10("div", { className: "mt-4", children: /* @__PURE__ */ jsx10(
-      Button4,
-      {
-        type: "submit",
-        form: "sign-up-form",
-        className: "w-full",
-        disabled: isLoading,
-        children: isLoading ? t("form.submitting") : t("form.submit")
-      }
-    ) })
-  ] });
-};
-
-// src/components/auth/pages/sign-up-page.tsx
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
-var isPhone3 = (s) => /^\+?[0-9()[\]\s-]{6,}$/.test(s);
-var SignUpPage = ({
-  redirectUrl,
-  initialIdentifier
-} = {}) => {
-  const { hooks, setAuth } = useApi();
-  const { config } = useConfig();
-  const t = createTranslator(config.messages || {}, "Auth.signUp");
-  const [isLoading, setIsLoading] = useState8(false);
-  const [error, setError] = useState8(null);
-  const signUpMutation = hooks.useMutation("post", "/sign-up");
-  const signInLink = config.navigation?.links?.signIn || "/auth/sign-in";
-  const Link = config.navigation?.linkComponent;
-  const onNavigate = config.navigation?.onNavigate || ((path) => {
-    if (typeof window !== "undefined") {
-      window.location.href = path;
-    }
-  });
-  const logoImage = config.ui.logoImage;
-  const defaultRedirect = redirectUrl || config.navigation?.defaultRedirectUrl || "/";
-  useEffect7(() => {
+  useEffect4(() => {
     if (error) {
       toast4.error(error.title || "Error", {
         description: error.description
       });
     }
   }, [error]);
-  const handleSubmit = async (values) => {
+  const handleSubmit = form.handleSubmit(async (values) => {
     setIsLoading(true);
     setError(null);
     try {
       const identifier = values.identifier;
-      const usingPhone = isPhone3(identifier);
+      const usingPhone = isPhone2(identifier);
       const res = await signUpMutation.mutateAsync({
         body: usingPhone ? {
           phone: identifier,
@@ -1524,7 +1269,17 @@ var SignUpPage = ({
     } finally {
       setIsLoading(false);
     }
+  });
+  const getIdentifierLabel = () => {
+    if (!hasInitialIdentifier) {
+      return t("form.accountLabel") || "Email/Phone";
+    }
+    if (initialIdentifier?.includes("@")) {
+      return t("form.emailLabel");
+    }
+    return t("form.phoneLabel");
   };
+  const identifierLabel = getIdentifierLabel();
   let errorContent = null;
   if (error) {
     if (typeof error === "string") {
@@ -1533,16 +1288,16 @@ var SignUpPage = ({
       errorContent = error;
     }
   }
-  return /* @__PURE__ */ jsxs9(
-    AuthPageLayout,
+  return /* @__PURE__ */ jsxs5(
+    AuthLayout,
     {
       title: t("title"),
       description: t("description"),
       logoImage,
-      footer: /* @__PURE__ */ jsxs9("p", { children: [
+      footer: /* @__PURE__ */ jsxs5("p", { children: [
         t("footer.hasAccount"),
         " ",
-        Link ? /* @__PURE__ */ jsx11(Link, { href: signInLink, className: "text-primary hover:underline", children: t("footer.signInCta") }) : /* @__PURE__ */ jsx11(
+        Link3 ? /* @__PURE__ */ jsx7(Link3, { href: signInLink, className: "text-primary hover:underline", children: t("footer.signInCta") }) : /* @__PURE__ */ jsx7(
           "a",
           {
             href: signInLink,
@@ -1556,34 +1311,143 @@ var SignUpPage = ({
         )
       ] }),
       children: [
-        /* @__PURE__ */ jsx11(
-          SignUp,
-          {
-            onSubmit: handleSubmit,
-            isLoading: isLoading || signUpMutation.isPending,
-            initialIdentifier
-          }
-        ),
-        errorContent && /* @__PURE__ */ jsxs9(Alert4, { variant: "destructive", className: "mt-4", children: [
-          /* @__PURE__ */ jsx11(IconAlertCircle4, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx11(AlertTitle4, { children: errorContent.title }),
-          /* @__PURE__ */ jsx11(AlertDescription4, { children: errorContent.description })
+        /* @__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(
+            Button4,
+            {
+              type: "submit",
+              form: "sign-up-form",
+              className: "w-full",
+              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 }),
+          /* @__PURE__ */ jsx7(AlertDescription4, { children: errorContent.description })
         ] })
       ]
     }
   );
 };
 
-// src/components/auth/pages/verify-email-page.tsx
-import {
-  Alert as Alert5,
-  AlertDescription as AlertDescription5,
-  AlertTitle as AlertTitle5
-} from "@mesob/ui/components/alert";
-import { toast as toast5 } from "@mesob/ui/components/sonner";
-import { IconAlertCircle as IconAlertCircle5 } from "@tabler/icons-react";
-import { useEffect as useEffect9, useState as useState10 } from "react";
-
 // src/components/auth/verification-form.tsx
 import { zodResolver as zodResolver5 } from "@hookform/resolvers/zod";
 import { Button as Button6 } from "@mesob/ui/components/button";
@@ -1600,17 +1464,17 @@ import { z as z5 } from "zod";
 // src/components/auth/countdown.tsx
 import { Button as Button5 } from "@mesob/ui/components/button";
 import { Spinner as Spinner4 } from "@mesob/ui/components/spinner";
-import { useEffect as useEffect8, useState as useState9 } from "react";
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { useEffect as useEffect5, useState as useState6 } from "react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var Countdown = ({
   initialSeconds = 60,
   onResend,
   resending = false
 }) => {
   const t = useTranslator("Common");
-  const [seconds, setSeconds] = useState9(initialSeconds);
-  const [isResending, setIsResending] = useState9(false);
-  useEffect8(() => {
+  const [seconds, setSeconds] = useState6(initialSeconds);
+  const [isResending, setIsResending] = useState6(false);
+  useEffect5(() => {
     if (seconds <= 0) {
       return;
     }
@@ -1636,16 +1500,16 @@ var Countdown = ({
     }
   };
   if (seconds > 0) {
-    return /* @__PURE__ */ jsx12(Button5, { variant: "ghost", disabled: true, children: t("resendIn", { seconds }) });
+    return /* @__PURE__ */ jsx8(Button5, { variant: "ghost", disabled: true, children: t("resendIn", { seconds }) });
   }
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs6(
     Button5,
     {
       variant: "ghost",
       onClick: handleResend,
       disabled: isResending || resending,
       children: [
-        isResending || resending && /* @__PURE__ */ jsx12(Spinner4, {}),
+        isResending || resending && /* @__PURE__ */ jsx8(Spinner4, {}),
         t("resend")
       ]
     }
@@ -1653,7 +1517,7 @@ var Countdown = ({
 };
 
 // src/components/auth/verification-form.tsx
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var verificationSchema = (t) => z5.object({
   code: z5.string().length(6, t("form.codeLength"))
 });
@@ -1672,14 +1536,14 @@ var VerificationForm = ({
   const handleSubmit = form.handleSubmit(async (values) => {
     await onSubmit(values);
   });
-  return /* @__PURE__ */ jsxs11("form", { id: "verification-form", onSubmit: handleSubmit, children: [
-    /* @__PURE__ */ jsx13(FieldGroup5, { children: /* @__PURE__ */ jsx13(
+  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__ */ jsxs11(Field5, { "data-invalid": fieldState.invalid, children: [
-          /* @__PURE__ */ jsx13("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx13(
+        render: ({ field, fieldState }) => /* @__PURE__ */ jsxs7(Field5, { "data-invalid": fieldState.invalid, children: [
+          /* @__PURE__ */ jsx9("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx9(
             InputOTP2,
             {
               maxLength: 6,
@@ -1690,30 +1554,30 @@ var VerificationForm = ({
               onBlur: field.onBlur,
               containerClassName: "gap-4 justify-center mb-2 flex items-center",
               "aria-invalid": fieldState.invalid,
-              children: /* @__PURE__ */ jsxs11(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__ */ jsx13(InputOTPSlot2, { className: "h-12", index: 0 }),
-                /* @__PURE__ */ jsx13(InputOTPSlot2, { className: "h-12", index: 1 }),
-                /* @__PURE__ */ jsx13(InputOTPSlot2, { className: "h-12", index: 2 }),
-                /* @__PURE__ */ jsx13(InputOTPSlot2, { className: "h-12", index: 3 }),
-                /* @__PURE__ */ jsx13(InputOTPSlot2, { className: "h-12", index: 4 }),
-                /* @__PURE__ */ jsx13(InputOTPSlot2, { className: "h-12", index: 5 })
+              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 })
               ] })
             }
           ) }),
-          fieldState.invalid && /* @__PURE__ */ jsx13(FieldError5, { errors: [fieldState.error] })
+          fieldState.invalid && /* @__PURE__ */ jsx9(FieldError5, { errors: [fieldState.error] })
         ] })
       }
     ) }),
-    /* @__PURE__ */ jsxs11("div", { className: "flex justify-between items-center mt-4", children: [
-      /* @__PURE__ */ jsx13(Countdown, { onResend, resending: isLoading }),
-      /* @__PURE__ */ jsxs11(
+    /* @__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__ */ jsx13(Spinner5, {}),
+            isLoading && /* @__PURE__ */ jsx9(Spinner5, {}),
             t("form.confirm")
           ]
         }
@@ -1722,23 +1586,31 @@ var VerificationForm = ({
   ] });
 };
 
-// src/components/auth/pages/verify-email-page.tsx
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
-var VerifyEmailPage = ({
-  verificationId,
-  email,
-  redirectUrl
-}) => {
-  const { hooks, setAuth } = useApi();
-  const { config } = useConfig();
-  const t = createTranslator(config.messages || {}, "Auth.verification");
-  const common = createTranslator(config.messages || {}, "Common");
-  const footer = createTranslator(
-    config.messages || {},
-    "Auth.forgotPassword.footer"
-  );
-  const [isLoading, setIsLoading] = useState10(false);
-  const [error, setError] = useState10(null);
+// src/components/auth/verify-email.tsx
+import {
+  Alert as Alert5,
+  AlertDescription as AlertDescription5,
+  AlertTitle as AlertTitle5
+} from "@mesob/ui/components/alert";
+import { useMesob as useMesob5 } from "@mesob/ui/components/mesob-context";
+import { IconAlertCircle as IconAlertCircle5 } from "@tabler/icons-react";
+import { useEffect as useEffect6, useState as useState7 } from "react";
+import { toast as toast5 } from "sonner";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var VerifyEmail = ({
+  verificationId,
+  email,
+  redirectUrl
+}) => {
+  const { hooks, setAuth } = useApi();
+  const { config } = useConfig();
+  const mesob = useMesob5();
+  const t = useTranslator("Auth.verification");
+  const common = useTranslator("Common");
+  const footer = useTranslator("Auth.forgotPassword.footer");
+  const Link3 = mesob?.linkComponent ?? config.navigation?.linkComponent;
+  const [isLoading, setIsLoading] = useState7(false);
+  const [error, setError] = useState7(null);
   const verifyEmailMutation = hooks.useMutation(
     "post",
     "/email/verification/confirm"
@@ -1748,7 +1620,6 @@ var VerifyEmailPage = ({
     "/email/verification/request"
   );
   const signInLink = config.navigation?.links?.signIn || "/auth/sign-in";
-  const Link = config.navigation?.linkComponent;
   const onNavigate = config.navigation?.onNavigate || ((path) => {
     if (typeof window !== "undefined") {
       window.location.href = path;
@@ -1756,7 +1627,7 @@ var VerifyEmailPage = ({
   });
   const logoImage = config.ui.logoImage;
   const defaultRedirect = redirectUrl || config.navigation?.defaultRedirectUrl || "/";
-  useEffect9(() => {
+  useEffect6(() => {
     if (error) {
       toast5.error(error.title || "Error", {
         description: error.description
@@ -1813,12 +1684,12 @@ var VerifyEmailPage = ({
     }
   };
   if (!verificationId) {
-    return /* @__PURE__ */ jsx14(
-      AuthPageLayout,
+    return /* @__PURE__ */ jsx10(
+      AuthLayout,
       {
         title: common("invalidLinkTitle"),
         description: common("invalidLinkDescription"),
-        footer: Link ? /* @__PURE__ */ jsx14(Link, { href: signInLink, className: "text-primary hover:underline", children: footer("backToSignIn") }) : /* @__PURE__ */ jsx14(
+        footer: Link3 ? /* @__PURE__ */ jsx10(Link3, { href: signInLink, className: "text-primary hover:underline", children: footer("backToSignIn") }) : /* @__PURE__ */ jsx10(
           "a",
           {
             href: signInLink,
@@ -1830,7 +1701,7 @@ var VerifyEmailPage = ({
             children: footer("backToSignIn")
           }
         ),
-        children: /* @__PURE__ */ jsx14("div", {})
+        children: /* @__PURE__ */ jsx10("div", {})
       }
     );
   }
@@ -1842,13 +1713,13 @@ var VerifyEmailPage = ({
       errorContent = error;
     }
   }
-  return /* @__PURE__ */ jsxs12(
-    AuthPageLayout,
+  return /* @__PURE__ */ jsxs8(
+    AuthLayout,
     {
       title: t("email.title"),
       description: t("email.description"),
       logoImage,
-      footer: Link ? /* @__PURE__ */ jsx14(Link, { href: signInLink, className: "text-primary hover:underline", children: footer("backToSignIn") }) : /* @__PURE__ */ jsx14(
+      footer: Link3 ? /* @__PURE__ */ jsx10(Link3, { href: signInLink, className: "text-primary hover:underline", children: footer("backToSignIn") }) : /* @__PURE__ */ jsx10(
         "a",
         {
           href: signInLink,
@@ -1861,7 +1732,7 @@ var VerifyEmailPage = ({
         }
       ),
       children: [
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx10(
           VerificationForm,
           {
             verificationId,
@@ -1871,27 +1742,28 @@ var VerifyEmailPage = ({
             error
           }
         ),
-        errorContent && /* @__PURE__ */ jsxs12(Alert5, { variant: "destructive", className: "mt-4", children: [
-          /* @__PURE__ */ jsx14(IconAlertCircle5, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx14(AlertTitle5, { children: errorContent.title }),
-          /* @__PURE__ */ jsx14(AlertDescription5, { children: errorContent.description })
+        errorContent && /* @__PURE__ */ jsxs8(Alert5, { variant: "destructive", className: "mt-4", children: [
+          /* @__PURE__ */ jsx10(IconAlertCircle5, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx10(AlertTitle5, { children: errorContent.title }),
+          /* @__PURE__ */ jsx10(AlertDescription5, { children: errorContent.description })
         ] })
       ]
     }
   );
 };
 
-// src/components/auth/pages/verify-phone-page.tsx
+// src/components/auth/verify-phone.tsx
 import {
   Alert as Alert6,
   AlertDescription as AlertDescription6,
   AlertTitle as AlertTitle6
 } from "@mesob/ui/components/alert";
-import { toast as toast6 } from "@mesob/ui/components/sonner";
+import { Link as Link2 } from "@mesob/ui/components/link";
 import { IconAlertCircle as IconAlertCircle6 } from "@tabler/icons-react";
-import { useEffect as useEffect10, useState as useState11 } from "react";
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
-var VerifyPhonePage = ({
+import { useEffect as useEffect7, useState as useState8 } from "react";
+import { toast as toast6 } from "sonner";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var VerifyPhone = ({
   verificationId,
   context,
   phone = "",
@@ -1899,14 +1771,11 @@ var VerifyPhonePage = ({
 }) => {
   const { hooks, refresh, setAuth } = useApi();
   const { config } = useConfig();
-  const t = createTranslator(config.messages || {}, "Auth.verification");
-  const common = createTranslator(config.messages || {}, "Common");
-  const footer = createTranslator(
-    config.messages || {},
-    "Auth.forgotPassword.footer"
-  );
-  const [isLoading, setIsLoading] = useState11(false);
-  const [error, setError] = useState11(null);
+  const t = useTranslator("Auth.verification");
+  const common = useTranslator("Common");
+  const footer = useTranslator("Auth.forgotPassword.footer");
+  const [isLoading, setIsLoading] = useState8(false);
+  const [error, setError] = useState8(null);
   const verifyPhoneMutation = hooks.useMutation(
     "post",
     "/phone/verification/confirm"
@@ -1916,7 +1785,6 @@ var VerifyPhonePage = ({
     "/phone/verification/request"
   );
   const signInLink = config.navigation?.links?.signIn || "/auth/sign-in";
-  const Link = config.navigation?.linkComponent;
   const onNavigate = config.navigation?.onNavigate || ((path) => {
     if (typeof window !== "undefined") {
       window.location.href = path;
@@ -1924,7 +1792,7 @@ var VerifyPhonePage = ({
   });
   const logoImage = config.ui.logoImage;
   const defaultRedirect = redirectUrl || config.navigation?.defaultRedirectUrl || "/";
-  useEffect10(() => {
+  useEffect7(() => {
     if (error) {
       toast6.error(error.title || "Error", {
         description: error.description
@@ -1994,24 +1862,13 @@ var VerifyPhonePage = ({
     }
   };
   if (!verificationId) {
-    return /* @__PURE__ */ jsx15(
-      AuthPageLayout,
+    return /* @__PURE__ */ jsx11(
+      AuthLayout,
       {
         title: common("invalidLinkTitle"),
         description: common("invalidLinkDescription"),
-        footer: Link ? /* @__PURE__ */ jsx15(Link, { href: signInLink, className: "text-primary hover:underline", children: footer("backToSignIn") }) : /* @__PURE__ */ jsx15(
-          "a",
-          {
-            href: signInLink,
-            onClick: (e) => {
-              e.preventDefault();
-              onNavigate(signInLink);
-            },
-            className: "text-primary hover:underline",
-            children: footer("backToSignIn")
-          }
-        ),
-        children: /* @__PURE__ */ jsx15("div", {})
+        footer: /* @__PURE__ */ jsx11(Link2, { href: signInLink, className: "text-primary hover:underline", children: footer("backToSignIn") }),
+        children: /* @__PURE__ */ jsx11("div", {})
       }
     );
   }
@@ -2023,15 +1880,15 @@ var VerifyPhonePage = ({
       errorContent = error;
     }
   }
-  return /* @__PURE__ */ jsxs13(
-    AuthPageLayout,
+  return /* @__PURE__ */ jsxs9(
+    AuthLayout,
     {
       title: t("phone.title"),
       description: t("phone.description", {
         target: phone || t("phone.missingPhone")
       }),
       logoImage,
-      footer: Link ? /* @__PURE__ */ jsx15(Link, { href: signInLink, className: "text-primary hover:underline", children: footer("backToSignIn") }) : /* @__PURE__ */ jsx15(
+      footer: Link2 ? /* @__PURE__ */ jsx11(Link2, { href: signInLink, className: "text-primary hover:underline", children: footer("backToSignIn") }) : /* @__PURE__ */ jsx11(
         "a",
         {
           href: signInLink,
@@ -2044,7 +1901,7 @@ var VerifyPhonePage = ({
         }
       ),
       children: [
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx11(
           VerificationForm,
           {
             verificationId,
@@ -2054,10 +1911,10 @@ var VerifyPhonePage = ({
             error
           }
         ),
-        errorContent && /* @__PURE__ */ jsxs13(Alert6, { variant: "destructive", className: "mt-4", children: [
-          /* @__PURE__ */ jsx15(IconAlertCircle6, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx15(AlertTitle6, { children: errorContent.title }),
-          /* @__PURE__ */ jsx15(AlertDescription6, { children: errorContent.description })
+        errorContent && /* @__PURE__ */ jsxs9(Alert6, { variant: "destructive", className: "mt-4", children: [
+          /* @__PURE__ */ jsx11(IconAlertCircle6, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx11(AlertTitle6, { children: errorContent.title }),
+          /* @__PURE__ */ jsx11(AlertDescription6, { children: errorContent.description })
         ] })
       ]
     }
@@ -2067,7 +1924,7 @@ var VerifyPhonePage = ({
 // src/components/error-boundary.tsx
 import { Button as Button7 } from "@mesob/ui/components/button";
 import { Component } from "react";
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var ErrorBoundary = class extends Component {
   constructor(props) {
     super(props);
@@ -2089,30 +1946,31 @@ var ErrorBoundary = class extends Component {
           reset: this.reset
         });
       }
-      return /* @__PURE__ */ jsx16(ErrorFallback, { error: this.state.error, reset: this.reset });
+      return /* @__PURE__ */ jsx12(ErrorFallback, { error: this.state.error, reset: this.reset });
     }
     return this.props.children;
   }
 };
 function ErrorFallback({ error, reset }) {
-  return /* @__PURE__ */ jsx16("div", { className: "flex flex-col items-center justify-center min-h-[400px] p-6", children: /* @__PURE__ */ jsxs14("div", { className: "max-w-md w-full space-y-4 text-center", children: [
-    /* @__PURE__ */ jsxs14("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx16("h2", { className: "text-2xl font-bold text-destructive", children: "Something went wrong" }),
-      /* @__PURE__ */ jsx16("p", { className: "text-muted-foreground", children: error.message || "An unexpected error occurred" })
+  return /* @__PURE__ */ jsx12("div", { className: "flex flex-col items-center justify-center min-h-[400px] p-6", children: /* @__PURE__ */ jsxs10("div", { className: "max-w-md w-full space-y-4 text-center", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx12("h2", { className: "text-2xl font-bold text-destructive", children: "Something went wrong" }),
+      /* @__PURE__ */ jsx12("p", { className: "text-muted-foreground", children: error.message || "An unexpected error occurred" })
     ] }),
-    /* @__PURE__ */ jsx16(Button7, { onClick: reset, variant: "outline", children: "Try again" })
+    /* @__PURE__ */ jsx12(Button7, { onClick: reset, variant: "outline", children: "Try again" })
   ] }) });
 }
 function AuthErrorBoundary({ children }) {
-  return /* @__PURE__ */ jsx16(ErrorBoundary, { children });
+  return /* @__PURE__ */ jsx12(ErrorBoundary, { children });
 }
 
-// src/components/iam/permissions/permissions-page.tsx
+// src/components/iam/permissions.tsx
 import { Badge } from "@mesob/ui/components/badge";
 import { Button as Button8 } from "@mesob/ui/components/button";
-import { useState as useState12 } from "react";
+import { useLocale } from "next-intl";
+import { useState as useState9 } from "react";
 
-// src/components/shared/data-table/data-table.tsx
+// src/components/shared/data-table.tsx
 import {
   Table,
   TableBody,
@@ -2124,7 +1982,7 @@ import {
 
 // src/components/skeletons/table-skeleton.tsx
 import { Skeleton } from "@mesob/ui/components/skeleton";
-import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 function TableSkeleton({ columns = 5, rows = 10 }) {
   const headerKeys = Array.from({ length: columns }, (_, i) => `header-${i}`);
   const rowKeys = Array.from({ length: rows }, (_, i) => `row-${i}`);
@@ -2132,32 +1990,32 @@ function TableSkeleton({ columns = 5, rows = 10 }) {
     { length: rows },
     (_, rowIdx) => Array.from({ length: columns }, (_2, colIdx) => `cell-${rowIdx}-${colIdx}`)
   );
-  return /* @__PURE__ */ jsxs15("div", { className: "w-full space-y-4", children: [
-    /* @__PURE__ */ jsxs15("div", { className: "flex justify-between items-center", children: [
-      /* @__PURE__ */ jsx17(Skeleton, { className: "h-8 w-48" }),
-      /* @__PURE__ */ jsx17(Skeleton, { className: "h-10 w-32" })
+  return /* @__PURE__ */ jsxs11("div", { className: "w-full space-y-4", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsx13(Skeleton, { className: "h-8 w-48" }),
+      /* @__PURE__ */ jsx13(Skeleton, { className: "h-10 w-32" })
     ] }),
-    /* @__PURE__ */ jsxs15("div", { className: "flex gap-4", children: [
-      /* @__PURE__ */ jsx17(Skeleton, { className: "h-10 flex-1 max-w-sm" }),
-      /* @__PURE__ */ jsx17(Skeleton, { className: "h-10 w-24" }),
-      /* @__PURE__ */ jsx17(Skeleton, { className: "h-10 w-24" })
+    /* @__PURE__ */ jsxs11("div", { className: "flex gap-4", children: [
+      /* @__PURE__ */ jsx13(Skeleton, { className: "h-10 flex-1 max-w-sm" }),
+      /* @__PURE__ */ jsx13(Skeleton, { className: "h-10 w-24" }),
+      /* @__PURE__ */ jsx13(Skeleton, { className: "h-10 w-24" })
     ] }),
-    /* @__PURE__ */ jsxs15("div", { className: "border rounded-lg overflow-hidden", children: [
-      /* @__PURE__ */ jsx17("div", { className: "flex gap-4 p-4 bg-muted", children: headerKeys.map((key) => /* @__PURE__ */ jsx17(Skeleton, { className: "h-4 flex-1" }, key)) }),
-      rowKeys.map((rowKey, rowIdx) => /* @__PURE__ */ jsx17("div", { className: "flex gap-4 p-4 border-t", children: cellKeys[rowIdx]?.map((cellKey) => /* @__PURE__ */ jsx17(Skeleton, { className: "h-4 flex-1" }, cellKey)) }, rowKey))
+    /* @__PURE__ */ jsxs11("div", { className: "border rounded-lg overflow-hidden", children: [
+      /* @__PURE__ */ jsx13("div", { className: "flex gap-4 p-4 bg-muted", children: headerKeys.map((key) => /* @__PURE__ */ jsx13(Skeleton, { className: "h-4 flex-1" }, key)) }),
+      rowKeys.map((rowKey, rowIdx) => /* @__PURE__ */ jsx13("div", { className: "flex gap-4 p-4 border-t", children: cellKeys[rowIdx]?.map((cellKey) => /* @__PURE__ */ jsx13(Skeleton, { className: "h-4 flex-1" }, cellKey)) }, rowKey))
     ] }),
-    /* @__PURE__ */ jsxs15("div", { className: "flex justify-between items-center", children: [
-      /* @__PURE__ */ jsx17(Skeleton, { className: "h-4 w-32" }),
-      /* @__PURE__ */ jsxs15("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx17(Skeleton, { className: "h-10 w-20" }),
-        /* @__PURE__ */ jsx17(Skeleton, { className: "h-10 w-20" })
+    /* @__PURE__ */ jsxs11("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsx13(Skeleton, { className: "h-4 w-32" }),
+      /* @__PURE__ */ jsxs11("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx13(Skeleton, { className: "h-10 w-20" }),
+        /* @__PURE__ */ jsx13(Skeleton, { className: "h-10 w-20" })
       ] })
     ] })
   ] });
 }
 
-// src/components/shared/data-table/data-table.tsx
-import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+// src/components/shared/data-table.tsx
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function DataTable({
   data,
   columns,
@@ -2167,24 +2025,24 @@ function DataTable({
   actions
 }) {
   if (isLoading) {
-    return /* @__PURE__ */ jsx18(TableSkeleton, { columns: columns.length, rows: 5 });
+    return /* @__PURE__ */ jsx14(TableSkeleton, { columns: columns.length, rows: 5 });
   }
   if (data.length === 0) {
-    return /* @__PURE__ */ jsxs16("div", { className: "flex flex-col items-center justify-center min-h-[400px] p-6", children: [
-      /* @__PURE__ */ jsx18("p", { className: "text-muted-foreground", children: emptyMessage }),
-      actions && /* @__PURE__ */ jsx18("div", { className: "mt-4", children: actions })
+    return /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-center justify-center min-h-[400px] p-6", children: [
+      /* @__PURE__ */ jsx14("p", { className: "text-muted-foreground", children: emptyMessage }),
+      actions && /* @__PURE__ */ jsx14("div", { className: "mt-4", children: actions })
     ] });
   }
-  return /* @__PURE__ */ jsxs16("div", { className: "w-full space-y-4", children: [
-    actions && /* @__PURE__ */ jsx18("div", { className: "flex justify-end", children: actions }),
-    /* @__PURE__ */ jsx18("div", { className: "border rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs16(Table, { children: [
-      /* @__PURE__ */ jsx18(TableHeader, { children: /* @__PURE__ */ jsx18(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx18(TableHead, { children: column.header }, column.key)) }) }),
-      /* @__PURE__ */ jsx18(TableBody, { children: data.map((row) => /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsxs12("div", { className: "w-full space-y-4", children: [
+    actions && /* @__PURE__ */ jsx14("div", { className: "flex justify-end", children: actions }),
+    /* @__PURE__ */ jsx14("div", { className: "border rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs12(Table, { children: [
+      /* @__PURE__ */ jsx14(TableHeader, { children: /* @__PURE__ */ jsx14(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx14(TableHead, { children: column.header }, column.key)) }) }),
+      /* @__PURE__ */ jsx14(TableBody, { children: data.map((row) => /* @__PURE__ */ jsx14(
         TableRow,
         {
           onClick: () => onRowClick?.(row),
           className: onRowClick ? "cursor-pointer hover:bg-muted/50" : "",
-          children: columns.map((column) => /* @__PURE__ */ jsx18(TableCell, { children: column.cell(row) }, `${row.id}-${column.key}`))
+          children: columns.map((column) => /* @__PURE__ */ jsx14(TableCell, { children: column.cell(row) }, `${row.id}-${column.key}`))
         },
         row.id
       )) })
@@ -2192,11 +2050,24 @@ function DataTable({
   ] });
 }
 
-// src/components/iam/permissions/permissions-page.tsx
-import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
-function PermissionsPage() {
+// src/components/iam/permissions.tsx
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+function getTranslation(value, locale) {
+  if (!value) {
+    return "";
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  if (typeof value === "object") {
+    return value[locale] ?? value.en ?? value.am ?? "";
+  }
+  return "";
+}
+function Permissions() {
   const { hooks } = useApi();
-  const [page, setPage] = useState12(1);
+  const locale = useLocale();
+  const [page, setPage] = useState9(1);
   const limit = 20;
   const { data, isLoading, error } = hooks.useQuery("get", "/permissions", {
     params: {
@@ -2210,44 +2081,44 @@ function PermissionsPage() {
     {
       key: "name",
       header: "Permission",
-      cell: (permission) => /* @__PURE__ */ jsxs17("div", { children: [
-        /* @__PURE__ */ jsx19("p", { className: "font-medium", children: permission.name }),
-        /* @__PURE__ */ jsx19(Badge, { variant: "outline", className: "mt-1 font-mono text-xs", children: permission.code })
+      cell: (permission) => /* @__PURE__ */ jsxs13("div", { children: [
+        /* @__PURE__ */ jsx15("p", { className: "font-medium", children: getTranslation(permission.name, locale) }),
+        /* @__PURE__ */ jsx15(Badge, { variant: "outline", className: "mt-1 font-mono text-xs", children: permission.code })
       ] })
     },
     {
       key: "resource",
       header: "Resource",
-      cell: (permission) => /* @__PURE__ */ jsx19(Badge, { variant: "secondary", children: permission.resource })
+      cell: (permission) => /* @__PURE__ */ jsx15(Badge, { variant: "secondary", children: permission.resource })
     },
     {
       key: "action",
       header: "Action",
-      cell: (permission) => /* @__PURE__ */ jsx19(Badge, { variant: "outline", children: permission.action })
+      cell: (permission) => /* @__PURE__ */ jsx15(Badge, { variant: "outline", children: permission.action })
     },
     {
       key: "description",
       header: "Description",
-      cell: (permission) => /* @__PURE__ */ jsx19("p", { className: "text-sm text-muted-foreground max-w-xs truncate", children: permission.description })
+      cell: (permission) => /* @__PURE__ */ jsx15("p", { className: "text-sm text-muted-foreground max-w-xs truncate", children: getTranslation(permission.description, locale) })
     },
     {
       key: "actions",
       header: "Actions",
-      cell: (_permission) => /* @__PURE__ */ jsx19(Button8, { variant: "outline", size: "sm", children: "Edit" })
+      cell: (_permission) => /* @__PURE__ */ jsx15(Button8, { variant: "outline", size: "sm", children: "Edit" })
     }
   ];
   if (error) {
-    return /* @__PURE__ */ jsx19("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsx19("p", { className: "text-destructive", children: "Error loading permissions" }) });
+    return /* @__PURE__ */ jsx15("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsx15("p", { className: "text-destructive", children: "Error loading permissions" }) });
   }
-  return /* @__PURE__ */ jsxs17("div", { className: "w-full p-6 space-y-4", children: [
-    /* @__PURE__ */ jsxs17("div", { className: "flex justify-between items-center", children: [
-      /* @__PURE__ */ jsxs17("div", { children: [
-        /* @__PURE__ */ jsx19("h1", { className: "text-3xl font-bold", children: "Permissions" }),
-        /* @__PURE__ */ jsx19("p", { className: "text-muted-foreground", children: "Manage system permissions" })
+  return /* @__PURE__ */ jsxs13("div", { className: "w-full p-6 space-y-4", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsxs13("div", { children: [
+        /* @__PURE__ */ jsx15("h1", { className: "text-3xl font-bold", children: "Permissions" }),
+        /* @__PURE__ */ jsx15("p", { className: "text-muted-foreground", children: "Manage system permissions" })
       ] }),
-      /* @__PURE__ */ jsx19(Button8, { children: "Create Permission" })
+      /* @__PURE__ */ jsx15(Button8, { children: "Create Permission" })
     ] }),
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx15(
       DataTable,
       {
         data: data?.permissions || [],
@@ -2256,8 +2127,8 @@ function PermissionsPage() {
         emptyMessage: "No permissions found"
       }
     ),
-    data && "permissions" in data && data.permissions && data.permissions.length >= limit && /* @__PURE__ */ jsxs17("div", { className: "flex justify-between items-center", children: [
-      /* @__PURE__ */ jsx19(
+    data && "permissions" in data && data.permissions && data.permissions.length >= limit && /* @__PURE__ */ jsxs13("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsx15(
         Button8,
         {
           variant: "outline",
@@ -2266,23 +2137,37 @@ function PermissionsPage() {
           children: "Previous"
         }
       ),
-      /* @__PURE__ */ jsxs17("span", { className: "text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs13("span", { className: "text-sm text-muted-foreground", children: [
         "Page ",
         page
       ] }),
-      /* @__PURE__ */ jsx19(Button8, { variant: "outline", onClick: () => setPage(page + 1), children: "Next" })
+      /* @__PURE__ */ jsx15(Button8, { variant: "outline", onClick: () => setPage(page + 1), children: "Next" })
     ] })
   ] });
 }
 
-// src/components/iam/roles/roles-page.tsx
+// src/components/iam/roles.tsx
 import { Badge as Badge2 } from "@mesob/ui/components/badge";
 import { Button as Button9 } from "@mesob/ui/components/button";
-import { useState as useState13 } from "react";
-import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
-function RolesPage() {
+import { useLocale as useLocale2 } from "next-intl";
+import { useState as useState10 } from "react";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+function getTranslation2(value, locale) {
+  if (!value) {
+    return "";
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  if (typeof value === "object") {
+    return value[locale] ?? value.en ?? value.am ?? "";
+  }
+  return "";
+}
+function Roles() {
   const { hooks } = useApi();
-  const [page, setPage] = useState13(1);
+  const locale = useLocale2();
+  const [page, setPage] = useState10(1);
   const limit = 20;
   const { data, isLoading, error } = hooks.useQuery("get", "/roles", {
     params: {
@@ -2296,42 +2181,42 @@ function RolesPage() {
     {
       key: "name",
       header: "Role",
-      cell: (role) => /* @__PURE__ */ jsxs18("div", { children: [
-        /* @__PURE__ */ jsx20("p", { className: "font-medium", children: role.name }),
-        /* @__PURE__ */ jsx20(Badge2, { variant: "outline", className: "mt-1", children: role.code })
+      cell: (role) => /* @__PURE__ */ jsxs14("div", { children: [
+        /* @__PURE__ */ jsx16("p", { className: "font-medium", children: getTranslation2(role.name, locale) }),
+        /* @__PURE__ */ jsx16(Badge2, { variant: "outline", className: "mt-1", children: role.code })
       ] })
     },
     {
       key: "description",
       header: "Description",
-      cell: (role) => /* @__PURE__ */ jsx20("p", { className: "text-sm text-muted-foreground", children: role.description })
+      cell: (role) => /* @__PURE__ */ jsx16("p", { className: "text-sm text-muted-foreground", children: getTranslation2(role.description, locale) })
     },
     {
       key: "createdAt",
       header: "Created",
-      cell: (role) => /* @__PURE__ */ jsx20("p", { className: "text-sm", children: new Date(role.createdAt).toLocaleDateString() })
+      cell: (role) => /* @__PURE__ */ jsx16("p", { className: "text-sm", children: new Date(role.createdAt).toLocaleDateString() })
     },
     {
       key: "actions",
       header: "Actions",
-      cell: (_role) => /* @__PURE__ */ jsxs18("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx20(Button9, { variant: "outline", size: "sm", children: "Permissions" }),
-        /* @__PURE__ */ jsx20(Button9, { variant: "outline", size: "sm", children: "Edit" })
+      cell: (_role) => /* @__PURE__ */ jsxs14("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx16(Button9, { variant: "outline", size: "sm", children: "Permissions" }),
+        /* @__PURE__ */ jsx16(Button9, { variant: "outline", size: "sm", children: "Edit" })
       ] })
     }
   ];
   if (error) {
-    return /* @__PURE__ */ jsx20("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsx20("p", { className: "text-destructive", children: "Error loading roles" }) });
+    return /* @__PURE__ */ jsx16("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsx16("p", { className: "text-destructive", children: "Error loading roles" }) });
   }
-  return /* @__PURE__ */ jsxs18("div", { className: "w-full p-6 space-y-4", children: [
-    /* @__PURE__ */ jsxs18("div", { className: "flex justify-between items-center", children: [
-      /* @__PURE__ */ jsxs18("div", { children: [
-        /* @__PURE__ */ jsx20("h1", { className: "text-3xl font-bold", children: "Roles" }),
-        /* @__PURE__ */ jsx20("p", { className: "text-muted-foreground", children: "Manage user roles" })
+  return /* @__PURE__ */ jsxs14("div", { className: "w-full p-6 space-y-4", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsxs14("div", { children: [
+        /* @__PURE__ */ jsx16("h1", { className: "text-3xl font-bold", children: "Roles" }),
+        /* @__PURE__ */ jsx16("p", { className: "text-muted-foreground", children: "Manage user roles" })
       ] }),
-      /* @__PURE__ */ jsx20(Button9, { children: "Create Role" })
+      /* @__PURE__ */ jsx16(Button9, { children: "Create Role" })
     ] }),
-    /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx16(
       DataTable,
       {
         data: data?.roles || [],
@@ -2340,8 +2225,8 @@ function RolesPage() {
         emptyMessage: "No roles found"
       }
     ),
-    data && "roles" in data && data.roles && data.roles.length >= limit && /* @__PURE__ */ jsxs18("div", { className: "flex justify-between items-center", children: [
-      /* @__PURE__ */ jsx20(
+    data && "roles" in data && data.roles && data.roles.length >= limit && /* @__PURE__ */ jsxs14("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsx16(
         Button9,
         {
           variant: "outline",
@@ -2350,22 +2235,22 @@ function RolesPage() {
           children: "Previous"
         }
       ),
-      /* @__PURE__ */ jsxs18("span", { className: "text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs14("span", { className: "text-sm text-muted-foreground", children: [
         "Page ",
         page
       ] }),
-      /* @__PURE__ */ jsx20(Button9, { variant: "outline", onClick: () => setPage(page + 1), children: "Next" })
+      /* @__PURE__ */ jsx16(Button9, { variant: "outline", onClick: () => setPage(page + 1), children: "Next" })
     ] })
   ] });
 }
 
-// src/components/iam/sessions/sessions-page.tsx
+// src/components/iam/sessions.tsx
 import { Button as Button10 } from "@mesob/ui/components/button";
-import { useState as useState14 } from "react";
-import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
-function SessionsPage() {
+import { useState as useState11 } from "react";
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+function Sessions() {
   const { hooks } = useApi();
-  const [selectedSessionId] = useState14(null);
+  const [selectedSessionId] = useState11(null);
   const { data, isLoading, error, refetch } = hooks.useQuery(
     "get",
     "/sessions"
@@ -2391,30 +2276,30 @@ function SessionsPage() {
     {
       key: "createdAt",
       header: "Created",
-      cell: (session) => /* @__PURE__ */ jsxs19("div", { children: [
-        /* @__PURE__ */ jsx21("p", { className: "text-sm font-medium", children: new Date(session.createdAt).toLocaleDateString() }),
-        /* @__PURE__ */ jsx21("p", { className: "text-xs text-muted-foreground", children: new Date(session.createdAt).toLocaleTimeString() })
+      cell: (session) => /* @__PURE__ */ jsxs15("div", { children: [
+        /* @__PURE__ */ jsx17("p", { className: "text-sm font-medium", children: new Date(session.createdAt).toLocaleDateString() }),
+        /* @__PURE__ */ jsx17("p", { className: "text-xs text-muted-foreground", children: new Date(session.createdAt).toLocaleTimeString() })
       ] })
     },
     {
       key: "expiresAt",
       header: "Expires",
-      cell: (session) => /* @__PURE__ */ jsx21("p", { className: "text-sm", children: new Date(session.expiresAt).toLocaleDateString() })
+      cell: (session) => /* @__PURE__ */ jsx17("p", { className: "text-sm", children: new Date(session.expiresAt).toLocaleDateString() })
     },
     {
       key: "userAgent",
       header: "Device",
-      cell: (session) => /* @__PURE__ */ jsx21("p", { className: "text-sm truncate max-w-xs", children: session.userAgent || "Unknown" })
+      cell: (session) => /* @__PURE__ */ jsx17("p", { className: "text-sm truncate max-w-xs", children: session.userAgent || "Unknown" })
     },
     {
       key: "ip",
       header: "IP Address",
-      cell: (session) => /* @__PURE__ */ jsx21("p", { className: "text-sm font-mono", children: session.ip || "Unknown" })
+      cell: (session) => /* @__PURE__ */ jsx17("p", { className: "text-sm font-mono", children: session.ip || "Unknown" })
     },
     {
       key: "actions",
       header: "Actions",
-      cell: (session) => /* @__PURE__ */ jsx21(
+      cell: (session) => /* @__PURE__ */ jsx17(
         Button10,
         {
           variant: "destructive",
@@ -2427,14 +2312,14 @@ function SessionsPage() {
     }
   ];
   if (error) {
-    return /* @__PURE__ */ jsx21("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsx21("p", { className: "text-destructive", children: "Error loading sessions" }) });
+    return /* @__PURE__ */ jsx17("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsx17("p", { className: "text-destructive", children: "Error loading sessions" }) });
   }
-  return /* @__PURE__ */ jsxs19("div", { className: "w-full p-6 space-y-4", children: [
-    /* @__PURE__ */ jsxs19("div", { children: [
-      /* @__PURE__ */ jsx21("h1", { className: "text-3xl font-bold", children: "Sessions" }),
-      /* @__PURE__ */ jsx21("p", { className: "text-muted-foreground", children: "View and manage active sessions" })
+  return /* @__PURE__ */ jsxs15("div", { className: "w-full p-6 space-y-4", children: [
+    /* @__PURE__ */ jsxs15("div", { children: [
+      /* @__PURE__ */ jsx17("h1", { className: "text-3xl font-bold", children: "Sessions" }),
+      /* @__PURE__ */ jsx17("p", { className: "text-muted-foreground", children: "View and manage active sessions" })
     ] }),
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx17(
       DataTable,
       {
         data: data?.sessions || [],
@@ -2446,14 +2331,14 @@ function SessionsPage() {
   ] });
 }
 
-// src/components/iam/tenants/tenants-page.tsx
+// src/components/iam/tenants.tsx
 import { Badge as Badge3 } from "@mesob/ui/components/badge";
 import { Button as Button11 } from "@mesob/ui/components/button";
-import { useState as useState15 } from "react";
-import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
-function TenantsPage() {
+import { useState as useState12 } from "react";
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+function Tenants() {
   const { hooks } = useApi();
-  const [page, setPage] = useState15(1);
+  const [page, setPage] = useState12(1);
   const limit = 20;
   const { data, isLoading, error } = hooks.useQuery("get", "/tenants", {
     params: {
@@ -2467,9 +2352,9 @@ function TenantsPage() {
     {
       key: "name",
       header: "Tenant",
-      cell: (tenant) => /* @__PURE__ */ jsxs20("div", { children: [
-        /* @__PURE__ */ jsx22("p", { className: "font-medium", children: tenant.name }),
-        /* @__PURE__ */ jsxs20("p", { className: "text-sm text-muted-foreground", children: [
+      cell: (tenant) => /* @__PURE__ */ jsxs16("div", { children: [
+        /* @__PURE__ */ jsx18("p", { className: "font-medium", children: tenant.name }),
+        /* @__PURE__ */ jsxs16("p", { className: "text-sm text-muted-foreground", children: [
           "/",
           tenant.slug
         ] })
@@ -2478,34 +2363,34 @@ function TenantsPage() {
     {
       key: "status",
       header: "Status",
-      cell: (tenant) => /* @__PURE__ */ jsx22(Badge3, { variant: tenant.status === "active" ? "default" : "secondary", children: tenant.status })
+      cell: (tenant) => /* @__PURE__ */ jsx18(Badge3, { variant: tenant.status === "active" ? "default" : "secondary", children: tenant.status })
     },
     {
       key: "createdAt",
       header: "Created",
-      cell: (tenant) => /* @__PURE__ */ jsx22("p", { className: "text-sm", children: new Date(tenant.createdAt).toLocaleDateString() })
+      cell: (tenant) => /* @__PURE__ */ jsx18("p", { className: "text-sm", children: new Date(tenant.createdAt).toLocaleDateString() })
     },
     {
       key: "actions",
       header: "Actions",
-      cell: (_tenant) => /* @__PURE__ */ jsxs20("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx22(Button11, { variant: "outline", size: "sm", children: "Domains" }),
-        /* @__PURE__ */ jsx22(Button11, { variant: "outline", size: "sm", children: "Edit" })
+      cell: (_tenant) => /* @__PURE__ */ jsxs16("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx18(Button11, { variant: "outline", size: "sm", children: "Domains" }),
+        /* @__PURE__ */ jsx18(Button11, { variant: "outline", size: "sm", children: "Edit" })
       ] })
     }
   ];
   if (error) {
-    return /* @__PURE__ */ jsx22("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsx22("p", { className: "text-destructive", children: "Error loading tenants" }) });
+    return /* @__PURE__ */ jsx18("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsx18("p", { className: "text-destructive", children: "Error loading tenants" }) });
   }
-  return /* @__PURE__ */ jsxs20("div", { className: "w-full p-6 space-y-4", children: [
-    /* @__PURE__ */ jsxs20("div", { className: "flex justify-between items-center", children: [
-      /* @__PURE__ */ jsxs20("div", { children: [
-        /* @__PURE__ */ jsx22("h1", { className: "text-3xl font-bold", children: "Tenants" }),
-        /* @__PURE__ */ jsx22("p", { className: "text-muted-foreground", children: "Manage tenant organizations" })
+  return /* @__PURE__ */ jsxs16("div", { className: "w-full p-6 space-y-4", children: [
+    /* @__PURE__ */ jsxs16("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsxs16("div", { children: [
+        /* @__PURE__ */ jsx18("h1", { className: "text-3xl font-bold", children: "Tenants" }),
+        /* @__PURE__ */ jsx18("p", { className: "text-muted-foreground", children: "Manage tenant organizations" })
       ] }),
-      /* @__PURE__ */ jsx22(Button11, { children: "Create Tenant" })
+      /* @__PURE__ */ jsx18(Button11, { children: "Create Tenant" })
     ] }),
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx18(
       DataTable,
       {
         data: data?.tenants || [],
@@ -2514,8 +2399,8 @@ function TenantsPage() {
         emptyMessage: "No tenants found"
       }
     ),
-    data && "tenants" in data && data.tenants && data.tenants.length >= limit && /* @__PURE__ */ jsxs20("div", { className: "flex justify-between items-center", children: [
-      /* @__PURE__ */ jsx22(
+    data && "tenants" in data && data.tenants && data.tenants.length >= limit && /* @__PURE__ */ jsxs16("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsx18(
         Button11,
         {
           variant: "outline",
@@ -2524,23 +2409,23 @@ function TenantsPage() {
           children: "Previous"
         }
       ),
-      /* @__PURE__ */ jsxs20("span", { className: "text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs16("span", { className: "text-sm text-muted-foreground", children: [
         "Page ",
         page
       ] }),
-      /* @__PURE__ */ jsx22(Button11, { variant: "outline", onClick: () => setPage(page + 1), children: "Next" })
+      /* @__PURE__ */ jsx18(Button11, { variant: "outline", onClick: () => setPage(page + 1), children: "Next" })
     ] })
   ] });
 }
 
-// src/components/iam/users/users-page.tsx
+// src/components/iam/users.tsx
 import { Badge as Badge4 } from "@mesob/ui/components/badge";
 import { Button as Button12 } from "@mesob/ui/components/button";
-import { useState as useState16 } from "react";
-import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
-function UsersPage() {
+import { useState as useState13 } from "react";
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+function Users() {
   const { hooks } = useApi();
-  const [page, setPage] = useState16(1);
+  const [page, setPage] = useState13(1);
   const limit = 20;
   const { data, isLoading, error } = hooks.useQuery("get", "/users", {
     params: {
@@ -2554,9 +2439,9 @@ function UsersPage() {
     {
       key: "fullName",
       header: "Name",
-      cell: (user) => /* @__PURE__ */ jsxs21("div", { children: [
-        /* @__PURE__ */ jsx23("p", { className: "font-medium", children: user.fullName }),
-        /* @__PURE__ */ jsxs21("p", { className: "text-sm text-muted-foreground", children: [
+      cell: (user) => /* @__PURE__ */ jsxs17("div", { children: [
+        /* @__PURE__ */ jsx19("p", { className: "font-medium", children: user.fullName }),
+        /* @__PURE__ */ jsxs17("p", { className: "text-sm text-muted-foreground", children: [
           "@",
           user.handle
         ] })
@@ -2565,43 +2450,43 @@ function UsersPage() {
     {
       key: "contact",
       header: "Contact",
-      cell: (user) => /* @__PURE__ */ jsxs21("div", { className: "space-y-1", children: [
-        user.email && /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx23("p", { className: "text-sm", children: user.email }),
-          user.emailVerified && /* @__PURE__ */ jsx23(Badge4, { variant: "outline", className: "text-xs", children: "Verified" })
+      cell: (user) => /* @__PURE__ */ jsxs17("div", { className: "space-y-1", children: [
+        user.email && /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx19("p", { className: "text-sm", children: user.email }),
+          user.emailVerified && /* @__PURE__ */ jsx19(Badge4, { variant: "outline", className: "text-xs", children: "Verified" })
         ] }),
-        user.phone && /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx23("p", { className: "text-sm", children: user.phone }),
-          user.phoneVerified && /* @__PURE__ */ jsx23(Badge4, { variant: "outline", className: "text-xs", children: "Verified" })
+        user.phone && /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx19("p", { className: "text-sm", children: user.phone }),
+          user.phoneVerified && /* @__PURE__ */ jsx19(Badge4, { variant: "outline", className: "text-xs", children: "Verified" })
         ] })
       ] })
     },
     {
       key: "lastSignIn",
       header: "Last Sign In",
-      cell: (user) => /* @__PURE__ */ jsx23("p", { className: "text-sm", children: user.lastSignInAt ? new Date(user.lastSignInAt).toLocaleDateString() : "Never" })
+      cell: (user) => /* @__PURE__ */ jsx19("p", { className: "text-sm", children: user.lastSignInAt ? new Date(user.lastSignInAt).toLocaleDateString() : "Never" })
     },
     {
       key: "actions",
       header: "Actions",
-      cell: (_user) => /* @__PURE__ */ jsxs21("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx23(Button12, { variant: "outline", size: "sm", children: "View" }),
-        /* @__PURE__ */ jsx23(Button12, { variant: "outline", size: "sm", children: "Edit" })
+      cell: (_user) => /* @__PURE__ */ jsxs17("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx19(Button12, { variant: "outline", size: "sm", children: "View" }),
+        /* @__PURE__ */ jsx19(Button12, { variant: "outline", size: "sm", children: "Edit" })
       ] })
     }
   ];
   if (error) {
-    return /* @__PURE__ */ jsx23("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsx23("p", { className: "text-destructive", children: "Error loading users" }) });
+    return /* @__PURE__ */ jsx19("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsx19("p", { className: "text-destructive", children: "Error loading users" }) });
   }
-  return /* @__PURE__ */ jsxs21("div", { className: "w-full p-6 space-y-4", children: [
-    /* @__PURE__ */ jsxs21("div", { className: "flex justify-between items-center", children: [
-      /* @__PURE__ */ jsxs21("div", { children: [
-        /* @__PURE__ */ jsx23("h1", { className: "text-3xl font-bold", children: "Users" }),
-        /* @__PURE__ */ jsx23("p", { className: "text-muted-foreground", children: "Manage user accounts" })
+  return /* @__PURE__ */ jsxs17("div", { className: "w-full p-6 space-y-4", children: [
+    /* @__PURE__ */ jsxs17("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsxs17("div", { children: [
+        /* @__PURE__ */ jsx19("h1", { className: "text-3xl font-bold", children: "Users" }),
+        /* @__PURE__ */ jsx19("p", { className: "text-muted-foreground", children: "Manage user accounts" })
       ] }),
-      /* @__PURE__ */ jsx23(Button12, { children: "Create User" })
+      /* @__PURE__ */ jsx19(Button12, { children: "Create User" })
     ] }),
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx19(
       DataTable,
       {
         data: data?.users || [],
@@ -2610,8 +2495,8 @@ function UsersPage() {
         emptyMessage: "No users found"
       }
     ),
-    data && "users" in data && data.users && data.users.length >= limit && /* @__PURE__ */ jsxs21("div", { className: "flex justify-between items-center", children: [
-      /* @__PURE__ */ jsx23(
+    data && "users" in data && data.users && data.users.length >= limit && /* @__PURE__ */ jsxs17("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsx19(
         Button12,
         {
           variant: "outline",
@@ -2620,182 +2505,1291 @@ function UsersPage() {
           children: "Previous"
         }
       ),
-      /* @__PURE__ */ jsxs21("span", { className: "text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs17("span", { className: "text-sm text-muted-foreground", children: [
         "Page ",
         page
       ] }),
-      /* @__PURE__ */ jsx23(Button12, { variant: "outline", onClick: () => setPage(page + 1), children: "Next" })
+      /* @__PURE__ */ jsx19(Button12, { variant: "outline", onClick: () => setPage(page + 1), children: "Next" })
     ] })
   ] });
 }
 
-// src/components/profile/profile-page.tsx
-import { Button as Button13 } from "@mesob/ui/components/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle
-} from "@mesob/ui/components/card";
+// src/components/profile/account.tsx
 import { Separator } from "@mesob/ui/components/separator";
-
-// src/components/skeletons/profile-skeleton.tsx
-import { Skeleton as Skeleton2 } from "@mesob/ui/components/skeleton";
-import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
-function ProfileSkeleton() {
-  return /* @__PURE__ */ jsxs22("div", { className: "w-full max-w-4xl space-y-8 p-6", children: [
-    /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-6", children: [
-      /* @__PURE__ */ jsx24(Skeleton2, { className: "h-24 w-24 rounded-full" }),
-      /* @__PURE__ */ jsxs22("div", { className: "space-y-2 flex-1", children: [
-        /* @__PURE__ */ jsx24(Skeleton2, { className: "h-8 w-48" }),
-        /* @__PURE__ */ jsx24(Skeleton2, { className: "h-4 w-64" })
-      ] })
+import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+function Account() {
+  const { user, isAuthenticated } = useSession();
+  if (!(isAuthenticated && user)) {
+    return /* @__PURE__ */ jsx20("div", { children: "Sign in required" });
+  }
+  return /* @__PURE__ */ jsxs18("div", { className: "p-6 max-w-4xl", children: [
+    /* @__PURE__ */ jsxs18("div", { className: "mb-6", children: [
+      /* @__PURE__ */ jsx20("h2", { className: "text-lg font-semibold mb-4", children: "Profile details" }),
+      /* @__PURE__ */ jsx20(Separator, {})
     ] }),
-    /* @__PURE__ */ jsx24("div", { className: "space-y-6", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs22("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx24(Skeleton2, { className: "h-6 w-32" }),
-      /* @__PURE__ */ jsxs22("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsxs22("div", { className: "flex justify-between items-center", children: [
-          /* @__PURE__ */ jsx24(Skeleton2, { className: "h-4 w-24" }),
-          /* @__PURE__ */ jsx24(Skeleton2, { className: "h-4 w-32" })
-        ] }),
-        /* @__PURE__ */ jsxs22("div", { className: "flex justify-between items-center", children: [
-          /* @__PURE__ */ jsx24(Skeleton2, { className: "h-4 w-24" }),
-          /* @__PURE__ */ jsx24(Skeleton2, { className: "h-4 w-40" })
-        ] })
+    /* @__PURE__ */ jsxs18("div", { className: "space-y-6 transition-all duration-300 ease-in-out", children: [
+      /* @__PURE__ */ jsx20("div", { className: "flex flex-col md:flex-row items-start gap-4 md:gap-12 min-h-[3rem]", children: /* @__PURE__ */ jsx20("div", { className: "w-full md:w-48 mt-4 shrink-0 h-fit", children: /* @__PURE__ */ jsx20("span", { className: "font-medium text-sm", children: "Profile" }) }) }),
+      /* @__PURE__ */ jsx20(Separator, {}),
+      /* @__PURE__ */ jsxs18("div", { className: "flex flex-col md:flex-row gap-4 md:gap-12 py-2", children: [
+        /* @__PURE__ */ jsx20("div", { className: "w-full md:w-48 shrink-0", children: /* @__PURE__ */ jsx20("span", { className: "font-medium text-sm", children: "Email addresses" }) }),
+        /* @__PURE__ */ jsx20("div", { className: "flex-1 space-y-4", children: /* @__PURE__ */ jsx20("div", { className: "flex items-center justify-between group", children: user.email ? /* @__PURE__ */ jsx20("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsx20("span", { className: "text-sm", children: user.email }) }) : /* @__PURE__ */ jsx20("span", { className: "text-sm text-muted-foreground", children: "No email address" }) }) })
+      ] }),
+      /* @__PURE__ */ jsx20(Separator, {}),
+      /* @__PURE__ */ jsxs18("div", { className: "flex flex-col md:flex-row gap-4 md:gap-12 py-2", children: [
+        /* @__PURE__ */ jsx20("div", { className: "w-full md:w-48 shrink-0", children: /* @__PURE__ */ jsx20("span", { className: "font-medium text-sm", children: "Phone numbers" }) }),
+        /* @__PURE__ */ jsx20("div", { className: "flex-1 space-y-4", children: user.phone ? /* @__PURE__ */ jsx20("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsx20("span", { className: "text-sm", children: user.phone }) }) : /* @__PURE__ */ jsx20("span", { className: "text-sm text-muted-foreground", children: "No phone number" }) })
       ] })
-    ] }, i)) })
+    ] })
   ] });
 }
 
-// src/components/profile/profile-page.tsx
-import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
-function ProfilePage({ onEditClick }) {
-  const { user, isLoading } = useSession();
-  if (isLoading) {
-    return /* @__PURE__ */ jsx25(ProfileSkeleton, {});
+// src/components/profile/change-email-form.tsx
+import { Button as Button14 } from "@mesob/ui/components/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "@mesob/ui/components/collapsible";
+import { IconChevronDown } from "@tabler/icons-react";
+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 } from "@mesob/ui/components/button";
+import { Input as Input5 } from "@mesob/ui/components/input";
+import { Label } from "@mesob/ui/components/label";
+import { Spinner as Spinner6 } from "@mesob/ui/components/spinner";
+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";
+import { toast as toast7 } from "sonner";
+import { z as z6 } from "zod";
+import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+var emailPasswordSchema = z6.object({
+  email: z6.string().email("Invalid email address"),
+  password: z6.string().min(8, "Password must be at least 8 characters").max(128, "Password too long")
+});
+function isAuthError2(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 (!user) {
-    return /* @__PURE__ */ jsx25("div", { className: "flex items-center justify-center min-h-[400px]", children: /* @__PURE__ */ jsx25("p", { className: "text-muted-foreground", children: "Not authenticated" }) });
+  if (error.message) {
+    const upperMessage = error.message.toUpperCase().trim();
+    const validCodes2 = [
+      "USER_NOT_FOUND",
+      "USER_EXISTS",
+      "INVALID_PASSWORD",
+      "VERIFICATION_EXPIRED",
+      "VERIFICATION_MISMATCH",
+      "VERIFICATION_NOT_FOUND",
+      "TOO_MANY_ATTEMPTS",
+      "UNAUTHORIZED"
+    ];
+    if (validCodes2.includes(upperMessage)) {
+      return upperMessage;
+    }
   }
-  return /* @__PURE__ */ jsxs23("div", { className: "w-full max-w-4xl mx-auto space-y-6 p-6", children: [
-    /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs23("div", { children: [
-        /* @__PURE__ */ jsx25("h1", { className: "text-3xl font-bold", children: user.fullName }),
-        /* @__PURE__ */ jsxs23("p", { className: "text-muted-foreground", children: [
-          "@",
-          user.handle
+  return void 0;
+}
+function getErrorMessage(error) {
+  if (isAuthError2(error)) {
+    const errorCode = getErrorCode(error);
+    switch (errorCode) {
+      case "USER_EXISTS":
+        return "This email is already taken. Please use a different email.";
+      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 RequestChangeEmailForm({
+  onSuccess,
+  onCancel,
+  buttonText
+}) {
+  const { user } = useSession();
+  const { hooks } = useApi();
+  const [isSubmitting, setIsSubmitting] = useState14(false);
+  const [isChecking, setIsChecking] = useState14(true);
+  const [showPassword, setShowPassword] = useState14(false);
+  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 requestEmailVerificationMutation = hooks.useMutation(
+    "post",
+    "/email/verification/request"
+  );
+  const emailPasswordForm = useForm6({
+    resolver: zodResolver6(emailPasswordSchema),
+    defaultValues: {
+      email: "",
+      password: ""
+    }
+  });
+  const {
+    register,
+    handleSubmit,
+    getValues,
+    setValue,
+    formState: { errors }
+  } = emailPasswordForm;
+  useEffect8(() => {
+    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 !== "email") {
+          setIsChecking(false);
+          return;
+        }
+        if (!accountChange.newEmail) {
+          setIsChecking(false);
+          return;
+        }
+        if (getValues("email")) {
+          setIsChecking(false);
+          return;
+        }
+        setValue("email", accountChange.newEmail, { shouldValidate: true });
+        if (verificationId) {
+          toast7.message("Resuming verification\u2026");
+          onSuccess(verificationId, accountChange.newEmail);
+          return;
+        }
+        setIsChecking(false);
+      } catch {
+        setIsChecking(false);
+      }
+    };
+    run().catch(() => void 0);
+    return () => {
+      active = false;
+    };
+  }, [getPendingAccountChangeQuery.refetch, getValues, onSuccess, setValue]);
+  const onEmailPasswordSubmit = async (data) => {
+    if (!user) {
+      toast7.error("User not found");
+      return;
+    }
+    try {
+      setIsSubmitting(true);
+      await verifyPasswordMutation.mutateAsync({
+        body: { password: data.password }
+      });
+      const checkResult = await checkUserMutation.mutateAsync({
+        body: { identifier: data.email }
+      });
+      if (checkResult.data?.exists) {
+        if (user?.email?.toLowerCase() === data.email.toLowerCase()) {
+          toast7.error("This is already your current email address.");
+          return;
+        }
+        toast7.error(
+          "This email is already taken. Please use a different email."
+        );
+        return;
+      }
+      const verification = await requestEmailVerificationMutation.mutateAsync({
+        body: { email: data.email }
+      });
+      toast7.success("Verification code sent to your email");
+      onSuccess(verification.data?.verificationId ?? "", data.email);
+    } catch (error) {
+      const errorMessage = getErrorMessage(error);
+      if (isAuthError2(error)) {
+        const errorCode = getErrorCode(error);
+        if (errorCode === "INVALID_PASSWORD" || errorCode === "USER_NOT_FOUND") {
+          toast7.error("Incorrect password. Please try again.");
+          return;
+        }
+      }
+      toast7.error(errorMessage);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const isLoading = isSubmitting || isChecking;
+  return /* @__PURE__ */ jsxs19(
+    "form",
+    {
+      onSubmit: handleSubmit(onEmailPasswordSubmit),
+      className: "p-4 space-y-4 border-t",
+      children: [
+        /* @__PURE__ */ jsxs19("div", { className: "space-y-4 w-full md:w-1/2", children: [
+          /* @__PURE__ */ jsxs19("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx21(Label, { htmlFor: "email", children: "New Email Address" }),
+            /* @__PURE__ */ jsx21(
+              Input5,
+              {
+                id: "email",
+                type: "email",
+                placeholder: "Enter your new email",
+                ...register("email"),
+                disabled: isLoading
+              }
+            ),
+            errors.email && /* @__PURE__ */ jsx21("p", { className: "text-sm text-destructive", children: errors.email.message })
+          ] }),
+          /* @__PURE__ */ jsxs19("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx21(Label, { htmlFor: "password", children: "Password" }),
+            /* @__PURE__ */ jsxs19("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx21(
+                Input5,
+                {
+                  id: "password",
+                  type: showPassword ? "text" : "password",
+                  autoComplete: "current-password",
+                  placeholder: "Enter your password",
+                  ...register("password"),
+                  disabled: isLoading
+                }
+              ),
+              /* @__PURE__ */ jsx21(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setShowPassword(!showPassword),
+                  className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+                  disabled: isLoading,
+                  children: showPassword ? /* @__PURE__ */ jsx21(IconEyeOff4, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx21(IconEye4, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            errors.password && /* @__PURE__ */ jsx21("p", { className: "text-sm text-destructive", children: errors.password.message })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs19("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx21(
+            Button13,
+            {
+              type: "button",
+              variant: "outline",
+              onClick: onCancel,
+              disabled: isLoading,
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsxs19(Button13, { type: "submit", disabled: isLoading, children: [
+            isLoading && /* @__PURE__ */ jsx21(Spinner6, { className: "mr-2 h-4 w-4" }),
+            isChecking ? "Checking\u2026" : buttonText
+          ] })
         ] })
-      ] }),
-      onEditClick && /* @__PURE__ */ jsx25(Button13, { onClick: onEditClick, children: "Edit Profile" })
-    ] }),
-    /* @__PURE__ */ jsx25(Separator, {}),
-    /* @__PURE__ */ jsxs23("div", { className: "grid gap-6 md:grid-cols-2", children: [
-      /* @__PURE__ */ jsxs23(Card, { children: [
-        /* @__PURE__ */ jsxs23(CardHeader, { children: [
-          /* @__PURE__ */ jsx25(CardTitle, { children: "Contact Information" }),
-          /* @__PURE__ */ jsx25(CardDescription, { children: "Your contact details" })
+      ]
+    }
+  );
+}
+
+// src/components/profile/verify-change-email-form.tsx
+import { useState as useState15 } from "react";
+import { toast as toast8 } from "sonner";
+
+// src/components/profile/otp-verification-modal.tsx
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "@mesob/ui/components/dialog";
+import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
+function OtpVerificationModal({
+  open,
+  title,
+  description,
+  verificationId,
+  isLoading,
+  onSubmit,
+  onResend,
+  onCancel
+}) {
+  return /* @__PURE__ */ jsx22(
+    Dialog,
+    {
+      open,
+      onOpenChange: (nextOpen) => {
+        if (!nextOpen) {
+          onCancel?.();
+        }
+      },
+      children: /* @__PURE__ */ jsxs20(DialogContent, { children: [
+        /* @__PURE__ */ jsxs20(DialogHeader, { children: [
+          /* @__PURE__ */ jsx22(DialogTitle, { children: title }),
+          description && /* @__PURE__ */ jsx22(DialogDescription, { children: description })
         ] }),
-        /* @__PURE__ */ jsxs23(CardContent, { className: "space-y-4", children: [
-          /* @__PURE__ */ jsxs23("div", { children: [
-            /* @__PURE__ */ jsx25("p", { className: "text-sm font-medium text-muted-foreground", children: "Email" }),
-            /* @__PURE__ */ jsxs23("p", { className: "text-sm", children: [
-              user.email || "Not provided",
-              user.email && /* @__PURE__ */ jsx25(
-                "span",
+        /* @__PURE__ */ jsx22(
+          VerificationForm,
+          {
+            verificationId,
+            isLoading,
+            onSubmit: async ({ code }) => onSubmit(code),
+            onResend: onResend ?? (() => void 0)
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/components/profile/verify-change-email-form.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+function isAuthError3(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 validCodes2 = [
+      "USER_NOT_FOUND",
+      "USER_EXISTS",
+      "INVALID_PASSWORD",
+      "VERIFICATION_EXPIRED",
+      "VERIFICATION_MISMATCH",
+      "VERIFICATION_NOT_FOUND",
+      "TOO_MANY_ATTEMPTS",
+      "UNAUTHORIZED"
+    ];
+    if (validCodes2.includes(upperMessage)) {
+      return upperMessage;
+    }
+  }
+  return void 0;
+}
+function getErrorMessage2(error) {
+  if (isAuthError3(error)) {
+    const errorCode = getErrorCode2(error);
+    switch (errorCode) {
+      case "USER_EXISTS":
+        return "This email is already taken. Please use a different email.";
+      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 VerifyChangeEmailForm({
+  email,
+  verificationId,
+  onSuccess,
+  onCancel
+}) {
+  const { refresh } = useSession();
+  const { hooks } = useApi();
+  const [isSubmitting, setIsSubmitting] = useState15(false);
+  const [currentVerificationId, setCurrentVerificationId] = useState15(verificationId);
+  const verifyEmailMutation = hooks.useMutation(
+    "post",
+    "/email/verification/confirm"
+  );
+  const updateEmailMutation = hooks.useMutation("put", "/profile/email");
+  const requestEmailVerificationMutation = hooks.useMutation(
+    "post",
+    "/email/verification/request"
+  );
+  const onOtpSubmit = async (code) => {
+    if (!currentVerificationId) {
+      toast8.error("Verification not found. Please request a new code.");
+      return;
+    }
+    try {
+      setIsSubmitting(true);
+      await verifyEmailMutation.mutateAsync({
+        body: {
+          verificationId: currentVerificationId,
+          code
+        }
+      });
+      await updateEmailMutation.mutateAsync({
+        body: { email }
+      });
+      toast8.success("Email updated successfully");
+      await refresh();
+      onSuccess();
+    } catch (error) {
+      const errorMessage = getErrorMessage2(error);
+      toast8.error(errorMessage);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  if (!currentVerificationId) {
+    toast8.error("Verification not found. Please request a new code.");
+    return null;
+  }
+  return /* @__PURE__ */ jsx23(
+    OtpVerificationModal,
+    {
+      open: true,
+      title: "Verify email",
+      description: `Enter the verification code sent to ${email}`,
+      verificationId: currentVerificationId,
+      isLoading: isSubmitting,
+      onSubmit: onOtpSubmit,
+      onResend: async () => {
+        try {
+          setIsSubmitting(true);
+          const next = await requestEmailVerificationMutation.mutateAsync({
+            body: { email }
+          });
+          setCurrentVerificationId(next.data?.verificationId ?? null);
+          toast8.success("Verification code resent");
+        } catch (error) {
+          toast8.error(getErrorMessage2(error));
+        } finally {
+          setIsSubmitting(false);
+        }
+      },
+      onCancel
+    }
+  );
+}
+
+// src/components/profile/change-email-form.tsx
+import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
+function ChangeEmailForm() {
+  const { user } = useSession();
+  const [isOpen, setIsOpen] = useState16(false);
+  const [showOtp, setShowOtp] = useState16(false);
+  const [verificationId, setVerificationId] = useState16(null);
+  const [newEmail, setNewEmail] = useState16("");
+  const resetForms = () => {
+    setShowOtp(false);
+    setVerificationId(null);
+    setNewEmail("");
+  };
+  const handleRequestSuccess = (id, email) => {
+    setVerificationId(id);
+    setNewEmail(email);
+    setShowOtp(true);
+  };
+  const handleVerifySuccess = () => {
+    resetForms();
+    setIsOpen(false);
+  };
+  const handleCancel = () => {
+    resetForms();
+    setIsOpen(false);
+  };
+  const title = user?.email ? "Change Email" : "Add Email";
+  const description = user?.email ? "Update your email address" : "Add an email address to your account";
+  return /* @__PURE__ */ jsx24(Collapsible, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxs21("div", { className: "border rounded-lg", children: [
+    /* @__PURE__ */ jsx24(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs21(Button14, { variant: "ghost", className: "w-full justify-between p-4 h-auto", children: [
+      /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-start", children: [
+        /* @__PURE__ */ jsx24("span", { className: "font-medium", children: title }),
+        /* @__PURE__ */ jsx24("span", { className: "text-sm text-muted-foreground", children: description })
+      ] }),
+      /* @__PURE__ */ jsx24(
+        IconChevronDown,
+        {
+          className: `h-4 w-4 transition-transform ${isOpen ? "rotate-180" : ""}`
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx24(CollapsibleContent, { children: showOtp ? /* @__PURE__ */ jsx24(
+      VerifyChangeEmailForm,
+      {
+        email: newEmail,
+        verificationId,
+        onSuccess: handleVerifySuccess,
+        onCancel: handleCancel
+      }
+    ) : /* @__PURE__ */ jsx24(
+      RequestChangeEmailForm,
+      {
+        onSuccess: handleRequestSuccess,
+        onCancel: handleCancel,
+        buttonText: title
+      }
+    ) })
+  ] }) });
+}
+
+// src/components/profile/change-password-form.tsx
+import { zodResolver as zodResolver7 } from "@hookform/resolvers/zod";
+import { Button as Button15 } from "@mesob/ui/components/button";
+import {
+  Collapsible as Collapsible2,
+  CollapsibleContent as CollapsibleContent2,
+  CollapsibleTrigger as CollapsibleTrigger2
+} from "@mesob/ui/components/collapsible";
+import { Input as Input6 } from "@mesob/ui/components/input";
+import { Label as Label2 } from "@mesob/ui/components/label";
+import { Spinner as Spinner7 } from "@mesob/ui/components/spinner";
+import { IconChevronDown as IconChevronDown2, IconEye as IconEye5, IconEyeOff as IconEyeOff5 } from "@tabler/icons-react";
+import { useState as useState17 } from "react";
+import { useForm as useForm7 } from "react-hook-form";
+import { toast as toast9 } from "sonner";
+import { z as z7 } from "zod";
+import { jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
+var changePasswordSchema = z7.object({
+  currentPassword: z7.string().min(8, "Password must be at least 8 characters"),
+  newPassword: z7.string().min(8, "Password must be at least 8 characters"),
+  confirmPassword: z7.string().min(8, "Password must be at least 8 characters")
+}).refine((data) => data.newPassword === data.confirmPassword, {
+  message: "Passwords don't match",
+  path: ["confirmPassword"]
+});
+function isAuthError4(error) {
+  return typeof error === "object" && error !== null && ("code" in error || "message" in error || "name" in error);
+}
+function getErrorCode3(error) {
+  if (error.code) {
+    return error.code;
+  }
+  if (error.message) {
+    const upperMessage = error.message.toUpperCase().trim();
+    const validCodes2 = [
+      "INVALID_PASSWORD",
+      "UNAUTHORIZED",
+      "HAS_NO_PASSWORD",
+      "USER_NOT_FOUND",
+      "USER_EXISTS",
+      "VERIFICATION_EXPIRED",
+      "VERIFICATION_MISMATCH",
+      "VERIFICATION_NOT_FOUND",
+      "TOO_MANY_ATTEMPTS",
+      "REQUIRES_VERIFICATION",
+      "ACCESS_DENIED"
+    ];
+    if (validCodes2.includes(upperMessage)) {
+      return upperMessage;
+    }
+  }
+  return void 0;
+}
+function getPasswordChangeErrorMessage(error) {
+  if (isAuthError4(error)) {
+    const errorCode = getErrorCode3(error);
+    switch (errorCode) {
+      case "INVALID_PASSWORD":
+        return "The current password you entered is incorrect. Please try again.";
+      case "UNAUTHORIZED":
+        return "You are not authorized to perform this action. Please sign in again.";
+      case "HAS_NO_PASSWORD":
+        return "Your account does not have a password set. Please use password reset instead.";
+      default:
+        return error.message || "Failed to change password. Please try again.";
+    }
+  }
+  if (error instanceof Error) {
+    return error.message;
+  }
+  return "Failed to change password. Please try again.";
+}
+function ChangePasswordForm() {
+  const { user: _user } = useSession();
+  const [isOpen, setIsOpen] = useState17(false);
+  const [isSubmitting, setIsSubmitting] = useState17(false);
+  const [showPassword, setShowPassword] = useState17(false);
+  const [showNewPassword, setShowNewPassword] = useState17(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState17(false);
+  const form = useForm7({
+    resolver: zodResolver7(changePasswordSchema),
+    defaultValues: {
+      currentPassword: "",
+      newPassword: "",
+      confirmPassword: ""
+    }
+  });
+  const { register, handleSubmit, formState, reset } = form;
+  const onSubmit = (_data) => {
+    try {
+      setIsSubmitting(true);
+      toast9.error("Password change unavailable");
+      setIsOpen(false);
+    } catch (error) {
+      const errorMessage = getPasswordChangeErrorMessage(error);
+      toast9.error(errorMessage);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsx25(Collapsible2, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxs22("div", { className: "border rounded-lg", children: [
+    /* @__PURE__ */ jsx25(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs22(Button15, { variant: "ghost", className: "w-full justify-between p-4 h-auto", children: [
+      /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-start", children: [
+        /* @__PURE__ */ jsx25("span", { className: "font-medium", children: "Change Password" }),
+        /* @__PURE__ */ jsx25("span", { className: "text-sm text-muted-foreground", children: "Update your account password" })
+      ] }),
+      /* @__PURE__ */ jsx25(
+        IconChevronDown2,
+        {
+          className: `h-4 w-4 transition-transform ${isOpen ? "rotate-180" : ""}`
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx25(CollapsibleContent2, { children: /* @__PURE__ */ jsxs22(
+      "form",
+      {
+        onSubmit: handleSubmit(onSubmit),
+        className: "p-4 space-y-4 border-t",
+        children: [
+          /* @__PURE__ */ jsxs22("div", { className: "space-y-2 w-full md:w-1/2", children: [
+            /* @__PURE__ */ jsx25(Label2, { htmlFor: "currentPassword", children: "Old Password" }),
+            /* @__PURE__ */ jsxs22("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx25(
+                Input6,
                 {
-                  className: user.emailVerified ? "text-green-600 ml-2" : "text-yellow-600 ml-2",
-                  children: user.emailVerified ? "(Verified)" : "(Not verified)"
+                  id: "currentPassword",
+                  type: showPassword ? "text" : "password",
+                  autoComplete: "current-password",
+                  placeholder: "Enter your current password",
+                  ...register("currentPassword")
+                }
+              ),
+              /* @__PURE__ */ jsx25(
+                "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__ */ jsx25(IconEyeOff5, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx25(IconEye5, { className: "h-4 w-4" })
                 }
               )
-            ] })
+            ] }),
+            formState.errors.currentPassword && /* @__PURE__ */ jsx25("p", { className: "text-sm text-destructive", children: formState.errors.currentPassword.message })
           ] }),
-          /* @__PURE__ */ jsxs23("div", { children: [
-            /* @__PURE__ */ jsx25("p", { className: "text-sm font-medium text-muted-foreground", children: "Phone" }),
-            /* @__PURE__ */ jsxs23("p", { className: "text-sm", children: [
-              user.phone || "Not provided",
-              user.phone && /* @__PURE__ */ jsx25(
-                "span",
+          /* @__PURE__ */ jsxs22("div", { className: "space-y-2 w-full md:w-1/2", children: [
+            /* @__PURE__ */ jsx25(Label2, { htmlFor: "newPassword", children: "New Password" }),
+            /* @__PURE__ */ jsxs22("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx25(
+                Input6,
                 {
-                  className: user.phoneVerified ? "text-green-600 ml-2" : "text-yellow-600 ml-2",
-                  children: user.phoneVerified ? "(Verified)" : "(Not verified)"
+                  id: "newPassword",
+                  type: showNewPassword ? "text" : "password",
+                  placeholder: "Enter your new password",
+                  autoComplete: "new-password",
+                  ...register("newPassword")
+                }
+              ),
+              /* @__PURE__ */ jsx25(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setShowNewPassword(!showNewPassword),
+                  className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+                  children: showNewPassword ? /* @__PURE__ */ jsx25(IconEyeOff5, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx25(IconEye5, { className: "h-4 w-4" })
                 }
               )
+            ] }),
+            formState.errors.newPassword && /* @__PURE__ */ jsx25("p", { className: "text-sm text-destructive", children: formState.errors.newPassword.message })
+          ] }),
+          /* @__PURE__ */ jsxs22("div", { className: "space-y-2 w-full md:w-1/2", children: [
+            /* @__PURE__ */ jsx25(Label2, { htmlFor: "confirmPassword", children: "Confirm New Password" }),
+            /* @__PURE__ */ jsxs22("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx25(
+                Input6,
+                {
+                  id: "confirmPassword",
+                  type: showConfirmPassword ? "text" : "password",
+                  placeholder: "Confirm your new password",
+                  autoComplete: "new-password",
+                  ...register("confirmPassword")
+                }
+              ),
+              /* @__PURE__ */ jsx25(
+                "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__ */ jsx25(IconEyeOff5, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx25(IconEye5, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            formState.errors.confirmPassword && /* @__PURE__ */ jsx25("p", { className: "text-sm text-destructive", children: formState.errors.confirmPassword.message })
+          ] }),
+          /* @__PURE__ */ jsxs22("div", { className: "flex justify-end gap-2", children: [
+            /* @__PURE__ */ jsx25(
+              Button15,
+              {
+                type: "button",
+                variant: "outline",
+                onClick: () => {
+                  reset();
+                  setIsOpen(false);
+                },
+                disabled: isSubmitting,
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsxs22(Button15, { type: "submit", disabled: isSubmitting, children: [
+              isSubmitting && /* @__PURE__ */ jsx25(Spinner7, { className: "mr-2 h-4 w-4" }),
+              "Change Password"
             ] })
           ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs23(Card, { children: [
-        /* @__PURE__ */ jsxs23(CardHeader, { children: [
-          /* @__PURE__ */ jsx25(CardTitle, { children: "Account Information" }),
-          /* @__PURE__ */ jsx25(CardDescription, { children: "Your account details" })
-        ] }),
-        /* @__PURE__ */ jsxs23(CardContent, { className: "space-y-4", children: [
-          /* @__PURE__ */ jsxs23("div", { children: [
-            /* @__PURE__ */ jsx25("p", { className: "text-sm font-medium text-muted-foreground", children: "Tenant ID" }),
-            /* @__PURE__ */ jsx25("p", { className: "text-sm font-mono", children: user.tenantId })
+        ]
+      }
+    ) })
+  ] }) });
+}
+
+// src/components/profile/change-phone-form.tsx
+import { Button as Button17 } from "@mesob/ui/components/button";
+import {
+  Collapsible as Collapsible3,
+  CollapsibleContent as CollapsibleContent3,
+  CollapsibleTrigger as CollapsibleTrigger3
+} from "@mesob/ui/components/collapsible";
+import { IconChevronDown as IconChevronDown3 } from "@tabler/icons-react";
+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 } from "@mesob/ui/components/button";
+import { Input as Input7 } from "@mesob/ui/components/input";
+import { Label as Label3 } from "@mesob/ui/components/label";
+import { Spinner as Spinner8 } from "@mesob/ui/components/spinner";
+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";
+import { toast as toast10 } from "sonner";
+import { z as z8 } from "zod";
+import { jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
+var phonePasswordSchema = (phoneRegex) => z8.object({
+  phone: z8.string().trim().min(1, { message: "Phone number is required" }).refine(
+    (val) => {
+      const isPhone3 = phoneRegex.test(val);
+      return isPhone3;
+    },
+    {
+      message: "Invalid phone number"
+    }
+  ),
+  password: z8.string().min(8, "Password must be at least 8 characters").max(128, "Password too long")
+});
+function isAuthError5(error) {
+  return typeof error === "object" && error !== null && ("code" in error || "message" in error || "name" in error);
+}
+function getErrorCode4(error) {
+  if (error.code) {
+    return error.code;
+  }
+  if (error.message) {
+    const upperMessage = error.message.toUpperCase().trim();
+    const validCodes2 = [
+      "USER_NOT_FOUND",
+      "USER_EXISTS",
+      "INVALID_PASSWORD",
+      "VERIFICATION_EXPIRED",
+      "VERIFICATION_MISMATCH",
+      "VERIFICATION_NOT_FOUND",
+      "TOO_MANY_ATTEMPTS",
+      "UNAUTHORIZED"
+    ];
+    if (validCodes2.includes(upperMessage)) {
+      return upperMessage;
+    }
+  }
+  return void 0;
+}
+function getErrorMessage3(error) {
+  if (isAuthError5(error)) {
+    const errorCode = getErrorCode4(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] = useState18(false);
+  const [isChecking, setIsChecking] = useState18(true);
+  const [showPassword, setShowPassword] = useState18(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 = useForm8({
+    resolver: zodResolver8(phonePasswordSchema(phoneRegex)),
+    defaultValues: {
+      phone: "",
+      password: ""
+    }
+  });
+  const {
+    register,
+    handleSubmit,
+    getValues,
+    setValue,
+    formState: { errors }
+  } = phonePasswordForm;
+  useEffect9(() => {
+    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) {
+          toast10.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) {
+      toast10.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, "")) {
+          toast10.error("This is already your current phone number.");
+          return;
+        }
+        toast10.error(
+          "This phone number is already taken. Please use a different number."
+        );
+        return;
+      }
+      const verification = await requestPhoneOtpMutation.mutateAsync({
+        body: {
+          phone: normalizedPhone,
+          context: "change-phone"
+        }
+      });
+      toast10.success("Verification code sent to your phone");
+      onSuccess(verification.data?.verificationId ?? "", normalizedPhone);
+    } catch (error) {
+      const errorMessage = getErrorMessage3(error);
+      if (isAuthError5(error)) {
+        const errorCode = getErrorCode4(error);
+        if (errorCode === "INVALID_PASSWORD" || errorCode === "USER_NOT_FOUND") {
+          toast10.error("Incorrect password. Please try again.");
+          return;
+        }
+      }
+      toast10.error(errorMessage);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const isLoading = isSubmitting || isChecking;
+  return /* @__PURE__ */ jsxs23(
+    "form",
+    {
+      onSubmit: handleSubmit(onPhonePasswordSubmit),
+      className: "p-4 space-y-4 border-t",
+      children: [
+        /* @__PURE__ */ jsxs23("div", { className: "space-y-4 w-full md:w-1/2", children: [
+          /* @__PURE__ */ jsxs23("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx26(Label3, { htmlFor: "phone", children: "Phone Number" }),
+            /* @__PURE__ */ jsx26(
+              Input7,
+              {
+                id: "phone",
+                type: "tel",
+                placeholder: "Enter your new phone number",
+                ...register("phone"),
+                disabled: isLoading
+              }
+            ),
+            errors.phone && /* @__PURE__ */ jsx26("p", { className: "text-sm text-destructive", children: errors.phone.message })
           ] }),
-          /* @__PURE__ */ jsxs23("div", { children: [
-            /* @__PURE__ */ jsx25("p", { className: "text-sm font-medium text-muted-foreground", children: "Last Sign In" }),
-            /* @__PURE__ */ jsx25("p", { className: "text-sm", children: user.lastSignInAt ? new Date(user.lastSignInAt).toLocaleString() : "Never" })
+          /* @__PURE__ */ jsxs23("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx26(Label3, { htmlFor: "password", children: "Password" }),
+            /* @__PURE__ */ jsxs23("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx26(
+                Input7,
+                {
+                  id: "password",
+                  type: showPassword ? "text" : "password",
+                  autoComplete: "current-password",
+                  placeholder: "Enter your password",
+                  ...register("password"),
+                  disabled: isLoading
+                }
+              ),
+              /* @__PURE__ */ jsx26(
+                "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__ */ jsx26(IconEyeOff6, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx26(IconEye6, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            errors.password && /* @__PURE__ */ jsx26("p", { className: "text-sm text-destructive", children: errors.password.message })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs23("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx26(
+            Button16,
+            {
+              type: "button",
+              variant: "outline",
+              onClick: onCancel,
+              disabled: isLoading,
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsxs23(Button16, { type: "submit", disabled: isLoading, children: [
+            isLoading && /* @__PURE__ */ jsx26(Spinner8, { className: "mr-2 h-4 w-4" }),
+            isChecking ? "Checking\u2026" : buttonText
           ] })
         ] })
+      ]
+    }
+  );
+}
+
+// src/components/profile/verify-change-phone-form.tsx
+import { useState as useState19 } from "react";
+import { toast as toast11 } from "sonner";
+import { jsx as jsx27 } from "react/jsx-runtime";
+function isAuthError6(error) {
+  return typeof error === "object" && error !== null && ("code" in error || "message" in error || "name" in error);
+}
+function getErrorCode5(error) {
+  if (error.code) {
+    return error.code;
+  }
+  if (error.message) {
+    const upperMessage = error.message.toUpperCase().trim();
+    const validCodes2 = [
+      "USER_NOT_FOUND",
+      "USER_EXISTS",
+      "INVALID_PASSWORD",
+      "VERIFICATION_EXPIRED",
+      "VERIFICATION_MISMATCH",
+      "VERIFICATION_NOT_FOUND",
+      "TOO_MANY_ATTEMPTS",
+      "UNAUTHORIZED"
+    ];
+    if (validCodes2.includes(upperMessage)) {
+      return upperMessage;
+    }
+  }
+  return void 0;
+}
+function getErrorMessage4(error) {
+  if (isAuthError6(error)) {
+    const errorCode = getErrorCode5(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] = useState19(false);
+  const [currentVerificationId, setCurrentVerificationId] = useState19(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) {
+      toast11.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 }
+      });
+      toast11.success("Phone number updated successfully");
+      await refresh();
+      onSuccess();
+    } catch (error) {
+      const errorMessage = getErrorMessage4(error);
+      toast11.error(errorMessage);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  if (!currentVerificationId) {
+    toast11.error("Verification not found. Please request a new code.");
+    return null;
+  }
+  return /* @__PURE__ */ jsx27(
+    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);
+          toast11.success("Verification code resent");
+        } catch (error) {
+          toast11.error(getErrorMessage4(error));
+        } finally {
+          setIsSubmitting(false);
+        }
+      },
+      onCancel
+    }
+  );
+}
+
+// src/components/profile/change-phone-form.tsx
+import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
+function ChangePhoneForm() {
+  const { user } = useSession();
+  const [isOpen, setIsOpen] = useState20(false);
+  const [showOtp, setShowOtp] = useState20(false);
+  const [verificationId, setVerificationId] = useState20(null);
+  const [newPhone, setNewPhone] = useState20("");
+  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__ */ jsx28(Collapsible3, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxs24("div", { className: "border rounded-lg", children: [
+    /* @__PURE__ */ jsx28(CollapsibleTrigger3, { asChild: true, children: /* @__PURE__ */ jsxs24(Button17, { variant: "ghost", className: "w-full justify-between p-4 h-auto", children: [
+      /* @__PURE__ */ jsxs24("div", { className: "flex flex-col items-start", children: [
+        /* @__PURE__ */ jsx28("span", { className: "font-medium", children: title }),
+        /* @__PURE__ */ jsx28("span", { className: "text-sm text-muted-foreground", children: description })
       ] }),
-      user.userRoles && user.userRoles.length > 0 && /* @__PURE__ */ jsxs23(Card, { className: "md:col-span-2", children: [
-        /* @__PURE__ */ jsxs23(CardHeader, { children: [
-          /* @__PURE__ */ jsx25(CardTitle, { children: "Roles" }),
-          /* @__PURE__ */ jsx25(CardDescription, { children: "Your assigned roles" })
-        ] }),
-        /* @__PURE__ */ jsx25(CardContent, { children: /* @__PURE__ */ jsx25("div", { className: "flex flex-wrap gap-2", children: user.userRoles.map((role) => /* @__PURE__ */ jsx25(
-          "div",
-          {
-            className: "px-3 py-1 bg-primary/10 text-primary rounded-full text-sm",
-            children: role.name
-          },
-          role.id
-        )) }) })
-      ] })
+      /* @__PURE__ */ jsx28(
+        IconChevronDown3,
+        {
+          className: `h-4 w-4 transition-transform ${isOpen ? "rotate-180" : ""}`
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx28(CollapsibleContent3, { children: showOtp ? /* @__PURE__ */ jsx28(
+      VerifyChangePhoneForm,
+      {
+        phone: newPhone,
+        verificationId,
+        onSuccess: handleVerifySuccess,
+        onCancel: handleCancel
+      }
+    ) : /* @__PURE__ */ jsx28(
+      RequestChangePhoneForm,
+      {
+        onSuccess: handleRequestSuccess,
+        onCancel: handleCancel,
+        buttonText: title
+      }
+    ) })
+  ] }) });
+}
+
+// src/components/profile/security.tsx
+import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
+function Security() {
+  return /* @__PURE__ */ jsxs25("div", { className: "p-6 space-y-6", children: [
+    /* @__PURE__ */ jsxs25("div", { children: [
+      /* @__PURE__ */ jsx29("h1", { className: "text-2xl font-semibold", children: "Security" }),
+      /* @__PURE__ */ jsx29("p", { className: "text-muted-foreground", children: "Manage your security settings" })
+    ] }),
+    /* @__PURE__ */ jsxs25("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx29(ChangePasswordForm, {}),
+      /* @__PURE__ */ jsx29(ChangeEmailForm, {}),
+      /* @__PURE__ */ jsx29(ChangePhoneForm, {})
     ] })
   ] });
 }
 
 // src/components/skeletons/auth-form-skeleton.tsx
-import { Skeleton as Skeleton3 } from "@mesob/ui/components/skeleton";
-import { jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Skeleton as Skeleton2 } from "@mesob/ui/components/skeleton";
+import { jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
 function AuthFormSkeleton() {
-  return /* @__PURE__ */ jsxs24("div", { className: "w-full max-w-md space-y-6 p-6", children: [
-    /* @__PURE__ */ jsxs24("div", { className: "space-y-2 text-center", children: [
-      /* @__PURE__ */ jsx26(Skeleton3, { className: "h-8 w-48 mx-auto" }),
-      /* @__PURE__ */ jsx26(Skeleton3, { className: "h-4 w-64 mx-auto" })
+  return /* @__PURE__ */ jsxs26("div", { className: "w-full max-w-md space-y-6 p-6", children: [
+    /* @__PURE__ */ jsxs26("div", { className: "space-y-2 text-center", children: [
+      /* @__PURE__ */ jsx30(Skeleton2, { className: "h-8 w-48 mx-auto" }),
+      /* @__PURE__ */ jsx30(Skeleton2, { className: "h-4 w-64 mx-auto" })
     ] }),
-    /* @__PURE__ */ jsxs24("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsxs24("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx26(Skeleton3, { className: "h-4 w-24" }),
-        /* @__PURE__ */ jsx26(Skeleton3, { className: "h-10 w-full" })
+    /* @__PURE__ */ jsxs26("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs26("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx30(Skeleton2, { className: "h-4 w-24" }),
+        /* @__PURE__ */ jsx30(Skeleton2, { className: "h-10 w-full" })
       ] }),
-      /* @__PURE__ */ jsxs24("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx26(Skeleton3, { className: "h-4 w-24" }),
-        /* @__PURE__ */ jsx26(Skeleton3, { className: "h-10 w-full" })
+      /* @__PURE__ */ jsxs26("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx30(Skeleton2, { className: "h-4 w-24" }),
+        /* @__PURE__ */ jsx30(Skeleton2, { className: "h-10 w-full" })
       ] }),
-      /* @__PURE__ */ jsx26(Skeleton3, { className: "h-10 w-full" })
+      /* @__PURE__ */ jsx30(Skeleton2, { className: "h-10 w-full" })
     ] }),
-    /* @__PURE__ */ jsxs24("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx26(Skeleton3, { className: "h-px w-full" }),
-      /* @__PURE__ */ jsx26(Skeleton3, { className: "h-4 w-32 mx-auto" })
+    /* @__PURE__ */ jsxs26("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx30(Skeleton2, { className: "h-px w-full" }),
+      /* @__PURE__ */ jsx30(Skeleton2, { className: "h-4 w-32 mx-auto" })
     ] })
   ] });
 }
 
-// src/utils/cookie.ts
-var isProduction = typeof process !== "undefined" && process.env.NODE_ENV === "production";
-var getSessionCookieName = (config) => {
-  const prefix = config.cookiePrefix || "";
-  const baseName = "session_token";
-  if (prefix) {
-    return `${prefix}_${baseName}`;
-  }
-  return isProduction ? "__Host-session_token" : baseName;
-};
+// src/components/skeletons/profile-skeleton.tsx
+import { Skeleton as Skeleton3 } from "@mesob/ui/components/skeleton";
+import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
+function ProfileSkeleton() {
+  return /* @__PURE__ */ jsxs27("div", { className: "w-full max-w-4xl space-y-8 p-6", children: [
+    /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-6", children: [
+      /* @__PURE__ */ jsx31(Skeleton3, { className: "h-24 w-24 rounded-full" }),
+      /* @__PURE__ */ jsxs27("div", { className: "space-y-2 flex-1", children: [
+        /* @__PURE__ */ jsx31(Skeleton3, { className: "h-8 w-48" }),
+        /* @__PURE__ */ jsx31(Skeleton3, { className: "h-4 w-64" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx31("div", { className: "space-y-6", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs27("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx31(Skeleton3, { className: "h-6 w-32" }),
+      /* @__PURE__ */ jsxs27("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs27("div", { className: "flex justify-between items-center", children: [
+          /* @__PURE__ */ jsx31(Skeleton3, { className: "h-4 w-24" }),
+          /* @__PURE__ */ jsx31(Skeleton3, { className: "h-4 w-32" })
+        ] }),
+        /* @__PURE__ */ jsxs27("div", { className: "flex justify-between items-center", children: [
+          /* @__PURE__ */ jsx31(Skeleton3, { className: "h-4 w-24" }),
+          /* @__PURE__ */ jsx31(Skeleton3, { className: "h-4 w-40" })
+        ] })
+      ] })
+    ] }, i)) })
+  ] });
+}
 
 // src/hooks/use-session-cookie-name.ts
 function useSessionCookieName() {
@@ -2803,32 +3797,36 @@ function useSessionCookieName() {
   return getSessionCookieName(config);
 }
 export {
+  Account,
   AuthCard,
   AuthErrorBoundary,
   AuthFormSkeleton,
   DataTable,
   ErrorBoundary,
-  ForgotPasswordPage,
+  ForgotPassword,
   MesobAuthProvider,
-  PermissionsPage,
-  ProfilePage,
+  Permissions,
   ProfileSkeleton,
-  ResetPasswordPage,
-  RolesPage,
-  SessionsPage,
-  SignInPage,
-  SignUpPage,
+  ResetPasswordForm,
+  Roles,
+  Security,
+  Sessions,
+  SignIn,
+  SignUp,
   TableSkeleton,
-  TenantsPage,
-  UsersPage,
+  Tenants,
+  Users,
   VerificationForm,
-  VerifyEmailPage,
-  VerifyPhonePage,
+  VerifyEmail,
+  VerifyPhone,
   getSessionCookieName,
   handleError,
+  hasAuthCookie,
   normalizePhone,
   useApi,
   useConfig,
+  useHasAuthCookie,
+  useHasAuthCookie as useIsAuthenticated,
   useSession,
   useSessionCookieName,
   useTranslator