@strapi/admin 5.0.0-beta.5 → 5.0.0-beta.7

package/dist/admin/{AuthenticatedLayout-CHSwnqUb.mjs → AuthenticatedLayout-LYVDZ-jl.mjs}

@@ -1,31 +1,30 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { Flex, Portal, FocusTrap, IconButton, Box, Button, Typography, VisuallyHidden, Divider, Icon, PopoverPrimitives, SkipToContent } from '@strapi/design-system';
+import { Flex, Portal, FocusTrap, IconButton, Box, Button, Typography, LinkButton, VisuallyHidden, Badge, Tooltip, AccessibleIcon, Menu, Initials, Divider, PopoverPrimitives, SkipToContent } from '@strapi/design-system';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { useIntl } from 'react-intl';
-import { NavLink, useLocation, Outlet } from 'react-router-dom';
+import { NavLink as NavLink$1, useNavigate, useLocation, Outlet } from 'react-router-dom';
 import lt from 'semver/functions/lt';
 import valid from 'semver/functions/valid';
-import { LinkButton, MainNav, NavBrand as NavBrand$1, NavSections, NavLink as NavLink$1, NavSection, NavFooter, NavUser, NavCondense } from '@strapi/design-system/v2';
-import { Cross, ArrowRight, Write, Lock, Exit, Question, Play, Message, Book, PaperPlane, Puzzle, ShoppingCart, Cog } from '@strapi/icons';
+import { Cross, ArrowRight, SignOut, House, Feather, Lock, Play, Message, Question, Book, PaperPlane, PuzzlePiece, ShoppingCart, Cog } from '@strapi/icons';
 import get from 'lodash/get';
-import styled from 'styled-components';
-import { d as useTracking, o as useConfiguration, a as useAuth, m as useAppInfo, n as useStrapiApp, P as Page, p as AppInfoProvider } from './rbac-sYT_mXH0.mjs';
-import { L as LAYOUT_DATA, V as VerticalDivider, S as STATES, N as Number } from './Ornaments-izqdN6fh.mjs';
-import { j as useGuidedTour, w as usePersistentState, N as NpsSurvey } from './index-3MYZ88xc.mjs';
+import { styled } from 'styled-components';
+import { d as useTracking, o as useConfiguration, a as useAuth, m as useAppInfo, n as useStrapiApp, P as Page, p as AppInfoProvider } from './rbac-OjYDiE2n.mjs';
+import { L as LAYOUT_DATA, V as VerticalDivider, S as STATES, N as Number$1 } from './Ornaments-h_LCCr5P.mjs';
+import { l as useGuidedTour, N as NpsSurvey } from './index--VHJr8__.mjs';
 import { g as getDisplayName, h as hashAdminUserEmail } from './users-a4KTyEyc.mjs';
 import { produce } from 'immer';
 import set from 'lodash/set';
-import { P as PrivateRoute } from './PrivateRoute-wDu6Vo0N.mjs';
+import { P as PrivateRoute } from './PrivateRoute-hfATZKl-.mjs';
 import cloneDeep from 'lodash/cloneDeep';
 import { useSelector } from 'react-redux';
-import { s as selectAdminPermissions } from './selectors-3gRe5pAj.mjs';
+import { s as selectAdminPermissions } from './selectors-k4OkEbL7.mjs';
 import { u as useOnce } from './useOnce-GJ2Ta2mZ.mjs';
-import { c as useInformationQuery } from './admin-DUKhYsmP.mjs';
+import { e as useInformationQuery } from './admin-dE-jnuNr.mjs';
 
 const name = "@strapi/admin";
-const version = "5.0.0-beta.4";
+const version = "5.0.0-beta.6";
 const description = "Strapi Admin";
 const repository = {
 	type: "git",
@@ -103,13 +102,13 @@ const dependencies = {
 	"@radix-ui/react-context": "1.0.1",
 	"@radix-ui/react-toolbar": "1.0.4",
 	"@reduxjs/toolkit": "1.9.7",
-	"@strapi/design-system": "1.18.0",
-	"@strapi/icons": "1.18.0",
-	"@strapi/permissions": "5.0.0-beta.4",
-	"@strapi/provider-audit-logs-local": "5.0.0-beta.4",
-	"@strapi/types": "5.0.0-beta.4",
-	"@strapi/typescript-utils": "5.0.0-beta.4",
-	"@strapi/utils": "5.0.0-beta.4",
+	"@strapi/design-system": "2.0.0-beta.3",
+	"@strapi/icons": "2.0.0-beta.3",
+	"@strapi/permissions": "5.0.0-beta.6",
+	"@strapi/provider-audit-logs-local": "5.0.0-beta.6",
+	"@strapi/types": "5.0.0-beta.6",
+	"@strapi/typescript-utils": "5.0.0-beta.6",
+	"@strapi/utils": "5.0.0-beta.6",
 	"@testing-library/dom": "9.2.0",
 	"@testing-library/react": "14.0.0",
 	"@testing-library/user-event": "14.4.3",
@@ -124,7 +123,7 @@ const dependencies = {
 	"fast-deep-equal": "3.1.3",
 	formik: "2.4.5",
 	"fractional-indexing": "3.2.0",
-	"fs-extra": "10.1.0",
+	"fs-extra": "11.2.0",
 	"highlight.js": "^10.4.1",
 	immer: "9.0.21",
 	inquirer: "8.2.5",
@@ -149,7 +148,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",
@@ -157,17 +155,17 @@ 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.4",
-	"@strapi/data-transfer": "5.0.0-beta.4",
+	"@strapi/admin-test-utils": "5.0.0-beta.6",
+	"@strapi/data-transfer": "5.0.0-beta.6",
 	"@strapi/pack-up": "5.0.0",
 	"@types/codemirror5": "npm:@types/codemirror@^5.60.15",
+	"@types/fs-extra": "11.0.4",
 	"@types/invariant": "2.2.36",
 	"@types/jsonwebtoken": "9.0.3",
 	"@types/koa-passport": "6.0.1",
@@ -185,7 +183,7 @@ const devDependencies = {
 	react: "^18.2.0",
 	"react-dom": "^18.2.0",
 	"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"
 };
@@ -194,7 +192,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",
@@ -267,7 +265,7 @@ const GuidedTourModal = () => {
       direction: "column",
       alignItems: "stretch",
       background: "neutral0",
-      width: `${660 / 16}rem`,
+      width: `66rem`,
       shadow: "popupShadow",
       hasRadius: true,
       padding: 4,
@@ -337,15 +335,15 @@ const GuidedTourStepper = ({
   const nextSectionIndex = sectionIndex + 1;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(Flex, { alignItems: "stretch", children: [
-      /* @__PURE__ */ jsx(Flex, { marginRight: 8, justifyContent: "center", minWidth: `${30 / 16}rem`, children: hasSectionBefore && /* @__PURE__ */ jsx(VerticalDivider, { state: STATES.IS_DONE, minHeight: `${24 / 16}rem` }) }),
+      /* @__PURE__ */ jsx(Flex, { marginRight: 8, justifyContent: "center", minWidth: `3rem`, children: hasSectionBefore && /* @__PURE__ */ jsx(VerticalDivider, { state: STATES.IS_DONE, minHeight: `2.4rem` }) }),
       /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "primary600", children: formatMessage({
         id: "app.components.GuidedTour.title",
         defaultMessage: "3 steps to get started"
       }) })
     ] }),
     /* @__PURE__ */ jsxs(Flex, { children: [
-      /* @__PURE__ */ jsx(Flex, { marginRight: 8, minWidth: `${30 / 16}rem`, children: /* @__PURE__ */ jsx(
-        Number,
+      /* @__PURE__ */ jsx(Flex, { marginRight: 8, minWidth: `3rem`, children: /* @__PURE__ */ jsx(
+        Number$1,
         {
           state: hasStepsBefore ? STATES.IS_DONE : STATES.IS_ACTIVE,
           paddingTop: 3,
@@ -353,19 +351,19 @@ const GuidedTourStepper = ({
           children: sectionIndex + 1
         }
       ) }),
-      title && /* @__PURE__ */ jsx(Typography, { variant: "alpha", fontWeight: "bold", textColor: "neutral800", as: "h3", id: "title", children: formatMessage(title) })
+      title && /* @__PURE__ */ jsx(Typography, { variant: "alpha", fontWeight: "bold", textColor: "neutral800", tag: "h3", id: "title", children: formatMessage(title) })
     ] }),
     /* @__PURE__ */ jsxs(Flex, { alignItems: "stretch", children: [
-      /* @__PURE__ */ jsx(Flex, { marginRight: 8, direction: "column", justifyContent: "center", minWidth: `${30 / 16}rem`, children: hasSectionAfter && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Flex, { marginRight: 8, direction: "column", justifyContent: "center", minWidth: `3rem`, children: hasSectionAfter && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(VerticalDivider, { state: STATES.IS_DONE }),
-        hasStepsBefore && /* @__PURE__ */ jsx(Number, { state: STATES.IS_ACTIVE, paddingTop: 3, children: nextSectionIndex + 1 })
+        hasStepsBefore && /* @__PURE__ */ jsx(Number$1, { state: STATES.IS_ACTIVE, paddingTop: 3, children: nextSectionIndex + 1 })
       ] }) }),
       /* @__PURE__ */ jsxs(Box, { children: [
         children,
         cta && (cta.target ? /* @__PURE__ */ jsx(
           LinkButton,
           {
-            as: NavLink,
+            tag: NavLink$1,
             endIcon: /* @__PURE__ */ jsx(ArrowRight, {}),
             onClick: onCtaClick,
             to: cta.target,
@@ -374,7 +372,7 @@ const GuidedTourStepper = ({
         ) : /* @__PURE__ */ jsx(Button, { endIcon: /* @__PURE__ */ jsx(ArrowRight, {}), onClick: onCtaClick, children: formatMessage(cta.title) }))
       ] })
     ] }),
-    hasStepsBefore && hasSectionAfter && /* @__PURE__ */ jsx(Box, { paddingTop: 3, children: /* @__PURE__ */ jsx(Flex, { marginRight: 8, justifyContent: "center", width: `${30 / 16}rem`, children: /* @__PURE__ */ jsx(VerticalDivider, { state: STATES.IS_DONE, minHeight: `${24 / 16}rem` }) }) })
+    hasStepsBefore && hasSectionAfter && /* @__PURE__ */ jsx(Box, { paddingTop: 3, children: /* @__PURE__ */ jsx(Flex, { marginRight: 8, justifyContent: "center", width: `3rem`, children: /* @__PURE__ */ jsx(VerticalDivider, { state: STATES.IS_DONE, minHeight: `2.4rem` }) }) })
   ] });
 };
 const GuidedTourContent = ({ id, defaultMessage }) => {
@@ -394,7 +392,7 @@ const GuidedTourContent = ({ id, defaultMessage }) => {
 const DocumentationLink = (children) => /* @__PURE__ */ jsx(
   Typography,
   {
-    as: "a",
+    tag: "a",
     textColor: "primary600",
     target: "_blank",
     rel: "noopener noreferrer",
@@ -414,14 +412,33 @@ const LiStyled = styled.li`
 `;
 const ListItem = (children) => /* @__PURE__ */ jsx(LiStyled, { children });
 
+const MainNavWrapper = styled(Flex)`
+  border-right: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+const MainNav = (props) => /* @__PURE__ */ jsx(
+  MainNavWrapper,
+  {
+    alignItems: "normal",
+    tag: "nav",
+    background: "neutral0",
+    direction: "column",
+    height: "100vh",
+    position: "sticky",
+    top: 0,
+    zIndex: 2,
+    width: 10,
+    ...props
+  }
+);
+
 const BrandIconWrapper = styled(Box)`
   svg,
   img {
     border-radius: ${({ theme }) => theme.borderRadius};
     object-fit: contain;
-    height: ${24 / 16}rem;
-    width: ${24 / 16}rem;
-    margin: ${3 / 16}rem;
+    height: 2.4rem;
+    width: 2.4rem;
+    margin: 0.4rem;
   }
 `;
 const NavBrand = () => {
@@ -429,7 +446,7 @@ const NavBrand = () => {
   const {
     logos: { menu }
   } = useConfiguration("LeftMenu");
-  return /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsxs(BrandIconWrapper, { children: [
+  return /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsxs(BrandIconWrapper, { width: "3.2rem", height: "3.2rem", children: [
     /* @__PURE__ */ jsx(
       "img",
       {
@@ -453,199 +470,233 @@ const NavBrand = () => {
   ] }) });
 };
 
-const LinkUserWrapper = styled(Box)`
-  width: ${150 / 16}rem;
-  position: absolute;
-  bottom: ${({ theme }) => theme.spaces[9]};
-  left: ${({ theme }) => theme.spaces[5]};
-`;
-const LinkUser = styled(NavLink)`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+const MainNavLinkWrapper = styled(NavLink$1)`
   text-decoration: none;
-  padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[4]}`};
-  border-radius: ${({ theme }) => theme.spaces[1]};
+  display: block;
+  border-radius: ${({ theme }) => theme.borderRadius};
+  background: ${({ theme }) => theme.colors.neutral0};
+  color: ${({ theme }) => theme.colors.neutral500};
+  position: relative;
+  width: fit-content;
+  padding-block: 0.6rem;
+  padding-inline: 0.6rem;
+
+  &:hover,
+  &.active {
+    background: ${({ theme }) => theme.colors.neutral100};
+  }
 
   &:hover {
-    background: ${({ theme, logout }) => logout ? theme.colors.danger100 : theme.colors.primary100};
-    text-decoration: none;
+    svg path {
+      fill: ${({ theme }) => theme.colors.neutral600};
+    }
+    color: ${({ theme }) => theme.colors.neutral700};
   }
 
-  svg {
-    path {
-      fill: ${({ theme }) => theme.colors.danger600};
+  &.active {
+    svg path {
+      fill: ${({ theme }) => theme.colors.primary600};
     }
+
+    color: ${({ theme }) => theme.colors.primary600};
+    font-weight: 500;
   }
 `;
-const NavLinkWrapper = styled(Box)`
-  div:nth-child(2) {
-    /* remove badge background color */
-    background: transparent;
+const LinkImpl = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(MainNavLinkWrapper, { ...props, children });
+};
+const TooltipImpl = ({ children, label, position = "right" }) => {
+  return /* @__PURE__ */ jsx(Tooltip, { position, label, children: /* @__PURE__ */ jsx("span", { children }) });
+};
+const IconImpl = ({ label, children }) => {
+  if (!children) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(AccessibleIcon, { label, children });
+};
+const CustomBadge = styled(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__ */ jsx(
+    CustomBadge,
+    {
+      position: "absolute",
+      width: "2.3rem",
+      top: "-0.8rem",
+      left: "1.7rem",
+      "aria-label": label,
+      active: false,
+      ...props,
+      children
+    }
+  );
+};
+const NavLink = {
+  Link: LinkImpl,
+  Tooltip: TooltipImpl,
+  Icon: IconImpl,
+  Badge: BadgeImpl
+};
+
+const MenuTrigger = styled(Menu.Trigger)`
+  height: 100%;
+`;
+const MenuContent = styled(Menu.Content)`
+  left: ${({ theme }) => theme.spaces[5]};
+`;
+const MenuItem = styled(Menu.Item)`
+  span {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+`;
+const NavUser = ({ children, initials, ...props }) => {
+  const { formatMessage } = useIntl();
+  const navigate = useNavigate();
+  const logout = useAuth("Logout", (state) => state.logout);
+  const handleProfile = () => {
+    navigate("/me");
+  };
+  const handleLogout = () => {
+    logout();
+    navigate("/auth/login");
+  };
+  return /* @__PURE__ */ jsx(Flex, { justifyContent: "center", ...props, children: /* @__PURE__ */ jsxs(Menu.Root, { children: [
+    /* @__PURE__ */ jsxs(MenuTrigger, { endIcon: null, fullWidth: true, justifyContent: "center", children: [
+      /* @__PURE__ */ jsx(Initials, { children: initials }),
+      /* @__PURE__ */ jsx(VisuallyHidden, { tag: "span", children })
+    ] }),
+    /* @__PURE__ */ jsxs(MenuContent, { popoverPlacement: "top", zIndex: 3, width: "15rem", children: [
+      /* @__PURE__ */ jsx(MenuItem, { onSelect: handleProfile, children: formatMessage({
+        id: "global.profile",
+        defaultMessage: "Profile"
+      }) }),
+      /* @__PURE__ */ jsxs(MenuItem, { onSelect: handleLogout, color: "danger600", children: [
+        formatMessage({
+          id: "app.components.LeftMenu.logout",
+          defaultMessage: "Logout"
+        }),
+        /* @__PURE__ */ jsx(SignOut, {})
+      ] })
+    ] })
+  ] }) });
+};
+
+const NewNavLinkBadge = styled(NavLink.Badge)`
+  span {
+    color: ${({ theme }) => theme.colors.neutral0};
   }
 `;
+const NavListWrapper = styled(Flex)`
+  overflow-y: auto;
+`;
 const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
-  const navUserRef = React.useRef(null);
-  const [userLinksVisible, setUserLinksVisible] = React.useState(false);
-  const {
-    logos: { menu }
-  } = useConfiguration("LeftMenu");
-  const [condensed, setCondensed] = usePersistentState("navbar-condensed", false);
   const user = useAuth("AuthenticatedApp", (state) => state.user);
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
   const { pathname } = useLocation();
-  const logout = useAuth("Logout", (state) => state.logout);
   const userDisplayName = getDisplayName(user);
   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__ */ jsxs(MainNav, { condensed, children: [
-    condensed ? (
-      /**
-       * TODO: remove the conditional rendering once the new Main nav is fully implemented
-       */
-      /* @__PURE__ */ jsx(NavBrand, {})
-    ) : /* @__PURE__ */ jsx(
-      NavBrand$1,
-      {
-        as: NavLink,
-        workplace: formatMessage({
-          id: "app.components.LeftMenu.navbrand.workplace",
-          defaultMessage: "Workplace"
-        }),
-        title: menuTitle,
-        icon: /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: menu.custom?.url || menu.default,
-            alt: formatMessage({
-              id: "app.components.LeftMenu.logo.alt",
-              defaultMessage: "Application logo"
-            })
-          }
-        )
-      }
-    ),
+  return /* @__PURE__ */ jsxs(MainNav, { children: [
+    /* @__PURE__ */ jsx(NavBrand, {}),
     /* @__PURE__ */ jsx(Divider, {}),
-    /* @__PURE__ */ jsxs(NavSections, { children: [
-      /* @__PURE__ */ jsx(
-        NavLink$1,
+    /* @__PURE__ */ jsxs(NavListWrapper, { tag: "ul", gap: 3, direction: "column", flex: 1, paddingTop: 3, paddingBottom: 3, children: [
+      /* @__PURE__ */ jsx(Flex, { tag: "li", children: /* @__PURE__ */ jsx(
+        NavLink.Link,
         {
-          as: NavLink,
-          to: "/content-manager",
-          icon: /* @__PURE__ */ jsx(Write, {}),
-          onClick: () => handleClickOnLink("/content-manager"),
-          children: formatMessage({ id: "global.content-manager", defaultMessage: "Content manager" })
+          to: "/",
+          onClick: () => handleClickOnLink("/"),
+          "aria-label": formatMessage({ id: "global.home", defaultMessage: "Home" }),
+          children: /* @__PURE__ */ jsx(NavLink.Tooltip, { label: formatMessage({ id: "global.home", defaultMessage: "Home" }), children: /* @__PURE__ */ jsx(NavLink.Icon, { label: formatMessage({ id: "global.home", defaultMessage: "Home" }), children: /* @__PURE__ */ jsx(House, { width: "2rem", height: "2rem", fill: "neutral500" }) }) })
         }
-      ),
-      pluginsSectionLinks.length > 0 ? /* @__PURE__ */ jsx(
-        NavSection,
+      ) }),
+      /* @__PURE__ */ jsx(Flex, { tag: "li", children: /* @__PURE__ */ jsx(
+        NavLink.Link,
         {
-          label: formatMessage({
-            id: "app.components.LeftMenu.plugins",
-            defaultMessage: "Plugins"
+          to: "/content-manager",
+          onClick: () => handleClickOnLink("/content-manager"),
+          "aria-label": formatMessage({
+            id: "global.content-manager",
+            defaultMessage: "Content Manager"
           }),
-          children: pluginsSectionLinks.map((link) => {
-            if (link.to === "content-manager") {
-              return null;
+          children: /* @__PURE__ */ jsx(
+            NavLink.Tooltip,
+            {
+              label: formatMessage({
+                id: "global.content-manager",
+                defaultMessage: "Content Manager"
+              }),
+              children: /* @__PURE__ */ jsx(
+                NavLink.Icon,
+                {
+                  label: formatMessage({
+                    id: "global.content-manager",
+                    defaultMessage: "Content Manager"
+                  }),
+                  children: /* @__PURE__ */ jsx(Feather, { width: "2rem", height: "2rem", fill: "neutral500" })
+                }
+              )
             }
-            const LinkIcon = link.icon;
-            return /* @__PURE__ */ jsx(NavLinkWrapper, { children: /* @__PURE__ */ jsx(
-              NavLink$1,
-              {
-                as: NavLink,
-                to: link.to,
-                icon: /* @__PURE__ */ jsx(LinkIcon, {}),
-                onClick: () => handleClickOnLink(link.to),
-                badgeContent: link?.lockIcon ? /* @__PURE__ */ jsx(Icon, { width: `${15 / 16}rem`, height: `${15 / 16}rem`, as: Lock }) : void 0,
-                children: formatMessage(link.intlLabel)
-              }
-            ) }, link.to);
-          })
-        }
-      ) : null,
-      generalSectionLinks.length > 0 ? /* @__PURE__ */ jsx(
-        NavSection,
-        {
-          label: formatMessage({
-            id: "app.components.LeftMenu.general",
-            defaultMessage: "General"
-          }),
-          children: generalSectionLinks.map((link) => {
-            const LinkIcon = link.icon;
-            return /* @__PURE__ */ jsx(
-              NavLink$1,
-              {
-                as: NavLink,
-                badgeContent: link.notificationsCount && link.notificationsCount > 0 ? link.notificationsCount.toString() : void 0,
-                to: link.to,
-                icon: /* @__PURE__ */ jsx(LinkIcon, {}),
-                onClick: () => handleClickOnLink(link.to),
-                children: formatMessage(link.intlLabel)
-              },
-              link.to
-            );
-          })
+          )
         }
-      ) : null
-    ] }),
-    /* @__PURE__ */ jsxs(NavFooter, { children: [
-      /* @__PURE__ */ jsx(
-        NavUser,
-        {
-          id: "main-nav-user-button",
-          ref: navUserRef,
-          onClick: handleToggleUserLinks,
-          initials,
-          children: userDisplayName
+      ) }),
+      pluginsSectionLinks.length > 0 ? pluginsSectionLinks.map((link) => {
+        if (link.to === "content-manager") {
+          return null;
         }
-      ),
-      userLinksVisible && /* @__PURE__ */ jsx(
-        LinkUserWrapper,
-        {
-          onBlur: handleBlur,
-          padding: 1,
-          shadow: "tableShadow",
-          background: "neutral0",
-          hasRadius: true,
-          children: /* @__PURE__ */ jsx(FocusTrap, { onEscape: handleToggleUserLinks, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 0, children: [
-            /* @__PURE__ */ jsx(LinkUser, { tabIndex: 0, onClick: handleToggleUserLinks, to: "/me", children: /* @__PURE__ */ jsx(Typography, { children: formatMessage({
-              id: "global.profile",
-              defaultMessage: "Profile"
-            }) }) }),
-            /* @__PURE__ */ jsxs(LinkUser, { tabIndex: 0, onClick: logout, to: "/auth/login", children: [
-              /* @__PURE__ */ jsx(Typography, { textColor: "danger600", children: formatMessage({
-                id: "app.components.LeftMenu.logout",
-                defaultMessage: "Logout"
-              }) }),
-              /* @__PURE__ */ jsx(Exit, {})
+        const LinkIcon = link.icon;
+        const badgeContent = link?.lockIcon ? /* @__PURE__ */ jsx(Lock, {}) : void 0;
+        const labelValue = formatMessage(link.intlLabel);
+        return /* @__PURE__ */ jsx(Flex, { tag: "li", children: /* @__PURE__ */ jsx(
+          NavLink.Link,
+          {
+            to: link.to,
+            onClick: () => handleClickOnLink(link.to),
+            "aria-label": labelValue,
+            children: /* @__PURE__ */ jsxs(NavLink.Tooltip, { label: labelValue, children: [
+              /* @__PURE__ */ jsx(NavLink.Icon, { label: labelValue, children: /* @__PURE__ */ jsx(LinkIcon, { width: "2rem", height: "2rem", fill: "neutral500" }) }),
+              badgeContent && /* @__PURE__ */ jsx(
+                NavLink.Badge,
+                {
+                  label: "locked",
+                  background: "transparent",
+                  textColor: "neutral500",
+                  children: badgeContent
+                }
+              )
             ] })
-          ] }) })
-        }
-      ),
-      /* @__PURE__ */ jsx(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,
+      generalSectionLinks.length > 0 ? generalSectionLinks.map((link) => {
+        const LinkIcon = link.icon;
+        const badgeContent = link.notificationsCount && link.notificationsCount > 0 ? link.notificationsCount.toString() : void 0;
+        const labelValue = formatMessage(link.intlLabel);
+        return /* @__PURE__ */ jsx(Flex, { tag: "li", children: /* @__PURE__ */ jsx(
+          NavLink.Link,
+          {
+            "aria-label": labelValue,
+            to: link.to,
+            onClick: () => handleClickOnLink(link.to),
+            children: /* @__PURE__ */ jsxs(NavLink.Tooltip, { label: labelValue, children: [
+              /* @__PURE__ */ jsx(NavLink.Icon, { label: labelValue, children: /* @__PURE__ */ jsx(LinkIcon, { width: "2rem", height: "2rem", fill: "neutral500" }) }),
+              badgeContent && /* @__PURE__ */ jsx(NewNavLinkBadge, { label: badgeContent, backgroundColor: "primary600", children: badgeContent })
+            ] })
+          }
+        ) }, link.to);
+      }) : null
+    ] }),
+    /* @__PURE__ */ jsx(NavUser, { initials, children: userDisplayName })
   ] });
 };
 
@@ -667,7 +718,8 @@ const Onboarding = () => {
       href: communityEdition ? "https://discord.strapi.io" : "https://support.strapi.io/support/home"
     }
   ];
-  return /* @__PURE__ */ jsxs(Box, { as: "aside", position: "fixed", bottom: 2, right: 2, children: [
+  const Icon = isOpen ? Cross : Question;
+  return /* @__PURE__ */ jsxs(Box, { tag: "aside", position: "fixed", bottom: 2, right: 2, children: [
     /* @__PURE__ */ jsx(
       HelperButton,
       {
@@ -682,7 +734,7 @@ const Onboarding = () => {
         ),
         onClick: handlePopoverVisibility,
         ref: triggerRef,
-        children: /* @__PURE__ */ jsx(Icon, { as: isOpen ? Cross : Question, color: "buttonNeutral0" })
+        children: /* @__PURE__ */ jsx(Icon, { fill: "buttonNeutral0" })
       }
     ),
     isOpen && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(
@@ -710,7 +762,7 @@ const Onboarding = () => {
                 /* @__PURE__ */ jsx(
                   TextLink,
                   {
-                    as: "a",
+                    tag: "a",
                     href: WATCH_MORE.href,
                     target: "_blank",
                     rel: "noreferrer noopener",
@@ -726,7 +778,7 @@ const Onboarding = () => {
           VIDEO_LINKS.map(({ href, duration, label }, index) => /* @__PURE__ */ jsxs(
             VideoLinkWrapper,
             {
-              as: "a",
+              tag: "a",
               href,
               target: "_blank",
               rel: "noreferrer noopener",
@@ -736,7 +788,7 @@ const Onboarding = () => {
               paddingLeft: 6,
               paddingRight: 11,
               children: [
-                /* @__PURE__ */ jsx(Box, { paddingRight: 5, children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral200", variant: "alpha", children: index + 1 }) }),
+                /* @__PURE__ */ jsx(Box, { paddingRight: 5, children: /* @__PURE__ */ jsx(Number, { textColor: "neutral200", variant: "alpha", children: index + 1 }) }),
                 /* @__PURE__ */ jsxs(Box, { position: "relative", children: [
                   /* @__PURE__ */ jsx(Preview, { src: onboardingPreview, alt: "" }),
                   /* @__PURE__ */ jsx(
@@ -750,12 +802,12 @@ const Onboarding = () => {
                       justifyContent: "center",
                       width: 6,
                       height: 6,
-                      children: /* @__PURE__ */ jsx(Icon, { as: Play, color: "buttonNeutral0", width: 3, height: 3 })
+                      children: /* @__PURE__ */ jsx(Play, { fill: "buttonNeutral0", width: "1.2rem", height: "1.2rem" })
                     }
                   )
                 ] }),
                 /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "start", paddingLeft: 4, children: [
-                  /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: formatMessage(label) }),
+                  /* @__PURE__ */ jsx(Label, { fontWeight: "bold", children: formatMessage(label) }),
                   /* @__PURE__ */ jsx(VisuallyHidden, { children: ":" }),
                   /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", variant: "pi", children: duration })
                 ] })
@@ -772,12 +824,12 @@ const Onboarding = () => {
               paddingLeft: 5,
               paddingTop: 2,
               paddingBottom: 5,
-              children: docLinks.map(({ label, href, icon }) => /* @__PURE__ */ jsxs(Flex, { gap: 3, children: [
-                /* @__PURE__ */ jsx(Icon, { as: icon, color: "primary600" }),
+              children: docLinks.map(({ label, href, icon: Icon2 }) => /* @__PURE__ */ jsxs(Flex, { gap: 3, children: [
+                /* @__PURE__ */ jsx(Icon2, { fill: "primary600" }),
                 /* @__PURE__ */ jsx(
                   TextLink,
                   {
-                    as: "a",
+                    tag: "a",
                     href,
                     target: "_blank",
                     rel: "noreferrer noopener",
@@ -803,6 +855,8 @@ const HelperButton = styled(Button)`
 const IconWrapper = styled(Flex)`
   transform: translate(-50%, -50%);
 `;
+const Number = styled(Typography)``;
+const Label = styled(Typography)``;
 const VideoLinkWrapper = styled(Flex)`
   text-decoration: none;
 
@@ -814,12 +868,12 @@ const VideoLinkWrapper = styled(Flex)`
     background: ${({ theme }) => theme.colors.primary100};
 
     /* Hover style for the number displayed */
-    ${Typography}:first-child {
+    ${Number} {
       color: ${({ theme }) => theme.colors.primary500};
     }
 
     /* Hover style for the label */
-    ${Typography}:nth-child(1) {
+    ${Label} {
       color: ${({ theme }) => theme.colors.primary600};
     }
   }
@@ -835,8 +889,9 @@ const TypographyLineHeight = styled(Typography)`
   /* line height of label and watch more to 1 so they can be better aligned visually */
   line-height: 1;
 `;
-const TextLink = styled(TypographyLineHeight)`
+const TextLink = styled(Typography)`
   text-decoration: none;
+  line-height: 1;
 
   :hover {
     text-decoration: underline;
@@ -940,7 +995,7 @@ const useMenu = (shouldUpdateStrapi) => {
   const [menuWithUserPermissions, setMenuWithUserPermissions] = React.useState({
     generalSectionLinks: [
       {
-        icon: Puzzle,
+        icon: PuzzlePiece,
         intlLabel: {
           id: "global.plugins",
           defaultMessage: "Plugins"
@@ -1127,4 +1182,4 @@ const checkLatestStrapiVersion = (currentPackageVersion, latestPublishedVersion
 };
 
 export { AdminLayout, PrivateAdminLayout };
-//# sourceMappingURL=AuthenticatedLayout-CHSwnqUb.mjs.map
+//# sourceMappingURL=AuthenticatedLayout-LYVDZ-jl.mjs.map