@abpjs/theme-shared 2.4.0 → 2.7.0

package/dist/index.mjs

@@ -202,10 +202,25 @@ import { createContext } from "react";
 var ThemeSharedAppendContentContext = createContext(void 0);
 var THEME_SHARED_APPEND_CONTENT = "THEME_SHARED_APPEND_CONTENT";
 
+// src/tokens/http-error.token.ts
+import { createContext as createContext2, useContext } from "react";
+var HTTP_ERROR_CONFIG = "HTTP_ERROR_CONFIG";
+var HttpErrorConfigContext = createContext2(void 0);
+function httpErrorConfigFactory() {
+  return {
+    skipHandledErrorCodes: [],
+    errorScreen: void 0
+  };
+}
+function useHttpErrorConfig() {
+  const context = useContext(HttpErrorConfigContext);
+  return context ?? httpErrorConfigFactory();
+}
+
 // src/contexts/toaster.context.tsx
 import {
-  createContext as createContext2,
-  useContext,
+  createContext as createContext3,
+  useContext as useContext2,
   useCallback,
   useState,
   useRef,
@@ -213,7 +228,7 @@ import {
   useEffect
 } from "react";
 import { jsx } from "react/jsx-runtime";
-var ToasterContext = createContext2(null);
+var ToasterContext = createContext3(null);
 var toastCounter = 0;
 function generateId() {
   toastCounter += 1;
@@ -306,21 +321,21 @@ function ToasterProvider({ children }) {
   return /* @__PURE__ */ jsx(ToasterContext.Provider, { value, children });
 }
 function useToaster() {
-  const context = useContext(ToasterContext);
+  const context = useContext2(ToasterContext);
   if (!context) {
     throw new Error("useToaster must be used within a ToasterProvider");
   }
   return context.service;
 }
 function useToasts() {
-  const context = useContext(ToasterContext);
+  const context = useContext2(ToasterContext);
   if (!context) {
     throw new Error("useToasts must be used within a ToasterProvider");
   }
   return context.toasts;
 }
 function useToasterContext() {
-  const context = useContext(ToasterContext);
+  const context = useContext2(ToasterContext);
   if (!context) {
     throw new Error("useToasterContext must be used within a ToasterProvider");
   }
@@ -329,8 +344,8 @@ function useToasterContext() {
 
 // src/contexts/confirmation.context.tsx
 import {
-  createContext as createContext3,
-  useContext as useContext2,
+  createContext as createContext4,
+  useContext as useContext3,
   useCallback as useCallback2,
   useState as useState2,
   useRef as useRef2,
@@ -338,7 +353,7 @@ import {
   useEffect as useEffect2
 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var ConfirmationContext = createContext3(null);
+var ConfirmationContext = createContext4(null);
 function generateId2() {
   return `confirmation-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
 }
@@ -445,29 +460,103 @@ function ConfirmationProvider({ children }) {
   return /* @__PURE__ */ jsx2(ConfirmationContext.Provider, { value, children });
 }
 function useConfirmation() {
-  const context = useContext2(ConfirmationContext);
+  const context = useContext3(ConfirmationContext);
   if (!context) {
     throw new Error("useConfirmation must be used within a ConfirmationProvider");
   }
   return context.service;
 }
 function useConfirmationState() {
-  const context = useContext2(ConfirmationContext);
+  const context = useContext3(ConfirmationContext);
   if (!context) {
     throw new Error("useConfirmationState must be used within a ConfirmationProvider");
   }
   return { confirmation: context.confirmation, respond: context.respond };
 }
 function useConfirmationContext() {
-  const context = useContext2(ConfirmationContext);
+  const context = useContext3(ConfirmationContext);
   if (!context) {
     throw new Error("useConfirmationContext must be used within a ConfirmationProvider");
   }
   return context;
 }
 
+// src/contexts/modal.context.tsx
+import {
+  createContext as createContext5,
+  useContext as useContext4,
+  useCallback as useCallback3,
+  useState as useState3,
+  useRef as useRef3,
+  useMemo as useMemo3
+} from "react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var ModalContext = createContext5(null);
+function ModalProvider({ children }) {
+  const [modalState, setModalState] = useState3(null);
+  const [, setUpdateCounter] = useState3(0);
+  const containerRef = useRef3(null);
+  const renderTemplate = useCallback3((render, context) => {
+    setModalState({ render, context });
+  }, []);
+  const clearModal = useCallback3(() => {
+    setModalState(null);
+  }, []);
+  const getContainer = useCallback3(() => {
+    return containerRef;
+  }, []);
+  const detectChanges = useCallback3(() => {
+    setUpdateCounter((prev) => prev + 1);
+  }, []);
+  const service = useMemo3(
+    () => ({
+      renderTemplate,
+      clearModal,
+      getContainer,
+      detectChanges
+    }),
+    [renderTemplate, clearModal, getContainer, detectChanges]
+  );
+  const value = useMemo3(
+    () => ({ service, modalState }),
+    [service, modalState]
+  );
+  return /* @__PURE__ */ jsxs(ModalContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ jsx3("div", { ref: containerRef, id: "modal-container" })
+  ] });
+}
+function useModal() {
+  const context = useContext4(ModalContext);
+  if (!context) {
+    throw new Error("useModal must be used within a ModalProvider");
+  }
+  return context.service;
+}
+function useModalState() {
+  const context = useContext4(ModalContext);
+  if (!context) {
+    throw new Error("useModalState must be used within a ModalProvider");
+  }
+  return context.modalState;
+}
+function useModalContext() {
+  const context = useContext4(ModalContext);
+  if (!context) {
+    throw new Error("useModalContext must be used within a ModalProvider");
+  }
+  return context;
+}
+function ModalContainer() {
+  const modalState = useModalState();
+  if (!modalState) {
+    return null;
+  }
+  return modalState.render(modalState.context);
+}
+
 // src/handlers/error.handler.ts
-import { useCallback as useCallback3, useState as useState3 } from "react";
+import { useCallback as useCallback4, useState as useState4 } from "react";
 var DEFAULT_ERROR_MESSAGES = {
   400: "AbpUi::DefaultErrorMessage400",
   401: "AbpUi::DefaultErrorMessage401",
@@ -479,22 +568,22 @@ var DEFAULT_ERROR_MESSAGES = {
 function useErrorHandler(options = {}) {
   const { navigate, loginPath = "/account/login" } = options;
   const confirmation = useConfirmation();
-  const [errorComponentProps, setErrorComponentProps] = useState3(null);
-  const navigateToLogin = useCallback3(() => {
+  const [errorComponentProps, setErrorComponentProps] = useState4(null);
+  const navigateToLogin = useCallback4(() => {
     if (navigate) {
       navigate(loginPath);
     }
   }, [navigate, loginPath]);
-  const showError = useCallback3(
+  const showError = useCallback4(
     async (message, title) => {
       return confirmation.error(message, title || "AbpUi::Error");
     },
     [confirmation]
   );
-  const clearErrorComponent = useCallback3(() => {
+  const clearErrorComponent = useCallback4(() => {
     setErrorComponentProps(null);
   }, []);
-  const createErrorComponent = useCallback3(
+  const createErrorComponent = useCallback4(
     (instance) => {
       const props = {
         title: instance.title || "Error",
@@ -507,7 +596,7 @@ function useErrorHandler(options = {}) {
     },
     [clearErrorComponent]
   );
-  const handleError = useCallback3(
+  const handleError = useCallback4(
     async (error) => {
       if (error.status === 401) {
         navigateToLogin();
@@ -549,7 +638,7 @@ function isHttpErrorResponse(error) {
 }
 
 // src/components/toast/Toast.tsx
-import { useEffect as useEffect3, useRef as useRef3, useMemo as useMemo3 } from "react";
+import { useEffect as useEffect3, useRef as useRef4, useMemo as useMemo4 } from "react";
 import {
   Toaster as ChakraToaster,
   Portal,
@@ -568,7 +657,7 @@ import {
   XCircle,
   Circle
 } from "lucide-react";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function resolveLocalizationParam(param) {
   if (param === void 0) return void 0;
   if (typeof param === "string") return param;
@@ -578,16 +667,16 @@ function SeverityIcon({ severity }) {
   const iconProps = { size: 20 };
   switch (severity) {
     case "success":
-      return /* @__PURE__ */ jsx3(CheckCircle, { ...iconProps, color: "var(--chakra-colors-green-500)" });
+      return /* @__PURE__ */ jsx4(CheckCircle, { ...iconProps, color: "var(--chakra-colors-green-500)" });
     case "info":
-      return /* @__PURE__ */ jsx3(Info, { ...iconProps, color: "var(--chakra-colors-blue-500)" });
+      return /* @__PURE__ */ jsx4(Info, { ...iconProps, color: "var(--chakra-colors-blue-500)" });
     case "warning":
-      return /* @__PURE__ */ jsx3(AlertTriangle, { ...iconProps, color: "var(--chakra-colors-yellow-500)" });
+      return /* @__PURE__ */ jsx4(AlertTriangle, { ...iconProps, color: "var(--chakra-colors-yellow-500)" });
     case "error":
-      return /* @__PURE__ */ jsx3(XCircle, { ...iconProps, color: "var(--chakra-colors-red-500)" });
+      return /* @__PURE__ */ jsx4(XCircle, { ...iconProps, color: "var(--chakra-colors-red-500)" });
     case "neutral":
     default:
-      return /* @__PURE__ */ jsx3(Circle, { ...iconProps, color: "var(--chakra-colors-gray-500)" });
+      return /* @__PURE__ */ jsx4(Circle, { ...iconProps, color: "var(--chakra-colors-gray-500)" });
   }
 }
 function getSeverityColorPalette(severity) {
@@ -682,10 +771,10 @@ function getToaster(placement) {
 function ToastContainer({ position = "bottom-right", containerKey }) {
   const { toasts, service } = useToasterContext();
   const { t } = useLocalization();
-  const displayedToastsRef = useRef3(/* @__PURE__ */ new Set());
-  const placement = useMemo3(() => getPlacement(position), [position]);
-  const toaster = useMemo3(() => getToaster(placement), [placement]);
-  const filteredToasts = useMemo3(() => {
+  const displayedToastsRef = useRef4(/* @__PURE__ */ new Set());
+  const placement = useMemo4(() => getPlacement(position), [position]);
+  const toaster = useMemo4(() => getToaster(placement), [placement]);
+  const filteredToasts = useMemo4(() => {
     if (!containerKey) return toasts;
     return toasts.filter((toast) => toast.options?.containerKey === containerKey);
   }, [toasts, containerKey]);
@@ -722,10 +811,10 @@ function ToastContainer({ position = "bottom-right", containerKey }) {
       });
     });
   }, [filteredToasts, t, service, toaster]);
-  return /* @__PURE__ */ jsx3(Portal, { children: /* @__PURE__ */ jsx3(ChakraToaster, { toaster, insetInline: { mdDown: "4" }, children: (toast) => {
+  return /* @__PURE__ */ jsx4(Portal, { children: /* @__PURE__ */ jsx4(ChakraToaster, { toaster, insetInline: { mdDown: "4" }, children: (toast) => {
     const severity = toast.meta?.severity || "info";
     const closable = toast.meta?.closable !== false;
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx4(
       Toast.Root,
       {
         bg: getSeverityBg(severity),
@@ -734,13 +823,13 @@ function ToastContainer({ position = "bottom-right", containerKey }) {
         borderRadius: "lg",
         boxShadow: "lg",
         width: { md: "sm" },
-        children: /* @__PURE__ */ jsxs(Flex, { align: "flex-start", gap: 3, p: 4, children: [
-          /* @__PURE__ */ jsx3(Box, { flexShrink: 0, pt: "2px", children: /* @__PURE__ */ jsx3(SeverityIcon, { severity }) }),
-          /* @__PURE__ */ jsxs(Stack, { gap: 1, flex: 1, children: [
-            toast.title && /* @__PURE__ */ jsx3(Toast.Title, { fontWeight: "bold", fontSize: "sm", color: "fg", children: toast.title }),
-            toast.description && /* @__PURE__ */ jsx3(Toast.Description, { fontSize: "sm", color: "gray.700", children: toast.description })
+        children: /* @__PURE__ */ jsxs2(Flex, { align: "flex-start", gap: 3, p: 4, children: [
+          /* @__PURE__ */ jsx4(Box, { flexShrink: 0, pt: "2px", children: /* @__PURE__ */ jsx4(SeverityIcon, { severity }) }),
+          /* @__PURE__ */ jsxs2(Stack, { gap: 1, flex: 1, children: [
+            toast.title && /* @__PURE__ */ jsx4(Toast.Title, { fontWeight: "bold", fontSize: "sm", color: "fg", children: toast.title }),
+            toast.description && /* @__PURE__ */ jsx4(Toast.Description, { fontSize: "sm", color: "gray.700", children: toast.description })
           ] }),
-          closable && /* @__PURE__ */ jsx3(Toast.CloseTrigger, { asChild: true, children: /* @__PURE__ */ jsx3(CloseButton, { size: "sm" }) })
+          closable && /* @__PURE__ */ jsx4(Toast.CloseTrigger, { asChild: true, children: /* @__PURE__ */ jsx4(CloseButton, { size: "sm" }) })
         ] })
       }
     );
@@ -748,7 +837,7 @@ function ToastContainer({ position = "bottom-right", containerKey }) {
 }
 
 // src/components/confirmation/Confirmation.tsx
-import { useRef as useRef4 } from "react";
+import { useRef as useRef5 } from "react";
 import {
   Dialog,
   Portal as Portal2,
@@ -764,7 +853,7 @@ import {
   XCircle as XCircle2,
   Circle as Circle2
 } from "lucide-react";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function resolveLocalizationParam2(param) {
   if (param === void 0) return void 0;
   if (typeof param === "string") return param;
@@ -779,16 +868,16 @@ function SeverityIcon2({ severity }) {
   const iconProps = { size: 24 };
   switch (severity) {
     case "success":
-      return /* @__PURE__ */ jsx4(CheckCircle2, { ...iconProps, color: "var(--chakra-colors-green-500)" });
+      return /* @__PURE__ */ jsx5(CheckCircle2, { ...iconProps, color: "var(--chakra-colors-green-500)" });
     case "info":
-      return /* @__PURE__ */ jsx4(Info2, { ...iconProps, color: "var(--chakra-colors-blue-500)" });
+      return /* @__PURE__ */ jsx5(Info2, { ...iconProps, color: "var(--chakra-colors-blue-500)" });
     case "warning":
-      return /* @__PURE__ */ jsx4(AlertTriangle2, { ...iconProps, color: "var(--chakra-colors-yellow-500)" });
+      return /* @__PURE__ */ jsx5(AlertTriangle2, { ...iconProps, color: "var(--chakra-colors-yellow-500)" });
     case "error":
-      return /* @__PURE__ */ jsx4(XCircle2, { ...iconProps, color: "var(--chakra-colors-red-500)" });
+      return /* @__PURE__ */ jsx5(XCircle2, { ...iconProps, color: "var(--chakra-colors-red-500)" });
     case "neutral":
     default:
-      return /* @__PURE__ */ jsx4(Circle2, { ...iconProps, color: "var(--chakra-colors-gray-500)" });
+      return /* @__PURE__ */ jsx5(Circle2, { ...iconProps, color: "var(--chakra-colors-gray-500)" });
   }
 }
 function getSeverityColorPalette2(severity) {
@@ -809,7 +898,7 @@ function getSeverityColorPalette2(severity) {
 function ConfirmationDialog({ className }) {
   const { confirmation, respond } = useConfirmationState();
   const { t } = useLocalization2();
-  const cancelRef = useRef4(null);
+  const cancelRef = useRef5(null);
   if (!confirmation) {
     return null;
   }
@@ -839,7 +928,7 @@ function ConfirmationDialog({ className }) {
       handleDismiss();
     }
   };
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     Dialog.Root,
     {
       open: true,
@@ -847,16 +936,16 @@ function ConfirmationDialog({ className }) {
       role: "alertdialog",
       placement: "center",
       initialFocusEl: () => cancelRef.current,
-      children: /* @__PURE__ */ jsxs2(Portal2, { children: [
-        /* @__PURE__ */ jsx4(Dialog.Backdrop, {}),
-        /* @__PURE__ */ jsx4(Dialog.Positioner, { children: /* @__PURE__ */ jsxs2(Dialog.Content, { className, maxWidth: "md", children: [
-          /* @__PURE__ */ jsx4(Dialog.Header, { children: /* @__PURE__ */ jsxs2(Flex2, { align: "center", gap: 3, children: [
-            /* @__PURE__ */ jsx4(SeverityIcon2, { severity }),
-            localizedTitle && /* @__PURE__ */ jsx4(Dialog.Title, { children: /* @__PURE__ */ jsx4(Text, { fontWeight: "bold", fontSize: "lg", children: localizedTitle }) })
+      children: /* @__PURE__ */ jsxs3(Portal2, { children: [
+        /* @__PURE__ */ jsx5(Dialog.Backdrop, {}),
+        /* @__PURE__ */ jsx5(Dialog.Positioner, { children: /* @__PURE__ */ jsxs3(Dialog.Content, { className, maxWidth: "md", children: [
+          /* @__PURE__ */ jsx5(Dialog.Header, { children: /* @__PURE__ */ jsxs3(Flex2, { align: "center", gap: 3, children: [
+            /* @__PURE__ */ jsx5(SeverityIcon2, { severity }),
+            localizedTitle && /* @__PURE__ */ jsx5(Dialog.Title, { children: /* @__PURE__ */ jsx5(Text, { fontWeight: "bold", fontSize: "lg", children: localizedTitle }) })
           ] }) }),
-          /* @__PURE__ */ jsx4(Dialog.Body, { children: /* @__PURE__ */ jsx4(Text, { color: "gray.600", children: localizedMessage }) }),
-          /* @__PURE__ */ jsx4(Dialog.Footer, { children: /* @__PURE__ */ jsxs2(Flex2, { gap: 3, children: [
-            !options?.hideCancelBtn && /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5(Dialog.Body, { children: /* @__PURE__ */ jsx5(Text, { color: "gray.600", children: localizedMessage }) }),
+          /* @__PURE__ */ jsx5(Dialog.Footer, { children: /* @__PURE__ */ jsxs3(Flex2, { gap: 3, children: [
+            !options?.hideCancelBtn && /* @__PURE__ */ jsx5(
               Button,
               {
                 ref: cancelRef,
@@ -865,7 +954,7 @@ function ConfirmationDialog({ className }) {
                 children: cancelCopy
               }
             ),
-            !options?.hideYesBtn && /* @__PURE__ */ jsx4(
+            !options?.hideYesBtn && /* @__PURE__ */ jsx5(
               Button,
               {
                 colorPalette: getSeverityColorPalette2(severity),
@@ -881,17 +970,20 @@ function ConfirmationDialog({ className }) {
 }
 
 // src/components/errors/ErrorComponent.tsx
-import { Heading, Text as Text2, VStack, Button as Button2, Container } from "@chakra-ui/react";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Box as Box2, Heading, Text as Text2, VStack, Button as Button2, Container } from "@chakra-ui/react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function ErrorComponent({
   title = "Error",
   details = "An error has occurred.",
   onDestroy,
   showCloseButton = true,
-  closeButtonText = "Go Back"
+  closeButtonText = "Go Back",
+  isHomeShow = false,
+  onHomeClick,
+  homeButtonText = "Go Home"
 }) {
-  return /* @__PURE__ */ jsx5(Container, { maxW: "container.md", py: 20, children: /* @__PURE__ */ jsxs3(VStack, { gap: 6, textAlign: "center", children: [
-    /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(Container, { maxW: "container.md", py: 20, children: /* @__PURE__ */ jsxs4(VStack, { gap: 6, textAlign: "center", children: [
+    /* @__PURE__ */ jsx6(
       Heading,
       {
         size: "4xl",
@@ -900,23 +992,34 @@ function ErrorComponent({
         children: title
       }
     ),
-    /* @__PURE__ */ jsx5(Text2, { fontSize: "lg", color: "gray.600", children: details }),
-    showCloseButton && onDestroy && /* @__PURE__ */ jsx5(
-      Button2,
-      {
-        colorPalette: "blue",
-        size: "lg",
-        onClick: onDestroy,
-        children: closeButtonText
-      }
-    )
+    /* @__PURE__ */ jsx6(Text2, { fontSize: "lg", color: "gray.600", children: details }),
+    /* @__PURE__ */ jsxs4(Box2, { display: "flex", gap: 3, children: [
+      isHomeShow && onHomeClick && /* @__PURE__ */ jsx6(
+        Button2,
+        {
+          colorPalette: "green",
+          size: "lg",
+          onClick: onHomeClick,
+          children: homeButtonText
+        }
+      ),
+      showCloseButton && onDestroy && /* @__PURE__ */ jsx6(
+        Button2,
+        {
+          colorPalette: "blue",
+          size: "lg",
+          onClick: onDestroy,
+          children: closeButtonText
+        }
+      )
+    ] })
   ] }) });
 }
 
 // src/components/loader-bar/LoaderBar.tsx
-import { useEffect as useEffect4, useRef as useRef5, useState as useState4 } from "react";
+import { useEffect as useEffect4, useRef as useRef6, useState as useState5 } from "react";
 import { useLoader } from "@abpjs/core";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function LoaderBar({
   containerClass = "abp-loader-bar",
   progressClass = "abp-progress",
@@ -925,9 +1028,9 @@ function LoaderBar({
   stopDelay = 400
 }) {
   const { loading } = useLoader();
-  const [isLoading, setIsLoading] = useState4(false);
-  const [progressLevel, setProgressLevel] = useState4(0);
-  const intervalRef = useRef5(null);
+  const [isLoading, setIsLoading] = useState5(false);
+  const [progressLevel, setProgressLevel] = useState5(0);
+  const intervalRef = useRef6(null);
   useEffect4(() => {
     if (loading) {
       startLoading();
@@ -975,7 +1078,7 @@ function LoaderBar({
   if (!isLoading && progressLevel === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       className: containerClass,
@@ -989,7 +1092,7 @@ function LoaderBar({
         backgroundColor: "rgba(0, 0, 0, 0.1)",
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ jsx6(
+      children: /* @__PURE__ */ jsx7(
         "div",
         {
           className: progressClass,
@@ -1006,7 +1109,7 @@ function LoaderBar({
 }
 
 // src/components/modal/Modal.tsx
-import React6 from "react";
+import React7 from "react";
 import {
   Dialog as Dialog2,
   Portal as Portal3,
@@ -1016,7 +1119,7 @@ import {
   Separator,
   CloseButton as CloseButton2
 } from "@chakra-ui/react";
-import { Fragment, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function getSizeWidth(size) {
   switch (size) {
     case "sm":
@@ -1054,12 +1157,12 @@ function Modal({
   preventScroll = true,
   onInit
 }) {
-  const prevVisibleRef = React6.useRef(false);
-  const onInitRef = React6.useRef(onInit);
-  React6.useEffect(() => {
+  const prevVisibleRef = React7.useRef(false);
+  const onInitRef = React7.useRef(onInit);
+  React7.useEffect(() => {
     onInitRef.current = onInit;
   }, [onInit]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (visible && !prevVisibleRef.current && onInitRef.current) {
       onInitRef.current();
     }
@@ -1071,7 +1174,7 @@ function Modal({
     }
     onVisibleChange?.(details.open);
   };
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     Dialog2.Root,
     {
       open: visible,
@@ -1083,9 +1186,9 @@ function Modal({
       motionPreset,
       trapFocus,
       preventScroll,
-      children: /* @__PURE__ */ jsxs4(Portal3, { children: [
-        /* @__PURE__ */ jsx7(Dialog2.Backdrop, {}),
-        /* @__PURE__ */ jsx7(Dialog2.Positioner, { children: /* @__PURE__ */ jsxs4(
+      children: /* @__PURE__ */ jsxs5(Portal3, { children: [
+        /* @__PURE__ */ jsx8(Dialog2.Backdrop, {}),
+        /* @__PURE__ */ jsx8(Dialog2.Positioner, { children: /* @__PURE__ */ jsxs5(
           Dialog2.Content,
           {
             className: modalClass,
@@ -1095,17 +1198,17 @@ function Modal({
             height,
             minHeight,
             children: [
-              (header || showCloseButton) && /* @__PURE__ */ jsxs4(Fragment, { children: [
-                /* @__PURE__ */ jsx7(Dialog2.Header, { children: /* @__PURE__ */ jsxs4(Flex3, { justify: "space-between", align: "center", width: "100%", children: [
-                  header && /* @__PURE__ */ jsx7(Dialog2.Title, { children: /* @__PURE__ */ jsx7(Text3, { fontWeight: "bold", fontSize: "lg", children: header }) }),
-                  showCloseButton && /* @__PURE__ */ jsx7(Dialog2.CloseTrigger, { asChild: true, children: /* @__PURE__ */ jsx7(CloseButton2, { size: "sm" }) })
+              (header || showCloseButton) && /* @__PURE__ */ jsxs5(Fragment, { children: [
+                /* @__PURE__ */ jsx8(Dialog2.Header, { children: /* @__PURE__ */ jsxs5(Flex3, { justify: "space-between", align: "center", width: "100%", children: [
+                  header && /* @__PURE__ */ jsx8(Dialog2.Title, { children: /* @__PURE__ */ jsx8(Text3, { fontWeight: "bold", fontSize: "lg", children: header }) }),
+                  showCloseButton && /* @__PURE__ */ jsx8(Dialog2.CloseTrigger, { asChild: true, children: /* @__PURE__ */ jsx8(CloseButton2, { size: "sm" }) })
                 ] }) }),
-                /* @__PURE__ */ jsx7(Separator, {})
+                /* @__PURE__ */ jsx8(Separator, {})
               ] }),
-              children && /* @__PURE__ */ jsx7(Dialog2.Body, { py: 4, children }),
-              footer && /* @__PURE__ */ jsxs4(Fragment, { children: [
-                /* @__PURE__ */ jsx7(Separator, {}),
-                /* @__PURE__ */ jsx7(Dialog2.Footer, { children: /* @__PURE__ */ jsx7(Flex3, { gap: 3, justify: "flex-end", w: "100%", children: footer }) })
+              children && /* @__PURE__ */ jsx8(Dialog2.Body, { py: 4, children }),
+              footer && /* @__PURE__ */ jsxs5(Fragment, { children: [
+                /* @__PURE__ */ jsx8(Separator, {}),
+                /* @__PURE__ */ jsx8(Dialog2.Footer, { children: /* @__PURE__ */ jsx8(Flex3, { gap: 3, justify: "flex-end", w: "100%", children: footer }) })
               ] })
             ]
           }
@@ -1115,18 +1218,18 @@ function Modal({
   );
 }
 function AbpModalHeader({ children, className }) {
-  return /* @__PURE__ */ jsx7(Text3, { fontWeight: "bold", fontSize: "lg", className, children });
+  return /* @__PURE__ */ jsx8(Text3, { fontWeight: "bold", fontSize: "lg", className, children });
 }
 function AbpModalBody({ children, className }) {
-  return /* @__PURE__ */ jsx7(Box3, { color: "gray.600", className, children });
+  return /* @__PURE__ */ jsx8(Box3, { color: "gray.600", className, children });
 }
 function AbpModalFooter({ children, className }) {
-  return /* @__PURE__ */ jsx7(Flex3, { gap: 3, justify: "flex-end", className, children });
+  return /* @__PURE__ */ jsx8(Flex3, { gap: 3, justify: "flex-end", className, children });
 }
 
 // src/components/ui/Alert.tsx
 import { Alert as ChakraAlert } from "@chakra-ui/react";
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function Alert({
   status = "info",
   children,
@@ -1137,7 +1240,7 @@ function Alert({
   mb,
   borderRadius = "md"
 }) {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     ChakraAlert.Root,
     {
       status,
@@ -1145,11 +1248,11 @@ function Alert({
       mb,
       borderRadius,
       children: [
-        showIcon && /* @__PURE__ */ jsx8(ChakraAlert.Indicator, {}),
-        title ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
-          /* @__PURE__ */ jsx8(ChakraAlert.Title, { children: title }),
-          (description || children) && /* @__PURE__ */ jsx8(ChakraAlert.Description, { children: description || children })
-        ] }) : /* @__PURE__ */ jsx8(ChakraAlert.Title, { children })
+        showIcon && /* @__PURE__ */ jsx9(ChakraAlert.Indicator, {}),
+        title ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
+          /* @__PURE__ */ jsx9(ChakraAlert.Title, { children: title }),
+          (description || children) && /* @__PURE__ */ jsx9(ChakraAlert.Description, { children: description || children })
+        ] }) : /* @__PURE__ */ jsx9(ChakraAlert.Title, { children })
       ]
     }
   );
@@ -1158,7 +1261,7 @@ function Alert({
 // src/components/ui/Button.tsx
 import { forwardRef } from "react";
 import { Button as ChakraButton } from "@chakra-ui/react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var Button3 = forwardRef(
   function Button4({
     children,
@@ -1175,7 +1278,7 @@ var Button3 = forwardRef(
     mr,
     ml
   }, ref) {
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx10(
       ChakraButton,
       {
         ref,
@@ -1200,7 +1303,7 @@ var Button3 = forwardRef(
 // src/components/ui/Checkbox.tsx
 import { forwardRef as forwardRef2 } from "react";
 import { Checkbox as ChakraCheckbox } from "@chakra-ui/react";
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var Checkbox = forwardRef2(
   function Checkbox2({
     children,
@@ -1218,7 +1321,7 @@ var Checkbox = forwardRef2(
     onChange,
     className
   }, ref) {
-    return /* @__PURE__ */ jsxs6(
+    return /* @__PURE__ */ jsxs7(
       ChakraCheckbox.Root,
       {
         checked,
@@ -1231,7 +1334,7 @@ var Checkbox = forwardRef2(
         size,
         className,
         children: [
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             ChakraCheckbox.HiddenInput,
             {
               ref,
@@ -1241,8 +1344,8 @@ var Checkbox = forwardRef2(
               onChange
             }
           ),
-          /* @__PURE__ */ jsx10(ChakraCheckbox.Control, {}),
-          children && /* @__PURE__ */ jsx10(ChakraCheckbox.Label, { children })
+          /* @__PURE__ */ jsx11(ChakraCheckbox.Control, {}),
+          children && /* @__PURE__ */ jsx11(ChakraCheckbox.Label, { children })
         ]
       }
     );
@@ -1251,7 +1354,7 @@ var Checkbox = forwardRef2(
 
 // src/components/ui/FormField.tsx
 import { Field } from "@chakra-ui/react";
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 function FormField({
   label,
   invalid = false,
@@ -1263,14 +1366,14 @@ function FormField({
   htmlFor,
   className
 }) {
-  return /* @__PURE__ */ jsxs7(Field.Root, { invalid, disabled, className, children: [
-    label && /* @__PURE__ */ jsxs7(Field.Label, { htmlFor, children: [
+  return /* @__PURE__ */ jsxs8(Field.Root, { invalid, disabled, className, children: [
+    label && /* @__PURE__ */ jsxs8(Field.Label, { htmlFor, children: [
       label,
-      required && /* @__PURE__ */ jsx11(Field.RequiredIndicator, {})
+      required && /* @__PURE__ */ jsx12(Field.RequiredIndicator, {})
     ] }),
     children,
-    helperText && !invalid && /* @__PURE__ */ jsx11(Field.HelperText, { children: helperText }),
-    invalid && errorText && /* @__PURE__ */ jsx11(Field.ErrorText, { children: errorText })
+    helperText && !invalid && /* @__PURE__ */ jsx12(Field.HelperText, { children: helperText }),
+    invalid && errorText && /* @__PURE__ */ jsx12(Field.ErrorText, { children: errorText })
   ] });
 }
 
@@ -1285,7 +1388,7 @@ import {
 import { useForm } from "react-hook-form";
 import { useLocalization as useLocalization3, useProfile } from "@abpjs/core";
 import { Check } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 function ChangePassword({
   visible,
   onVisibleChange
@@ -1348,9 +1451,9 @@ function ChangePassword({
       hasSpecial: (value) => /[!@#$%^&*(),.?":{}|<>]/.test(value) || t("AbpIdentity::PasswordRequiresNonAlphanumeric") || "Password must contain a special character"
     }
   };
-  const modalFooter = /* @__PURE__ */ jsxs8(Fragment3, { children: [
-    /* @__PURE__ */ jsx12(Button5, { variant: "ghost", mr: 3, onClick: handleClose, disabled: isSubmitting, children: t("AbpIdentity::Cancel") || "Cancel" }),
-    /* @__PURE__ */ jsxs8(
+  const modalFooter = /* @__PURE__ */ jsxs9(Fragment3, { children: [
+    /* @__PURE__ */ jsx13(Button5, { variant: "ghost", mr: 3, onClick: handleClose, disabled: isSubmitting, children: t("AbpIdentity::Cancel") || "Cancel" }),
+    /* @__PURE__ */ jsxs9(
       Button5,
       {
         colorPalette: "blue",
@@ -1358,13 +1461,13 @@ function ChangePassword({
         loading: isSubmitting,
         form: "change-password-form",
         children: [
-          /* @__PURE__ */ jsx12(Check, { size: 16 }),
+          /* @__PURE__ */ jsx13(Check, { size: 16 }),
           t("AbpIdentity::Save") || "Save"
         ]
       }
     )
   ] });
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     Modal,
     {
       visible,
@@ -1373,13 +1476,13 @@ function ChangePassword({
       header: t("AbpIdentity::ChangePassword") || "Change Password",
       footer: modalFooter,
       centered: true,
-      children: /* @__PURE__ */ jsx12("form", { id: "change-password-form", onSubmit: handleSubmit(onSubmit), children: /* @__PURE__ */ jsxs8(VStack2, { gap: 4, children: [
-        /* @__PURE__ */ jsxs8(Field2.Root, { invalid: !!errors.password, children: [
-          /* @__PURE__ */ jsxs8(Field2.Label, { children: [
+      children: /* @__PURE__ */ jsx13("form", { id: "change-password-form", onSubmit: handleSubmit(onSubmit), children: /* @__PURE__ */ jsxs9(VStack2, { gap: 4, children: [
+        /* @__PURE__ */ jsxs9(Field2.Root, { invalid: !!errors.password, children: [
+          /* @__PURE__ */ jsxs9(Field2.Label, { children: [
             t("AbpIdentity::DisplayName:CurrentPassword") || "Current Password",
-            /* @__PURE__ */ jsx12(Field2.RequiredIndicator, {})
+            /* @__PURE__ */ jsx13(Field2.RequiredIndicator, {})
           ] }),
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13(
             Input,
             {
               type: "password",
@@ -1388,28 +1491,28 @@ function ChangePassword({
               })
             }
           ),
-          /* @__PURE__ */ jsx12(Field2.ErrorText, { children: errors.password?.message })
+          /* @__PURE__ */ jsx13(Field2.ErrorText, { children: errors.password?.message })
         ] }),
-        /* @__PURE__ */ jsxs8(Field2.Root, { invalid: !!errors.newPassword, children: [
-          /* @__PURE__ */ jsxs8(Field2.Label, { children: [
+        /* @__PURE__ */ jsxs9(Field2.Root, { invalid: !!errors.newPassword, children: [
+          /* @__PURE__ */ jsxs9(Field2.Label, { children: [
             t("AbpIdentity::DisplayName:NewPassword") || "New Password",
-            /* @__PURE__ */ jsx12(Field2.RequiredIndicator, {})
+            /* @__PURE__ */ jsx13(Field2.RequiredIndicator, {})
           ] }),
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13(
             Input,
             {
               type: "password",
               ...register("newPassword", passwordValidation)
             }
           ),
-          /* @__PURE__ */ jsx12(Field2.ErrorText, { children: errors.newPassword?.message })
+          /* @__PURE__ */ jsx13(Field2.ErrorText, { children: errors.newPassword?.message })
         ] }),
-        /* @__PURE__ */ jsxs8(Field2.Root, { invalid: !!errors.repeatNewPassword, children: [
-          /* @__PURE__ */ jsxs8(Field2.Label, { children: [
+        /* @__PURE__ */ jsxs9(Field2.Root, { invalid: !!errors.repeatNewPassword, children: [
+          /* @__PURE__ */ jsxs9(Field2.Label, { children: [
             t("AbpIdentity::DisplayName:NewPasswordConfirm") || "Confirm New Password",
-            /* @__PURE__ */ jsx12(Field2.RequiredIndicator, {})
+            /* @__PURE__ */ jsx13(Field2.RequiredIndicator, {})
           ] }),
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13(
             Input,
             {
               type: "password",
@@ -1419,7 +1522,7 @@ function ChangePassword({
               })
             }
           ),
-          /* @__PURE__ */ jsx12(Field2.ErrorText, { children: errors.repeatNewPassword?.message })
+          /* @__PURE__ */ jsx13(Field2.ErrorText, { children: errors.repeatNewPassword?.message })
         ] })
       ] }) })
     }
@@ -1438,7 +1541,7 @@ import {
 import { useForm as useForm2 } from "react-hook-form";
 import { useLocalization as useLocalization4, useProfile as useProfile2 } from "@abpjs/core";
 import { Check as Check2 } from "lucide-react";
-import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 function Profile({
   visible,
   onVisibleChange
@@ -1498,9 +1601,9 @@ function Profile({
       onVisibleChange(false);
     }
   };
-  const modalFooter = /* @__PURE__ */ jsxs9(Fragment4, { children: [
-    /* @__PURE__ */ jsx13(Button6, { variant: "ghost", mr: 3, onClick: handleClose, disabled: modalBusy, children: t("AbpIdentity::Cancel") || "Cancel" }),
-    /* @__PURE__ */ jsxs9(
+  const modalFooter = /* @__PURE__ */ jsxs10(Fragment4, { children: [
+    /* @__PURE__ */ jsx14(Button6, { variant: "ghost", mr: 3, onClick: handleClose, disabled: modalBusy, children: t("AbpIdentity::Cancel") || "Cancel" }),
+    /* @__PURE__ */ jsxs10(
       Button6,
       {
         colorPalette: "blue",
@@ -1508,13 +1611,13 @@ function Profile({
         loading: modalBusy,
         form: "profile-form",
         children: [
-          /* @__PURE__ */ jsx13(Check2, { size: 16 }),
+          /* @__PURE__ */ jsx14(Check2, { size: 16 }),
           t("AbpIdentity::Save") || "Save"
         ]
       }
     )
   ] });
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     Modal,
     {
       visible,
@@ -1524,13 +1627,13 @@ function Profile({
       footer: modalFooter,
       size: "lg",
       centered: true,
-      children: /* @__PURE__ */ jsx13("form", { id: "profile-form", onSubmit: handleSubmit(onSubmit), children: /* @__PURE__ */ jsxs9(VStack3, { gap: 4, children: [
-        /* @__PURE__ */ jsxs9(Field3.Root, { invalid: !!errors.userName, children: [
-          /* @__PURE__ */ jsxs9(Field3.Label, { children: [
+      children: /* @__PURE__ */ jsx14("form", { id: "profile-form", onSubmit: handleSubmit(onSubmit), children: /* @__PURE__ */ jsxs10(VStack3, { gap: 4, children: [
+        /* @__PURE__ */ jsxs10(Field3.Root, { invalid: !!errors.userName, children: [
+          /* @__PURE__ */ jsxs10(Field3.Label, { children: [
             t("AbpIdentity::DisplayName:UserName") || "Username",
-            /* @__PURE__ */ jsx13(Field3.RequiredIndicator, {})
+            /* @__PURE__ */ jsx14(Field3.RequiredIndicator, {})
           ] }),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14(
             Input2,
             {
               type: "text",
@@ -1543,12 +1646,12 @@ function Profile({
               })
             }
           ),
-          /* @__PURE__ */ jsx13(Field3.ErrorText, { children: errors.userName?.message })
+          /* @__PURE__ */ jsx14(Field3.ErrorText, { children: errors.userName?.message })
         ] }),
-        /* @__PURE__ */ jsxs9(HStack, { gap: 4, w: "full", children: [
-          /* @__PURE__ */ jsxs9(Field3.Root, { invalid: !!errors.name, flex: 1, children: [
-            /* @__PURE__ */ jsx13(Field3.Label, { children: t("AbpIdentity::DisplayName:Name") || "Name" }),
-            /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsxs10(HStack, { gap: 4, w: "full", children: [
+          /* @__PURE__ */ jsxs10(Field3.Root, { invalid: !!errors.name, flex: 1, children: [
+            /* @__PURE__ */ jsx14(Field3.Label, { children: t("AbpIdentity::DisplayName:Name") || "Name" }),
+            /* @__PURE__ */ jsx14(
               Input2,
               {
                 type: "text",
@@ -1560,11 +1663,11 @@ function Profile({
                 })
               }
             ),
-            /* @__PURE__ */ jsx13(Field3.ErrorText, { children: errors.name?.message })
+            /* @__PURE__ */ jsx14(Field3.ErrorText, { children: errors.name?.message })
           ] }),
-          /* @__PURE__ */ jsxs9(Field3.Root, { invalid: !!errors.surname, flex: 1, children: [
-            /* @__PURE__ */ jsx13(Field3.Label, { children: t("AbpIdentity::DisplayName:Surname") || "Surname" }),
-            /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsxs10(Field3.Root, { invalid: !!errors.surname, flex: 1, children: [
+            /* @__PURE__ */ jsx14(Field3.Label, { children: t("AbpIdentity::DisplayName:Surname") || "Surname" }),
+            /* @__PURE__ */ jsx14(
               Input2,
               {
                 type: "text",
@@ -1576,15 +1679,15 @@ function Profile({
                 })
               }
             ),
-            /* @__PURE__ */ jsx13(Field3.ErrorText, { children: errors.surname?.message })
+            /* @__PURE__ */ jsx14(Field3.ErrorText, { children: errors.surname?.message })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs9(Field3.Root, { invalid: !!errors.email, children: [
-          /* @__PURE__ */ jsxs9(Field3.Label, { children: [
+        /* @__PURE__ */ jsxs10(Field3.Root, { invalid: !!errors.email, children: [
+          /* @__PURE__ */ jsxs10(Field3.Label, { children: [
             t("AbpIdentity::DisplayName:EmailAddress") || "Email Address",
-            /* @__PURE__ */ jsx13(Field3.RequiredIndicator, {})
+            /* @__PURE__ */ jsx14(Field3.RequiredIndicator, {})
           ] }),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14(
             Input2,
             {
               type: "email",
@@ -1601,11 +1704,11 @@ function Profile({
               })
             }
           ),
-          /* @__PURE__ */ jsx13(Field3.ErrorText, { children: errors.email?.message })
+          /* @__PURE__ */ jsx14(Field3.ErrorText, { children: errors.email?.message })
         ] }),
-        /* @__PURE__ */ jsxs9(Field3.Root, { invalid: !!errors.phoneNumber, children: [
-          /* @__PURE__ */ jsx13(Field3.Label, { children: t("AbpIdentity::DisplayName:PhoneNumber") || "Phone Number" }),
-          /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsxs10(Field3.Root, { invalid: !!errors.phoneNumber, children: [
+          /* @__PURE__ */ jsx14(Field3.Label, { children: t("AbpIdentity::DisplayName:PhoneNumber") || "Phone Number" }),
+          /* @__PURE__ */ jsx14(
             Input2,
             {
               type: "tel",
@@ -1617,7 +1720,7 @@ function Profile({
               })
             }
           ),
-          /* @__PURE__ */ jsx13(Field3.ErrorText, { children: errors.phoneNumber?.message })
+          /* @__PURE__ */ jsx14(Field3.ErrorText, { children: errors.phoneNumber?.message })
         ] })
       ] }) })
     }
@@ -1862,11 +1965,11 @@ var abpSystem = createAbpSystem();
 // src/components/ui/color-mode.tsx
 import { ClientOnly, IconButton, Skeleton, Span } from "@chakra-ui/react";
 import { ThemeProvider, useTheme } from "next-themes";
-import * as React11 from "react";
+import * as React12 from "react";
 import { Moon, Sun } from "lucide-react";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function ColorModeProvider(props) {
-  return /* @__PURE__ */ jsx14(ThemeProvider, { attribute: "class", disableTransitionOnChange: true, ...props });
+  return /* @__PURE__ */ jsx15(ThemeProvider, { attribute: "class", disableTransitionOnChange: true, ...props });
 }
 function useColorMode() {
   const { resolvedTheme, setTheme, forcedTheme } = useTheme();
@@ -1882,11 +1985,11 @@ function useColorMode() {
 }
 function ColorModeIcon() {
   const { colorMode } = useColorMode();
-  return colorMode === "dark" ? /* @__PURE__ */ jsx14(Moon, {}) : /* @__PURE__ */ jsx14(Sun, {});
+  return colorMode === "dark" ? /* @__PURE__ */ jsx15(Moon, {}) : /* @__PURE__ */ jsx15(Sun, {});
 }
-var ColorModeButton = React11.forwardRef(function ColorModeButton2(props, ref) {
+var ColorModeButton = React12.forwardRef(function ColorModeButton2(props, ref) {
   const { toggleColorMode } = useColorMode();
-  return /* @__PURE__ */ jsx14(ClientOnly, { fallback: /* @__PURE__ */ jsx14(Skeleton, { boxSize: "9" }), children: /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(ClientOnly, { fallback: /* @__PURE__ */ jsx15(Skeleton, { boxSize: "9" }), children: /* @__PURE__ */ jsx15(
     IconButton,
     {
       onClick: toggleColorMode,
@@ -1901,13 +2004,13 @@ var ColorModeButton = React11.forwardRef(function ColorModeButton2(props, ref) {
           height: "5"
         }
       },
-      children: /* @__PURE__ */ jsx14(ColorModeIcon, {})
+      children: /* @__PURE__ */ jsx15(ColorModeIcon, {})
     }
   ) });
 });
-var LightMode = React11.forwardRef(
+var LightMode = React12.forwardRef(
   function LightMode2(props, ref) {
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx15(
       Span,
       {
         color: "fg",
@@ -1921,9 +2024,9 @@ var LightMode = React11.forwardRef(
     );
   }
 );
-var DarkMode = React11.forwardRef(
+var DarkMode = React12.forwardRef(
   function DarkMode2(props, ref) {
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx15(
       Span,
       {
         color: "fg",
@@ -1940,7 +2043,7 @@ var DarkMode = React11.forwardRef(
 
 // src/providers/ThemeSharedProvider.tsx
 import { useDirection } from "@abpjs/core";
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 function ThemeSharedProvider({
   children,
   renderToasts = true,
@@ -1954,13 +2057,13 @@ function ThemeSharedProvider({
   const system = themeOverrides ? createAbpSystem(themeOverrides) : abpSystem;
   const { endSide } = useDirection();
   toastPosition = `bottom-${endSide}`;
-  const content = /* @__PURE__ */ jsx15(ToasterProvider, { children: /* @__PURE__ */ jsxs10(ConfirmationProvider, { children: [
+  const content = /* @__PURE__ */ jsx16(ToasterProvider, { children: /* @__PURE__ */ jsxs11(ConfirmationProvider, { children: [
     children,
-    renderToasts && /* @__PURE__ */ jsx15(ToastContainer, { position: toastPosition }),
-    renderConfirmation && /* @__PURE__ */ jsx15(ConfirmationDialog, {})
+    renderToasts && /* @__PURE__ */ jsx16(ToastContainer, { position: toastPosition }),
+    renderConfirmation && /* @__PURE__ */ jsx16(ConfirmationDialog, {})
   ] }) });
   const colorModeProps = enableColorMode ? { defaultTheme: defaultColorMode } : { forcedTheme: "light" };
-  return /* @__PURE__ */ jsx15(ChakraProvider, { value: system, children: /* @__PURE__ */ jsx15(LocaleProvider, { locale, children: /* @__PURE__ */ jsx15(ColorModeProvider, { ...colorModeProps, children: content }) }) });
+  return /* @__PURE__ */ jsx16(ChakraProvider, { value: system, children: /* @__PURE__ */ jsx16(LocaleProvider, { locale, children: /* @__PURE__ */ jsx16(ColorModeProvider, { ...colorModeProps, children: content }) }) });
 }
 
 // src/utils/styles.ts
@@ -2033,6 +2136,120 @@ function injectThemeSharedStyles() {
     }
   };
 }
+
+// src/utils/validation-utils.ts
+var PASSWORD_SETTING_KEYS = {
+  requiredLength: "Abp.Identity.Password.RequiredLength",
+  maxLength: "Abp.Identity.Password.MaxLength",
+  requireDigit: "Abp.Identity.Password.RequireDigit",
+  requireLowercase: "Abp.Identity.Password.RequireLowercase",
+  requireUppercase: "Abp.Identity.Password.RequireUppercase",
+  requireNonAlphanumeric: "Abp.Identity.Password.RequireNonAlphanumeric",
+  requiredUniqueChars: "Abp.Identity.Password.RequiredUniqueChars"
+};
+function parseBooleanSetting(value) {
+  if (value === void 0) return void 0;
+  return value.toLowerCase() === "true";
+}
+function parseIntegerSetting(value) {
+  if (value === void 0) return void 0;
+  const num = parseInt(value, 10);
+  return isNaN(num) ? void 0 : num;
+}
+function getPasswordSettings(store) {
+  return {
+    requiredLength: parseIntegerSetting(store.getSetting(PASSWORD_SETTING_KEYS.requiredLength)),
+    maxLength: parseIntegerSetting(store.getSetting(PASSWORD_SETTING_KEYS.maxLength)),
+    requireDigit: parseBooleanSetting(store.getSetting(PASSWORD_SETTING_KEYS.requireDigit)),
+    requireLowercase: parseBooleanSetting(store.getSetting(PASSWORD_SETTING_KEYS.requireLowercase)),
+    requireUppercase: parseBooleanSetting(store.getSetting(PASSWORD_SETTING_KEYS.requireUppercase)),
+    requireNonAlphanumeric: parseBooleanSetting(store.getSetting(PASSWORD_SETTING_KEYS.requireNonAlphanumeric)),
+    requiredUniqueChars: parseIntegerSetting(store.getSetting(PASSWORD_SETTING_KEYS.requiredUniqueChars))
+  };
+}
+function getPasswordValidators(store) {
+  const settings = getPasswordSettings(store);
+  const validators = [];
+  if (settings.requiredLength && settings.requiredLength > 0) {
+    validators.push((value) => {
+      if (!value || value.length < settings.requiredLength) {
+        return `Password must be at least ${settings.requiredLength} characters`;
+      }
+      return true;
+    });
+  }
+  if (settings.maxLength && settings.maxLength > 0) {
+    validators.push((value) => {
+      if (value && value.length > settings.maxLength) {
+        return `Password must be at most ${settings.maxLength} characters`;
+      }
+      return true;
+    });
+  }
+  if (settings.requireDigit) {
+    validators.push((value) => {
+      if (!value || !/\d/.test(value)) {
+        return "Password must contain at least one digit";
+      }
+      return true;
+    });
+  }
+  if (settings.requireLowercase) {
+    validators.push((value) => {
+      if (!value || !/[a-z]/.test(value)) {
+        return "Password must contain at least one lowercase letter";
+      }
+      return true;
+    });
+  }
+  if (settings.requireUppercase) {
+    validators.push((value) => {
+      if (!value || !/[A-Z]/.test(value)) {
+        return "Password must contain at least one uppercase letter";
+      }
+      return true;
+    });
+  }
+  if (settings.requireNonAlphanumeric) {
+    validators.push((value) => {
+      if (!value || !/[^a-zA-Z0-9]/.test(value)) {
+        return "Password must contain at least one special character";
+      }
+      return true;
+    });
+  }
+  if (settings.requiredUniqueChars && settings.requiredUniqueChars > 0) {
+    validators.push((value) => {
+      if (!value) return true;
+      const uniqueChars = new Set(value).size;
+      if (uniqueChars < settings.requiredUniqueChars) {
+        return `Password must contain at least ${settings.requiredUniqueChars} unique characters`;
+      }
+      return true;
+    });
+  }
+  return validators;
+}
+function getPasswordValidationRules(store) {
+  const validators = getPasswordValidators(store);
+  const settings = getPasswordSettings(store);
+  const validate = {};
+  validators.forEach((validator, index) => {
+    validate[`passwordRule${index}`] = validator;
+  });
+  return {
+    required: "Password is required",
+    minLength: settings.requiredLength ? {
+      value: settings.requiredLength,
+      message: `Password must be at least ${settings.requiredLength} characters`
+    } : void 0,
+    maxLength: settings.maxLength ? {
+      value: settings.maxLength,
+      message: `Password must be at most ${settings.maxLength} characters`
+    } : void 0,
+    validate
+  };
+}
 export {
   AbpModalBody,
   AbpModalFooter,
@@ -2048,11 +2265,16 @@ export {
   DEFAULT_STYLES,
   ErrorComponent,
   FormField,
+  HTTP_ERROR_CONFIG,
+  HttpErrorConfigContext,
   LoaderBar,
   Modal,
   AbpModalBody as ModalBody,
+  ModalContainer,
   AbpModalFooter as ModalFooter,
   AbpModalHeader as ModalHeader,
+  ModalProvider,
+  PASSWORD_SETTING_KEYS,
   Profile,
   THEME_SHARED_APPEND_CONTENT,
   THEME_SHARED_STYLES,
@@ -2066,14 +2288,22 @@ export {
   createErrorInterceptor,
   defaultAbpConfig,
   defineConfig,
+  getPasswordSettings,
+  getPasswordValidationRules,
+  getPasswordValidators,
   getSeverityBg,
   getSeverityBorderColor,
   getSeverityColorPalette as getSeverityColorScheme,
+  httpErrorConfigFactory,
   injectThemeSharedStyles,
   useConfirmation,
   useConfirmationContext,
   useConfirmationState,
   useErrorHandler,
+  useHttpErrorConfig,
+  useModal,
+  useModalContext,
+  useModalState,
   useToaster,
   useToasterContext,
   useToasts