@abpjs/theme-shared 2.9.0 → 3.1.0

package/dist/index.js

@@ -36,12 +36,14 @@ __export(index_exports, {
   Alert: () => Alert,
   BOOTSTRAP: () => BOOTSTRAP,
   Button: () => Button3,
-  ChakraDialog: () => import_react15.Dialog,
+  ChakraDialog: () => import_react16.Dialog,
   ChangePassword: () => ChangePassword,
   Checkbox: () => Checkbox,
   Confirmation: () => Confirmation,
   ConfirmationDialog: () => ConfirmationDialog,
   ConfirmationProvider: () => ConfirmationProvider,
+  DEFAULT_ERROR_LOCALIZATIONS: () => DEFAULT_ERROR_LOCALIZATIONS,
+  DEFAULT_ERROR_MESSAGES: () => DEFAULT_ERROR_MESSAGES,
   DEFAULT_LAZY_STYLES: () => DEFAULT_LAZY_STYLES,
   DEFAULT_STYLES: () => DEFAULT_STYLES,
   ErrorComponent: () => ErrorComponent,
@@ -57,26 +59,27 @@ __export(index_exports, {
   ModalFooter: () => AbpModalFooter,
   ModalHeader: () => AbpModalHeader,
   ModalProvider: () => ModalProvider,
+  NavItem: () => NavItem,
+  NavItemsService: () => NavItemsService,
   PASSWORD_SETTING_KEYS: () => PASSWORD_SETTING_KEYS,
   Profile: () => Profile,
   THEME_SHARED_APPEND_CONTENT: () => THEME_SHARED_APPEND_CONTENT,
+  THEME_SHARED_ROUTE_PROVIDERS: () => THEME_SHARED_ROUTE_PROVIDERS,
   THEME_SHARED_STYLES: () => THEME_SHARED_STYLES,
   ThemeSharedAppendContentContext: () => ThemeSharedAppendContentContext,
   ThemeSharedProvider: () => ThemeSharedProvider,
   ToastContainer: () => ToastContainer,
-  Toaster: () => Toaster,
   ToasterProvider: () => ToasterProvider,
   abpSystem: () => abpSystem,
-  addNavItem: () => addNavItem,
-  clearNavItems: () => clearNavItems,
+  configureRoutes: () => configureRoutes,
   createAbpSystem: () => createAbpSystem,
   createErrorInterceptor: () => createErrorInterceptor,
   createLazyStyleHref: () => createLazyStyleHref,
   defaultAbpConfig: () => defaultAbpConfig,
-  defineConfig: () => import_react26.defineConfig,
+  defineConfig: () => import_react27.defineConfig,
+  eThemeSharedRouteNames: () => eThemeSharedRouteNames,
   getLoadedBootstrapDirection: () => getLoadedBootstrapDirection,
-  getNavItems: () => getNavItems,
-  getNavItemsSync: () => getNavItemsSync,
+  getNavItemsService: () => getNavItemsService,
   getPasswordSettings: () => getPasswordSettings,
   getPasswordValidationRules: () => getPasswordValidationRules,
   getPasswordValidators: () => getPasswordValidators,
@@ -85,9 +88,8 @@ __export(index_exports, {
   getSeverityColorScheme: () => getSeverityColorPalette,
   httpErrorConfigFactory: () => httpErrorConfigFactory,
   initLazyStyleHandler: () => initLazyStyleHandler,
+  initializeThemeSharedRoutes: () => initializeThemeSharedRoutes,
   injectThemeSharedStyles: () => injectThemeSharedStyles,
-  removeNavItem: () => removeNavItem,
-  subscribeToNavItems: () => subscribeToNavItems,
   useConfirmation: () => useConfirmation,
   useConfirmationContext: () => useConfirmationContext,
   useConfirmationState: () => useConfirmationState,
@@ -98,23 +100,13 @@ __export(index_exports, {
   useModal: () => useModal,
   useModalContext: () => useModalContext,
   useModalState: () => useModalState,
+  useNavItems: () => useNavItems,
   useToaster: () => useToaster,
   useToasterContext: () => useToasterContext,
   useToasts: () => useToasts
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/models/toaster.ts
-var Toaster;
-((Toaster2) => {
-  let Status;
-  ((Status2) => {
-    Status2["confirm"] = "confirm";
-    Status2["reject"] = "reject";
-    Status2["dismiss"] = "dismiss";
-  })(Status = Toaster2.Status || (Toaster2.Status = {}));
-})(Toaster || (Toaster = {}));
-
 // src/models/confirmation.ts
 var Confirmation;
 ((Confirmation2) => {
@@ -126,6 +118,24 @@ var Confirmation;
   })(Status = Confirmation2.Status || (Confirmation2.Status = {}));
 })(Confirmation || (Confirmation = {}));
 
+// src/models/nav-item.ts
+var NavItem = class {
+  /**
+   * Create a new NavItem.
+   * @param props - Partial properties to initialize the nav item
+   * @since 3.1.0
+   */
+  constructor(props) {
+    this.id = props.id ?? "";
+    this.component = props.component;
+    this.html = props.html;
+    this.action = props.action;
+    this.order = props.order;
+    this.requiredPolicy = props.requiredPolicy;
+    this.visible = props.visible;
+  }
+};
+
 // src/constants/styles.ts
 var BOOTSTRAP = "bootstrap-{{dir}}.min.css";
 var DEFAULT_STYLES = `
@@ -482,7 +492,7 @@ function ConfirmationProvider({ children }) {
   (0, import_react5.useEffect)(() => {
     if (!escapeListenerRef.current) return;
     const handleEscape = (event) => {
-      if (event.key === "Escape" && confirmation && confirmation.options?.closable !== false) {
+      if (event.key === "Escape" && confirmation && confirmation.options?.dismissible !== false) {
         respond(Confirmation.Status.dismiss);
       }
     };
@@ -663,6 +673,28 @@ var DEFAULT_ERROR_MESSAGES = {
   500: "AbpUi::DefaultErrorMessage500",
   503: "AbpUi::DefaultErrorMessage503"
 };
+var DEFAULT_ERROR_LOCALIZATIONS = {
+  defaultError: {
+    title: "AbpUi::DefaultErrorMessage",
+    details: "AbpUi::DefaultErrorMessageDetail"
+  },
+  defaultError401: {
+    title: "AbpUi::DefaultErrorMessage401",
+    details: "AbpUi::DefaultErrorMessage401Detail"
+  },
+  defaultError403: {
+    title: "AbpUi::DefaultErrorMessage403",
+    details: "AbpUi::DefaultErrorMessage403Detail"
+  },
+  defaultError404: {
+    title: "AbpUi::DefaultErrorMessage404",
+    details: "AbpUi::DefaultErrorMessage404Detail"
+  },
+  defaultError500: {
+    title: "AbpUi::DefaultErrorMessage500",
+    details: "AbpUi::DefaultErrorMessage500Detail"
+  }
+};
 function useErrorHandler(options = {}) {
   const { navigate, loginPath = "/account/login" } = options;
   const confirmation = useConfirmation();
@@ -735,9 +767,153 @@ function isHttpErrorResponse(error) {
   return typeof error === "object" && error !== null && "status" in error && typeof error.status === "number";
 }
 
-// src/components/toast/Toast.tsx
+// src/hooks/use-nav-items.ts
 var import_react8 = require("react");
-var import_react9 = require("@chakra-ui/react");
+
+// src/services/nav-items.service.ts
+var _NavItemsService = class _NavItemsService {
+  constructor() {
+    this._items = [];
+    this._listeners = /* @__PURE__ */ new Set();
+  }
+  /**
+   * Get singleton instance
+   * @since 3.0.0
+   */
+  static getInstance() {
+    if (!_NavItemsService._instance) {
+      _NavItemsService._instance = new _NavItemsService();
+    }
+    return _NavItemsService._instance;
+  }
+  /**
+   * Reset the singleton instance (useful for testing)
+   * @internal
+   */
+  static resetInstance() {
+    _NavItemsService._instance = null;
+  }
+  /**
+   * Get current items (sorted by order)
+   * @since 3.0.0
+   */
+  get items() {
+    return [...this._items].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  }
+  /**
+   * Subscribe to item changes.
+   * Returns an unsubscribe function.
+   *
+   * @param listener - Callback function to receive item updates
+   * @returns Unsubscribe function
+   * @since 3.0.0
+   */
+  subscribe(listener) {
+    this._listeners.add(listener);
+    listener(this.items);
+    return () => {
+      this._listeners.delete(listener);
+    };
+  }
+  /**
+   * Get items as an observable-like interface.
+   * Compatible with Angular's Observable pattern.
+   *
+   * @returns Object with subscribe method
+   * @since 3.0.0
+   */
+  get items$() {
+    return {
+      subscribe: (callback) => {
+        const unsubscribe = this.subscribe(callback);
+        return { unsubscribe };
+      }
+    };
+  }
+  /**
+   * Add one or more items.
+   * Items are automatically sorted by order.
+   *
+   * @param newItems - Array of items to add
+   * @since 3.0.0
+   * @since 3.1.0 - Renamed parameter from items to newItems
+   */
+  addItems(newItems) {
+    const existingIds = new Set(this._items.map((item) => item.id));
+    const itemsToAdd = newItems.filter((item) => !existingIds.has(item.id)).map((item) => item instanceof NavItem ? item : new NavItem(item));
+    this._items = [...this._items, ...itemsToAdd];
+    this.notify();
+  }
+  /**
+   * Remove an item by id.
+   *
+   * @param id - The id of the item to remove
+   * @since 3.0.0
+   */
+  removeItem(id) {
+    const initialLength = this._items.length;
+    this._items = this._items.filter((item) => item.id !== id);
+    if (this._items.length !== initialLength) {
+      this.notify();
+    }
+  }
+  /**
+   * Patch an existing item by id.
+   * Updates only the specified properties.
+   *
+   * @param id - The id of the item to patch
+   * @param patch - Partial item data to merge
+   * @since 3.0.0
+   */
+  patchItem(id, patch) {
+    const index = this._items.findIndex((item) => item.id === id);
+    if (index !== -1) {
+      this._items = [
+        ...this._items.slice(0, index),
+        { ...this._items[index], ...patch },
+        ...this._items.slice(index + 1)
+      ];
+      this.notify();
+    }
+  }
+  /**
+   * Clear all items.
+   * @since 3.0.0
+   */
+  clear() {
+    if (this._items.length > 0) {
+      this._items = [];
+      this.notify();
+    }
+  }
+  /**
+   * Notify all listeners of changes.
+   */
+  notify() {
+    const currentItems = this.items;
+    this._listeners.forEach((listener) => listener(currentItems));
+  }
+};
+_NavItemsService._instance = null;
+var NavItemsService = _NavItemsService;
+function getNavItemsService() {
+  return NavItemsService.getInstance();
+}
+
+// src/hooks/use-nav-items.ts
+function useNavItems(service) {
+  const navItemsService = service || getNavItemsService();
+  const [items, setItems] = (0, import_react8.useState)(navItemsService.items);
+  (0, import_react8.useEffect)(() => {
+    const unsubscribe = navItemsService.subscribe(setItems);
+    return unsubscribe;
+  }, [navItemsService]);
+  return items;
+}
+
+// src/components/toast/Toast.tsx
+var import_react9 = require("react");
+var import_react10 = require("@chakra-ui/react");
 var import_core = require("@abpjs/core");
 var import_lucide_react = require("lucide-react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -844,7 +1020,7 @@ function getPlacement(position) {
 var toasterCache = /* @__PURE__ */ new Map();
 function getToaster(placement) {
   if (!toasterCache.has(placement)) {
-    toasterCache.set(placement, (0, import_react9.createToaster)({
+    toasterCache.set(placement, (0, import_react10.createToaster)({
       placement,
       pauseOnPageIdle: true
     }));
@@ -854,14 +1030,14 @@ function getToaster(placement) {
 function ToastContainer({ position = "bottom-right", containerKey }) {
   const { toasts, service } = useToasterContext();
   const { t } = (0, import_core.useLocalization)();
-  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)(() => {
+  const displayedToastsRef = (0, import_react9.useRef)(/* @__PURE__ */ new Set());
+  const placement = (0, import_react9.useMemo)(() => getPlacement(position), [position]);
+  const toaster = (0, import_react9.useMemo)(() => getToaster(placement), [placement]);
+  const filteredToasts = (0, import_react9.useMemo)(() => {
     if (!containerKey) return toasts;
     return toasts.filter((toast) => toast.options?.containerKey === containerKey);
   }, [toasts, containerKey]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const newToasts = filteredToasts.filter((toast) => !displayedToastsRef.current.has(toast.id));
     newToasts.forEach((toast) => {
       displayedToastsRef.current.add(toast.id);
@@ -894,11 +1070,11 @@ function ToastContainer({ position = "bottom-right", containerKey }) {
       });
     });
   }, [filteredToasts, t, service, toaster]);
-  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) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react10.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react10.Toaster, { toaster, insetInline: { mdDown: "4" }, children: (toast) => {
     const severity = toast.meta?.severity || "info";
     const closable = toast.meta?.closable !== false;
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      import_react9.Toast.Root,
+      import_react10.Toast.Root,
       {
         bg: getSeverityBg(severity),
         borderWidth: "1px",
@@ -906,13 +1082,13 @@ function ToastContainer({ position = "bottom-right", containerKey }) {
         borderRadius: "lg",
         boxShadow: "lg",
         width: { md: "sm" },
-        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 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react10.Flex, { align: "flex-start", gap: 3, p: 4, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react10.Box, { flexShrink: 0, pt: "2px", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SeverityIcon, { severity }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react10.Stack, { gap: 1, flex: 1, children: [
+            toast.title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react10.Toast.Title, { fontWeight: "bold", fontSize: "sm", color: "fg", children: toast.title }),
+            toast.description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react10.Toast.Description, { fontSize: "sm", color: "gray.700", children: toast.description })
           ] }),
-          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" }) })
+          closable && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react10.Toast.CloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react10.CloseButton, { size: "sm" }) })
         ] })
       }
     );
@@ -920,8 +1096,8 @@ function ToastContainer({ position = "bottom-right", containerKey }) {
 }
 
 // src/components/confirmation/Confirmation.tsx
-var import_react10 = require("react");
-var import_react11 = require("@chakra-ui/react");
+var import_react11 = require("react");
+var import_react12 = require("@chakra-ui/react");
 var import_core2 = require("@abpjs/core");
 var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
@@ -969,7 +1145,7 @@ function getSeverityColorPalette2(severity) {
 function ConfirmationDialog({ className }) {
   const { confirmation, respond } = useConfirmationState();
   const { t } = (0, import_core2.useLocalization)();
-  const cancelRef = (0, import_react10.useRef)(null);
+  const cancelRef = (0, import_react11.useRef)(null);
   if (!confirmation) {
     return null;
   }
@@ -995,29 +1171,29 @@ function ConfirmationDialog({ className }) {
     respond(Confirmation.Status.dismiss);
   };
   const handleOpenChange = (details) => {
-    if (!details.open && options?.closable !== false) {
+    if (!details.open && options?.dismissible !== false) {
       handleDismiss();
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_react11.Dialog.Root,
+    import_react12.Dialog.Root,
     {
       open: true,
       onOpenChange: handleOpenChange,
       role: "alertdialog",
       placement: "center",
       initialFocusEl: () => cancelRef.current,
-      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: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react12.Portal, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react12.Dialog.Backdrop, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react12.Dialog.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react12.Dialog.Content, { className, maxWidth: "md", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react12.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react12.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 }) })
+            localizedTitle && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react12.Dialog.Title, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react12.Text, { fontWeight: "bold", fontSize: "lg", children: localizedTitle }) })
           ] }) }),
-          /* @__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: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react12.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react12.Text, { color: "gray.600", children: localizedMessage }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react12.Dialog.Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react12.Flex, { gap: 3, children: [
             !options?.hideCancelBtn && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              import_react11.Button,
+              import_react12.Button,
               {
                 ref: cancelRef,
                 variant: "ghost",
@@ -1026,7 +1202,7 @@ function ConfirmationDialog({ className }) {
               }
             ),
             !options?.hideYesBtn && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              import_react11.Button,
+              import_react12.Button,
               {
                 colorPalette: getSeverityColorPalette2(severity),
                 onClick: handleConfirm,
@@ -1041,7 +1217,7 @@ function ConfirmationDialog({ className }) {
 }
 
 // src/components/errors/ErrorComponent.tsx
-var import_react12 = require("@chakra-ui/react");
+var import_react13 = require("@chakra-ui/react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function ErrorComponent({
   title = "Error",
@@ -1053,9 +1229,9 @@ function ErrorComponent({
   onHomeClick,
   homeButtonText = "Go Home"
 }) {
-  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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react13.Container, { maxW: "container.md", py: 20, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react13.VStack, { gap: 6, textAlign: "center", children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_react12.Heading,
+      import_react13.Heading,
       {
         size: "4xl",
         color: "red.500",
@@ -1063,10 +1239,10 @@ function ErrorComponent({
         children: title
       }
     ),
-    /* @__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: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react13.Text, { fontSize: "lg", color: "gray.600", children: details }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react13.Box, { display: "flex", gap: 3, children: [
       isHomeShow && onHomeClick && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        import_react12.Button,
+        import_react13.Button,
         {
           colorPalette: "green",
           size: "lg",
@@ -1075,7 +1251,7 @@ function ErrorComponent({
         }
       ),
       showCloseButton && onDestroy && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        import_react12.Button,
+        import_react13.Button,
         {
           colorPalette: "blue",
           size: "lg",
@@ -1088,35 +1264,21 @@ function ErrorComponent({
 }
 
 // src/components/loader-bar/LoaderBar.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_core3 = require("@abpjs/core");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function LoaderBar({
   containerClass = "abp-loader-bar",
   progressClass = "abp-progress",
-  filter,
+  filter: _filter,
   intervalPeriod = 300,
   stopDelay = 400
 }) {
   const { loading } = (0, import_core3.useLoader)();
-  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_react13.useEffect)(() => {
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-      }
-    };
-  }, []);
-  const startLoading = () => {
+  const [isLoading, setIsLoading] = (0, import_react14.useState)(false);
+  const [progressLevel, setProgressLevel] = (0, import_react14.useState)(0);
+  const intervalRef = (0, import_react14.useRef)(null);
+  const startLoading = (0, import_react14.useCallback)(() => {
     setIsLoading(true);
     setProgressLevel(0);
     if (intervalRef.current) {
@@ -1134,8 +1296,8 @@ function LoaderBar({
         return prev + 10;
       });
     }, intervalPeriod);
-  };
-  const stopLoading = () => {
+  }, [intervalPeriod]);
+  const stopLoading = (0, import_react14.useCallback)(() => {
     setProgressLevel(100);
     if (intervalRef.current) {
       clearInterval(intervalRef.current);
@@ -1145,7 +1307,21 @@ function LoaderBar({
       setIsLoading(false);
       setProgressLevel(0);
     }, stopDelay);
-  };
+  }, [stopDelay]);
+  (0, import_react14.useEffect)(() => {
+    if (loading) {
+      startLoading();
+    } else {
+      stopLoading();
+    }
+  }, [loading, startLoading, stopLoading]);
+  (0, import_react14.useEffect)(() => {
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, []);
   if (!isLoading && progressLevel === 0) {
     return null;
   }
@@ -1180,8 +1356,8 @@ function LoaderBar({
 }
 
 // src/components/modal/Modal.tsx
-var import_react14 = __toESM(require("react"));
-var import_react15 = require("@chakra-ui/react");
+var import_react15 = __toESM(require("react"));
+var import_react16 = require("@chakra-ui/react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function getSizeWidth(size) {
   switch (size) {
@@ -1220,12 +1396,12 @@ function Modal({
   preventScroll = true,
   onInit
 }) {
-  const prevVisibleRef = import_react14.default.useRef(false);
-  const onInitRef = import_react14.default.useRef(onInit);
-  import_react14.default.useEffect(() => {
+  const prevVisibleRef = import_react15.default.useRef(false);
+  const onInitRef = import_react15.default.useRef(onInit);
+  import_react15.default.useEffect(() => {
     onInitRef.current = onInit;
   }, [onInit]);
-  import_react14.default.useEffect(() => {
+  import_react15.default.useEffect(() => {
     if (visible && !prevVisibleRef.current && onInitRef.current) {
       onInitRef.current();
     }
@@ -1238,7 +1414,7 @@ function Modal({
     onVisibleChange?.(details.open);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    import_react15.Dialog.Root,
+    import_react16.Dialog.Root,
     {
       open: visible,
       onOpenChange: handleOpenChange,
@@ -1249,10 +1425,10 @@ function Modal({
       motionPreset,
       trapFocus,
       preventScroll,
-      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,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react16.Portal, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react16.Dialog.Backdrop, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react16.Dialog.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          import_react16.Dialog.Content,
           {
             className: modalClass,
             width: getSizeWidth(size),
@@ -1262,16 +1438,16 @@ function Modal({
             minHeight,
             children: [
               (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_runtime8.jsx)(import_react16.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react16.Flex, { justify: "space-between", align: "center", width: "100%", children: [
+                  header && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react16.Dialog.Title, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react16.Text, { fontWeight: "bold", fontSize: "lg", children: header }) }),
+                  showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react16.Dialog.CloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react16.CloseButton, { size: "sm" }) })
                 ] }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react15.Separator, {})
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react16.Separator, {})
               ] }),
-              children && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react15.Dialog.Body, { py: 4, children }),
+              children && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react16.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 }) })
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react16.Separator, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react16.Dialog.Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react16.Flex, { gap: 3, justify: "flex-end", w: "100%", children: footer }) })
               ] })
             ]
           }
@@ -1281,17 +1457,17 @@ function Modal({
   );
 }
 function AbpModalHeader({ children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react15.Text, { fontWeight: "bold", fontSize: "lg", className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react16.Text, { fontWeight: "bold", fontSize: "lg", className, children });
 }
 function AbpModalBody({ children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react15.Box, { color: "gray.600", className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react16.Box, { color: "gray.600", className, children });
 }
 function AbpModalFooter({ children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react15.Flex, { gap: 3, justify: "flex-end", className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react16.Flex, { gap: 3, justify: "flex-end", className, children });
 }
 
 // src/components/ui/Alert.tsx
-var import_react16 = require("@chakra-ui/react");
+var import_react17 = require("@chakra-ui/react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function Alert({
   status = "info",
@@ -1304,28 +1480,28 @@ function Alert({
   borderRadius = "md"
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-    import_react16.Alert.Root,
+    import_react17.Alert.Root,
     {
       status,
       className,
       mb,
       borderRadius,
       children: [
-        showIcon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react16.Alert.Indicator, {}),
+        showIcon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react17.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 })
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react17.Alert.Title, { children: title }),
+          (description || children) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react17.Alert.Description, { children: description || children })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react17.Alert.Title, { children })
       ]
     }
   );
 }
 
 // src/components/ui/Button.tsx
-var import_react17 = require("react");
-var import_react18 = require("@chakra-ui/react");
+var import_react18 = require("react");
+var import_react19 = require("@chakra-ui/react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var Button3 = (0, import_react17.forwardRef)(
+var Button3 = (0, import_react18.forwardRef)(
   function Button4({
     children,
     type = "button",
@@ -1342,7 +1518,7 @@ var Button3 = (0, import_react17.forwardRef)(
     ml
   }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_react18.Button,
+      import_react19.Button,
       {
         ref,
         type,
@@ -1364,10 +1540,10 @@ var Button3 = (0, import_react17.forwardRef)(
 );
 
 // src/components/ui/Checkbox.tsx
-var import_react19 = require("react");
-var import_react20 = require("@chakra-ui/react");
+var import_react20 = require("react");
+var import_react21 = require("@chakra-ui/react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var Checkbox = (0, import_react19.forwardRef)(
+var Checkbox = (0, import_react20.forwardRef)(
   function Checkbox2({
     children,
     checked,
@@ -1385,7 +1561,7 @@ var Checkbox = (0, import_react19.forwardRef)(
     className
   }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-      import_react20.Checkbox.Root,
+      import_react21.Checkbox.Root,
       {
         checked,
         defaultChecked,
@@ -1398,7 +1574,7 @@ var Checkbox = (0, import_react19.forwardRef)(
         className,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            import_react20.Checkbox.HiddenInput,
+            import_react21.Checkbox.HiddenInput,
             {
               ref,
               id,
@@ -1407,8 +1583,8 @@ var Checkbox = (0, import_react19.forwardRef)(
               onChange
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react20.Checkbox.Control, {}),
-          children && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react20.Checkbox.Label, { children })
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react21.Checkbox.Control, {}),
+          children && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react21.Checkbox.Label, { children })
         ]
       }
     );
@@ -1416,7 +1592,7 @@ var Checkbox = (0, import_react19.forwardRef)(
 );
 
 // src/components/ui/FormField.tsx
-var import_react21 = require("@chakra-ui/react");
+var import_react22 = require("@chakra-ui/react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function FormField({
   label,
@@ -1429,20 +1605,20 @@ function FormField({
   htmlFor,
   className
 }) {
-  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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react22.Field.Root, { invalid, disabled, className, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react22.Field.Label, { htmlFor, children: [
       label,
-      required && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react21.Field.RequiredIndicator, {})
+      required && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react22.Field.RequiredIndicator, {})
     ] }),
     children,
-    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 })
+    helperText && !invalid && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react22.Field.HelperText, { children: helperText }),
+    invalid && errorText && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react22.Field.ErrorText, { children: errorText })
   ] });
 }
 
 // src/components/change-password/ChangePassword.tsx
-var import_react22 = require("react");
-var import_react23 = require("@chakra-ui/react");
+var import_react23 = require("react");
+var import_react24 = 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");
@@ -1468,7 +1644,7 @@ function ChangePassword({
     }
   });
   const newPassword = watch("newPassword");
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (visible) {
       reset();
     }
@@ -1510,9 +1686,9 @@ function ChangePassword({
     }
   };
   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.jsx)(import_react24.Button, { variant: "ghost", mr: 3, onClick: handleClose, disabled: isSubmitting, children: t("AbpIdentity::Cancel") || "Cancel" }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-      import_react23.Button,
+      import_react24.Button,
       {
         colorPalette: "blue",
         type: "submit",
@@ -1534,14 +1710,14 @@ function ChangePassword({
       header: t("AbpIdentity::ChangePassword") || "Change Password",
       footer: modalFooter,
       centered: true,
-      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: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("form", { id: "change-password-form", onSubmit: handleSubmit(onSubmit), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react24.VStack, { gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react24.Field.Root, { invalid: !!errors.password, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react24.Field.Label, { children: [
             t("AbpIdentity::DisplayName:CurrentPassword") || "Current Password",
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Field.RequiredIndicator, {})
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react24.Field.RequiredIndicator, {})
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            import_react23.Input,
+            import_react24.Input,
             {
               type: "password",
               ...register("password", {
@@ -1549,29 +1725,29 @@ function ChangePassword({
               })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Field.ErrorText, { children: errors.password?.message })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react24.Field.ErrorText, { children: errors.password?.message })
         ] }),
-        /* @__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: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react24.Field.Root, { invalid: !!errors.newPassword, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react24.Field.Label, { children: [
             t("AbpIdentity::DisplayName:NewPassword") || "New Password",
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Field.RequiredIndicator, {})
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react24.Field.RequiredIndicator, {})
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            import_react23.Input,
+            import_react24.Input,
             {
               type: "password",
               ...register("newPassword", passwordValidation)
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Field.ErrorText, { children: errors.newPassword?.message })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react24.Field.ErrorText, { children: errors.newPassword?.message })
         ] }),
-        /* @__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: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react24.Field.Root, { invalid: !!errors.repeatNewPassword, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react24.Field.Label, { children: [
             t("AbpIdentity::DisplayName:NewPasswordConfirm") || "Confirm New Password",
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Field.RequiredIndicator, {})
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react24.Field.RequiredIndicator, {})
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            import_react23.Input,
+            import_react24.Input,
             {
               type: "password",
               ...register("repeatNewPassword", {
@@ -1580,7 +1756,7 @@ function ChangePassword({
               })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Field.ErrorText, { children: errors.repeatNewPassword?.message })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react24.Field.ErrorText, { children: errors.repeatNewPassword?.message })
         ] })
       ] }) })
     }
@@ -1588,8 +1764,8 @@ function ChangePassword({
 }
 
 // src/components/profile/Profile.tsx
-var import_react24 = require("react");
-var import_react25 = require("@chakra-ui/react");
+var import_react25 = require("react");
+var import_react26 = 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");
@@ -1616,13 +1792,13 @@ function Profile({
     }
   });
   const modalBusy = isSubmitting || loading;
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (visible) {
       fetchProfile().then(() => {
       });
     }
   }, [visible, fetchProfile]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (profile) {
       reset({
         userName: profile.userName || "",
@@ -1654,9 +1830,9 @@ function Profile({
     }
   };
   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.jsx)(import_react26.Button, { variant: "ghost", mr: 3, onClick: handleClose, disabled: modalBusy, children: t("AbpIdentity::Cancel") || "Cancel" }),
     /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-      import_react25.Button,
+      import_react26.Button,
       {
         colorPalette: "blue",
         type: "submit",
@@ -1679,14 +1855,14 @@ function Profile({
       footer: modalFooter,
       size: "lg",
       centered: true,
-      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: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("form", { id: "profile-form", onSubmit: handleSubmit(onSubmit), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react26.VStack, { gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react26.Field.Root, { invalid: !!errors.userName, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react26.Field.Label, { children: [
             t("AbpIdentity::DisplayName:UserName") || "Username",
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react25.Field.RequiredIndicator, {})
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react26.Field.RequiredIndicator, {})
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            import_react25.Input,
+            import_react26.Input,
             {
               type: "text",
               ...register("userName", {
@@ -1698,13 +1874,13 @@ function Profile({
               })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react25.Field.ErrorText, { children: errors.userName?.message })
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react26.Field.ErrorText, { children: errors.userName?.message })
         ] }),
-        /* @__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.jsxs)(import_react26.HStack, { gap: 4, w: "full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react26.Field.Root, { invalid: !!errors.name, flex: 1, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react26.Field.Label, { children: t("AbpIdentity::DisplayName:Name") || "Name" }),
             /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              import_react25.Input,
+              import_react26.Input,
               {
                 type: "text",
                 ...register("name", {
@@ -1715,12 +1891,12 @@ function Profile({
                 })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react25.Field.ErrorText, { children: errors.name?.message })
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react26.Field.ErrorText, { children: errors.name?.message })
           ] }),
-          /* @__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.jsxs)(import_react26.Field.Root, { invalid: !!errors.surname, flex: 1, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react26.Field.Label, { children: t("AbpIdentity::DisplayName:Surname") || "Surname" }),
             /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              import_react25.Input,
+              import_react26.Input,
               {
                 type: "text",
                 ...register("surname", {
@@ -1731,16 +1907,16 @@ function Profile({
                 })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react25.Field.ErrorText, { children: errors.surname?.message })
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react26.Field.ErrorText, { children: errors.surname?.message })
           ] })
         ] }),
-        /* @__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: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react26.Field.Root, { invalid: !!errors.email, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react26.Field.Label, { children: [
             t("AbpIdentity::DisplayName:EmailAddress") || "Email Address",
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react25.Field.RequiredIndicator, {})
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react26.Field.RequiredIndicator, {})
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            import_react25.Input,
+            import_react26.Input,
             {
               type: "email",
               ...register("email", {
@@ -1756,12 +1932,12 @@ function Profile({
               })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react25.Field.ErrorText, { children: errors.email?.message })
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react26.Field.ErrorText, { children: errors.email?.message })
         ] }),
-        /* @__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.jsxs)(import_react26.Field.Root, { invalid: !!errors.phoneNumber, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react26.Field.Label, { children: t("AbpIdentity::DisplayName:PhoneNumber") || "Phone Number" }),
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            import_react25.Input,
+            import_react26.Input,
             {
               type: "tel",
               ...register("phoneNumber", {
@@ -1772,7 +1948,7 @@ function Profile({
               })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react25.Field.ErrorText, { children: errors.phoneNumber?.message })
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react26.Field.ErrorText, { children: errors.phoneNumber?.message })
         ] })
       ] }) })
     }
@@ -1780,10 +1956,10 @@ function Profile({
 }
 
 // src/providers/ThemeSharedProvider.tsx
-var import_react28 = require("@chakra-ui/react");
+var import_react29 = require("@chakra-ui/react");
 
 // src/theme/index.ts
-var import_react26 = require("@chakra-ui/react");
+var import_react27 = require("@chakra-ui/react");
 var colors = {
   brand: {
     50: { value: "#e3f2fd" },
@@ -1986,7 +2162,7 @@ var semanticTokens = {
   //   },
   // },
 };
-var defaultAbpConfig = (0, import_react26.defineConfig)({
+var defaultAbpConfig = (0, import_react27.defineConfig)({
   theme: {
     tokens: {
       colors,
@@ -2008,16 +2184,16 @@ var defaultAbpConfig = (0, import_react26.defineConfig)({
 });
 function createAbpSystem(overrides) {
   if (overrides) {
-    return (0, import_react26.createSystem)(import_react26.defaultConfig, defaultAbpConfig, overrides);
+    return (0, import_react27.createSystem)(import_react27.defaultConfig, defaultAbpConfig, overrides);
   }
-  return (0, import_react26.createSystem)(import_react26.defaultConfig, defaultAbpConfig);
+  return (0, import_react27.createSystem)(import_react27.defaultConfig, defaultAbpConfig);
 }
 var abpSystem = createAbpSystem();
 
 // src/components/ui/color-mode.tsx
-var import_react27 = require("@chakra-ui/react");
+var import_react28 = require("@chakra-ui/react");
 var import_next_themes = require("next-themes");
-var React12 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var import_lucide_react5 = require("lucide-react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function ColorModeProvider(props) {
@@ -2039,10 +2215,10 @@ function ColorModeIcon() {
   const { colorMode } = useColorMode();
   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 = React12.forwardRef(function ColorModeButton2(props, ref) {
+var ColorModeButton = React11.forwardRef(function ColorModeButton2(props, ref) {
   const { toggleColorMode } = useColorMode();
-  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,
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react28.ClientOnly, { fallback: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react28.Skeleton, { boxSize: "9" }), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_react28.IconButton,
     {
       onClick: toggleColorMode,
       variant: "ghost",
@@ -2060,10 +2236,10 @@ var ColorModeButton = React12.forwardRef(function ColorModeButton2(props, ref) {
     }
   ) });
 });
-var LightMode = React12.forwardRef(
+var LightMode = React11.forwardRef(
   function LightMode2(props, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      import_react27.Span,
+      import_react28.Span,
       {
         color: "fg",
         display: "contents",
@@ -2076,10 +2252,10 @@ var LightMode = React12.forwardRef(
     );
   }
 );
-var DarkMode = React12.forwardRef(
+var DarkMode = React11.forwardRef(
   function DarkMode2(props, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      import_react27.Span,
+      import_react28.Span,
       {
         color: "fg",
         display: "contents",
@@ -2101,35 +2277,65 @@ function ThemeSharedProvider({
   renderToasts = true,
   renderConfirmation = true,
   themeOverrides,
-  toastPosition = "bottom-right",
+  toastPosition: _toastPosition = "bottom-right",
   enableColorMode = false,
   defaultColorMode = "light",
   locale = "en-US"
 }) {
   const system = themeOverrides ? createAbpSystem(themeOverrides) : abpSystem;
   const { endSide } = (0, import_core6.useDirection)();
-  toastPosition = `bottom-${endSide}`;
+  const resolvedToastPosition = endSide === "left" ? "bottom-left" : "bottom-right";
   const content = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ToasterProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(ConfirmationProvider, { children: [
     children,
-    renderToasts && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ToastContainer, { position: toastPosition }),
+    renderToasts && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ToastContainer, { position: resolvedToastPosition }),
     renderConfirmation && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ConfirmationDialog, {})
   ] }) });
   const colorModeProps = enableColorMode ? { defaultTheme: defaultColorMode } : { forcedTheme: "light" };
-  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 }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react29.ChakraProvider, { value: system, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react29.LocaleProvider, { locale, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ColorModeProvider, { ...colorModeProps, children: content }) }) });
 }
 
-// src/handlers/lazy-style.handler.ts
-var import_react29 = require("react");
+// src/providers/route.provider.ts
 var import_core7 = require("@abpjs/core");
+
+// src/enums/route-names.ts
+var eThemeSharedRouteNames = /* @__PURE__ */ ((eThemeSharedRouteNames2) => {
+  eThemeSharedRouteNames2["Administration"] = "AbpUiNavigation::Menu:Administration";
+  return eThemeSharedRouteNames2;
+})(eThemeSharedRouteNames || {});
+
+// src/providers/route.provider.ts
+function configureRoutes(routes) {
+  return () => {
+    routes.add([
+      {
+        name: "AbpUiNavigation::Menu:Administration" /* Administration */,
+        path: "",
+        order: 100,
+        iconClass: "fa fa-wrench"
+      }
+    ]);
+  };
+}
+var THEME_SHARED_ROUTE_PROVIDERS = {
+  configureRoutes
+};
+function initializeThemeSharedRoutes() {
+  const routesService = (0, import_core7.getRoutesService)();
+  configureRoutes(routesService)();
+}
+
+// src/handlers/lazy-style.handler.ts
+var import_react30 = require("react");
+var import_core8 = 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)(() => {
+  const [direction, setDirection] = (0, import_react30.useState)(initialDirection);
+  const lazyLoadRef = (0, import_react30.useRef)(new import_core8.LazyLoadService());
+  const loadedStylesRef = (0, import_react30.useRef)(/* @__PURE__ */ new Map());
+  (0, import_react30.useEffect)(() => {
     document.body.dir = direction;
     const switchCSS = async () => {
       const lazyLoad = lazyLoadRef.current;
@@ -2256,44 +2462,6 @@ 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",
@@ -2421,6 +2589,8 @@ function getPasswordValidationRules(store) {
   Confirmation,
   ConfirmationDialog,
   ConfirmationProvider,
+  DEFAULT_ERROR_LOCALIZATIONS,
+  DEFAULT_ERROR_MESSAGES,
   DEFAULT_LAZY_STYLES,
   DEFAULT_STYLES,
   ErrorComponent,
@@ -2436,26 +2606,27 @@ function getPasswordValidationRules(store) {
   ModalFooter,
   ModalHeader,
   ModalProvider,
+  NavItem,
+  NavItemsService,
   PASSWORD_SETTING_KEYS,
   Profile,
   THEME_SHARED_APPEND_CONTENT,
+  THEME_SHARED_ROUTE_PROVIDERS,
   THEME_SHARED_STYLES,
   ThemeSharedAppendContentContext,
   ThemeSharedProvider,
   ToastContainer,
-  Toaster,
   ToasterProvider,
   abpSystem,
-  addNavItem,
-  clearNavItems,
+  configureRoutes,
   createAbpSystem,
   createErrorInterceptor,
   createLazyStyleHref,
   defaultAbpConfig,
   defineConfig,
+  eThemeSharedRouteNames,
   getLoadedBootstrapDirection,
-  getNavItems,
-  getNavItemsSync,
+  getNavItemsService,
   getPasswordSettings,
   getPasswordValidationRules,
   getPasswordValidators,
@@ -2464,9 +2635,8 @@ function getPasswordValidationRules(store) {
   getSeverityColorScheme,
   httpErrorConfigFactory,
   initLazyStyleHandler,
+  initializeThemeSharedRoutes,
   injectThemeSharedStyles,
-  removeNavItem,
-  subscribeToNavItems,
   useConfirmation,
   useConfirmationContext,
   useConfirmationState,
@@ -2477,6 +2647,7 @@ function getPasswordValidationRules(store) {
   useModal,
   useModalContext,
   useModalState,
+  useNavItems,
   useToaster,
   useToasterContext,
   useToasts