@strapi/admin 4.6.0 → 4.6.2

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormApiTokenContainer/index.js

@@ -2,13 +2,17 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import { usePersistentState } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Select, Option } from '@strapi/design-system/Select';
-import { Stack } from '@strapi/design-system/Stack';
-import { Textarea } from '@strapi/design-system/Textarea';
-import { TextInput } from '@strapi/design-system/TextInput';
-import { Typography } from '@strapi/design-system/Typography';
+import {
+  Box,
+  Grid,
+  GridItem,
+  Select,
+  Option,
+  Stack,
+  Textarea,
+  TextInput,
+  Typography,
+} from '@strapi/design-system';
 import { getDateOfExpiration } from '../../utils';
 
 const FormApiTokenContainer = ({

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormBody/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ContentLayout } from '@strapi/design-system/Layout';
-import { Stack } from '@strapi/design-system/Stack';
+import { ContentLayout, Stack } from '@strapi/design-system';
 import HeaderContentBox from '../ContentBox';
 import FormApiTokenContainer from '../FormApiTokenContainer';
 import Permissions from '../Permissions';

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormHead/index.js

@@ -2,11 +2,8 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import { Link } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
-import ArrowLeft from '@strapi/icons/ArrowLeft';
-import Check from '@strapi/icons/Check';
-import { Button } from '@strapi/design-system/Button';
-import { HeaderLayout } from '@strapi/design-system/Layout';
-import { Stack } from '@strapi/design-system/Stack';
+import { ArrowLeft, Check } from '@strapi/icons';
+import { Button, HeaderLayout, Stack } from '@strapi/design-system';
 import Regenerate from '../Regenerate';
 
 const FormHead = ({ apiToken, setApiToken, canEditInputs, canRegenerate, isSubmitting }) => {

package/admin/src/pages/SettingsPage/pages/ApiTokens/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';
 

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/Permissions/index.js

@@ -1,8 +1,6 @@
 import React, { memo } from 'react';
 import { useIntl } from 'react-intl';
-import { Typography } from '@strapi/design-system/Typography';
-import { Stack } from '@strapi/design-system/Stack';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
+import { Typography, Stack, Grid, GridItem } from '@strapi/design-system';
 import ContentTypesSection from '../ContenTypesSection';
 import ActionBoundRoutes from '../ActionBoundRoutes';
 import { useApiTokenPermissionsContext } from '../../../../../../../contexts/ApiTokenPermissions';

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/Regenerate/index.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Button } from '@strapi/design-system/Button';
-import Refresh from '@strapi/icons/Refresh';
+import { Button } from '@strapi/design-system';
+import { Refresh } from '@strapi/icons';
 import { ConfirmDialog } from '@strapi/helper-plugin';
 import { useRegenerate } from '../../../../../../../hooks';
 

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/index.js

@@ -9,13 +9,13 @@ import {
   useTracking,
   useGuidedTour,
   useRBAC,
+  useFetchClient,
 } from '@strapi/helper-plugin';
-import { Main } from '@strapi/design-system/Main';
+import { Main } from '@strapi/design-system';
 import { Formik } from 'formik';
 import { useRouteMatch, useHistory } from 'react-router-dom';
 import { useQuery } from 'react-query';
 import { formatAPIErrors } from '../../../../../utils';
-import { axiosInstance } from '../../../../../core/utils';
 import { schema } from './utils';
 import LoadingView from './components/LoadingView';
 import FormHead from './components/FormHead';
@@ -50,6 +50,7 @@ const ApiTokenCreateView = () => {
   const {
     params: { id },
   } = useRouteMatch('/settings/api-tokens/:id');
+  const { get, post, put } = useFetchClient();
 
   const isCreating = id === 'create';
 
@@ -58,7 +59,7 @@ const ApiTokenCreateView = () => {
     async () => {
       const [permissions, routes] = await Promise.all(
         ['/admin/content-api/permissions', '/admin/content-api/routes'].map(async (url) => {
-          const { data } = await axiosInstance.get(url);
+          const { data } = await get(url);
 
           return data.data;
         })
@@ -112,7 +113,7 @@ const ApiTokenCreateView = () => {
     async () => {
       const {
         data: { data },
-      } = await axiosInstance.get(`/admin/api-tokens/${id}`);
+      } = await get(`/admin/api-tokens/${id}`);
 
       setApiToken({
         ...data,
@@ -160,12 +161,12 @@ const ApiTokenCreateView = () => {
       const {
         data: { data: response },
       } = isCreating
-        ? await axiosInstance.post(`/admin/api-tokens`, {
+        ? await post(`/admin/api-tokens`, {
             ...body,
             lifespan: lifespanVal,
             permissions: body.type === 'custom' ? state.selectedActions : null,
           })
-        : await axiosInstance.put(`/admin/api-tokens/${id}`, {
+        : await put(`/admin/api-tokens/${id}`, {
             name: body.name,
             description: body.description,
             type: body.type,

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/DeleteButton/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import Trash from '@strapi/icons/Trash';
-import { IconButton } from '@strapi/design-system/IconButton';
-import { Box } from '@strapi/design-system/Box';
+import { Trash } from '@strapi/icons';
+import { IconButton, Box } from '@strapi/design-system';
 import { stopPropagation, useTracking } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/ReadButton/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Eye from '@strapi/icons/Eye';
+import { Eye } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import DefaultButton from '../DefaultButton';
 

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/UpdateButton/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Pencil from '@strapi/icons/Pencil';
+import { Pencil } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import DefaultButton from '../DefaultButton';
 

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/index.js

@@ -2,9 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 
-import { Typography } from '@strapi/design-system/Typography';
-import { Tbody, Tr, Td } from '@strapi/design-system/Table';
-import { Flex } from '@strapi/design-system/Flex';
+import { Typography, Tbody, Tr, Td, Flex } from '@strapi/design-system';
 import {
   RelativeTime,
   useQueryParams,

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/index.js

@@ -14,14 +14,12 @@ import {
   DynamicTable,
   useTracking,
   useGuidedTour,
+  useFetchClient,
   LinkButton,
 } 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 Plus from '@strapi/icons/Plus';
+import { HeaderLayout, ContentLayout, Main, Button } from '@strapi/design-system';
+import { Plus } from '@strapi/icons';
 
-import { axiosInstance } from '../../../../../core/utils';
 import adminPermissions from '../../../../../permissions';
 import tableHeaders from './utils/tableHeaders';
 import TableRows from './DynamicTable';
@@ -38,6 +36,7 @@ const ApiTokenListView = () => {
   const { trackUsage } = useTracking();
   const { startSection } = useGuidedTour();
   const startSectionRef = useRef(startSection);
+  const { get, del } = useFetchClient();
 
   useEffect(() => {
     if (startSectionRef.current) {
@@ -67,7 +66,7 @@ const ApiTokenListView = () => {
       trackUsage('willAccessTokenList');
       const {
         data: { data },
-      } = await axiosInstance.get(`/admin/api-tokens`);
+      } = await get(`/admin/api-tokens`);
 
       trackUsage('didAccessTokenList', { number: data.length });
 
@@ -90,7 +89,7 @@ const ApiTokenListView = () => {
 
   const deleteMutation = useMutation(
     async (id) => {
-      await axiosInstance.delete(`/admin/api-tokens/${id}`);
+      await del(`/admin/api-tokens/${id}`);
     },
     {
       async onSuccess() {

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

@@ -2,9 +2,7 @@ import React, { useReducer, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useTracking } from '@strapi/helper-plugin';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
+import { Grid, GridItem, Box, Typography } from '@strapi/design-system';
 import { useConfigurations } from '../../../../../../hooks';
 import { DIMENSION, SIZE } from '../../utils/constants';
 import LogoInput from '../LogoInput';

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

@@ -1,11 +1,14 @@
 import React, { useReducer } from 'react';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import { CarouselInput, CarouselSlide, CarouselActions } from '@strapi/design-system/CarouselInput';
-import { IconButton } from '@strapi/design-system/IconButton';
-import { Box } from '@strapi/design-system/Box';
-import Plus from '@strapi/icons/Plus';
-import Refresh from '@strapi/icons/Refresh';
+import {
+  CarouselInput,
+  CarouselSlide,
+  CarouselActions,
+  IconButton,
+  Box,
+} from '@strapi/design-system';
+import { Plus, Refresh } from '@strapi/icons';
 import LogoModalStepper from '../LogoModalStepper';
 import reducer, { initialState } from './reducer';
 import stepper from './stepper';

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

@@ -1,9 +1,7 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import { Tabs, Tab, TabGroup, TabPanels, TabPanel } from '@strapi/design-system/Tabs';
-import { Box } from '@strapi/design-system/Box';
-import { Divider } from '@strapi/design-system/Divider';
+import { Tabs, Tab, TabGroup, TabPanels, TabPanel, Box, Divider } from '@strapi/design-system';
 import FromComputerForm from './FromComputerForm';
 import FromUrlForm from './FromUrlForm';
 

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

@@ -2,15 +2,19 @@ import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { Flex } from '@strapi/design-system/Flex';
-import { Icon } from '@strapi/design-system/Icon';
-import { Typography } from '@strapi/design-system/Typography';
-import { ModalFooter } from '@strapi/design-system/ModalLayout';
-import { Button } from '@strapi/design-system/Button';
-import { Field, FieldError, FieldInput } from '@strapi/design-system/Field';
-import PicturePlus from '@strapi/icons/PicturePlus';
+import {
+  Box,
+  Stack,
+  Flex,
+  Icon,
+  Typography,
+  ModalFooter,
+  Button,
+  Field,
+  FieldError,
+  FieldInput,
+} from '@strapi/design-system';
+import { PicturePlus } from '@strapi/icons';
 import { parseFileMetadatas } from '../../utils/parseFileMetadatas';
 import { ACCEPTED_FORMAT, SIZE, DIMENSION } from '../../utils/constants';
 

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

@@ -1,10 +1,7 @@
 import React, { useState } from 'react';
 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 { TextInput } from '@strapi/design-system/TextInput';
-import { ModalFooter } from '@strapi/design-system/ModalLayout';
+import { Box, Button, TextInput, ModalFooter } from '@strapi/design-system';
 import urlToFile from '../../utils/urlToFile';
 import { parseFileMetadatas } from '../../utils/parseFileMetadatas';
 import { SIZE, DIMENSION } from '../../utils/constants';

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/ApplicationInfosPage/utils/api.js

@@ -1,14 +1,16 @@
-import { axiosInstance } from '../../../../../core/utils';
+import { getFetchClient } from '@strapi/helper-plugin';
 import prefixAllUrls from './prefixAllUrls';
 
 const fetchProjectSettings = async () => {
-  const { data } = await axiosInstance.get('/admin/project-settings');
+  const { get } = getFetchClient();
+  const { data } = await get('/admin/project-settings');
 
   return prefixAllUrls(data);
 };
 
 const postProjectSettings = async (body) => {
-  const { data } = await axiosInstance.post('/admin/project-settings', body, {
+  const { post } = getFetchClient();
+  const { data } = await post('/admin/project-settings', body, {
     headers: {
       'Content-Type': 'multipart/form-data',
     },

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';