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

package/dist/admin/{AuthenticatedLayout-vS7Bwbws.js → AuthenticatedLayout-xkecaUXJ.js}

@@ -11,22 +11,21 @@ const reactIntl = require('react-intl');
 const reactRouterDom = require('react-router-dom');
 const lt = require('semver/functions/lt');
 const valid = require('semver/functions/valid');
-const v2 = require('@strapi/design-system/v2');
 const icons = require('@strapi/icons');
 const get = require('lodash/get');
-const styled = require('styled-components');
-const rbac = require('./rbac-WZsv1761.js');
-const Ornaments = require('./Ornaments-RhzFP9rf.js');
-const index = require('./index-Ze-KuF2r.js');
+const styledComponents = require('styled-components');
+const rbac = require('./rbac-xo8GO653.js');
+const Ornaments = require('./Ornaments-UTssGzOw.js');
+const index = require('./index-8r8zglVb.js');
 const users = require('./users-R5A0kUOV.js');
 const immer = require('immer');
 const set = require('lodash/set');
-const PrivateRoute = require('./PrivateRoute-KAM10GGM.js');
+const PrivateRoute = require('./PrivateRoute--JuZZan_.js');
 const cloneDeep = require('lodash/cloneDeep');
 const reactRedux = require('react-redux');
-const selectors = require('./selectors-CiTVxP8O.js');
+const selectors = require('./selectors-lQOnkFXz.js');
 const useOnce = require('./useOnce--ZSbXFh3.js');
-const admin = require('./admin-vlKSOeHB.js');
+const admin = require('./admin-sk7xXllW.js');
 
 const _interopDefault = e => e && e.__esModule ? e : { default: e };
 
@@ -52,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.4";
+const version = "5.0.0-beta.6";
 const description = "Strapi Admin";
 const repository = {
 	type: "git",
@@ -135,13 +133,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",
@@ -156,7 +154,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",
@@ -181,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",
@@ -189,17 +186,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",
@@ -217,7 +214,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"
 };
@@ -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",
@@ -299,7 +296,7 @@ const GuidedTourModal = () => {
       direction: "column",
       alignItems: "stretch",
       background: "neutral0",
-      width: `${660 / 16}rem`,
+      width: `66rem`,
       shadow: "popupShadow",
       hasRadius: true,
       padding: 4,
@@ -347,7 +344,7 @@ const GuidedTourModal = () => {
     }
   ) }) }) });
 };
-const ModalWrapper = styled__default.default(designSystem.Flex)`
+const ModalWrapper = styledComponents.styled(designSystem.Flex)`
   position: fixed;
   z-index: 4;
   inset: 0;
@@ -369,14 +366,14 @@ const GuidedTourStepper = ({
   const nextSectionIndex = sectionIndex + 1;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "stretch", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { marginRight: 8, justifyContent: "center", minWidth: `${30 / 16}rem`, children: hasSectionBefore && /* @__PURE__ */ jsxRuntime.jsx(Ornaments.VerticalDivider, { state: Ornaments.STATES.IS_DONE, minHeight: `${24 / 16}rem` }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { marginRight: 8, justifyContent: "center", minWidth: `3rem`, children: hasSectionBefore && /* @__PURE__ */ jsxRuntime.jsx(Ornaments.VerticalDivider, { state: Ornaments.STATES.IS_DONE, minHeight: `2.4rem` }) }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "primary600", children: formatMessage({
         id: "app.components.GuidedTour.title",
         defaultMessage: "3 steps to get started"
       }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { marginRight: 8, minWidth: `${30 / 16}rem`, children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { marginRight: 8, minWidth: `3rem`, children: /* @__PURE__ */ jsxRuntime.jsx(
         Ornaments.Number,
         {
           state: hasStepsBefore ? Ornaments.STATES.IS_DONE : Ornaments.STATES.IS_ACTIVE,
@@ -385,19 +382,19 @@ 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: `${30 / 16}rem`, children: hasSectionAfter && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { marginRight: 8, direction: "column", justifyContent: "center", minWidth: `3rem`, children: hasSectionAfter && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Ornaments.VerticalDivider, { state: Ornaments.STATES.IS_DONE }),
         hasStepsBefore && /* @__PURE__ */ jsxRuntime.jsx(Ornaments.Number, { state: Ornaments.STATES.IS_ACTIVE, paddingTop: 3, children: nextSectionIndex + 1 })
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
         children,
         cta && (cta.target ? /* @__PURE__ */ jsxRuntime.jsx(
-          v2.LinkButton,
+          designSystem.LinkButton,
           {
-            as: reactRouterDom.NavLink,
+            tag: reactRouterDom.NavLink,
             endIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowRight, {}),
             onClick: onCtaClick,
             to: cta.target,
@@ -406,7 +403,7 @@ const GuidedTourStepper = ({
         ) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { endIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowRight, {}), onClick: onCtaClick, children: formatMessage(cta.title) }))
       ] })
     ] }),
-    hasStepsBefore && hasSectionAfter && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 3, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { marginRight: 8, justifyContent: "center", width: `${30 / 16}rem`, children: /* @__PURE__ */ jsxRuntime.jsx(Ornaments.VerticalDivider, { state: Ornaments.STATES.IS_DONE, minHeight: `${24 / 16}rem` }) }) })
+    hasStepsBefore && hasSectionAfter && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 3, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { marginRight: 8, justifyContent: "center", width: `3rem`, children: /* @__PURE__ */ jsxRuntime.jsx(Ornaments.VerticalDivider, { state: Ornaments.STATES.IS_DONE, minHeight: `2.4rem` }) }) })
   ] });
 };
 const GuidedTourContent = ({ id, defaultMessage }) => {
@@ -426,7 +423,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 +435,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,14 +443,33 @@ 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};
     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 = () => {
@@ -461,7 +477,7 @@ const NavBrand = () => {
   const {
     logos: { menu }
   } = rbac.useConfiguration("LeftMenu");
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(BrandIconWrapper, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(BrandIconWrapper, { width: "3.2rem", height: "3.2rem", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "img",
       {
@@ -485,199 +501,233 @@ const NavBrand = () => {
   ] }) });
 };
 
-const LinkUserWrapper = styled__default.default(designSystem.Box)`
-  width: ${150 / 16}rem;
-  position: absolute;
-  bottom: ${({ theme }) => theme.spaces[9]};
-  left: ${({ theme }) => theme.spaces[5]};
-`;
-const LinkUser = styled__default.default(reactRouterDom.NavLink)`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+const MainNavLinkWrapper = styledComponents.styled(reactRouterDom.NavLink)`
   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__default.default(designSystem.Box)`
-  div:nth-child(2) {
-    /* remove badge background color */
-    background: transparent;
+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("span", { children }) });
+};
+const IconImpl = ({ label, children }) => {
+  if (!children) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.AccessibleIcon, { label, children });
+};
+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",
+      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 = styledComponents.styled(designSystem.Menu.Trigger)`
+  height: 100%;
+`;
+const MenuContent = styledComponents.styled(designSystem.Menu.Content)`
+  left: ${({ theme }) => theme.spaces[5]};
+`;
+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, {})
+      ] })
+    ] })
+  ] }) });
+};
+
+const NewNavLinkBadge = styledComponents.styled(NavLink.Badge)`
+  span {
+    color: ${({ theme }) => theme.colors.neutral0};
   }
 `;
+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 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(v2.MainNav, { condensed, children: [
-    condensed ? (
-      /**
-       * TODO: remove the conditional rendering once the new Main nav is fully implemented
-       */
-      /* @__PURE__ */ jsxRuntime.jsx(NavBrand, {})
-    ) : /* @__PURE__ */ jsxRuntime.jsx(
-      v2.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"
-            })
-          }
-        )
-      }
-    ),
+  return /* @__PURE__ */ jsxRuntime.jsxs(MainNav, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(NavBrand, {}),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs(v2.NavSections, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        v2.NavLink,
+    /* @__PURE__ */ jsxRuntime.jsxs(NavListWrapper, { tag: "ul", gap: 3, direction: "column", flex: 1, paddingTop: 3, paddingBottom: 3, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { tag: "li", children: /* @__PURE__ */ jsxRuntime.jsx(
+        NavLink.Link,
         {
-          as: reactRouterDom.NavLink,
-          to: "/content-manager",
-          icon: /* @__PURE__ */ jsxRuntime.jsx(icons.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__ */ jsxRuntime.jsx(NavLink.Tooltip, { label: formatMessage({ id: "global.home", defaultMessage: "Home" }), children: /* @__PURE__ */ jsxRuntime.jsx(NavLink.Icon, { label: formatMessage({ id: "global.home", defaultMessage: "Home" }), children: /* @__PURE__ */ jsxRuntime.jsx(icons.House, { width: "2rem", height: "2rem", fill: "neutral500" }) }) })
         }
-      ),
-      pluginsSectionLinks.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-        v2.NavSection,
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { tag: "li", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            NavLink.Tooltip,
+            {
+              label: formatMessage({
+                id: "global.content-manager",
+                defaultMessage: "Content Manager"
+              }),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                NavLink.Icon,
+                {
+                  label: formatMessage({
+                    id: "global.content-manager",
+                    defaultMessage: "Content Manager"
+                  }),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(icons.Feather, { width: "2rem", height: "2rem", fill: "neutral500" })
+                }
+              )
             }
-            const LinkIcon = link.icon;
-            return /* @__PURE__ */ jsxRuntime.jsx(NavLinkWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
-              v2.NavLink,
-              {
-                as: reactRouterDom.NavLink,
-                to: link.to,
-                icon: /* @__PURE__ */ jsxRuntime.jsx(LinkIcon, {}),
-                onClick: () => handleClickOnLink(link.to),
-                badgeContent: link?.lockIcon ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Icon, { width: `${15 / 16}rem`, height: `${15 / 16}rem`, as: icons.Lock }) : void 0,
-                children: formatMessage(link.intlLabel)
-              }
-            ) }, link.to);
-          })
-        }
-      ) : null,
-      generalSectionLinks.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-        v2.NavSection,
-        {
-          label: formatMessage({
-            id: "app.components.LeftMenu.general",
-            defaultMessage: "General"
-          }),
-          children: generalSectionLinks.map((link) => {
-            const LinkIcon = link.icon;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              v2.NavLink,
-              {
-                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(v2.NavFooter, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        v2.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__ */ 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.Exit, {})
+        const LinkIcon = link.icon;
+        const badgeContent = link?.lockIcon ? /* @__PURE__ */ jsxRuntime.jsx(icons.Lock, {}) : void 0;
+        const labelValue = formatMessage(link.intlLabel);
+        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { tag: "li", children: /* @__PURE__ */ jsxRuntime.jsx(
+          NavLink.Link,
+          {
+            to: link.to,
+            onClick: () => handleClickOnLink(link.to),
+            "aria-label": labelValue,
+            children: /* @__PURE__ */ jsxRuntime.jsxs(NavLink.Tooltip, { label: labelValue, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(NavLink.Icon, { label: labelValue, children: /* @__PURE__ */ jsxRuntime.jsx(LinkIcon, { width: "2rem", height: "2rem", fill: "neutral500" }) }),
+              badgeContent && /* @__PURE__ */ jsxRuntime.jsx(
+                NavLink.Badge,
+                {
+                  label: "locked",
+                  background: "transparent",
+                  textColor: "neutral500",
+                  children: badgeContent
+                }
+              )
             ] })
-          ] }) })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(v2.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__ */ jsxRuntime.jsx(designSystem.Flex, { tag: "li", children: /* @__PURE__ */ jsxRuntime.jsx(
+          NavLink.Link,
+          {
+            "aria-label": labelValue,
+            to: link.to,
+            onClick: () => handleClickOnLink(link.to),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(NavLink.Tooltip, { label: labelValue, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(NavLink.Icon, { label: labelValue, children: /* @__PURE__ */ jsxRuntime.jsx(LinkIcon, { width: "2rem", height: "2rem", fill: "neutral500" }) }),
+              badgeContent && /* @__PURE__ */ jsxRuntime.jsx(NewNavLinkBadge, { label: badgeContent, backgroundColor: "primary600", children: badgeContent })
+            ] })
+          }
+        ) }, link.to);
+      }) : null
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(NavUser, { initials, children: userDisplayName })
   ] });
 };
 
@@ -699,7 +749,8 @@ const Onboarding = () => {
       href: communityEdition ? "https://discord.strapi.io" : "https://support.strapi.io/support/home"
     }
   ];
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { as: "aside", position: "fixed", bottom: 2, right: 2, children: [
+  const Icon = isOpen ? icons.Cross : icons.Question;
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { tag: "aside", position: "fixed", bottom: 2, right: 2, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       HelperButton,
       {
@@ -714,7 +765,7 @@ const Onboarding = () => {
         ),
         onClick: handlePopoverVisibility,
         ref: triggerRef,
-        children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Icon, { as: isOpen ? icons.Cross : icons.Question, color: "buttonNeutral0" })
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { fill: "buttonNeutral0" })
       }
     ),
     isOpen && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -742,7 +793,7 @@ const Onboarding = () => {
                 /* @__PURE__ */ jsxRuntime.jsx(
                   TextLink,
                   {
-                    as: "a",
+                    tag: "a",
                     href: WATCH_MORE.href,
                     target: "_blank",
                     rel: "noreferrer noopener",
@@ -758,7 +809,7 @@ const Onboarding = () => {
           VIDEO_LINKS.map(({ href, duration, label }, index) => /* @__PURE__ */ jsxRuntime.jsxs(
             VideoLinkWrapper,
             {
-              as: "a",
+              tag: "a",
               href,
               target: "_blank",
               rel: "noreferrer noopener",
@@ -768,7 +819,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(
@@ -782,12 +833,12 @@ const Onboarding = () => {
                       justifyContent: "center",
                       width: 6,
                       height: 6,
-                      children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Icon, { as: icons.Play, color: "buttonNeutral0", width: 3, height: 3 })
+                      children: /* @__PURE__ */ jsxRuntime.jsx(icons.Play, { fill: "buttonNeutral0", width: "1.2rem", height: "1.2rem" })
                     }
                   )
                 ] }),
                 /* @__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 })
                 ] })
@@ -804,12 +855,12 @@ const Onboarding = () => {
               paddingLeft: 5,
               paddingTop: 2,
               paddingBottom: 5,
-              children: docLinks.map(({ label, href, icon }) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Icon, { as: icon, color: "primary600" }),
+              children: docLinks.map(({ label, href, icon: Icon2 }) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Icon2, { fill: "primary600" }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   TextLink,
                   {
-                    as: "a",
+                    tag: "a",
                     href,
                     target: "_blank",
                     rel: "noreferrer noopener",
@@ -826,16 +877,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 {
@@ -846,29 +899,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;
@@ -972,7 +1026,7 @@ const useMenu = (shouldUpdateStrapi) => {
   const [menuWithUserPermissions, setMenuWithUserPermissions] = React__namespace.useState({
     generalSectionLinks: [
       {
-        icon: icons.Puzzle,
+        icon: icons.PuzzlePiece,
         intlLabel: {
           id: "global.plugins",
           defaultMessage: "Plugins"
@@ -1160,4 +1214,4 @@ const checkLatestStrapiVersion = (currentPackageVersion, latestPublishedVersion
 
 exports.AdminLayout = AdminLayout;
 exports.PrivateAdminLayout = PrivateAdminLayout;
-//# sourceMappingURL=AuthenticatedLayout-vS7Bwbws.js.map
+//# sourceMappingURL=AuthenticatedLayout-xkecaUXJ.js.map