@strapi/admin 4.6.1 → 4.6.2

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, Stack } from '@strapi/design-system';
+import { Github, Download, Star } from '@strapi/icons';
 import { pxToRem } from '@strapi/helper-plugin';
 
 const VerticalDivider = styled(Divider)`

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

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, Stack, FocusTrap } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import FilterSelect from './FilterSelect';
 

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 = () => {

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

@@ -17,20 +17,23 @@ import upperFirst from 'lodash/upperFirst';
 import { useQuery, useMutation, useQueryClient } from 'react-query';
 import pick from 'lodash/pick';
 import { Helmet } from 'react-helmet';
-import { Main } from '@strapi/design-system/Main';
-import { Typography } from '@strapi/design-system/Typography';
-import { Box } from '@strapi/design-system/Box';
-import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
-import { Button } from '@strapi/design-system/Button';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Stack } from '@strapi/design-system/Stack';
-import { useNotifyAT } from '@strapi/design-system/LiveRegions';
-import { Select, Option } from '@strapi/design-system/Select';
-import { FieldAction } from '@strapi/design-system/Field';
-import { TextInput } from '@strapi/design-system/TextInput';
-import Eye from '@strapi/icons/Eye';
-import EyeStriked from '@strapi/icons/EyeStriked';
-import Check from '@strapi/icons/Check';
+import {
+  Main,
+  Typography,
+  Box,
+  ContentLayout,
+  HeaderLayout,
+  Button,
+  Grid,
+  GridItem,
+  Stack,
+  useNotifyAT,
+  Select,
+  Option,
+  FieldAction,
+  TextInput,
+} from '@strapi/design-system';
+import { Eye, EyeStriked, Check } from '@strapi/icons';
 import useLocalesProvider from '../../components/LocalesProvider/useLocalesProvider';
 import { useThemeToggle } from '../../hooks';
 import { fetchUser, putUser } from './utils/api';

package/admin/src/pages/SettingsPage/components/Filters/index.js

@@ -1,9 +1,8 @@
 import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Button } from '@strapi/design-system/Button';
-import { Box } from '@strapi/design-system/Box';
-import Filter from '@strapi/icons/Filter';
+import { Button, Box } from '@strapi/design-system';
+import { Filter } from '@strapi/icons';
 import { FilterListURLQuery, FilterPopoverURLQuery } from '@strapi/helper-plugin';
 
 const Filters = ({ displayedFilters }) => {

package/admin/src/pages/SettingsPage/components/SettingsNav/index.js

@@ -1,18 +1,21 @@
 import React from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
+import { useTracking } from '@strapi/helper-plugin';
 import {
   SubNav,
   SubNavHeader,
   SubNavSection,
   SubNavSections,
   SubNavLink,
-} from '@strapi/design-system/v2/SubNav';
+} from '@strapi/design-system/v2';
 import { getSectionsToDisplay } from '../../utils';
 
 const SettingsNav = ({ menu }) => {
   const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+  const { pathname } = useLocation();
 
   const filteredMenu = getSectionsToDisplay(menu);
 
@@ -35,6 +38,10 @@ const SettingsNav = ({ menu }) => {
     defaultMessage: 'Settings',
   });
 
+  const handleClickOnLink = (destination = null) => {
+    trackUsage('willNavigate', { from: pathname, to: destination });
+  };
+
   return (
     <SubNav ariaLabel={label}>
       <SubNavHeader label={label} />
@@ -42,7 +49,13 @@ const SettingsNav = ({ menu }) => {
         {sections.map((section) => (
           <SubNavSection key={section.id} label={formatMessage(section.intlLabel)}>
             {section.links.map((link) => (
-              <SubNavLink as={NavLink} withBullet={link.hasNotification} to={link.to} key={link.id}>
+              <SubNavLink
+                as={NavLink}
+                withBullet={link.hasNotification}
+                to={link.to}
+                onClick={() => handleClickOnLink(link.to)}
+                key={link.id}
+              >
                 {formatMessage(link.intlLabel)}
               </SubNavLink>
             ))}

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

@@ -12,7 +12,7 @@
 import React, { memo, useMemo } from 'react';
 import { LoadingIndicatorPage, useStrapiApp } from '@strapi/helper-plugin';
 import { Switch, Redirect, Route, useParams } from 'react-router-dom';
-import { Layout } from '@strapi/design-system/Layout';
+import { Layout } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import { Helmet } from 'react-helmet';
 import { useSettingsMenu } from '../../hooks';

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

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

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

@@ -1,8 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Stack } from '@strapi/design-system/Stack';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
+import { Stack, Box, Typography } from '@strapi/design-system';
 import map from 'lodash/map';
 import tail from 'lodash/tail';
 import { useIntl } from 'react-intl';

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/CollapsableContentType/CheckBoxWrapper.js

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
+import { Box } from '@strapi/design-system';
 
 const activeCheckboxWrapperStyles = css`
   background: ${(props) => props.theme.colors.primary100};

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

@@ -1,12 +1,17 @@
 import React, { useState, useEffect } from 'react';
 import { capitalize } from 'lodash';
-import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
-import { Checkbox } from '@strapi/design-system/Checkbox';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Typography } from '@strapi/design-system/Typography';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import CogIcon from '@strapi/icons/Cog';
+import {
+  Accordion,
+  AccordionToggle,
+  AccordionContent,
+  Checkbox,
+  Grid,
+  GridItem,
+  Typography,
+  Box,
+  Flex,
+} from '@strapi/design-system';
+import { Cog } from '@strapi/icons';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useApiTokenPermissionsContext } from '../../../../../../../contexts/ApiTokenPermissions';
@@ -115,7 +120,7 @@ const CollapsableContentType = ({
                             }
                             style={{ display: 'inline-flex', alignItems: 'center' }}
                           >
-                            <CogIcon />
+                            <Cog />
                           </button>
                         </CheckboxWrapper>
                       </GridItem>

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/ContenTypesSection/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 CollapsableContentType from '../CollapsableContentType';
 
 const ContentTypesSection = ({ section, ...props }) => {

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

@@ -1,11 +1,10 @@
 import React, { useRef } from 'react';
 import { useIntl } from 'react-intl';
 import { ContentBox, useNotification, useTracking } from '@strapi/helper-plugin';
-import { IconButton } from '@strapi/design-system/IconButton';
-import Duplicate from '@strapi/icons/Duplicate';
+import { IconButton } from '@strapi/design-system';
+import { Duplicate, Key } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import Key from '@strapi/icons/Key';
 
 const HeaderContentBox = ({ apiToken }) => {
   const { formatMessage } = useIntl();

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

@@ -11,7 +11,7 @@ import {
   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';

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

@@ -17,10 +17,8 @@ import {
   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 adminPermissions from '../../../../../permissions';
 import tableHeaders from './utils/tableHeaders';