@strapi/admin 4.9.0-alpha.0 → 4.9.0-exp.90df253ba90fd6879eb56a720a1f80d04ff745b8

package/admin/src/pages/HomePage/HomeHeader.js

@@ -2,28 +2,21 @@ import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Typography } from '@strapi/design-system/Typography';
-import { Link } from '@strapi/design-system/v2/Link';
-import { Stack } from '@strapi/design-system/Stack';
-import { Box } from '@strapi/design-system/Box';
-import { Button } from '@strapi/design-system/Button';
-import ArrowRight from '@strapi/icons/ArrowRight';
+import { Typography, Box, Button, Flex } from '@strapi/design-system';
+import { Link } from '@strapi/design-system/v2';
+import { ArrowRight } from '@strapi/icons';
 
 const WordWrap = styled(Typography)`
   word-break: break-word;
 `;
 
-const StackCustom = styled(Stack)`
-  align-items: flex-start;
-`;
-
 const HomeHeader = ({ hasCreatedContentType, onCreateCT }) => {
   const { formatMessage } = useIntl();
 
   return (
     <div>
       <Box paddingLeft={6} paddingBottom={10}>
-        <StackCustom spacing={5}>
+        <Flex direction="column" alignItems="flex-start" gap={5}>
           <Typography as="h1" variant="alpha">
             {hasCreatedContentType
               ? formatMessage({
@@ -63,7 +56,7 @@ const HomeHeader = ({ hasCreatedContentType, onCreateCT }) => {
               })}
             </Button>
           )}
-        </StackCustom>
+        </Flex>
       </Box>
     </div>
   );

package/admin/src/pages/HomePage/SocialLinks.js

@@ -6,19 +6,10 @@
 import React from 'react';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { Typography } from '@strapi/design-system/Typography';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { LinkButton } from '@strapi/design-system/v2/LinkButton';
-import { Link } from '@strapi/design-system/v2/Link';
-import ExternalLink from '@strapi/icons/ExternalLink';
-import Github from '@strapi/icons/Github';
-import Discord from '@strapi/icons/Discord';
-import Reddit from '@strapi/icons/Reddit';
-import Strapi from '@strapi/icons/Strapi';
-import Twitter from '@strapi/icons/Twitter';
-import Discourse from '@strapi/icons/Discourse';
+import { useAppInfos } from '@strapi/helper-plugin';
+import { Typography, Box, Flex, Grid, GridItem } from '@strapi/design-system';
+import { Link, LinkButton } from '@strapi/design-system/v2';
+import { ExternalLink, Github, Discord, Reddit, Strapi, Twitter, Discourse } from '@strapi/icons';
 
 const StyledDiscord = styled(Discord)`
   path {
@@ -72,43 +63,46 @@ const StyledDiscourse = styled(Discourse)`
 
 const socialLinks = [
   {
-    name: 'Github',
+    name: { id: 'app.components.HomePage.community.links.github', defaultMessage: 'Github' },
     link: 'https://github.com/strapi/strapi/',
     icon: <Github fill="#7289DA" />,
     alt: 'github',
   },
   {
-    name: 'Discord',
+    name: { id: 'app.components.HomePage.community.links.discord', defaultMessage: 'Discord' },
     link: 'https://discord.strapi.io/',
     icon: <StyledDiscord />,
     alt: 'discord',
   },
   {
-    name: 'Reddit',
+    name: { id: 'app.components.HomePage.community.links.reddit', defaultMessage: 'Reddit' },
     link: 'https://www.reddit.com/r/Strapi/',
     icon: <StyledReddit />,
     alt: 'reddit',
   },
   {
-    name: 'Twitter',
+    name: { id: 'app.components.HomePage.community.links.twitter', defaultMessage: 'Twitter' },
     link: 'https://twitter.com/strapijs',
     icon: <StyledTwitter />,
     alt: 'twitter',
   },
   {
-    name: 'Forum',
+    name: { id: 'app.components.HomePage.community.links.forum', defaultMessage: 'Forum' },
     link: 'https://forum.strapi.io',
     icon: <StyledDiscourse />,
     alt: 'forum',
   },
   {
-    name: 'Blog',
+    name: { id: 'app.components.HomePage.community.links.blog', defaultMessage: 'Blog' },
     link: 'https://strapi.io/blog?utm_source=referral&utm_medium=admin&utm_campaign=career%20page',
     icon: <StyledStrapi />,
     alt: 'blog',
   },
   {
-    name: 'We are hiring!',
+    name: {
+      id: 'app.components.HomePage.community.links.career',
+      defaultMessage: 'We are hiring!',
+    },
     link: 'https://strapi.io/careers?utm_source=referral&utm_medium=admin&utm_campaign=blog',
     icon: <StyledStrapi />,
     alt: 'career',
@@ -137,6 +131,21 @@ const GridGap = styled(Grid)`
 
 const SocialLinks = () => {
   const { formatMessage } = useIntl();
+  const { communityEdition } = useAppInfos();
+
+  const socialLinksExtended = [
+    ...socialLinks,
+    {
+      icon: <StyledStrapi />,
+      link: communityEdition
+        ? 'https://discord.strapi.io'
+        : 'https://support.strapi.io/support/home',
+      name: {
+        id: 'Settings.application.get-help',
+        defaultMessage: 'Get help',
+      },
+    },
+  ];
 
   return (
     <Box
@@ -151,8 +160,8 @@ const SocialLinks = () => {
       shadow="tableShadow"
     >
       <Box paddingBottom={7}>
-        <Stack spacing={5}>
-          <Stack spacing={3}>
+        <Flex direction="column" alignItems="stretch" gap={5}>
+          <Flex direction="column" alignItems="stretch" gap={3}>
             <Typography variant="delta" as="h2" id="join-the-community">
               {formatMessage({
                 id: 'app.components.HomePage.community',
@@ -166,27 +175,21 @@ const SocialLinks = () => {
                   'Discuss with team members, contributors and developers on different channels',
               })}
             </Typography>
-          </Stack>
+          </Flex>
           <Link href="https://feedback.strapi.io/" isExternal endIcon={<ExternalLink />}>
             {formatMessage({
               id: 'app.components.HomePage.roadmap',
               defaultMessage: 'See our road map',
             })}
           </Link>
-        </Stack>
+        </Flex>
       </Box>
       <GridGap>
-        {socialLinks.map((socialLink) => {
+        {socialLinksExtended.map(({ icon, link, name }) => {
           return (
-            <GridItem col={6} s={12} key={socialLink.name}>
-              <LinkCustom
-                size="L"
-                startIcon={socialLink.icon}
-                variant="tertiary"
-                href={socialLink.link}
-                isExternal
-              >
-                {socialLink.name}
+            <GridItem col={6} s={12} key={name}>
+              <LinkCustom size="L" startIcon={icon} variant="tertiary" href={link} isExternal>
+                {formatMessage(name)}
               </LinkCustom>
             </GridItem>
           );

package/admin/src/pages/HomePage/assets/strapi-cloud-flags.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="160" fill="none" viewBox="29.41 44 149.09 50.35"><path stroke="#EAEAEF" d="M30.5 44.5c37 27 47.5 38 147.499 32"/><g filter="url(#a)"><path fill="#F29D41" d="m129.467 94.085 8.148-14.142a.598.598 0 0 0-.403-.887 75.099 75.099 0 0 0-3.045-.536c-1.875-.274-2.936-.44-4.837-.505-1.838-.064-2.873.01-4.698.153a64.05 64.05 0 0 0-2.692.293.597.597 0 0 0-.462.851l7.042 14.737c.186.388.732.41.947.036Z"/></g><g filter="url(#b)"><path fill="#F29D41" d="m46.99 75.52 13.813-8.697a.597.597 0 0 0 .058-.971 75.191 75.191 0 0 0-2.442-1.897c-1.53-1.119-2.39-1.761-4.04-2.707-1.595-.915-2.545-1.334-4.226-2.06a64.09 64.09 0 0 0-2.516-.999.597.597 0 0 0-.806.537l-.66 16.319a.535.535 0 0 0 .82.474Z"/></g><g filter="url(#c)"><path fill="#5CB176" d="m29.41 63.51 2.102-16.186a.597.597 0 0 1 .858-.46c.748.371 1.905.954 2.745 1.42 1.657.92 2.602 1.433 4.152 2.534 1.5 1.064 2.278 1.75 3.642 2.972a64.026 64.026 0 0 1 1.962 1.865c.291.286.214.771-.149.957l-14.538 7.443a.535.535 0 0 1-.774-.545Z"/></g><mask id="d" width="17" height="19" x="29" y="46" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#5CB176" d="m29.412 63.51 2.101-16.186a.597.597 0 0 1 .858-.46c.749.371 1.905.954 2.746 1.42 1.657.92 2.601 1.433 4.152 2.534 1.5 1.064 2.278 1.75 3.642 2.972a64.148 64.148 0 0 1 1.962 1.865c.29.286.214.771-.15.957l-14.537 7.443a.535.535 0 0 1-.774-.545Z"/></mask><g stroke="#fff" stroke-linecap="round" stroke-width=".661" mask="url(#d)"><path d="M39.755 51.218c-1.05 1.558-4.606 4.788-10.44 5.247M36.415 47.816c-1.05 1.558-4.606 4.789-10.44 5.247M42.97 53.97c-1.457 1.908-6.341 5.902-14.216 6.619M42.15 58.499c-1.645 1.748-5.29 4.033-13.197 3.939"/></g><g filter="url(#e)"><path fill="#7B79FF" d="m169.813 92.983 5.927-15.208a.598.598 0 0 0-.531-.815 75.213 75.213 0 0 0-3.091-.072c-1.895.01-2.969.007-4.859.228-1.826.214-2.838.442-4.621.859-.815.19-1.893.488-2.617.694a.596.596 0 0 0-.328.91l9.178 13.51a.536.536 0 0 0 .942-.106Z"/></g><g filter="url(#f)"><path fill="#7B79FF" d="m87.001 90.853-4.466-15.699a.597.597 0 0 1 .606-.761c.835.045 2.127.123 3.084.22 1.886.19 2.956.287 4.816.685 1.797.385 2.784.709 4.519 1.291.794.267 1.839.665 2.54.938.38.148.501.624.24.938L87.929 91.048a.535.535 0 0 1-.927-.195Z"/></g><g filter="url(#g)"><path fill="#EE5E52" d="m66.153 85.122 12.355-10.665a.597.597 0 0 0-.087-.97 75.353 75.353 0 0 0-2.698-1.51c-1.68-.877-2.627-1.383-4.4-2.072-1.714-.666-2.716-.938-4.486-1.404a64.083 64.083 0 0 0-2.638-.611.597.597 0 0 0-.716.651l1.788 16.234a.535.535 0 0 0 .882.347Z"/></g><circle cx="70.793" cy="74.511" r=".992" fill="#fff" transform="rotate(8.553 70.793 74.51)"/><circle cx="65.574" cy="78.63" r=".992" fill="#fff" transform="rotate(8.553 65.574 78.63)"/><circle cx="65.408" cy="74.519" r=".992" fill="#fff" transform="rotate(8.553 65.408 74.519)"/><circle cx="67.834" cy="81.943" r=".992" fill="#fff" transform="rotate(8.553 67.834 81.943)"/><circle cx="67.259" cy="69.875" r=".992" fill="#fff" transform="rotate(8.553 67.259 69.875)"/><circle cx="74.691" cy="72.834" r=".992" fill="#fff" transform="rotate(8.553 74.69 72.834)"/><circle cx="71.171" cy="78.968" r=".992" fill="#fff" transform="rotate(8.553 71.171 78.968)"/><g filter="url(#h)"><path fill="#EE5E52" d="m149.911 93.824 6.521-14.963a.598.598 0 0 0-.499-.836 75.255 75.255 0 0 0-3.086-.193c-1.894-.064-2.967-.11-4.863.037-1.833.141-2.854.33-4.651.676-.823.158-1.912.414-2.643.59a.596.596 0 0 0-.364.898l8.64 13.86a.535.535 0 0 0 .945-.07Z"/></g><circle cx="149.5" cy="82.25" r=".992" fill="#fff" transform="rotate(-17.098 149.5 82.25)"/><circle cx="146.579" cy="88.222" r=".992" fill="#fff" transform="rotate(-17.098 146.579 88.222)"/><circle cx="144.65" cy="84.588" r=".992" fill="#fff" transform="rotate(-17.098 144.65 84.588)"/><circle cx="150.049" cy="90.231" r=".992" fill="#fff" transform="rotate(-17.098 150.049 90.231)"/><circle cx="144.306" cy="79.6" r=".992" fill="#fff" transform="rotate(-17.098 144.306 79.6)"/><circle cx="152.287" cy="79.051" r=".992" fill="#fff" transform="rotate(-17.098 152.287 79.05)"/><circle cx="151.77" cy="86.103" r=".992" fill="#fff" transform="rotate(-17.098 151.77 86.103)"/><g filter="url(#i)"><path fill="#5CB176" d="m109.171 93.4 8.86-13.707a.598.598 0 0 0-.357-.906c-.811-.2-2.07-.503-3.013-.69-1.859-.37-2.911-.59-4.806-.753-1.831-.157-2.869-.136-4.699-.086-.837.023-1.953.098-2.703.154a.597.597 0 0 0-.505.827l6.279 15.077c.166.398.71.447.944.084Z"/></g><mask id="j" width="18" height="17" x="101" y="77" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#5CB176" d="m109.17 93.4 8.86-13.707a.598.598 0 0 0-.357-.905c-.811-.201-2.07-.504-3.013-.692-1.859-.37-2.911-.589-4.806-.751-1.831-.158-2.869-.137-4.699-.087-.837.023-1.953.099-2.703.154a.597.597 0 0 0-.505.827l6.279 15.077c.166.398.71.447.944.085Z"/></mask><g stroke="#fff" stroke-linecap="round" stroke-width=".661" mask="url(#j)"><path d="M109.225 77.335c-.207 1.867.418 6.632 4.573 10.753M113.972 76.9c-.207 1.867.418 6.631 4.573 10.753M104.992 77.357c-.121 2.397 1.023 8.602 6.568 14.24M102.69 81.343c.125 2.397 1.429 6.497 7.522 11.537"/></g><defs><filter id="a" width="21.565" height="21.649" x="118.775" y="76.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".661"/><feGaussianBlur stdDeviation="1.322"/><feColorMatrix values="0 0 0 0 0.129412 0 0 0 0 0.129412 0 0 0 0 0.203922 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_12_39"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_12_39" result="shape"/></filter><filter id="b" width="20.201" height="22.741" x="43.526" y="56.167" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".661"/><feGaussianBlur stdDeviation="1.322"/><feColorMatrix values="0 0 0 0 0.129412 0 0 0 0 0.129412 0 0 0 0 0.203922 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_12_39"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_12_39" result="shape"/></filter><filter id="c" width="20.932" height="22.602" x="26.761" y="44.818" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".661"/><feGaussianBlur stdDeviation="1.322"/><feColorMatrix values="0 0 0 0 0.129412 0 0 0 0 0.129412 0 0 0 0 0.203922 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_12_39"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_12_39" result="shape"/></filter><filter id="e" width="21.482" height="21.724" x="156.944" y="74.904" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".661"/><feGaussianBlur stdDeviation="1.322"/><feColorMatrix values="0 0 0 0 0.129412 0 0 0 0 0.129412 0 0 0 0 0.203922 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_12_39"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_12_39" result="shape"/></filter><filter id="f" width="21.256" height="22.139" x="79.868" y="72.409" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".661"/><feGaussianBlur stdDeviation="1.322"/><feColorMatrix values="0 0 0 0 0.129412 0 0 0 0 0.129412 0 0 0 0 0.203922 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_12_39"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_12_39" result="shape"/></filter><filter id="g" width="20.526" height="22.664" x="60.835" y="65.893" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".661"/><feGaussianBlur stdDeviation="1.322"/><feColorMatrix values="0 0 0 0 0.129412 0 0 0 0 0.129412 0 0 0 0 0.203922 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_12_39"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_12_39" result="shape"/></filter><filter id="h" width="21.537" height="21.662" x="137.59" y="75.788" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".661"/><feGaussianBlur stdDeviation="1.322"/><feColorMatrix values="0 0 0 0 0.129412 0 0 0 0 0.129412 0 0 0 0 0.203922 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_12_39"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_12_39" result="shape"/></filter><filter id="i" width="21.515" height="21.712" x="99.257" y="75.238" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".661"/><feGaussianBlur stdDeviation="1.322"/><feColorMatrix values="0 0 0 0 0.129412 0 0 0 0 0.129412 0 0 0 0 0.203922 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_12_39"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_12_39" result="shape"/></filter></defs></svg>

package/admin/src/pages/HomePage/assets/strapi-cloud-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="15" fill="none"><path fill="#fff" fill-rule="evenodd" d="M4.39453 13.8298C1.93859 13.6455 0 11.468 0 8.80884 0 6.0289 2.11876 3.7753 4.73238 3.7753c.46775 0 .91964.07218 1.34638.20664C7.21234 1.62909 9.66469 0 12.5073 0c2.5102 0 4.7161 1.27036 5.9782 3.18766a4.54297 4.54297 0 0 1 .6132-.04144C21.8056 3.14622 24 5.54066 24 8.49436c0 2.89194-2.1036 5.24784-4.7323 5.34504v.0031l-1.8948.278a38.18054 38.18054 0 0 1-11.08354 0l-1.89483-.278v-.0127Z" clip-rule="evenodd"/></svg>

package/admin/src/pages/HomePage/index.js

@@ -9,10 +9,8 @@ import styled from 'styled-components';
 import { Helmet } from 'react-helmet';
 import { useHistory } from 'react-router-dom';
 import { LoadingIndicatorPage, useGuidedTour } from '@strapi/helper-plugin';
-import { Layout } from '@strapi/design-system/Layout';
-import { Main } from '@strapi/design-system/Main';
-import { Box } from '@strapi/design-system/Box';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
+import { Layout, Main, Box, Grid, GridItem } from '@strapi/design-system';
+import useLicenseLimitNotification from 'ee_else_ce/hooks/useLicenseLimitNotification';
 import cornerOrnamentPath from './assets/corner-ornament.svg';
 import { useModels } from '../../hooks';
 import isGuidedTourCompleted from '../../components/GuidedTour/utils/isGuidedTourCompleted';
@@ -35,6 +33,7 @@ const HomePage = () => {
   // Temporary until we develop the menu API
   const { collectionTypes, singleTypes, isLoading: isLoadingForModels } = useModels();
   const { guidedTourState, isGuidedTourVisible, isSkipped } = useGuidedTour();
+  useLicenseLimitNotification();
 
   const showGuidedTour =
     !isGuidedTourCompleted(guidedTourState) && isGuidedTourVisible && !isSkipped;

package/admin/src/pages/InstalledPluginsPage/Plugins.js

@@ -1,11 +1,20 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { LoadingIndicatorPage, useFocusWhenNavigate } from '@strapi/helper-plugin';
-import { useNotifyAT } from '@strapi/design-system/LiveRegions';
-import { Layout, HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
-import { Main } from '@strapi/design-system/Main';
-import { Typography } from '@strapi/design-system/Typography';
-import { Table, Thead, Tbody, Tr, Td, Th } from '@strapi/design-system/Table';
+import {
+  useNotifyAT,
+  Layout,
+  HeaderLayout,
+  ContentLayout,
+  Main,
+  Typography,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Td,
+  Th,
+} from '@strapi/design-system';
 import useFetchEnabledPlugins from '../../hooks/useFetchEnabledPlugins';
 
 const Plugins = () => {

package/admin/src/pages/InternalErrorPage/index.js

@@ -6,11 +6,8 @@
  */
 import React from 'react';
 import { useFocusWhenNavigate, LinkButton } from '@strapi/helper-plugin';
-import { Main } from '@strapi/design-system/Main';
-import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
-import { EmptyStateLayout } from '@strapi/design-system/EmptyStateLayout';
-import EmptyPictures from '@strapi/icons/EmptyPictures';
-import ArrowRight from '@strapi/icons/ArrowRight';
+import { Main, ContentLayout, HeaderLayout, EmptyStateLayout } from '@strapi/design-system';
+import { EmptyPictures, ArrowRight } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 
 const InternalErrorPage = () => {

package/admin/src/pages/MarketplacePage/components/EmptyNpmPackageSearch/EmptyNpmPackageGrid.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
-import { GridLayout } from '@strapi/design-system/Layout';
+import { Box, GridLayout } from '@strapi/design-system';
 
 const EmptyPluginCard = styled(Box)`
   background: ${({ theme }) =>

package/admin/src/pages/MarketplacePage/components/EmptyNpmPackageSearch/index.js

@@ -1,10 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Typography } from '@strapi/design-system/Typography';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Icon } from '@strapi/design-system/Icon';
-import EmptyStateDocument from '@strapi/icons/EmptyDocuments';
+import { Typography, Box, Flex, Icon } from '@strapi/design-system';
+import { EmptyStateDocument } from '@strapi/icons';
 import { EmptyNpmPackageGrid } from './EmptyNpmPackageGrid';
 
 const EmptyNpmPackageSearch = ({ content }) => {

package/admin/src/pages/MarketplacePage/components/MissingPluginBanner/index.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { ContentBox, useTracking } from '@strapi/helper-plugin';
-import GlassesSquare from '@strapi/icons/GlassesSquare';
-import ExternalLink from '@strapi/icons/ExternalLink';
-import { Icon } from '@strapi/design-system/Icon';
+import { GlassesSquare, ExternalLink } from '@strapi/icons';
+import { Icon } from '@strapi/design-system';
 
 const MissingPluginBanner = () => {
   const { formatMessage } = useIntl();

package/admin/src/pages/MarketplacePage/components/NpmPackageCard/CardButton.js

@@ -2,10 +2,8 @@ import React from 'react';
 import semver from 'semver';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Tooltip } from '@strapi/design-system/Tooltip';
-import { Button } from '@strapi/design-system/Button';
-import { Box } from '@strapi/design-system/Box';
-import Duplicate from '@strapi/icons/Duplicate';
+import { Tooltip, Button, Box } from '@strapi/design-system';
+import { Duplicate } from '@strapi/icons';
 
 const TooltipButton = ({ description, installMessage, disabled, handleCopy, pluginName }) => (
   <Tooltip data-testid={`tooltip-${pluginName}`} description={description}>

package/admin/src/pages/MarketplacePage/components/NpmPackageCard/InstallPluginButton.js

@@ -2,10 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useNotification, useTracking } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
-import { Icon } from '@strapi/design-system/Icon';
-import { Typography } from '@strapi/design-system/Typography';
-import Check from '@strapi/icons/Check';
+import { Box, Icon, Typography } from '@strapi/design-system';
+import { Check } from '@strapi/icons';
 import CardButton from './CardButton';
 
 const InstallPluginButton = ({

package/admin/src/pages/MarketplacePage/components/NpmPackageCard/PackageStats.js

@@ -2,13 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { Typography } from '@strapi/design-system/Typography';
-import { Icon } from '@strapi/design-system/Icon';
-import { Divider } from '@strapi/design-system/Divider';
-import { Stack } from '@strapi/design-system/Stack';
-import Github from '@strapi/icons/Github';
-import Download from '@strapi/icons/Download';
-import Star from '@strapi/icons/Star';
+import { Typography, Icon, Divider, Flex } from '@strapi/design-system';
+import { Github, Download, Star } from '@strapi/icons';
 import { pxToRem } from '@strapi/helper-plugin';
 
 const VerticalDivider = styled(Divider)`
@@ -20,7 +15,7 @@ const PackageStats = ({ githubStars, npmDownloads, npmPackageType }) => {
   const { formatMessage } = useIntl();
 
   return (
-    <Stack horizontal spacing={1}>
+    <Flex gap={1}>
       {!!githubStars && (
         <>
           <Icon as={Github} height={pxToRem(12)} width={pxToRem(12)} aria-hidden />
@@ -61,7 +56,7 @@ const PackageStats = ({ githubStars, npmDownloads, npmPackageType }) => {
           {npmDownloads}
         </Typography>
       </p>
-    </Stack>
+    </Flex>
   );
 };
 

package/admin/src/pages/MarketplacePage/components/NpmPackageCard/index.js

@@ -3,15 +3,9 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import pluralize from 'pluralize';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { Typography } from '@strapi/design-system/Typography';
-import { LinkButton } from '@strapi/design-system/v2/LinkButton';
-import { Flex } from '@strapi/design-system/Flex';
-import { Icon } from '@strapi/design-system/Icon';
-import { Tooltip } from '@strapi/design-system/Tooltip';
-import ExternalLink from '@strapi/icons/ExternalLink';
-import CheckCircle from '@strapi/icons/CheckCircle';
+import { Box, Typography, Flex, Icon, Tooltip } from '@strapi/design-system';
+import { LinkButton } from '@strapi/design-system/v2';
+import { ExternalLink, CheckCircle } from '@strapi/icons';
 import { useTracking } from '@strapi/helper-plugin';
 import StrapiLogo from '../../../../assets/images/logo-strapi-2022.svg';
 import InstallPluginButton from './InstallPluginButton';
@@ -123,7 +117,7 @@ const NpmPackageCard = ({
         </Box>
       </Box>
 
-      <Stack horizontal spacing={2} style={{ alignSelf: 'flex-end' }} paddingTop={6}>
+      <Flex gap={2} style={{ alignSelf: 'flex-end' }} paddingTop={6}>
         <LinkButton
           size="S"
           href={npmPackageHref}
@@ -152,7 +146,7 @@ const NpmPackageCard = ({
           strapiPeerDepVersion={attributes.strapiVersion}
           pluginName={attributes.name}
         />
-      </Stack>
+      </Flex>
     </Flex>
   );
 };

package/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/FilterSelect.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Select, Option } from '@strapi/design-system/Select';
+import { Select, Option } from '@strapi/design-system';
 
 const FilterSelect = ({ message, value, onChange, possibleFilters, onClear, customizeContent }) => {
   const computeFilterMessage = (filterName, count) => {

package/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/FiltersPopover.js

@@ -1,9 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
-import { Popover } from '@strapi/design-system/Popover';
-import { Stack } from '@strapi/design-system/Stack';
-import { FocusTrap } from '@strapi/design-system/FocusTrap';
+import { Box, Popover, Flex, FocusTrap } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import FilterSelect from './FilterSelect';
 
@@ -22,7 +19,7 @@ const FiltersPopover = ({
   return (
     <Popover source={source} padding={3} spacing={4} onBlur={() => {}}>
       <FocusTrap onEscape={onToggle}>
-        <Stack spacing={1}>
+        <Flex direction="column" alignItems="stretch" gap={1}>
           <Box>
             <FilterSelect
               message={formatMessage({
@@ -76,7 +73,7 @@ const FiltersPopover = ({
               />
             </Box>
           )}
-        </Stack>
+        </Flex>
       </FocusTrap>
     </Popover>
   );

package/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/index.js

@@ -2,11 +2,8 @@ import React, { useState, useRef } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Box } from '@strapi/design-system/Box';
-import { Button } from '@strapi/design-system/Button';
-import { Tag } from '@strapi/design-system/Tag';
-import Cross from '@strapi/icons/Cross';
-import Filter from '@strapi/icons/Filter';
+import { Box, Button, Tag } from '@strapi/design-system';
+import { Cross, Filter } from '@strapi/icons';
 import FiltersPopover from './FiltersPopover';
 
 const FilterTag = ({ name, handleRemove }) => {

package/admin/src/pages/MarketplacePage/components/NpmPackagesGrid/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
+import { Grid, GridItem } from '@strapi/design-system';
 import NpmPackageCard from '../NpmPackageCard';
 
 const NpmPackagesGrid = ({

package/admin/src/pages/MarketplacePage/components/PageHeader/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { HeaderLayout } from '@strapi/design-system/Layout';
-import { LinkButton } from '@strapi/design-system/v2/LinkButton';
-import Upload from '@strapi/icons/Upload';
+import { HeaderLayout } from '@strapi/design-system';
+import { LinkButton } from '@strapi/design-system/v2';
+import { Upload } from '@strapi/icons';
 import { useTracking } from '@strapi/helper-plugin';
 
 const PageHeader = ({ isOnline, npmPackageType }) => {

package/admin/src/pages/MarketplacePage/components/SortSelect/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Select, Option } from '@strapi/design-system/Select';
-import { Box } from '@strapi/design-system/Box';
+import { Select, Option, Box } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 

package/admin/src/pages/MarketplacePage/index.js

@@ -12,14 +12,21 @@ import {
   useAppInfos,
   useQueryParams,
 } from '@strapi/helper-plugin';
-import { Layout, ContentLayout } from '@strapi/design-system/Layout';
-import { Main } from '@strapi/design-system/Main';
-import { Searchbar } from '@strapi/design-system/Searchbar';
-import { Box } from '@strapi/design-system/Box';
-import { useNotifyAT } from '@strapi/design-system/LiveRegions';
-import { Typography } from '@strapi/design-system/Typography';
-import { Flex } from '@strapi/design-system/Flex';
-import { Tabs, Tab, TabGroup, TabPanels, TabPanel } from '@strapi/design-system/Tabs';
+import {
+  Layout,
+  ContentLayout,
+  Main,
+  Searchbar,
+  Box,
+  useNotifyAT,
+  Typography,
+  Flex,
+  Tabs,
+  Tab,
+  TabGroup,
+  TabPanels,
+  TabPanel,
+} from '@strapi/design-system';
 
 import EmptyNpmPackageSearch from './components/EmptyNpmPackageSearch';
 import PageHeader from './components/PageHeader';

package/admin/src/pages/NotFoundPage/index.js

@@ -6,11 +6,8 @@
  */
 import React from 'react';
 import { useFocusWhenNavigate, LinkButton } from '@strapi/helper-plugin';
-import { Main } from '@strapi/design-system/Main';
-import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
-import { EmptyStateLayout } from '@strapi/design-system/EmptyStateLayout';
-import EmptyPictures from '@strapi/icons/EmptyPictures';
-import ArrowRight from '@strapi/icons/ArrowRight';
+import { Main, ContentLayout, HeaderLayout, EmptyStateLayout } from '@strapi/design-system';
+import { EmptyPictures, ArrowRight } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 
 const NoContentType = () => {