@strapi/admin 5.14.0 → 5.15.0

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA;AACA,MAAMA,YAAAA,GAAeC,aAAiCC,CAAAA,uBAAAA,CAAW;;;;;AAKjE,CAAC;AAUD,MAAMC,cAAiB,GAAA,CAAC,EACtBC,UAAU,EACVC,WAAW,EACXC,OAAO,EACPC,mBAAmB,EACnBC,cAAc,EACdC,gBAAgB,EACI,GAAA;IACpB,MAAM,EAAEC,UAAU,EAAE,GAAGN,UAAAA;IACvB,MAAM,EAAEO,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAC1B,MAAM,EAAEC,UAAU,EAAE,GAAGC,oBAAAA,EAAAA;AAEvB,IAAA,MAAMC,gBAAgBT,OAClB,GAAA,CAAC,SAAS,EAAEI,WAAWM,cAAc,CAAC,CAAC,GACvC,CAAC,YAAY,EAAEN,UAAWM,CAAAA,cAAc,CAAC,CAAC;AAE9C,IAAA,MAAMC,sBAAsBN,aAAc,CAAA;QACxCO,EAAI,EAAA,yDAAA;QACJC,cAAgB,EAAA;AAClB,KAAA,CAAA;AAEA,IAAA,MAAMC,cAAiB,GAAA,CAAC,yBAAyB,EAAEC,SAAUC,CAAAA,MAAM,CAACd,cAAAA,CAAAA,CAAgB,CAAC,EACnFE,UAAWa,CAAAA,IAAI,CAChB,CAAC;AAEF,IAAA,MAAMC,YAAeC,GAAAA,iBAAAA,CAAOC,UAAU,CAAChB,WAAWiB,aAAa,CAAA;AAE/D,IAAA,MAAMC,eAAeJ,YACjBC,GAAAA,iBAAAA,CAAOI,SAAS,CAACpB,gBAAAA,IAAoB,IAAIe,YACzC,CAAA,GAAA,KAAA;AAEJ,IAAA,qBACEM,eAACC,CAAAA,iBAAAA,EAAAA;QACCC,SAAU,EAAA,QAAA;QACVC,cAAe,EAAA,eAAA;QACfC,UAAY,EAAA,CAAA;QACZC,YAAc,EAAA,CAAA;QACdC,aAAe,EAAA,CAAA;QACfC,WAAa,EAAA,CAAA;QACbC,SAAS,EAAA,IAAA;QACTC,UAAW,EAAA,UAAA;QACXC,MAAO,EAAA,aAAA;QACPC,MAAO,EAAA,MAAA;QACPC,UAAW,EAAA,QAAA;QACXC,aAAY,EAAA,kBAAA;;0BAEZb,eAACc,CAAAA,gBAAAA,EAAAA;;kCACCd,eAACC,CAAAA,iBAAAA,EAAAA;wBAAKC,SAAU,EAAA,KAAA;wBAAMC,cAAe,EAAA,eAAA;wBAAgBS,UAAW,EAAA,YAAA;;0CAC9DG,cAACD,CAAAA,gBAAAA,EAAAA;gCACCE,GAAI,EAAA,KAAA;gCACJC,GAAKrC,EAAAA,UAAAA,CAAWsC,IAAI,CAACC,GAAG;AACxBC,gCAAAA,GAAAA,EAAK,CAAC,EAAExC,UAAAA,CAAWyC,IAAI,CAAC,KAAK,CAAC;gCAC9Bb,SAAS,EAAA,IAAA;gCACTc,KAAO,EAAA,EAAA;gCACPX,MAAQ,EAAA;;0CAEVI,cAACQ,CAAAA,YAAAA,EAAAA;AACCC,gCAAAA,WAAAA,EAAa5C,WAAW4C,WAAW;AACnCC,gCAAAA,YAAAA,EAAc7C,WAAW6C,YAAY;gCACrC/C,cAAgBA,EAAAA;;;;kCAGpBqC,cAACD,CAAAA,gBAAAA,EAAAA;wBAAIV,UAAY,EAAA,CAAA;AACf,wBAAA,QAAA,gBAAAW,cAAC3C,CAAAA,uBAAAA,EAAAA;4BAAW4C,GAAI,EAAA,IAAA;4BAAKU,OAAQ,EAAA,OAAA;AAC3B,4BAAA,QAAA,gBAAA1B,eAACC,CAAAA,iBAAAA,EAAAA;gCACCW,UAAW,EAAA,QAAA;AACXe,gCAAAA,GAAAA,EAAK/C,WAAWgD,SAAS,IAAI,CAAChD,UAAWiD,CAAAA,YAAY,GAAG,CAAI,GAAA,CAAA;;AAE3DjD,oCAAAA,UAAAA,CAAWyC,IAAI;AACfzC,oCAAAA,UAAAA,CAAWgD,SAAS,IAAI,CAAChD,UAAWiD,CAAAA,YAAY,kBAC/Cd,cAACe,CAAAA,oBAAAA,EAAAA;AACCC,wCAAAA,WAAAA,EAAalD,aAAc,CAAA;4CACzBO,EAAI,EAAA,qDAAA;4CACJC,cAAgB,EAAA;AAClB,yCAAA,CAAA;AAEA,wCAAA,QAAA,gBAAA0B,cAACiB,CAAAA,iBAAAA,EAAAA;4CAAYC,IAAK,EAAA;;;oCAGrBrD,UAAWiD,CAAAA,YAAY,kBACtBd,cAACe,CAAAA,oBAAAA,EAAAA;wCAAQC,WAAa5C,EAAAA,mBAAAA;AACpB,wCAAA,QAAA,gBAAA4B,cAACD,CAAAA,gBAAAA,EAAAA;4CACCE,GAAI,EAAA,KAAA;4CACJC,GAAKiB,EAAAA,cAAAA;4CACLd,GAAKjC,EAAAA,mBAAAA;4CACLmC,KAAO,EAAA,CAAA;4CACPX,MAAO,EAAA;;;;;;;kCAOnBI,cAACD,CAAAA,gBAAAA,EAAAA;wBAAIV,UAAY,EAAA,CAAA;AACf,wBAAA,QAAA,gBAAAW,cAAC7C,CAAAA,YAAAA,EAAAA;4BAAa8C,GAAI,EAAA,GAAA;4BAAIU,OAAQ,EAAA,OAAA;4BAAQS,SAAU,EAAA,YAAA;AAC7CvD,4BAAAA,QAAAA,EAAAA,UAAAA,CAAWmD;;;;;0BAKlB/B,eAACC,CAAAA,iBAAAA,EAAAA;gBAAK0B,GAAK,EAAA,CAAA;gBAAGS,KAAO,EAAA;oBAAEC,SAAW,EAAA;AAAW,iBAAA;gBAAGjC,UAAY,EAAA,CAAA;;kCAC1DW,cAACuB,CAAAA,uBAAAA,EAAAA;wBACCC,IAAK,EAAA,GAAA;wBACLC,IAAMlD,EAAAA,cAAAA;wBACNmD,UAAU,EAAA,IAAA;AACVC,wBAAAA,OAAAA,gBAAS3B,cAAC4B,CAAAA,kBAAAA,EAAAA,EAAAA,CAAAA;AACVC,wBAAAA,YAAAA,EAAY/D,aACV,CAAA;4BACEO,EAAI,EAAA,+CAAA;4BACJC,cAAgB,EAAA;yBAElB,EAAA;AAAEwD,4BAAAA,UAAAA,EAAYjE,WAAWyC;AAAK,yBAAA,CAAA;wBAEhCK,OAAQ,EAAA,UAAA;AACRoB,wBAAAA,OAAAA,EAAS,IAAM/D,UAAW,CAAA,oBAAA,CAAA;kCAEzBF,aAAc,CAAA;4BACbO,EAAI,EAAA,8CAAA;4BACJC,cAAgB,EAAA;AAClB,yBAAA;;kCAEF0B,cAACgC,CAAAA,mBAAAA,EAAAA;wBACCxE,WAAaA,EAAAA,WAAAA;wBACbE,mBAAqBA,EAAAA,mBAAAA;wBACrBqB,YAAcA,EAAAA,YAAAA;wBACdb,aAAeA,EAAAA,aAAAA;wBACfN,gBAAkBA,EAAAA,gBAAAA;AAClBqE,wBAAAA,oBAAAA,EAAsBpE,WAAWiB,aAAa;AAC9CgD,wBAAAA,UAAAA,EAAYjE,WAAWyC;;;;;;AAKjC;AAcA,MAAM0B,sBAAsB,CAAC,EAC3BxE,WAAW,EACXE,mBAAmB,EACnBqB,YAAY,EACZb,aAAa,EACbN,gBAAgB,EAChBqE,oBAAoB,EACpBH,UAAU,EACe,GAAA;IACzB,MAAM,EAAEI,kBAAkB,EAAE,GAAGC,6BAAAA,EAAAA;IAC/B,MAAM,EAAErE,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAC1B,MAAM,EAAEC,UAAU,EAAE,GAAGC,oBAAAA,EAAAA;IACvB,MAAM,EAAEmE,IAAI,EAAE,GAAGC,yBAAAA,EAAAA;AAEjB,IAAA,MAAMC,UAAa,GAAA,UAAA;QACjB,MAAMC,OAAAA,GAAU,MAAMH,IAAKlE,CAAAA,aAAAA,CAAAA;AAE3B,QAAA,IAAIqE,OAAS,EAAA;YACXvE,UAAW,CAAA,mBAAA,CAAA;YACXkE,kBAAmB,CAAA;gBACjBM,IAAM,EAAA,SAAA;AACNC,gBAAAA,OAAAA,EAAS3E,aAAc,CAAA;oBAAEO,EAAI,EAAA;AAAkD,iBAAA;AACjF,aAAA,CAAA;AACF;AACF,KAAA;;AAGA,IAAA,IAAIb,WAAa,EAAA;AACf,QAAA,qBACEyB,eAACC,CAAAA,iBAAAA,EAAAA;YAAK0B,GAAK,EAAA,CAAA;YAAGpB,WAAa,EAAA,CAAA;;8BACzBQ,cAAC0C,CAAAA,WAAAA,EAAAA;oBAAMnC,KAAM,EAAA,QAAA;oBAASX,MAAO,EAAA,QAAA;oBAAS+C,KAAM,EAAA;;8BAC5C3C,cAAC3C,CAAAA,uBAAAA,EAAAA;oBAAWsD,OAAQ,EAAA,OAAA;oBAAQS,SAAU,EAAA,YAAA;oBAAawB,UAAW,EAAA,MAAA;8BAC3D9E,aAAc,CAAA;wBACbO,EAAI,EAAA,8CAAA;wBACJC,cAAgB,EAAA;AAClB,qBAAA;;;;AAIR;;IAGA,IAAIZ,mBAAAA,IAAuBqB,iBAAiB,KAAO,EAAA;AACjD,QAAA,qBACEiB,cAAC6C,CAAAA,UAAAA,EAAAA;YACCjF,gBAAkBA,EAAAA,gBAAAA;YAClBqE,oBAAsBA,EAAAA,oBAAAA;YACtBK,UAAYA,EAAAA,UAAAA;YACZR,UAAYA,EAAAA;;AAGlB;;IAGA,OAAO,IAAA;AACT,CAAA;AAYA,MAAMe,UAAAA,GAAa,CAAC,EAClBZ,oBAAoB,EACpBrE,gBAAgB,EAChB0E,UAAU,EACVR,UAAU,EACM,GAAA;IAChB,MAAM,EAAEhE,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAC1B,MAAMY,YAAAA,GAAeC,iBAAOC,CAAAA,UAAU,CAACoD,oBAAAA,CAAAA;AACvC,IAAA,MAAMlD,eAAeH,iBAAOI,CAAAA,SAAS,CAACpB,gBAAAA,IAAoB,IAAIe,YAAgB,IAAA,EAAA,CAAA;AAE9E,IAAA,MAAMmE,iBAAiBhF,aAAc,CAAA;QACnCO,EAAI,EAAA,yCAAA;QACJC,cAAgB,EAAA;AAClB,KAAA,CAAA;;AAGA,IAAA,IAAIV,gBAAkB,EAAA;QACpB,IAAI,CAACe,YAAgB,IAAA,CAACI,YAAc,EAAA;AAClC,YAAA,qBACEiB,cAACe,CAAAA,oBAAAA,EAAAA;AACCjB,gBAAAA,aAAAA,EAAa,CAAC,QAAQ,EAAEgC,UAAAA,CAAW,CAAC;AACpCiB,gBAAAA,KAAAA,EAAOjF,aACL,CAAA;oBACEO,EAAI,EAAA,4CAAA;oBACJC,cACE,EAAA;iBAEJ,EAAA;AACEV,oBAAAA,gBAAAA;AACAe,oBAAAA;AACF,iBAAA,CAAA;AAGF,gBAAA,QAAA,gBAAAqB,cAACgD,CAAAA,MAAAA,EAAAA;AACC,oBAAA,QAAA,gBAAAhD,cAACiD,CAAAA,mBAAAA,EAAAA;wBACCzB,IAAK,EAAA,GAAA;AACL0B,wBAAAA,SAAAA,gBAAWlD,cAACmD,CAAAA,eAAAA,EAAAA,EAAAA,CAAAA;wBACZxC,OAAQ,EAAA,WAAA;wBACRoB,OAASO,EAAAA,UAAAA;AACTc,wBAAAA,QAAAA,EAAU,CAACrE,YAAAA;AAEV+D,wBAAAA,QAAAA,EAAAA;;;;AAKX;AACF;AAEA,IAAA,qBACE9C,cAACiD,CAAAA,mBAAAA,EAAAA;QAAOzB,IAAK,EAAA,GAAA;AAAI0B,QAAAA,SAAAA,gBAAWlD,cAACmD,CAAAA,eAAAA,EAAAA,EAAAA,CAAAA;QAAcxC,OAAQ,EAAA,WAAA;QAAYoB,OAASO,EAAAA,UAAAA;AACrEQ,QAAAA,QAAAA,EAAAA;;AAGP,CAAA;AAYA,MAAMtC,YAAAA,GAAe,CAAC,EAAEC,WAAc,GAAA,CAAC,EAAEC,YAAe,GAAA,CAAC,EAAE/C,cAAc,EAAqB,GAAA;IAC5F,MAAM,EAAEG,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAE1B,IAAA,qBACEkB,eAACC,CAAAA,iBAAAA,EAAAA;QAAK0B,GAAK,EAAA,CAAA;;AACR,YAAA,CAAC,CAACH,WACD,kBAAAxB,eAAA,CAAAoE,mBAAA,EAAA;;kCACErD,cAACsD,CAAAA,cAAAA,EAAAA;wBAAO1D,MAAO,EAAA,QAAA;wBAASW,KAAM,EAAA,QAAA;wBAASgD,aAAW,EAAA;;kCAClDvD,cAACwD,CAAAA,UAAAA,EAAAA;wBAAK5D,MAAO,EAAA,QAAA;wBAASW,KAAM,EAAA,QAAA;wBAASW,IAAK,EAAA,YAAA;wBAAaqC,aAAW,EAAA;;kCAClEvD,cAACyD,CAAAA,GAAAA,EAAAA;AACC5B,wBAAAA,YAAAA,EAAY/D,aACV,CAAA;AACEO,4BAAAA,EAAAA,EAAI,CAAC,4BAA4B,EAAEV,cAAAA,CAAe,YAAY,CAAC;4BAC/DW,cAAgB,EAAA,CAAC,iDAAiD;yBAEpE,EAAA;4BACEoF,UAAYjD,EAAAA,WAAAA;4BACZkD,OAAShG,EAAAA;AACX,yBAAA,CAAA;AAGF,wBAAA,QAAA,gBAAAqC,cAAC3C,CAAAA,uBAAAA,EAAAA;4BAAWsD,OAAQ,EAAA,IAAA;4BAAKS,SAAU,EAAA,YAAA;AAChCX,4BAAAA,QAAAA,EAAAA;;;kCAGLT,cAAC4D,CAAAA,eAAAA,EAAAA,EAAAA;;;0BAGL5D,cAAC6D,CAAAA,cAAAA,EAAAA;gBAASjE,MAAO,EAAA,QAAA;gBAASW,KAAM,EAAA,QAAA;gBAASgD,aAAW,EAAA;;0BACpDvD,cAACyD,CAAAA,GAAAA,EAAAA;AACC5B,gBAAAA,YAAAA,EAAY/D,aACV,CAAA;AACEO,oBAAAA,EAAAA,EAAI,CAAC,4BAA4B,EAAEV,cAAAA,CAAe,UAAU,CAAC;oBAC7DW,cAAgB,EAAA,CAAC,oDAAoD;iBAEvE,EAAA;oBACEwF,cAAgBpD,EAAAA,YAAAA;oBAChBiD,OAAShG,EAAAA;AACX,iBAAA,CAAA;AAGF,gBAAA,QAAA,gBAAAqC,cAAC3C,CAAAA,uBAAAA,EAAAA;oBAAWsD,OAAQ,EAAA,IAAA;oBAAKS,SAAU,EAAA,YAAA;AAChCV,oBAAAA,QAAAA,EAAAA;;;;;AAKX,CAAA;AAEA,MAAMkD,eAAAA,GAAkBxG,aAAO2G,CAAAA,oBAAAA,CAAQ;;;AAGvC,CAAC;;;;"}

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,11 +5,11 @@ 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 StyledBadge = styledComponents.styled(designSystem.Badge)`
+const StyledBadge = styled.styled(designSystem.Badge)`
   border-radius: 50%;
   padding: ${({ theme })=>theme.spaces[2]};
   height: 2rem;
@@ -63,7 +63,7 @@ const SettingsNav = ({ menu })=>{
                                 endAction: /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
                                     children: [
                                         link?.licenseOnly && /*#__PURE__*/ jsxRuntime.jsx(icons.Lightning, {
-                                            fill: "warning500",
+                                            fill: "primary600",
                                             width: "1.5rem",
                                             height: "1.5rem"
                                         }),

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 { 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=\"warning500\" 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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"}
+{"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

@@ -61,7 +61,7 @@ const SettingsNav = ({ menu })=>{
                                 endAction: /*#__PURE__*/ jsxs(Fragment, {
                                     children: [
                                         link?.licenseOnly && /*#__PURE__*/ jsx(Lightning, {
-                                            fill: "warning500",
+                                            fill: "primary600",
                                             width: "1.5rem",
                                             height: "1.5rem"
                                         }),

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

@@ -1 +1 @@
-{"version":3,"file":"SettingsNav.mjs","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=\"warning500\" 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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"}
+{"version":3,"file":"SettingsNav.mjs","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":";;;;;;;;;AAcA,MAAMA,WAAAA,GAAcC,MAAOC,CAAAA,KAAAA,CAAM;;WAEtB,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;AAE5C,CAAC;AAED,MAAMC,WAAc,GAAA,CAAC,EAAEC,IAAI,EAAoB,GAAA;IAC7C,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAC1B,MAAM,EAAEC,UAAU,EAAE,GAAGC,WAAAA,EAAAA;IACvB,MAAM,EAAEC,QAAQ,EAAE,GAAGC,WAAAA,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;IAEA,qBACEG,IAAA,CAACC,OAAOC,IAAI,EAAA;QAACC,YAAYT,EAAAA,KAAAA;;AACvB,0BAAAU,GAAA,CAACH,OAAOI,MAAM,EAAA;gBAACX,KAAOA,EAAAA;;0BACtBU,GAACE,CAAAA,OAAAA,EAAAA;gBAAQC,UAAW,EAAA,YAAA;gBAAaC,YAAc,EAAA;;AAC/C,0BAAAJ,GAAA,CAACH,OAAOQ,QAAQ,EAAA;AACbrB,gBAAAA,QAAAA,EAAAA,QAAAA,CAASC,GAAG,CAAC,CAACN,OACb,iBAAAqB,GAAA,CAACH,OAAOS,OAAO,EAAA;wBAAkBhB,KAAOnB,EAAAA,aAAAA,CAAcQ,QAAQQ,SAAS,CAAA;AACpER,wBAAAA,QAAAA,EAAAA,OAAAA,CAAQC,KAAK,CAACK,GAAG,CAAC,CAACH,IAAAA,GAAAA;4BAClB,qBACEkB,GAAA,CAACH,OAAOU,IAAI,EAAA;AACVZ,gCAAAA,EAAAA,EAAIb,KAAKa,EAAE;gCACXa,OAAShB,EAAAA,iBAAAA,CAAkBV,KAAKa,EAAE,CAAA;gCAElCL,KAAOnB,EAAAA,aAAAA,CAAcW,KAAKK,SAAS,CAAA;gCACnCsB,SACE,gBAAAb,IAAA,CAAAc,QAAA,EAAA;;AACG5B,wCAAAA,IAAAA,EAAM6B,6BACLX,GAACY,CAAAA,SAAAA,EAAAA;4CAAUC,IAAK,EAAA,YAAA;4CAAaC,KAAM,EAAA,QAAA;4CAASC,MAAO,EAAA;;AAEpDjC,wCAAAA,IAAAA,EAAMkC,iCACLhB,GAACpC,CAAAA,WAAAA,EAAAA;4CACCmC,YAAW,EAAA,cAAA;4CACXkB,eAAgB,EAAA,YAAA;4CAChBC,SAAU,EAAA,UAAA;AACX,4CAAA,QAAA,EAAA;;;;AAZFpC,6BAAAA,EAAAA,IAAAA,CAAKO,EAAE,CAAA;AAoBlB,yBAAA;AA1BmBV,qBAAAA,EAAAA,OAAAA,CAAQU,EAAE,CAAA;;;;AAgCzC;;;;"}

package/dist/admin/admin/src/pages/Settings/components/Tokens/Table.js

@@ -6,7 +6,7 @@ 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 ConfirmDialog = require('../../../../components/ConfirmDialog.js');
 var RelativeTime = require('../../../../components/RelativeTime.js');
 var Table$1 = require('../../../../components/Table.js');
@@ -146,7 +146,7 @@ const DefaultButton = ({ tokenName, tokenId, buttonType = 'edit', children })=>{
         children: children
     });
 };
-const LinkButtonStyled = styledComponents.styled(designSystem.LinkButton)`
+const LinkButtonStyled = styled.styled(designSystem.LinkButton)`
   padding: 0.7rem;
 
   & > span {

package/dist/admin/admin/src/pages/Settings/components/Tokens/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../../../../../../admin/src/pages/Settings/components/Tokens/Table.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Box,\n  Flex,\n  IconButton,\n  Typography,\n  useCollator,\n  Dialog,\n  LinkButton,\n} from '@strapi/design-system';\nimport { Pencil, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { NavLink, useNavigate } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { ApiToken } from '../../../../../../shared/contracts/api-token';\nimport { SanitizedTransferToken } from '../../../../../../shared/contracts/transfer';\nimport { ConfirmDialog } from '../../../../components/ConfirmDialog';\nimport { RelativeTime } from '../../../../components/RelativeTime';\nimport { Table as TableImpl } from '../../../../components/Table';\nimport { useTracking } from '../../../../features/Tracking';\nimport { useQueryParams } from '../../../../hooks/useQueryParams';\n\nimport type { Data } from '@strapi/types';\n\n/* -------------------------------------------------------------------------------------------------\n * Table\n * -----------------------------------------------------------------------------------------------*/\n\ninterface TableProps\n  extends Pick<TableImpl.Props<SanitizedTransferToken | ApiToken>, 'headers' | 'isLoading'> {\n  onConfirmDelete: (id: Data.ID) => void;\n  permissions: {\n    canRead: boolean;\n    canDelete: boolean;\n    canUpdate: boolean;\n  };\n  tokens: SanitizedTransferToken[] | ApiToken[];\n  tokenType: 'api-token' | 'transfer-token';\n}\n\nconst Table = ({\n  permissions,\n  headers = [],\n  isLoading = false,\n  tokens = [],\n  onConfirmDelete,\n  tokenType,\n}: TableProps) => {\n  const [{ query }] = useQueryParams<{ sort?: string }>();\n  const { formatMessage, locale } = useIntl();\n  const [, sortOrder] = query && query.sort ? query.sort.split(':') : [undefined, 'ASC'];\n  const navigate = useNavigate();\n  const { trackUsage } = useTracking();\n  const formatter = useCollator(locale);\n\n  const sortedTokens = [...tokens].sort((a, b) => {\n    return sortOrder === 'DESC'\n      ? formatter.compare(b.name, a.name)\n      : formatter.compare(a.name, b.name);\n  });\n\n  const { canDelete, canUpdate, canRead } = permissions;\n\n  const handleRowClick = (id: Data.ID) => () => {\n    if (canRead) {\n      trackUsage('willEditTokenFromList', {\n        tokenType,\n      });\n      navigate(id.toString());\n    }\n  };\n\n  return (\n    <TableImpl.Root headers={headers} rows={sortedTokens} isLoading={isLoading}>\n      <TableImpl.Content>\n        <TableImpl.Head>\n          {headers.map((header) => (\n            <TableImpl.HeaderCell key={header.name} {...header} />\n          ))}\n        </TableImpl.Head>\n        <TableImpl.Empty />\n        <TableImpl.Loading />\n        <TableImpl.Body>\n          {sortedTokens.map((token) => (\n            <TableImpl.Row key={token.id} onClick={handleRowClick(token.id)}>\n              <TableImpl.Cell maxWidth=\"25rem\">\n                <Typography textColor=\"neutral800\" fontWeight=\"bold\" ellipsis>\n                  {token.name}\n                </Typography>\n              </TableImpl.Cell>\n              <TableImpl.Cell maxWidth=\"25rem\">\n                <Typography textColor=\"neutral800\" ellipsis>\n                  {token.description}\n                </Typography>\n              </TableImpl.Cell>\n              <TableImpl.Cell>\n                <Typography textColor=\"neutral800\">\n                  {/* @ts-expect-error One of the tokens doesn't have createdAt */}\n                  <RelativeTime timestamp={new Date(token.createdAt)} />\n                </Typography>\n              </TableImpl.Cell>\n              <TableImpl.Cell>\n                {token.lastUsedAt && (\n                  <Typography textColor=\"neutral800\">\n                    <RelativeTime\n                      timestamp={new Date(token.lastUsedAt)}\n                      customIntervals={[\n                        {\n                          unit: 'hours',\n                          threshold: 1,\n                          text: formatMessage({\n                            id: 'Settings.apiTokens.lastHour',\n                            defaultMessage: 'last hour',\n                          }),\n                        },\n                      ]}\n                    />\n                  </Typography>\n                )}\n              </TableImpl.Cell>\n              {canUpdate || canRead || canDelete ? (\n                <TableImpl.Cell>\n                  <Flex justifyContent=\"end\">\n                    {canUpdate && <UpdateButton tokenName={token.name} tokenId={token.id} />}\n                    {canDelete && (\n                      <DeleteButton\n                        tokenName={token.name}\n                        onClickDelete={() => onConfirmDelete?.(token.id)}\n                        tokenType={tokenType}\n                      />\n                    )}\n                  </Flex>\n                </TableImpl.Cell>\n              ) : null}\n            </TableImpl.Row>\n          ))}\n        </TableImpl.Body>\n      </TableImpl.Content>\n    </TableImpl.Root>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * CRUD Buttons\n * -----------------------------------------------------------------------------------------------*/\n\nconst MESSAGES_MAP = {\n  edit: {\n    id: 'app.component.table.edit',\n    defaultMessage: 'Edit {target}',\n  },\n  read: {\n    id: 'app.component.table.read',\n    defaultMessage: 'Read {target}',\n  },\n};\n\ninterface DefaultButtonProps {\n  tokenName: string;\n  tokenId: Data.ID;\n  buttonType?: 'edit' | 'read';\n  children: React.ReactNode;\n}\n\nconst DefaultButton = ({\n  tokenName,\n  tokenId,\n  buttonType = 'edit',\n  children,\n}: DefaultButtonProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <LinkButtonStyled\n      tag={NavLink}\n      to={tokenId.toString()}\n      onClick={(e: React.MouseEvent) => e.stopPropagation()}\n      title={formatMessage(MESSAGES_MAP[buttonType], { target: tokenName })}\n      variant=\"ghost\"\n      size=\"S\"\n    >\n      {children}\n    </LinkButtonStyled>\n  );\n};\n\nconst LinkButtonStyled = styled(LinkButton)`\n  padding: 0.7rem;\n\n  & > span {\n    display: flex;\n  }\n`;\n\ninterface DeleteButtonProps extends Pick<ButtonProps, 'tokenName'>, Pick<TableProps, 'tokenType'> {\n  onClickDelete: () => void;\n}\n\nconst DeleteButton = ({ tokenName, onClickDelete, tokenType }: DeleteButtonProps) => {\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n  const handleClickDelete = () => {\n    trackUsage('willDeleteToken', {\n      tokenType,\n    });\n    onClickDelete();\n  };\n\n  return (\n    <Dialog.Root>\n      <Box<'div'> paddingLeft={1} onClick={(e) => e.stopPropagation()}>\n        <Dialog.Trigger>\n          <IconButton\n            label={formatMessage(\n              {\n                id: 'global.delete-target',\n                defaultMessage: 'Delete {target}',\n              },\n              { target: `${tokenName}` }\n            )}\n            name=\"delete\"\n            variant=\"ghost\"\n          >\n            <Trash />\n          </IconButton>\n        </Dialog.Trigger>\n        <ConfirmDialog onConfirm={handleClickDelete} />\n      </Box>\n    </Dialog.Root>\n  );\n};\n\ninterface ButtonProps {\n  tokenName: string;\n  tokenId: Data.ID;\n}\n\nconst UpdateButton = ({ tokenName, tokenId }: ButtonProps) => {\n  return (\n    <DefaultButton tokenName={tokenName} tokenId={tokenId}>\n      <Pencil />\n    </DefaultButton>\n  );\n};\n\nexport { Table };\nexport type { TableProps };\n"],"names":["Table","permissions","headers","isLoading","tokens","onConfirmDelete","tokenType","query","useQueryParams","formatMessage","locale","useIntl","sortOrder","sort","split","undefined","navigate","useNavigate","trackUsage","useTracking","formatter","useCollator","sortedTokens","a","b","compare","name","canDelete","canUpdate","canRead","handleRowClick","id","toString","_jsx","TableImpl","Root","rows","_jsxs","Content","Head","map","header","HeaderCell","Empty","Loading","Body","token","Row","onClick","Cell","maxWidth","Typography","textColor","fontWeight","ellipsis","description","RelativeTime","timestamp","Date","createdAt","lastUsedAt","customIntervals","unit","threshold","text","defaultMessage","Flex","justifyContent","UpdateButton","tokenName","tokenId","DeleteButton","onClickDelete","MESSAGES_MAP","edit","read","DefaultButton","buttonType","children","LinkButtonStyled","tag","NavLink","to","e","stopPropagation","title","target","variant","size","styled","LinkButton","handleClickDelete","Dialog","Box","paddingLeft","Trigger","IconButton","label","Trash","ConfirmDialog","onConfirm","Pencil"],"mappings":"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"}
+{"version":3,"file":"Table.js","sources":["../../../../../../../../admin/src/pages/Settings/components/Tokens/Table.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Box,\n  Flex,\n  IconButton,\n  Typography,\n  useCollator,\n  Dialog,\n  LinkButton,\n} from '@strapi/design-system';\nimport { Pencil, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { NavLink, useNavigate } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { ApiToken } from '../../../../../../shared/contracts/api-token';\nimport { SanitizedTransferToken } from '../../../../../../shared/contracts/transfer';\nimport { ConfirmDialog } from '../../../../components/ConfirmDialog';\nimport { RelativeTime } from '../../../../components/RelativeTime';\nimport { Table as TableImpl } from '../../../../components/Table';\nimport { useTracking } from '../../../../features/Tracking';\nimport { useQueryParams } from '../../../../hooks/useQueryParams';\n\nimport type { Data } from '@strapi/types';\n\n/* -------------------------------------------------------------------------------------------------\n * Table\n * -----------------------------------------------------------------------------------------------*/\n\ninterface TableProps\n  extends Pick<TableImpl.Props<SanitizedTransferToken | ApiToken>, 'headers' | 'isLoading'> {\n  onConfirmDelete: (id: Data.ID) => void;\n  permissions: {\n    canRead: boolean;\n    canDelete: boolean;\n    canUpdate: boolean;\n  };\n  tokens: SanitizedTransferToken[] | ApiToken[];\n  tokenType: 'api-token' | 'transfer-token';\n}\n\nconst Table = ({\n  permissions,\n  headers = [],\n  isLoading = false,\n  tokens = [],\n  onConfirmDelete,\n  tokenType,\n}: TableProps) => {\n  const [{ query }] = useQueryParams<{ sort?: string }>();\n  const { formatMessage, locale } = useIntl();\n  const [, sortOrder] = query && query.sort ? query.sort.split(':') : [undefined, 'ASC'];\n  const navigate = useNavigate();\n  const { trackUsage } = useTracking();\n  const formatter = useCollator(locale);\n\n  const sortedTokens = [...tokens].sort((a, b) => {\n    return sortOrder === 'DESC'\n      ? formatter.compare(b.name, a.name)\n      : formatter.compare(a.name, b.name);\n  });\n\n  const { canDelete, canUpdate, canRead } = permissions;\n\n  const handleRowClick = (id: Data.ID) => () => {\n    if (canRead) {\n      trackUsage('willEditTokenFromList', {\n        tokenType,\n      });\n      navigate(id.toString());\n    }\n  };\n\n  return (\n    <TableImpl.Root headers={headers} rows={sortedTokens} isLoading={isLoading}>\n      <TableImpl.Content>\n        <TableImpl.Head>\n          {headers.map((header) => (\n            <TableImpl.HeaderCell key={header.name} {...header} />\n          ))}\n        </TableImpl.Head>\n        <TableImpl.Empty />\n        <TableImpl.Loading />\n        <TableImpl.Body>\n          {sortedTokens.map((token) => (\n            <TableImpl.Row key={token.id} onClick={handleRowClick(token.id)}>\n              <TableImpl.Cell maxWidth=\"25rem\">\n                <Typography textColor=\"neutral800\" fontWeight=\"bold\" ellipsis>\n                  {token.name}\n                </Typography>\n              </TableImpl.Cell>\n              <TableImpl.Cell maxWidth=\"25rem\">\n                <Typography textColor=\"neutral800\" ellipsis>\n                  {token.description}\n                </Typography>\n              </TableImpl.Cell>\n              <TableImpl.Cell>\n                <Typography textColor=\"neutral800\">\n                  {/* @ts-expect-error One of the tokens doesn't have createdAt */}\n                  <RelativeTime timestamp={new Date(token.createdAt)} />\n                </Typography>\n              </TableImpl.Cell>\n              <TableImpl.Cell>\n                {token.lastUsedAt && (\n                  <Typography textColor=\"neutral800\">\n                    <RelativeTime\n                      timestamp={new Date(token.lastUsedAt)}\n                      customIntervals={[\n                        {\n                          unit: 'hours',\n                          threshold: 1,\n                          text: formatMessage({\n                            id: 'Settings.apiTokens.lastHour',\n                            defaultMessage: 'last hour',\n                          }),\n                        },\n                      ]}\n                    />\n                  </Typography>\n                )}\n              </TableImpl.Cell>\n              {canUpdate || canRead || canDelete ? (\n                <TableImpl.Cell>\n                  <Flex justifyContent=\"end\">\n                    {canUpdate && <UpdateButton tokenName={token.name} tokenId={token.id} />}\n                    {canDelete && (\n                      <DeleteButton\n                        tokenName={token.name}\n                        onClickDelete={() => onConfirmDelete?.(token.id)}\n                        tokenType={tokenType}\n                      />\n                    )}\n                  </Flex>\n                </TableImpl.Cell>\n              ) : null}\n            </TableImpl.Row>\n          ))}\n        </TableImpl.Body>\n      </TableImpl.Content>\n    </TableImpl.Root>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * CRUD Buttons\n * -----------------------------------------------------------------------------------------------*/\n\nconst MESSAGES_MAP = {\n  edit: {\n    id: 'app.component.table.edit',\n    defaultMessage: 'Edit {target}',\n  },\n  read: {\n    id: 'app.component.table.read',\n    defaultMessage: 'Read {target}',\n  },\n};\n\ninterface DefaultButtonProps {\n  tokenName: string;\n  tokenId: Data.ID;\n  buttonType?: 'edit' | 'read';\n  children: React.ReactNode;\n}\n\nconst DefaultButton = ({\n  tokenName,\n  tokenId,\n  buttonType = 'edit',\n  children,\n}: DefaultButtonProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <LinkButtonStyled\n      tag={NavLink}\n      to={tokenId.toString()}\n      onClick={(e: React.MouseEvent) => e.stopPropagation()}\n      title={formatMessage(MESSAGES_MAP[buttonType], { target: tokenName })}\n      variant=\"ghost\"\n      size=\"S\"\n    >\n      {children}\n    </LinkButtonStyled>\n  );\n};\n\nconst LinkButtonStyled = styled(LinkButton)`\n  padding: 0.7rem;\n\n  & > span {\n    display: flex;\n  }\n`;\n\ninterface DeleteButtonProps extends Pick<ButtonProps, 'tokenName'>, Pick<TableProps, 'tokenType'> {\n  onClickDelete: () => void;\n}\n\nconst DeleteButton = ({ tokenName, onClickDelete, tokenType }: DeleteButtonProps) => {\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n  const handleClickDelete = () => {\n    trackUsage('willDeleteToken', {\n      tokenType,\n    });\n    onClickDelete();\n  };\n\n  return (\n    <Dialog.Root>\n      <Box<'div'> paddingLeft={1} onClick={(e) => e.stopPropagation()}>\n        <Dialog.Trigger>\n          <IconButton\n            label={formatMessage(\n              {\n                id: 'global.delete-target',\n                defaultMessage: 'Delete {target}',\n              },\n              { target: `${tokenName}` }\n            )}\n            name=\"delete\"\n            variant=\"ghost\"\n          >\n            <Trash />\n          </IconButton>\n        </Dialog.Trigger>\n        <ConfirmDialog onConfirm={handleClickDelete} />\n      </Box>\n    </Dialog.Root>\n  );\n};\n\ninterface ButtonProps {\n  tokenName: string;\n  tokenId: Data.ID;\n}\n\nconst UpdateButton = ({ tokenName, tokenId }: ButtonProps) => {\n  return (\n    <DefaultButton tokenName={tokenName} tokenId={tokenId}>\n      <Pencil />\n    </DefaultButton>\n  );\n};\n\nexport { Table };\nexport type { TableProps };\n"],"names":["Table","permissions","headers","isLoading","tokens","onConfirmDelete","tokenType","query","useQueryParams","formatMessage","locale","useIntl","sortOrder","sort","split","undefined","navigate","useNavigate","trackUsage","useTracking","formatter","useCollator","sortedTokens","a","b","compare","name","canDelete","canUpdate","canRead","handleRowClick","id","toString","_jsx","TableImpl","Root","rows","_jsxs","Content","Head","map","header","HeaderCell","Empty","Loading","Body","token","Row","onClick","Cell","maxWidth","Typography","textColor","fontWeight","ellipsis","description","RelativeTime","timestamp","Date","createdAt","lastUsedAt","customIntervals","unit","threshold","text","defaultMessage","Flex","justifyContent","UpdateButton","tokenName","tokenId","DeleteButton","onClickDelete","MESSAGES_MAP","edit","read","DefaultButton","buttonType","children","LinkButtonStyled","tag","NavLink","to","e","stopPropagation","title","target","variant","size","styled","LinkButton","handleClickDelete","Dialog","Box","paddingLeft","Trigger","IconButton","label","Trash","ConfirmDialog","onConfirm","Pencil"],"mappings":"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"}

package/dist/admin/admin/src/pages/Settings/pages/ApiTokens/EditView/components/BoundRoute.js

@@ -5,7 +5,7 @@ var designSystem = require('@strapi/design-system');
 var map = require('lodash/map');
 var tail = require('lodash/tail');
 var reactIntl = require('react-intl');
-var styledComponents = require('styled-components');
+var styled = require('styled-components');
 
 const getMethodColor = (verb)=>{
     switch(verb){
@@ -51,7 +51,7 @@ const getMethodColor = (verb)=>{
             }
     }
 };
-const MethodBox = styledComponents.styled(designSystem.Box)`
+const MethodBox = styled.styled(designSystem.Box)`
   margin: -1px;
   border-radius: ${({ theme })=>theme.spaces[1]} 0 0 ${({ theme })=>theme.spaces[1]};
 `;

package/dist/admin/admin/src/pages/Settings/pages/ApiTokens/EditView/components/BoundRoute.js.map

@@ -1 +1 @@
-{"version":3,"file":"BoundRoute.js","sources":["../../../../../../../../../../admin/src/pages/Settings/pages/ApiTokens/EditView/components/BoundRoute.tsx"],"sourcesContent":["import { Box, BoxComponent, Flex, Typography } from '@strapi/design-system';\nimport map from 'lodash/map';\nimport tail from 'lodash/tail';\nimport { useIntl } from 'react-intl';\nimport { styled, DefaultTheme } from 'styled-components';\n\ntype HttpVerb = 'POST' | 'GET' | 'PUT' | 'DELETE';\n\ntype MethodColor = {\n  text: keyof DefaultTheme['colors'];\n  border: keyof DefaultTheme['colors'];\n  background: keyof DefaultTheme['colors'];\n};\n\nconst getMethodColor = (verb: HttpVerb): MethodColor => {\n  switch (verb) {\n    case 'POST': {\n      return {\n        text: 'success600',\n        border: 'success200',\n        background: 'success100',\n      };\n    }\n    case 'GET': {\n      return {\n        text: 'secondary600',\n        border: 'secondary200',\n        background: 'secondary100',\n      };\n    }\n    case 'PUT': {\n      return {\n        text: 'warning600',\n        border: 'warning200',\n        background: 'warning100',\n      };\n    }\n    case 'DELETE': {\n      return {\n        text: 'danger600',\n        border: 'danger200',\n        background: 'danger100',\n      };\n    }\n    default: {\n      return {\n        text: 'neutral600',\n        border: 'neutral200',\n        background: 'neutral100',\n      };\n    }\n  }\n};\n\nconst MethodBox = styled<BoxComponent>(Box)`\n  margin: -1px;\n  border-radius: ${({ theme }) => theme.spaces[1]} 0 0 ${({ theme }) => theme.spaces[1]};\n`;\n\ninterface BoundRouteProps {\n  route: {\n    handler: string;\n    method: HttpVerb;\n    path: string;\n  };\n}\n\nexport const BoundRoute = ({\n  route = {\n    handler: 'Nocontroller.error',\n    method: 'GET',\n    path: '/there-is-no-path',\n  },\n}: BoundRouteProps) => {\n  const { formatMessage } = useIntl();\n\n  const { method, handler: title, path } = route;\n  const formattedRoute = path ? tail(path.split('/')) : [];\n  const [controller = '', action = ''] = title ? title.split('.') : [];\n  const colors = getMethodColor(route.method);\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={2}>\n      <Typography variant=\"delta\" tag=\"h3\">\n        {formatMessage({\n          id: 'Settings.apiTokens.createPage.BoundRoute.title',\n          defaultMessage: 'Bound route to',\n        })}\n        &nbsp;\n        <span>{controller}</span>\n        <Typography variant=\"delta\" textColor=\"primary600\">\n          .{action}\n        </Typography>\n      </Typography>\n      <Flex hasRadius background=\"neutral0\" borderColor=\"neutral200\" gap={0}>\n        <MethodBox background={colors.background} borderColor={colors.border} padding={2}>\n          <Typography fontWeight=\"bold\" textColor={colors.text}>\n            {method}\n          </Typography>\n        </MethodBox>\n        <Box paddingLeft={2} paddingRight={2}>\n          {map(formattedRoute, (value) => (\n            <Typography key={value} textColor={value.includes(':') ? 'neutral600' : 'neutral900'}>\n              /{value}\n            </Typography>\n          ))}\n        </Box>\n      </Flex>\n    </Flex>\n  );\n};\n"],"names":["getMethodColor","verb","text","border","background","MethodBox","styled","Box","theme","spaces","BoundRoute","route","handler","method","path","formatMessage","useIntl","title","formattedRoute","tail","split","controller","action","colors","_jsxs","Flex","direction","alignItems","gap","Typography","variant","tag","id","defaultMessage","_jsx","span","textColor","hasRadius","borderColor","padding","fontWeight","paddingLeft","paddingRight","map","value","includes"],"mappings":"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"}
+{"version":3,"file":"BoundRoute.js","sources":["../../../../../../../../../../admin/src/pages/Settings/pages/ApiTokens/EditView/components/BoundRoute.tsx"],"sourcesContent":["import { Box, BoxComponent, Flex, Typography } from '@strapi/design-system';\nimport map from 'lodash/map';\nimport tail from 'lodash/tail';\nimport { useIntl } from 'react-intl';\nimport { styled, DefaultTheme } from 'styled-components';\n\ntype HttpVerb = 'POST' | 'GET' | 'PUT' | 'DELETE';\n\ntype MethodColor = {\n  text: keyof DefaultTheme['colors'];\n  border: keyof DefaultTheme['colors'];\n  background: keyof DefaultTheme['colors'];\n};\n\nconst getMethodColor = (verb: HttpVerb): MethodColor => {\n  switch (verb) {\n    case 'POST': {\n      return {\n        text: 'success600',\n        border: 'success200',\n        background: 'success100',\n      };\n    }\n    case 'GET': {\n      return {\n        text: 'secondary600',\n        border: 'secondary200',\n        background: 'secondary100',\n      };\n    }\n    case 'PUT': {\n      return {\n        text: 'warning600',\n        border: 'warning200',\n        background: 'warning100',\n      };\n    }\n    case 'DELETE': {\n      return {\n        text: 'danger600',\n        border: 'danger200',\n        background: 'danger100',\n      };\n    }\n    default: {\n      return {\n        text: 'neutral600',\n        border: 'neutral200',\n        background: 'neutral100',\n      };\n    }\n  }\n};\n\nconst MethodBox = styled<BoxComponent>(Box)`\n  margin: -1px;\n  border-radius: ${({ theme }) => theme.spaces[1]} 0 0 ${({ theme }) => theme.spaces[1]};\n`;\n\ninterface BoundRouteProps {\n  route: {\n    handler: string;\n    method: HttpVerb;\n    path: string;\n  };\n}\n\nexport const BoundRoute = ({\n  route = {\n    handler: 'Nocontroller.error',\n    method: 'GET',\n    path: '/there-is-no-path',\n  },\n}: BoundRouteProps) => {\n  const { formatMessage } = useIntl();\n\n  const { method, handler: title, path } = route;\n  const formattedRoute = path ? tail(path.split('/')) : [];\n  const [controller = '', action = ''] = title ? title.split('.') : [];\n  const colors = getMethodColor(route.method);\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={2}>\n      <Typography variant=\"delta\" tag=\"h3\">\n        {formatMessage({\n          id: 'Settings.apiTokens.createPage.BoundRoute.title',\n          defaultMessage: 'Bound route to',\n        })}\n        &nbsp;\n        <span>{controller}</span>\n        <Typography variant=\"delta\" textColor=\"primary600\">\n          .{action}\n        </Typography>\n      </Typography>\n      <Flex hasRadius background=\"neutral0\" borderColor=\"neutral200\" gap={0}>\n        <MethodBox background={colors.background} borderColor={colors.border} padding={2}>\n          <Typography fontWeight=\"bold\" textColor={colors.text}>\n            {method}\n          </Typography>\n        </MethodBox>\n        <Box paddingLeft={2} paddingRight={2}>\n          {map(formattedRoute, (value) => (\n            <Typography key={value} textColor={value.includes(':') ? 'neutral600' : 'neutral900'}>\n              /{value}\n            </Typography>\n          ))}\n        </Box>\n      </Flex>\n    </Flex>\n  );\n};\n"],"names":["getMethodColor","verb","text","border","background","MethodBox","styled","Box","theme","spaces","BoundRoute","route","handler","method","path","formatMessage","useIntl","title","formattedRoute","tail","split","controller","action","colors","_jsxs","Flex","direction","alignItems","gap","Typography","variant","tag","id","defaultMessage","_jsx","span","textColor","hasRadius","borderColor","padding","fontWeight","paddingLeft","paddingRight","map","value","includes"],"mappings":"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"}

package/dist/admin/admin/src/pages/Settings/pages/ApiTokens/EditView/components/CollapsableContentType.js

@@ -6,17 +6,17 @@ var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
 var capitalize = require('lodash/capitalize');
 var reactIntl = require('react-intl');
-var styledComponents = require('styled-components');
+var styled = require('styled-components');
 var apiTokenPermissions = require('../apiTokenPermissions.js');
 
-const activeCheckboxWrapperStyles = styledComponents.css`
+const activeCheckboxWrapperStyles = styled.css`
   background: ${(props)=>props.theme.colors.primary100};
 
   #cog {
     opacity: 1;
   }
 `;
-const CheckboxWrapper = styledComponents.styled(designSystem.Box)`
+const CheckboxWrapper = styled.styled(designSystem.Box)`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -34,7 +34,7 @@ const CheckboxWrapper = styledComponents.styled(designSystem.Box)`
     ${activeCheckboxWrapperStyles}
   }
 `;
-const Border = styledComponents.styled.div`
+const Border = styled.styled.div`
   flex: 1;
   align-self: center;
   border-top: 1px solid ${({ theme })=>theme.colors.neutral150};

package/dist/admin/admin/src/pages/Settings/pages/ApiTokens/EditView/components/CollapsableContentType.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsableContentType.js","sources":["../../../../../../../../../../admin/src/pages/Settings/pages/ApiTokens/EditView/components/CollapsableContentType.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Accordion,\n  Box,\n  BoxComponent,\n  Checkbox,\n  Flex,\n  Grid,\n  Typography,\n} from '@strapi/design-system';\nimport { Cog } from '@strapi/icons';\nimport capitalize from 'lodash/capitalize';\nimport { useIntl } from 'react-intl';\nimport { styled, css } from 'styled-components';\n\nimport { ContentApiPermission } from '../../../../../../../../shared/contracts/content-api/permissions';\nimport { useApiTokenPermissions } from '../apiTokenPermissions';\n\nconst activeCheckboxWrapperStyles = css`\n  background: ${(props) => props.theme.colors.primary100};\n\n  #cog {\n    opacity: 1;\n  }\n`;\n\nconst CheckboxWrapper = styled<BoxComponent>(Box)<{ $isActive: boolean }>`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  #cog {\n    opacity: 0;\n    path {\n      fill: ${(props) => props.theme.colors.primary600};\n    }\n  }\n\n  /* Show active style both on hover and when the action is selected */\n  ${(props) => props.$isActive && activeCheckboxWrapperStyles}\n  &:hover {\n    ${activeCheckboxWrapperStyles}\n  }\n`;\n\nconst Border = styled.div`\n  flex: 1;\n  align-self: center;\n  border-top: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\ninterface CollapsableContentTypeProps {\n  controllers?: ContentApiPermission['controllers'];\n  label: ContentApiPermission['label'];\n  orderNumber?: number;\n  disabled?: boolean;\n}\n\nexport const CollapsableContentType = ({\n  controllers = [],\n  label,\n  orderNumber = 0,\n  disabled = false,\n}: CollapsableContentTypeProps) => {\n  const {\n    value: { onChangeSelectAll, onChange, selectedActions, setSelectedAction, selectedAction },\n  } = useApiTokenPermissions();\n  const { formatMessage } = useIntl();\n\n  const isActionSelected = (actionId: string) => actionId === selectedAction;\n\n  return (\n    <Accordion.Item value={`${label}-${orderNumber}`}>\n      <Accordion.Header variant={orderNumber % 2 ? 'primary' : 'secondary'}>\n        <Accordion.Trigger>{capitalize(label)}</Accordion.Trigger>\n      </Accordion.Header>\n      <Accordion.Content>\n        {controllers?.map((controller) => {\n          const allActionsSelected = controller.actions.every((action) =>\n            selectedActions.includes(action.actionId)\n          );\n\n          const someActionsSelected = controller.actions.some((action) =>\n            selectedActions.includes(action.actionId)\n          );\n\n          return (\n            <Box key={`${label}.${controller?.controller}`}>\n              <Flex justifyContent=\"space-between\" alignItems=\"center\" padding={4}>\n                <Box paddingRight={4}>\n                  <Typography variant=\"sigma\" textColor=\"neutral600\">\n                    {controller?.controller}\n                  </Typography>\n                </Box>\n                <Border />\n                <Box paddingLeft={4}>\n                  <Checkbox\n                    checked={\n                      !allActionsSelected && someActionsSelected\n                        ? 'indeterminate'\n                        : allActionsSelected\n                    }\n                    onCheckedChange={() => {\n                      onChangeSelectAll({ target: { value: [...controller.actions] } });\n                    }}\n                    disabled={disabled}\n                  >\n                    {formatMessage({ id: 'app.utils.select-all', defaultMessage: 'Select all' })}\n                  </Checkbox>\n                </Box>\n              </Flex>\n              <Grid.Root gap={4} padding={4}>\n                {controller?.actions &&\n                  controller?.actions.map((action) => {\n                    return (\n                      <Grid.Item\n                        col={6}\n                        key={action.actionId}\n                        direction=\"column\"\n                        alignItems=\"stretch\"\n                      >\n                        <CheckboxWrapper\n                          $isActive={isActionSelected(action.actionId)}\n                          padding={2}\n                          hasRadius\n                        >\n                          <Checkbox\n                            checked={selectedActions.includes(action.actionId)}\n                            name={action.actionId}\n                            onCheckedChange={() => {\n                              onChange({ target: { value: action.actionId } });\n                            }}\n                            disabled={disabled}\n                          >\n                            {action.action}\n                          </Checkbox>\n                          <button\n                            type=\"button\"\n                            data-testid=\"action-cog\"\n                            onClick={() =>\n                              setSelectedAction({ target: { value: action.actionId } })\n                            }\n                            style={{ display: 'inline-flex', alignItems: 'center' }}\n                          >\n                            <Cog id=\"cog\" />\n                          </button>\n                        </CheckboxWrapper>\n                      </Grid.Item>\n                    );\n                  })}\n              </Grid.Root>\n            </Box>\n          );\n        })}\n      </Accordion.Content>\n    </Accordion.Item>\n  );\n};\n"],"names":["activeCheckboxWrapperStyles","css","props","theme","colors","primary100","CheckboxWrapper","styled","Box","primary600","$isActive","Border","div","neutral150","CollapsableContentType","controllers","label","orderNumber","disabled","value","onChangeSelectAll","onChange","selectedActions","setSelectedAction","selectedAction","useApiTokenPermissions","formatMessage","useIntl","isActionSelected","actionId","_jsxs","Accordion","Item","_jsx","Header","variant","Trigger","capitalize","Content","map","controller","allActionsSelected","actions","every","action","includes","someActionsSelected","some","Flex","justifyContent","alignItems","padding","paddingRight","Typography","textColor","paddingLeft","Checkbox","checked","onCheckedChange","target","id","defaultMessage","Grid","Root","gap","col","direction","hasRadius","name","button","type","data-testid","onClick","style","display","Cog"],"mappings":"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"}
+{"version":3,"file":"CollapsableContentType.js","sources":["../../../../../../../../../../admin/src/pages/Settings/pages/ApiTokens/EditView/components/CollapsableContentType.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Accordion,\n  Box,\n  BoxComponent,\n  Checkbox,\n  Flex,\n  Grid,\n  Typography,\n} from '@strapi/design-system';\nimport { Cog } from '@strapi/icons';\nimport capitalize from 'lodash/capitalize';\nimport { useIntl } from 'react-intl';\nimport { styled, css } from 'styled-components';\n\nimport { ContentApiPermission } from '../../../../../../../../shared/contracts/content-api/permissions';\nimport { useApiTokenPermissions } from '../apiTokenPermissions';\n\nconst activeCheckboxWrapperStyles = css`\n  background: ${(props) => props.theme.colors.primary100};\n\n  #cog {\n    opacity: 1;\n  }\n`;\n\nconst CheckboxWrapper = styled<BoxComponent>(Box)<{ $isActive: boolean }>`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  #cog {\n    opacity: 0;\n    path {\n      fill: ${(props) => props.theme.colors.primary600};\n    }\n  }\n\n  /* Show active style both on hover and when the action is selected */\n  ${(props) => props.$isActive && activeCheckboxWrapperStyles}\n  &:hover {\n    ${activeCheckboxWrapperStyles}\n  }\n`;\n\nconst Border = styled.div`\n  flex: 1;\n  align-self: center;\n  border-top: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\ninterface CollapsableContentTypeProps {\n  controllers?: ContentApiPermission['controllers'];\n  label: ContentApiPermission['label'];\n  orderNumber?: number;\n  disabled?: boolean;\n}\n\nexport const CollapsableContentType = ({\n  controllers = [],\n  label,\n  orderNumber = 0,\n  disabled = false,\n}: CollapsableContentTypeProps) => {\n  const {\n    value: { onChangeSelectAll, onChange, selectedActions, setSelectedAction, selectedAction },\n  } = useApiTokenPermissions();\n  const { formatMessage } = useIntl();\n\n  const isActionSelected = (actionId: string) => actionId === selectedAction;\n\n  return (\n    <Accordion.Item value={`${label}-${orderNumber}`}>\n      <Accordion.Header variant={orderNumber % 2 ? 'primary' : 'secondary'}>\n        <Accordion.Trigger>{capitalize(label)}</Accordion.Trigger>\n      </Accordion.Header>\n      <Accordion.Content>\n        {controllers?.map((controller) => {\n          const allActionsSelected = controller.actions.every((action) =>\n            selectedActions.includes(action.actionId)\n          );\n\n          const someActionsSelected = controller.actions.some((action) =>\n            selectedActions.includes(action.actionId)\n          );\n\n          return (\n            <Box key={`${label}.${controller?.controller}`}>\n              <Flex justifyContent=\"space-between\" alignItems=\"center\" padding={4}>\n                <Box paddingRight={4}>\n                  <Typography variant=\"sigma\" textColor=\"neutral600\">\n                    {controller?.controller}\n                  </Typography>\n                </Box>\n                <Border />\n                <Box paddingLeft={4}>\n                  <Checkbox\n                    checked={\n                      !allActionsSelected && someActionsSelected\n                        ? 'indeterminate'\n                        : allActionsSelected\n                    }\n                    onCheckedChange={() => {\n                      onChangeSelectAll({ target: { value: [...controller.actions] } });\n                    }}\n                    disabled={disabled}\n                  >\n                    {formatMessage({ id: 'app.utils.select-all', defaultMessage: 'Select all' })}\n                  </Checkbox>\n                </Box>\n              </Flex>\n              <Grid.Root gap={4} padding={4}>\n                {controller?.actions &&\n                  controller?.actions.map((action) => {\n                    return (\n                      <Grid.Item\n                        col={6}\n                        key={action.actionId}\n                        direction=\"column\"\n                        alignItems=\"stretch\"\n                      >\n                        <CheckboxWrapper\n                          $isActive={isActionSelected(action.actionId)}\n                          padding={2}\n                          hasRadius\n                        >\n                          <Checkbox\n                            checked={selectedActions.includes(action.actionId)}\n                            name={action.actionId}\n                            onCheckedChange={() => {\n                              onChange({ target: { value: action.actionId } });\n                            }}\n                            disabled={disabled}\n                          >\n                            {action.action}\n                          </Checkbox>\n                          <button\n                            type=\"button\"\n                            data-testid=\"action-cog\"\n                            onClick={() =>\n                              setSelectedAction({ target: { value: action.actionId } })\n                            }\n                            style={{ display: 'inline-flex', alignItems: 'center' }}\n                          >\n                            <Cog id=\"cog\" />\n                          </button>\n                        </CheckboxWrapper>\n                      </Grid.Item>\n                    );\n                  })}\n              </Grid.Root>\n            </Box>\n          );\n        })}\n      </Accordion.Content>\n    </Accordion.Item>\n  );\n};\n"],"names":["activeCheckboxWrapperStyles","css","props","theme","colors","primary100","CheckboxWrapper","styled","Box","primary600","$isActive","Border","div","neutral150","CollapsableContentType","controllers","label","orderNumber","disabled","value","onChangeSelectAll","onChange","selectedActions","setSelectedAction","selectedAction","useApiTokenPermissions","formatMessage","useIntl","isActionSelected","actionId","_jsxs","Accordion","Item","_jsx","Header","variant","Trigger","capitalize","Content","map","controller","allActionsSelected","actions","every","action","includes","someActionsSelected","some","Flex","justifyContent","alignItems","padding","paddingRight","Typography","textColor","paddingLeft","Checkbox","checked","onCheckedChange","target","id","defaultMessage","Grid","Root","gap","col","direction","hasRadius","name","button","type","data-testid","onClick","style","display","Cog"],"mappings":";;;;;;;;;;;AAmBA,MAAMA,2BAAAA,GAA8BC,UAAG;cACzB,EAAE,CAACC,QAAUA,KAAMC,CAAAA,KAAK,CAACC,MAAM,CAACC,UAAU,CAAC;;;;;AAKzD,CAAC;AAED,MAAMC,eAAAA,GAAkBC,aAAqBC,CAAAA,gBAAAA,CAA4B;;;;;;;;YAQ7D,EAAE,CAACN,QAAUA,KAAMC,CAAAA,KAAK,CAACC,MAAM,CAACK,UAAU,CAAC;;;;;AAKrD,EAAA,EAAE,CAACP,KAAAA,GAAUA,KAAMQ,CAAAA,SAAS,IAAIV,2BAA4B;;AAE1D,IAAA,EAAEA,2BAA4B;;AAElC,CAAC;AAED,MAAMW,MAAAA,GAASJ,aAAOK,CAAAA,GAAG;;;wBAGD,EAAE,CAAC,EAAET,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACS,UAAU,CAAC;AACjE,CAAC;AASYC,MAAAA,sBAAAA,GAAyB,CAAC,EACrCC,cAAc,EAAE,EAChBC,KAAK,EACLC,WAAc,GAAA,CAAC,EACfC,QAAAA,GAAW,KAAK,EACY,GAAA;AAC5B,IAAA,MAAM,EACJC,KAAAA,EAAO,EAAEC,iBAAiB,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,iBAAiB,EAAEC,cAAc,EAAE,EAC3F,GAAGC,0CAAAA,EAAAA;IACJ,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAE1B,MAAMC,gBAAAA,GAAmB,CAACC,QAAAA,GAAqBA,QAAaL,KAAAA,cAAAA;IAE5D,qBACEM,eAAA,CAACC,uBAAUC,IAAI,EAAA;AAACb,QAAAA,KAAAA,EAAO,CAAC,EAAEH,KAAAA,CAAM,CAAC,EAAEC,YAAY,CAAC;;AAC9C,0BAAAgB,cAAA,CAACF,uBAAUG,MAAM,EAAA;gBAACC,OAASlB,EAAAA,WAAAA,GAAc,IAAI,SAAY,GAAA,WAAA;wCACvDgB,cAAA,CAACF,uBAAUK,OAAO,EAAA;8BAAEC,UAAWrB,CAAAA,KAAAA;;;AAEjC,0BAAAiB,cAAA,CAACF,uBAAUO,OAAO,EAAA;AACfvB,gBAAAA,QAAAA,EAAAA,WAAAA,EAAawB,IAAI,CAACC,UAAAA,GAAAA;AACjB,oBAAA,MAAMC,kBAAqBD,GAAAA,UAAAA,CAAWE,OAAO,CAACC,KAAK,CAAC,CAACC,MAAAA,GACnDtB,eAAgBuB,CAAAA,QAAQ,CAACD,MAAAA,CAAOf,QAAQ,CAAA,CAAA;AAG1C,oBAAA,MAAMiB,mBAAsBN,GAAAA,UAAAA,CAAWE,OAAO,CAACK,IAAI,CAAC,CAACH,MAAAA,GACnDtB,eAAgBuB,CAAAA,QAAQ,CAACD,MAAAA,CAAOf,QAAQ,CAAA,CAAA;AAG1C,oBAAA,qBACEC,eAACtB,CAAAA,gBAAAA,EAAAA;;0CACCsB,eAACkB,CAAAA,iBAAAA,EAAAA;gCAAKC,cAAe,EAAA,eAAA;gCAAgBC,UAAW,EAAA,QAAA;gCAASC,OAAS,EAAA,CAAA;;kDAChElB,cAACzB,CAAAA,gBAAAA,EAAAA;wCAAI4C,YAAc,EAAA,CAAA;AACjB,wCAAA,QAAA,gBAAAnB,cAACoB,CAAAA,uBAAAA,EAAAA;4CAAWlB,OAAQ,EAAA,OAAA;4CAAQmB,SAAU,EAAA,YAAA;sDACnCd,UAAYA,EAAAA;;;kDAGjBP,cAACtB,CAAAA,MAAAA,EAAAA,EAAAA,CAAAA;kDACDsB,cAACzB,CAAAA,gBAAAA,EAAAA;wCAAI+C,WAAa,EAAA,CAAA;AAChB,wCAAA,QAAA,gBAAAtB,cAACuB,CAAAA,qBAAAA,EAAAA;4CACCC,OACE,EAAA,CAAChB,kBAAsBK,IAAAA,mBAAAA,GACnB,eACAL,GAAAA,kBAAAA;4CAENiB,eAAiB,EAAA,IAAA;gDACftC,iBAAkB,CAAA;oDAAEuC,MAAQ,EAAA;wDAAExC,KAAO,EAAA;AAAIqB,4DAAAA,GAAAA,UAAAA,CAAWE;AAAQ;AAAC;AAAE,iDAAA,CAAA;AACjE,6CAAA;4CACAxB,QAAUA,EAAAA,QAAAA;sDAETQ,aAAc,CAAA;gDAAEkC,EAAI,EAAA,sBAAA;gDAAwBC,cAAgB,EAAA;AAAa,6CAAA;;;;;AAIhF,0CAAA5B,cAAA,CAAC6B,kBAAKC,IAAI,EAAA;gCAACC,GAAK,EAAA,CAAA;gCAAGb,OAAS,EAAA,CAAA;AACzBX,gCAAAA,QAAAA,EAAAA,UAAAA,EAAYE,OACXF,IAAAA,UAAAA,EAAYE,OAAQH,CAAAA,GAAAA,CAAI,CAACK,MAAAA,GAAAA;oCACvB,qBACEX,cAAA,CAAC6B,kBAAK9B,IAAI,EAAA;wCACRiC,GAAK,EAAA,CAAA;wCAELC,SAAU,EAAA,QAAA;wCACVhB,UAAW,EAAA,SAAA;AAEX,wCAAA,QAAA,gBAAApB,eAACxB,CAAAA,eAAAA,EAAAA;4CACCI,SAAWkB,EAAAA,gBAAAA,CAAiBgB,OAAOf,QAAQ,CAAA;4CAC3CsB,OAAS,EAAA,CAAA;4CACTgB,SAAS,EAAA,IAAA;;8DAETlC,cAACuB,CAAAA,qBAAAA,EAAAA;AACCC,oDAAAA,OAAAA,EAASnC,eAAgBuB,CAAAA,QAAQ,CAACD,MAAAA,CAAOf,QAAQ,CAAA;AACjDuC,oDAAAA,IAAAA,EAAMxB,OAAOf,QAAQ;oDACrB6B,eAAiB,EAAA,IAAA;wDACfrC,QAAS,CAAA;4DAAEsC,MAAQ,EAAA;AAAExC,gEAAAA,KAAAA,EAAOyB,OAAOf;AAAS;AAAE,yDAAA,CAAA;AAChD,qDAAA;oDACAX,QAAUA,EAAAA,QAAAA;AAET0B,oDAAAA,QAAAA,EAAAA,MAAAA,CAAOA;;8DAEVX,cAACoC,CAAAA,QAAAA,EAAAA;oDACCC,IAAK,EAAA,QAAA;oDACLC,aAAY,EAAA,YAAA;AACZC,oDAAAA,OAAAA,EAAS,IACPjD,iBAAkB,CAAA;4DAAEoC,MAAQ,EAAA;AAAExC,gEAAAA,KAAAA,EAAOyB,OAAOf;AAAS;AAAE,yDAAA,CAAA;oDAEzD4C,KAAO,EAAA;wDAAEC,OAAS,EAAA,aAAA;wDAAexB,UAAY,EAAA;AAAS,qDAAA;AAEtD,oDAAA,QAAA,gBAAAjB,cAAC0C,CAAAA,SAAAA,EAAAA;wDAAIf,EAAG,EAAA;;;;;AA3BPhB,qCAAAA,EAAAA,MAAAA,CAAOf,QAAQ,CAAA;AAgC1B,iCAAA;;;AA9DI,qBAAA,EAAA,CAAC,EAAEb,KAAM,CAAA,CAAC,EAAEwB,UAAAA,EAAYA,WAAW,CAAC,CAAA;AAkElD,iBAAA;;;;AAIR;;;;"}

package/dist/admin/admin/src/pages/Settings/pages/ApplicationInfo/components/LogoInput.js

@@ -7,7 +7,7 @@ var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
 var axios = require('axios');
 var reactIntl = require('react-intl');
-var styledComponents = require('styled-components');
+var styled = require('styled-components');
 var constants = require('../utils/constants.js');
 var files = require('../utils/files.js');
 
@@ -410,7 +410,7 @@ const LogoInput = ({ canUpdate, customLogo, defaultLogo, hint, label, onChangeLo
         ]
     });
 };
-const FileInput = styledComponents.styled(designSystem.Field.Input)`
+const FileInput = styled.styled(designSystem.Field.Input)`
   opacity: 0;
   position: absolute;
   top: 0;