@strapi/admin 4.7.0-beta.0 → 4.7.0-exp.117579f4c13806c2cd518e7d7d2f9d0c8a20107d

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/ImageCardAsset.js

@@ -10,7 +10,7 @@ import {
   CardHeader,
   CardTitle,
   CardSubtitle,
-} from '@strapi/design-system/Card';
+} from '@strapi/design-system';
 
 const ImageCardAsset = ({ asset }) => {
   const { formatMessage } = useIntl();

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/PendingLogoDialog.js

@@ -2,11 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { pxToRem } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Button } from '@strapi/design-system/Button';
-import { ModalFooter } from '@strapi/design-system/ModalLayout';
-import { Typography } from '@strapi/design-system/Typography';
+import { Box, Flex, Button, ModalFooter, Typography } from '@strapi/design-system';
 import ImageCardAsset from './ImageCardAsset';
 
 const PendingLogoDialog = ({ onClose, asset, prev, next, goTo, setLocalImage, onChangeLogo }) => {

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/index.js

@@ -1,8 +1,7 @@
 import React, { useReducer } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { ModalLayout, ModalHeader } from '@strapi/design-system/ModalLayout';
-import { Typography } from '@strapi/design-system/Typography';
+import { ModalLayout, ModalHeader, Typography } from '@strapi/design-system';
 import reducer, { initialState } from './reducer';
 
 const LogoModalStepper = ({

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/index.js

@@ -9,16 +9,21 @@ import {
   useRBAC,
   useTracking,
 } from '@strapi/helper-plugin';
-import { HeaderLayout, Layout, ContentLayout } 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 { Typography } from '@strapi/design-system/Typography';
-import { Stack } from '@strapi/design-system/Stack';
-import { Button } from '@strapi/design-system/Button';
-import { Link } from '@strapi/design-system/v2/Link';
-import ExternalLink from '@strapi/icons/ExternalLink';
-import Check from '@strapi/icons/Check';
+import {
+  Button,
+  ContentLayout,
+  Flex,
+  Grid,
+  GridItem,
+  HeaderLayout,
+  Layout,
+  Link,
+  Main,
+  Stack,
+  Typography,
+} from '@strapi/design-system';
+import { ExternalLink, Check } from '@strapi/icons';
+
 import adminPermissions from '../../../../permissions';
 import { useConfigurations } from '../../../../hooks';
 import CustomizationInfos from './components/CustomizationInfos';
@@ -33,7 +38,7 @@ const ApplicationInfosPage = () => {
   const queryClient = useQueryClient();
   useFocusWhenNavigate();
   const appInfos = useAppInfos();
-  const { shouldUpdateStrapi, latestStrapiReleaseTag, strapiVersion } = appInfos;
+  const { latestStrapiReleaseTag, shouldUpdateStrapi, strapiVersion } = appInfos;
   const { updateProjectSettings } = useConfigurations();
 
   const {
@@ -43,10 +48,6 @@ const ApplicationInfosPage = () => {
 
   const { data } = useQuery('project-settings', fetchProjectSettings, { enabled: canRead });
 
-  const currentPlan = appInfos.communityEdition
-    ? 'app.components.UpgradePlanModal.text-ce'
-    : 'app.components.UpgradePlanModal.text-ee';
-
   const submitMutation = useMutation((body) => postProjectSettings(body), {
     async onSuccess({ menuLogo, authLogo }) {
       await queryClient.invalidateQueries('project-settings', { refetchActive: true });
@@ -114,7 +115,7 @@ const ApplicationInfosPage = () => {
           <ContentLayout>
             <Stack spacing={6}>
               <Stack
-                spacing={5}
+                spacing={4}
                 hasRadius
                 background="neutral0"
                 shadow="tableShadow"
@@ -130,86 +131,71 @@ const ApplicationInfosPage = () => {
                   })}
                 </Typography>
 
-                <Grid paddingTop={1}>
+                <Grid gap={5} as="dl">
                   <GridItem col={6} s={12}>
-                    <Typography variant="sigma" textColor="neutral600">
+                    <Typography variant="sigma" textColor="neutral600" as="dt">
                       {formatMessage({
                         id: 'Settings.application.strapiVersion',
                         defaultMessage: 'strapi version',
                       })}
                     </Typography>
-                    <Typography as="p">v{strapiVersion}</Typography>
-                    <Link
-                      href={
-                        appInfos.communityEdition
-                          ? 'https://discord.strapi.io'
-                          : 'https://support.strapi.io/support/home'
-                      }
-                      isExternal
-                      endIcon={<ExternalLink />}
-                    >
-                      {formatMessage({
-                        id: 'Settings.application.get-help',
-                        defaultMessage: 'Get help',
-                      })}
-                    </Link>
+                    <Flex gap={3} direction="column" alignItems="start" as="dd">
+                      <Typography>v{strapiVersion}</Typography>
+                      {shouldUpdateStrapi && (
+                        <Link
+                          href={`https://github.com/strapi/strapi/releases/tag/${latestStrapiReleaseTag}`}
+                          isExternal
+                          endIcon={<ExternalLink />}
+                        >
+                          {formatMessage({
+                            id: 'Settings.application.link-upgrade',
+                            defaultMessage: 'Upgrade your admin panel',
+                          })}
+                        </Link>
+                      )}
+                    </Flex>
                   </GridItem>
                   <GridItem col={6} s={12}>
-                    <Typography variant="sigma" textColor="neutral600">
+                    <Typography variant="sigma" textColor="neutral600" as="dt">
                       {formatMessage({
                         id: 'Settings.application.edition-title',
                         defaultMessage: 'current plan',
                       })}
                     </Typography>
-                    <Typography as="p">
-                      {formatMessage({
-                        id: currentPlan,
-                        defaultMessage: `${
-                          appInfos.communityEdition ? 'Community Edition' : 'Enterprise Edition'
-                        }`,
-                      })}
-                    </Typography>
-                  </GridItem>
-                </Grid>
-
-                <Grid paddingTop={1}>
-                  <GridItem col={6} s={12}>
-                    {shouldUpdateStrapi && (
+                    <Flex gap={3} direction="column" alignItems="start" as="dd">
+                      <Typography>
+                        {formatMessage(
+                          {
+                            id: 'Settings.application.ee-or-ce',
+                            defaultMessage:
+                              '{communityEdition, select, true {Community Edition} other {Enterprise Edition}}',
+                          },
+                          { communityEdition: appInfos.communityEdition }
+                        )}
+                      </Typography>
                       <Link
-                        href={`https://github.com/strapi/strapi/releases/tag/${latestStrapiReleaseTag}`}
+                        href="https://strapi.io/pricing-self-hosted"
                         isExternal
                         endIcon={<ExternalLink />}
                       >
                         {formatMessage({
-                          id: 'Settings.application.link-upgrade',
-                          defaultMessage: 'Upgrade your admin panel',
+                          id: 'Settings.application.link-pricing',
+                          defaultMessage: 'See all pricing plans',
                         })}
                       </Link>
-                    )}
+                    </Flex>
                   </GridItem>
+
                   <GridItem col={6} s={12}>
-                    <Link
-                      href="https://strapi.io/pricing-self-hosted"
-                      isExternal
-                      endIcon={<ExternalLink />}
-                    >
+                    <Typography variant="sigma" textColor="neutral600" as="dt">
                       {formatMessage({
-                        id: 'Settings.application.link-pricing',
-                        defaultMessage: 'See all pricing plans',
+                        id: 'Settings.application.node-version',
+                        defaultMessage: 'node version',
                       })}
-                    </Link>
+                    </Typography>
+                    <Typography as="dd">{appInfos.nodeVersion}</Typography>
                   </GridItem>
                 </Grid>
-
-                <Box paddingTop={1}>
-                  <Typography variant="sigma" textColor="neutral600">
-                    {formatMessage({
-                      id: 'Settings.application.node-version',
-                      defaultMessage: 'node version',
-                    })}
-                  </Typography>
-                  <Typography as="p">{appInfos.nodeVersion}</Typography>
-                </Box>
               </Stack>
               {canRead && data && (
                 <CustomizationInfos

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/CollapseLabel/index.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Flex } from '@strapi/design-system/Flex';
+import { Flex } from '@strapi/design-system';
 
 const CollapseLabel = styled(Flex)`
   padding-right: ${({ theme }) => theme.spaces[2]};

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsButton/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Cog from '@strapi/icons/Cog';
-import { Button } from '@strapi/design-system/Button';
+import { Cog } from '@strapi/icons';
+import { Button } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ActionRow/index.js

@@ -1,10 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import IS_DISABLED from 'ee_else_ce/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ActionRow/utils/constants';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import { MultiSelectNested } from '@strapi/design-system/Select';
+import { Box, Flex, Typography, MultiSelectNested } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 
 import { getNestedOptions, getSelectedValues, getNewStateFromChangedValues } from './utils/options';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/index.js

@@ -1,14 +1,15 @@
 import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Button } from '@strapi/design-system/Button';
 import {
+  Button,
   ModalFooter,
   ModalHeader,
   ModalLayout,
   ModalBody,
-} from '@strapi/design-system/ModalLayout';
-import { Breadcrumbs, Crumb } from '@strapi/design-system/Breadcrumbs';
-import { Typography } from '@strapi/design-system/Typography';
+  Breadcrumbs,
+  Crumb,
+  Typography,
+} from '@strapi/design-system';
 import produce from 'immer';
 import get from 'lodash/get';
 import groupBy from 'lodash/groupBy';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/Collapse/index.js

@@ -1,10 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import ChevronDown from '@strapi/icons/ChevronDown';
-import ChevronUp from '@strapi/icons/ChevronUp';
-import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
+import { ChevronDown, ChevronUp } from '@strapi/icons';
+import { BaseCheckbox, Box, Flex } from '@strapi/design-system';
 import get from 'lodash/get';
 import omit from 'lodash/omit';
 import { useIntl } from 'react-intl';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js

@@ -2,8 +2,7 @@ import React, { memo, useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
-import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
-import { Flex } from '@strapi/design-system/Flex';
+import { BaseCheckbox, Flex } from '@strapi/design-system';
 import get from 'lodash/get';
 import IS_DISABLED from 'ee_else_ce/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/utils/constants';
 import { usePermissionsDataManager } from '../../../../../../../../../hooks';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/CarretIcon/index.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import CarretDown from '@strapi/icons/CarretDown';
+import { CarretDown } from '@strapi/icons';
 
 const CarretIcon = styled(CarretDown)`
   display: none;

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/Header/index.js

@@ -2,8 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
+import { Flex, Typography } from '@strapi/design-system';
 import { cellWidth, firstRowWidth, rowHeight } from '../../../Permissions/utils/constants';
 
 const HeaderLabel = styled(Flex)`

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/index.js

@@ -4,10 +4,7 @@ import get from 'lodash/get';
 import upperFirst from 'lodash/upperFirst';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
-import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
+import { BaseCheckbox, Box, Flex, Typography } from '@strapi/design-system';
 import IS_DISABLED from 'ee_else_ce/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/utils/constants';
 import { usePermissionsDataManager } from '../../../../../../../../../hooks';
 import CollapseLabel from '../../../CollapseLabel';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/index.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
+import { Box } from '@strapi/design-system';
 import generateHeadersFromActions from './utils/generateHeadersFromActions';
 import Header from './Header';
 import ActionRow from './ActionRow';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/utils/activeStyle.js

@@ -1,4 +1,4 @@
-import { Typography } from '@strapi/design-system/Typography';
+import { Typography } from '@strapi/design-system';
 import CarretIcon from '../CollapsePropertyMatrix/CarretIcon';
 
 const activeStyle = (theme) => `

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypes/index.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
+import { Box } from '@strapi/design-system';
 import styled from 'styled-components';
 import sortBy from 'lodash/sortBy';
 import ContentTypeCollapses from '../ContentTypeCollapses';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/Curve/index.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
+import { Box } from '@strapi/design-system';
 
 const StyledBox = styled(Box)`
   transform: translate(-4px, -12px);

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/GlobalActions/index.js

@@ -1,9 +1,6 @@
 import React, { memo, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { Typography } from '@strapi/design-system/Typography';
+import { BaseCheckbox, Box, Stack, Typography } from '@strapi/design-system';
 import styled from 'styled-components';
 import get from 'lodash/get';
 import IS_DISABLED from 'ee_else_ce/pages/SettingsPage/pages/Roles/EditPage/components/GlobalActions/utils/constants';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/Permissions/index.js

@@ -1,7 +1,7 @@
 import React, { forwardRef, memo, useCallback, useImperativeHandle, useReducer } from 'react';
 import PropTypes from 'prop-types';
 import { difference } from '@strapi/helper-plugin';
-import { Tab, TabGroup, TabPanel, TabPanels, Tabs } from '@strapi/design-system/Tabs';
+import { Tab, TabGroup, TabPanel, TabPanels, Tabs } from '@strapi/design-system';
 import has from 'lodash/has';
 import isEmpty from 'lodash/isEmpty';
 import { useIntl } from 'react-intl';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/Permissions/utils/formatLayoutForSettingsAndPlugins.js

@@ -1,23 +1,19 @@
-import { chain } from 'lodash';
+import groupBy from 'lodash/groupBy';
 
 const replaceName = (name) => name.split(' ').join('-');
 
 const formatLayout = (layout, groupByKey) => {
-  return chain(layout)
-    .groupBy(groupByKey)
-    .map((item, itemName) => ({
-      category: itemName,
-      categoryId: replaceName(itemName),
-      childrenForm: chain(item)
-        .groupBy('subCategory')
-        .map((actions, subCategoryName) => ({
-          subCategoryName,
-          subCategoryId: replaceName(subCategoryName),
-          actions,
-        }))
-        .value(),
-    }))
-    .value();
+  return Object.entries(groupBy(layout, groupByKey)).map(([itemName, item]) => ({
+    category: itemName,
+    categoryId: replaceName(itemName),
+    childrenForm: Object.entries(groupBy(item, 'subCategory')).map(
+      ([subCategoryName, actions]) => ({
+        subCategoryName,
+        subCategoryId: replaceName(subCategoryName),
+        actions,
+      })
+    ),
+  }));
 };
 
 export default formatLayout;

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/PluginsAndSettings/Row/index.js

@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { Accordion, AccordionContent, AccordionToggle } from '@strapi/design-system/Accordion';
-import { Box } from '@strapi/design-system/Box';
+import { Accordion, AccordionContent, AccordionToggle, Box } from '@strapi/design-system';
 import upperFirst from 'lodash/upperFirst';
 import { useIntl } from 'react-intl';
 import SubCategory from '../SubCategory';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/PluginsAndSettings/SubCategory/index.js

@@ -1,11 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Box } from '@strapi/design-system/Box';
-import { Checkbox } from '@strapi/design-system/Checkbox';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
+import { Grid, GridItem, Box, Checkbox, Flex, Typography } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import get from 'lodash/get';
 import IS_DISABLED from 'ee_else_ce/pages/SettingsPage/pages/Roles/EditPage/components/PluginsAndSettings/SubCategory/utils/constants';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/PluginsAndSettings/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
+import { Box } from '@strapi/design-system';
 import PermissionRow from './Row';
 
 const PluginsAndSettingsPermissions = ({ isFormDisabled, kind, layout }) => {

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/RoleForm/index.js

@@ -1,12 +1,15 @@
 import React from 'react';
-import { Box } from '@strapi/design-system/Box';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Flex } from '@strapi/design-system/Flex';
-import { Stack } from '@strapi/design-system/Stack';
-import { Typography } from '@strapi/design-system/Typography';
-import { Textarea } from '@strapi/design-system/Textarea';
-import { TextInput } from '@strapi/design-system/TextInput';
-import { Button } from '@strapi/design-system/Button';
+import {
+  Box,
+  Grid,
+  GridItem,
+  Flex,
+  Stack,
+  Typography,
+  Textarea,
+  TextInput,
+  Button,
+} from '@strapi/design-system';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/RowLabelWithCheckbox/index.js

@@ -1,9 +1,6 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
+import { BaseCheckbox, Box, Flex, Typography } from '@strapi/design-system';
 import upperFirst from 'lodash/upperFirst';
 import { useIntl } from 'react-intl';
 import CollapseLabel from '../CollapseLabel';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/index.js

@@ -8,13 +8,9 @@ import {
   SettingsPageTitle,
   Link,
 } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
-import { Button } from '@strapi/design-system/Button';
-import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
-import { Main } from '@strapi/design-system/Main';
-import { Stack } from '@strapi/design-system/Stack';
+import { Box, Button, ContentLayout, HeaderLayout, Main, Stack } from '@strapi/design-system';
 import { Formik } from 'formik';
-import ArrowLeft from '@strapi/icons/ArrowLeft';
+import { ArrowLeft } from '@strapi/icons';
 import get from 'lodash/get';
 import { useIntl } from 'react-intl';
 import { useRouteMatch } from 'react-router-dom';

package/admin/src/pages/SettingsPage/pages/Roles/ListPage/components/RoleRow/index.js

@@ -1,10 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Td, Tr } from '@strapi/design-system/Table';
-import { Typography } from '@strapi/design-system/Typography';
-import { IconButton } from '@strapi/design-system/IconButton';
+import { Box, Flex, Td, Tr, Typography, IconButton } from '@strapi/design-system';
 import { stopPropagation, onRowClick, pxToRem } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 

package/admin/src/pages/SettingsPage/pages/Roles/ListPage/index.js

@@ -6,16 +6,22 @@ import {
   useTracking,
   useFocusWhenNavigate,
 } from '@strapi/helper-plugin';
-import Plus from '@strapi/icons/Plus';
-import Trash from '@strapi/icons/Trash';
-import Pencil from '@strapi/icons/Pencil';
-import Duplicate from '@strapi/icons/Duplicate';
-import { Button } from '@strapi/design-system/Button';
-import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
-import { Table, Tbody, Th, Thead, Tr, TFooter } from '@strapi/design-system/Table';
-import { Typography } from '@strapi/design-system/Typography';
-import { Main } from '@strapi/design-system/Main';
-import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden';
+import { Plus, Trash, Pencil, Duplicate } from '@strapi/icons';
+import {
+  Button,
+  ContentLayout,
+  HeaderLayout,
+  Table,
+  Tbody,
+  Th,
+  Thead,
+  Tr,
+  TFooter,
+  Typography,
+  Main,
+  VisuallyHidden,
+} from '@strapi/design-system';
+
 import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import RoleRow from './components/RoleRow';

package/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/components/FormTransferTokenContainer/index.js

@@ -1,11 +1,7 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Stack } from '@strapi/design-system/Stack';
-
-import { Typography } from '@strapi/design-system/Typography';
+import { Box, Grid, GridItem, Stack, Typography } from '@strapi/design-system';
 import LifeSpanInput from '../../../../../components/Tokens/LifeSpanInput';
 import TokenName from '../../../../../components/Tokens/TokenName';
 import TokenDescription from '../../../../../components/Tokens/TokenDescription';

package/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/components/LoadingView/index.js

@@ -4,10 +4,8 @@ import {
   LoadingIndicatorPage,
   useFocusWhenNavigate,
 } from '@strapi/helper-plugin';
-import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
-import { Main } from '@strapi/design-system/Main';
-import { Button } from '@strapi/design-system/Button';
-import Check from '@strapi/icons/Check';
+import { HeaderLayout, ContentLayout, Main, Button } from '@strapi/design-system';
+import { Check } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';