@strapi/admin 5.33.4 → 5.34.0

package/dist/admin/admin/src/components/Layouts/HeaderLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderLayout.mjs","sources":["../../../../../../admin/src/components/Layouts/HeaderLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography, TypographyProps, useCallbackRef } from '@strapi/design-system';\n\nimport { HEIGHT_TOP_NAVIGATION, RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\nimport { useDeviceType } from '../../hooks/useDeviceType';\nimport { useElementOnScreen } from '../../hooks/useElementOnScreen';\n\n/* -------------------------------------------------------------------------------------------------\n * BaseHeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface BaseHeaderLayoutProps extends Omit<TypographyProps<'div'>, 'tag'> {\n  navigationAction?: React.ReactNode;\n  primaryAction?: React.ReactNode;\n  secondaryAction?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  sticky?: boolean;\n  width?: number;\n}\n\nconst BaseHeaderLayout = React.forwardRef<HTMLDivElement, BaseHeaderLayoutProps>(\n  (\n    { navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props },\n    ref\n  ) => {\n    const isSubtitleString = typeof subtitle === 'string';\n\n    if (sticky) {\n      return (\n        <Box\n          display=\"flex\"\n          paddingLeft={6}\n          paddingRight={6}\n          paddingTop={2}\n          paddingBottom={2}\n          position=\"fixed\"\n          top={0}\n          background=\"neutral0\"\n          shadow=\"tableShadow\"\n          width={`${width}px`}\n          zIndex={2}\n          minHeight={HEIGHT_TOP_NAVIGATION}\n          data-strapi-header-sticky\n        >\n          <Flex alignItems=\"center\" justifyContent=\"space-between\" wrap=\"wrap\" width=\"100%\">\n            <Flex>\n              {navigationAction && <Box paddingRight={3}>{navigationAction}</Box>}\n              <Box>\n                <Typography variant=\"beta\" tag=\"h1\" {...props}>\n                  {title}\n                </Typography>\n                {isSubtitleString ? (\n                  <Typography variant=\"pi\" textColor=\"neutral600\">\n                    {subtitle}\n                  </Typography>\n                ) : (\n                  subtitle\n                )}\n              </Box>\n              {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n            </Flex>\n            <Flex>{primaryAction ? <Box paddingLeft={2}>{primaryAction}</Box> : undefined}</Flex>\n          </Flex>\n        </Box>\n      );\n    }\n\n    return (\n      <Box\n        ref={ref}\n        paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n        paddingRight={RESPONSIVE_DEFAULT_SPACING}\n        paddingBottom={{\n          initial: 4,\n          large: 8,\n        }}\n        paddingTop={{\n          initial: 4,\n          large: navigationAction ? 6 : 8,\n        }}\n        background=\"neutral100\"\n        data-strapi-header\n      >\n        <Flex direction=\"column\" alignItems=\"initial\" gap={2}>\n          {navigationAction}\n          <Flex justifyContent=\"space-between\" wrap=\"wrap\" gap={4}>\n            <Flex minWidth={0}>\n              <Typography\n                tag=\"h1\"\n                variant=\"alpha\"\n                {...props}\n                style={{\n                  wordBreak: 'break-word',\n                  overflowWrap: 'break-word',\n                  maxWidth: '100%',\n                }}\n              >\n                {title}\n              </Typography>\n              {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n            </Flex>\n            {primaryAction}\n          </Flex>\n        </Flex>\n        {isSubtitleString ? (\n          <Typography\n            variant=\"epsilon\"\n            textColor=\"neutral600\"\n            tag=\"p\"\n            paddingTop={{ initial: 4, large: 0 }}\n          >\n            {subtitle}\n          </Typography>\n        ) : (\n          subtitle\n        )}\n      </Box>\n    );\n  }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * HeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderLayoutProps extends BaseHeaderLayoutProps {}\n\nconst HeaderLayout = (props: HeaderLayoutProps) => {\n  const baseHeaderLayoutRef = React.useRef<HTMLDivElement>(null);\n  const [headerSize, setHeaderSize] = React.useState<DOMRect | null>(null);\n  const [isVisible, setIsVisible] = React.useState(true);\n  const deviceType = useDeviceType();\n\n  const containerRef = useElementOnScreen<HTMLDivElement>(setIsVisible, {\n    root: null,\n    rootMargin: '0px',\n    threshold: 0,\n  });\n\n  useResizeObserver([containerRef, baseHeaderLayoutRef], () => {\n    const headerContainer = baseHeaderLayoutRef.current ?? containerRef.current;\n\n    if (headerContainer) {\n      const newSize = headerContainer.getBoundingClientRect();\n\n      setHeaderSize((prevSize) => {\n        // Only update if size actually changed\n        if (!prevSize || prevSize.height !== newSize.height || prevSize.width !== newSize.width) {\n          return newSize;\n        }\n        return prevSize;\n      });\n    }\n  });\n\n  React.useEffect(() => {\n    if (baseHeaderLayoutRef.current || containerRef.current) {\n      const headerContainer = baseHeaderLayoutRef.current ?? containerRef.current;\n      setHeaderSize(headerContainer?.getBoundingClientRect() ?? null);\n    }\n  }, [containerRef]);\n\n  if (deviceType === 'mobile') {\n    return <BaseHeaderLayout {...props} />;\n  }\n\n  return (\n    <div ref={containerRef}>\n      <div style={{ height: headerSize?.height }}>\n        {isVisible && <BaseHeaderLayout ref={baseHeaderLayoutRef} {...props} />}\n      </div>\n\n      {!isVisible && <BaseHeaderLayout {...props} sticky width={headerSize?.width} />}\n    </div>\n  );\n};\n\nHeaderLayout.displayName = 'HeaderLayout';\n\n/**\n * useResizeObserver: hook that observes the size of an element and calls a callback when it changes.\n */\nconst useResizeObserver = (\n  sources: React.RefObject<HTMLElement> | React.RefObject<HTMLElement>[],\n  onResize: ResizeObserverCallback\n) => {\n  const handleResize = useCallbackRef(onResize);\n\n  React.useLayoutEffect(() => {\n    const resizeObs = new ResizeObserver(handleResize);\n\n    if (Array.isArray(sources)) {\n      sources.forEach((source) => {\n        if (source.current) {\n          resizeObs.observe(source.current);\n        }\n      });\n    } else if (sources.current) {\n      resizeObs.observe(sources.current);\n    }\n\n    return () => {\n      resizeObs.disconnect();\n    };\n  }, [sources, handleResize]);\n};\n\nexport type { HeaderLayoutProps, BaseHeaderLayoutProps };\nexport { HeaderLayout, BaseHeaderLayout };\n"],"names":["BaseHeaderLayout","React","forwardRef","navigationAction","primaryAction","secondaryAction","subtitle","title","sticky","width","props","ref","isSubtitleString","_jsx","Box","display","paddingLeft","paddingRight","paddingTop","paddingBottom","position","top","background","shadow","zIndex","minHeight","HEIGHT_TOP_NAVIGATION","data-strapi-header-sticky","_jsxs","Flex","alignItems","justifyContent","wrap","Typography","variant","tag","textColor","undefined","RESPONSIVE_DEFAULT_SPACING","initial","large","data-strapi-header","direction","gap","minWidth","style","wordBreak","overflowWrap","maxWidth","HeaderLayout","baseHeaderLayoutRef","useRef","headerSize","setHeaderSize","useState","isVisible","setIsVisible","deviceType","useDeviceType","containerRef","useElementOnScreen","root","rootMargin","threshold","useResizeObserver","headerContainer","current","newSize","getBoundingClientRect","prevSize","height","useEffect","div","displayName","sources","onResize","handleResize","useCallbackRef","useLayoutEffect","resizeObs","ResizeObserver","Array","isArray","forEach","source","observe","disconnect"],"mappings":"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"}
+{"version":3,"file":"HeaderLayout.mjs","sources":["../../../../../../admin/src/components/Layouts/HeaderLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography, TypographyProps, useCallbackRef } from '@strapi/design-system';\n\nimport { HEIGHT_TOP_NAVIGATION, RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\nimport { useDeviceType } from '../../hooks/useDeviceType';\nimport { useElementOnScreen } from '../../hooks/useElementOnScreen';\nimport { useIsMobile } from '../../hooks/useMediaQuery';\n\n/* -------------------------------------------------------------------------------------------------\n * BaseHeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface BaseHeaderLayoutProps extends Omit<TypographyProps<'div'>, 'tag'> {\n  navigationAction?: React.ReactNode;\n  primaryAction?: React.ReactNode;\n  secondaryAction?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  sticky?: boolean;\n  width?: number;\n}\n\nconst BaseHeaderLayout = React.forwardRef<HTMLDivElement, BaseHeaderLayoutProps>(\n  (\n    { navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props },\n    ref\n  ) => {\n    const isMobile = useIsMobile();\n    const isSubtitleString = typeof subtitle === 'string';\n\n    if (sticky) {\n      return (\n        <Box\n          display=\"flex\"\n          paddingLeft={6}\n          paddingRight={6}\n          paddingTop={2}\n          paddingBottom={2}\n          position=\"fixed\"\n          top={0}\n          background=\"neutral0\"\n          shadow=\"tableShadow\"\n          width={`${width}px`}\n          zIndex={2}\n          minHeight={HEIGHT_TOP_NAVIGATION}\n          data-strapi-header-sticky\n        >\n          <Flex alignItems=\"center\" justifyContent=\"space-between\" wrap=\"wrap\" width=\"100%\">\n            <Flex>\n              {navigationAction && <Box paddingRight={3}>{navigationAction}</Box>}\n              <Box>\n                <Typography variant=\"beta\" tag=\"h1\" {...props}>\n                  {title}\n                </Typography>\n                {isSubtitleString ? (\n                  <Typography variant=\"pi\" textColor=\"neutral600\">\n                    {subtitle}\n                  </Typography>\n                ) : (\n                  subtitle\n                )}\n              </Box>\n              {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n            </Flex>\n            <Flex>{primaryAction ? <Box paddingLeft={2}>{primaryAction}</Box> : undefined}</Flex>\n          </Flex>\n        </Box>\n      );\n    }\n\n    return (\n      <Box\n        ref={ref}\n        paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n        paddingRight={RESPONSIVE_DEFAULT_SPACING}\n        paddingBottom={{\n          initial: 4,\n          large: 8,\n        }}\n        paddingTop={{\n          initial: 4,\n          large: navigationAction ? 6 : 8,\n        }}\n        background=\"neutral100\"\n        data-strapi-header\n      >\n        <Flex direction=\"column\" alignItems=\"initial\" gap={3}>\n          {navigationAction}\n          {!isMobile ? (\n            <>\n              <Flex justifyContent=\"space-between\" wrap=\"wrap\" gap={4}>\n                <Flex minWidth={0}>\n                  <Typography\n                    tag=\"h1\"\n                    variant=\"alpha\"\n                    {...props}\n                    style={{\n                      wordBreak: 'break-word',\n                      overflowWrap: 'break-word',\n                      maxWidth: '100%',\n                    }}\n                  >\n                    {title}\n                  </Typography>\n                  {secondaryAction && <Box paddingLeft={4}>{secondaryAction}</Box>}\n                </Flex>\n                <Box paddingLeft={4} marginLeft=\"auto\">\n                  {primaryAction}\n                </Box>\n              </Flex>\n              {isSubtitleString ? (\n                <Typography variant=\"epsilon\" textColor=\"neutral600\" tag=\"p\">\n                  {subtitle}\n                </Typography>\n              ) : (\n                subtitle\n              )}\n            </>\n          ) : (\n            <>\n              <Typography\n                tag=\"h1\"\n                variant=\"alpha\"\n                {...props}\n                style={{\n                  wordBreak: 'break-word',\n                  overflowWrap: 'break-word',\n                  maxWidth: '100%',\n                }}\n              >\n                {title}\n              </Typography>\n              {isSubtitleString ? (\n                <Typography variant=\"epsilon\" textColor=\"neutral600\" tag=\"p\">\n                  {subtitle}\n                </Typography>\n              ) : (\n                subtitle\n              )}\n              {(primaryAction || secondaryAction) && (\n                <Flex gap={3}>\n                  {secondaryAction}\n                  {primaryAction}\n                </Flex>\n              )}\n            </>\n          )}\n        </Flex>\n      </Box>\n    );\n  }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * HeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderLayoutProps extends BaseHeaderLayoutProps {}\n\nconst HeaderLayout = (props: HeaderLayoutProps) => {\n  const baseHeaderLayoutRef = React.useRef<HTMLDivElement>(null);\n  const [headerSize, setHeaderSize] = React.useState<DOMRect | null>(null);\n  const [isVisible, setIsVisible] = React.useState(true);\n  const deviceType = useDeviceType();\n\n  const containerRef = useElementOnScreen<HTMLDivElement>(setIsVisible, {\n    root: null,\n    rootMargin: '0px',\n    threshold: 0,\n  });\n\n  useResizeObserver([containerRef, baseHeaderLayoutRef], () => {\n    const headerContainer = baseHeaderLayoutRef.current ?? containerRef.current;\n\n    if (headerContainer) {\n      const newSize = headerContainer.getBoundingClientRect();\n\n      setHeaderSize((prevSize) => {\n        // Only update if size actually changed\n        if (!prevSize || prevSize.height !== newSize.height || prevSize.width !== newSize.width) {\n          return newSize;\n        }\n        return prevSize;\n      });\n    }\n  });\n\n  React.useEffect(() => {\n    if (baseHeaderLayoutRef.current || containerRef.current) {\n      const headerContainer = baseHeaderLayoutRef.current ?? containerRef.current;\n      setHeaderSize(headerContainer?.getBoundingClientRect() ?? null);\n    }\n  }, [containerRef]);\n\n  if (deviceType === 'mobile') {\n    return <BaseHeaderLayout {...props} />;\n  }\n\n  return (\n    <div ref={containerRef}>\n      <div style={{ height: headerSize?.height }}>\n        {isVisible && <BaseHeaderLayout ref={baseHeaderLayoutRef} {...props} />}\n      </div>\n\n      {!isVisible && <BaseHeaderLayout {...props} sticky width={headerSize?.width} />}\n    </div>\n  );\n};\n\nHeaderLayout.displayName = 'HeaderLayout';\n\n/**\n * useResizeObserver: hook that observes the size of an element and calls a callback when it changes.\n */\nconst useResizeObserver = (\n  sources: React.RefObject<HTMLElement> | React.RefObject<HTMLElement>[],\n  onResize: ResizeObserverCallback\n) => {\n  const handleResize = useCallbackRef(onResize);\n\n  React.useLayoutEffect(() => {\n    const resizeObs = new ResizeObserver(handleResize);\n\n    if (Array.isArray(sources)) {\n      sources.forEach((source) => {\n        if (source.current) {\n          resizeObs.observe(source.current);\n        }\n      });\n    } else if (sources.current) {\n      resizeObs.observe(sources.current);\n    }\n\n    return () => {\n      resizeObs.disconnect();\n    };\n  }, [sources, handleResize]);\n};\n\nexport type { HeaderLayoutProps, BaseHeaderLayoutProps };\nexport { HeaderLayout, BaseHeaderLayout };\n"],"names":["BaseHeaderLayout","React","forwardRef","navigationAction","primaryAction","secondaryAction","subtitle","title","sticky","width","props","ref","isMobile","useIsMobile","isSubtitleString","_jsx","Box","display","paddingLeft","paddingRight","paddingTop","paddingBottom","position","top","background","shadow","zIndex","minHeight","HEIGHT_TOP_NAVIGATION","data-strapi-header-sticky","_jsxs","Flex","alignItems","justifyContent","wrap","Typography","variant","tag","textColor","undefined","RESPONSIVE_DEFAULT_SPACING","initial","large","data-strapi-header","direction","gap","_Fragment","minWidth","style","wordBreak","overflowWrap","maxWidth","marginLeft","HeaderLayout","baseHeaderLayoutRef","useRef","headerSize","setHeaderSize","useState","isVisible","setIsVisible","deviceType","useDeviceType","containerRef","useElementOnScreen","root","rootMargin","threshold","useResizeObserver","headerContainer","current","newSize","getBoundingClientRect","prevSize","height","useEffect","div","displayName","sources","onResize","handleResize","useCallbackRef","useLayoutEffect","resizeObs","ResizeObserver","Array","isArray","forEach","source","observe","disconnect"],"mappings":"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"}

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

@@ -59,6 +59,7 @@ const MainNavIcons = ({ listLinks, mobileLinks, handleClickOnLink })=>{
         const linkMobile = mobileLinks.find((mobileLink)=>mobileLink.to === link.to);
         const LinkElement = ()=>/*#__PURE__*/ jsxRuntime.jsxs(NavLink.NavLink.NavButton, {
                 to: link.to,
+                target: link.target,
                 onClick: ()=>handleClickOnLink(link.to),
                 "aria-label": labelValue,
                 children: [

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

@@ -1 +1 @@
-{"version":3,"file":"MainNavLinks.js","sources":["../../../../../../admin/src/components/MainNav/MainNavLinks.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { Lightning } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { type To } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useIsDesktop } from '../../hooks/useMediaQuery';\nimport { MenuItem } from '../../hooks/useMenu';\nimport { tours } from '../GuidedTour/Tours';\n\nimport { NavLink } from './NavLink';\n\nconst NavLinkBadgeLock = styled(NavLink.Badge)`\n  background-color: transparent;\n`;\n\nconst NavLinkBadgeCounter = styled(NavLink.Badge)`\n  span {\n    color: ${({ theme }) => theme.colors.neutral0};\n  }\n`;\n\n/**\n * Will attach a guided tour tooltip to the right links. (mostly used for the finish step to indicate the next tour)\n * @param to: The target link\n * @param children: The original link to be wrapped in a guided tour tooltip\n * @returns The link wrapped in a guided tour tooltip or the original link if no guided tour needs to be attached\n */\nconst GuidedTourTooltip = ({ to, children }: { to: To; children: React.ReactNode }) => {\n  const normalizedTo = to.toString().replace(/\\//g, '');\n\n  switch (normalizedTo) {\n    // We attach the final step of the content type builder tour on content manager link because it's the next tour (Content Type Builder -> Content Manager).\n    case 'content-manager':\n      return <tours.contentTypeBuilder.Finish>{children}</tours.contentTypeBuilder.Finish>;\n    // We attach the final step of the api tokens tour on the home link because it was the last tour (API Tokens -> Go back to homepage).\n    case '':\n      return <tours.apiTokens.Finish>{children}</tours.apiTokens.Finish>;\n    // We attach the final step of the content manager tour on the settings link because it's the next tour (Content Manager -> API tokens).\n    case 'settings':\n      return <tours.contentManager.Finish>{children}</tours.contentManager.Finish>;\n    // If the link doesn't match any of the above, we return the original link.\n    default:\n      return children;\n  }\n};\n\nconst MainNavIcons = ({\n  listLinks,\n  mobileLinks,\n  handleClickOnLink,\n}: {\n  listLinks: MenuItem[];\n  mobileLinks: MenuItem[];\n  handleClickOnLink: (value: string) => void;\n}) => {\n  const { formatMessage } = useIntl();\n  const isDesktop = useIsDesktop();\n\n  return listLinks.length > 0\n    ? listLinks.map((link) => {\n        const LinkIcon = link.icon;\n        const badgeContentLock = link?.licenseOnly ? <Lightning fill=\"primary600\" /> : undefined;\n\n        const badgeContentNumeric =\n          link.notificationsCount && link.notificationsCount > 0\n            ? link.notificationsCount.toString()\n            : undefined;\n\n        const labelValue = formatMessage(link.intlLabel);\n        const linkMobile = mobileLinks.find((mobileLink) => mobileLink.to === link.to);\n\n        const LinkElement = () => (\n          <NavLink.NavButton\n            to={link.to}\n            onClick={() => handleClickOnLink(link.to)}\n            aria-label={labelValue}\n          >\n            <NavLink.Icon label={labelValue}>\n              <LinkIcon width=\"20\" height=\"20\" fill=\"neutral500\" />\n            </NavLink.Icon>\n            {badgeContentLock ? (\n              <NavLinkBadgeLock\n                label=\"locked\"\n                textColor=\"neutral500\"\n                paddingLeft={0}\n                paddingRight={0}\n              >\n                {badgeContentLock}\n              </NavLinkBadgeLock>\n            ) : badgeContentNumeric ? (\n              <NavLinkBadgeCounter\n                label={badgeContentNumeric}\n                backgroundColor=\"primary600\"\n                width=\"2.3rem\"\n                color=\"neutral0\"\n              >\n                {badgeContentNumeric}\n              </NavLinkBadgeCounter>\n            ) : null}\n          </NavLink.NavButton>\n        );\n\n        return isDesktop || (!isDesktop && linkMobile) ? (\n          <Flex tag=\"li\" key={link.to}>\n            <GuidedTourTooltip to={link.to}>\n              <NavLink.Tooltip position={isDesktop ? 'right' : 'bottom'} label={labelValue}>\n                <LinkElement />\n              </NavLink.Tooltip>\n            </GuidedTourTooltip>\n          </Flex>\n        ) : null;\n      })\n    : null;\n};\n\nconst IconContainer = styled(Box)`\n  svg {\n    display: block;\n  }\n`;\n\nconst MainNavBurgerMenuLinks = ({\n  listLinks,\n  handleClickOnLink,\n}: {\n  listLinks: MenuItem[];\n  handleClickOnLink: (value: string) => void;\n}) => {\n  const { formatMessage } = useIntl();\n\n  return listLinks.length > 0\n    ? listLinks.map((link) => {\n        const LinkIcon = link.icon;\n        const badgeContentLock = link?.licenseOnly ? <Lightning fill=\"primary600\" /> : undefined;\n\n        const badgeContentNumeric =\n          link.notificationsCount && link.notificationsCount > 0\n            ? link.notificationsCount.toString()\n            : undefined;\n\n        const labelValue = formatMessage(link.intlLabel);\n        const navigationTarget = link.navigationLink || link.to;\n\n        return (\n          <Flex alignItems=\"center\" tag=\"li\" key={navigationTarget}>\n            <NavLink.Link\n              to={navigationTarget}\n              onClick={() => handleClickOnLink(navigationTarget)}\n              aria-label={labelValue}\n            >\n              <Flex alignItems=\"center\" gap={3}>\n                <IconContainer>\n                  <LinkIcon width=\"20\" height=\"20\" fill=\"neutral500\" />\n                </IconContainer>\n                <Typography>{labelValue}</Typography>\n                {badgeContentLock ? (\n                  <NavLinkBadgeLock\n                    label=\"locked\"\n                    textColor=\"neutral500\"\n                    paddingLeft={0}\n                    paddingRight={0}\n                  >\n                    {badgeContentLock}\n                  </NavLinkBadgeLock>\n                ) : badgeContentNumeric ? (\n                  <NavLinkBadgeCounter\n                    label={badgeContentNumeric}\n                    backgroundColor=\"primary600\"\n                    width=\"2.3rem\"\n                    color=\"neutral0\"\n                  >\n                    {badgeContentNumeric}\n                  </NavLinkBadgeCounter>\n                ) : null}\n              </Flex>\n            </NavLink.Link>\n          </Flex>\n        );\n      })\n    : null;\n};\n\nexport { MainNavIcons, MainNavBurgerMenuLinks };\n"],"names":["NavLinkBadgeLock","styled","NavLink","Badge","NavLinkBadgeCounter","theme","colors","neutral0","GuidedTourTooltip","to","children","normalizedTo","toString","replace","_jsx","tours","contentTypeBuilder","Finish","apiTokens","contentManager","MainNavIcons","listLinks","mobileLinks","handleClickOnLink","formatMessage","useIntl","isDesktop","useIsDesktop","length","map","link","LinkIcon","icon","badgeContentLock","licenseOnly","Lightning","fill","undefined","badgeContentNumeric","notificationsCount","labelValue","intlLabel","linkMobile","find","mobileLink","LinkElement","_jsxs","NavButton","onClick","aria-label","Icon","label","width","height","textColor","paddingLeft","paddingRight","backgroundColor","color","Flex","tag","Tooltip","position","IconContainer","Box","MainNavBurgerMenuLinks","navigationTarget","navigationLink","alignItems","Link","gap","Typography"],"mappings":"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"}
+{"version":3,"file":"MainNavLinks.js","sources":["../../../../../../admin/src/components/MainNav/MainNavLinks.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { Lightning } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { type To } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useIsDesktop } from '../../hooks/useMediaQuery';\nimport { MenuItem } from '../../hooks/useMenu';\nimport { tours } from '../GuidedTour/Tours';\n\nimport { NavLink } from './NavLink';\n\nconst NavLinkBadgeLock = styled(NavLink.Badge)`\n  background-color: transparent;\n`;\n\nconst NavLinkBadgeCounter = styled(NavLink.Badge)`\n  span {\n    color: ${({ theme }) => theme.colors.neutral0};\n  }\n`;\n\n/**\n * Will attach a guided tour tooltip to the right links. (mostly used for the finish step to indicate the next tour)\n * @param to: The target link\n * @param children: The original link to be wrapped in a guided tour tooltip\n * @returns The link wrapped in a guided tour tooltip or the original link if no guided tour needs to be attached\n */\nconst GuidedTourTooltip = ({ to, children }: { to: To; children: React.ReactNode }) => {\n  const normalizedTo = to.toString().replace(/\\//g, '');\n\n  switch (normalizedTo) {\n    // We attach the final step of the content type builder tour on content manager link because it's the next tour (Content Type Builder -> Content Manager).\n    case 'content-manager':\n      return <tours.contentTypeBuilder.Finish>{children}</tours.contentTypeBuilder.Finish>;\n    // We attach the final step of the api tokens tour on the home link because it was the last tour (API Tokens -> Go back to homepage).\n    case '':\n      return <tours.apiTokens.Finish>{children}</tours.apiTokens.Finish>;\n    // We attach the final step of the content manager tour on the settings link because it's the next tour (Content Manager -> API tokens).\n    case 'settings':\n      return <tours.contentManager.Finish>{children}</tours.contentManager.Finish>;\n    // If the link doesn't match any of the above, we return the original link.\n    default:\n      return children;\n  }\n};\n\nconst MainNavIcons = ({\n  listLinks,\n  mobileLinks,\n  handleClickOnLink,\n}: {\n  listLinks: MenuItem[];\n  mobileLinks: MenuItem[];\n  handleClickOnLink: (value: string) => void;\n}) => {\n  const { formatMessage } = useIntl();\n  const isDesktop = useIsDesktop();\n\n  return listLinks.length > 0\n    ? listLinks.map((link) => {\n        const LinkIcon = link.icon;\n        const badgeContentLock = link?.licenseOnly ? <Lightning fill=\"primary600\" /> : undefined;\n\n        const badgeContentNumeric =\n          link.notificationsCount && link.notificationsCount > 0\n            ? link.notificationsCount.toString()\n            : undefined;\n\n        const labelValue = formatMessage(link.intlLabel);\n        const linkMobile = mobileLinks.find((mobileLink) => mobileLink.to === link.to);\n\n        const LinkElement = () => (\n          <NavLink.NavButton\n            to={link.to}\n            target={link.target}\n            onClick={() => handleClickOnLink(link.to)}\n            aria-label={labelValue}\n          >\n            <NavLink.Icon label={labelValue}>\n              <LinkIcon width=\"20\" height=\"20\" fill=\"neutral500\" />\n            </NavLink.Icon>\n            {badgeContentLock ? (\n              <NavLinkBadgeLock\n                label=\"locked\"\n                textColor=\"neutral500\"\n                paddingLeft={0}\n                paddingRight={0}\n              >\n                {badgeContentLock}\n              </NavLinkBadgeLock>\n            ) : badgeContentNumeric ? (\n              <NavLinkBadgeCounter\n                label={badgeContentNumeric}\n                backgroundColor=\"primary600\"\n                width=\"2.3rem\"\n                color=\"neutral0\"\n              >\n                {badgeContentNumeric}\n              </NavLinkBadgeCounter>\n            ) : null}\n          </NavLink.NavButton>\n        );\n\n        return isDesktop || (!isDesktop && linkMobile) ? (\n          <Flex tag=\"li\" key={link.to}>\n            <GuidedTourTooltip to={link.to}>\n              <NavLink.Tooltip position={isDesktop ? 'right' : 'bottom'} label={labelValue}>\n                <LinkElement />\n              </NavLink.Tooltip>\n            </GuidedTourTooltip>\n          </Flex>\n        ) : null;\n      })\n    : null;\n};\n\nconst IconContainer = styled(Box)`\n  svg {\n    display: block;\n  }\n`;\n\nconst MainNavBurgerMenuLinks = ({\n  listLinks,\n  handleClickOnLink,\n}: {\n  listLinks: MenuItem[];\n  handleClickOnLink: (value: string) => void;\n}) => {\n  const { formatMessage } = useIntl();\n\n  return listLinks.length > 0\n    ? listLinks.map((link) => {\n        const LinkIcon = link.icon;\n        const badgeContentLock = link?.licenseOnly ? <Lightning fill=\"primary600\" /> : undefined;\n\n        const badgeContentNumeric =\n          link.notificationsCount && link.notificationsCount > 0\n            ? link.notificationsCount.toString()\n            : undefined;\n\n        const labelValue = formatMessage(link.intlLabel);\n        const navigationTarget = link.navigationLink || link.to;\n\n        return (\n          <Flex alignItems=\"center\" tag=\"li\" key={navigationTarget}>\n            <NavLink.Link\n              to={navigationTarget}\n              onClick={() => handleClickOnLink(navigationTarget)}\n              aria-label={labelValue}\n            >\n              <Flex alignItems=\"center\" gap={3}>\n                <IconContainer>\n                  <LinkIcon width=\"20\" height=\"20\" fill=\"neutral500\" />\n                </IconContainer>\n                <Typography>{labelValue}</Typography>\n                {badgeContentLock ? (\n                  <NavLinkBadgeLock\n                    label=\"locked\"\n                    textColor=\"neutral500\"\n                    paddingLeft={0}\n                    paddingRight={0}\n                  >\n                    {badgeContentLock}\n                  </NavLinkBadgeLock>\n                ) : badgeContentNumeric ? (\n                  <NavLinkBadgeCounter\n                    label={badgeContentNumeric}\n                    backgroundColor=\"primary600\"\n                    width=\"2.3rem\"\n                    color=\"neutral0\"\n                  >\n                    {badgeContentNumeric}\n                  </NavLinkBadgeCounter>\n                ) : null}\n              </Flex>\n            </NavLink.Link>\n          </Flex>\n        );\n      })\n    : null;\n};\n\nexport { MainNavIcons, MainNavBurgerMenuLinks };\n"],"names":["NavLinkBadgeLock","styled","NavLink","Badge","NavLinkBadgeCounter","theme","colors","neutral0","GuidedTourTooltip","to","children","normalizedTo","toString","replace","_jsx","tours","contentTypeBuilder","Finish","apiTokens","contentManager","MainNavIcons","listLinks","mobileLinks","handleClickOnLink","formatMessage","useIntl","isDesktop","useIsDesktop","length","map","link","LinkIcon","icon","badgeContentLock","licenseOnly","Lightning","fill","undefined","badgeContentNumeric","notificationsCount","labelValue","intlLabel","linkMobile","find","mobileLink","LinkElement","_jsxs","NavButton","target","onClick","aria-label","Icon","label","width","height","textColor","paddingLeft","paddingRight","backgroundColor","color","Flex","tag","Tooltip","position","IconContainer","Box","MainNavBurgerMenuLinks","navigationTarget","navigationLink","alignItems","Link","gap","Typography"],"mappings":"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"}

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

@@ -57,6 +57,7 @@ const MainNavIcons = ({ listLinks, mobileLinks, handleClickOnLink })=>{
         const linkMobile = mobileLinks.find((mobileLink)=>mobileLink.to === link.to);
         const LinkElement = ()=>/*#__PURE__*/ jsxs(NavLink.NavButton, {
                 to: link.to,
+                target: link.target,
                 onClick: ()=>handleClickOnLink(link.to),
                 "aria-label": labelValue,
                 children: [

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

@@ -1 +1 @@
-{"version":3,"file":"MainNavLinks.mjs","sources":["../../../../../../admin/src/components/MainNav/MainNavLinks.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { Lightning } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { type To } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useIsDesktop } from '../../hooks/useMediaQuery';\nimport { MenuItem } from '../../hooks/useMenu';\nimport { tours } from '../GuidedTour/Tours';\n\nimport { NavLink } from './NavLink';\n\nconst NavLinkBadgeLock = styled(NavLink.Badge)`\n  background-color: transparent;\n`;\n\nconst NavLinkBadgeCounter = styled(NavLink.Badge)`\n  span {\n    color: ${({ theme }) => theme.colors.neutral0};\n  }\n`;\n\n/**\n * Will attach a guided tour tooltip to the right links. (mostly used for the finish step to indicate the next tour)\n * @param to: The target link\n * @param children: The original link to be wrapped in a guided tour tooltip\n * @returns The link wrapped in a guided tour tooltip or the original link if no guided tour needs to be attached\n */\nconst GuidedTourTooltip = ({ to, children }: { to: To; children: React.ReactNode }) => {\n  const normalizedTo = to.toString().replace(/\\//g, '');\n\n  switch (normalizedTo) {\n    // We attach the final step of the content type builder tour on content manager link because it's the next tour (Content Type Builder -> Content Manager).\n    case 'content-manager':\n      return <tours.contentTypeBuilder.Finish>{children}</tours.contentTypeBuilder.Finish>;\n    // We attach the final step of the api tokens tour on the home link because it was the last tour (API Tokens -> Go back to homepage).\n    case '':\n      return <tours.apiTokens.Finish>{children}</tours.apiTokens.Finish>;\n    // We attach the final step of the content manager tour on the settings link because it's the next tour (Content Manager -> API tokens).\n    case 'settings':\n      return <tours.contentManager.Finish>{children}</tours.contentManager.Finish>;\n    // If the link doesn't match any of the above, we return the original link.\n    default:\n      return children;\n  }\n};\n\nconst MainNavIcons = ({\n  listLinks,\n  mobileLinks,\n  handleClickOnLink,\n}: {\n  listLinks: MenuItem[];\n  mobileLinks: MenuItem[];\n  handleClickOnLink: (value: string) => void;\n}) => {\n  const { formatMessage } = useIntl();\n  const isDesktop = useIsDesktop();\n\n  return listLinks.length > 0\n    ? listLinks.map((link) => {\n        const LinkIcon = link.icon;\n        const badgeContentLock = link?.licenseOnly ? <Lightning fill=\"primary600\" /> : undefined;\n\n        const badgeContentNumeric =\n          link.notificationsCount && link.notificationsCount > 0\n            ? link.notificationsCount.toString()\n            : undefined;\n\n        const labelValue = formatMessage(link.intlLabel);\n        const linkMobile = mobileLinks.find((mobileLink) => mobileLink.to === link.to);\n\n        const LinkElement = () => (\n          <NavLink.NavButton\n            to={link.to}\n            onClick={() => handleClickOnLink(link.to)}\n            aria-label={labelValue}\n          >\n            <NavLink.Icon label={labelValue}>\n              <LinkIcon width=\"20\" height=\"20\" fill=\"neutral500\" />\n            </NavLink.Icon>\n            {badgeContentLock ? (\n              <NavLinkBadgeLock\n                label=\"locked\"\n                textColor=\"neutral500\"\n                paddingLeft={0}\n                paddingRight={0}\n              >\n                {badgeContentLock}\n              </NavLinkBadgeLock>\n            ) : badgeContentNumeric ? (\n              <NavLinkBadgeCounter\n                label={badgeContentNumeric}\n                backgroundColor=\"primary600\"\n                width=\"2.3rem\"\n                color=\"neutral0\"\n              >\n                {badgeContentNumeric}\n              </NavLinkBadgeCounter>\n            ) : null}\n          </NavLink.NavButton>\n        );\n\n        return isDesktop || (!isDesktop && linkMobile) ? (\n          <Flex tag=\"li\" key={link.to}>\n            <GuidedTourTooltip to={link.to}>\n              <NavLink.Tooltip position={isDesktop ? 'right' : 'bottom'} label={labelValue}>\n                <LinkElement />\n              </NavLink.Tooltip>\n            </GuidedTourTooltip>\n          </Flex>\n        ) : null;\n      })\n    : null;\n};\n\nconst IconContainer = styled(Box)`\n  svg {\n    display: block;\n  }\n`;\n\nconst MainNavBurgerMenuLinks = ({\n  listLinks,\n  handleClickOnLink,\n}: {\n  listLinks: MenuItem[];\n  handleClickOnLink: (value: string) => void;\n}) => {\n  const { formatMessage } = useIntl();\n\n  return listLinks.length > 0\n    ? listLinks.map((link) => {\n        const LinkIcon = link.icon;\n        const badgeContentLock = link?.licenseOnly ? <Lightning fill=\"primary600\" /> : undefined;\n\n        const badgeContentNumeric =\n          link.notificationsCount && link.notificationsCount > 0\n            ? link.notificationsCount.toString()\n            : undefined;\n\n        const labelValue = formatMessage(link.intlLabel);\n        const navigationTarget = link.navigationLink || link.to;\n\n        return (\n          <Flex alignItems=\"center\" tag=\"li\" key={navigationTarget}>\n            <NavLink.Link\n              to={navigationTarget}\n              onClick={() => handleClickOnLink(navigationTarget)}\n              aria-label={labelValue}\n            >\n              <Flex alignItems=\"center\" gap={3}>\n                <IconContainer>\n                  <LinkIcon width=\"20\" height=\"20\" fill=\"neutral500\" />\n                </IconContainer>\n                <Typography>{labelValue}</Typography>\n                {badgeContentLock ? (\n                  <NavLinkBadgeLock\n                    label=\"locked\"\n                    textColor=\"neutral500\"\n                    paddingLeft={0}\n                    paddingRight={0}\n                  >\n                    {badgeContentLock}\n                  </NavLinkBadgeLock>\n                ) : badgeContentNumeric ? (\n                  <NavLinkBadgeCounter\n                    label={badgeContentNumeric}\n                    backgroundColor=\"primary600\"\n                    width=\"2.3rem\"\n                    color=\"neutral0\"\n                  >\n                    {badgeContentNumeric}\n                  </NavLinkBadgeCounter>\n                ) : null}\n              </Flex>\n            </NavLink.Link>\n          </Flex>\n        );\n      })\n    : null;\n};\n\nexport { MainNavIcons, MainNavBurgerMenuLinks };\n"],"names":["NavLinkBadgeLock","styled","NavLink","Badge","NavLinkBadgeCounter","theme","colors","neutral0","GuidedTourTooltip","to","children","normalizedTo","toString","replace","_jsx","tours","contentTypeBuilder","Finish","apiTokens","contentManager","MainNavIcons","listLinks","mobileLinks","handleClickOnLink","formatMessage","useIntl","isDesktop","useIsDesktop","length","map","link","LinkIcon","icon","badgeContentLock","licenseOnly","Lightning","fill","undefined","badgeContentNumeric","notificationsCount","labelValue","intlLabel","linkMobile","find","mobileLink","LinkElement","_jsxs","NavButton","onClick","aria-label","Icon","label","width","height","textColor","paddingLeft","paddingRight","backgroundColor","color","Flex","tag","Tooltip","position","IconContainer","Box","MainNavBurgerMenuLinks","navigationTarget","navigationLink","alignItems","Link","gap","Typography"],"mappings":"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"}
+{"version":3,"file":"MainNavLinks.mjs","sources":["../../../../../../admin/src/components/MainNav/MainNavLinks.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { Lightning } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { type To } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useIsDesktop } from '../../hooks/useMediaQuery';\nimport { MenuItem } from '../../hooks/useMenu';\nimport { tours } from '../GuidedTour/Tours';\n\nimport { NavLink } from './NavLink';\n\nconst NavLinkBadgeLock = styled(NavLink.Badge)`\n  background-color: transparent;\n`;\n\nconst NavLinkBadgeCounter = styled(NavLink.Badge)`\n  span {\n    color: ${({ theme }) => theme.colors.neutral0};\n  }\n`;\n\n/**\n * Will attach a guided tour tooltip to the right links. (mostly used for the finish step to indicate the next tour)\n * @param to: The target link\n * @param children: The original link to be wrapped in a guided tour tooltip\n * @returns The link wrapped in a guided tour tooltip or the original link if no guided tour needs to be attached\n */\nconst GuidedTourTooltip = ({ to, children }: { to: To; children: React.ReactNode }) => {\n  const normalizedTo = to.toString().replace(/\\//g, '');\n\n  switch (normalizedTo) {\n    // We attach the final step of the content type builder tour on content manager link because it's the next tour (Content Type Builder -> Content Manager).\n    case 'content-manager':\n      return <tours.contentTypeBuilder.Finish>{children}</tours.contentTypeBuilder.Finish>;\n    // We attach the final step of the api tokens tour on the home link because it was the last tour (API Tokens -> Go back to homepage).\n    case '':\n      return <tours.apiTokens.Finish>{children}</tours.apiTokens.Finish>;\n    // We attach the final step of the content manager tour on the settings link because it's the next tour (Content Manager -> API tokens).\n    case 'settings':\n      return <tours.contentManager.Finish>{children}</tours.contentManager.Finish>;\n    // If the link doesn't match any of the above, we return the original link.\n    default:\n      return children;\n  }\n};\n\nconst MainNavIcons = ({\n  listLinks,\n  mobileLinks,\n  handleClickOnLink,\n}: {\n  listLinks: MenuItem[];\n  mobileLinks: MenuItem[];\n  handleClickOnLink: (value: string) => void;\n}) => {\n  const { formatMessage } = useIntl();\n  const isDesktop = useIsDesktop();\n\n  return listLinks.length > 0\n    ? listLinks.map((link) => {\n        const LinkIcon = link.icon;\n        const badgeContentLock = link?.licenseOnly ? <Lightning fill=\"primary600\" /> : undefined;\n\n        const badgeContentNumeric =\n          link.notificationsCount && link.notificationsCount > 0\n            ? link.notificationsCount.toString()\n            : undefined;\n\n        const labelValue = formatMessage(link.intlLabel);\n        const linkMobile = mobileLinks.find((mobileLink) => mobileLink.to === link.to);\n\n        const LinkElement = () => (\n          <NavLink.NavButton\n            to={link.to}\n            target={link.target}\n            onClick={() => handleClickOnLink(link.to)}\n            aria-label={labelValue}\n          >\n            <NavLink.Icon label={labelValue}>\n              <LinkIcon width=\"20\" height=\"20\" fill=\"neutral500\" />\n            </NavLink.Icon>\n            {badgeContentLock ? (\n              <NavLinkBadgeLock\n                label=\"locked\"\n                textColor=\"neutral500\"\n                paddingLeft={0}\n                paddingRight={0}\n              >\n                {badgeContentLock}\n              </NavLinkBadgeLock>\n            ) : badgeContentNumeric ? (\n              <NavLinkBadgeCounter\n                label={badgeContentNumeric}\n                backgroundColor=\"primary600\"\n                width=\"2.3rem\"\n                color=\"neutral0\"\n              >\n                {badgeContentNumeric}\n              </NavLinkBadgeCounter>\n            ) : null}\n          </NavLink.NavButton>\n        );\n\n        return isDesktop || (!isDesktop && linkMobile) ? (\n          <Flex tag=\"li\" key={link.to}>\n            <GuidedTourTooltip to={link.to}>\n              <NavLink.Tooltip position={isDesktop ? 'right' : 'bottom'} label={labelValue}>\n                <LinkElement />\n              </NavLink.Tooltip>\n            </GuidedTourTooltip>\n          </Flex>\n        ) : null;\n      })\n    : null;\n};\n\nconst IconContainer = styled(Box)`\n  svg {\n    display: block;\n  }\n`;\n\nconst MainNavBurgerMenuLinks = ({\n  listLinks,\n  handleClickOnLink,\n}: {\n  listLinks: MenuItem[];\n  handleClickOnLink: (value: string) => void;\n}) => {\n  const { formatMessage } = useIntl();\n\n  return listLinks.length > 0\n    ? listLinks.map((link) => {\n        const LinkIcon = link.icon;\n        const badgeContentLock = link?.licenseOnly ? <Lightning fill=\"primary600\" /> : undefined;\n\n        const badgeContentNumeric =\n          link.notificationsCount && link.notificationsCount > 0\n            ? link.notificationsCount.toString()\n            : undefined;\n\n        const labelValue = formatMessage(link.intlLabel);\n        const navigationTarget = link.navigationLink || link.to;\n\n        return (\n          <Flex alignItems=\"center\" tag=\"li\" key={navigationTarget}>\n            <NavLink.Link\n              to={navigationTarget}\n              onClick={() => handleClickOnLink(navigationTarget)}\n              aria-label={labelValue}\n            >\n              <Flex alignItems=\"center\" gap={3}>\n                <IconContainer>\n                  <LinkIcon width=\"20\" height=\"20\" fill=\"neutral500\" />\n                </IconContainer>\n                <Typography>{labelValue}</Typography>\n                {badgeContentLock ? (\n                  <NavLinkBadgeLock\n                    label=\"locked\"\n                    textColor=\"neutral500\"\n                    paddingLeft={0}\n                    paddingRight={0}\n                  >\n                    {badgeContentLock}\n                  </NavLinkBadgeLock>\n                ) : badgeContentNumeric ? (\n                  <NavLinkBadgeCounter\n                    label={badgeContentNumeric}\n                    backgroundColor=\"primary600\"\n                    width=\"2.3rem\"\n                    color=\"neutral0\"\n                  >\n                    {badgeContentNumeric}\n                  </NavLinkBadgeCounter>\n                ) : null}\n              </Flex>\n            </NavLink.Link>\n          </Flex>\n        );\n      })\n    : null;\n};\n\nexport { MainNavIcons, MainNavBurgerMenuLinks };\n"],"names":["NavLinkBadgeLock","styled","NavLink","Badge","NavLinkBadgeCounter","theme","colors","neutral0","GuidedTourTooltip","to","children","normalizedTo","toString","replace","_jsx","tours","contentTypeBuilder","Finish","apiTokens","contentManager","MainNavIcons","listLinks","mobileLinks","handleClickOnLink","formatMessage","useIntl","isDesktop","useIsDesktop","length","map","link","LinkIcon","icon","badgeContentLock","licenseOnly","Lightning","fill","undefined","badgeContentNumeric","notificationsCount","labelValue","intlLabel","linkMobile","find","mobileLink","LinkElement","_jsxs","NavButton","target","onClick","aria-label","Icon","label","width","height","textColor","paddingLeft","paddingRight","backgroundColor","color","Flex","tag","Tooltip","position","IconContainer","Box","MainNavBurgerMenuLinks","navigationTarget","navigationLink","alignItems","Link","gap","Typography"],"mappings":"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"}

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

@@ -6,9 +6,10 @@ var designSystem = require('@strapi/design-system');
 var reactRouterDom = require('react-router-dom');
 var styled = require('styled-components');
 
+const isExternalLink = (to)=>typeof to === 'string' && (to.startsWith('http://') || to.startsWith('https://'));
 /* -------------------------------------------------------------------------------------------------
  * Link
- * -----------------------------------------------------------------------------------------------*/ const MainNavLinkWrapper = styled.styled(reactRouterDom.NavLink)`
+ * -----------------------------------------------------------------------------------------------*/ const MainNavLinkStyles = styled.css`
   text-decoration: none;
   display: flex;
   align-items: center;
@@ -39,20 +40,50 @@ var styled = require('styled-components');
     background: ${({ theme })=>theme.colors.primary100};
   }
 `;
-/**
- * Padding is tuned to visually match a LinkButton size L.
- */ const MainNavButtonWrapper = styled.styled(MainNavLinkWrapper)`
+const MainNavLinkWrapper = styled.styled(reactRouterDom.NavLink)`
+  ${MainNavLinkStyles}
+`;
+const MainNavLinkAnchor = styled.styled.a`
+  ${MainNavLinkStyles}
+`;
+const MainNavButtonStyles = styled.css`
   padding-block: 1rem;
   padding-inline: 1rem;
 `;
-const LinkImpl = ({ children, ...props })=>/*#__PURE__*/ jsxRuntime.jsx(MainNavLinkWrapper, {
+const MainNavButtonWrapper = styled.styled(MainNavLinkWrapper)`
+  ${MainNavButtonStyles}
+`;
+const MainNavButtonAnchor = styled.styled(MainNavLinkAnchor)`
+  ${MainNavButtonStyles}
+`;
+const LinkImpl = ({ children, to, ...props })=>{
+    if (isExternalLink(to)) {
+        return /*#__PURE__*/ jsxRuntime.jsx(MainNavLinkAnchor, {
+            href: to,
+            ...props,
+            children: children
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(MainNavLinkWrapper, {
+        to: to,
         ...props,
         children: children
     });
-const NavButtonImpl = ({ children, ...props })=>/*#__PURE__*/ jsxRuntime.jsx(MainNavButtonWrapper, {
+};
+const NavButtonImpl = ({ children, to, ...props })=>{
+    if (isExternalLink(to)) {
+        return /*#__PURE__*/ jsxRuntime.jsx(MainNavButtonAnchor, {
+            href: to,
+            ...props,
+            children: children
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(MainNavButtonWrapper, {
+        to: to,
         ...props,
         children: children
     });
+};
 /* -------------------------------------------------------------------------------------------------
  * Tooltip
  * -----------------------------------------------------------------------------------------------*/ const TooltipImpl = ({ children, label, position = 'right' })=>{

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  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.4rem;\n  padding-inline: 1.2rem;\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    padding-block: 0.6rem;\n    padding-inline: 0.6rem;\n  }\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\n/**\n * Padding is tuned to visually match a LinkButton size L.\n */\nconst MainNavButtonWrapper = styled(MainNavLinkWrapper)`\n  padding-block: 1rem;\n  padding-inline: 1rem;\n`;\n\nconst LinkImpl = ({ children, ...props }: LinkProps) => (\n  <MainNavLinkWrapper {...props}>{children}</MainNavLinkWrapper>\n);\n\nconst NavButtonImpl = ({ children, ...props }: LinkProps) => (\n  <MainNavButtonWrapper {...props}>{children}</MainNavButtonWrapper>\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  NavButton: NavButtonImpl,\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","breakpoints","medium","neutral600","neutral100","primary600","primary100","MainNavButtonWrapper","LinkImpl","children","props","_jsx","NavButtonImpl","TooltipImpl","label","position","Tooltip","side","delayDuration","span","IconImpl","AccessibleIcon","CustomBadge","Badge","spaces","BadgeImpl","top","left","aria-label","active","NavLink","Link","NavButton","Icon"],"mappings":"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"}
+{"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, css } from 'styled-components';\n\nconst isExternalLink = (to: LinkProps['to']) =>\n  typeof to === 'string' && (to.startsWith('http://') || to.startsWith('https://'));\n\n/* -------------------------------------------------------------------------------------------------\n * Link\n * -----------------------------------------------------------------------------------------------*/\nconst MainNavLinkStyles = css`\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.4rem;\n  padding-inline: 1.2rem;\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    padding-block: 0.6rem;\n    padding-inline: 0.6rem;\n  }\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 MainNavLinkWrapper = styled(RouterLink)`\n  ${MainNavLinkStyles}\n`;\n\nconst MainNavLinkAnchor = styled.a`\n  ${MainNavLinkStyles}\n`;\n\nconst MainNavButtonStyles = css`\n  padding-block: 1rem;\n  padding-inline: 1rem;\n`;\n\nconst MainNavButtonWrapper = styled(MainNavLinkWrapper)`\n  ${MainNavButtonStyles}\n`;\n\nconst MainNavButtonAnchor = styled(MainNavLinkAnchor)`\n  ${MainNavButtonStyles}\n`;\n\nconst LinkImpl = ({ children, to, ...props }: LinkProps) => {\n  if (isExternalLink(to)) {\n    return (\n      <MainNavLinkAnchor href={to as string} {...props}>\n        {children}\n      </MainNavLinkAnchor>\n    );\n  }\n  return (\n    <MainNavLinkWrapper to={to} {...props}>\n      {children}\n    </MainNavLinkWrapper>\n  );\n};\n\nconst NavButtonImpl = ({ children, to, ...props }: LinkProps) => {\n  if (isExternalLink(to)) {\n    return (\n      <MainNavButtonAnchor href={to as string} {...props}>\n        {children}\n      </MainNavButtonAnchor>\n    );\n  }\n\n  return (\n    <MainNavButtonWrapper to={to} {...props}>\n      {children}\n    </MainNavButtonWrapper>\n  );\n};\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  NavButton: NavButtonImpl,\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":["isExternalLink","to","startsWith","MainNavLinkStyles","css","theme","borderRadius","colors","neutral0","neutral500","breakpoints","medium","neutral600","neutral100","primary600","primary100","MainNavLinkWrapper","styled","RouterLink","MainNavLinkAnchor","a","MainNavButtonStyles","MainNavButtonWrapper","MainNavButtonAnchor","LinkImpl","children","props","_jsx","href","NavButtonImpl","TooltipImpl","label","position","Tooltip","side","delayDuration","span","IconImpl","AccessibleIcon","CustomBadge","Badge","spaces","BadgeImpl","top","left","aria-label","active","NavLink","Link","NavButton","Icon"],"mappings":"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"}

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

@@ -2,11 +2,12 @@ import { jsx } from 'react/jsx-runtime';
 import 'react';
 import { Badge, Tooltip, AccessibleIcon } from '@strapi/design-system';
 import { NavLink as NavLink$1 } from 'react-router-dom';
-import { styled } from 'styled-components';
+import { css, styled } from 'styled-components';
 
+const isExternalLink = (to)=>typeof to === 'string' && (to.startsWith('http://') || to.startsWith('https://'));
 /* -------------------------------------------------------------------------------------------------
  * Link
- * -----------------------------------------------------------------------------------------------*/ const MainNavLinkWrapper = styled(NavLink$1)`
+ * -----------------------------------------------------------------------------------------------*/ const MainNavLinkStyles = css`
   text-decoration: none;
   display: flex;
   align-items: center;
@@ -37,20 +38,50 @@ import { styled } from 'styled-components';
     background: ${({ theme })=>theme.colors.primary100};
   }
 `;
-/**
- * Padding is tuned to visually match a LinkButton size L.
- */ const MainNavButtonWrapper = styled(MainNavLinkWrapper)`
+const MainNavLinkWrapper = styled(NavLink$1)`
+  ${MainNavLinkStyles}
+`;
+const MainNavLinkAnchor = styled.a`
+  ${MainNavLinkStyles}
+`;
+const MainNavButtonStyles = css`
   padding-block: 1rem;
   padding-inline: 1rem;
 `;
-const LinkImpl = ({ children, ...props })=>/*#__PURE__*/ jsx(MainNavLinkWrapper, {
+const MainNavButtonWrapper = styled(MainNavLinkWrapper)`
+  ${MainNavButtonStyles}
+`;
+const MainNavButtonAnchor = styled(MainNavLinkAnchor)`
+  ${MainNavButtonStyles}
+`;
+const LinkImpl = ({ children, to, ...props })=>{
+    if (isExternalLink(to)) {
+        return /*#__PURE__*/ jsx(MainNavLinkAnchor, {
+            href: to,
+            ...props,
+            children: children
+        });
+    }
+    return /*#__PURE__*/ jsx(MainNavLinkWrapper, {
+        to: to,
         ...props,
         children: children
     });
-const NavButtonImpl = ({ children, ...props })=>/*#__PURE__*/ jsx(MainNavButtonWrapper, {
+};
+const NavButtonImpl = ({ children, to, ...props })=>{
+    if (isExternalLink(to)) {
+        return /*#__PURE__*/ jsx(MainNavButtonAnchor, {
+            href: to,
+            ...props,
+            children: children
+        });
+    }
+    return /*#__PURE__*/ jsx(MainNavButtonWrapper, {
+        to: to,
         ...props,
         children: children
     });
+};
 /* -------------------------------------------------------------------------------------------------
  * Tooltip
  * -----------------------------------------------------------------------------------------------*/ const TooltipImpl = ({ children, label, position = 'right' })=>{

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  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.4rem;\n  padding-inline: 1.2rem;\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    padding-block: 0.6rem;\n    padding-inline: 0.6rem;\n  }\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\n/**\n * Padding is tuned to visually match a LinkButton size L.\n */\nconst MainNavButtonWrapper = styled(MainNavLinkWrapper)`\n  padding-block: 1rem;\n  padding-inline: 1rem;\n`;\n\nconst LinkImpl = ({ children, ...props }: LinkProps) => (\n  <MainNavLinkWrapper {...props}>{children}</MainNavLinkWrapper>\n);\n\nconst NavButtonImpl = ({ children, ...props }: LinkProps) => (\n  <MainNavButtonWrapper {...props}>{children}</MainNavButtonWrapper>\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  NavButton: NavButtonImpl,\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","breakpoints","medium","neutral600","neutral100","primary600","primary100","MainNavButtonWrapper","LinkImpl","children","props","_jsx","NavButtonImpl","TooltipImpl","label","position","Tooltip","side","delayDuration","span","IconImpl","AccessibleIcon","CustomBadge","Badge","spaces","BadgeImpl","top","left","aria-label","active","NavLink","Link","NavButton","Icon"],"mappings":"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"}
+{"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, css } from 'styled-components';\n\nconst isExternalLink = (to: LinkProps['to']) =>\n  typeof to === 'string' && (to.startsWith('http://') || to.startsWith('https://'));\n\n/* -------------------------------------------------------------------------------------------------\n * Link\n * -----------------------------------------------------------------------------------------------*/\nconst MainNavLinkStyles = css`\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.4rem;\n  padding-inline: 1.2rem;\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    padding-block: 0.6rem;\n    padding-inline: 0.6rem;\n  }\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 MainNavLinkWrapper = styled(RouterLink)`\n  ${MainNavLinkStyles}\n`;\n\nconst MainNavLinkAnchor = styled.a`\n  ${MainNavLinkStyles}\n`;\n\nconst MainNavButtonStyles = css`\n  padding-block: 1rem;\n  padding-inline: 1rem;\n`;\n\nconst MainNavButtonWrapper = styled(MainNavLinkWrapper)`\n  ${MainNavButtonStyles}\n`;\n\nconst MainNavButtonAnchor = styled(MainNavLinkAnchor)`\n  ${MainNavButtonStyles}\n`;\n\nconst LinkImpl = ({ children, to, ...props }: LinkProps) => {\n  if (isExternalLink(to)) {\n    return (\n      <MainNavLinkAnchor href={to as string} {...props}>\n        {children}\n      </MainNavLinkAnchor>\n    );\n  }\n  return (\n    <MainNavLinkWrapper to={to} {...props}>\n      {children}\n    </MainNavLinkWrapper>\n  );\n};\n\nconst NavButtonImpl = ({ children, to, ...props }: LinkProps) => {\n  if (isExternalLink(to)) {\n    return (\n      <MainNavButtonAnchor href={to as string} {...props}>\n        {children}\n      </MainNavButtonAnchor>\n    );\n  }\n\n  return (\n    <MainNavButtonWrapper to={to} {...props}>\n      {children}\n    </MainNavButtonWrapper>\n  );\n};\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  NavButton: NavButtonImpl,\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":["isExternalLink","to","startsWith","MainNavLinkStyles","css","theme","borderRadius","colors","neutral0","neutral500","breakpoints","medium","neutral600","neutral100","primary600","primary100","MainNavLinkWrapper","styled","RouterLink","MainNavLinkAnchor","a","MainNavButtonStyles","MainNavButtonWrapper","MainNavButtonAnchor","LinkImpl","children","props","_jsx","href","NavButtonImpl","TooltipImpl","label","position","Tooltip","side","delayDuration","span","IconImpl","AccessibleIcon","CustomBadge","Badge","spaces","BadgeImpl","top","left","aria-label","active","NavLink","Link","NavButton","Icon"],"mappings":"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"}

package/dist/admin/admin/src/components/SubNav.js

@@ -85,11 +85,22 @@ const Link = (props)=>{
             width: '100%',
             paddingLeft: 3,
             paddingRight: 3,
+            paddingTop: {
+                initial: 1,
+                large: 0
+            },
+            paddingBottom: {
+                initial: 1,
+                large: 0
+            },
             borderRadius: 1,
             children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
                 justifyContent: "space-between",
                 width: "100%",
-                gap: 1,
+                gap: {
+                    initial: 2,
+                    large: 1
+                },
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
                         tag: "div",
@@ -126,14 +137,8 @@ const StyledHeader = styled.styled(designSystem.Flex)`
 const Header = ({ label })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(StyledHeader, {
         justifyContent: "space-between",
-        paddingLeft: {
-            initial: 4,
-            large: 5
-        },
-        paddingRight: {
-            initial: 4,
-            large: 5
-        },
+        paddingLeft: 5,
+        paddingRight: 5,
         children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
             variant: "beta",
             tag: "h2",
@@ -143,15 +148,29 @@ const Header = ({ label })=>{
 };
 const Sections = ({ children, ...props })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-        paddingTop: 4,
-        paddingBottom: 4,
+        paddingTop: {
+            initial: 5,
+            large: 4
+        },
+        paddingBottom: {
+            initial: 5,
+            large: 4
+        },
+        paddingLeft: {
+            initial: 3,
+            large: 0
+        },
+        paddingRight: {
+            initial: 3,
+            large: 0
+        },
         maxWidth: {
             initial: '100%',
             medium: '23.2rem'
         },
         children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
             tag: "ul",
-            gap: "5",
+            gap: 6,
             direction: "column",
             alignItems: "stretch",
             ...props,
@@ -196,11 +215,11 @@ const Section = ({ label, children, link, sectionId, badgeLabel })=>{
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
                 paddingLeft: {
-                    initial: 4,
+                    initial: 3,
                     large: 5
                 },
                 paddingRight: {
-                    initial: 4,
+                    initial: 3,
                     large: 5
                 },
                 children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
@@ -210,7 +229,6 @@ const Section = ({ label, children, link, sectionId, badgeLabel })=>{
                     children: [
                         /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                             children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                                paddingRight: 1,
                                 children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
                                     variant: "sigma",
                                     textColor: "neutral600",
@@ -246,14 +264,17 @@ const Section = ({ label, children, link, sectionId, badgeLabel })=>{
                 tag: "ol",
                 id: listId,
                 direction: "column",
-                gap: "2px",
+                gap: {
+                    initial: 2,
+                    large: '2px'
+                },
                 alignItems: 'stretch',
                 marginLeft: {
-                    initial: 1,
+                    initial: 0,
                     large: 2
                 },
                 marginRight: {
-                    initial: 1,
+                    initial: 0,
                     large: 2
                 },
                 children: children.map((child, index)=>{