@strapi/admin 5.25.0 → 5.27.0

package/dist/admin/admin/src/components/MainNav/NavBurgerMenu.mjs

@@ -0,0 +1,63 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+import { Box, ScrollArea } from '@strapi/design-system';
+import { styled } from 'styled-components';
+import { HEIGHT_TOP_NAVIGATION } from '../../constants/theme.mjs';
+import { MainNavBurgerMenuLinks } from './MainNavLinks.mjs';
+import { NavUser } from './NavUser.mjs';
+
+const NavBurgerMenuWrapper = styled(Box)`
+  position: fixed;
+  top: calc(${HEIGHT_TOP_NAVIGATION} + 1px);
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 3;
+  background-color: ${({ theme })=>theme.colors.neutral0};
+  transform: ${({ $isShown })=>$isShown ? 'translateY(0)' : 'translateY(-100%)'};
+  transition: transform 0.2s ease-in-out;
+
+  ${({ theme })=>theme.breakpoints.large} {
+    display: none;
+  }
+`;
+const NavBurgerMenu = ({ isShown, handleClickOnLink, listLinks })=>/*#__PURE__*/ jsx(NavBurgerMenuWrapper, {
+        $isShown: isShown,
+        children: /*#__PURE__*/ jsx(ScrollArea, {
+            children: /*#__PURE__*/ jsxs(Box, {
+                tag: "ul",
+                paddingLeft: {
+                    initial: 4,
+                    medium: 6
+                },
+                paddingRight: {
+                    initial: 4,
+                    medium: 6
+                },
+                paddingTop: {
+                    initial: 1,
+                    medium: 3
+                },
+                paddingBottom: {
+                    initial: 4,
+                    medium: 6
+                },
+                children: [
+                    /*#__PURE__*/ jsx(MainNavBurgerMenuLinks, {
+                        listLinks: listLinks,
+                        handleClickOnLink: handleClickOnLink
+                    }),
+                    /*#__PURE__*/ jsx(Box, {
+                        paddingTop: 4,
+                        tag: "li",
+                        children: /*#__PURE__*/ jsx(NavUser, {
+                            showDisplayName: true
+                        })
+                    })
+                ]
+            })
+        })
+    });
+
+export { NavBurgerMenu };
+//# sourceMappingURL=NavBurgerMenu.mjs.map

package/dist/admin/admin/src/components/MainNav/NavBurgerMenu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavBurgerMenu.mjs","sources":["../../../../../../admin/src/components/MainNav/NavBurgerMenu.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, ScrollArea } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { HEIGHT_TOP_NAVIGATION } from '../../constants/theme';\nimport { MenuItem } from '../../core/apis/router';\n\nimport { MainNavBurgerMenuLinks } from './MainNavLinks';\nimport { NavUser } from './NavUser';\n\ninterface NavBurgerMenuProps {\n  isShown: boolean;\n  listLinks: MenuItem[];\n  handleClickOnLink: (value: string) => void;\n  mobile?: boolean;\n}\n\nconst NavBurgerMenuWrapper = styled(Box)<{ $isShown: boolean }>`\n  position: fixed;\n  top: calc(${HEIGHT_TOP_NAVIGATION} + 1px);\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 3;\n  background-color: ${({ theme }) => theme.colors.neutral0};\n  transform: ${({ $isShown }) => ($isShown ? 'translateY(0)' : 'translateY(-100%)')};\n  transition: transform 0.2s ease-in-out;\n\n  ${({ theme }) => theme.breakpoints.large} {\n    display: none;\n  }\n`;\n\nconst NavBurgerMenu = ({ isShown, handleClickOnLink, listLinks }: NavBurgerMenuProps) => (\n  <NavBurgerMenuWrapper $isShown={isShown}>\n    <ScrollArea>\n      <Box\n        tag=\"ul\"\n        paddingLeft={{\n          initial: 4,\n          medium: 6,\n        }}\n        paddingRight={{\n          initial: 4,\n          medium: 6,\n        }}\n        paddingTop={{\n          initial: 1,\n          medium: 3,\n        }}\n        paddingBottom={{\n          initial: 4,\n          medium: 6,\n        }}\n      >\n        <MainNavBurgerMenuLinks listLinks={listLinks} handleClickOnLink={handleClickOnLink} />\n        <Box paddingTop={4} tag=\"li\">\n          <NavUser showDisplayName />\n        </Box>\n      </Box>\n    </ScrollArea>\n  </NavBurgerMenuWrapper>\n);\n\nexport { NavBurgerMenu };\n"],"names":["NavBurgerMenuWrapper","styled","Box","HEIGHT_TOP_NAVIGATION","theme","colors","neutral0","$isShown","breakpoints","large","NavBurgerMenu","isShown","handleClickOnLink","listLinks","_jsx","ScrollArea","_jsxs","tag","paddingLeft","initial","medium","paddingRight","paddingTop","paddingBottom","MainNavBurgerMenuLinks","NavUser","showDisplayName"],"mappings":";;;;;;;;AAkBA,MAAMA,oBAAAA,GAAuBC,MAAOC,CAAAA,GAAAA,CAA2B;;AAEnD,YAAA,EAAEC,qBAAsB,CAAA;;;;;oBAKhB,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,QAAQ,CAAC;AAC9C,aAAA,EAAE,CAAC,EAAEC,QAAQ,EAAE,GAAMA,QAAAA,GAAW,kBAAkB,mBAAqB,CAAA;;;EAGlF,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAMI,CAAAA,WAAW,CAACC,KAAK,CAAC;;;AAG3C,CAAC;AAEKC,MAAAA,aAAAA,GAAgB,CAAC,EAAEC,OAAO,EAAEC,iBAAiB,EAAEC,SAAS,EAAsB,iBAClFC,GAACd,CAAAA,oBAAAA,EAAAA;QAAqBO,QAAUI,EAAAA,OAAAA;AAC9B,QAAA,QAAA,gBAAAG,GAACC,CAAAA,UAAAA,EAAAA;AACC,YAAA,QAAA,gBAAAC,IAACd,CAAAA,GAAAA,EAAAA;gBACCe,GAAI,EAAA,IAAA;gBACJC,WAAa,EAAA;oBACXC,OAAS,EAAA,CAAA;oBACTC,MAAQ,EAAA;AACV,iBAAA;gBACAC,YAAc,EAAA;oBACZF,OAAS,EAAA,CAAA;oBACTC,MAAQ,EAAA;AACV,iBAAA;gBACAE,UAAY,EAAA;oBACVH,OAAS,EAAA,CAAA;oBACTC,MAAQ,EAAA;AACV,iBAAA;gBACAG,aAAe,EAAA;oBACbJ,OAAS,EAAA,CAAA;oBACTC,MAAQ,EAAA;AACV,iBAAA;;kCAEAN,GAACU,CAAAA,sBAAAA,EAAAA;wBAAuBX,SAAWA,EAAAA,SAAAA;wBAAWD,iBAAmBA,EAAAA;;kCACjEE,GAACZ,CAAAA,GAAAA,EAAAA;wBAAIoB,UAAY,EAAA,CAAA;wBAAGL,GAAI,EAAA,IAAA;AACtB,wBAAA,QAAA,gBAAAH,GAACW,CAAAA,OAAAA,EAAAA;4BAAQC,eAAe,EAAA;;;;;;;;;;"}

package/dist/admin/admin/src/components/MainNav/NavLink.js

@@ -11,11 +11,12 @@ var styled = require('styled-components');
  * -----------------------------------------------------------------------------------------------*/ const MainNavLinkWrapper = styled.styled(reactRouterDom.NavLink)`
   text-decoration: none;
   display: flex;
+  align-items: center;
   border-radius: ${({ theme })=>theme.borderRadius};
   background: ${({ theme })=>theme.colors.neutral0};
   color: ${({ theme })=>theme.colors.neutral500};
   position: relative;
-  width: fit-content;
+  width: 100%;
   padding-block: 0.6rem;
   padding-inline: 0.6rem;
 

package/dist/admin/admin/src/components/MainNav/NavLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavLink.js","sources":["../../../../../../admin/src/components/MainNav/NavLink.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Tooltip,\n  TooltipProps as DSTooltipProps,\n  Badge,\n  BadgeProps,\n  AccessibleIcon,\n} from '@strapi/design-system';\nimport { NavLink as RouterLink, LinkProps } from 'react-router-dom';\nimport { styled } from 'styled-components';\n/* -------------------------------------------------------------------------------------------------\n * Link\n * -----------------------------------------------------------------------------------------------*/\nconst MainNavLinkWrapper = styled(RouterLink)`\n  text-decoration: none;\n  display: flex;\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background: ${({ theme }) => theme.colors.neutral0};\n  color: ${({ theme }) => theme.colors.neutral500};\n  position: relative;\n  width: fit-content;\n  padding-block: 0.6rem;\n  padding-inline: 0.6rem;\n\n  &:hover {\n    svg path {\n      fill: ${({ theme }) => theme.colors.neutral600};\n    }\n    background: ${({ theme }) => theme.colors.neutral100};\n  }\n\n  &.active {\n    svg path {\n      fill: ${({ theme }) => theme.colors.primary600};\n    }\n    background: ${({ theme }) => theme.colors.primary100};\n  }\n`;\n\nconst LinkImpl = ({ children, ...props }: LinkProps) => (\n  <MainNavLinkWrapper {...props}>{children}</MainNavLinkWrapper>\n);\n/* -------------------------------------------------------------------------------------------------\n * Tooltip\n * -----------------------------------------------------------------------------------------------*/\nconst TooltipImpl = ({ children, label, position = 'right' }: NavLink.TooltipProps) => {\n  return (\n    <Tooltip side={position} label={label} delayDuration={0}>\n      <span>{children}</span>\n    </Tooltip>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Icon\n * -----------------------------------------------------------------------------------------------*/\nconst IconImpl = ({ label, children }: { label: string; children: React.ReactNode }) => {\n  if (!children) {\n    return null;\n  }\n  return <AccessibleIcon label={label}>{children}</AccessibleIcon>;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Badge\n * -----------------------------------------------------------------------------------------------*/\nconst CustomBadge = styled(Badge)`\n  /* override default badge styles to change the border radius of the Base element in the Design System */\n  border-radius: ${({ theme }) => theme.spaces[10]};\n  height: 2rem;\n`;\n\nconst BadgeImpl = ({ children, label, ...props }: NavLink.NavBadgeProps) => {\n  if (!children) {\n    return null;\n  }\n  return (\n    <CustomBadge\n      position=\"absolute\"\n      top=\"-0.8rem\"\n      left=\"1.7rem\"\n      aria-label={label}\n      active={false}\n      {...props}\n    >\n      {children}\n    </CustomBadge>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * EXPORTS\n * -----------------------------------------------------------------------------------------------*/\n\nconst NavLink = {\n  Link: LinkImpl,\n  Tooltip: TooltipImpl,\n  Icon: IconImpl,\n  Badge: BadgeImpl,\n};\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nnamespace NavLink {\n  export interface NavBadgeProps extends BadgeProps {\n    children: React.ReactNode;\n    label: string;\n  }\n\n  export interface TooltipProps {\n    children: React.ReactNode;\n    label?: string;\n    position?: DSTooltipProps['side'];\n  }\n}\n\nexport { NavLink };\n"],"names":["MainNavLinkWrapper","styled","RouterLink","theme","borderRadius","colors","neutral0","neutral500","neutral600","neutral100","primary600","primary100","LinkImpl","children","props","_jsx","TooltipImpl","label","position","Tooltip","side","delayDuration","span","IconImpl","AccessibleIcon","CustomBadge","Badge","spaces","BadgeImpl","top","left","aria-label","active","NavLink","Link","Icon"],"mappings":";;;;;;;;AAWA;;AAEkG,qGAClG,MAAMA,kBAAAA,GAAqBC,aAAOC,CAAAA,sBAAAA,CAAW;;;AAG5B,iBAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,YAAY,CAAC;cACvC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACC,QAAQ,CAAC;SAC5C,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACE,UAAU,CAAC;;;;;;;;YAQtC,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACG,UAAU,CAAC;;gBAErC,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACI,UAAU,CAAC;;;;;YAK7C,EAAE,CAAC,EAAEN,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACK,UAAU,CAAC;;gBAErC,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACM,UAAU,CAAC;;AAEzD,CAAC;AAED,MAAMC,QAAAA,GAAW,CAAC,EAAEC,QAAQ,EAAE,GAAGC,KAAAA,EAAkB,iBACjDC,cAACf,CAAAA,kBAAAA,EAAAA;AAAoB,QAAA,GAAGc,KAAK;AAAGD,QAAAA,QAAAA,EAAAA;;AAElC;;qGAGA,MAAMG,WAAc,GAAA,CAAC,EAAEH,QAAQ,EAAEI,KAAK,EAAEC,QAAW,GAAA,OAAO,EAAwB,GAAA;AAChF,IAAA,qBACEH,cAACI,CAAAA,oBAAAA,EAAAA;QAAQC,IAAMF,EAAAA,QAAAA;QAAUD,KAAOA,EAAAA,KAAAA;QAAOI,aAAe,EAAA,CAAA;AACpD,QAAA,QAAA,gBAAAN,cAACO,CAAAA,MAAAA,EAAAA;AAAMT,YAAAA,QAAAA,EAAAA;;;AAGb,CAAA;AAEA;;AAEkG,qGAClG,MAAMU,QAAW,GAAA,CAAC,EAAEN,KAAK,EAAEJ,QAAQ,EAAgD,GAAA;AACjF,IAAA,IAAI,CAACA,QAAU,EAAA;QACb,OAAO,IAAA;AACT;AACA,IAAA,qBAAOE,cAACS,CAAAA,2BAAAA,EAAAA;QAAeP,KAAOA,EAAAA,KAAAA;AAAQJ,QAAAA,QAAAA,EAAAA;;AACxC,CAAA;AAEA;;AAEkG,qGAClG,MAAMY,WAAAA,GAAcxB,aAAOyB,CAAAA,kBAAAA,CAAM;;iBAEhB,EAAE,CAAC,EAAEvB,KAAK,EAAE,GAAKA,KAAMwB,CAAAA,MAAM,CAAC,EAAA,CAAG,CAAC;;AAEnD,CAAC;AAED,MAAMC,SAAAA,GAAY,CAAC,EAAEf,QAAQ,EAAEI,KAAK,EAAE,GAAGH,KAA8B,EAAA,GAAA;AACrE,IAAA,IAAI,CAACD,QAAU,EAAA;QACb,OAAO,IAAA;AACT;AACA,IAAA,qBACEE,cAACU,CAAAA,WAAAA,EAAAA;QACCP,QAAS,EAAA,UAAA;QACTW,GAAI,EAAA,SAAA;QACJC,IAAK,EAAA,QAAA;QACLC,YAAYd,EAAAA,KAAAA;QACZe,MAAQ,EAAA,KAAA;AACP,QAAA,GAAGlB,KAAK;AAERD,QAAAA,QAAAA,EAAAA;;AAGP,CAAA;AAEA;;AAEkG,2GAE5FoB,OAAU,GAAA;IACdC,IAAMtB,EAAAA,QAAAA;IACNO,OAASH,EAAAA,WAAAA;IACTmB,IAAMZ,EAAAA,QAAAA;IACNG,KAAOE,EAAAA;AACT;;;;"}
+{"version":3,"file":"NavLink.js","sources":["../../../../../../admin/src/components/MainNav/NavLink.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Tooltip,\n  TooltipProps as DSTooltipProps,\n  Badge,\n  BadgeProps,\n  AccessibleIcon,\n} from '@strapi/design-system';\nimport { NavLink as RouterLink, LinkProps } from 'react-router-dom';\nimport { styled } from 'styled-components';\n/* -------------------------------------------------------------------------------------------------\n * Link\n * -----------------------------------------------------------------------------------------------*/\nconst MainNavLinkWrapper = styled(RouterLink)`\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background: ${({ theme }) => theme.colors.neutral0};\n  color: ${({ theme }) => theme.colors.neutral500};\n  position: relative;\n  width: 100%;\n  padding-block: 0.6rem;\n  padding-inline: 0.6rem;\n\n  &:hover {\n    svg path {\n      fill: ${({ theme }) => theme.colors.neutral600};\n    }\n    background: ${({ theme }) => theme.colors.neutral100};\n  }\n\n  &.active {\n    svg path {\n      fill: ${({ theme }) => theme.colors.primary600};\n    }\n    background: ${({ theme }) => theme.colors.primary100};\n  }\n`;\n\nconst LinkImpl = ({ children, ...props }: LinkProps) => (\n  <MainNavLinkWrapper {...props}>{children}</MainNavLinkWrapper>\n);\n/* -------------------------------------------------------------------------------------------------\n * Tooltip\n * -----------------------------------------------------------------------------------------------*/\nconst TooltipImpl = ({ children, label, position = 'right' }: NavLink.TooltipProps) => {\n  return (\n    <Tooltip side={position} label={label} delayDuration={0}>\n      <span>{children}</span>\n    </Tooltip>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Icon\n * -----------------------------------------------------------------------------------------------*/\nconst IconImpl = ({ label, children }: { label: string; children: React.ReactNode }) => {\n  if (!children) {\n    return null;\n  }\n  return <AccessibleIcon label={label}>{children}</AccessibleIcon>;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Badge\n * -----------------------------------------------------------------------------------------------*/\nconst CustomBadge = styled(Badge)`\n  /* override default badge styles to change the border radius of the Base element in the Design System */\n  border-radius: ${({ theme }) => theme.spaces[10]};\n  height: 2rem;\n`;\n\nconst BadgeImpl = ({ children, label, ...props }: NavLink.NavBadgeProps) => {\n  if (!children) {\n    return null;\n  }\n  return (\n    <CustomBadge\n      position=\"absolute\"\n      top=\"-0.8rem\"\n      left=\"1.7rem\"\n      aria-label={label}\n      active={false}\n      {...props}\n    >\n      {children}\n    </CustomBadge>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * EXPORTS\n * -----------------------------------------------------------------------------------------------*/\n\nconst NavLink = {\n  Link: LinkImpl,\n  Tooltip: TooltipImpl,\n  Icon: IconImpl,\n  Badge: BadgeImpl,\n};\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nnamespace NavLink {\n  export interface NavBadgeProps extends BadgeProps {\n    children: React.ReactNode;\n    label: string;\n  }\n\n  export interface TooltipProps {\n    children: React.ReactNode;\n    label?: string;\n    position?: DSTooltipProps['side'];\n  }\n}\n\nexport { NavLink };\n"],"names":["MainNavLinkWrapper","styled","RouterLink","theme","borderRadius","colors","neutral0","neutral500","neutral600","neutral100","primary600","primary100","LinkImpl","children","props","_jsx","TooltipImpl","label","position","Tooltip","side","delayDuration","span","IconImpl","AccessibleIcon","CustomBadge","Badge","spaces","BadgeImpl","top","left","aria-label","active","NavLink","Link","Icon"],"mappings":";;;;;;;;AAWA;;AAEkG,qGAClG,MAAMA,kBAAAA,GAAqBC,aAAOC,CAAAA,sBAAAA,CAAW;;;;AAI5B,iBAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,YAAY,CAAC;cACvC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACC,QAAQ,CAAC;SAC5C,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACE,UAAU,CAAC;;;;;;;;YAQtC,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACG,UAAU,CAAC;;gBAErC,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACI,UAAU,CAAC;;;;;YAK7C,EAAE,CAAC,EAAEN,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACK,UAAU,CAAC;;gBAErC,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACM,UAAU,CAAC;;AAEzD,CAAC;AAED,MAAMC,QAAAA,GAAW,CAAC,EAAEC,QAAQ,EAAE,GAAGC,KAAAA,EAAkB,iBACjDC,cAACf,CAAAA,kBAAAA,EAAAA;AAAoB,QAAA,GAAGc,KAAK;AAAGD,QAAAA,QAAAA,EAAAA;;AAElC;;qGAGA,MAAMG,WAAc,GAAA,CAAC,EAAEH,QAAQ,EAAEI,KAAK,EAAEC,QAAW,GAAA,OAAO,EAAwB,GAAA;AAChF,IAAA,qBACEH,cAACI,CAAAA,oBAAAA,EAAAA;QAAQC,IAAMF,EAAAA,QAAAA;QAAUD,KAAOA,EAAAA,KAAAA;QAAOI,aAAe,EAAA,CAAA;AACpD,QAAA,QAAA,gBAAAN,cAACO,CAAAA,MAAAA,EAAAA;AAAMT,YAAAA,QAAAA,EAAAA;;;AAGb,CAAA;AAEA;;AAEkG,qGAClG,MAAMU,QAAW,GAAA,CAAC,EAAEN,KAAK,EAAEJ,QAAQ,EAAgD,GAAA;AACjF,IAAA,IAAI,CAACA,QAAU,EAAA;QACb,OAAO,IAAA;AACT;AACA,IAAA,qBAAOE,cAACS,CAAAA,2BAAAA,EAAAA;QAAeP,KAAOA,EAAAA,KAAAA;AAAQJ,QAAAA,QAAAA,EAAAA;;AACxC,CAAA;AAEA;;AAEkG,qGAClG,MAAMY,WAAAA,GAAcxB,aAAOyB,CAAAA,kBAAAA,CAAM;;iBAEhB,EAAE,CAAC,EAAEvB,KAAK,EAAE,GAAKA,KAAMwB,CAAAA,MAAM,CAAC,EAAA,CAAG,CAAC;;AAEnD,CAAC;AAED,MAAMC,SAAAA,GAAY,CAAC,EAAEf,QAAQ,EAAEI,KAAK,EAAE,GAAGH,KAA8B,EAAA,GAAA;AACrE,IAAA,IAAI,CAACD,QAAU,EAAA;QACb,OAAO,IAAA;AACT;AACA,IAAA,qBACEE,cAACU,CAAAA,WAAAA,EAAAA;QACCP,QAAS,EAAA,UAAA;QACTW,GAAI,EAAA,SAAA;QACJC,IAAK,EAAA,QAAA;QACLC,YAAYd,EAAAA,KAAAA;QACZe,MAAQ,EAAA,KAAA;AACP,QAAA,GAAGlB,KAAK;AAERD,QAAAA,QAAAA,EAAAA;;AAGP,CAAA;AAEA;;AAEkG,2GAE5FoB,OAAU,GAAA;IACdC,IAAMtB,EAAAA,QAAAA;IACNO,OAASH,EAAAA,WAAAA;IACTmB,IAAMZ,EAAAA,QAAAA;IACNG,KAAOE,EAAAA;AACT;;;;"}

package/dist/admin/admin/src/components/MainNav/NavLink.mjs

@@ -9,11 +9,12 @@ import { styled } from 'styled-components';
  * -----------------------------------------------------------------------------------------------*/ const MainNavLinkWrapper = styled(NavLink$1)`
   text-decoration: none;
   display: flex;
+  align-items: center;
   border-radius: ${({ theme })=>theme.borderRadius};
   background: ${({ theme })=>theme.colors.neutral0};
   color: ${({ theme })=>theme.colors.neutral500};
   position: relative;
-  width: fit-content;
+  width: 100%;
   padding-block: 0.6rem;
   padding-inline: 0.6rem;
 

package/dist/admin/admin/src/components/MainNav/NavLink.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavLink.mjs","sources":["../../../../../../admin/src/components/MainNav/NavLink.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Tooltip,\n  TooltipProps as DSTooltipProps,\n  Badge,\n  BadgeProps,\n  AccessibleIcon,\n} from '@strapi/design-system';\nimport { NavLink as RouterLink, LinkProps } from 'react-router-dom';\nimport { styled } from 'styled-components';\n/* -------------------------------------------------------------------------------------------------\n * Link\n * -----------------------------------------------------------------------------------------------*/\nconst MainNavLinkWrapper = styled(RouterLink)`\n  text-decoration: none;\n  display: flex;\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background: ${({ theme }) => theme.colors.neutral0};\n  color: ${({ theme }) => theme.colors.neutral500};\n  position: relative;\n  width: fit-content;\n  padding-block: 0.6rem;\n  padding-inline: 0.6rem;\n\n  &:hover {\n    svg path {\n      fill: ${({ theme }) => theme.colors.neutral600};\n    }\n    background: ${({ theme }) => theme.colors.neutral100};\n  }\n\n  &.active {\n    svg path {\n      fill: ${({ theme }) => theme.colors.primary600};\n    }\n    background: ${({ theme }) => theme.colors.primary100};\n  }\n`;\n\nconst LinkImpl = ({ children, ...props }: LinkProps) => (\n  <MainNavLinkWrapper {...props}>{children}</MainNavLinkWrapper>\n);\n/* -------------------------------------------------------------------------------------------------\n * Tooltip\n * -----------------------------------------------------------------------------------------------*/\nconst TooltipImpl = ({ children, label, position = 'right' }: NavLink.TooltipProps) => {\n  return (\n    <Tooltip side={position} label={label} delayDuration={0}>\n      <span>{children}</span>\n    </Tooltip>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Icon\n * -----------------------------------------------------------------------------------------------*/\nconst IconImpl = ({ label, children }: { label: string; children: React.ReactNode }) => {\n  if (!children) {\n    return null;\n  }\n  return <AccessibleIcon label={label}>{children}</AccessibleIcon>;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Badge\n * -----------------------------------------------------------------------------------------------*/\nconst CustomBadge = styled(Badge)`\n  /* override default badge styles to change the border radius of the Base element in the Design System */\n  border-radius: ${({ theme }) => theme.spaces[10]};\n  height: 2rem;\n`;\n\nconst BadgeImpl = ({ children, label, ...props }: NavLink.NavBadgeProps) => {\n  if (!children) {\n    return null;\n  }\n  return (\n    <CustomBadge\n      position=\"absolute\"\n      top=\"-0.8rem\"\n      left=\"1.7rem\"\n      aria-label={label}\n      active={false}\n      {...props}\n    >\n      {children}\n    </CustomBadge>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * EXPORTS\n * -----------------------------------------------------------------------------------------------*/\n\nconst NavLink = {\n  Link: LinkImpl,\n  Tooltip: TooltipImpl,\n  Icon: IconImpl,\n  Badge: BadgeImpl,\n};\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nnamespace NavLink {\n  export interface NavBadgeProps extends BadgeProps {\n    children: React.ReactNode;\n    label: string;\n  }\n\n  export interface TooltipProps {\n    children: React.ReactNode;\n    label?: string;\n    position?: DSTooltipProps['side'];\n  }\n}\n\nexport { NavLink };\n"],"names":["MainNavLinkWrapper","styled","RouterLink","theme","borderRadius","colors","neutral0","neutral500","neutral600","neutral100","primary600","primary100","LinkImpl","children","props","_jsx","TooltipImpl","label","position","Tooltip","side","delayDuration","span","IconImpl","AccessibleIcon","CustomBadge","Badge","spaces","BadgeImpl","top","left","aria-label","active","NavLink","Link","Icon"],"mappings":";;;;;;AAWA;;AAEkG,qGAClG,MAAMA,kBAAAA,GAAqBC,MAAOC,CAAAA,SAAAA,CAAW;;;AAG5B,iBAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,YAAY,CAAC;cACvC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACC,QAAQ,CAAC;SAC5C,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACE,UAAU,CAAC;;;;;;;;YAQtC,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACG,UAAU,CAAC;;gBAErC,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACI,UAAU,CAAC;;;;;YAK7C,EAAE,CAAC,EAAEN,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACK,UAAU,CAAC;;gBAErC,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACM,UAAU,CAAC;;AAEzD,CAAC;AAED,MAAMC,QAAAA,GAAW,CAAC,EAAEC,QAAQ,EAAE,GAAGC,KAAAA,EAAkB,iBACjDC,GAACf,CAAAA,kBAAAA,EAAAA;AAAoB,QAAA,GAAGc,KAAK;AAAGD,QAAAA,QAAAA,EAAAA;;AAElC;;qGAGA,MAAMG,WAAc,GAAA,CAAC,EAAEH,QAAQ,EAAEI,KAAK,EAAEC,QAAW,GAAA,OAAO,EAAwB,GAAA;AAChF,IAAA,qBACEH,GAACI,CAAAA,OAAAA,EAAAA;QAAQC,IAAMF,EAAAA,QAAAA;QAAUD,KAAOA,EAAAA,KAAAA;QAAOI,aAAe,EAAA,CAAA;AACpD,QAAA,QAAA,gBAAAN,GAACO,CAAAA,MAAAA,EAAAA;AAAMT,YAAAA,QAAAA,EAAAA;;;AAGb,CAAA;AAEA;;AAEkG,qGAClG,MAAMU,QAAW,GAAA,CAAC,EAAEN,KAAK,EAAEJ,QAAQ,EAAgD,GAAA;AACjF,IAAA,IAAI,CAACA,QAAU,EAAA;QACb,OAAO,IAAA;AACT;AACA,IAAA,qBAAOE,GAACS,CAAAA,cAAAA,EAAAA;QAAeP,KAAOA,EAAAA,KAAAA;AAAQJ,QAAAA,QAAAA,EAAAA;;AACxC,CAAA;AAEA;;AAEkG,qGAClG,MAAMY,WAAAA,GAAcxB,MAAOyB,CAAAA,KAAAA,CAAM;;iBAEhB,EAAE,CAAC,EAAEvB,KAAK,EAAE,GAAKA,KAAMwB,CAAAA,MAAM,CAAC,EAAA,CAAG,CAAC;;AAEnD,CAAC;AAED,MAAMC,SAAAA,GAAY,CAAC,EAAEf,QAAQ,EAAEI,KAAK,EAAE,GAAGH,KAA8B,EAAA,GAAA;AACrE,IAAA,IAAI,CAACD,QAAU,EAAA;QACb,OAAO,IAAA;AACT;AACA,IAAA,qBACEE,GAACU,CAAAA,WAAAA,EAAAA;QACCP,QAAS,EAAA,UAAA;QACTW,GAAI,EAAA,SAAA;QACJC,IAAK,EAAA,QAAA;QACLC,YAAYd,EAAAA,KAAAA;QACZe,MAAQ,EAAA,KAAA;AACP,QAAA,GAAGlB,KAAK;AAERD,QAAAA,QAAAA,EAAAA;;AAGP,CAAA;AAEA;;AAEkG,2GAE5FoB,OAAU,GAAA;IACdC,IAAMtB,EAAAA,QAAAA;IACNO,OAASH,EAAAA,WAAAA;IACTmB,IAAMZ,EAAAA,QAAAA;IACNG,KAAOE,EAAAA;AACT;;;;"}
+{"version":3,"file":"NavLink.mjs","sources":["../../../../../../admin/src/components/MainNav/NavLink.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Tooltip,\n  TooltipProps as DSTooltipProps,\n  Badge,\n  BadgeProps,\n  AccessibleIcon,\n} from '@strapi/design-system';\nimport { NavLink as RouterLink, LinkProps } from 'react-router-dom';\nimport { styled } from 'styled-components';\n/* -------------------------------------------------------------------------------------------------\n * Link\n * -----------------------------------------------------------------------------------------------*/\nconst MainNavLinkWrapper = styled(RouterLink)`\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background: ${({ theme }) => theme.colors.neutral0};\n  color: ${({ theme }) => theme.colors.neutral500};\n  position: relative;\n  width: 100%;\n  padding-block: 0.6rem;\n  padding-inline: 0.6rem;\n\n  &:hover {\n    svg path {\n      fill: ${({ theme }) => theme.colors.neutral600};\n    }\n    background: ${({ theme }) => theme.colors.neutral100};\n  }\n\n  &.active {\n    svg path {\n      fill: ${({ theme }) => theme.colors.primary600};\n    }\n    background: ${({ theme }) => theme.colors.primary100};\n  }\n`;\n\nconst LinkImpl = ({ children, ...props }: LinkProps) => (\n  <MainNavLinkWrapper {...props}>{children}</MainNavLinkWrapper>\n);\n/* -------------------------------------------------------------------------------------------------\n * Tooltip\n * -----------------------------------------------------------------------------------------------*/\nconst TooltipImpl = ({ children, label, position = 'right' }: NavLink.TooltipProps) => {\n  return (\n    <Tooltip side={position} label={label} delayDuration={0}>\n      <span>{children}</span>\n    </Tooltip>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Icon\n * -----------------------------------------------------------------------------------------------*/\nconst IconImpl = ({ label, children }: { label: string; children: React.ReactNode }) => {\n  if (!children) {\n    return null;\n  }\n  return <AccessibleIcon label={label}>{children}</AccessibleIcon>;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Badge\n * -----------------------------------------------------------------------------------------------*/\nconst CustomBadge = styled(Badge)`\n  /* override default badge styles to change the border radius of the Base element in the Design System */\n  border-radius: ${({ theme }) => theme.spaces[10]};\n  height: 2rem;\n`;\n\nconst BadgeImpl = ({ children, label, ...props }: NavLink.NavBadgeProps) => {\n  if (!children) {\n    return null;\n  }\n  return (\n    <CustomBadge\n      position=\"absolute\"\n      top=\"-0.8rem\"\n      left=\"1.7rem\"\n      aria-label={label}\n      active={false}\n      {...props}\n    >\n      {children}\n    </CustomBadge>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * EXPORTS\n * -----------------------------------------------------------------------------------------------*/\n\nconst NavLink = {\n  Link: LinkImpl,\n  Tooltip: TooltipImpl,\n  Icon: IconImpl,\n  Badge: BadgeImpl,\n};\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nnamespace NavLink {\n  export interface NavBadgeProps extends BadgeProps {\n    children: React.ReactNode;\n    label: string;\n  }\n\n  export interface TooltipProps {\n    children: React.ReactNode;\n    label?: string;\n    position?: DSTooltipProps['side'];\n  }\n}\n\nexport { NavLink };\n"],"names":["MainNavLinkWrapper","styled","RouterLink","theme","borderRadius","colors","neutral0","neutral500","neutral600","neutral100","primary600","primary100","LinkImpl","children","props","_jsx","TooltipImpl","label","position","Tooltip","side","delayDuration","span","IconImpl","AccessibleIcon","CustomBadge","Badge","spaces","BadgeImpl","top","left","aria-label","active","NavLink","Link","Icon"],"mappings":";;;;;;AAWA;;AAEkG,qGAClG,MAAMA,kBAAAA,GAAqBC,MAAOC,CAAAA,SAAAA,CAAW;;;;AAI5B,iBAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,YAAY,CAAC;cACvC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACC,QAAQ,CAAC;SAC5C,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACE,UAAU,CAAC;;;;;;;;YAQtC,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACG,UAAU,CAAC;;gBAErC,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACI,UAAU,CAAC;;;;;YAK7C,EAAE,CAAC,EAAEN,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACK,UAAU,CAAC;;gBAErC,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACM,UAAU,CAAC;;AAEzD,CAAC;AAED,MAAMC,QAAAA,GAAW,CAAC,EAAEC,QAAQ,EAAE,GAAGC,KAAAA,EAAkB,iBACjDC,GAACf,CAAAA,kBAAAA,EAAAA;AAAoB,QAAA,GAAGc,KAAK;AAAGD,QAAAA,QAAAA,EAAAA;;AAElC;;qGAGA,MAAMG,WAAc,GAAA,CAAC,EAAEH,QAAQ,EAAEI,KAAK,EAAEC,QAAW,GAAA,OAAO,EAAwB,GAAA;AAChF,IAAA,qBACEH,GAACI,CAAAA,OAAAA,EAAAA;QAAQC,IAAMF,EAAAA,QAAAA;QAAUD,KAAOA,EAAAA,KAAAA;QAAOI,aAAe,EAAA,CAAA;AACpD,QAAA,QAAA,gBAAAN,GAACO,CAAAA,MAAAA,EAAAA;AAAMT,YAAAA,QAAAA,EAAAA;;;AAGb,CAAA;AAEA;;AAEkG,qGAClG,MAAMU,QAAW,GAAA,CAAC,EAAEN,KAAK,EAAEJ,QAAQ,EAAgD,GAAA;AACjF,IAAA,IAAI,CAACA,QAAU,EAAA;QACb,OAAO,IAAA;AACT;AACA,IAAA,qBAAOE,GAACS,CAAAA,cAAAA,EAAAA;QAAeP,KAAOA,EAAAA,KAAAA;AAAQJ,QAAAA,QAAAA,EAAAA;;AACxC,CAAA;AAEA;;AAEkG,qGAClG,MAAMY,WAAAA,GAAcxB,MAAOyB,CAAAA,KAAAA,CAAM;;iBAEhB,EAAE,CAAC,EAAEvB,KAAK,EAAE,GAAKA,KAAMwB,CAAAA,MAAM,CAAC,EAAA,CAAG,CAAC;;AAEnD,CAAC;AAED,MAAMC,SAAAA,GAAY,CAAC,EAAEf,QAAQ,EAAEI,KAAK,EAAE,GAAGH,KAA8B,EAAA,GAAA;AACrE,IAAA,IAAI,CAACD,QAAU,EAAA;QACb,OAAO,IAAA;AACT;AACA,IAAA,qBACEE,GAACU,CAAAA,WAAAA,EAAAA;QACCP,QAAS,EAAA,UAAA;QACTW,GAAI,EAAA,SAAA;QACJC,IAAK,EAAA,QAAA;QACLC,YAAYd,EAAAA,KAAAA;QACZe,MAAQ,EAAA,KAAA;AACP,QAAA,GAAGlB,KAAK;AAERD,QAAAA,QAAAA,EAAAA;;AAGP,CAAA;AAEA;;AAEkG,2GAE5FoB,OAAU,GAAA;IACdC,IAAMtB,EAAAA,QAAAA;IACNO,OAASH,EAAAA,WAAAA;IACTmB,IAAMZ,EAAAA,QAAAA;IACNG,KAAOE,EAAAA;AACT;;;;"}

package/dist/admin/admin/src/components/MainNav/NavUser.js

@@ -1,14 +1,23 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-require('react');
 var designSystem = require('@strapi/design-system');
 var reactIntl = require('react-intl');
 var reactRouterDom = require('react-router-dom');
 var styled = require('styled-components');
 var Auth = require('../../features/Auth.js');
+var users = require('../../utils/users.js');
 
 const MenuTrigger = styled.styled(designSystem.Menu.Trigger)`
+  padding: 0;
+
+  ${({ theme })=>theme.breakpoints.large} {
+    width: 4rem;
+    height: 4rem;
+    justify-content: center;
+  }
+`;
+const MenuIcon = styled.styled(designSystem.Flex)`
   height: ${({ theme })=>theme.spaces[7]};
   width: ${({ theme })=>theme.spaces[7]};
   border: none;
@@ -37,41 +46,49 @@ const StyledTypography = styled.styled(designSystem.Typography)`
   word-break: break-word;
   margin-bottom: ${({ theme })=>theme.spaces[3]};
 `;
-const NavUser = ({ children, initials, ...props })=>{
+const NavUser = ({ initials, showDisplayName = false, children, ...props })=>{
     const { formatMessage } = reactIntl.useIntl();
     const navigate = reactRouterDom.useNavigate();
     const user = Auth.useAuth('User', (state)=>state.user);
     const logout = Auth.useAuth('Logout', (state)=>state.logout);
+    const userDisplayName = users.getDisplayName(user);
     const handleProfile = ()=>{
-        navigate('/me');
+        const redirection = '/me';
+        navigate(redirection);
     };
     const handleLogout = ()=>{
+        const redirection = '/auth/login';
         logout();
-        navigate('/auth/login');
+        navigate(redirection);
     };
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-        justifyContent: "center",
-        padding: 3,
-        borderStyle: "solid",
-        borderWidth: "1px 0 0 0",
-        borderColor: "neutral150",
         ...props,
         children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Root, {
             children: [
-                /*#__PURE__*/ jsxRuntime.jsxs(MenuTrigger, {
+                /*#__PURE__*/ jsxRuntime.jsx(MenuTrigger, {
                     endIcon: null,
                     fullWidth: true,
-                    justifyContent: "center",
-                    children: [
-                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Avatar.Item, {
-                            delayMs: 0,
-                            fallback: initials
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
-                            tag: "span",
-                            children: children
-                        })
-                    ]
+                    justifyContent: "flex-start",
+                    children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        alignItems: "center",
+                        gap: 3,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(MenuIcon, {
+                                justifyContent: "center",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Avatar.Item, {
+                                    delayMs: 0,
+                                    fallback: initials || users.getInitials(user)
+                                })
+                            }),
+                            showDisplayName ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                variant: "omega",
+                                children: children || userDisplayName
+                            }) : /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
+                                tag: "span",
+                                children: children || userDisplayName
+                            })
+                        ]
+                    })
                 }),
                 /*#__PURE__*/ jsxRuntime.jsxs(MenuContent, {
                     popoverPlacement: "top-start",
@@ -86,7 +103,7 @@ const NavUser = ({ children, initials, ...props })=>{
                                     variant: "omega",
                                     fontWeight: "bold",
                                     textTransform: "none",
-                                    children: children
+                                    children: children || userDisplayName
                                 }),
                                 /*#__PURE__*/ jsxRuntime.jsx(StyledTypography, {
                                     variant: "pi",

package/dist/admin/admin/src/components/MainNav/NavUser.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavUser.js","sources":["../../../../../../admin/src/components/MainNav/NavUser.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex, Menu, VisuallyHidden, Avatar, Typography, Badge } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { useNavigate } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useAuth } from '../../features/Auth';\n\nconst MenuTrigger = styled(Menu.Trigger)`\n  height: ${({ theme }) => theme.spaces[7]};\n  width: ${({ theme }) => theme.spaces[7]};\n  border: none;\n  border-radius: 50%;\n  padding: 0;\n  overflow: hidden;\n`;\n\nconst MenuContent = styled(Menu.Content)`\n  max-height: fit-content;\n  width: 200px;\n`;\n\nconst UserInfo = styled(Flex)`\n  && {\n    padding: ${({ theme }) => theme.spaces[3]};\n  }\n  align-items: flex-start;\n`;\n\nconst BadgeWrapper = styled(Flex)`\n  display: flex;\n  flex-wrap: wrap;\n  gap: ${({ theme }) => theme.spaces[1]};\n\n  width: 100%;\n`;\nconst StyledTypography = styled(Typography)`\n  word-break: break-word;\n  margin-bottom: ${({ theme }) => theme.spaces[3]};\n`;\n\nexport interface NavUserProps {\n  initials: string;\n  children: React.ReactNode;\n}\n\nexport const NavUser = ({ children, initials, ...props }: NavUserProps) => {\n  const { formatMessage } = useIntl();\n  const navigate = useNavigate();\n  const user = useAuth('User', (state) => state.user);\n  const logout = useAuth('Logout', (state) => state.logout);\n\n  const handleProfile = () => {\n    navigate('/me');\n  };\n\n  const handleLogout = () => {\n    logout();\n    navigate('/auth/login');\n  };\n\n  return (\n    <Flex\n      justifyContent=\"center\"\n      padding={3}\n      borderStyle=\"solid\"\n      borderWidth=\"1px 0 0 0\"\n      borderColor=\"neutral150\"\n      {...props}\n    >\n      <Menu.Root>\n        <MenuTrigger endIcon={null} fullWidth justifyContent=\"center\">\n          <Avatar.Item delayMs={0} fallback={initials} />\n          <VisuallyHidden tag=\"span\">{children}</VisuallyHidden>\n        </MenuTrigger>\n\n        <MenuContent popoverPlacement=\"top-start\" zIndex={3}>\n          <UserInfo direction=\"column\" gap={0} alignItems=\"flex-start\">\n            <Typography variant=\"omega\" fontWeight=\"bold\" textTransform=\"none\">\n              {children}\n            </Typography>\n            <StyledTypography variant=\"pi\" textColor=\"neutral600\">\n              {user?.email}\n            </StyledTypography>\n            <BadgeWrapper>\n              {user?.roles?.map((role) => <Badge key={role.id}>{role.name}</Badge>)}\n            </BadgeWrapper>\n          </UserInfo>\n\n          <Menu.Separator />\n\n          <Menu.Item onSelect={handleProfile}>\n            {formatMessage({\n              id: 'global.profile.settings',\n              defaultMessage: 'Profile settings',\n            })}\n          </Menu.Item>\n\n          <Menu.Item variant=\"danger\" onSelect={handleLogout} color=\"danger600\">\n            {formatMessage({\n              id: 'app.components.LeftMenu.logout',\n              defaultMessage: 'Log out',\n            })}\n          </Menu.Item>\n        </MenuContent>\n      </Menu.Root>\n    </Flex>\n  );\n};\n"],"names":["MenuTrigger","styled","Menu","Trigger","theme","spaces","MenuContent","Content","UserInfo","Flex","BadgeWrapper","StyledTypography","Typography","NavUser","children","initials","props","formatMessage","useIntl","navigate","useNavigate","user","useAuth","state","logout","handleProfile","handleLogout","_jsx","justifyContent","padding","borderStyle","borderWidth","borderColor","_jsxs","Root","endIcon","fullWidth","Avatar","Item","delayMs","fallback","VisuallyHidden","tag","popoverPlacement","zIndex","direction","gap","alignItems","variant","fontWeight","textTransform","textColor","email","roles","map","role","Badge","name","id","Separator","onSelect","defaultMessage","color"],"mappings":"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"}
+{"version":3,"file":"NavUser.js","sources":["../../../../../../admin/src/components/MainNav/NavUser.tsx"],"sourcesContent":["import { Flex, Menu, VisuallyHidden, Avatar, Typography, Badge } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { useNavigate } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useAuth } from '../../features/Auth';\nimport { getInitials, getDisplayName } from '../../utils/users';\n\nconst MenuTrigger = styled(Menu.Trigger)`\n  padding: 0;\n\n  ${({ theme }) => theme.breakpoints.large} {\n    width: 4rem;\n    height: 4rem;\n    justify-content: center;\n  }\n`;\n\nconst MenuIcon = styled(Flex)`\n  height: ${({ theme }) => theme.spaces[7]};\n  width: ${({ theme }) => theme.spaces[7]};\n  border: none;\n  border-radius: 50%;\n  padding: 0;\n  overflow: hidden;\n`;\n\nconst MenuContent = styled(Menu.Content)`\n  max-height: fit-content;\n  width: 200px;\n`;\n\nconst UserInfo = styled(Flex)`\n  && {\n    padding: ${({ theme }) => theme.spaces[3]};\n  }\n  align-items: flex-start;\n`;\n\nconst BadgeWrapper = styled(Flex)`\n  display: flex;\n  flex-wrap: wrap;\n  gap: ${({ theme }) => theme.spaces[1]};\n\n  width: 100%;\n`;\nconst StyledTypography = styled(Typography)`\n  word-break: break-word;\n  margin-bottom: ${({ theme }) => theme.spaces[3]};\n`;\n\nexport interface NavUserProps {\n  initials?: string;\n  children?: React.ReactNode;\n  showDisplayName?: boolean;\n}\n\nexport const NavUser = ({\n  initials,\n  showDisplayName = false,\n  children,\n  ...props\n}: NavUserProps) => {\n  const { formatMessage } = useIntl();\n  const navigate = useNavigate();\n  const user = useAuth('User', (state) => state.user);\n  const logout = useAuth('Logout', (state) => state.logout);\n  const userDisplayName = getDisplayName(user);\n\n  const handleProfile = () => {\n    const redirection = '/me';\n    navigate(redirection);\n  };\n\n  const handleLogout = () => {\n    const redirection = '/auth/login';\n    logout();\n    navigate(redirection);\n  };\n\n  return (\n    <Flex {...props}>\n      <Menu.Root>\n        <MenuTrigger endIcon={null} fullWidth justifyContent=\"flex-start\">\n          <Flex alignItems=\"center\" gap={3}>\n            <MenuIcon justifyContent=\"center\">\n              <Avatar.Item delayMs={0} fallback={initials || getInitials(user)} />\n            </MenuIcon>\n            {showDisplayName ? (\n              <Typography variant=\"omega\">{children || userDisplayName}</Typography>\n            ) : (\n              <VisuallyHidden tag=\"span\">{children || userDisplayName}</VisuallyHidden>\n            )}\n          </Flex>\n        </MenuTrigger>\n\n        <MenuContent popoverPlacement=\"top-start\" zIndex={3}>\n          <UserInfo direction=\"column\" gap={0} alignItems=\"flex-start\">\n            <Typography variant=\"omega\" fontWeight=\"bold\" textTransform=\"none\">\n              {children || userDisplayName}\n            </Typography>\n            <StyledTypography variant=\"pi\" textColor=\"neutral600\">\n              {user?.email}\n            </StyledTypography>\n            <BadgeWrapper>\n              {user?.roles?.map((role) => <Badge key={role.id}>{role.name}</Badge>)}\n            </BadgeWrapper>\n          </UserInfo>\n\n          <Menu.Separator />\n\n          <Menu.Item onSelect={handleProfile}>\n            {formatMessage({\n              id: 'global.profile.settings',\n              defaultMessage: 'Profile settings',\n            })}\n          </Menu.Item>\n\n          <Menu.Item variant=\"danger\" onSelect={handleLogout} color=\"danger600\">\n            {formatMessage({\n              id: 'app.components.LeftMenu.logout',\n              defaultMessage: 'Log out',\n            })}\n          </Menu.Item>\n        </MenuContent>\n      </Menu.Root>\n    </Flex>\n  );\n};\n"],"names":["MenuTrigger","styled","Menu","Trigger","theme","breakpoints","large","MenuIcon","Flex","spaces","MenuContent","Content","UserInfo","BadgeWrapper","StyledTypography","Typography","NavUser","initials","showDisplayName","children","props","formatMessage","useIntl","navigate","useNavigate","user","useAuth","state","logout","userDisplayName","getDisplayName","handleProfile","redirection","handleLogout","_jsx","_jsxs","Root","endIcon","fullWidth","justifyContent","alignItems","gap","Avatar","Item","delayMs","fallback","getInitials","variant","VisuallyHidden","tag","popoverPlacement","zIndex","direction","fontWeight","textTransform","textColor","email","roles","map","role","Badge","name","id","Separator","onSelect","defaultMessage","color"],"mappings":"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"}

package/dist/admin/admin/src/components/MainNav/NavUser.mjs

@@ -1,12 +1,21 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import 'react';
 import { Menu, Flex, Typography, Avatar, VisuallyHidden, Badge } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import { useNavigate } from 'react-router-dom';
 import { styled } from 'styled-components';
 import { useAuth } from '../../features/Auth.mjs';
+import { getInitials, getDisplayName } from '../../utils/users.mjs';
 
 const MenuTrigger = styled(Menu.Trigger)`
+  padding: 0;
+
+  ${({ theme })=>theme.breakpoints.large} {
+    width: 4rem;
+    height: 4rem;
+    justify-content: center;
+  }
+`;
+const MenuIcon = styled(Flex)`
   height: ${({ theme })=>theme.spaces[7]};
   width: ${({ theme })=>theme.spaces[7]};
   border: none;
@@ -35,41 +44,49 @@ const StyledTypography = styled(Typography)`
   word-break: break-word;
   margin-bottom: ${({ theme })=>theme.spaces[3]};
 `;
-const NavUser = ({ children, initials, ...props })=>{
+const NavUser = ({ initials, showDisplayName = false, children, ...props })=>{
     const { formatMessage } = useIntl();
     const navigate = useNavigate();
     const user = useAuth('User', (state)=>state.user);
     const logout = useAuth('Logout', (state)=>state.logout);
+    const userDisplayName = getDisplayName(user);
     const handleProfile = ()=>{
-        navigate('/me');
+        const redirection = '/me';
+        navigate(redirection);
     };
     const handleLogout = ()=>{
+        const redirection = '/auth/login';
         logout();
-        navigate('/auth/login');
+        navigate(redirection);
     };
     return /*#__PURE__*/ jsx(Flex, {
-        justifyContent: "center",
-        padding: 3,
-        borderStyle: "solid",
-        borderWidth: "1px 0 0 0",
-        borderColor: "neutral150",
         ...props,
         children: /*#__PURE__*/ jsxs(Menu.Root, {
             children: [
-                /*#__PURE__*/ jsxs(MenuTrigger, {
+                /*#__PURE__*/ jsx(MenuTrigger, {
                     endIcon: null,
                     fullWidth: true,
-                    justifyContent: "center",
-                    children: [
-                        /*#__PURE__*/ jsx(Avatar.Item, {
-                            delayMs: 0,
-                            fallback: initials
-                        }),
-                        /*#__PURE__*/ jsx(VisuallyHidden, {
-                            tag: "span",
-                            children: children
-                        })
-                    ]
+                    justifyContent: "flex-start",
+                    children: /*#__PURE__*/ jsxs(Flex, {
+                        alignItems: "center",
+                        gap: 3,
+                        children: [
+                            /*#__PURE__*/ jsx(MenuIcon, {
+                                justifyContent: "center",
+                                children: /*#__PURE__*/ jsx(Avatar.Item, {
+                                    delayMs: 0,
+                                    fallback: initials || getInitials(user)
+                                })
+                            }),
+                            showDisplayName ? /*#__PURE__*/ jsx(Typography, {
+                                variant: "omega",
+                                children: children || userDisplayName
+                            }) : /*#__PURE__*/ jsx(VisuallyHidden, {
+                                tag: "span",
+                                children: children || userDisplayName
+                            })
+                        ]
+                    })
                 }),
                 /*#__PURE__*/ jsxs(MenuContent, {
                     popoverPlacement: "top-start",
@@ -84,7 +101,7 @@ const NavUser = ({ children, initials, ...props })=>{
                                     variant: "omega",
                                     fontWeight: "bold",
                                     textTransform: "none",
-                                    children: children
+                                    children: children || userDisplayName
                                 }),
                                 /*#__PURE__*/ jsx(StyledTypography, {
                                     variant: "pi",

package/dist/admin/admin/src/components/MainNav/NavUser.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavUser.mjs","sources":["../../../../../../admin/src/components/MainNav/NavUser.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex, Menu, VisuallyHidden, Avatar, Typography, Badge } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { useNavigate } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useAuth } from '../../features/Auth';\n\nconst MenuTrigger = styled(Menu.Trigger)`\n  height: ${({ theme }) => theme.spaces[7]};\n  width: ${({ theme }) => theme.spaces[7]};\n  border: none;\n  border-radius: 50%;\n  padding: 0;\n  overflow: hidden;\n`;\n\nconst MenuContent = styled(Menu.Content)`\n  max-height: fit-content;\n  width: 200px;\n`;\n\nconst UserInfo = styled(Flex)`\n  && {\n    padding: ${({ theme }) => theme.spaces[3]};\n  }\n  align-items: flex-start;\n`;\n\nconst BadgeWrapper = styled(Flex)`\n  display: flex;\n  flex-wrap: wrap;\n  gap: ${({ theme }) => theme.spaces[1]};\n\n  width: 100%;\n`;\nconst StyledTypography = styled(Typography)`\n  word-break: break-word;\n  margin-bottom: ${({ theme }) => theme.spaces[3]};\n`;\n\nexport interface NavUserProps {\n  initials: string;\n  children: React.ReactNode;\n}\n\nexport const NavUser = ({ children, initials, ...props }: NavUserProps) => {\n  const { formatMessage } = useIntl();\n  const navigate = useNavigate();\n  const user = useAuth('User', (state) => state.user);\n  const logout = useAuth('Logout', (state) => state.logout);\n\n  const handleProfile = () => {\n    navigate('/me');\n  };\n\n  const handleLogout = () => {\n    logout();\n    navigate('/auth/login');\n  };\n\n  return (\n    <Flex\n      justifyContent=\"center\"\n      padding={3}\n      borderStyle=\"solid\"\n      borderWidth=\"1px 0 0 0\"\n      borderColor=\"neutral150\"\n      {...props}\n    >\n      <Menu.Root>\n        <MenuTrigger endIcon={null} fullWidth justifyContent=\"center\">\n          <Avatar.Item delayMs={0} fallback={initials} />\n          <VisuallyHidden tag=\"span\">{children}</VisuallyHidden>\n        </MenuTrigger>\n\n        <MenuContent popoverPlacement=\"top-start\" zIndex={3}>\n          <UserInfo direction=\"column\" gap={0} alignItems=\"flex-start\">\n            <Typography variant=\"omega\" fontWeight=\"bold\" textTransform=\"none\">\n              {children}\n            </Typography>\n            <StyledTypography variant=\"pi\" textColor=\"neutral600\">\n              {user?.email}\n            </StyledTypography>\n            <BadgeWrapper>\n              {user?.roles?.map((role) => <Badge key={role.id}>{role.name}</Badge>)}\n            </BadgeWrapper>\n          </UserInfo>\n\n          <Menu.Separator />\n\n          <Menu.Item onSelect={handleProfile}>\n            {formatMessage({\n              id: 'global.profile.settings',\n              defaultMessage: 'Profile settings',\n            })}\n          </Menu.Item>\n\n          <Menu.Item variant=\"danger\" onSelect={handleLogout} color=\"danger600\">\n            {formatMessage({\n              id: 'app.components.LeftMenu.logout',\n              defaultMessage: 'Log out',\n            })}\n          </Menu.Item>\n        </MenuContent>\n      </Menu.Root>\n    </Flex>\n  );\n};\n"],"names":["MenuTrigger","styled","Menu","Trigger","theme","spaces","MenuContent","Content","UserInfo","Flex","BadgeWrapper","StyledTypography","Typography","NavUser","children","initials","props","formatMessage","useIntl","navigate","useNavigate","user","useAuth","state","logout","handleProfile","handleLogout","_jsx","justifyContent","padding","borderStyle","borderWidth","borderColor","_jsxs","Root","endIcon","fullWidth","Avatar","Item","delayMs","fallback","VisuallyHidden","tag","popoverPlacement","zIndex","direction","gap","alignItems","variant","fontWeight","textTransform","textColor","email","roles","map","role","Badge","name","id","Separator","onSelect","defaultMessage","color"],"mappings":"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"}
+{"version":3,"file":"NavUser.mjs","sources":["../../../../../../admin/src/components/MainNav/NavUser.tsx"],"sourcesContent":["import { Flex, Menu, VisuallyHidden, Avatar, Typography, Badge } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { useNavigate } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useAuth } from '../../features/Auth';\nimport { getInitials, getDisplayName } from '../../utils/users';\n\nconst MenuTrigger = styled(Menu.Trigger)`\n  padding: 0;\n\n  ${({ theme }) => theme.breakpoints.large} {\n    width: 4rem;\n    height: 4rem;\n    justify-content: center;\n  }\n`;\n\nconst MenuIcon = styled(Flex)`\n  height: ${({ theme }) => theme.spaces[7]};\n  width: ${({ theme }) => theme.spaces[7]};\n  border: none;\n  border-radius: 50%;\n  padding: 0;\n  overflow: hidden;\n`;\n\nconst MenuContent = styled(Menu.Content)`\n  max-height: fit-content;\n  width: 200px;\n`;\n\nconst UserInfo = styled(Flex)`\n  && {\n    padding: ${({ theme }) => theme.spaces[3]};\n  }\n  align-items: flex-start;\n`;\n\nconst BadgeWrapper = styled(Flex)`\n  display: flex;\n  flex-wrap: wrap;\n  gap: ${({ theme }) => theme.spaces[1]};\n\n  width: 100%;\n`;\nconst StyledTypography = styled(Typography)`\n  word-break: break-word;\n  margin-bottom: ${({ theme }) => theme.spaces[3]};\n`;\n\nexport interface NavUserProps {\n  initials?: string;\n  children?: React.ReactNode;\n  showDisplayName?: boolean;\n}\n\nexport const NavUser = ({\n  initials,\n  showDisplayName = false,\n  children,\n  ...props\n}: NavUserProps) => {\n  const { formatMessage } = useIntl();\n  const navigate = useNavigate();\n  const user = useAuth('User', (state) => state.user);\n  const logout = useAuth('Logout', (state) => state.logout);\n  const userDisplayName = getDisplayName(user);\n\n  const handleProfile = () => {\n    const redirection = '/me';\n    navigate(redirection);\n  };\n\n  const handleLogout = () => {\n    const redirection = '/auth/login';\n    logout();\n    navigate(redirection);\n  };\n\n  return (\n    <Flex {...props}>\n      <Menu.Root>\n        <MenuTrigger endIcon={null} fullWidth justifyContent=\"flex-start\">\n          <Flex alignItems=\"center\" gap={3}>\n            <MenuIcon justifyContent=\"center\">\n              <Avatar.Item delayMs={0} fallback={initials || getInitials(user)} />\n            </MenuIcon>\n            {showDisplayName ? (\n              <Typography variant=\"omega\">{children || userDisplayName}</Typography>\n            ) : (\n              <VisuallyHidden tag=\"span\">{children || userDisplayName}</VisuallyHidden>\n            )}\n          </Flex>\n        </MenuTrigger>\n\n        <MenuContent popoverPlacement=\"top-start\" zIndex={3}>\n          <UserInfo direction=\"column\" gap={0} alignItems=\"flex-start\">\n            <Typography variant=\"omega\" fontWeight=\"bold\" textTransform=\"none\">\n              {children || userDisplayName}\n            </Typography>\n            <StyledTypography variant=\"pi\" textColor=\"neutral600\">\n              {user?.email}\n            </StyledTypography>\n            <BadgeWrapper>\n              {user?.roles?.map((role) => <Badge key={role.id}>{role.name}</Badge>)}\n            </BadgeWrapper>\n          </UserInfo>\n\n          <Menu.Separator />\n\n          <Menu.Item onSelect={handleProfile}>\n            {formatMessage({\n              id: 'global.profile.settings',\n              defaultMessage: 'Profile settings',\n            })}\n          </Menu.Item>\n\n          <Menu.Item variant=\"danger\" onSelect={handleLogout} color=\"danger600\">\n            {formatMessage({\n              id: 'app.components.LeftMenu.logout',\n              defaultMessage: 'Log out',\n            })}\n          </Menu.Item>\n        </MenuContent>\n      </Menu.Root>\n    </Flex>\n  );\n};\n"],"names":["MenuTrigger","styled","Menu","Trigger","theme","breakpoints","large","MenuIcon","Flex","spaces","MenuContent","Content","UserInfo","BadgeWrapper","StyledTypography","Typography","NavUser","initials","showDisplayName","children","props","formatMessage","useIntl","navigate","useNavigate","user","useAuth","state","logout","userDisplayName","getDisplayName","handleProfile","redirection","handleLogout","_jsx","_jsxs","Root","endIcon","fullWidth","justifyContent","alignItems","gap","Avatar","Item","delayMs","fallback","getInitials","variant","VisuallyHidden","tag","popoverPlacement","zIndex","direction","fontWeight","textTransform","textColor","email","roles","map","role","Badge","name","id","Separator","onSelect","defaultMessage","color"],"mappings":"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"}

package/dist/admin/admin/src/components/MainNav/TrialCountdown.js

@@ -71,6 +71,13 @@ const CircleProgressBar = ({ percentage })=>{
         ]
     });
 };
+const Container = styled.styled(designSystem.Flex)`
+  display: none;
+
+  ${({ theme })=>theme.breakpoints.large} {
+    display: flex;
+  }
+`;
 const TrialCountdown = ()=>{
     const { formatMessage } = reactIntl.useIntl();
     const { license, isError, isLoading } = ee.useLicenseLimits();
@@ -86,7 +93,7 @@ const TrialCountdown = ()=>{
     const millisecondsPerDay = 1000 * 60 * 60 * 24;
     const timeDifference = targetDate.getTime() - now.getTime();
     const daysLeft = Math.ceil(timeDifference / millisecondsPerDay) <= 0 ? 0 : Math.ceil(timeDifference / millisecondsPerDay);
-    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+    return /*#__PURE__*/ jsxRuntime.jsx(Container, {
         justifyContent: "center",
         padding: 3,
         children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {

package/dist/admin/admin/src/components/MainNav/TrialCountdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrialCountdown.js","sources":["../../../../../../admin/src/components/MainNav/TrialCountdown.tsx"],"sourcesContent":["import { useLicenseLimits } from '@strapi/admin/strapi-admin/ee';\nimport { Flex, Tooltip } from '@strapi/design-system';\nimport { format, isBefore, startOfToday } from 'date-fns';\nimport { useIntl } from 'react-intl';\nimport { useTheme } from 'styled-components';\n\nimport { useGetLicenseTrialTimeLeftQuery } from '../../../src/services/admin';\n\ntype CircleProgressBarProps = {\n  percentage: number;\n};\n\nconst CircleProgressBar = ({ percentage }: CircleProgressBarProps) => {\n  const theme = useTheme();\n\n  const radius = 45;\n  const circumference = 2 * Math.PI * radius;\n  const offset = circumference * (1 - percentage / 100);\n\n  return (\n    <svg width=\"32\" height=\"32\" viewBox=\"0 0 100 100\">\n      <defs>\n        <linearGradient id=\"progressGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n          <stop offset=\"0%\" stopColor={theme.colors.primary600} />\n          <stop offset=\"100%\" stopColor={theme.colors.alternative600} />\n        </linearGradient>\n      </defs>\n      <circle cx=\"50\" cy=\"50\" r={radius} stroke=\"#ccc\" strokeWidth=\"10\" fill=\"none\" />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r={radius}\n        stroke=\"url(#progressGradient)\"\n        strokeWidth=\"10\"\n        fill=\"none\"\n        strokeDasharray={circumference}\n        strokeDashoffset={offset}\n        transform=\"rotate(-90 50 50)\"\n        strokeLinecap=\"round\"\n      />\n      <svg x=\"35\" y=\"25\" width=\"50\" height=\"50\" viewBox=\"0 0 32 32\">\n        <path\n          fill=\"url(#progressGradient)\"\n          d=\"m21.731 14.683-14 15a1 1 0 0 1-1.711-.875l1.832-9.167L.65 16.936a1 1 0 0 1-.375-1.625l14-15a1 1 0 0 1 1.71.875l-1.837 9.177 7.204 2.7a1 1 0 0 1 .375 1.62z\"\n        />\n      </svg>\n    </svg>\n  );\n};\n\nconst TrialCountdown = () => {\n  const { formatMessage } = useIntl();\n  const { license, isError, isLoading } = useLicenseLimits();\n\n  const timeLeftData = useGetLicenseTrialTimeLeftQuery(undefined, {\n    skip: !license?.isTrial,\n  });\n\n  if (\n    isError ||\n    isLoading ||\n    !license?.isTrial ||\n    timeLeftData.isLoading ||\n    timeLeftData.isError ||\n    !timeLeftData.data ||\n    !timeLeftData.data.trialEndsAt\n  ) {\n    return null;\n  }\n\n  const targetDate = new Date(timeLeftData.data.trialEndsAt);\n  const now = new Date();\n  const isTargetDateInPast = isBefore(targetDate, startOfToday());\n\n  const millisecondsPerDay = 1000 * 60 * 60 * 24;\n  const timeDifference = targetDate.getTime() - now.getTime();\n\n  const daysLeft =\n    Math.ceil(timeDifference / millisecondsPerDay) <= 0\n      ? 0\n      : Math.ceil(timeDifference / millisecondsPerDay);\n\n  return (\n    <Flex justifyContent=\"center\" padding={3}>\n      <Tooltip\n        label={formatMessage(\n          isTargetDateInPast\n            ? {\n                id: 'app.components.LeftMenu.trialCountdown.endedAt',\n                defaultMessage: 'Your trial ended on {date}',\n              }\n            : {\n                id: 'app.components.LeftMenu.trialCountdown.endsAt',\n                defaultMessage: 'Your trial ends on {date}',\n              },\n          {\n            date: format(new Date(timeLeftData.data.trialEndsAt), 'PPP'),\n          }\n        )}\n        side=\"right\"\n      >\n        <div data-testid=\"trial-countdown\">\n          <CircleProgressBar percentage={((30 - daysLeft) * 100) / 30} />\n        </div>\n      </Tooltip>\n    </Flex>\n  );\n};\n\nexport { TrialCountdown };\n"],"names":["CircleProgressBar","percentage","theme","useTheme","radius","circumference","Math","PI","offset","_jsxs","svg","width","height","viewBox","_jsx","defs","linearGradient","id","x1","y1","x2","y2","stop","stopColor","colors","primary600","alternative600","circle","cx","cy","r","stroke","strokeWidth","fill","strokeDasharray","strokeDashoffset","transform","strokeLinecap","x","y","path","d","TrialCountdown","formatMessage","useIntl","license","isError","isLoading","useLicenseLimits","timeLeftData","useGetLicenseTrialTimeLeftQuery","undefined","skip","isTrial","data","trialEndsAt","targetDate","Date","now","isTargetDateInPast","isBefore","startOfToday","millisecondsPerDay","timeDifference","getTime","daysLeft","ceil","Flex","justifyContent","padding","Tooltip","label","defaultMessage","date","format","side","div","data-testid"],"mappings":"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"}
+{"version":3,"file":"TrialCountdown.js","sources":["../../../../../../admin/src/components/MainNav/TrialCountdown.tsx"],"sourcesContent":["import { useLicenseLimits } from '@strapi/admin/strapi-admin/ee';\nimport { Flex, Tooltip } from '@strapi/design-system';\nimport { format, isBefore, startOfToday } from 'date-fns';\nimport { useIntl } from 'react-intl';\nimport { styled, useTheme } from 'styled-components';\n\nimport { useGetLicenseTrialTimeLeftQuery } from '../../../src/services/admin';\n\ntype CircleProgressBarProps = {\n  percentage: number;\n};\n\nconst CircleProgressBar = ({ percentage }: CircleProgressBarProps) => {\n  const theme = useTheme();\n\n  const radius = 45;\n  const circumference = 2 * Math.PI * radius;\n  const offset = circumference * (1 - percentage / 100);\n\n  return (\n    <svg width=\"32\" height=\"32\" viewBox=\"0 0 100 100\">\n      <defs>\n        <linearGradient id=\"progressGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n          <stop offset=\"0%\" stopColor={theme.colors.primary600} />\n          <stop offset=\"100%\" stopColor={theme.colors.alternative600} />\n        </linearGradient>\n      </defs>\n      <circle cx=\"50\" cy=\"50\" r={radius} stroke=\"#ccc\" strokeWidth=\"10\" fill=\"none\" />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r={radius}\n        stroke=\"url(#progressGradient)\"\n        strokeWidth=\"10\"\n        fill=\"none\"\n        strokeDasharray={circumference}\n        strokeDashoffset={offset}\n        transform=\"rotate(-90 50 50)\"\n        strokeLinecap=\"round\"\n      />\n      <svg x=\"35\" y=\"25\" width=\"50\" height=\"50\" viewBox=\"0 0 32 32\">\n        <path\n          fill=\"url(#progressGradient)\"\n          d=\"m21.731 14.683-14 15a1 1 0 0 1-1.711-.875l1.832-9.167L.65 16.936a1 1 0 0 1-.375-1.625l14-15a1 1 0 0 1 1.71.875l-1.837 9.177 7.204 2.7a1 1 0 0 1 .375 1.62z\"\n        />\n      </svg>\n    </svg>\n  );\n};\n\nconst Container = styled(Flex)`\n  display: none;\n\n  ${({ theme }) => theme.breakpoints.large} {\n    display: flex;\n  }\n`;\n\nconst TrialCountdown = () => {\n  const { formatMessage } = useIntl();\n  const { license, isError, isLoading } = useLicenseLimits();\n\n  const timeLeftData = useGetLicenseTrialTimeLeftQuery(undefined, {\n    skip: !license?.isTrial,\n  });\n\n  if (\n    isError ||\n    isLoading ||\n    !license?.isTrial ||\n    timeLeftData.isLoading ||\n    timeLeftData.isError ||\n    !timeLeftData.data ||\n    !timeLeftData.data.trialEndsAt\n  ) {\n    return null;\n  }\n\n  const targetDate = new Date(timeLeftData.data.trialEndsAt);\n  const now = new Date();\n  const isTargetDateInPast = isBefore(targetDate, startOfToday());\n\n  const millisecondsPerDay = 1000 * 60 * 60 * 24;\n  const timeDifference = targetDate.getTime() - now.getTime();\n\n  const daysLeft =\n    Math.ceil(timeDifference / millisecondsPerDay) <= 0\n      ? 0\n      : Math.ceil(timeDifference / millisecondsPerDay);\n\n  return (\n    <Container justifyContent=\"center\" padding={3}>\n      <Tooltip\n        label={formatMessage(\n          isTargetDateInPast\n            ? {\n                id: 'app.components.LeftMenu.trialCountdown.endedAt',\n                defaultMessage: 'Your trial ended on {date}',\n              }\n            : {\n                id: 'app.components.LeftMenu.trialCountdown.endsAt',\n                defaultMessage: 'Your trial ends on {date}',\n              },\n          {\n            date: format(new Date(timeLeftData.data.trialEndsAt), 'PPP'),\n          }\n        )}\n        side=\"right\"\n      >\n        <div data-testid=\"trial-countdown\">\n          <CircleProgressBar percentage={((30 - daysLeft) * 100) / 30} />\n        </div>\n      </Tooltip>\n    </Container>\n  );\n};\n\nexport { TrialCountdown };\n"],"names":["CircleProgressBar","percentage","theme","useTheme","radius","circumference","Math","PI","offset","_jsxs","svg","width","height","viewBox","_jsx","defs","linearGradient","id","x1","y1","x2","y2","stop","stopColor","colors","primary600","alternative600","circle","cx","cy","r","stroke","strokeWidth","fill","strokeDasharray","strokeDashoffset","transform","strokeLinecap","x","y","path","d","Container","styled","Flex","breakpoints","large","TrialCountdown","formatMessage","useIntl","license","isError","isLoading","useLicenseLimits","timeLeftData","useGetLicenseTrialTimeLeftQuery","undefined","skip","isTrial","data","trialEndsAt","targetDate","Date","now","isTargetDateInPast","isBefore","startOfToday","millisecondsPerDay","timeDifference","getTime","daysLeft","ceil","justifyContent","padding","Tooltip","label","defaultMessage","date","format","side","div","data-testid"],"mappings":"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"}

package/dist/admin/admin/src/components/MainNav/TrialCountdown.mjs

@@ -3,7 +3,7 @@ import { useLicenseLimits } from '@strapi/admin/strapi-admin/ee';
 import { Flex, Tooltip } from '@strapi/design-system';
 import { isBefore, startOfToday, format } from 'date-fns';
 import { useIntl } from 'react-intl';
-import { useTheme } from 'styled-components';
+import { styled, useTheme } from 'styled-components';
 import { useGetLicenseTrialTimeLeftQuery } from '../../services/admin.mjs';
 
 const CircleProgressBar = ({ percentage })=>{
@@ -69,6 +69,13 @@ const CircleProgressBar = ({ percentage })=>{
         ]
     });
 };
+const Container = styled(Flex)`
+  display: none;
+
+  ${({ theme })=>theme.breakpoints.large} {
+    display: flex;
+  }
+`;
 const TrialCountdown = ()=>{
     const { formatMessage } = useIntl();
     const { license, isError, isLoading } = useLicenseLimits();
@@ -84,7 +91,7 @@ const TrialCountdown = ()=>{
     const millisecondsPerDay = 1000 * 60 * 60 * 24;
     const timeDifference = targetDate.getTime() - now.getTime();
     const daysLeft = Math.ceil(timeDifference / millisecondsPerDay) <= 0 ? 0 : Math.ceil(timeDifference / millisecondsPerDay);
-    return /*#__PURE__*/ jsx(Flex, {
+    return /*#__PURE__*/ jsx(Container, {
         justifyContent: "center",
         padding: 3,
         children: /*#__PURE__*/ jsx(Tooltip, {