@strapi/admin 5.0.0-beta.6 → 5.0.0-beta.8

package/dist/admin/{AuthenticatedLayout-TNbTifIA.js → AuthenticatedLayout-QwEem8GL.js}

@@ -13,19 +13,19 @@ const lt = require('semver/functions/lt');
 const valid = require('semver/functions/valid');
 const icons = require('@strapi/icons');
 const get = require('lodash/get');
-const styled = require('styled-components');
-const rbac = require('./rbac-xgYdpUSq.js');
+const styledComponents = require('styled-components');
+const rbac = require('./rbac-5b9ylhpa.js');
 const Ornaments = require('./Ornaments-UTssGzOw.js');
-const index = require('./index-FJLgZ-Wg.js');
+const index = require('./index-UrJZyInv.js');
 const users = require('./users-R5A0kUOV.js');
 const immer = require('immer');
 const set = require('lodash/set');
-const PrivateRoute = require('./PrivateRoute-nJgGpBXP.js');
+const PrivateRoute = require('./PrivateRoute-wBE5vMxe.js');
 const cloneDeep = require('lodash/cloneDeep');
 const reactRedux = require('react-redux');
-const selectors = require('./selectors-C62Wf5On.js');
+const selectors = require('./selectors-NDEu6dJa.js');
 const useOnce = require('./useOnce--ZSbXFh3.js');
-const admin = require('./admin-vlKSOeHB.js');
+const admin = require('./admin-p0djr5G6.js');
 
 const _interopDefault = e => e && e.__esModule ? e : { default: e };
 
@@ -51,12 +51,11 @@ const React__namespace = /*#__PURE__*/_interopNamespace(React);
 const lt__default = /*#__PURE__*/_interopDefault(lt);
 const valid__default = /*#__PURE__*/_interopDefault(valid);
 const get__default = /*#__PURE__*/_interopDefault(get);
-const styled__default = /*#__PURE__*/_interopDefault(styled);
 const set__default = /*#__PURE__*/_interopDefault(set);
 const cloneDeep__default = /*#__PURE__*/_interopDefault(cloneDeep);
 
 const name = "@strapi/admin";
-const version = "5.0.0-beta.5";
+const version = "5.0.0-beta.7";
 const description = "Strapi Admin";
 const repository = {
 	type: "git",
@@ -134,16 +133,16 @@ const dependencies = {
 	"@radix-ui/react-context": "1.0.1",
 	"@radix-ui/react-toolbar": "1.0.4",
 	"@reduxjs/toolkit": "1.9.7",
-	"@strapi/design-system": "2.0.0-beta.2",
-	"@strapi/icons": "2.0.0-beta.2",
-	"@strapi/permissions": "5.0.0-beta.5",
-	"@strapi/provider-audit-logs-local": "5.0.0-beta.5",
-	"@strapi/types": "5.0.0-beta.5",
-	"@strapi/typescript-utils": "5.0.0-beta.5",
-	"@strapi/utils": "5.0.0-beta.5",
-	"@testing-library/dom": "9.2.0",
-	"@testing-library/react": "14.0.0",
-	"@testing-library/user-event": "14.4.3",
+	"@strapi/design-system": "2.0.0-beta.4",
+	"@strapi/icons": "2.0.0-beta.4",
+	"@strapi/permissions": "5.0.0-beta.7",
+	"@strapi/provider-audit-logs-local": "5.0.0-beta.7",
+	"@strapi/types": "5.0.0-beta.7",
+	"@strapi/typescript-utils": "5.0.0-beta.7",
+	"@strapi/utils": "5.0.0-beta.7",
+	"@testing-library/dom": "10.1.0",
+	"@testing-library/react": "15.0.7",
+	"@testing-library/user-event": "14.5.2",
 	axios: "1.6.8",
 	bcryptjs: "2.4.3",
 	boxen: "5.1.2",
@@ -180,7 +179,6 @@ const dependencies = {
 	"react-is": "^18.2.0",
 	"react-query": "3.39.3",
 	"react-redux": "8.1.3",
-	"react-router-dom": "6.22.3",
 	"react-select": "5.8.0",
 	"react-window": "1.8.10",
 	rimraf: "5.0.5",
@@ -188,15 +186,14 @@ const dependencies = {
 	scheduler: "0.23.0",
 	semver: "7.5.4",
 	sift: "16.0.1",
-	"styled-components": "5.3.11",
 	typescript: "5.3.2",
 	"use-context-selector": "1.4.1",
 	yup: "0.32.9",
 	zod: "^3.22.4"
 };
 const devDependencies = {
-	"@strapi/admin-test-utils": "5.0.0-beta.5",
-	"@strapi/data-transfer": "5.0.0-beta.5",
+	"@strapi/admin-test-utils": "5.0.0-beta.7",
+	"@strapi/data-transfer": "5.0.0-beta.7",
 	"@strapi/pack-up": "5.0.0",
 	"@types/codemirror5": "npm:@types/codemirror@^5.60.15",
 	"@types/fs-extra": "11.0.4",
@@ -214,10 +211,10 @@ const devDependencies = {
 	"@types/sanitize-html": "2.11.0",
 	"@vitejs/plugin-react-swc": "3.6.0",
 	"koa-body": "6.0.1",
-	react: "^18.2.0",
-	"react-dom": "^18.2.0",
+	react: "18.3.1",
+	"react-dom": "18.3.1",
 	"react-router-dom": "6.22.3",
-	"styled-components": "5.3.11",
+	"styled-components": "6.1.8",
 	vite: "5.1.6",
 	"vite-plugin-dts": "3.7.3"
 };
@@ -226,7 +223,7 @@ const peerDependencies = {
 	react: "^17.0.0 || ^18.0.0",
 	"react-dom": "^17.0.0 || ^18.0.0",
 	"react-router-dom": "^6.0.0",
-	"styled-components": "^5.2.1"
+	"styled-components": "^6.0.0"
 };
 const engines = {
 	node: ">=18.0.0 <=20.x.x",
@@ -312,7 +309,8 @@ const GuidedTourModal = () => {
           designSystem.IconButton,
           {
             onClick: handleCtaClick,
-            "aria-label": formatMessage({
+            withTooltip: false,
+            label: formatMessage({
               id: "app.utils.close-label",
               defaultMessage: "Close"
             }),
@@ -347,7 +345,7 @@ const GuidedTourModal = () => {
     }
   ) }) }) });
 };
-const ModalWrapper = styled__default.default(designSystem.Flex)`
+const ModalWrapper = styledComponents.styled(designSystem.Flex)`
   position: fixed;
   z-index: 4;
   inset: 0;
@@ -385,7 +383,7 @@ const GuidedTourStepper = ({
           children: sectionIndex + 1
         }
       ) }),
-      title && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", fontWeight: "bold", textColor: "neutral800", as: "h3", id: "title", children: formatMessage(title) })
+      title && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", fontWeight: "bold", textColor: "neutral800", tag: "h3", id: "title", children: formatMessage(title) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "stretch", children: [
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { marginRight: 8, direction: "column", justifyContent: "center", minWidth: `3rem`, children: hasSectionAfter && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -397,7 +395,7 @@ const GuidedTourStepper = ({
         cta && (cta.target ? /* @__PURE__ */ jsxRuntime.jsx(
           designSystem.LinkButton,
           {
-            as: reactRouterDom.NavLink,
+            tag: reactRouterDom.NavLink,
             endIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowRight, {}),
             onClick: onCtaClick,
             to: cta.target,
@@ -426,7 +424,7 @@ const GuidedTourContent = ({ id, defaultMessage }) => {
 const DocumentationLink = (children) => /* @__PURE__ */ jsxRuntime.jsx(
   designSystem.Typography,
   {
-    as: "a",
+    tag: "a",
     textColor: "primary600",
     target: "_blank",
     rel: "noopener noreferrer",
@@ -438,7 +436,7 @@ const Bold = (children) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typograph
 const Paragraph = (children) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children });
 const Light = (children) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children });
 const List = (children) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 6, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { children }) });
-const LiStyled = styled__default.default.li`
+const LiStyled = styledComponents.styled.li`
   list-style: disc;
   &::marker {
     color: ${({ theme }) => theme.colors.neutral800};
@@ -446,7 +444,26 @@ const LiStyled = styled__default.default.li`
 `;
 const ListItem = (children) => /* @__PURE__ */ jsxRuntime.jsx(LiStyled, { children });
 
-const BrandIconWrapper = styled__default.default(designSystem.Box)`
+const MainNavWrapper = styledComponents.styled(designSystem.Flex)`
+  border-right: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+const MainNav = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  MainNavWrapper,
+  {
+    alignItems: "normal",
+    tag: "nav",
+    background: "neutral0",
+    direction: "column",
+    height: "100vh",
+    position: "sticky",
+    top: 0,
+    zIndex: 2,
+    width: 10,
+    ...props
+  }
+);
+
+const BrandIconWrapper = styledComponents.styled(designSystem.Box)`
   svg,
   img {
     border-radius: ${({ theme }) => theme.borderRadius};
@@ -485,13 +502,16 @@ const NavBrand = () => {
   ] }) });
 };
 
-const MainNavLinkWrapper = styled__default.default(reactRouterDom.NavLink)`
+const MainNavLinkWrapper = styledComponents.styled(reactRouterDom.NavLink)`
   text-decoration: none;
   display: block;
   border-radius: ${({ theme }) => theme.borderRadius};
   background: ${({ theme }) => theme.colors.neutral0};
-  color: ${({ theme }) => theme.colors.neutral600};
+  color: ${({ theme }) => theme.colors.neutral500};
   position: relative;
+  width: fit-content;
+  padding-block: 0.6rem;
+  padding-inline: 0.6rem;
 
   &:hover,
   &.active {
@@ -518,23 +538,35 @@ const LinkImpl = ({ children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(MainNavLinkWrapper, { ...props, children });
 };
 const TooltipImpl = ({ children, label, position = "right" }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tooltip, { position, label, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", width: 7, height: 7, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tooltip, { side: position, label, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children }) });
 };
-const IconImpl = ({ children }) => {
+const IconImpl = ({ label, children }) => {
   if (!children) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", "aria-hidden": true, as: "span", width: 5, height: 5, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.AccessibleIcon, { label, children });
 };
-const CustomBadge = styled__default.default(designSystem.Badge)`
+const CustomBadge = styledComponents.styled(designSystem.Badge)`
   /* override default badge styles to change the border radius of the Base element in the Design System */
   border-radius: ${({ theme }) => theme.spaces[10]};
+  height: 2rem;
 `;
 const BadgeImpl = ({ children, label, ...props }) => {
   if (!children) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(CustomBadge, { position: "absolute", top: "-1.2rem", right: "-0.4rem", "aria-label": label, ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CustomBadge,
+    {
+      position: "absolute",
+      top: "-0.8rem",
+      left: "1.7rem",
+      "aria-label": label,
+      active: false,
+      ...props,
+      children
+    }
+  );
 };
 const NavLink = {
   Link: LinkImpl,
@@ -543,204 +575,130 @@ const NavLink = {
   Badge: BadgeImpl
 };
 
-const LinkUserWrapper = styled__default.default(designSystem.Box)`
-  width: 15rem;
-  position: absolute;
-  bottom: ${({ theme }) => theme.spaces[9]};
+const MenuTrigger = styledComponents.styled(designSystem.Menu.Trigger)`
+  height: 100%;
+`;
+const MenuContent = styledComponents.styled(designSystem.Menu.Content)`
   left: ${({ theme }) => theme.spaces[5]};
 `;
-const LinkUser = styled__default.default(reactRouterDom.NavLink)`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  text-decoration: none;
-  padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[4]}`};
-  border-radius: ${({ theme }) => theme.spaces[1]};
-
-  &:hover {
-    background: ${({ theme, logout }) => logout ? theme.colors.danger100 : theme.colors.primary100};
-    text-decoration: none;
+const MenuItem = styledComponents.styled(designSystem.Menu.Item)`
+  span {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
   }
+`;
+const NavUser = ({ children, initials, ...props }) => {
+  const { formatMessage } = reactIntl.useIntl();
+  const navigate = reactRouterDom.useNavigate();
+  const logout = rbac.useAuth("Logout", (state) => state.logout);
+  const handleProfile = () => {
+    navigate("/me");
+  };
+  const handleLogout = () => {
+    logout();
+    navigate("/auth/login");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Root, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(MenuTrigger, { endIcon: null, fullWidth: true, justifyContent: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Initials, { children: initials }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { tag: "span", children })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(MenuContent, { popoverPlacement: "top", zIndex: 3, width: "15rem", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { onSelect: handleProfile, children: formatMessage({
+        id: "global.profile",
+        defaultMessage: "Profile"
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(MenuItem, { onSelect: handleLogout, color: "danger600", children: [
+        formatMessage({
+          id: "app.components.LeftMenu.logout",
+          defaultMessage: "Logout"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(icons.SignOut, {})
+      ] })
+    ] })
+  ] }) });
+};
 
-  svg {
-    fill: ${({ theme }) => theme.colors.danger600};
+const sortLinks = (links) => {
+  return links.sort((a, b) => {
+    const positionA = a.position ?? 6;
+    const positionB = b.position ?? 6;
+    if (positionA < positionB) {
+      return -1;
+    } else {
+      return 1;
+    }
+  });
+};
+const NavLinkBadgeCounter = styledComponents.styled(NavLink.Badge)`
+  span {
+    color: ${({ theme }) => theme.colors.neutral0};
   }
 `;
-const NavLinkWrapper = styled__default.default(designSystem.Box)`
-  div:nth-child(2) {
-    /* remove badge background color */
-    background: transparent;
-  }
+const NavLinkBadgeLock = styledComponents.styled(NavLink.Badge)`
+  background-color: transparent;
+`;
+const NavListWrapper = styledComponents.styled(designSystem.Flex)`
+  overflow-y: auto;
 `;
 const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
-  const navUserRef = React__namespace.useRef(null);
-  const [userLinksVisible, setUserLinksVisible] = React__namespace.useState(false);
-  const {
-    logos: { menu }
-  } = rbac.useConfiguration("LeftMenu");
-  const [condensed, setCondensed] = index.usePersistentState("navbar-condensed", false);
   const user = rbac.useAuth("AuthenticatedApp", (state) => state.user);
-  const { formatMessage } = reactIntl.useIntl();
   const { trackUsage } = rbac.useTracking();
   const { pathname } = reactRouterDom.useLocation();
-  const logout = rbac.useAuth("Logout", (state) => state.logout);
   const userDisplayName = users.getDisplayName(user);
+  const { formatMessage, locale } = reactIntl.useIntl();
+  const formatter = designSystem.useCollator(locale, {
+    sensitivity: "base"
+  });
   const initials = userDisplayName.split(" ").map((name) => name.substring(0, 1)).join("").substring(0, 2);
-  const handleToggleUserLinks = () => setUserLinksVisible((prev) => !prev);
-  const handleBlur = (e) => {
-    if (!e.currentTarget.contains(e.relatedTarget) && /**
-     * TODO: can we replace this by just using the navUserRef?
-     */
-    e.relatedTarget?.parentElement?.id !== "main-nav-user-button") {
-      setUserLinksVisible(false);
-    }
-  };
   const handleClickOnLink = (destination) => {
     trackUsage("willNavigate", { from: pathname, to: destination });
   };
-  const menuTitle = formatMessage({
-    id: "app.components.LeftMenu.navbrand.title",
-    defaultMessage: "Strapi Dashboard"
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.MainNav, { condensed, children: [
-    condensed ? (
-      /**
-       * TODO: remove the conditional rendering once the new Main nav is fully implemented
-       */
-      /* @__PURE__ */ jsxRuntime.jsx(NavBrand, {})
-    ) : /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.NavBrand,
-      {
-        as: reactRouterDom.NavLink,
-        workplace: formatMessage({
-          id: "app.components.LeftMenu.navbrand.workplace",
-          defaultMessage: "Workplace"
-        }),
-        title: menuTitle,
-        icon: /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src: menu.custom?.url || menu.default,
-            alt: formatMessage({
-              id: "app.components.LeftMenu.logo.alt",
-              defaultMessage: "Application logo"
-            })
-          }
-        )
-      }
-    ),
+  const listLinksAlphabeticallySorted = [...pluginsSectionLinks, ...generalSectionLinks].sort(
+    (a, b) => formatter.compare(formatMessage(a.intlLabel), formatMessage(b.intlLabel))
+  );
+  const listLinks = sortLinks(listLinksAlphabeticallySorted);
+  return /* @__PURE__ */ jsxRuntime.jsxs(MainNav, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(NavBrand, {}),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.NavSections, { children: [
-      condensed && /* @__PURE__ */ jsxRuntime.jsx(NavLink.Link, { to: "/", onClick: () => handleClickOnLink("/"), children: /* @__PURE__ */ jsxRuntime.jsx(
-        NavLink.Tooltip,
+    /* @__PURE__ */ jsxRuntime.jsx(NavListWrapper, { tag: "ul", gap: 3, direction: "column", flex: 1, paddingTop: 3, paddingBottom: 3, children: listLinks.length > 0 ? listLinks.map((link) => {
+      const LinkIcon = link.icon;
+      const badgeContentLock = link?.lockIcon ? /* @__PURE__ */ jsxRuntime.jsx(icons.Lock, {}) : void 0;
+      const badgeContentNumeric = link.notificationsCount && link.notificationsCount > 0 ? link.notificationsCount.toString() : void 0;
+      const labelValue = formatMessage(link.intlLabel);
+      return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { tag: "li", children: /* @__PURE__ */ jsxRuntime.jsx(NavLink.Tooltip, { label: labelValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        NavLink.Link,
         {
-          label: formatMessage({ id: "global.home", defaultMessage: "Home" }),
-          children: /* @__PURE__ */ jsxRuntime.jsx(NavLink.Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(icons.House, { fill: "neutral500" }) })
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.NavLink,
-        {
-          as: reactRouterDom.NavLink,
-          to: "/content-manager",
-          icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Feather, {}),
-          onClick: () => handleClickOnLink("/content-manager"),
-          children: formatMessage({ id: "global.content-manager", defaultMessage: "Content manager" })
-        }
-      ),
-      pluginsSectionLinks.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.NavSection,
-        {
-          label: formatMessage({
-            id: "app.components.LeftMenu.plugins",
-            defaultMessage: "Plugins"
-          }),
-          children: pluginsSectionLinks.map((link) => {
-            if (link.to === "content-manager") {
-              return null;
-            }
-            const LinkIcon = link.icon;
-            return /* @__PURE__ */ jsxRuntime.jsx(NavLinkWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
-              designSystem.NavLink,
+          to: link.to,
+          onClick: () => handleClickOnLink(link.to),
+          "aria-label": labelValue,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(NavLink.Icon, { label: labelValue, children: /* @__PURE__ */ jsxRuntime.jsx(LinkIcon, { width: "2rem", height: "2rem", fill: "neutral500" }) }),
+            badgeContentLock ? /* @__PURE__ */ jsxRuntime.jsx(
+              NavLinkBadgeLock,
               {
-                as: reactRouterDom.NavLink,
-                to: link.to,
-                icon: /* @__PURE__ */ jsxRuntime.jsx(LinkIcon, {}),
-                onClick: () => handleClickOnLink(link.to),
-                badgeContent: link?.lockIcon ? /* @__PURE__ */ jsxRuntime.jsx(icons.Lock, { width: "1.5rem", height: "1.5rem" }) : void 0,
-                children: formatMessage(link.intlLabel)
+                label: "locked",
+                textColor: "neutral500",
+                paddingLeft: 0,
+                paddingRight: 0,
+                children: badgeContentLock
               }
-            ) }, link.to);
-          })
-        }
-      ) : null,
-      generalSectionLinks.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.NavSection,
-        {
-          label: formatMessage({
-            id: "app.components.LeftMenu.general",
-            defaultMessage: "General"
-          }),
-          children: generalSectionLinks.map((link) => {
-            const LinkIcon = link.icon;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              designSystem.NavLink,
+            ) : badgeContentNumeric ? /* @__PURE__ */ jsxRuntime.jsx(
+              NavLinkBadgeCounter,
               {
-                as: reactRouterDom.NavLink,
-                badgeContent: link.notificationsCount && link.notificationsCount > 0 ? link.notificationsCount.toString() : void 0,
-                to: link.to,
-                icon: /* @__PURE__ */ jsxRuntime.jsx(LinkIcon, {}),
-                onClick: () => handleClickOnLink(link.to),
-                children: formatMessage(link.intlLabel)
-              },
-              link.to
-            );
-          })
-        }
-      ) : null
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.NavFooter, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.NavUser,
-        {
-          id: "main-nav-user-button",
-          ref: navUserRef,
-          onClick: handleToggleUserLinks,
-          initials,
-          children: userDisplayName
-        }
-      ),
-      userLinksVisible && /* @__PURE__ */ jsxRuntime.jsx(
-        LinkUserWrapper,
-        {
-          onBlur: handleBlur,
-          padding: 1,
-          shadow: "tableShadow",
-          background: "neutral0",
-          hasRadius: true,
-          children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.FocusTrap, { onEscape: handleToggleUserLinks, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 0, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(LinkUser, { tabIndex: 0, onClick: handleToggleUserLinks, to: "/me", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: formatMessage({
-              id: "global.profile",
-              defaultMessage: "Profile"
-            }) }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs(LinkUser, { tabIndex: 0, onClick: logout, to: "/auth/login", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "danger600", children: formatMessage({
-                id: "app.components.LeftMenu.logout",
-                defaultMessage: "Logout"
-              }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(icons.SignOut, {})
-            ] })
-          ] }) })
+                label: badgeContentNumeric,
+                backgroundColor: "primary600",
+                width: "2.3rem",
+                color: "neutral0",
+                children: badgeContentNumeric
+              }
+            ) : null
+          ]
         }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.NavCondense, { onClick: () => setCondensed((s) => !s), children: condensed ? formatMessage({
-        id: "app.components.LeftMenu.expand",
-        defaultMessage: "Expand the navbar"
-      }) : formatMessage({
-        id: "app.components.LeftMenu.collapse",
-        defaultMessage: "Collapse the navbar"
-      }) })
-    ] })
+      ) }) }, link.to);
+    }) : null }),
+    /* @__PURE__ */ jsxRuntime.jsx(NavUser, { initials, children: userDisplayName })
   ] });
 };
 
@@ -763,7 +721,7 @@ const Onboarding = () => {
     }
   ];
   const Icon = isOpen ? icons.Cross : icons.Question;
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { as: "aside", position: "fixed", bottom: 2, right: 2, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { tag: "aside", position: "fixed", bottom: 2, right: 2, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       HelperButton,
       {
@@ -806,7 +764,7 @@ const Onboarding = () => {
                 /* @__PURE__ */ jsxRuntime.jsx(
                   TextLink,
                   {
-                    as: "a",
+                    tag: "a",
                     href: WATCH_MORE.href,
                     target: "_blank",
                     rel: "noreferrer noopener",
@@ -822,7 +780,7 @@ const Onboarding = () => {
           VIDEO_LINKS.map(({ href, duration, label }, index) => /* @__PURE__ */ jsxRuntime.jsxs(
             VideoLinkWrapper,
             {
-              as: "a",
+              tag: "a",
               href,
               target: "_blank",
               rel: "noreferrer noopener",
@@ -832,7 +790,7 @@ const Onboarding = () => {
               paddingLeft: 6,
               paddingRight: 11,
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingRight: 5, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral200", variant: "alpha", children: index + 1 }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingRight: 5, children: /* @__PURE__ */ jsxRuntime.jsx(Number, { textColor: "neutral200", variant: "alpha", children: index + 1 }) }),
                 /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { position: "relative", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(Preview, { src: onboardingPreview, alt: "" }),
                   /* @__PURE__ */ jsxRuntime.jsx(
@@ -851,7 +809,7 @@ const Onboarding = () => {
                   )
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "start", paddingLeft: 4, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", children: formatMessage(label) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Label, { fontWeight: "bold", children: formatMessage(label) }),
                   /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { children: ":" }),
                   /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", variant: "pi", children: duration })
                 ] })
@@ -873,7 +831,7 @@ const Onboarding = () => {
                 /* @__PURE__ */ jsxRuntime.jsx(
                   TextLink,
                   {
-                    as: "a",
+                    tag: "a",
                     href,
                     target: "_blank",
                     rel: "noreferrer noopener",
@@ -890,16 +848,18 @@ const Onboarding = () => {
     ) })
   ] });
 };
-const HelperButton = styled__default.default(designSystem.Button)`
+const HelperButton = styledComponents.styled(designSystem.Button)`
   border-radius: 50%;
   padding: ${({ theme }) => theme.spaces[3]};
   /* Resetting 2rem height defined by Button component */
   height: 100%;
 `;
-const IconWrapper = styled__default.default(designSystem.Flex)`
+const IconWrapper = styledComponents.styled(designSystem.Flex)`
   transform: translate(-50%, -50%);
 `;
-const VideoLinkWrapper = styled__default.default(designSystem.Flex)`
+const Number = styledComponents.styled(designSystem.Typography)``;
+const Label = styledComponents.styled(designSystem.Typography)``;
+const VideoLinkWrapper = styledComponents.styled(designSystem.Flex)`
   text-decoration: none;
 
   :focus-visible {
@@ -910,29 +870,30 @@ const VideoLinkWrapper = styled__default.default(designSystem.Flex)`
     background: ${({ theme }) => theme.colors.primary100};
 
     /* Hover style for the number displayed */
-    ${designSystem.Typography}:first-child {
+    ${Number} {
       color: ${({ theme }) => theme.colors.primary500};
     }
 
     /* Hover style for the label */
-    ${designSystem.Typography}:nth-child(1) {
+    ${Label} {
       color: ${({ theme }) => theme.colors.primary600};
     }
   }
 `;
-const Preview = styled__default.default.img`
+const Preview = styledComponents.styled.img`
   width: ${({ theme }) => theme.spaces[10]};
   height: ${({ theme }) => theme.spaces[8]};
   /* Same overlay used in ModalLayout */
   background: ${({ theme }) => `${theme.colors.neutral800}1F`};
   border-radius: ${({ theme }) => theme.borderRadius};
 `;
-const TypographyLineHeight = styled__default.default(designSystem.Typography)`
+const TypographyLineHeight = styledComponents.styled(designSystem.Typography)`
   /* line height of label and watch more to 1 so they can be better aligned visually */
   line-height: 1;
 `;
-const TextLink = styled__default.default(TypographyLineHeight)`
+const TextLink = styledComponents.styled(designSystem.Typography)`
   text-decoration: none;
+  line-height: 1;
 
   :hover {
     text-decoration: underline;
@@ -1035,6 +996,16 @@ const useMenu = (shouldUpdateStrapi) => {
   const permissions = reactRedux.useSelector(selectors.selectAdminPermissions);
   const [menuWithUserPermissions, setMenuWithUserPermissions] = React__namespace.useState({
     generalSectionLinks: [
+      {
+        icon: icons.House,
+        intlLabel: {
+          id: "global.home",
+          defaultMessage: "Home"
+        },
+        to: "/",
+        permissions: [],
+        position: 0
+      },
       {
         icon: icons.PuzzlePiece,
         intlLabel: {
@@ -1042,7 +1013,8 @@ const useMenu = (shouldUpdateStrapi) => {
           defaultMessage: "Plugins"
         },
         to: "/list-plugins",
-        permissions: permissions.marketplace?.main ?? []
+        permissions: permissions.marketplace?.main ?? [],
+        position: 7
       },
       {
         icon: icons.ShoppingCart,
@@ -1051,7 +1023,8 @@ const useMenu = (shouldUpdateStrapi) => {
           defaultMessage: "Marketplace"
         },
         to: "/marketplace",
-        permissions: permissions.marketplace?.main ?? []
+        permissions: permissions.marketplace?.main ?? [],
+        position: 8
       },
       {
         icon: icons.Cog,
@@ -1063,7 +1036,8 @@ const useMenu = (shouldUpdateStrapi) => {
         // Permissions of this link are retrieved in the init phase
         // using the settings menu
         permissions: [],
-        notificationsCount: 0
+        notificationsCount: 0,
+        position: 10
       }
     ],
     pluginsSectionLinks: [],
@@ -1224,4 +1198,4 @@ const checkLatestStrapiVersion = (currentPackageVersion, latestPublishedVersion
 
 exports.AdminLayout = AdminLayout;
 exports.PrivateAdminLayout = PrivateAdminLayout;
-//# sourceMappingURL=AuthenticatedLayout-TNbTifIA.js.map
+//# sourceMappingURL=AuthenticatedLayout-QwEem8GL.js.map