@abpjs/theme-shared 2.4.0 → 2.9.0

package/dist/index.js

@@ -34,21 +34,30 @@ __export(index_exports, {
   AbpModalFooter: () => AbpModalFooter,
   AbpModalHeader: () => AbpModalHeader,
   Alert: () => Alert,
+  BOOTSTRAP: () => BOOTSTRAP,
   Button: () => Button3,
-  ChakraDialog: () => import_react12.Dialog,
+  ChakraDialog: () => import_react15.Dialog,
   ChangePassword: () => ChangePassword,
   Checkbox: () => Checkbox,
   Confirmation: () => Confirmation,
   ConfirmationDialog: () => ConfirmationDialog,
   ConfirmationProvider: () => ConfirmationProvider,
+  DEFAULT_LAZY_STYLES: () => DEFAULT_LAZY_STYLES,
   DEFAULT_STYLES: () => DEFAULT_STYLES,
   ErrorComponent: () => ErrorComponent,
   FormField: () => FormField,
+  HTTP_ERROR_CONFIG: () => HTTP_ERROR_CONFIG,
+  HttpErrorConfigContext: () => HttpErrorConfigContext,
+  LAZY_STYLES: () => LAZY_STYLES,
+  LazyStylesContext: () => LazyStylesContext,
   LoaderBar: () => LoaderBar,
   Modal: () => Modal,
   ModalBody: () => AbpModalBody,
+  ModalContainer: () => ModalContainer,
   ModalFooter: () => AbpModalFooter,
   ModalHeader: () => AbpModalHeader,
+  ModalProvider: () => ModalProvider,
+  PASSWORD_SETTING_KEYS: () => PASSWORD_SETTING_KEYS,
   Profile: () => Profile,
   THEME_SHARED_APPEND_CONTENT: () => THEME_SHARED_APPEND_CONTENT,
   THEME_SHARED_STYLES: () => THEME_SHARED_STYLES,
@@ -58,18 +67,37 @@ __export(index_exports, {
   Toaster: () => Toaster,
   ToasterProvider: () => ToasterProvider,
   abpSystem: () => abpSystem,
+  addNavItem: () => addNavItem,
+  clearNavItems: () => clearNavItems,
   createAbpSystem: () => createAbpSystem,
   createErrorInterceptor: () => createErrorInterceptor,
+  createLazyStyleHref: () => createLazyStyleHref,
   defaultAbpConfig: () => defaultAbpConfig,
-  defineConfig: () => import_react23.defineConfig,
+  defineConfig: () => import_react26.defineConfig,
+  getLoadedBootstrapDirection: () => getLoadedBootstrapDirection,
+  getNavItems: () => getNavItems,
+  getNavItemsSync: () => getNavItemsSync,
+  getPasswordSettings: () => getPasswordSettings,
+  getPasswordValidationRules: () => getPasswordValidationRules,
+  getPasswordValidators: () => getPasswordValidators,
   getSeverityBg: () => getSeverityBg,
   getSeverityBorderColor: () => getSeverityBorderColor,
   getSeverityColorScheme: () => getSeverityColorPalette,
+  httpErrorConfigFactory: () => httpErrorConfigFactory,
+  initLazyStyleHandler: () => initLazyStyleHandler,
   injectThemeSharedStyles: () => injectThemeSharedStyles,
+  removeNavItem: () => removeNavItem,
+  subscribeToNavItems: () => subscribeToNavItems,
   useConfirmation: () => useConfirmation,
   useConfirmationContext: () => useConfirmationContext,
   useConfirmationState: () => useConfirmationState,
   useErrorHandler: () => useErrorHandler,
+  useHttpErrorConfig: () => useHttpErrorConfig,
+  useLazyStyleHandler: () => useLazyStyleHandler,
+  useLazyStyles: () => useLazyStyles,
+  useModal: () => useModal,
+  useModalContext: () => useModalContext,
+  useModalState: () => useModalState,
   useToaster: () => useToaster,
   useToasterContext: () => useToasterContext,
   useToasts: () => useToasts
@@ -99,6 +127,7 @@ var Confirmation;
 })(Confirmation || (Confirmation = {}));
 
 // src/constants/styles.ts
+var BOOTSTRAP = "bootstrap-{{dir}}.min.css";
 var DEFAULT_STYLES = `
 .is-invalid .form-control {
   border-color: #dc3545;
@@ -114,6 +143,11 @@ var DEFAULT_STYLES = `
   text-align: right;
 }
 
+/* RTL support - @since 2.9.0 */
+[dir=rtl] .data-tables-filter {
+  text-align: left;
+}
+
 .pointer {
   cursor: pointer;
 }
@@ -280,10 +314,34 @@ var import_react = require("react");
 var ThemeSharedAppendContentContext = (0, import_react.createContext)(void 0);
 var THEME_SHARED_APPEND_CONTENT = "THEME_SHARED_APPEND_CONTENT";
 
-// src/contexts/toaster.context.tsx
+// src/tokens/http-error.token.ts
 var import_react2 = require("react");
+var HTTP_ERROR_CONFIG = "HTTP_ERROR_CONFIG";
+var HttpErrorConfigContext = (0, import_react2.createContext)(void 0);
+function httpErrorConfigFactory() {
+  return {
+    skipHandledErrorCodes: [],
+    errorScreen: void 0
+  };
+}
+function useHttpErrorConfig() {
+  const context = (0, import_react2.useContext)(HttpErrorConfigContext);
+  return context ?? httpErrorConfigFactory();
+}
+
+// src/tokens/lazy-styles.token.ts
+var import_react3 = require("react");
+var DEFAULT_LAZY_STYLES = [BOOTSTRAP];
+var LazyStylesContext = (0, import_react3.createContext)(DEFAULT_LAZY_STYLES);
+function useLazyStyles() {
+  return (0, import_react3.useContext)(LazyStylesContext);
+}
+var LAZY_STYLES = DEFAULT_LAZY_STYLES;
+
+// src/contexts/toaster.context.tsx
+var import_react4 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var ToasterContext = (0, import_react2.createContext)(null);
+var ToasterContext = (0, import_react4.createContext)(null);
 var toastCounter = 0;
 function generateId() {
   toastCounter += 1;
@@ -291,17 +349,17 @@ function generateId() {
 }
 var DEFAULT_LIFE = 5e3;
 function ToasterProvider({ children }) {
-  const [toasts, setToasts] = (0, import_react2.useState)([]);
-  const subscribersRef = (0, import_react2.useRef)(/* @__PURE__ */ new Set());
-  (0, import_react2.useEffect)(() => {
+  const [toasts, setToasts] = (0, import_react4.useState)([]);
+  const subscribersRef = (0, import_react4.useRef)(/* @__PURE__ */ new Set());
+  (0, import_react4.useEffect)(() => {
     subscribersRef.current.forEach((subscriber) => {
       subscriber(toasts);
     });
   }, [toasts]);
-  const remove = (0, import_react2.useCallback)((id) => {
+  const remove = (0, import_react4.useCallback)((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
-  const show = (0, import_react2.useCallback)(
+  const show = (0, import_react4.useCallback)(
     (message, title, severity = "info", options) => {
       const id = typeof options?.id === "number" ? options.id : generateId();
       const life = options?.sticky ? void 0 : options?.life ?? DEFAULT_LIFE;
@@ -325,23 +383,23 @@ function ToasterProvider({ children }) {
     },
     [remove]
   );
-  const info = (0, import_react2.useCallback)(
+  const info = (0, import_react4.useCallback)(
     (message, title, options) => show(message, title, "info", options),
     [show]
   );
-  const success = (0, import_react2.useCallback)(
+  const success = (0, import_react4.useCallback)(
     (message, title, options) => show(message, title, "success", options),
     [show]
   );
-  const warn = (0, import_react2.useCallback)(
+  const warn = (0, import_react4.useCallback)(
     (message, title, options) => show(message, title, "warning", options),
     [show]
   );
-  const error = (0, import_react2.useCallback)(
+  const error = (0, import_react4.useCallback)(
     (message, title, options) => show(message, title, "error", options),
     [show]
   );
-  const clear = (0, import_react2.useCallback)((key) => {
+  const clear = (0, import_react4.useCallback)((key) => {
     setToasts((prev) => {
       if (key) {
         return prev.filter((toast) => toast.options?.containerKey !== key);
@@ -349,14 +407,14 @@ function ToasterProvider({ children }) {
       return [];
     });
   }, []);
-  const subscribe = (0, import_react2.useCallback)((subscriber) => {
+  const subscribe = (0, import_react4.useCallback)((subscriber) => {
     subscribersRef.current.add(subscriber);
     subscriber(toasts);
     return () => {
       subscribersRef.current.delete(subscriber);
     };
   }, [toasts]);
-  const service = (0, import_react2.useMemo)(
+  const service = (0, import_react4.useMemo)(
     () => ({
       info,
       success,
@@ -369,28 +427,28 @@ function ToasterProvider({ children }) {
     }),
     [info, success, warn, error, show, remove, clear, subscribe]
   );
-  const value = (0, import_react2.useMemo)(
+  const value = (0, import_react4.useMemo)(
     () => ({ service, toasts }),
     [service, toasts]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToasterContext.Provider, { value, children });
 }
 function useToaster() {
-  const context = (0, import_react2.useContext)(ToasterContext);
+  const context = (0, import_react4.useContext)(ToasterContext);
   if (!context) {
     throw new Error("useToaster must be used within a ToasterProvider");
   }
   return context.service;
 }
 function useToasts() {
-  const context = (0, import_react2.useContext)(ToasterContext);
+  const context = (0, import_react4.useContext)(ToasterContext);
   if (!context) {
     throw new Error("useToasts must be used within a ToasterProvider");
   }
   return context.toasts;
 }
 function useToasterContext() {
-  const context = (0, import_react2.useContext)(ToasterContext);
+  const context = (0, import_react4.useContext)(ToasterContext);
   if (!context) {
     throw new Error("useToasterContext must be used within a ToasterProvider");
   }
@@ -398,30 +456,30 @@ function useToasterContext() {
 }
 
 // src/contexts/confirmation.context.tsx
-var import_react3 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var ConfirmationContext = (0, import_react3.createContext)(null);
+var ConfirmationContext = (0, import_react5.createContext)(null);
 function generateId2() {
   return `confirmation-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
 }
 function ConfirmationProvider({ children }) {
-  const [confirmation, setConfirmation] = (0, import_react3.useState)(null);
-  const resolverRef = (0, import_react3.useRef)(null);
-  const subscribersRef = (0, import_react3.useRef)(/* @__PURE__ */ new Set());
-  const escapeListenerRef = (0, import_react3.useRef)(false);
-  (0, import_react3.useEffect)(() => {
+  const [confirmation, setConfirmation] = (0, import_react5.useState)(null);
+  const resolverRef = (0, import_react5.useRef)(null);
+  const subscribersRef = (0, import_react5.useRef)(/* @__PURE__ */ new Set());
+  const escapeListenerRef = (0, import_react5.useRef)(false);
+  (0, import_react5.useEffect)(() => {
     subscribersRef.current.forEach((subscriber) => {
       subscriber(confirmation);
     });
   }, [confirmation]);
-  const respond = (0, import_react3.useCallback)((status) => {
+  const respond = (0, import_react5.useCallback)((status) => {
     if (resolverRef.current) {
       resolverRef.current(status);
       resolverRef.current = null;
     }
     setConfirmation(null);
   }, []);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!escapeListenerRef.current) return;
     const handleEscape = (event) => {
       if (event.key === "Escape" && confirmation && confirmation.options?.closable !== false) {
@@ -433,7 +491,7 @@ function ConfirmationProvider({ children }) {
       document.removeEventListener("keydown", handleEscape);
     };
   }, [confirmation, respond]);
-  const show = (0, import_react3.useCallback)(
+  const show = (0, import_react5.useCallback)(
     (message, title, severity = "neutral", options = {}) => {
       if (resolverRef.current) {
         resolverRef.current(Confirmation.Status.dismiss);
@@ -455,39 +513,39 @@ function ConfirmationProvider({ children }) {
     },
     []
   );
-  const info = (0, import_react3.useCallback)(
+  const info = (0, import_react5.useCallback)(
     (message, title, options) => show(message, title, "info", options),
     [show]
   );
-  const success = (0, import_react3.useCallback)(
+  const success = (0, import_react5.useCallback)(
     (message, title, options) => show(message, title, "success", options),
     [show]
   );
-  const warn = (0, import_react3.useCallback)(
+  const warn = (0, import_react5.useCallback)(
     (message, title, options) => show(message, title, "warning", options),
     [show]
   );
-  const error = (0, import_react3.useCallback)(
+  const error = (0, import_react5.useCallback)(
     (message, title, options) => show(message, title, "error", options),
     [show]
   );
-  const clear = (0, import_react3.useCallback)(
+  const clear = (0, import_react5.useCallback)(
     (status) => {
       respond(status ?? Confirmation.Status.dismiss);
     },
     [respond]
   );
-  const listenToEscape = (0, import_react3.useCallback)(() => {
+  const listenToEscape = (0, import_react5.useCallback)(() => {
     escapeListenerRef.current = true;
   }, []);
-  const subscribe = (0, import_react3.useCallback)((subscriber) => {
+  const subscribe = (0, import_react5.useCallback)((subscriber) => {
     subscribersRef.current.add(subscriber);
     subscriber(confirmation);
     return () => {
       subscribersRef.current.delete(subscriber);
     };
   }, [confirmation]);
-  const service = (0, import_react3.useMemo)(
+  const service = (0, import_react5.useMemo)(
     () => ({
       info,
       success,
@@ -500,36 +558,103 @@ function ConfirmationProvider({ children }) {
     }),
     [info, success, warn, error, show, clear, listenToEscape, subscribe]
   );
-  const value = (0, import_react3.useMemo)(
+  const value = (0, import_react5.useMemo)(
     () => ({ service, confirmation, respond }),
     [service, confirmation, respond]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ConfirmationContext.Provider, { value, children });
 }
 function useConfirmation() {
-  const context = (0, import_react3.useContext)(ConfirmationContext);
+  const context = (0, import_react5.useContext)(ConfirmationContext);
   if (!context) {
     throw new Error("useConfirmation must be used within a ConfirmationProvider");
   }
   return context.service;
 }
 function useConfirmationState() {
-  const context = (0, import_react3.useContext)(ConfirmationContext);
+  const context = (0, import_react5.useContext)(ConfirmationContext);
   if (!context) {
     throw new Error("useConfirmationState must be used within a ConfirmationProvider");
   }
   return { confirmation: context.confirmation, respond: context.respond };
 }
 function useConfirmationContext() {
-  const context = (0, import_react3.useContext)(ConfirmationContext);
+  const context = (0, import_react5.useContext)(ConfirmationContext);
   if (!context) {
     throw new Error("useConfirmationContext must be used within a ConfirmationProvider");
   }
   return context;
 }
 
+// src/contexts/modal.context.tsx
+var import_react6 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ModalContext = (0, import_react6.createContext)(null);
+function ModalProvider({ children }) {
+  const [modalState, setModalState] = (0, import_react6.useState)(null);
+  const [, setUpdateCounter] = (0, import_react6.useState)(0);
+  const containerRef = (0, import_react6.useRef)(null);
+  const renderTemplate = (0, import_react6.useCallback)((render, context) => {
+    setModalState({ render, context });
+  }, []);
+  const clearModal = (0, import_react6.useCallback)(() => {
+    setModalState(null);
+  }, []);
+  const getContainer = (0, import_react6.useCallback)(() => {
+    return containerRef;
+  }, []);
+  const detectChanges = (0, import_react6.useCallback)(() => {
+    setUpdateCounter((prev) => prev + 1);
+  }, []);
+  const service = (0, import_react6.useMemo)(
+    () => ({
+      renderTemplate,
+      clearModal,
+      getContainer,
+      detectChanges
+    }),
+    [renderTemplate, clearModal, getContainer, detectChanges]
+  );
+  const value = (0, import_react6.useMemo)(
+    () => ({ service, modalState }),
+    [service, modalState]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(ModalContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: containerRef, id: "modal-container" })
+  ] });
+}
+function useModal() {
+  const context = (0, import_react6.useContext)(ModalContext);
+  if (!context) {
+    throw new Error("useModal must be used within a ModalProvider");
+  }
+  return context.service;
+}
+function useModalState() {
+  const context = (0, import_react6.useContext)(ModalContext);
+  if (!context) {
+    throw new Error("useModalState must be used within a ModalProvider");
+  }
+  return context.modalState;
+}
+function useModalContext() {
+  const context = (0, import_react6.useContext)(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
-var import_react4 = require("react");
+var import_react7 = require("react");
 var DEFAULT_ERROR_MESSAGES = {
   400: "AbpUi::DefaultErrorMessage400",
   401: "AbpUi::DefaultErrorMessage401",
@@ -541,22 +666,22 @@ var DEFAULT_ERROR_MESSAGES = {
 function useErrorHandler(options = {}) {
   const { navigate, loginPath = "/account/login" } = options;
   const confirmation = useConfirmation();
-  const [errorComponentProps, setErrorComponentProps] = (0, import_react4.useState)(null);
-  const navigateToLogin = (0, import_react4.useCallback)(() => {
+  const [errorComponentProps, setErrorComponentProps] = (0, import_react7.useState)(null);
+  const navigateToLogin = (0, import_react7.useCallback)(() => {
     if (navigate) {
       navigate(loginPath);
     }
   }, [navigate, loginPath]);
-  const showError = (0, import_react4.useCallback)(
+  const showError = (0, import_react7.useCallback)(
     async (message, title) => {
       return confirmation.error(message, title || "AbpUi::Error");
     },
     [confirmation]
   );
-  const clearErrorComponent = (0, import_react4.useCallback)(() => {
+  const clearErrorComponent = (0, import_react7.useCallback)(() => {
     setErrorComponentProps(null);
   }, []);
-  const createErrorComponent = (0, import_react4.useCallback)(
+  const createErrorComponent = (0, import_react7.useCallback)(
     (instance) => {
       const props = {
         title: instance.title || "Error",
@@ -569,7 +694,7 @@ function useErrorHandler(options = {}) {
     },
     [clearErrorComponent]
   );
-  const handleError = (0, import_react4.useCallback)(
+  const handleError = (0, import_react7.useCallback)(
     async (error) => {
       if (error.status === 401) {
         navigateToLogin();
@@ -611,11 +736,11 @@ function isHttpErrorResponse(error) {
 }
 
 // src/components/toast/Toast.tsx
-var import_react5 = require("react");
-var import_react6 = require("@chakra-ui/react");
+var import_react8 = require("react");
+var import_react9 = require("@chakra-ui/react");
 var import_core = require("@abpjs/core");
 var import_lucide_react = require("lucide-react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function resolveLocalizationParam(param) {
   if (param === void 0) return void 0;
   if (typeof param === "string") return param;
@@ -625,16 +750,16 @@ function SeverityIcon({ severity }) {
   const iconProps = { size: 20 };
   switch (severity) {
     case "success":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.CheckCircle, { ...iconProps, color: "var(--chakra-colors-green-500)" });
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.CheckCircle, { ...iconProps, color: "var(--chakra-colors-green-500)" });
     case "info":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Info, { ...iconProps, color: "var(--chakra-colors-blue-500)" });
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.Info, { ...iconProps, color: "var(--chakra-colors-blue-500)" });
     case "warning":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.AlertTriangle, { ...iconProps, color: "var(--chakra-colors-yellow-500)" });
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.AlertTriangle, { ...iconProps, color: "var(--chakra-colors-yellow-500)" });
     case "error":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.XCircle, { ...iconProps, color: "var(--chakra-colors-red-500)" });
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.XCircle, { ...iconProps, color: "var(--chakra-colors-red-500)" });
     case "neutral":
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Circle, { ...iconProps, color: "var(--chakra-colors-gray-500)" });
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.Circle, { ...iconProps, color: "var(--chakra-colors-gray-500)" });
   }
 }
 function getSeverityColorPalette(severity) {
@@ -719,7 +844,7 @@ function getPlacement(position) {
 var toasterCache = /* @__PURE__ */ new Map();
 function getToaster(placement) {
   if (!toasterCache.has(placement)) {
-    toasterCache.set(placement, (0, import_react6.createToaster)({
+    toasterCache.set(placement, (0, import_react9.createToaster)({
       placement,
       pauseOnPageIdle: true
     }));
@@ -729,14 +854,14 @@ function getToaster(placement) {
 function ToastContainer({ position = "bottom-right", containerKey }) {
   const { toasts, service } = useToasterContext();
   const { t } = (0, import_core.useLocalization)();
-  const displayedToastsRef = (0, import_react5.useRef)(/* @__PURE__ */ new Set());
-  const placement = (0, import_react5.useMemo)(() => getPlacement(position), [position]);
-  const toaster = (0, import_react5.useMemo)(() => getToaster(placement), [placement]);
-  const filteredToasts = (0, import_react5.useMemo)(() => {
+  const displayedToastsRef = (0, import_react8.useRef)(/* @__PURE__ */ new Set());
+  const placement = (0, import_react8.useMemo)(() => getPlacement(position), [position]);
+  const toaster = (0, import_react8.useMemo)(() => getToaster(placement), [placement]);
+  const filteredToasts = (0, import_react8.useMemo)(() => {
     if (!containerKey) return toasts;
     return toasts.filter((toast) => toast.options?.containerKey === containerKey);
   }, [toasts, containerKey]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const newToasts = filteredToasts.filter((toast) => !displayedToastsRef.current.has(toast.id));
     newToasts.forEach((toast) => {
       displayedToastsRef.current.add(toast.id);
@@ -769,11 +894,11 @@ function ToastContainer({ position = "bottom-right", containerKey }) {
       });
     });
   }, [filteredToasts, t, service, toaster]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Toaster, { toaster, insetInline: { mdDown: "4" }, children: (toast) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react9.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react9.Toaster, { toaster, insetInline: { mdDown: "4" }, children: (toast) => {
     const severity = toast.meta?.severity || "info";
     const closable = toast.meta?.closable !== false;
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_react6.Toast.Root,
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_react9.Toast.Root,
       {
         bg: getSeverityBg(severity),
         borderWidth: "1px",
@@ -781,13 +906,13 @@ function ToastContainer({ position = "bottom-right", containerKey }) {
         borderRadius: "lg",
         boxShadow: "lg",
         width: { md: "sm" },
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react6.Flex, { align: "flex-start", gap: 3, p: 4, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Box, { flexShrink: 0, pt: "2px", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SeverityIcon, { severity }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react6.Stack, { gap: 1, flex: 1, children: [
-            toast.title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Toast.Title, { fontWeight: "bold", fontSize: "sm", color: "fg", children: toast.title }),
-            toast.description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Toast.Description, { fontSize: "sm", color: "gray.700", children: toast.description })
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react9.Flex, { align: "flex-start", gap: 3, p: 4, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react9.Box, { flexShrink: 0, pt: "2px", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SeverityIcon, { severity }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react9.Stack, { gap: 1, flex: 1, children: [
+            toast.title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react9.Toast.Title, { fontWeight: "bold", fontSize: "sm", color: "fg", children: toast.title }),
+            toast.description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react9.Toast.Description, { fontSize: "sm", color: "gray.700", children: toast.description })
           ] }),
-          closable && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Toast.CloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.CloseButton, { size: "sm" }) })
+          closable && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react9.Toast.CloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react9.CloseButton, { size: "sm" }) })
         ] })
       }
     );
@@ -795,11 +920,11 @@ function ToastContainer({ position = "bottom-right", containerKey }) {
 }
 
 // src/components/confirmation/Confirmation.tsx
-var import_react7 = require("react");
-var import_react8 = require("@chakra-ui/react");
+var import_react10 = require("react");
+var import_react11 = require("@chakra-ui/react");
 var import_core2 = require("@abpjs/core");
 var import_lucide_react2 = require("lucide-react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function resolveLocalizationParam2(param) {
   if (param === void 0) return void 0;
   if (typeof param === "string") return param;
@@ -814,16 +939,16 @@ function SeverityIcon2({ severity }) {
   const iconProps = { size: 24 };
   switch (severity) {
     case "success":
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.CheckCircle, { ...iconProps, color: "var(--chakra-colors-green-500)" });
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.CheckCircle, { ...iconProps, color: "var(--chakra-colors-green-500)" });
     case "info":
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.Info, { ...iconProps, color: "var(--chakra-colors-blue-500)" });
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.Info, { ...iconProps, color: "var(--chakra-colors-blue-500)" });
     case "warning":
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.AlertTriangle, { ...iconProps, color: "var(--chakra-colors-yellow-500)" });
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.AlertTriangle, { ...iconProps, color: "var(--chakra-colors-yellow-500)" });
     case "error":
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.XCircle, { ...iconProps, color: "var(--chakra-colors-red-500)" });
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.XCircle, { ...iconProps, color: "var(--chakra-colors-red-500)" });
     case "neutral":
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.Circle, { ...iconProps, color: "var(--chakra-colors-gray-500)" });
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.Circle, { ...iconProps, color: "var(--chakra-colors-gray-500)" });
   }
 }
 function getSeverityColorPalette2(severity) {
@@ -844,7 +969,7 @@ function getSeverityColorPalette2(severity) {
 function ConfirmationDialog({ className }) {
   const { confirmation, respond } = useConfirmationState();
   const { t } = (0, import_core2.useLocalization)();
-  const cancelRef = (0, import_react7.useRef)(null);
+  const cancelRef = (0, import_react10.useRef)(null);
   if (!confirmation) {
     return null;
   }
@@ -874,25 +999,25 @@ function ConfirmationDialog({ className }) {
       handleDismiss();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_react8.Dialog.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_react11.Dialog.Root,
     {
       open: true,
       onOpenChange: handleOpenChange,
       role: "alertdialog",
       placement: "center",
       initialFocusEl: () => cancelRef.current,
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react8.Portal, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.Dialog.Backdrop, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.Dialog.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react8.Dialog.Content, { className, maxWidth: "md", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react8.Flex, { align: "center", gap: 3, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SeverityIcon2, { severity }),
-            localizedTitle && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.Dialog.Title, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.Text, { fontWeight: "bold", fontSize: "lg", children: localizedTitle }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react11.Portal, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react11.Dialog.Backdrop, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react11.Dialog.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react11.Dialog.Content, { className, maxWidth: "md", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react11.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react11.Flex, { align: "center", gap: 3, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SeverityIcon2, { severity }),
+            localizedTitle && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react11.Dialog.Title, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react11.Text, { fontWeight: "bold", fontSize: "lg", children: localizedTitle }) })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.Text, { color: "gray.600", children: localizedMessage }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.Dialog.Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react8.Flex, { gap: 3, children: [
-            !options?.hideCancelBtn && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-              import_react8.Button,
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react11.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react11.Text, { color: "gray.600", children: localizedMessage }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react11.Dialog.Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react11.Flex, { gap: 3, children: [
+            !options?.hideCancelBtn && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              import_react11.Button,
               {
                 ref: cancelRef,
                 variant: "ghost",
@@ -900,8 +1025,8 @@ function ConfirmationDialog({ className }) {
                 children: cancelCopy
               }
             ),
-            !options?.hideYesBtn && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-              import_react8.Button,
+            !options?.hideYesBtn && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              import_react11.Button,
               {
                 colorPalette: getSeverityColorPalette2(severity),
                 onClick: handleConfirm,
@@ -916,18 +1041,21 @@ function ConfirmationDialog({ className }) {
 }
 
 // src/components/errors/ErrorComponent.tsx
-var import_react9 = require("@chakra-ui/react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react12 = require("@chakra-ui/react");
+var import_jsx_runtime6 = require("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__ */ (0, import_jsx_runtime5.jsx)(import_react9.Container, { maxW: "container.md", py: 20, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react9.VStack, { gap: 6, textAlign: "center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      import_react9.Heading,
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react12.Container, { maxW: "container.md", py: 20, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react12.VStack, { gap: 6, textAlign: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_react12.Heading,
       {
         size: "4xl",
         color: "red.500",
@@ -935,23 +1063,34 @@ function ErrorComponent({
         children: title
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react9.Text, { fontSize: "lg", color: "gray.600", children: details }),
-    showCloseButton && onDestroy && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      import_react9.Button,
-      {
-        colorPalette: "blue",
-        size: "lg",
-        onClick: onDestroy,
-        children: closeButtonText
-      }
-    )
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react12.Text, { fontSize: "lg", color: "gray.600", children: details }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react12.Box, { display: "flex", gap: 3, children: [
+      isHomeShow && onHomeClick && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        import_react12.Button,
+        {
+          colorPalette: "green",
+          size: "lg",
+          onClick: onHomeClick,
+          children: homeButtonText
+        }
+      ),
+      showCloseButton && onDestroy && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        import_react12.Button,
+        {
+          colorPalette: "blue",
+          size: "lg",
+          onClick: onDestroy,
+          children: closeButtonText
+        }
+      )
+    ] })
   ] }) });
 }
 
 // src/components/loader-bar/LoaderBar.tsx
-var import_react10 = require("react");
+var import_react13 = require("react");
 var import_core3 = require("@abpjs/core");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function LoaderBar({
   containerClass = "abp-loader-bar",
   progressClass = "abp-progress",
@@ -960,17 +1099,17 @@ function LoaderBar({
   stopDelay = 400
 }) {
   const { loading } = (0, import_core3.useLoader)();
-  const [isLoading, setIsLoading] = (0, import_react10.useState)(false);
-  const [progressLevel, setProgressLevel] = (0, import_react10.useState)(0);
-  const intervalRef = (0, import_react10.useRef)(null);
-  (0, import_react10.useEffect)(() => {
+  const [isLoading, setIsLoading] = (0, import_react13.useState)(false);
+  const [progressLevel, setProgressLevel] = (0, import_react13.useState)(0);
+  const intervalRef = (0, import_react13.useRef)(null);
+  (0, import_react13.useEffect)(() => {
     if (loading) {
       startLoading();
     } else {
       stopLoading();
     }
   }, [loading]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     return () => {
       if (intervalRef.current) {
         clearInterval(intervalRef.current);
@@ -1010,7 +1149,7 @@ function LoaderBar({
   if (!isLoading && progressLevel === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       className: containerClass,
@@ -1024,7 +1163,7 @@ function LoaderBar({
         backgroundColor: "rgba(0, 0, 0, 0.1)",
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "div",
         {
           className: progressClass,
@@ -1041,9 +1180,9 @@ function LoaderBar({
 }
 
 // src/components/modal/Modal.tsx
-var import_react11 = __toESM(require("react"));
-var import_react12 = require("@chakra-ui/react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react14 = __toESM(require("react"));
+var import_react15 = require("@chakra-ui/react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function getSizeWidth(size) {
   switch (size) {
     case "sm":
@@ -1081,12 +1220,12 @@ function Modal({
   preventScroll = true,
   onInit
 }) {
-  const prevVisibleRef = import_react11.default.useRef(false);
-  const onInitRef = import_react11.default.useRef(onInit);
-  import_react11.default.useEffect(() => {
+  const prevVisibleRef = import_react14.default.useRef(false);
+  const onInitRef = import_react14.default.useRef(onInit);
+  import_react14.default.useEffect(() => {
     onInitRef.current = onInit;
   }, [onInit]);
-  import_react11.default.useEffect(() => {
+  import_react14.default.useEffect(() => {
     if (visible && !prevVisibleRef.current && onInitRef.current) {
       onInitRef.current();
     }
@@ -1098,8 +1237,8 @@ function Modal({
     }
     onVisibleChange?.(details.open);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_react12.Dialog.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_react15.Dialog.Root,
     {
       open: visible,
       onOpenChange: handleOpenChange,
@@ -1110,10 +1249,10 @@ function Modal({
       motionPreset,
       trapFocus,
       preventScroll,
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react12.Portal, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react12.Dialog.Backdrop, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react12.Dialog.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-          import_react12.Dialog.Content,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react15.Portal, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react15.Dialog.Backdrop, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react15.Dialog.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          import_react15.Dialog.Content,
           {
             className: modalClass,
             width: getSizeWidth(size),
@@ -1122,17 +1261,17 @@ function Modal({
             height,
             minHeight,
             children: [
-              (header || showCloseButton) && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react12.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react12.Flex, { justify: "space-between", align: "center", width: "100%", children: [
-                  header && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react12.Dialog.Title, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react12.Text, { fontWeight: "bold", fontSize: "lg", children: header }) }),
-                  showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react12.Dialog.CloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react12.CloseButton, { size: "sm" }) })
+              (header || showCloseButton) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react15.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react15.Flex, { justify: "space-between", align: "center", width: "100%", children: [
+                  header && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react15.Dialog.Title, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react15.Text, { fontWeight: "bold", fontSize: "lg", children: header }) }),
+                  showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react15.Dialog.CloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react15.CloseButton, { size: "sm" }) })
                 ] }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react12.Separator, {})
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react15.Separator, {})
               ] }),
-              children && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react12.Dialog.Body, { py: 4, children }),
-              footer && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react12.Separator, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react12.Dialog.Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react12.Flex, { gap: 3, justify: "flex-end", w: "100%", children: footer }) })
+              children && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react15.Dialog.Body, { py: 4, children }),
+              footer && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react15.Separator, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react15.Dialog.Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react15.Flex, { gap: 3, justify: "flex-end", w: "100%", children: footer }) })
               ] })
             ]
           }
@@ -1142,18 +1281,18 @@ function Modal({
   );
 }
 function AbpModalHeader({ children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react12.Text, { fontWeight: "bold", fontSize: "lg", className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react15.Text, { fontWeight: "bold", fontSize: "lg", className, children });
 }
 function AbpModalBody({ children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react12.Box, { color: "gray.600", className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react15.Box, { color: "gray.600", className, children });
 }
 function AbpModalFooter({ children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react12.Flex, { gap: 3, justify: "flex-end", className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react15.Flex, { gap: 3, justify: "flex-end", className, children });
 }
 
 // src/components/ui/Alert.tsx
-var import_react13 = require("@chakra-ui/react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react16 = require("@chakra-ui/react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function Alert({
   status = "info",
   children,
@@ -1164,29 +1303,29 @@ function Alert({
   mb,
   borderRadius = "md"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-    import_react13.Alert.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    import_react16.Alert.Root,
     {
       status,
       className,
       mb,
       borderRadius,
       children: [
-        showIcon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react13.Alert.Indicator, {}),
-        title ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react13.Alert.Title, { children: title }),
-          (description || children) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react13.Alert.Description, { children: description || children })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react13.Alert.Title, { children })
+        showIcon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react16.Alert.Indicator, {}),
+        title ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react16.Alert.Title, { children: title }),
+          (description || children) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react16.Alert.Description, { children: description || children })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react16.Alert.Title, { children })
       ]
     }
   );
 }
 
 // src/components/ui/Button.tsx
-var import_react14 = require("react");
-var import_react15 = require("@chakra-ui/react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Button3 = (0, import_react14.forwardRef)(
+var import_react17 = require("react");
+var import_react18 = require("@chakra-ui/react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Button3 = (0, import_react17.forwardRef)(
   function Button4({
     children,
     type = "button",
@@ -1202,8 +1341,8 @@ var Button3 = (0, import_react14.forwardRef)(
     mr,
     ml
   }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_react15.Button,
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_react18.Button,
       {
         ref,
         type,
@@ -1225,10 +1364,10 @@ var Button3 = (0, import_react14.forwardRef)(
 );
 
 // src/components/ui/Checkbox.tsx
-var import_react16 = require("react");
-var import_react17 = require("@chakra-ui/react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var Checkbox = (0, import_react16.forwardRef)(
+var import_react19 = require("react");
+var import_react20 = require("@chakra-ui/react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Checkbox = (0, import_react19.forwardRef)(
   function Checkbox2({
     children,
     checked,
@@ -1245,8 +1384,8 @@ var Checkbox = (0, import_react16.forwardRef)(
     onChange,
     className
   }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-      import_react17.Checkbox.Root,
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      import_react20.Checkbox.Root,
       {
         checked,
         defaultChecked,
@@ -1258,8 +1397,8 @@ var Checkbox = (0, import_react16.forwardRef)(
         size,
         className,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            import_react17.Checkbox.HiddenInput,
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            import_react20.Checkbox.HiddenInput,
             {
               ref,
               id,
@@ -1268,8 +1407,8 @@ var Checkbox = (0, import_react16.forwardRef)(
               onChange
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react17.Checkbox.Control, {}),
-          children && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react17.Checkbox.Label, { children })
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react20.Checkbox.Control, {}),
+          children && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react20.Checkbox.Label, { children })
         ]
       }
     );
@@ -1277,8 +1416,8 @@ var Checkbox = (0, import_react16.forwardRef)(
 );
 
 // src/components/ui/FormField.tsx
-var import_react18 = require("@chakra-ui/react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react21 = require("@chakra-ui/react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function FormField({
   label,
   invalid = false,
@@ -1290,24 +1429,24 @@ function FormField({
   htmlFor,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react18.Field.Root, { invalid, disabled, className, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react18.Field.Label, { htmlFor, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react21.Field.Root, { invalid, disabled, className, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react21.Field.Label, { htmlFor, children: [
       label,
-      required && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react18.Field.RequiredIndicator, {})
+      required && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react21.Field.RequiredIndicator, {})
     ] }),
     children,
-    helperText && !invalid && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react18.Field.HelperText, { children: helperText }),
-    invalid && errorText && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react18.Field.ErrorText, { children: errorText })
+    helperText && !invalid && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react21.Field.HelperText, { children: helperText }),
+    invalid && errorText && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react21.Field.ErrorText, { children: errorText })
   ] });
 }
 
 // src/components/change-password/ChangePassword.tsx
-var import_react19 = require("react");
-var import_react20 = require("@chakra-ui/react");
+var import_react22 = require("react");
+var import_react23 = require("@chakra-ui/react");
 var import_react_hook_form = require("react-hook-form");
 var import_core4 = require("@abpjs/core");
 var import_lucide_react3 = require("lucide-react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function ChangePassword({
   visible,
   onVisibleChange
@@ -1329,7 +1468,7 @@ function ChangePassword({
     }
   });
   const newPassword = watch("newPassword");
-  (0, import_react19.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (visible) {
       reset();
     }
@@ -1370,23 +1509,23 @@ function ChangePassword({
       hasSpecial: (value) => /[!@#$%^&*(),.?":{}|<>]/.test(value) || t("AbpIdentity::PasswordRequiresNonAlphanumeric") || "Password must contain a special character"
     }
   };
-  const modalFooter = /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react20.Button, { variant: "ghost", mr: 3, onClick: handleClose, disabled: isSubmitting, children: t("AbpIdentity::Cancel") || "Cancel" }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-      import_react20.Button,
+  const modalFooter = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Button, { variant: "ghost", mr: 3, onClick: handleClose, disabled: isSubmitting, children: t("AbpIdentity::Cancel") || "Cancel" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      import_react23.Button,
       {
         colorPalette: "blue",
         type: "submit",
         loading: isSubmitting,
         form: "change-password-form",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.Check, { size: 16 }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.Check, { size: 16 }),
           t("AbpIdentity::Save") || "Save"
         ]
       }
     )
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     Modal,
     {
       visible,
@@ -1395,14 +1534,14 @@ function ChangePassword({
       header: t("AbpIdentity::ChangePassword") || "Change Password",
       footer: modalFooter,
       centered: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("form", { id: "change-password-form", onSubmit: handleSubmit(onSubmit), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react20.VStack, { gap: 4, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react20.Field.Root, { invalid: !!errors.password, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react20.Field.Label, { children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("form", { id: "change-password-form", onSubmit: handleSubmit(onSubmit), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react23.VStack, { gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react23.Field.Root, { invalid: !!errors.password, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react23.Field.Label, { children: [
             t("AbpIdentity::DisplayName:CurrentPassword") || "Current Password",
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react20.Field.RequiredIndicator, {})
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Field.RequiredIndicator, {})
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            import_react20.Input,
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            import_react23.Input,
             {
               type: "password",
               ...register("password", {
@@ -1410,29 +1549,29 @@ function ChangePassword({
               })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react20.Field.ErrorText, { children: errors.password?.message })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Field.ErrorText, { children: errors.password?.message })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react20.Field.Root, { invalid: !!errors.newPassword, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react20.Field.Label, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react23.Field.Root, { invalid: !!errors.newPassword, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react23.Field.Label, { children: [
             t("AbpIdentity::DisplayName:NewPassword") || "New Password",
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react20.Field.RequiredIndicator, {})
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Field.RequiredIndicator, {})
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            import_react20.Input,
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            import_react23.Input,
             {
               type: "password",
               ...register("newPassword", passwordValidation)
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react20.Field.ErrorText, { children: errors.newPassword?.message })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Field.ErrorText, { children: errors.newPassword?.message })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react20.Field.Root, { invalid: !!errors.repeatNewPassword, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react20.Field.Label, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react23.Field.Root, { invalid: !!errors.repeatNewPassword, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react23.Field.Label, { children: [
             t("AbpIdentity::DisplayName:NewPasswordConfirm") || "Confirm New Password",
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react20.Field.RequiredIndicator, {})
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Field.RequiredIndicator, {})
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            import_react20.Input,
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            import_react23.Input,
             {
               type: "password",
               ...register("repeatNewPassword", {
@@ -1441,7 +1580,7 @@ function ChangePassword({
               })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react20.Field.ErrorText, { children: errors.repeatNewPassword?.message })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Field.ErrorText, { children: errors.repeatNewPassword?.message })
         ] })
       ] }) })
     }
@@ -1449,12 +1588,12 @@ function ChangePassword({
 }
 
 // src/components/profile/Profile.tsx
-var import_react21 = require("react");
-var import_react22 = require("@chakra-ui/react");
+var import_react24 = require("react");
+var import_react25 = require("@chakra-ui/react");
 var import_react_hook_form2 = require("react-hook-form");
 var import_core5 = require("@abpjs/core");
 var import_lucide_react4 = require("lucide-react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function Profile({
   visible,
   onVisibleChange
@@ -1477,13 +1616,13 @@ function Profile({
     }
   });
   const modalBusy = isSubmitting || loading;
-  (0, import_react21.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (visible) {
       fetchProfile().then(() => {
       });
     }
   }, [visible, fetchProfile]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (profile) {
       reset({
         userName: profile.userName || "",
@@ -1514,23 +1653,23 @@ function Profile({
       onVisibleChange(false);
     }
   };
-  const modalFooter = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Button, { variant: "ghost", mr: 3, onClick: handleClose, disabled: modalBusy, children: t("AbpIdentity::Cancel") || "Cancel" }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-      import_react22.Button,
+  const modalFooter = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react25.Button, { variant: "ghost", mr: 3, onClick: handleClose, disabled: modalBusy, children: t("AbpIdentity::Cancel") || "Cancel" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      import_react25.Button,
       {
         colorPalette: "blue",
         type: "submit",
         loading: modalBusy,
         form: "profile-form",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react4.Check, { size: 16 }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.Check, { size: 16 }),
           t("AbpIdentity::Save") || "Save"
         ]
       }
     )
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     Modal,
     {
       visible,
@@ -1540,14 +1679,14 @@ function Profile({
       footer: modalFooter,
       size: "lg",
       centered: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("form", { id: "profile-form", onSubmit: handleSubmit(onSubmit), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react22.VStack, { gap: 4, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react22.Field.Root, { invalid: !!errors.userName, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react22.Field.Label, { children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("form", { id: "profile-form", onSubmit: handleSubmit(onSubmit), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react25.VStack, { gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react25.Field.Root, { invalid: !!errors.userName, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react25.Field.Label, { children: [
             t("AbpIdentity::DisplayName:UserName") || "Username",
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Field.RequiredIndicator, {})
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react25.Field.RequiredIndicator, {})
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            import_react22.Input,
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            import_react25.Input,
             {
               type: "text",
               ...register("userName", {
@@ -1559,13 +1698,13 @@ function Profile({
               })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Field.ErrorText, { children: errors.userName?.message })
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react25.Field.ErrorText, { children: errors.userName?.message })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react22.HStack, { gap: 4, w: "full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react22.Field.Root, { invalid: !!errors.name, flex: 1, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Field.Label, { children: t("AbpIdentity::DisplayName:Name") || "Name" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-              import_react22.Input,
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react25.HStack, { gap: 4, w: "full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react25.Field.Root, { invalid: !!errors.name, flex: 1, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react25.Field.Label, { children: t("AbpIdentity::DisplayName:Name") || "Name" }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              import_react25.Input,
               {
                 type: "text",
                 ...register("name", {
@@ -1576,12 +1715,12 @@ function Profile({
                 })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Field.ErrorText, { children: errors.name?.message })
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react25.Field.ErrorText, { children: errors.name?.message })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react22.Field.Root, { invalid: !!errors.surname, flex: 1, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Field.Label, { children: t("AbpIdentity::DisplayName:Surname") || "Surname" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-              import_react22.Input,
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react25.Field.Root, { invalid: !!errors.surname, flex: 1, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react25.Field.Label, { children: t("AbpIdentity::DisplayName:Surname") || "Surname" }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              import_react25.Input,
               {
                 type: "text",
                 ...register("surname", {
@@ -1592,16 +1731,16 @@ function Profile({
                 })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Field.ErrorText, { children: errors.surname?.message })
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react25.Field.ErrorText, { children: errors.surname?.message })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react22.Field.Root, { invalid: !!errors.email, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react22.Field.Label, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react25.Field.Root, { invalid: !!errors.email, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react25.Field.Label, { children: [
             t("AbpIdentity::DisplayName:EmailAddress") || "Email Address",
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Field.RequiredIndicator, {})
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react25.Field.RequiredIndicator, {})
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            import_react22.Input,
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            import_react25.Input,
             {
               type: "email",
               ...register("email", {
@@ -1617,12 +1756,12 @@ function Profile({
               })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Field.ErrorText, { children: errors.email?.message })
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react25.Field.ErrorText, { children: errors.email?.message })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react22.Field.Root, { invalid: !!errors.phoneNumber, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Field.Label, { children: t("AbpIdentity::DisplayName:PhoneNumber") || "Phone Number" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            import_react22.Input,
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react25.Field.Root, { invalid: !!errors.phoneNumber, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react25.Field.Label, { children: t("AbpIdentity::DisplayName:PhoneNumber") || "Phone Number" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            import_react25.Input,
             {
               type: "tel",
               ...register("phoneNumber", {
@@ -1633,7 +1772,7 @@ function Profile({
               })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Field.ErrorText, { children: errors.phoneNumber?.message })
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react25.Field.ErrorText, { children: errors.phoneNumber?.message })
         ] })
       ] }) })
     }
@@ -1641,10 +1780,10 @@ function Profile({
 }
 
 // src/providers/ThemeSharedProvider.tsx
-var import_react25 = require("@chakra-ui/react");
+var import_react28 = require("@chakra-ui/react");
 
 // src/theme/index.ts
-var import_react23 = require("@chakra-ui/react");
+var import_react26 = require("@chakra-ui/react");
 var colors = {
   brand: {
     50: { value: "#e3f2fd" },
@@ -1847,7 +1986,7 @@ var semanticTokens = {
   //   },
   // },
 };
-var defaultAbpConfig = (0, import_react23.defineConfig)({
+var defaultAbpConfig = (0, import_react26.defineConfig)({
   theme: {
     tokens: {
       colors,
@@ -1869,20 +2008,20 @@ var defaultAbpConfig = (0, import_react23.defineConfig)({
 });
 function createAbpSystem(overrides) {
   if (overrides) {
-    return (0, import_react23.createSystem)(import_react23.defaultConfig, defaultAbpConfig, overrides);
+    return (0, import_react26.createSystem)(import_react26.defaultConfig, defaultAbpConfig, overrides);
   }
-  return (0, import_react23.createSystem)(import_react23.defaultConfig, defaultAbpConfig);
+  return (0, import_react26.createSystem)(import_react26.defaultConfig, defaultAbpConfig);
 }
 var abpSystem = createAbpSystem();
 
 // src/components/ui/color-mode.tsx
-var import_react24 = require("@chakra-ui/react");
+var import_react27 = require("@chakra-ui/react");
 var import_next_themes = require("next-themes");
-var React11 = __toESM(require("react"));
+var React12 = __toESM(require("react"));
 var import_lucide_react5 = require("lucide-react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function ColorModeProvider(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_next_themes.ThemeProvider, { attribute: "class", disableTransitionOnChange: true, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_next_themes.ThemeProvider, { attribute: "class", disableTransitionOnChange: true, ...props });
 }
 function useColorMode() {
   const { resolvedTheme, setTheme, forcedTheme } = (0, import_next_themes.useTheme)();
@@ -1898,12 +2037,12 @@ function useColorMode() {
 }
 function ColorModeIcon() {
   const { colorMode } = useColorMode();
-  return colorMode === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.Moon, {}) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.Sun, {});
+  return colorMode === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.Moon, {}) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.Sun, {});
 }
-var ColorModeButton = React11.forwardRef(function ColorModeButton2(props, ref) {
+var ColorModeButton = React12.forwardRef(function ColorModeButton2(props, ref) {
   const { toggleColorMode } = useColorMode();
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react24.ClientOnly, { fallback: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react24.Skeleton, { boxSize: "9" }), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    import_react24.IconButton,
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react27.ClientOnly, { fallback: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react27.Skeleton, { boxSize: "9" }), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_react27.IconButton,
     {
       onClick: toggleColorMode,
       variant: "ghost",
@@ -1917,14 +2056,14 @@ var ColorModeButton = React11.forwardRef(function ColorModeButton2(props, ref) {
           height: "5"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ColorModeIcon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ColorModeIcon, {})
     }
   ) });
 });
-var LightMode = React11.forwardRef(
+var LightMode = React12.forwardRef(
   function LightMode2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      import_react24.Span,
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      import_react27.Span,
       {
         color: "fg",
         display: "contents",
@@ -1937,10 +2076,10 @@ var LightMode = React11.forwardRef(
     );
   }
 );
-var DarkMode = React11.forwardRef(
+var DarkMode = React12.forwardRef(
   function DarkMode2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      import_react24.Span,
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      import_react27.Span,
       {
         color: "fg",
         display: "contents",
@@ -1956,7 +2095,7 @@ var DarkMode = React11.forwardRef(
 
 // src/providers/ThemeSharedProvider.tsx
 var import_core6 = require("@abpjs/core");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function ThemeSharedProvider({
   children,
   renderToasts = true,
@@ -1970,13 +2109,80 @@ function ThemeSharedProvider({
   const system = themeOverrides ? createAbpSystem(themeOverrides) : abpSystem;
   const { endSide } = (0, import_core6.useDirection)();
   toastPosition = `bottom-${endSide}`;
-  const content = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ToasterProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ConfirmationProvider, { children: [
+  const content = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ToasterProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(ConfirmationProvider, { children: [
     children,
-    renderToasts && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ToastContainer, { position: toastPosition }),
-    renderConfirmation && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ConfirmationDialog, {})
+    renderToasts && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ToastContainer, { position: toastPosition }),
+    renderConfirmation && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ConfirmationDialog, {})
   ] }) });
   const colorModeProps = enableColorMode ? { defaultTheme: defaultColorMode } : { forcedTheme: "light" };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react25.ChakraProvider, { value: system, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react25.LocaleProvider, { locale, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ColorModeProvider, { ...colorModeProps, children: content }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react28.ChakraProvider, { value: system, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react28.LocaleProvider, { locale, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ColorModeProvider, { ...colorModeProps, children: content }) }) });
+}
+
+// src/handlers/lazy-style.handler.ts
+var import_react29 = require("react");
+var import_core7 = require("@abpjs/core");
+function createLazyStyleHref(style, dir) {
+  return style.replace("{{dir}}", dir);
+}
+function useLazyStyleHandler(options = {}) {
+  const { styles = [BOOTSTRAP], initialDirection = "ltr" } = options;
+  const [direction, setDirection] = (0, import_react29.useState)(initialDirection);
+  const lazyLoadRef = (0, import_react29.useRef)(new import_core7.LazyLoadService());
+  const loadedStylesRef = (0, import_react29.useRef)(/* @__PURE__ */ new Map());
+  (0, import_react29.useEffect)(() => {
+    document.body.dir = direction;
+    const switchCSS = async () => {
+      const lazyLoad = lazyLoadRef.current;
+      for (const style of styles) {
+        const href = createLazyStyleHref(style, direction);
+        if (lazyLoad.isLoaded(href)) {
+          continue;
+        }
+        const oldDir = direction === "ltr" ? "rtl" : "ltr";
+        const oldHref = createLazyStyleHref(style, oldDir);
+        const oldLink = loadedStylesRef.current.get(oldHref);
+        if (oldLink && oldLink.parentNode) {
+          oldLink.parentNode.removeChild(oldLink);
+          lazyLoad.remove(oldHref);
+          loadedStylesRef.current.delete(oldHref);
+        }
+        try {
+          const link = document.createElement("link");
+          link.rel = "stylesheet";
+          link.href = href;
+          document.head.appendChild(link);
+          loadedStylesRef.current.set(href, link);
+        } catch (error) {
+          console.warn(`Failed to load style: ${href}`, error);
+        }
+      }
+    };
+    switchCSS();
+  }, [direction, styles]);
+  return {
+    direction,
+    setDirection
+  };
+}
+function getLoadedBootstrapDirection(styles = [BOOTSTRAP]) {
+  for (const style of styles) {
+    const ltrHref = createLazyStyleHref(style, "ltr");
+    const rtlHref = createLazyStyleHref(style, "rtl");
+    const links = document.querySelectorAll('link[rel="stylesheet"]');
+    for (const link of links) {
+      const href = link.href;
+      if (href.includes(ltrHref)) return "ltr";
+      if (href.includes(rtlHref)) return "rtl";
+    }
+  }
+  return void 0;
+}
+function initLazyStyleHandler(options = {}) {
+  return () => {
+    const { initialDirection = "ltr" } = options;
+    document.body.dir = initialDirection;
+    return { direction: initialDirection };
+  };
 }
 
 // src/utils/styles.ts
@@ -2049,12 +2255,165 @@ function injectThemeSharedStyles() {
     }
   };
 }
+
+// src/utils/nav-items.ts
+var navItems = [];
+var subscribers = /* @__PURE__ */ new Set();
+function addNavItem(item) {
+  navItems = [...navItems, item].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  notifySubscribers();
+}
+function removeNavItem(item) {
+  navItems = navItems.filter((i) => i !== item);
+  notifySubscribers();
+}
+function clearNavItems() {
+  navItems = [];
+  notifySubscribers();
+}
+function getNavItemsSync() {
+  return [...navItems];
+}
+function subscribeToNavItems(callback) {
+  subscribers.add(callback);
+  callback([...navItems]);
+  return () => {
+    subscribers.delete(callback);
+  };
+}
+function notifySubscribers() {
+  const currentItems = [...navItems];
+  subscribers.forEach((callback) => callback(currentItems));
+}
+function getNavItems() {
+  return {
+    subscribe: (callback) => {
+      const unsubscribe = subscribeToNavItems(callback);
+      return { unsubscribe };
+    }
+  };
+}
+
+// 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
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AbpModalBody,
   AbpModalFooter,
   AbpModalHeader,
   Alert,
+  BOOTSTRAP,
   Button,
   ChakraDialog,
   ChangePassword,
@@ -2062,14 +2421,22 @@ function injectThemeSharedStyles() {
   Confirmation,
   ConfirmationDialog,
   ConfirmationProvider,
+  DEFAULT_LAZY_STYLES,
   DEFAULT_STYLES,
   ErrorComponent,
   FormField,
+  HTTP_ERROR_CONFIG,
+  HttpErrorConfigContext,
+  LAZY_STYLES,
+  LazyStylesContext,
   LoaderBar,
   Modal,
   ModalBody,
+  ModalContainer,
   ModalFooter,
   ModalHeader,
+  ModalProvider,
+  PASSWORD_SETTING_KEYS,
   Profile,
   THEME_SHARED_APPEND_CONTENT,
   THEME_SHARED_STYLES,
@@ -2079,18 +2446,37 @@ function injectThemeSharedStyles() {
   Toaster,
   ToasterProvider,
   abpSystem,
+  addNavItem,
+  clearNavItems,
   createAbpSystem,
   createErrorInterceptor,
+  createLazyStyleHref,
   defaultAbpConfig,
   defineConfig,
+  getLoadedBootstrapDirection,
+  getNavItems,
+  getNavItemsSync,
+  getPasswordSettings,
+  getPasswordValidationRules,
+  getPasswordValidators,
   getSeverityBg,
   getSeverityBorderColor,
   getSeverityColorScheme,
+  httpErrorConfigFactory,
+  initLazyStyleHandler,
   injectThemeSharedStyles,
+  removeNavItem,
+  subscribeToNavItems,
   useConfirmation,
   useConfirmationContext,
   useConfirmationState,
   useErrorHandler,
+  useHttpErrorConfig,
+  useLazyStyleHandler,
+  useLazyStyles,
+  useModal,
+  useModalContext,
+  useModalState,
   useToaster,
   useToasterContext,
   useToasts