@strapi/admin 5.13.1 → 5.15.0

package/dist/admin/admin/src/pages/Home/components/FreeTrialWelcomeModal.mjs

@@ -0,0 +1,126 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Modal, Button, Box, Flex, Typography } from '@strapi/design-system';
+import { Cross } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+import { useLicenseLimits } from '../../../../../ee/admin/src/hooks/useLicenseLimits.mjs';
+import img from '../../../assets/images/free-trial.png.mjs';
+import { usePersistentState } from '../../../hooks/usePersistentState.mjs';
+
+const StyledModalContent = styled(Modal.Content)`
+  max-width: 51.6rem;
+`;
+const StyledModalBody = styled(Modal.Body)`
+  padding: 0;
+  position: relative;
+
+  > div {
+    padding: 0;
+  }
+`;
+const StyledButton = styled(Button)`
+  border: 0;
+  border-radius: 50%;
+
+  > span {
+    line-height: 0;
+  }
+`;
+const FreeTrialWelcomeModal = ()=>{
+    const { formatMessage } = useIntl();
+    const [open, setOpen] = useState(true);
+    const [previouslyOpen, setPreviouslyOpen] = usePersistentState('STRAPI_FREE_TRIAL_WELCOME_MODAL', false);
+    const { license } = useLicenseLimits();
+    const handleClose = ()=>{
+        setPreviouslyOpen(true);
+        setOpen(false);
+    };
+    const handleOnOpenChange = (isOpen)=>{
+        if (!isOpen) {
+            setPreviouslyOpen(true);
+        }
+        setOpen(isOpen);
+    };
+    if (previouslyOpen || !license?.isTrial) {
+        return null;
+    }
+    return /*#__PURE__*/ jsx(Modal.Root, {
+        open: open,
+        onOpenChange: handleOnOpenChange,
+        children: /*#__PURE__*/ jsx(StyledModalContent, {
+            "aria-labelledby": "title",
+            children: /*#__PURE__*/ jsxs(StyledModalBody, {
+                children: [
+                    /*#__PURE__*/ jsx(Box, {
+                        position: "absolute",
+                        top: 0,
+                        right: 0,
+                        padding: 2,
+                        children: /*#__PURE__*/ jsx(StyledButton, {
+                            "aria-label": formatMessage({
+                                id: 'app.utils.close-label',
+                                defaultMessage: 'Close'
+                            }),
+                            variant: "tertiary",
+                            width: "2.4rem",
+                            height: "2.4rem",
+                            onClick: handleClose,
+                            children: /*#__PURE__*/ jsx(Cross, {})
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("img", {
+                        src: img,
+                        alt: "free-trial",
+                        width: "100%",
+                        height: "100%"
+                    }),
+                    /*#__PURE__*/ jsxs(Flex, {
+                        direction: "column",
+                        alignItems: "start",
+                        justifyContent: "stretch",
+                        padding: 8,
+                        gap: 4,
+                        children: [
+                            /*#__PURE__*/ jsx(Typography, {
+                                variant: "alpha",
+                                fontWeight: "bold",
+                                fontSize: 4,
+                                id: "title",
+                                children: formatMessage({
+                                    id: 'app.components.FreeTrialWelcomeModal.title',
+                                    defaultMessage: "We're glad to have you on board"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Typography, {
+                                children: formatMessage({
+                                    id: 'app.components.FreeTrialWelcomeModal.description1',
+                                    defaultMessage: 'For the next 30 days, you will have full access to advanced features like Content History, Releases and Single Sign-On (SSO) – everything you need to explore the power of Strapi CMS.'
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Typography, {
+                                children: formatMessage({
+                                    id: 'app.components.FreeTrialWelcomeModal.description2',
+                                    defaultMessage: 'Use this time to build, customize, and test your content workflows with complete flexibility!'
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Box, {
+                                marginTop: 4,
+                                children: /*#__PURE__*/ jsx(Button, {
+                                    onClick: handleClose,
+                                    children: formatMessage({
+                                        id: 'app.components.FreeTrialWelcomeModal.button',
+                                        defaultMessage: 'Start exploring'
+                                    })
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+    });
+};
+
+export { FreeTrialWelcomeModal };
+//# sourceMappingURL=FreeTrialWelcomeModal.mjs.map

package/dist/admin/admin/src/pages/Home/components/FreeTrialWelcomeModal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FreeTrialWelcomeModal.mjs","sources":["../../../../../../../admin/src/pages/Home/components/FreeTrialWelcomeModal.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { Box, Button, Flex, Modal, Typography } from '@strapi/design-system';\nimport { Cross } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport styled from 'styled-components';\n\nimport { useLicenseLimits } from '../../../../../ee/admin/src/hooks/useLicenseLimits';\nimport lightIllustration from '../../../assets/images/free-trial.png';\nimport { usePersistentState } from '../../../hooks/usePersistentState';\n\nconst StyledModalContent = styled(Modal.Content)`\n  max-width: 51.6rem;\n`;\n\nconst StyledModalBody = styled(Modal.Body)`\n  padding: 0;\n  position: relative;\n\n  > div {\n    padding: 0;\n  }\n`;\n\nconst StyledButton = styled(Button)`\n  border: 0;\n  border-radius: 50%;\n\n  > span {\n    line-height: 0;\n  }\n`;\n\nexport const FreeTrialWelcomeModal = () => {\n  const { formatMessage } = useIntl();\n  const [open, setOpen] = useState(true);\n  const [previouslyOpen, setPreviouslyOpen] = usePersistentState(\n    'STRAPI_FREE_TRIAL_WELCOME_MODAL',\n    false\n  );\n  const { license } = useLicenseLimits();\n\n  const handleClose = () => {\n    setPreviouslyOpen(true);\n    setOpen(false);\n  };\n\n  const handleOnOpenChange = (isOpen: boolean) => {\n    if (!isOpen) {\n      setPreviouslyOpen(true);\n    }\n\n    setOpen(isOpen);\n  };\n\n  if (previouslyOpen || !license?.isTrial) {\n    return null;\n  }\n\n  return (\n    <Modal.Root open={open} onOpenChange={handleOnOpenChange}>\n      <StyledModalContent aria-labelledby=\"title\">\n        <StyledModalBody>\n          <Box position=\"absolute\" top={0} right={0} padding={2}>\n            <StyledButton\n              aria-label={formatMessage({\n                id: 'app.utils.close-label',\n                defaultMessage: 'Close',\n              })}\n              variant=\"tertiary\"\n              width=\"2.4rem\"\n              height=\"2.4rem\"\n              onClick={handleClose}\n            >\n              <Cross />\n            </StyledButton>\n          </Box>\n          <img src={lightIllustration} alt=\"free-trial\" width=\"100%\" height=\"100%\" />\n          <Flex direction=\"column\" alignItems=\"start\" justifyContent=\"stretch\" padding={8} gap={4}>\n            <Typography variant=\"alpha\" fontWeight=\"bold\" fontSize={4} id=\"title\">\n              {formatMessage({\n                id: 'app.components.FreeTrialWelcomeModal.title',\n                defaultMessage: \"We're glad to have you on board\",\n              })}\n            </Typography>\n            <Typography>\n              {formatMessage({\n                id: 'app.components.FreeTrialWelcomeModal.description1',\n                defaultMessage:\n                  'For the next 30 days, you will have full access to advanced features like Content History, Releases and Single Sign-On (SSO) – everything you need to explore the power of Strapi CMS.',\n              })}\n            </Typography>\n            <Typography>\n              {formatMessage({\n                id: 'app.components.FreeTrialWelcomeModal.description2',\n                defaultMessage:\n                  'Use this time to build, customize, and test your content workflows with complete flexibility!',\n              })}\n            </Typography>\n            <Box marginTop={4}>\n              <Button onClick={handleClose}>\n                {formatMessage({\n                  id: 'app.components.FreeTrialWelcomeModal.button',\n                  defaultMessage: 'Start exploring',\n                })}\n              </Button>\n            </Box>\n          </Flex>\n        </StyledModalBody>\n      </StyledModalContent>\n    </Modal.Root>\n  );\n};\n"],"names":["StyledModalContent","styled","Modal","Content","StyledModalBody","Body","StyledButton","Button","FreeTrialWelcomeModal","formatMessage","useIntl","open","setOpen","useState","previouslyOpen","setPreviouslyOpen","usePersistentState","license","useLicenseLimits","handleClose","handleOnOpenChange","isOpen","isTrial","_jsx","Root","onOpenChange","aria-labelledby","_jsxs","Box","position","top","right","padding","aria-label","id","defaultMessage","variant","width","height","onClick","Cross","img","src","lightIllustration","alt","Flex","direction","alignItems","justifyContent","gap","Typography","fontWeight","fontSize","marginTop"],"mappings":"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"}

package/dist/admin/admin/src/pages/Marketplace/components/NpmPackageCard.js

@@ -7,7 +7,7 @@ var symbols = require('@strapi/icons/symbols');
 var pluralize = require('pluralize');
 var reactIntl = require('react-intl');
 var semver = require('semver');
-var styledComponents = require('styled-components');
+var styled = require('styled-components');
 var logoStrapi2022 = require('../../../assets/images/logo-strapi-2022.svg.js');
 var Notifications = require('../../../features/Notifications.js');
 var Tracking = require('../../../features/Tracking.js');
@@ -33,7 +33,7 @@ function _interopNamespaceDefault(e) {
 var semver__namespace = /*#__PURE__*/_interopNamespaceDefault(semver);
 
 // Custom component to have an ellipsis after the 2nd line
-const EllipsisText = styledComponents.styled(designSystem.Typography)`
+const EllipsisText = styled.styled(designSystem.Typography)`
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
@@ -320,7 +320,7 @@ const PackageStats = ({ githubStars = 0, npmDownloads = 0, npmPackageType })=>{
         ]
     });
 };
-const VerticalDivider = styledComponents.styled(designSystem.Divider)`
+const VerticalDivider = styled.styled(designSystem.Divider)`
   width: 1.2rem;
   transform: rotate(90deg);
 `;

package/dist/admin/admin/src/pages/Marketplace/components/NpmPackageCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"NpmPackageCard.js","sources":["../../../../../../../admin/src/pages/Marketplace/components/NpmPackageCard.tsx"],"sourcesContent":["import {\n  Box,\n  Flex,\n  Tooltip,\n  Typography,\n  Divider,\n  Button,\n  LinkButton,\n  TypographyComponent,\n} from '@strapi/design-system';\nimport { CheckCircle, ExternalLink, Download, Star, Check, Duplicate } from '@strapi/icons';\nimport { GitHub } from '@strapi/icons/symbols';\nimport pluralize from 'pluralize';\nimport { useIntl } from 'react-intl';\nimport * as semver from 'semver';\nimport { styled } from 'styled-components';\n\nimport StrapiLogo from '../../../assets/images/logo-strapi-2022.svg';\nimport { AppInfoContextValue } from '../../../features/AppInfo';\nimport { useNotification } from '../../../features/Notifications';\nimport { useTracking } from '../../../features/Tracking';\nimport { useClipboard } from '../../../hooks/useClipboard';\n\nimport type { Plugin, Provider } from '../hooks/useMarketplaceData';\nimport type { NpmPackageType } from '../MarketplacePage';\n\n// Custom component to have an ellipsis after the 2nd line\nconst EllipsisText = styled<TypographyComponent<'p'>>(Typography)`\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n`;\n\ninterface NpmPackageCardProps extends Pick<AppInfoContextValue, 'useYarn'> {\n  npmPackage: Plugin | Provider;\n  isInstalled: boolean;\n  isInDevelopmentMode: AppInfoContextValue['autoReload'];\n  npmPackageType: NpmPackageType;\n  strapiAppVersion: AppInfoContextValue['strapiVersion'];\n}\n\nconst NpmPackageCard = ({\n  npmPackage,\n  isInstalled,\n  useYarn,\n  isInDevelopmentMode,\n  npmPackageType,\n  strapiAppVersion,\n}: NpmPackageCardProps) => {\n  const { attributes } = npmPackage;\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n\n  const commandToCopy = useYarn\n    ? `yarn add ${attributes.npmPackageName}`\n    : `npm install ${attributes.npmPackageName}`;\n\n  const madeByStrapiMessage = formatMessage({\n    id: 'admin.pages.MarketPlacePage.plugin.tooltip.madeByStrapi',\n    defaultMessage: 'Made by Strapi',\n  });\n\n  const npmPackageHref = `https://market.strapi.io/${pluralize.plural(npmPackageType)}/${\n    attributes.slug\n  }`;\n\n  const versionRange = semver.validRange(attributes.strapiVersion);\n\n  const isCompatible = versionRange\n    ? semver.satisfies(strapiAppVersion ?? '', versionRange)\n    : false;\n\n  return (\n    <Flex\n      direction=\"column\"\n      justifyContent=\"space-between\"\n      paddingTop={4}\n      paddingRight={4}\n      paddingBottom={4}\n      paddingLeft={4}\n      hasRadius\n      background=\"neutral0\"\n      shadow=\"tableShadow\"\n      height=\"100%\"\n      alignItems=\"normal\"\n      data-testid=\"npm-package-card\"\n    >\n      <Box>\n        <Flex direction=\"row\" justifyContent=\"space-between\" alignItems=\"flex-start\">\n          <Box\n            tag=\"img\"\n            src={attributes.logo.url}\n            alt={`${attributes.name} logo`}\n            hasRadius\n            width={11}\n            height={11}\n          />\n          <PackageStats\n            githubStars={attributes.githubStars}\n            npmDownloads={attributes.npmDownloads}\n            npmPackageType={npmPackageType}\n          />\n        </Flex>\n        <Box paddingTop={4}>\n          <Typography tag=\"h3\" variant=\"delta\">\n            <Flex\n              alignItems=\"center\"\n              gap={attributes.validated && !attributes.madeByStrapi ? 2 : 1}\n            >\n              {attributes.name}\n              {attributes.validated && !attributes.madeByStrapi && (\n                <Tooltip\n                  description={formatMessage({\n                    id: 'admin.pages.MarketPlacePage.plugin.tooltip.verified',\n                    defaultMessage: 'Plugin verified by Strapi',\n                  })}\n                >\n                  <CheckCircle fill=\"success600\" />\n                </Tooltip>\n              )}\n              {attributes.madeByStrapi && (\n                <Tooltip description={madeByStrapiMessage}>\n                  <Box\n                    tag=\"img\"\n                    src={StrapiLogo}\n                    alt={madeByStrapiMessage}\n                    width={6}\n                    height=\"auto\"\n                  />\n                </Tooltip>\n              )}\n            </Flex>\n          </Typography>\n        </Box>\n        <Box paddingTop={2}>\n          <EllipsisText tag=\"p\" variant=\"omega\" textColor=\"neutral600\">\n            {attributes.description}\n          </EllipsisText>\n        </Box>\n      </Box>\n\n      <Flex gap={2} style={{ alignSelf: 'flex-end' }} paddingTop={6}>\n        <LinkButton\n          size=\"S\"\n          href={npmPackageHref}\n          isExternal\n          endIcon={<ExternalLink />}\n          aria-label={formatMessage(\n            {\n              id: 'admin.pages.MarketPlacePage.plugin.info.label',\n              defaultMessage: 'Learn more about {pluginName}',\n            },\n            { pluginName: attributes.name }\n          )}\n          variant=\"tertiary\"\n          onClick={() => trackUsage('didPluginLearnMore')}\n        >\n          {formatMessage({\n            id: 'admin.pages.MarketPlacePage.plugin.info.text',\n            defaultMessage: 'More',\n          })}\n        </LinkButton>\n        <InstallPluginButton\n          isInstalled={isInstalled}\n          isInDevelopmentMode={isInDevelopmentMode}\n          isCompatible={isCompatible}\n          commandToCopy={commandToCopy}\n          strapiAppVersion={strapiAppVersion}\n          strapiPeerDepVersion={attributes.strapiVersion}\n          pluginName={attributes.name}\n        />\n      </Flex>\n    </Flex>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * InstallPluginButton\n * -----------------------------------------------------------------------------------------------*/\n\ninterface InstallPluginButtonProps\n  extends Pick<NpmPackageCardProps, 'isInstalled' | 'isInDevelopmentMode' | 'strapiAppVersion'> {\n  commandToCopy: string;\n  pluginName: string;\n  strapiPeerDepVersion?: string;\n  isCompatible?: boolean;\n}\n\nconst InstallPluginButton = ({\n  isInstalled,\n  isInDevelopmentMode,\n  isCompatible,\n  commandToCopy,\n  strapiAppVersion,\n  strapiPeerDepVersion,\n  pluginName,\n}: InstallPluginButtonProps) => {\n  const { toggleNotification } = useNotification();\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n  const { copy } = useClipboard();\n\n  const handleCopy = async () => {\n    const didCopy = await copy(commandToCopy);\n\n    if (didCopy) {\n      trackUsage('willInstallPlugin');\n      toggleNotification({\n        type: 'success',\n        message: formatMessage({ id: 'admin.pages.MarketPlacePage.plugin.copy.success' }),\n      });\n    }\n  };\n\n  // Already installed\n  if (isInstalled) {\n    return (\n      <Flex gap={2} paddingLeft={4}>\n        <Check width=\"1.2rem\" height=\"1.2rem\" color=\"success600\" />\n        <Typography variant=\"omega\" textColor=\"success600\" fontWeight=\"bold\">\n          {formatMessage({\n            id: 'admin.pages.MarketPlacePage.plugin.installed',\n            defaultMessage: 'Installed',\n          })}\n        </Typography>\n      </Flex>\n    );\n  }\n\n  // In development, show install button\n  if (isInDevelopmentMode && isCompatible !== false) {\n    return (\n      <CardButton\n        strapiAppVersion={strapiAppVersion}\n        strapiPeerDepVersion={strapiPeerDepVersion}\n        handleCopy={handleCopy}\n        pluginName={pluginName}\n      />\n    );\n  }\n\n  // Not in development and plugin not installed already. Show nothing\n  return null;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * CardButton\n * -----------------------------------------------------------------------------------------------*/\n\ninterface CardButtonProps\n  extends Pick<NpmPackageCardProps, 'strapiAppVersion'>,\n    Pick<InstallPluginButtonProps, 'strapiPeerDepVersion' | 'pluginName'> {\n  handleCopy: () => void;\n}\n\nconst CardButton = ({\n  strapiPeerDepVersion,\n  strapiAppVersion,\n  handleCopy,\n  pluginName,\n}: CardButtonProps) => {\n  const { formatMessage } = useIntl();\n  const versionRange = semver.validRange(strapiPeerDepVersion);\n  const isCompatible = semver.satisfies(strapiAppVersion ?? '', versionRange ?? '');\n\n  const installMessage = formatMessage({\n    id: 'admin.pages.MarketPlacePage.plugin.copy',\n    defaultMessage: 'Copy install command',\n  });\n\n  // Only plugins receive a strapiAppVersion\n  if (strapiAppVersion) {\n    if (!versionRange || !isCompatible) {\n      return (\n        <Tooltip\n          data-testid={`tooltip-${pluginName}`}\n          label={formatMessage(\n            {\n              id: 'admin.pages.MarketPlacePage.plugin.version',\n              defaultMessage:\n                'Update your Strapi version: \"{strapiAppVersion}\" to: \"{versionRange}\"',\n            },\n            {\n              strapiAppVersion,\n              versionRange,\n            }\n          )}\n        >\n          <span>\n            <Button\n              size=\"S\"\n              startIcon={<Duplicate />}\n              variant=\"secondary\"\n              onClick={handleCopy}\n              disabled={!isCompatible}\n            >\n              {installMessage}\n            </Button>\n          </span>\n        </Tooltip>\n      );\n    }\n  }\n\n  return (\n    <Button size=\"S\" startIcon={<Duplicate />} variant=\"secondary\" onClick={handleCopy}>\n      {installMessage}\n    </Button>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * PackageStats\n * -----------------------------------------------------------------------------------------------*/\n\ninterface PackageStatsProps {\n  githubStars?: number;\n  npmDownloads?: number;\n  npmPackageType: NpmPackageType;\n}\n\nconst PackageStats = ({ githubStars = 0, npmDownloads = 0, npmPackageType }: PackageStatsProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Flex gap={1}>\n      {!!githubStars && (\n        <>\n          <GitHub height=\"1.2rem\" width=\"1.2rem\" aria-hidden />\n          <Star height=\"1.2rem\" width=\"1.2rem\" fill=\"warning500\" aria-hidden />\n          <p\n            aria-label={formatMessage(\n              {\n                id: `admin.pages.MarketPlacePage.${npmPackageType}.githubStars`,\n                defaultMessage: `This {package} was starred {starsCount} on GitHub`,\n              },\n              {\n                starsCount: githubStars,\n                package: npmPackageType,\n              }\n            )}\n          >\n            <Typography variant=\"pi\" textColor=\"neutral800\">\n              {githubStars}\n            </Typography>\n          </p>\n          <VerticalDivider />\n        </>\n      )}\n      <Download height=\"1.2rem\" width=\"1.2rem\" aria-hidden />\n      <p\n        aria-label={formatMessage(\n          {\n            id: `admin.pages.MarketPlacePage.${npmPackageType}.downloads`,\n            defaultMessage: `This {package} has {downloadsCount} weekly downloads`,\n          },\n          {\n            downloadsCount: npmDownloads,\n            package: npmPackageType,\n          }\n        )}\n      >\n        <Typography variant=\"pi\" textColor=\"neutral800\">\n          {npmDownloads}\n        </Typography>\n      </p>\n    </Flex>\n  );\n};\n\nconst VerticalDivider = styled(Divider)`\n  width: 1.2rem;\n  transform: rotate(90deg);\n`;\n\nexport { NpmPackageCard };\nexport type { NpmPackageCardProps };\n"],"names":["EllipsisText","styled","Typography","NpmPackageCard","npmPackage","isInstalled","useYarn","isInDevelopmentMode","npmPackageType","strapiAppVersion","attributes","formatMessage","useIntl","trackUsage","useTracking","commandToCopy","npmPackageName","madeByStrapiMessage","id","defaultMessage","npmPackageHref","pluralize","plural","slug","versionRange","semver","validRange","strapiVersion","isCompatible","satisfies","_jsxs","Flex","direction","justifyContent","paddingTop","paddingRight","paddingBottom","paddingLeft","hasRadius","background","shadow","height","alignItems","data-testid","Box","_jsx","tag","src","logo","url","alt","name","width","PackageStats","githubStars","npmDownloads","variant","gap","validated","madeByStrapi","Tooltip","description","CheckCircle","fill","StrapiLogo","textColor","style","alignSelf","LinkButton","size","href","isExternal","endIcon","ExternalLink","aria-label","pluginName","onClick","InstallPluginButton","strapiPeerDepVersion","toggleNotification","useNotification","copy","useClipboard","handleCopy","didCopy","type","message","Check","color","fontWeight","CardButton","installMessage","label","span","Button","startIcon","Duplicate","disabled","_Fragment","GitHub","aria-hidden","Star","p","starsCount","package","VerticalDivider","Download","downloadsCount","Divider"],"mappings":"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"}
+{"version":3,"file":"NpmPackageCard.js","sources":["../../../../../../../admin/src/pages/Marketplace/components/NpmPackageCard.tsx"],"sourcesContent":["import {\n  Box,\n  Flex,\n  Tooltip,\n  Typography,\n  Divider,\n  Button,\n  LinkButton,\n  TypographyComponent,\n} from '@strapi/design-system';\nimport { CheckCircle, ExternalLink, Download, Star, Check, Duplicate } from '@strapi/icons';\nimport { GitHub } from '@strapi/icons/symbols';\nimport pluralize from 'pluralize';\nimport { useIntl } from 'react-intl';\nimport * as semver from 'semver';\nimport { styled } from 'styled-components';\n\nimport StrapiLogo from '../../../assets/images/logo-strapi-2022.svg';\nimport { AppInfoContextValue } from '../../../features/AppInfo';\nimport { useNotification } from '../../../features/Notifications';\nimport { useTracking } from '../../../features/Tracking';\nimport { useClipboard } from '../../../hooks/useClipboard';\n\nimport type { Plugin, Provider } from '../hooks/useMarketplaceData';\nimport type { NpmPackageType } from '../MarketplacePage';\n\n// Custom component to have an ellipsis after the 2nd line\nconst EllipsisText = styled<TypographyComponent<'p'>>(Typography)`\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n`;\n\ninterface NpmPackageCardProps extends Pick<AppInfoContextValue, 'useYarn'> {\n  npmPackage: Plugin | Provider;\n  isInstalled: boolean;\n  isInDevelopmentMode: AppInfoContextValue['autoReload'];\n  npmPackageType: NpmPackageType;\n  strapiAppVersion: AppInfoContextValue['strapiVersion'];\n}\n\nconst NpmPackageCard = ({\n  npmPackage,\n  isInstalled,\n  useYarn,\n  isInDevelopmentMode,\n  npmPackageType,\n  strapiAppVersion,\n}: NpmPackageCardProps) => {\n  const { attributes } = npmPackage;\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n\n  const commandToCopy = useYarn\n    ? `yarn add ${attributes.npmPackageName}`\n    : `npm install ${attributes.npmPackageName}`;\n\n  const madeByStrapiMessage = formatMessage({\n    id: 'admin.pages.MarketPlacePage.plugin.tooltip.madeByStrapi',\n    defaultMessage: 'Made by Strapi',\n  });\n\n  const npmPackageHref = `https://market.strapi.io/${pluralize.plural(npmPackageType)}/${\n    attributes.slug\n  }`;\n\n  const versionRange = semver.validRange(attributes.strapiVersion);\n\n  const isCompatible = versionRange\n    ? semver.satisfies(strapiAppVersion ?? '', versionRange)\n    : false;\n\n  return (\n    <Flex\n      direction=\"column\"\n      justifyContent=\"space-between\"\n      paddingTop={4}\n      paddingRight={4}\n      paddingBottom={4}\n      paddingLeft={4}\n      hasRadius\n      background=\"neutral0\"\n      shadow=\"tableShadow\"\n      height=\"100%\"\n      alignItems=\"normal\"\n      data-testid=\"npm-package-card\"\n    >\n      <Box>\n        <Flex direction=\"row\" justifyContent=\"space-between\" alignItems=\"flex-start\">\n          <Box\n            tag=\"img\"\n            src={attributes.logo.url}\n            alt={`${attributes.name} logo`}\n            hasRadius\n            width={11}\n            height={11}\n          />\n          <PackageStats\n            githubStars={attributes.githubStars}\n            npmDownloads={attributes.npmDownloads}\n            npmPackageType={npmPackageType}\n          />\n        </Flex>\n        <Box paddingTop={4}>\n          <Typography tag=\"h3\" variant=\"delta\">\n            <Flex\n              alignItems=\"center\"\n              gap={attributes.validated && !attributes.madeByStrapi ? 2 : 1}\n            >\n              {attributes.name}\n              {attributes.validated && !attributes.madeByStrapi && (\n                <Tooltip\n                  description={formatMessage({\n                    id: 'admin.pages.MarketPlacePage.plugin.tooltip.verified',\n                    defaultMessage: 'Plugin verified by Strapi',\n                  })}\n                >\n                  <CheckCircle fill=\"success600\" />\n                </Tooltip>\n              )}\n              {attributes.madeByStrapi && (\n                <Tooltip description={madeByStrapiMessage}>\n                  <Box\n                    tag=\"img\"\n                    src={StrapiLogo}\n                    alt={madeByStrapiMessage}\n                    width={6}\n                    height=\"auto\"\n                  />\n                </Tooltip>\n              )}\n            </Flex>\n          </Typography>\n        </Box>\n        <Box paddingTop={2}>\n          <EllipsisText tag=\"p\" variant=\"omega\" textColor=\"neutral600\">\n            {attributes.description}\n          </EllipsisText>\n        </Box>\n      </Box>\n\n      <Flex gap={2} style={{ alignSelf: 'flex-end' }} paddingTop={6}>\n        <LinkButton\n          size=\"S\"\n          href={npmPackageHref}\n          isExternal\n          endIcon={<ExternalLink />}\n          aria-label={formatMessage(\n            {\n              id: 'admin.pages.MarketPlacePage.plugin.info.label',\n              defaultMessage: 'Learn more about {pluginName}',\n            },\n            { pluginName: attributes.name }\n          )}\n          variant=\"tertiary\"\n          onClick={() => trackUsage('didPluginLearnMore')}\n        >\n          {formatMessage({\n            id: 'admin.pages.MarketPlacePage.plugin.info.text',\n            defaultMessage: 'More',\n          })}\n        </LinkButton>\n        <InstallPluginButton\n          isInstalled={isInstalled}\n          isInDevelopmentMode={isInDevelopmentMode}\n          isCompatible={isCompatible}\n          commandToCopy={commandToCopy}\n          strapiAppVersion={strapiAppVersion}\n          strapiPeerDepVersion={attributes.strapiVersion}\n          pluginName={attributes.name}\n        />\n      </Flex>\n    </Flex>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * InstallPluginButton\n * -----------------------------------------------------------------------------------------------*/\n\ninterface InstallPluginButtonProps\n  extends Pick<NpmPackageCardProps, 'isInstalled' | 'isInDevelopmentMode' | 'strapiAppVersion'> {\n  commandToCopy: string;\n  pluginName: string;\n  strapiPeerDepVersion?: string;\n  isCompatible?: boolean;\n}\n\nconst InstallPluginButton = ({\n  isInstalled,\n  isInDevelopmentMode,\n  isCompatible,\n  commandToCopy,\n  strapiAppVersion,\n  strapiPeerDepVersion,\n  pluginName,\n}: InstallPluginButtonProps) => {\n  const { toggleNotification } = useNotification();\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n  const { copy } = useClipboard();\n\n  const handleCopy = async () => {\n    const didCopy = await copy(commandToCopy);\n\n    if (didCopy) {\n      trackUsage('willInstallPlugin');\n      toggleNotification({\n        type: 'success',\n        message: formatMessage({ id: 'admin.pages.MarketPlacePage.plugin.copy.success' }),\n      });\n    }\n  };\n\n  // Already installed\n  if (isInstalled) {\n    return (\n      <Flex gap={2} paddingLeft={4}>\n        <Check width=\"1.2rem\" height=\"1.2rem\" color=\"success600\" />\n        <Typography variant=\"omega\" textColor=\"success600\" fontWeight=\"bold\">\n          {formatMessage({\n            id: 'admin.pages.MarketPlacePage.plugin.installed',\n            defaultMessage: 'Installed',\n          })}\n        </Typography>\n      </Flex>\n    );\n  }\n\n  // In development, show install button\n  if (isInDevelopmentMode && isCompatible !== false) {\n    return (\n      <CardButton\n        strapiAppVersion={strapiAppVersion}\n        strapiPeerDepVersion={strapiPeerDepVersion}\n        handleCopy={handleCopy}\n        pluginName={pluginName}\n      />\n    );\n  }\n\n  // Not in development and plugin not installed already. Show nothing\n  return null;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * CardButton\n * -----------------------------------------------------------------------------------------------*/\n\ninterface CardButtonProps\n  extends Pick<NpmPackageCardProps, 'strapiAppVersion'>,\n    Pick<InstallPluginButtonProps, 'strapiPeerDepVersion' | 'pluginName'> {\n  handleCopy: () => void;\n}\n\nconst CardButton = ({\n  strapiPeerDepVersion,\n  strapiAppVersion,\n  handleCopy,\n  pluginName,\n}: CardButtonProps) => {\n  const { formatMessage } = useIntl();\n  const versionRange = semver.validRange(strapiPeerDepVersion);\n  const isCompatible = semver.satisfies(strapiAppVersion ?? '', versionRange ?? '');\n\n  const installMessage = formatMessage({\n    id: 'admin.pages.MarketPlacePage.plugin.copy',\n    defaultMessage: 'Copy install command',\n  });\n\n  // Only plugins receive a strapiAppVersion\n  if (strapiAppVersion) {\n    if (!versionRange || !isCompatible) {\n      return (\n        <Tooltip\n          data-testid={`tooltip-${pluginName}`}\n          label={formatMessage(\n            {\n              id: 'admin.pages.MarketPlacePage.plugin.version',\n              defaultMessage:\n                'Update your Strapi version: \"{strapiAppVersion}\" to: \"{versionRange}\"',\n            },\n            {\n              strapiAppVersion,\n              versionRange,\n            }\n          )}\n        >\n          <span>\n            <Button\n              size=\"S\"\n              startIcon={<Duplicate />}\n              variant=\"secondary\"\n              onClick={handleCopy}\n              disabled={!isCompatible}\n            >\n              {installMessage}\n            </Button>\n          </span>\n        </Tooltip>\n      );\n    }\n  }\n\n  return (\n    <Button size=\"S\" startIcon={<Duplicate />} variant=\"secondary\" onClick={handleCopy}>\n      {installMessage}\n    </Button>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * PackageStats\n * -----------------------------------------------------------------------------------------------*/\n\ninterface PackageStatsProps {\n  githubStars?: number;\n  npmDownloads?: number;\n  npmPackageType: NpmPackageType;\n}\n\nconst PackageStats = ({ githubStars = 0, npmDownloads = 0, npmPackageType }: PackageStatsProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Flex gap={1}>\n      {!!githubStars && (\n        <>\n          <GitHub height=\"1.2rem\" width=\"1.2rem\" aria-hidden />\n          <Star height=\"1.2rem\" width=\"1.2rem\" fill=\"warning500\" aria-hidden />\n          <p\n            aria-label={formatMessage(\n              {\n                id: `admin.pages.MarketPlacePage.${npmPackageType}.githubStars`,\n                defaultMessage: `This {package} was starred {starsCount} on GitHub`,\n              },\n              {\n                starsCount: githubStars,\n                package: npmPackageType,\n              }\n            )}\n          >\n            <Typography variant=\"pi\" textColor=\"neutral800\">\n              {githubStars}\n            </Typography>\n          </p>\n          <VerticalDivider />\n        </>\n      )}\n      <Download height=\"1.2rem\" width=\"1.2rem\" aria-hidden />\n      <p\n        aria-label={formatMessage(\n          {\n            id: `admin.pages.MarketPlacePage.${npmPackageType}.downloads`,\n            defaultMessage: `This {package} has {downloadsCount} weekly downloads`,\n          },\n          {\n            downloadsCount: npmDownloads,\n            package: npmPackageType,\n          }\n        )}\n      >\n        <Typography variant=\"pi\" textColor=\"neutral800\">\n          {npmDownloads}\n        </Typography>\n      </p>\n    </Flex>\n  );\n};\n\nconst VerticalDivider = styled(Divider)`\n  width: 1.2rem;\n  transform: rotate(90deg);\n`;\n\nexport { NpmPackageCard };\nexport type { NpmPackageCardProps };\n"],"names":["EllipsisText","styled","Typography","NpmPackageCard","npmPackage","isInstalled","useYarn","isInDevelopmentMode","npmPackageType","strapiAppVersion","attributes","formatMessage","useIntl","trackUsage","useTracking","commandToCopy","npmPackageName","madeByStrapiMessage","id","defaultMessage","npmPackageHref","pluralize","plural","slug","versionRange","semver","validRange","strapiVersion","isCompatible","satisfies","_jsxs","Flex","direction","justifyContent","paddingTop","paddingRight","paddingBottom","paddingLeft","hasRadius","background","shadow","height","alignItems","data-testid","Box","_jsx","tag","src","logo","url","alt","name","width","PackageStats","githubStars","npmDownloads","variant","gap","validated","madeByStrapi","Tooltip","description","CheckCircle","fill","StrapiLogo","textColor","style","alignSelf","LinkButton","size","href","isExternal","endIcon","ExternalLink","aria-label","pluginName","onClick","InstallPluginButton","strapiPeerDepVersion","toggleNotification","useNotification","copy","useClipboard","handleCopy","didCopy","type","message","Check","color","fontWeight","CardButton","installMessage","label","span","Button","startIcon","Duplicate","disabled","_Fragment","GitHub","aria-hidden","Star","p","starsCount","package","VerticalDivider","Download","downloadsCount","Divider"],"mappings":"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"}

package/dist/admin/admin/src/pages/Marketplace/components/NpmPackagesGrid.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var designSystem = require('@strapi/design-system');
 var symbols = require('@strapi/icons/symbols');
 var reactIntl = require('react-intl');
-var styledComponents = require('styled-components');
+var styled = require('styled-components');
 var Layout = require('../../../components/Layouts/Layout.js');
 var PageHelpers = require('../../../components/PageHelpers.js');
 var NpmPackageCard = require('./NpmPackageCard.js');
@@ -84,7 +84,7 @@ const NpmPackagesGrid = ({ status, npmPackages = [], installedPackageNames = [],
             }, npmPackage.id))
     });
 };
-const EmptyPluginCard = styledComponents.styled(designSystem.Box)`
+const EmptyPluginCard = styled.styled(designSystem.Box)`
   background: ${({ theme })=>`linear-gradient(180deg, rgba(234, 234, 239, 0) 0%, ${theme.colors.neutral150} 100%)`};
   opacity: 0.33;
 `;

package/dist/admin/admin/src/pages/Marketplace/components/NpmPackagesGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"NpmPackagesGrid.js","sources":["../../../../../../../admin/src/pages/Marketplace/components/NpmPackagesGrid.tsx"],"sourcesContent":["import { Box, BoxComponent, Flex, Grid, Typography } from '@strapi/design-system';\nimport { EmptyDocuments } from '@strapi/icons/symbols';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { Layouts } from '../../../components/Layouts/Layout';\nimport { Page } from '../../../components/PageHelpers';\nimport { AppInfoContextValue } from '../../../features/AppInfo';\n\nimport { NpmPackageCard, NpmPackageCardProps } from './NpmPackageCard';\n\nimport type { Plugin, Provider } from '../hooks/useMarketplaceData';\n\ninterface NpmPackagesGridProps extends Pick<NpmPackageCardProps, 'npmPackageType' | 'useYarn'> {\n  debouncedSearch: string;\n  installedPackageNames: string[];\n  isInDevelopmentMode: AppInfoContextValue['autoReload'];\n  npmPackages?: Array<Plugin | Provider>;\n  status: 'idle' | 'loading' | 'error' | 'success';\n  strapiAppVersion?: NpmPackageCardProps['strapiAppVersion'];\n}\n\nconst NpmPackagesGrid = ({\n  status,\n  npmPackages = [],\n  installedPackageNames = [],\n  useYarn,\n  isInDevelopmentMode,\n  npmPackageType,\n  strapiAppVersion,\n  debouncedSearch,\n}: NpmPackagesGridProps) => {\n  const { formatMessage } = useIntl();\n\n  if (status === 'error') {\n    return <Page.Error />;\n  }\n\n  if (status === 'loading') {\n    return <Page.Loading />;\n  }\n\n  const emptySearchMessage = formatMessage(\n    {\n      id: 'admin.pages.MarketPlacePage.search.empty',\n      defaultMessage: 'No result for \"{target}\"',\n    },\n    { target: debouncedSearch }\n  );\n\n  if (npmPackages.length === 0) {\n    return (\n      <Box position=\"relative\">\n        <Layouts.Grid size=\"M\">\n          {Array(12)\n            .fill(null)\n            .map((_, idx) => (\n              <EmptyPluginCard key={idx} height=\"234px\" hasRadius />\n            ))}\n        </Layouts.Grid>\n        <Box position=\"absolute\" top={11} width=\"100%\">\n          <Flex alignItems=\"center\" justifyContent=\"center\" direction=\"column\">\n            <EmptyDocuments width=\"160px\" height=\"88px\" />\n            <Box paddingTop={6}>\n              <Typography variant=\"delta\" tag=\"p\" textColor=\"neutral600\">\n                {emptySearchMessage}\n              </Typography>\n            </Box>\n          </Flex>\n        </Box>\n      </Box>\n    );\n  }\n\n  return (\n    <Grid.Root gap={4}>\n      {npmPackages.map((npmPackage) => (\n        <Grid.Item\n          col={4}\n          s={6}\n          xs={12}\n          style={{ height: '100%' }}\n          key={npmPackage.id}\n          direction=\"column\"\n          alignItems=\"stretch\"\n        >\n          <NpmPackageCard\n            npmPackage={npmPackage}\n            isInstalled={installedPackageNames.includes(npmPackage.attributes.npmPackageName)}\n            useYarn={useYarn}\n            isInDevelopmentMode={isInDevelopmentMode}\n            npmPackageType={npmPackageType}\n            strapiAppVersion={strapiAppVersion}\n          />\n        </Grid.Item>\n      ))}\n    </Grid.Root>\n  );\n};\n\nconst EmptyPluginCard = styled<BoxComponent>(Box)`\n  background: ${({ theme }) =>\n    `linear-gradient(180deg, rgba(234, 234, 239, 0) 0%, ${theme.colors.neutral150} 100%)`};\n  opacity: 0.33;\n`;\n\nexport { NpmPackagesGrid };\n"],"names":["NpmPackagesGrid","status","npmPackages","installedPackageNames","useYarn","isInDevelopmentMode","npmPackageType","strapiAppVersion","debouncedSearch","formatMessage","useIntl","_jsx","Page","Error","Loading","emptySearchMessage","id","defaultMessage","target","length","_jsxs","Box","position","Layouts","Grid","size","Array","fill","map","_","idx","EmptyPluginCard","height","hasRadius","top","width","Flex","alignItems","justifyContent","direction","EmptyDocuments","paddingTop","Typography","variant","tag","textColor","Root","gap","npmPackage","Item","col","s","xs","style","NpmPackageCard","isInstalled","includes","attributes","npmPackageName","styled","theme","colors","neutral150"],"mappings":"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"}
+{"version":3,"file":"NpmPackagesGrid.js","sources":["../../../../../../../admin/src/pages/Marketplace/components/NpmPackagesGrid.tsx"],"sourcesContent":["import { Box, BoxComponent, Flex, Grid, Typography } from '@strapi/design-system';\nimport { EmptyDocuments } from '@strapi/icons/symbols';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { Layouts } from '../../../components/Layouts/Layout';\nimport { Page } from '../../../components/PageHelpers';\nimport { AppInfoContextValue } from '../../../features/AppInfo';\n\nimport { NpmPackageCard, NpmPackageCardProps } from './NpmPackageCard';\n\nimport type { Plugin, Provider } from '../hooks/useMarketplaceData';\n\ninterface NpmPackagesGridProps extends Pick<NpmPackageCardProps, 'npmPackageType' | 'useYarn'> {\n  debouncedSearch: string;\n  installedPackageNames: string[];\n  isInDevelopmentMode: AppInfoContextValue['autoReload'];\n  npmPackages?: Array<Plugin | Provider>;\n  status: 'idle' | 'loading' | 'error' | 'success';\n  strapiAppVersion?: NpmPackageCardProps['strapiAppVersion'];\n}\n\nconst NpmPackagesGrid = ({\n  status,\n  npmPackages = [],\n  installedPackageNames = [],\n  useYarn,\n  isInDevelopmentMode,\n  npmPackageType,\n  strapiAppVersion,\n  debouncedSearch,\n}: NpmPackagesGridProps) => {\n  const { formatMessage } = useIntl();\n\n  if (status === 'error') {\n    return <Page.Error />;\n  }\n\n  if (status === 'loading') {\n    return <Page.Loading />;\n  }\n\n  const emptySearchMessage = formatMessage(\n    {\n      id: 'admin.pages.MarketPlacePage.search.empty',\n      defaultMessage: 'No result for \"{target}\"',\n    },\n    { target: debouncedSearch }\n  );\n\n  if (npmPackages.length === 0) {\n    return (\n      <Box position=\"relative\">\n        <Layouts.Grid size=\"M\">\n          {Array(12)\n            .fill(null)\n            .map((_, idx) => (\n              <EmptyPluginCard key={idx} height=\"234px\" hasRadius />\n            ))}\n        </Layouts.Grid>\n        <Box position=\"absolute\" top={11} width=\"100%\">\n          <Flex alignItems=\"center\" justifyContent=\"center\" direction=\"column\">\n            <EmptyDocuments width=\"160px\" height=\"88px\" />\n            <Box paddingTop={6}>\n              <Typography variant=\"delta\" tag=\"p\" textColor=\"neutral600\">\n                {emptySearchMessage}\n              </Typography>\n            </Box>\n          </Flex>\n        </Box>\n      </Box>\n    );\n  }\n\n  return (\n    <Grid.Root gap={4}>\n      {npmPackages.map((npmPackage) => (\n        <Grid.Item\n          col={4}\n          s={6}\n          xs={12}\n          style={{ height: '100%' }}\n          key={npmPackage.id}\n          direction=\"column\"\n          alignItems=\"stretch\"\n        >\n          <NpmPackageCard\n            npmPackage={npmPackage}\n            isInstalled={installedPackageNames.includes(npmPackage.attributes.npmPackageName)}\n            useYarn={useYarn}\n            isInDevelopmentMode={isInDevelopmentMode}\n            npmPackageType={npmPackageType}\n            strapiAppVersion={strapiAppVersion}\n          />\n        </Grid.Item>\n      ))}\n    </Grid.Root>\n  );\n};\n\nconst EmptyPluginCard = styled<BoxComponent>(Box)`\n  background: ${({ theme }) =>\n    `linear-gradient(180deg, rgba(234, 234, 239, 0) 0%, ${theme.colors.neutral150} 100%)`};\n  opacity: 0.33;\n`;\n\nexport { NpmPackagesGrid };\n"],"names":["NpmPackagesGrid","status","npmPackages","installedPackageNames","useYarn","isInDevelopmentMode","npmPackageType","strapiAppVersion","debouncedSearch","formatMessage","useIntl","_jsx","Page","Error","Loading","emptySearchMessage","id","defaultMessage","target","length","_jsxs","Box","position","Layouts","Grid","size","Array","fill","map","_","idx","EmptyPluginCard","height","hasRadius","top","width","Flex","alignItems","justifyContent","direction","EmptyDocuments","paddingTop","Typography","variant","tag","textColor","Root","gap","npmPackage","Item","col","s","xs","style","NpmPackageCard","isInstalled","includes","attributes","npmPackageName","styled","theme","colors","neutral150"],"mappings":"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"}

package/dist/admin/admin/src/pages/Marketplace/components/SortSelect.js

@@ -3,7 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var designSystem = require('@strapi/design-system');
 var reactIntl = require('react-intl');
-var styledComponents = require('styled-components');
+var styled = require('styled-components');
 
 const SORT_TYPES = {
     'name:asc': {
@@ -73,7 +73,7 @@ const SortSelect = ({ sortQuery, handleSelectChange })=>{
         })
     });
 };
-const SelectWrapper = styledComponents.styled(designSystem.Box)`
+const SelectWrapper = styled.styled(designSystem.Box)`
   font-weight: ${({ theme })=>theme.fontWeights.semiBold};
 
   span {

package/dist/admin/admin/src/pages/Marketplace/components/SortSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortSelect.js","sources":["../../../../../../../admin/src/pages/Marketplace/components/SortSelect.tsx"],"sourcesContent":["import { Box, SingleSelectOption, SingleSelect, BoxComponent } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nconst SORT_TYPES = {\n  'name:asc': {\n    selected: {\n      id: 'admin.pages.MarketPlacePage.sort.alphabetical.selected',\n      defaultMessage: 'Sort by alphabetical order',\n    },\n    option: {\n      id: 'admin.pages.MarketPlacePage.sort.alphabetical',\n      defaultMessage: 'Alphabetical order',\n    },\n  },\n  'submissionDate:desc': {\n    selected: {\n      id: 'admin.pages.MarketPlacePage.sort.newest.selected',\n      defaultMessage: 'Sort by newest',\n    },\n    option: {\n      id: 'admin.pages.MarketPlacePage.sort.newest',\n      defaultMessage: 'Newest',\n    },\n  },\n  'githubStars:desc': {\n    selected: {\n      id: 'admin.pages.MarketPlacePage.sort.githubStars.selected',\n      defaultMessage: 'Sort by GitHub stars',\n    },\n    option: {\n      id: 'admin.pages.MarketPlacePage.sort.githubStars',\n      defaultMessage: 'Number of GitHub stars',\n    },\n  },\n  'npmDownloads:desc': {\n    selected: {\n      id: 'admin.pages.MarketPlacePage.sort.npmDownloads.selected',\n      defaultMessage: 'Sort by npm downloads',\n    },\n    option: {\n      id: 'admin.pages.MarketPlacePage.sort.npmDownloads',\n      defaultMessage: 'Number of downloads',\n    },\n  },\n} as const;\n\ninterface SortSelectProps {\n  sortQuery: keyof typeof SORT_TYPES;\n  handleSelectChange: (payload: { sort: string }) => void;\n}\n\nconst SortSelect = ({ sortQuery, handleSelectChange }: SortSelectProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <SelectWrapper>\n      <SingleSelect\n        value={sortQuery}\n        customizeContent={() => formatMessage(SORT_TYPES[sortQuery].selected)}\n        onChange={(sortName) => {\n          // @ts-expect-error – in V2 design-system we'll only ever return strings.\n          handleSelectChange({ sort: sortName });\n        }}\n        aria-label={formatMessage({\n          id: 'admin.pages.MarketPlacePage.sort.label',\n          defaultMessage: 'Sort by',\n        })}\n        size=\"S\"\n      >\n        {Object.entries(SORT_TYPES).map(([sortName, messages]) => {\n          return (\n            <SingleSelectOption key={sortName} value={sortName}>\n              {formatMessage(messages.option)}\n            </SingleSelectOption>\n          );\n        })}\n      </SingleSelect>\n    </SelectWrapper>\n  );\n};\n\nconst SelectWrapper = styled<BoxComponent>(Box)`\n  font-weight: ${({ theme }) => theme.fontWeights.semiBold};\n\n  span {\n    font-size: ${({ theme }) => theme.fontSizes[1]};\n  }\n`;\n\nexport { SortSelect };\nexport type { SortSelectProps };\n"],"names":["SORT_TYPES","selected","id","defaultMessage","option","SortSelect","sortQuery","handleSelectChange","formatMessage","useIntl","_jsx","SelectWrapper","SingleSelect","value","customizeContent","onChange","sortName","sort","aria-label","size","Object","entries","map","messages","SingleSelectOption","styled","Box","theme","fontWeights","semiBold","fontSizes"],"mappings":";;;;;;;AAIA,MAAMA,UAAa,GAAA;IACjB,UAAY,EAAA;QACVC,QAAU,EAAA;YACRC,EAAI,EAAA,wDAAA;YACJC,cAAgB,EAAA;AAClB,SAAA;QACAC,MAAQ,EAAA;YACNF,EAAI,EAAA,+CAAA;YACJC,cAAgB,EAAA;AAClB;AACF,KAAA;IACA,qBAAuB,EAAA;QACrBF,QAAU,EAAA;YACRC,EAAI,EAAA,kDAAA;YACJC,cAAgB,EAAA;AAClB,SAAA;QACAC,MAAQ,EAAA;YACNF,EAAI,EAAA,yCAAA;YACJC,cAAgB,EAAA;AAClB;AACF,KAAA;IACA,kBAAoB,EAAA;QAClBF,QAAU,EAAA;YACRC,EAAI,EAAA,uDAAA;YACJC,cAAgB,EAAA;AAClB,SAAA;QACAC,MAAQ,EAAA;YACNF,EAAI,EAAA,8CAAA;YACJC,cAAgB,EAAA;AAClB;AACF,KAAA;IACA,mBAAqB,EAAA;QACnBF,QAAU,EAAA;YACRC,EAAI,EAAA,wDAAA;YACJC,cAAgB,EAAA;AAClB,SAAA;QACAC,MAAQ,EAAA;YACNF,EAAI,EAAA,+CAAA;YACJC,cAAgB,EAAA;AAClB;AACF;AACF,CAAA;AAOA,MAAME,aAAa,CAAC,EAAEC,SAAS,EAAEC,kBAAkB,EAAmB,GAAA;IACpE,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAE1B,IAAA,qBACEC,cAACC,CAAAA,aAAAA,EAAAA;AACC,QAAA,QAAA,gBAAAD,cAACE,CAAAA,yBAAAA,EAAAA;YACCC,KAAOP,EAAAA,SAAAA;AACPQ,YAAAA,gBAAAA,EAAkB,IAAMN,aAAcR,CAAAA,UAAU,CAACM,SAAAA,CAAU,CAACL,QAAQ,CAAA;AACpEc,YAAAA,QAAAA,EAAU,CAACC,QAAAA,GAAAA;;gBAETT,kBAAmB,CAAA;oBAAEU,IAAMD,EAAAA;AAAS,iBAAA,CAAA;AACtC,aAAA;AACAE,YAAAA,YAAAA,EAAYV,aAAc,CAAA;gBACxBN,EAAI,EAAA,wCAAA;gBACJC,cAAgB,EAAA;AAClB,aAAA,CAAA;YACAgB,IAAK,EAAA,GAAA;sBAEJC,MAAOC,CAAAA,OAAO,CAACrB,UAAYsB,CAAAA,CAAAA,GAAG,CAAC,CAAC,CAACN,UAAUO,QAAS,CAAA,GAAA;AACnD,gBAAA,qBACEb,cAACc,CAAAA,+BAAAA,EAAAA;oBAAkCX,KAAOG,EAAAA,QAAAA;AACvCR,oBAAAA,QAAAA,EAAAA,aAAAA,CAAce,SAASnB,MAAM;AADPY,iBAAAA,EAAAA,QAAAA,CAAAA;AAI7B,aAAA;;;AAIR;AAEA,MAAML,aAAAA,GAAgBc,uBAAqBC,CAAAA,gBAAAA,CAAI;eAChC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,WAAW,CAACC,QAAQ,CAAC;;;eAG5C,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAMG,CAAAA,SAAS,CAAC,CAAA,CAAE,CAAC;;AAEnD,CAAC;;;;"}
+{"version":3,"file":"SortSelect.js","sources":["../../../../../../../admin/src/pages/Marketplace/components/SortSelect.tsx"],"sourcesContent":["import { Box, SingleSelectOption, SingleSelect, BoxComponent } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nconst SORT_TYPES = {\n  'name:asc': {\n    selected: {\n      id: 'admin.pages.MarketPlacePage.sort.alphabetical.selected',\n      defaultMessage: 'Sort by alphabetical order',\n    },\n    option: {\n      id: 'admin.pages.MarketPlacePage.sort.alphabetical',\n      defaultMessage: 'Alphabetical order',\n    },\n  },\n  'submissionDate:desc': {\n    selected: {\n      id: 'admin.pages.MarketPlacePage.sort.newest.selected',\n      defaultMessage: 'Sort by newest',\n    },\n    option: {\n      id: 'admin.pages.MarketPlacePage.sort.newest',\n      defaultMessage: 'Newest',\n    },\n  },\n  'githubStars:desc': {\n    selected: {\n      id: 'admin.pages.MarketPlacePage.sort.githubStars.selected',\n      defaultMessage: 'Sort by GitHub stars',\n    },\n    option: {\n      id: 'admin.pages.MarketPlacePage.sort.githubStars',\n      defaultMessage: 'Number of GitHub stars',\n    },\n  },\n  'npmDownloads:desc': {\n    selected: {\n      id: 'admin.pages.MarketPlacePage.sort.npmDownloads.selected',\n      defaultMessage: 'Sort by npm downloads',\n    },\n    option: {\n      id: 'admin.pages.MarketPlacePage.sort.npmDownloads',\n      defaultMessage: 'Number of downloads',\n    },\n  },\n} as const;\n\ninterface SortSelectProps {\n  sortQuery: keyof typeof SORT_TYPES;\n  handleSelectChange: (payload: { sort: string }) => void;\n}\n\nconst SortSelect = ({ sortQuery, handleSelectChange }: SortSelectProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <SelectWrapper>\n      <SingleSelect\n        value={sortQuery}\n        customizeContent={() => formatMessage(SORT_TYPES[sortQuery].selected)}\n        onChange={(sortName) => {\n          // @ts-expect-error – in V2 design-system we'll only ever return strings.\n          handleSelectChange({ sort: sortName });\n        }}\n        aria-label={formatMessage({\n          id: 'admin.pages.MarketPlacePage.sort.label',\n          defaultMessage: 'Sort by',\n        })}\n        size=\"S\"\n      >\n        {Object.entries(SORT_TYPES).map(([sortName, messages]) => {\n          return (\n            <SingleSelectOption key={sortName} value={sortName}>\n              {formatMessage(messages.option)}\n            </SingleSelectOption>\n          );\n        })}\n      </SingleSelect>\n    </SelectWrapper>\n  );\n};\n\nconst SelectWrapper = styled<BoxComponent>(Box)`\n  font-weight: ${({ theme }) => theme.fontWeights.semiBold};\n\n  span {\n    font-size: ${({ theme }) => theme.fontSizes[1]};\n  }\n`;\n\nexport { SortSelect };\nexport type { SortSelectProps };\n"],"names":["SORT_TYPES","selected","id","defaultMessage","option","SortSelect","sortQuery","handleSelectChange","formatMessage","useIntl","_jsx","SelectWrapper","SingleSelect","value","customizeContent","onChange","sortName","sort","aria-label","size","Object","entries","map","messages","SingleSelectOption","styled","Box","theme","fontWeights","semiBold","fontSizes"],"mappings":";;;;;;;AAIA,MAAMA,UAAa,GAAA;IACjB,UAAY,EAAA;QACVC,QAAU,EAAA;YACRC,EAAI,EAAA,wDAAA;YACJC,cAAgB,EAAA;AAClB,SAAA;QACAC,MAAQ,EAAA;YACNF,EAAI,EAAA,+CAAA;YACJC,cAAgB,EAAA;AAClB;AACF,KAAA;IACA,qBAAuB,EAAA;QACrBF,QAAU,EAAA;YACRC,EAAI,EAAA,kDAAA;YACJC,cAAgB,EAAA;AAClB,SAAA;QACAC,MAAQ,EAAA;YACNF,EAAI,EAAA,yCAAA;YACJC,cAAgB,EAAA;AAClB;AACF,KAAA;IACA,kBAAoB,EAAA;QAClBF,QAAU,EAAA;YACRC,EAAI,EAAA,uDAAA;YACJC,cAAgB,EAAA;AAClB,SAAA;QACAC,MAAQ,EAAA;YACNF,EAAI,EAAA,8CAAA;YACJC,cAAgB,EAAA;AAClB;AACF,KAAA;IACA,mBAAqB,EAAA;QACnBF,QAAU,EAAA;YACRC,EAAI,EAAA,wDAAA;YACJC,cAAgB,EAAA;AAClB,SAAA;QACAC,MAAQ,EAAA;YACNF,EAAI,EAAA,+CAAA;YACJC,cAAgB,EAAA;AAClB;AACF;AACF,CAAA;AAOA,MAAME,aAAa,CAAC,EAAEC,SAAS,EAAEC,kBAAkB,EAAmB,GAAA;IACpE,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAE1B,IAAA,qBACEC,cAACC,CAAAA,aAAAA,EAAAA;AACC,QAAA,QAAA,gBAAAD,cAACE,CAAAA,yBAAAA,EAAAA;YACCC,KAAOP,EAAAA,SAAAA;AACPQ,YAAAA,gBAAAA,EAAkB,IAAMN,aAAcR,CAAAA,UAAU,CAACM,SAAAA,CAAU,CAACL,QAAQ,CAAA;AACpEc,YAAAA,QAAAA,EAAU,CAACC,QAAAA,GAAAA;;gBAETT,kBAAmB,CAAA;oBAAEU,IAAMD,EAAAA;AAAS,iBAAA,CAAA;AACtC,aAAA;AACAE,YAAAA,YAAAA,EAAYV,aAAc,CAAA;gBACxBN,EAAI,EAAA,wCAAA;gBACJC,cAAgB,EAAA;AAClB,aAAA,CAAA;YACAgB,IAAK,EAAA,GAAA;sBAEJC,MAAOC,CAAAA,OAAO,CAACrB,UAAYsB,CAAAA,CAAAA,GAAG,CAAC,CAAC,CAACN,UAAUO,QAAS,CAAA,GAAA;AACnD,gBAAA,qBACEb,cAACc,CAAAA,+BAAAA,EAAAA;oBAAkCX,KAAOG,EAAAA,QAAAA;AACvCR,oBAAAA,QAAAA,EAAAA,aAAAA,CAAce,SAASnB,MAAM;AADPY,iBAAAA,EAAAA,QAAAA,CAAAA;AAI7B,aAAA;;;AAIR;AAEA,MAAML,aAAAA,GAAgBc,aAAqBC,CAAAA,gBAAAA,CAAI;eAChC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,WAAW,CAACC,QAAQ,CAAC;;;eAG5C,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAMG,CAAAA,SAAS,CAAC,CAAA,CAAE,CAAC;;AAEnD,CAAC;;;;"}

package/dist/admin/admin/src/pages/Settings/components/SettingsNav.js

@@ -5,23 +5,14 @@ var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
 var reactRouterDom = require('react-router-dom');
-var styledComponents = require('styled-components');
+var styled = require('styled-components');
+var SubNav = require('../../../components/SubNav.js');
 var Tracking = require('../../../features/Tracking.js');
 
-const CustomIcon = styledComponents.styled(icons.Lightning)`
-  right: 15px;
-  position: absolute;
-  bottom: 50%;
-  transform: translateY(50%);
-
-  path {
-    fill: ${({ theme })=>theme.colors.warning500};
-  }
-`;
-const Link = styledComponents.styled(designSystem.SubNavLink)`
-  &.active ${CustomIcon} {
-    right: 13px;
-  }
+const StyledBadge = styled.styled(designSystem.Badge)`
+  border-radius: 50%;
+  padding: ${({ theme })=>theme.spaces[2]};
+  height: 2rem;
 `;
 const SettingsNav = ({ menu })=>{
     const { formatMessage } = reactIntl.useIntl();
@@ -51,29 +42,39 @@ const SettingsNav = ({ menu })=>{
                 to: destination
             });
         };
-    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.SubNav, {
+    return /*#__PURE__*/ jsxRuntime.jsxs(SubNav.SubNav.Main, {
         "aria-label": label,
         children: [
-            /*#__PURE__*/ jsxRuntime.jsx(designSystem.SubNavHeader, {
+            /*#__PURE__*/ jsxRuntime.jsx(SubNav.SubNav.Header, {
                 label: label
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(designSystem.SubNavSections, {
-                children: sections.map((section)=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.SubNavSection, {
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Divider, {
+                background: "neutral150",
+                marginBottom: 5
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(SubNav.SubNav.Sections, {
+                children: sections.map((section)=>/*#__PURE__*/ jsxRuntime.jsx(SubNav.SubNav.Section, {
                         label: formatMessage(section.intlLabel),
                         children: section.links.map((link)=>{
-                            return /*#__PURE__*/ jsxRuntime.jsxs(Link, {
-                                tag: reactRouterDom.NavLink,
-                                withBullet: link.hasNotification,
+                            return /*#__PURE__*/ jsxRuntime.jsx(SubNav.SubNav.Link, {
                                 to: link.to,
                                 onClick: handleClickOnLink(link.to),
-                                position: "relative",
-                                children: [
-                                    formatMessage(link.intlLabel),
-                                    link?.licenseOnly && /*#__PURE__*/ jsxRuntime.jsx(CustomIcon, {
-                                        width: "1.5rem",
-                                        height: "1.5rem"
-                                    })
-                                ]
+                                label: formatMessage(link.intlLabel),
+                                endAction: /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                                    children: [
+                                        link?.licenseOnly && /*#__PURE__*/ jsxRuntime.jsx(icons.Lightning, {
+                                            fill: "primary600",
+                                            width: "1.5rem",
+                                            height: "1.5rem"
+                                        }),
+                                        link?.hasNotification && /*#__PURE__*/ jsxRuntime.jsx(StyledBadge, {
+                                            "aria-label": "Notification",
+                                            backgroundColor: "primary600",
+                                            textColor: "neutral0",
+                                            children: "1"
+                                        })
+                                    ]
+                                })
                             }, link.id);
                         })
                     }, section.id))

package/dist/admin/admin/src/pages/Settings/components/SettingsNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsNav.js","sources":["../../../../../../../admin/src/pages/Settings/components/SettingsNav.tsx"],"sourcesContent":["import {\n  SubNav,\n  SubNavHeader,\n  SubNavLink,\n  SubNavSection,\n  SubNavSections,\n} from '@strapi/design-system';\nimport { Lightning } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { NavLink, useLocation } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useTracking } from '../../../features/Tracking';\nimport { SettingsMenu } from '../../../hooks/useSettingsMenu';\n\nconst CustomIcon = styled(Lightning)`\n  right: 15px;\n  position: absolute;\n  bottom: 50%;\n  transform: translateY(50%);\n\n  path {\n    fill: ${({ theme }) => theme.colors.warning500};\n  }\n`;\n\nconst Link = styled(SubNavLink)`\n  &.active ${CustomIcon} {\n    right: 13px;\n  }\n`;\n\ninterface SettingsNavProps {\n  menu: SettingsMenu;\n}\n\nconst SettingsNav = ({ menu }: SettingsNavProps) => {\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n  const { pathname } = useLocation();\n\n  const filteredMenu = menu.filter(\n    (section) => !section.links.every((link) => link.isDisplayed === false)\n  );\n\n  const sections = filteredMenu.map((section) => {\n    return {\n      ...section,\n      title: section.intlLabel,\n      links: section.links.map((link) => {\n        return {\n          ...link,\n          title: link.intlLabel,\n          name: link.id,\n        };\n      }),\n    };\n  });\n\n  const label = formatMessage({\n    id: 'global.settings',\n    defaultMessage: 'Settings',\n  });\n\n  const handleClickOnLink = (destination: string) => () => {\n    trackUsage('willNavigate', { from: pathname, to: destination });\n  };\n\n  return (\n    <SubNav aria-label={label}>\n      <SubNavHeader label={label} />\n      <SubNavSections>\n        {sections.map((section) => (\n          <SubNavSection key={section.id} label={formatMessage(section.intlLabel)}>\n            {section.links.map((link) => {\n              return (\n                <Link\n                  tag={NavLink}\n                  withBullet={link.hasNotification}\n                  to={link.to}\n                  onClick={handleClickOnLink(link.to)}\n                  key={link.id}\n                  position=\"relative\"\n                >\n                  {formatMessage(link.intlLabel)}\n                  {link?.licenseOnly && <CustomIcon width=\"1.5rem\" height=\"1.5rem\" />}\n                </Link>\n              );\n            })}\n          </SubNavSection>\n        ))}\n      </SubNavSections>\n    </SubNav>\n  );\n};\n\nexport { SettingsNav };\nexport type { SettingsNavProps };\n"],"names":["CustomIcon","styled","Lightning","theme","colors","warning500","Link","SubNavLink","SettingsNav","menu","formatMessage","useIntl","trackUsage","useTracking","pathname","useLocation","filteredMenu","filter","section","links","every","link","isDisplayed","sections","map","title","intlLabel","name","id","label","defaultMessage","handleClickOnLink","destination","from","to","_jsxs","SubNav","aria-label","_jsx","SubNavHeader","SubNavSections","SubNavSection","tag","NavLink","withBullet","hasNotification","onClick","position","licenseOnly","width","height"],"mappings":";;;;;;;;;;AAeA,MAAMA,UAAAA,GAAaC,uBAAOC,CAAAA,eAAAA,CAAU;;;;;;;UAO1B,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;AAEnD,CAAC;AAED,MAAMC,IAAAA,GAAOL,uBAAOM,CAAAA,uBAAAA,CAAW;AACpB,WAAA,EAAEP,UAAW,CAAA;;;AAGxB,CAAC;AAMD,MAAMQ,WAAc,GAAA,CAAC,EAAEC,IAAI,EAAoB,GAAA;IAC7C,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAC1B,MAAM,EAAEC,UAAU,EAAE,GAAGC,oBAAAA,EAAAA;IACvB,MAAM,EAAEC,QAAQ,EAAE,GAAGC,0BAAAA,EAAAA;AAErB,IAAA,MAAMC,eAAeP,IAAKQ,CAAAA,MAAM,CAC9B,CAACC,UAAY,CAACA,OAAAA,CAAQC,KAAK,CAACC,KAAK,CAAC,CAACC,IAASA,GAAAA,IAAAA,CAAKC,WAAW,KAAK,KAAA,CAAA,CAAA;AAGnE,IAAA,MAAMC,QAAWP,GAAAA,YAAAA,CAAaQ,GAAG,CAAC,CAACN,OAAAA,GAAAA;QACjC,OAAO;AACL,YAAA,GAAGA,OAAO;AACVO,YAAAA,KAAAA,EAAOP,QAAQQ,SAAS;AACxBP,YAAAA,KAAAA,EAAOD,OAAQC,CAAAA,KAAK,CAACK,GAAG,CAAC,CAACH,IAAAA,GAAAA;gBACxB,OAAO;AACL,oBAAA,GAAGA,IAAI;AACPI,oBAAAA,KAAAA,EAAOJ,KAAKK,SAAS;AACrBC,oBAAAA,IAAAA,EAAMN,KAAKO;AACb,iBAAA;AACF,aAAA;AACF,SAAA;AACF,KAAA,CAAA;AAEA,IAAA,MAAMC,QAAQnB,aAAc,CAAA;QAC1BkB,EAAI,EAAA,iBAAA;QACJE,cAAgB,EAAA;AAClB,KAAA,CAAA;IAEA,MAAMC,iBAAAA,GAAoB,CAACC,WAAwB,GAAA,IAAA;AACjDpB,YAAAA,UAAAA,CAAW,cAAgB,EAAA;gBAAEqB,IAAMnB,EAAAA,QAAAA;gBAAUoB,EAAIF,EAAAA;AAAY,aAAA,CAAA;AAC/D,SAAA;AAEA,IAAA,qBACEG,eAACC,CAAAA,mBAAAA,EAAAA;QAAOC,YAAYR,EAAAA,KAAAA;;0BAClBS,cAACC,CAAAA,yBAAAA,EAAAA;gBAAaV,KAAOA,EAAAA;;0BACrBS,cAACE,CAAAA,2BAAAA,EAAAA;AACEjB,gBAAAA,QAAAA,EAAAA,QAAAA,CAASC,GAAG,CAAC,CAACN,OAAAA,iBACboB,cAACG,CAAAA,0BAAAA,EAAAA;wBAA+BZ,KAAOnB,EAAAA,aAAAA,CAAcQ,QAAQQ,SAAS,CAAA;AACnER,wBAAAA,QAAAA,EAAAA,OAAAA,CAAQC,KAAK,CAACK,GAAG,CAAC,CAACH,IAAAA,GAAAA;AAClB,4BAAA,qBACEc,eAAC7B,CAAAA,IAAAA,EAAAA;gCACCoC,GAAKC,EAAAA,sBAAAA;AACLC,gCAAAA,UAAAA,EAAYvB,KAAKwB,eAAe;AAChCX,gCAAAA,EAAAA,EAAIb,KAAKa,EAAE;gCACXY,OAASf,EAAAA,iBAAAA,CAAkBV,KAAKa,EAAE,CAAA;gCAElCa,QAAS,EAAA,UAAA;;AAERrC,oCAAAA,aAAAA,CAAcW,KAAKK,SAAS,CAAA;AAC5BL,oCAAAA,IAAAA,EAAM2B,6BAAeV,cAACtC,CAAAA,UAAAA,EAAAA;wCAAWiD,KAAM,EAAA,QAAA;wCAASC,MAAO,EAAA;;;AAJnD7B,6BAAAA,EAAAA,IAAAA,CAAKO,EAAE,CAAA;AAOlB,yBAAA;AAfkBV,qBAAAA,EAAAA,OAAAA,CAAQU,EAAE,CAAA;;;;AAqBxC;;;;"}
+{"version":3,"file":"SettingsNav.js","sources":["../../../../../../../admin/src/pages/Settings/components/SettingsNav.tsx"],"sourcesContent":["import { Badge, Divider } from '@strapi/design-system';\nimport { Lightning } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { useLocation } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { SubNav } from '../../../components/SubNav';\nimport { useTracking } from '../../../features/Tracking';\nimport { SettingsMenu } from '../../../hooks/useSettingsMenu';\n\ninterface SettingsNavProps {\n  menu: SettingsMenu;\n}\n\nconst StyledBadge = styled(Badge)`\n  border-radius: 50%;\n  padding: ${({ theme }) => theme.spaces[2]};\n  height: 2rem;\n`;\n\nconst SettingsNav = ({ menu }: SettingsNavProps) => {\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n  const { pathname } = useLocation();\n\n  const filteredMenu = menu.filter(\n    (section) => !section.links.every((link) => link.isDisplayed === false)\n  );\n\n  const sections = filteredMenu.map((section) => {\n    return {\n      ...section,\n      title: section.intlLabel,\n      links: section.links.map((link) => {\n        return {\n          ...link,\n          title: link.intlLabel,\n          name: link.id,\n        };\n      }),\n    };\n  });\n\n  const label = formatMessage({\n    id: 'global.settings',\n    defaultMessage: 'Settings',\n  });\n\n  const handleClickOnLink = (destination: string) => () => {\n    trackUsage('willNavigate', { from: pathname, to: destination });\n  };\n\n  return (\n    <SubNav.Main aria-label={label}>\n      <SubNav.Header label={label} />\n      <Divider background=\"neutral150\" marginBottom={5} />\n      <SubNav.Sections>\n        {sections.map((section) => (\n          <SubNav.Section key={section.id} label={formatMessage(section.intlLabel)}>\n            {section.links.map((link) => {\n              return (\n                <SubNav.Link\n                  to={link.to}\n                  onClick={handleClickOnLink(link.to)}\n                  key={link.id}\n                  label={formatMessage(link.intlLabel)}\n                  endAction={\n                    <>\n                      {link?.licenseOnly && (\n                        <Lightning fill=\"primary600\" width=\"1.5rem\" height=\"1.5rem\" />\n                      )}\n                      {link?.hasNotification && (\n                        <StyledBadge\n                          aria-label=\"Notification\"\n                          backgroundColor=\"primary600\"\n                          textColor=\"neutral0\"\n                        >\n                          1\n                        </StyledBadge>\n                      )}\n                    </>\n                  }\n                />\n              );\n            })}\n          </SubNav.Section>\n        ))}\n      </SubNav.Sections>\n    </SubNav.Main>\n  );\n};\n\nexport { SettingsNav };\nexport type { SettingsNavProps };\n"],"names":["StyledBadge","styled","Badge","theme","spaces","SettingsNav","menu","formatMessage","useIntl","trackUsage","useTracking","pathname","useLocation","filteredMenu","filter","section","links","every","link","isDisplayed","sections","map","title","intlLabel","name","id","label","defaultMessage","handleClickOnLink","destination","from","to","_jsxs","SubNav","Main","aria-label","_jsx","Header","Divider","background","marginBottom","Sections","Section","Link","onClick","endAction","_Fragment","licenseOnly","Lightning","fill","width","height","hasNotification","backgroundColor","textColor"],"mappings":"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"}

package/dist/admin/admin/src/pages/Settings/components/SettingsNav.mjs

@@ -1,25 +1,16 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { SubNavLink, SubNav, SubNavHeader, SubNavSections, SubNavSection } from '@strapi/design-system';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Badge, Divider } from '@strapi/design-system';
 import { Lightning } from '@strapi/icons';
 import { useIntl } from 'react-intl';
-import { useLocation, NavLink } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { styled } from 'styled-components';
+import { SubNav } from '../../../components/SubNav.mjs';
 import { useTracking } from '../../../features/Tracking.mjs';
 
-const CustomIcon = styled(Lightning)`
-  right: 15px;
-  position: absolute;
-  bottom: 50%;
-  transform: translateY(50%);
-
-  path {
-    fill: ${({ theme })=>theme.colors.warning500};
-  }
-`;
-const Link = styled(SubNavLink)`
-  &.active ${CustomIcon} {
-    right: 13px;
-  }
+const StyledBadge = styled(Badge)`
+  border-radius: 50%;
+  padding: ${({ theme })=>theme.spaces[2]};
+  height: 2rem;
 `;
 const SettingsNav = ({ menu })=>{
     const { formatMessage } = useIntl();
@@ -49,29 +40,39 @@ const SettingsNav = ({ menu })=>{
                 to: destination
             });
         };
-    return /*#__PURE__*/ jsxs(SubNav, {
+    return /*#__PURE__*/ jsxs(SubNav.Main, {
         "aria-label": label,
         children: [
-            /*#__PURE__*/ jsx(SubNavHeader, {
+            /*#__PURE__*/ jsx(SubNav.Header, {
                 label: label
             }),
-            /*#__PURE__*/ jsx(SubNavSections, {
-                children: sections.map((section)=>/*#__PURE__*/ jsx(SubNavSection, {
+            /*#__PURE__*/ jsx(Divider, {
+                background: "neutral150",
+                marginBottom: 5
+            }),
+            /*#__PURE__*/ jsx(SubNav.Sections, {
+                children: sections.map((section)=>/*#__PURE__*/ jsx(SubNav.Section, {
                         label: formatMessage(section.intlLabel),
                         children: section.links.map((link)=>{
-                            return /*#__PURE__*/ jsxs(Link, {
-                                tag: NavLink,
-                                withBullet: link.hasNotification,
+                            return /*#__PURE__*/ jsx(SubNav.Link, {
                                 to: link.to,
                                 onClick: handleClickOnLink(link.to),
-                                position: "relative",
-                                children: [
-                                    formatMessage(link.intlLabel),
-                                    link?.licenseOnly && /*#__PURE__*/ jsx(CustomIcon, {
-                                        width: "1.5rem",
-                                        height: "1.5rem"
-                                    })
-                                ]
+                                label: formatMessage(link.intlLabel),
+                                endAction: /*#__PURE__*/ jsxs(Fragment, {
+                                    children: [
+                                        link?.licenseOnly && /*#__PURE__*/ jsx(Lightning, {
+                                            fill: "primary600",
+                                            width: "1.5rem",
+                                            height: "1.5rem"
+                                        }),
+                                        link?.hasNotification && /*#__PURE__*/ jsx(StyledBadge, {
+                                            "aria-label": "Notification",
+                                            backgroundColor: "primary600",
+                                            textColor: "neutral0",
+                                            children: "1"
+                                        })
+                                    ]
+                                })
                             }, link.id);
                         })
                     }, section.id))