@abpjs/theme-basic 2.9.0 → 3.1.0

package/dist/index.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,25 +15,21 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  BASIC_THEME_NAV_ITEM_PROVIDERS: () => BASIC_THEME_NAV_ITEM_PROVIDERS,
+  BASIC_THEME_STYLES_PROVIDERS: () => BASIC_THEME_STYLES_PROVIDERS,
   Block: () => Block,
   BrandingProvider: () => BrandingProvider,
   ChangePassword: () => import_theme_shared.ChangePassword,
+  CurrentUserComponent: () => CurrentUserComponent,
   DefaultLogo: () => DefaultLogo,
   LAYOUTS: () => LAYOUTS,
   LanguageSelector: () => LanguageSelector,
+  LanguagesComponent: () => LanguagesComponent,
   LayoutAccount: () => LayoutAccount,
   LayoutApplication: () => LayoutApplication,
   LayoutBase: () => LayoutBase,
@@ -55,12 +49,18 @@ __export(index_exports, {
   SearchProvider: () => SearchProvider,
   Sidebar: () => Sidebar,
   SidebarLink: () => SidebarLink,
+  THEME_BASIC_STYLES: () => THEME_BASIC_STYLES,
   ThemeBasicProvider: () => ThemeBasicProvider,
   UserProfile: () => UserProfile,
+  configureNavItems: () => configureNavItems,
+  configureStyles: () => configureStyles,
   defaultThemeBasicConfig: () => defaultThemeBasicConfig,
-  defineConfig: () => import_theme_shared3.defineConfig,
+  defineConfig: () => import_theme_shared4.defineConfig,
   eNavigationElementNames: () => eNavigationElementNames,
   eThemeBasicComponents: () => eThemeBasicComponents,
+  initializeThemeBasicNavItems: () => initializeThemeBasicNavItems,
+  initializeThemeBasicStyles: () => initializeThemeBasicStyles,
+  injectThemeBasicStyles: () => injectThemeBasicStyles,
   useBranding: () => useBranding,
   useLayoutContext: () => useLayoutContext,
   useLayoutService: () => useLayoutService,
@@ -78,7 +78,17 @@ var eThemeBasicComponents = {
   EmptyLayout: "Theme.EmptyLayoutComponent",
   Logo: "Theme.LogoComponent",
   Routes: "Theme.RoutesComponent",
-  NavItems: "Theme.NavItemsComponent"
+  NavItems: "Theme.NavItemsComponent",
+  /**
+   * Component key for the current user nav item.
+   * @since 3.0.0
+   */
+  CurrentUser: "Theme.CurrentUserComponent",
+  /**
+   * Component key for the languages nav item.
+   * @since 3.0.0
+   */
+  Languages: "Theme.LanguagesComponent"
 };
 
 // src/enums/navigation-element-names.ts
@@ -834,9 +844,9 @@ function LayoutApplication({
   const navigate = (0, import_react_router_dom6.useNavigate)();
   const { logout } = (0, import_core6.useAuth)();
   const { direction, isRtl } = (0, import_core6.useDirection)();
-  const logoComponentKey = eThemeBasicComponents.Logo;
-  const routesComponentKey = eThemeBasicComponents.Routes;
-  const navItemsComponentKey = eThemeBasicComponents.NavItems;
+  const _logoComponentKey = eThemeBasicComponents.Logo;
+  const _routesComponentKey = eThemeBasicComponents.Routes;
+  const _navItemsComponentKey = eThemeBasicComponents.NavItems;
   const [isChangePasswordOpen, setIsChangePasswordOpen] = (0, import_react16.useState)(false);
   const [isProfileOpen, setIsProfileOpen] = (0, import_react16.useState)(false);
   const handleLogout = (0, import_react16.useCallback)(() => {
@@ -1020,70 +1030,200 @@ function LogoComponent({ style, linkTo }) {
 }
 
 // src/components/nav-items/NavItemsComponent.tsx
-var import_react21 = __toESM(require("react"));
+var import_react21 = require("react");
 var import_react22 = require("@chakra-ui/react");
-var import_core9 = require("@abpjs/core");
+var import_theme_shared3 = require("@abpjs/theme-shared");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function NavItemsComponent({
-  smallScreen = false,
-  userProfileProps,
-  showLanguageSelector = true,
-  showCurrentUser = true
+  smallScreen: _smallScreen = false
 }) {
-  const { currentUser, localization } = (0, import_core9.useConfig)();
-  const { isAuthenticated } = (0, import_core9.useAuth)();
-  const { language, setLanguage } = (0, import_core9.useSession)();
-  const { state, service } = useLayoutContext();
-  const defaultLanguage = (0, import_react21.useMemo)(() => {
-    const lang = localization?.languages?.find((l) => l.cultureName === language);
-    return lang?.displayName || language || "";
-  }, [localization, language]);
-  const dropdownLanguages = (0, import_react21.useMemo)(() => {
-    return localization?.languages?.filter((l) => l.cultureName !== language) || [];
-  }, [localization, language]);
-  const onChangeLang = (0, import_react21.useCallback)(
+  const navItems = (0, import_theme_shared3.useNavItems)();
+  const _trackByFn = (0, import_react21.useCallback)((item) => {
+    return item.id;
+  }, []);
+  const renderNavItem = (0, import_react21.useCallback)((item) => {
+    if (item.component) {
+      const Component = item.component;
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Component, {}, item.id);
+    }
+    if (item.html) {
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        import_react22.Box,
+        {
+          dangerouslySetInnerHTML: { __html: item.html }
+        },
+        item.id
+      );
+    }
+    if (item.action) {
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        import_react22.Box,
+        {
+          as: "button",
+          onClick: item.action,
+          cursor: "pointer",
+          width: "full"
+        },
+        item.id
+      );
+    }
+    return null;
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react22.Stack, { gap: 2, width: "full", children: navItems.map((item) => renderNavItem(item)) });
+}
+
+// src/components/nav-items/CurrentUserComponent.tsx
+var import_react23 = require("react");
+var import_react24 = require("@chakra-ui/react");
+var import_lu7 = require("react-icons/lu");
+var import_core9 = require("@abpjs/core");
+var import_react_router_dom10 = require("react-router-dom");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function CurrentUserComponent({
+  smallScreen: _smallScreen = false,
+  loginUrl = "/account/login",
+  profileUrl = "/account/manage",
+  changePasswordUrl = "/account/manage",
+  containerStyle,
+  menuZIndex = 1400
+}) {
+  const { currentUser } = (0, import_core9.useConfig)();
+  const { isAuthenticated, logout: authLogout } = (0, import_core9.useAuth)();
+  const { endSide } = (0, import_core9.useDirection)();
+  const { t } = (0, import_core9.useLocalization)();
+  const navigate = (0, import_react_router_dom10.useNavigate)();
+  const handleLogout = (0, import_react23.useCallback)(() => {
+    authLogout();
+  }, [authLogout]);
+  const handleProfile = (0, import_react23.useCallback)(() => {
+    navigate(profileUrl);
+  }, [navigate, profileUrl]);
+  const handleChangePassword = (0, import_react23.useCallback)(() => {
+    navigate(changePasswordUrl);
+  }, [navigate, changePasswordUrl]);
+  const initials = (0, import_react23.useMemo)(() => {
+    const userName = currentUser?.userName || "";
+    return userName.slice(0, 2).toUpperCase();
+  }, [currentUser?.userName]);
+  if (!isAuthenticated || !currentUser) {
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react24.Button, { asChild: true, variant: "outline", width: "full", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_router_dom10.Link, { to: loginUrl, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuLogIn, {}),
+      t("AbpAccount::Login")
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react24.HStack, { gap: "3", justify: "space-between", css: containerStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react24.HStack, { gap: "3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react24.Avatar.Root, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react24.Avatar.Fallback, { children: initials }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react24.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react24.Text, { textStyle: "sm", fontWeight: "medium", children: currentUser.userName }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react24.Menu.Root, { positioning: { placement: `${endSide}-start` }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react24.Menu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        import_react24.Box,
+        {
+          as: "button",
+          p: "2",
+          borderRadius: "md",
+          cursor: "pointer",
+          _hover: { bg: "colorPalette.subtle" },
+          "aria-label": "User menu",
+          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuEllipsisVertical, {})
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react24.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react24.Menu.Positioner, { style: { zIndex: menuZIndex }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react24.Menu.Content, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react24.Menu.Item, { value: "profile", onClick: handleProfile, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuUser, {}),
+          t("AbpUi::PersonalInfo")
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react24.Menu.Item, { value: "change-password", onClick: handleChangePassword, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuKey, {}),
+          t("AbpUi::ChangePassword")
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react24.Menu.Item, { value: "logout", onClick: handleLogout, color: "red.500", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuLogOut, {}),
+          t("AbpUi::Logout")
+        ] })
+      ] }) }) })
+    ] })
+  ] });
+}
+
+// src/components/nav-items/LanguagesComponent.tsx
+var import_react25 = require("react");
+var import_react26 = require("@chakra-ui/react");
+var import_lu8 = require("react-icons/lu");
+var import_core10 = require("@abpjs/core");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function LanguagesComponent({
+  smallScreen: _smallScreen = false,
+  compact = false,
+  containerStyle,
+  menuZIndex = 1400
+}) {
+  const { localization } = (0, import_core10.useConfig)();
+  const { language, setLanguage } = (0, import_core10.useSession)();
+  const languages = (0, import_react25.useMemo)(() => {
+    return localization?.languages || [];
+  }, [localization]);
+  const currentLanguage = (0, import_react25.useMemo)(() => {
+    return languages.find((lang) => lang.cultureName === language);
+  }, [languages, language]);
+  const defaultLanguage = (0, import_react25.useMemo)(() => {
+    return currentLanguage?.displayName || currentLanguage?.cultureName || "";
+  }, [currentLanguage]);
+  const dropdownLanguages = (0, import_react25.useMemo)(() => {
+    return languages.filter((lang) => lang.cultureName !== language);
+  }, [languages, language]);
+  const _selectedLangCulture = language || "";
+  const handleChangeLang = (0, import_react25.useCallback)(
     (cultureName) => {
       setLanguage(cultureName);
       window.location.reload();
     },
     [setLanguage]
   );
-  const logout = (0, import_react21.useCallback)(() => {
-    userProfileProps?.onLogout?.();
-  }, [userProfileProps]);
-  (0, import_react21.useEffect)(() => {
-    if (showLanguageSelector && localization?.languages && localization.languages.length > 1) {
-      service.addNavigationElement({
-        name: eNavigationElementNames.Language,
-        element: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(LanguageSelector, {}, "language-selector"),
-        order: 2
-      });
-      return () => {
-        service.removeNavigationElement(eNavigationElementNames.Language);
-      };
-    }
-  }, [service, showLanguageSelector, localization?.languages]);
-  (0, import_react21.useEffect)(() => {
-    if (showCurrentUser) {
-      service.addNavigationElement({
-        name: eNavigationElementNames.User,
-        element: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(UserProfile, { ...userProfileProps }, "user-profile"),
-        order: 3
-      });
-      return () => {
-        service.removeNavigationElement(eNavigationElementNames.User);
-      };
-    }
-  }, [service, showCurrentUser, userProfileProps]);
-  const navElements = state.navigationElements;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react22.Stack, { gap: 2, width: "full", children: navElements.map((element) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react21.default.Fragment, { children: element.element }, element.name)) });
+  if (languages.length <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react26.Menu.Root, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react26.Menu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      import_react26.Button,
+      {
+        variant: "ghost",
+        width: "full",
+        justifyContent: "start",
+        gap: "3",
+        color: "fg.muted",
+        css: containerStyle,
+        _hover: {
+          bg: "colorPalette.subtle",
+          color: "colorPalette.fg"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react26.HStack, { justifyContent: "space-between", width: "full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react26.HStack, { gap: "3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu8.LuGlobe, {}),
+            !compact && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react26.Text, { children: defaultLanguage })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu8.LuChevronDown, {})
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react26.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react26.Menu.Positioner, { style: { zIndex: menuZIndex }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react26.Menu.Content, { children: dropdownLanguages.map((lang) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      import_react26.Menu.Item,
+      {
+        value: lang.cultureName,
+        onClick: () => handleChangeLang(lang.cultureName),
+        children: lang.displayName || lang.cultureName
+      },
+      lang.cultureName
+    )) }) }) })
+  ] });
 }
 
 // src/components/routes/RoutesComponent.tsx
-var import_react23 = require("react");
-var import_react24 = require("@chakra-ui/react");
-var import_core10 = require("@abpjs/core");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_react27 = require("react");
+var import_react28 = require("@chakra-ui/react");
+var import_core11 = require("@abpjs/core");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function getVisibleRoutes2(routes) {
   return routes.reduce((acc, val) => {
     if (val.invisible) {
@@ -1097,35 +1237,35 @@ function getVisibleRoutes2(routes) {
   }, []);
 }
 function RoutesComponent({
-  smallScreen = false,
+  smallScreen: _smallScreen = false,
   defaultIcon,
   routes: customRoutes
 }) {
-  const { routes: configRoutes } = (0, import_core10.useConfig)();
-  const { direction } = (0, import_core10.useDirection)();
+  const { routes: configRoutes } = (0, import_core11.useConfig)();
+  const { direction } = (0, import_core11.useDirection)();
   const routes = customRoutes || configRoutes || [];
-  const visibleRoutes = (0, import_react23.useMemo)(() => {
+  const _visibleRoutes = (0, import_react27.useMemo)(() => {
     return getVisibleRoutes2(routes);
   }, [routes]);
-  const trackByFn = (index, item) => {
+  const _trackByFn = (index, item) => {
     return item.name || item.path || index;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react24.Stack, { gap: "1", dir: direction, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(NavLinks, { defaultIcon }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react28.Stack, { gap: "1", dir: direction, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(NavLinks, { defaultIcon }) });
 }
 
 // src/providers/ThemeBasicProvider.tsx
-var import_react25 = require("react");
-var import_theme_shared3 = require("@abpjs/theme-shared");
-var import_core11 = require("@abpjs/core");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_react29 = require("react");
+var import_theme_shared4 = require("@abpjs/theme-shared");
+var import_core12 = require("@abpjs/core");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function LocaleSync({ children }) {
-  const { language } = (0, import_core11.useSession)();
-  const { direction } = (0, import_core11.useDirection)();
-  (0, import_react25.useEffect)(() => {
+  const { language } = (0, import_core12.useSession)();
+  const { direction } = (0, import_core12.useDirection)();
+  (0, import_react29.useEffect)(() => {
     document.documentElement.dir = direction;
     document.documentElement.lang = language || "en";
   }, [direction, language]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children });
 }
 function ThemeBasicInner({
   children,
@@ -1140,10 +1280,10 @@ function ThemeBasicInner({
   appName,
   logoLink
 }) {
-  const { language } = (0, import_core11.useSession)();
+  const { language } = (0, import_core12.useSession)();
   const locale = language || "en-US";
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_theme_shared3.ThemeSharedProvider,
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    import_theme_shared4.ThemeSharedProvider,
     {
       renderToasts,
       renderConfirmation,
@@ -1152,20 +1292,20 @@ function ThemeBasicInner({
       enableColorMode,
       defaultColorMode,
       locale,
-      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(LocaleSync, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LocaleSync, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         BrandingProvider,
         {
           logo,
           logoIcon,
           appName,
           logoLink,
-          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(LayoutProvider, { children })
+          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LayoutProvider, { children })
         }
       ) })
     }
   );
 }
-var defaultThemeBasicConfig = (0, import_theme_shared3.defineConfig)({
+var defaultThemeBasicConfig = (0, import_theme_shared4.defineConfig)({
   theme: {
     tokens: {
       colors: {
@@ -1233,7 +1373,7 @@ function ThemeBasicProvider({
   logoLink
 }) {
   const mergedThemeOverrides = themeOverrides || defaultThemeBasicConfig;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     ThemeBasicInner,
     {
       renderToasts,
@@ -1251,16 +1391,114 @@ function ThemeBasicProvider({
   );
 }
 
+// src/providers/nav-item.provider.ts
+var import_theme_shared5 = require("@abpjs/theme-shared");
+function configureNavItems(navItems) {
+  return () => {
+    navItems.addItems([
+      {
+        id: eThemeBasicComponents.Languages,
+        component: LanguagesComponent,
+        order: 100
+      },
+      {
+        id: eThemeBasicComponents.CurrentUser,
+        component: CurrentUserComponent,
+        order: 200
+      }
+    ]);
+  };
+}
+var BASIC_THEME_NAV_ITEM_PROVIDERS = {
+  configureNavItems
+};
+function initializeThemeBasicNavItems() {
+  const navItemsService = (0, import_theme_shared5.getNavItemsService)();
+  configureNavItems(navItemsService)();
+}
+
+// src/providers/styles.provider.ts
+var THEME_BASIC_STYLES = `
+/* Content header styles */
+.content-header-title {
+    font-size: 24px;
+}
+
+.entry-row {
+    margin-bottom: 15px;
+}
+
+/* Input validation styles */
+.input-validation-error {
+    border-color: #dc3545;
+}
+
+.field-validation-error {
+    font-size: 0.8em;
+}
+
+/* Table styles */
+.ui-table .ui-table-tbody > tr.empty-row > div.empty-row-content {
+    border: 1px solid #c8c8c8;
+}
+
+.ui-table .pagination-wrapper {
+    background-color: #f4f4f4;
+    border: 1px solid #c8c8c8;
+}
+
+/* Bordered datatable styles (added in v3.0.0) */
+.bordered .datatable-body-row {
+    border-top: 1px solid #eee;
+    margin-top: -1px;
+}
+
+/* Loading overlay */
+.abp-loading {
+    background: rgba(0, 0, 0, 0.1);
+}
+
+/* Modal backdrop */
+.modal-backdrop {
+    background-color: rgba(0, 0, 0, 0.6);
+}
+`;
+function injectThemeBasicStyles() {
+  const existingStyle = document.getElementById("abpjs-theme-basic-styles");
+  if (existingStyle) {
+    return;
+  }
+  const styleElement = document.createElement("style");
+  styleElement.id = "abpjs-theme-basic-styles";
+  styleElement.textContent = THEME_BASIC_STYLES;
+  document.head.appendChild(styleElement);
+}
+function configureStyles() {
+  return () => {
+    injectThemeBasicStyles();
+  };
+}
+var BASIC_THEME_STYLES_PROVIDERS = {
+  configureStyles
+};
+function initializeThemeBasicStyles() {
+  configureStyles()();
+}
+
 // src/index.ts
 var LAYOUTS = [LayoutApplication, LayoutAccount, LayoutEmpty];
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BASIC_THEME_NAV_ITEM_PROVIDERS,
+  BASIC_THEME_STYLES_PROVIDERS,
   Block,
   BrandingProvider,
   ChangePassword,
+  CurrentUserComponent,
   DefaultLogo,
   LAYOUTS,
   LanguageSelector,
+  LanguagesComponent,
   LayoutAccount,
   LayoutApplication,
   LayoutBase,
@@ -1280,12 +1518,18 @@ var LAYOUTS = [LayoutApplication, LayoutAccount, LayoutEmpty];
   SearchProvider,
   Sidebar,
   SidebarLink,
+  THEME_BASIC_STYLES,
   ThemeBasicProvider,
   UserProfile,
+  configureNavItems,
+  configureStyles,
   defaultThemeBasicConfig,
   defineConfig,
   eNavigationElementNames,
   eThemeBasicComponents,
+  initializeThemeBasicNavItems,
+  initializeThemeBasicStyles,
+  injectThemeBasicStyles,
   useBranding,
   useLayoutContext,
   useLayoutService,