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

package/admin/src/content-manager/pages/EditSettingsView/components/RowsLayout.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Grid } from '@strapi/design-system/Grid';
+import { Grid } from '@strapi/design-system';
 import RowItemsLayout from './RowItemsLayout';
 
 const RowsLayout = ({ row, onRemoveField, rowIndex }) => {

package/admin/src/content-manager/pages/EditSettingsView/index.js

@@ -11,17 +11,21 @@ import get from 'lodash/get';
 import set from 'lodash/set';
 import { useNotification, useTracking, ConfirmDialog, Link } from '@strapi/helper-plugin';
 import { useHistory } from 'react-router-dom';
-import { Main } from '@strapi/design-system/Main';
-import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
-import { Button } from '@strapi/design-system/Button';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Select, Option } from '@strapi/design-system/Select';
-import { Stack } from '@strapi/design-system/Stack';
-import { Divider } from '@strapi/design-system/Divider';
-import ArrowLeft from '@strapi/icons/ArrowLeft';
-import Check from '@strapi/icons/Check';
+import {
+  Main,
+  HeaderLayout,
+  ContentLayout,
+  Button,
+  Box,
+  Typography,
+  Grid,
+  GridItem,
+  Select,
+  Option,
+  Stack,
+  Divider,
+} from '@strapi/design-system';
+import { ArrowLeft, Check } from '@strapi/icons';
 import { getTrad } from '../../utils';
 import reducer, { initialState } from './reducer';
 import init from './init';

package/admin/src/content-manager/pages/EditView/DeleteLink/index.js

@@ -1,10 +1,9 @@
 import React, { memo, useState } from 'react';
 import { useIntl } from 'react-intl';
-import get from 'lodash/get';
 import isEqual from 'react-fast-compare';
-import { Button } from '@strapi/design-system/Button';
-import Trash from '@strapi/icons/Trash';
-import { ConfirmDialog, useNotification } from '@strapi/helper-plugin';
+import { Button } from '@strapi/design-system';
+import { Trash } from '@strapi/icons';
+import { ConfirmDialog, useNotification, useAPIErrorHandler } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import { getTrad } from '../../../utils';
 import { connect, select } from './utils';
@@ -13,6 +12,7 @@ const DeleteLink = ({ isCreatingEntry, onDelete, onDeleteSucceeded, trackerPrope
   const [showWarningDelete, setWarningDelete] = useState(false);
   const [isModalConfirmButtonLoading, setIsModalConfirmButtonLoading] = useState(false);
   const { formatMessage } = useIntl();
+  const { formatAPIError } = useAPIErrorHandler(getTrad);
   const toggleNotification = useNotification();
 
   const toggleWarningDelete = () => setWarningDelete((prevState) => !prevState);
@@ -29,14 +29,12 @@ const DeleteLink = ({ isCreatingEntry, onDelete, onDeleteSucceeded, trackerPrope
       toggleWarningDelete();
       onDeleteSucceeded();
     } catch (err) {
-      const errorMessage = get(
-        err,
-        'response.payload.message',
-        formatMessage({ id: getTrad('error.record.delete') })
-      );
       setIsModalConfirmButtonLoading(false);
       toggleWarningDelete();
-      toggleNotification({ type: 'warning', message: errorMessage });
+      toggleNotification({
+        type: 'warning',
+        message: formatAPIError(err),
+      });
     }
   };
 

package/admin/src/content-manager/pages/EditView/DraftAndPublishBadge/index.js

@@ -2,15 +2,13 @@ import React 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 { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import Bullet from '@strapi/icons/Dot';
+import { Box, Flex, Typography } from '@strapi/design-system';
+import { Dot } from '@strapi/icons';
 import { pxToRem } from '@strapi/helper-plugin';
 import { getTrad } from '../../../utils';
 import { connect, select } from './utils';
 
-const CustomBullet = styled(Bullet)`
+const CustomBullet = styled(Dot)`
   width: ${pxToRem(6)};
   height: ${pxToRem(6)};
   * {

package/admin/src/content-manager/pages/EditView/GridRow/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
+import { Grid, GridItem } from '@strapi/design-system';
 import Inputs from '../../../components/Inputs';
 import FieldComponent from '../../../components/FieldComponent';
 

package/admin/src/content-manager/pages/EditView/Header/index.js

@@ -6,17 +6,19 @@ import isEqualFastCompare from 'react-fast-compare';
 import get from 'lodash/get';
 import isEqual from 'lodash/isEqual';
 import isEmpty from 'lodash/isEmpty';
-import ArrowLeft from '@strapi/icons/ArrowLeft';
+import { ArrowLeft, Check, ExclamationMarkCircle } from '@strapi/icons';
 import { Link } from '@strapi/helper-plugin';
-import { HeaderLayout } from '@strapi/design-system/Layout';
-import { Box } from '@strapi/design-system/Box';
-import { Button } from '@strapi/design-system/Button';
-import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import { Stack } from '@strapi/design-system/Stack';
-import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
-import Check from '@strapi/icons/Check';
+import {
+  HeaderLayout,
+  Box,
+  Button,
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  Flex,
+  Typography,
+  Stack,
+} from '@strapi/design-system';
 import styled from 'styled-components';
 import { getTrad } from '../../../utils';
 import { connect, select } from './utils';

package/admin/src/content-manager/pages/EditView/index.js

@@ -8,13 +8,8 @@ import {
   LoadingIndicatorPage,
 } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
-import { ContentLayout } from '@strapi/design-system/Layout';
-import { Box } from '@strapi/design-system/Box';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Main } from '@strapi/design-system/Main';
-import { Stack } from '@strapi/design-system/Stack';
-import Layer from '@strapi/icons/Layer';
-import Pencil from '@strapi/icons/Pencil';
+import { ContentLayout, Box, Grid, GridItem, Main, Stack } from '@strapi/design-system';
+import { Pencil, Layer } from '@strapi/icons';
 import { InjectionZone } from '../../../shared/components';
 import permissions from '../../../permissions';
 import DynamicZone from '../../components/DynamicZone';

package/admin/src/content-manager/pages/ListSettingsView/components/CardPreview.js

@@ -1,12 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import { Stack } from '@strapi/design-system/Stack';
-import Pencil from '@strapi/icons/Pencil';
-import Cross from '@strapi/icons/Cross';
-import Drag from '@strapi/icons/Drag';
+import { Flex, Typography, Stack } from '@strapi/design-system';
+import { Pencil, Cross, Drag } from '@strapi/icons';
 import ellipsisCardTitle from '../utils/ellipsisCardTitle';
 
 const ActionBox = styled(Flex)`

package/admin/src/content-manager/pages/ListSettingsView/components/DraggableCard.js

@@ -4,13 +4,8 @@ import PropTypes from 'prop-types';
 import { useDrag, useDrop } from 'react-dnd';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 import { useIntl } from 'react-intl';
-import { Flex } from '@strapi/design-system/Flex';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
-import { Stack } from '@strapi/design-system/Stack';
-import Pencil from '@strapi/icons/Pencil';
-import Cross from '@strapi/icons/Cross';
-import Drag from '@strapi/icons/Drag';
+import { Flex, Box, Typography, Stack } from '@strapi/design-system';
+import { Pencil, Cross, Drag } from '@strapi/icons';
 import CardPreview from './CardPreview';
 import ellipsisCardTitle from '../utils/ellipsisCardTitle';
 import { getTrad, ItemTypes } from '../../../utils';

package/admin/src/content-manager/pages/ListSettingsView/components/EditFieldForm.js

@@ -8,13 +8,14 @@ import {
   ModalHeader,
   ModalFooter,
   ModalBody,
-} from '@strapi/design-system/ModalLayout';
-import { Typography } from '@strapi/design-system/Typography';
-import { Button } from '@strapi/design-system/Button';
-import { Flex } from '@strapi/design-system/Flex';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { TextInput } from '@strapi/design-system/TextInput';
-import { ToggleInput } from '@strapi/design-system/ToggleInput';
+  Typography,
+  Button,
+  Flex,
+  Grid,
+  GridItem,
+  TextInput,
+  ToggleInput,
+} from '@strapi/design-system';
 import { getTrad } from '../../../utils';
 import FieldTypeIcon from '../../../components/FieldTypeIcon';
 

package/admin/src/content-manager/pages/ListSettingsView/components/Settings.js

@@ -1,12 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Box } from '@strapi/design-system/Box';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Select, Option } from '@strapi/design-system/Select';
-import { ToggleInput } from '@strapi/design-system/ToggleInput';
-import { Stack } from '@strapi/design-system/Stack';
-import { Typography } from '@strapi/design-system/Typography';
+import {
+  Box,
+  Grid,
+  GridItem,
+  Select,
+  Option,
+  ToggleInput,
+  Stack,
+  Typography,
+} from '@strapi/design-system';
 import { getTrad } from '../../../utils';
 
 const Settings = ({ modifiedData, onChange, sortOptions }) => {

package/admin/src/content-manager/pages/ListSettingsView/components/SortDisplayedFields.js

@@ -2,13 +2,16 @@ import React, { useState, useRef, useEffect } 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 { Flex } from '@strapi/design-system/Flex';
-import { Stack } from '@strapi/design-system/Stack';
-import { Typography } from '@strapi/design-system/Typography';
-import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
-import { IconButton } from '@strapi/design-system/IconButton';
-import Plus from '@strapi/icons/Plus';
+import {
+  Box,
+  Flex,
+  Stack,
+  Typography,
+  SimpleMenu,
+  MenuItem,
+  IconButton,
+} from '@strapi/design-system';
+import { Plus } from '@strapi/icons';
 import DraggableCard from './DraggableCard';
 import { getTrad } from '../../../utils';
 

package/admin/src/content-manager/pages/ListSettingsView/index.js

@@ -9,13 +9,16 @@ import isEmpty from 'lodash/isEmpty';
 import { stringify } from 'qs';
 import { useNotification, useTracking, ConfirmDialog, Link } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
-import { Box } from '@strapi/design-system/Box';
-import { Divider } from '@strapi/design-system/Divider';
-import { Layout, 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 ArrowLeft from '@strapi/icons/ArrowLeft';
+import {
+  Box,
+  Divider,
+  Layout,
+  HeaderLayout,
+  ContentLayout,
+  Main,
+  Button,
+} from '@strapi/design-system';
+import { Check, ArrowLeft } from '@strapi/icons';
 import { checkIfAttributeIsDisplayable, getTrad } from '../../utils';
 import ModelsContext from '../../contexts/ModelsContext';
 import { usePluginsQueryParams } from '../../hooks';

package/admin/src/content-manager/pages/ListView/FieldPicker/index.js

@@ -2,8 +2,7 @@ import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useIntl } from 'react-intl';
-import { Select, Option } from '@strapi/design-system/Select';
-import { Box } from '@strapi/design-system/Box';
+import { Select, Option, Box } from '@strapi/design-system';
 import { useTracking } from '@strapi/helper-plugin';
 import { onChangeListHeaders } from '../actions';
 import { selectDisplayedHeaders } from '../selectors';

package/admin/src/content-manager/pages/ListView/PaginationFooter/index.js

@@ -1,7 +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 { Box, Flex } from '@strapi/design-system';
 import { PaginationURLQuery, PageSizeURLQuery } from '@strapi/helper-plugin';
 
 const PaginationFooter = ({ pagination }) => {

package/admin/src/content-manager/pages/ListView/index.js

@@ -21,18 +21,21 @@ import {
   useRBACProvider,
   useTracking,
   Link,
+  useAPIErrorHandler,
 } from '@strapi/helper-plugin';
 
-import { IconButton } from '@strapi/design-system/IconButton';
-import { Main } from '@strapi/design-system/Main';
-import { Box } from '@strapi/design-system/Box';
-import { ActionLayout, ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
-import { useNotifyAT } from '@strapi/design-system/LiveRegions';
-import { Button } from '@strapi/design-system/Button';
-
-import ArrowLeft from '@strapi/icons/ArrowLeft';
-import Plus from '@strapi/icons/Plus';
-import Cog from '@strapi/icons/Cog';
+import {
+  IconButton,
+  Main,
+  Box,
+  ActionLayout,
+  ContentLayout,
+  HeaderLayout,
+  useNotifyAT,
+  Button,
+} from '@strapi/design-system';
+
+import { ArrowLeft, Plus, Cog } from '@strapi/icons';
 
 import DynamicTable from '../../components/DynamicTable';
 import AttributeFilter from '../../components/AttributeFilter';
@@ -84,6 +87,7 @@ function ListView({
   const trackUsageRef = useRef(trackUsage);
   const fetchPermissionsRef = useRef(refetchPermissions);
   const { notifyStatus } = useNotifyAT();
+  const { formatAPIError } = useAPIErrorHandler(getTrad);
 
   useFocusWhenNavigate();
 
@@ -148,7 +152,6 @@ function ListView({
           return;
         }
 
-        console.error(err);
         toggleNotification({
           type: 'warning',
           message: { id: getTrad('error.model.fetch') },
@@ -171,11 +174,11 @@ function ListView({
       } catch (err) {
         toggleNotification({
           type: 'warning',
-          message: { id: getTrad('error.record.delete') },
+          message: formatAPIError(err),
         });
       }
     },
-    [fetchData, params, slug, toggleNotification, post]
+    [fetchData, params, slug, toggleNotification, formatAPIError, post]
   );
 
   const handleConfirmDeleteData = useCallback(
@@ -191,19 +194,13 @@ function ListView({
           message: { id: getTrad('success.record.delete') },
         });
       } catch (err) {
-        const errorMessage = get(
-          err,
-          'response.payload.message',
-          formatMessage({ id: getTrad('error.record.delete') })
-        );
-
         toggleNotification({
           type: 'warning',
-          message: errorMessage,
+          message: formatAPIError(err),
         });
       }
     },
-    [slug, params, fetchData, toggleNotification, formatMessage, del]
+    [slug, params, fetchData, toggleNotification, formatAPIError, del]
   );
 
   useEffect(() => {

package/admin/src/content-manager/pages/NoContentType/index.js

@@ -1,10 +1,7 @@
 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 Plus from '@strapi/icons/Plus';
-import EmptyDocuments from '@strapi/icons/EmptyDocuments';
+import { Main, ContentLayout, HeaderLayout, EmptyStateLayout } from '@strapi/design-system';
+import { Plus, EmptyDocuments } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { getTrad } from '../../utils';
 

package/admin/src/content-manager/pages/NoPermissions/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useFocusWhenNavigate, NoPermissions as NoPermissionsCompo } from '@strapi/helper-plugin';
-import { Main } from '@strapi/design-system/Main';
-import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
+import { Main, ContentLayout, HeaderLayout } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import { getTrad } from '../../utils';
 

package/admin/src/hooks/useMenu/reducer.js

@@ -1,8 +1,6 @@
 /* eslint-disable consistent-return */
 import produce from 'immer';
-import Cog from '@strapi/icons/Cog';
-import Puzzle from '@strapi/icons/Puzzle';
-import ShoppingCart from '@strapi/icons/ShoppingCart';
+import { Cog, Puzzle, ShoppingCart } from '@strapi/icons';
 import adminPermissions from '../../permissions';
 
 const initialState = {

package/admin/src/layouts/AppLayout/index.js

@@ -1,7 +1,5 @@
 import React from 'react';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { SkipToContent } from '@strapi/design-system/Main';
+import { Box, Flex, SkipToContent } from '@strapi/design-system';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';

package/admin/src/layouts/UnauthenticatedLayout/LocaleToggle/index.js

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
+import { SimpleMenu, MenuItem } from '@strapi/design-system';
 import useLocalesProvider from '../../../components/LocalesProvider/useLocalesProvider';
 
 const LocaleToggle = () => {

package/admin/src/layouts/UnauthenticatedLayout/index.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
+import { Box, Flex } from '@strapi/design-system';
 import LocaleToggle from './LocaleToggle';
 
 const Wrapper = styled(Box)`

package/admin/src/pages/Admin/Onboarding/index.js

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from 'react';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
+import { useAppInfos } from '@strapi/helper-plugin';
 import {
   Box,
   Button,
@@ -14,7 +15,7 @@ import {
   Typography,
   VisuallyHidden,
 } from '@strapi/design-system';
-import { Cross, Play, Question } from '@strapi/icons';
+import { Cross, Message, Play, Question } from '@strapi/icons';
 
 import onboardingPreview from '../../../assets/images/onboarding-preview.png';
 import { VIDEO_LINKS, DOCUMENTATION_LINKS, WATCH_MORE } from './constants';
@@ -78,11 +79,23 @@ const Onboarding = () => {
   const triggerRef = useRef();
   const [isOpen, setIsOpen] = useState(false);
   const { formatMessage } = useIntl();
+  const { communityEdition } = useAppInfos();
 
   const handlePopoverVisibility = () => {
     setIsOpen((prev) => !prev);
   };
 
+  const docLinks = [
+    ...DOCUMENTATION_LINKS,
+    {
+      label: { id: 'Settings.application.get-help', defaultMessage: 'Get help' },
+      icon: Message,
+      href: communityEdition
+        ? 'https://discord.strapi.io'
+        : 'https://support.strapi.io/support/home',
+    },
+  ];
+
   return (
     <Box as="aside" position="fixed" bottom={2} right={2}>
       <HelperButton
@@ -180,7 +193,7 @@ const Onboarding = () => {
                 </VideoLinkWrapper>
               ))}
               <Stack spacing={2} paddingLeft={5} paddingTop={2} paddingBottom={5}>
-                {DOCUMENTATION_LINKS.map(({ label, href, icon }) => (
+                {docLinks.map(({ label, href, icon }) => (
                   <Stack horizontal spacing={3} key={href}>
                     <Icon as={icon} color="primary600" />
                     <TextLink

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

@@ -17,7 +17,7 @@ import {
   useFetchClient,
 } from '@strapi/helper-plugin';
 import axios from 'axios';
-import { SkipToContent } from '@strapi/design-system/Main';
+import { SkipToContent } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import PrivateRoute from '../../components/PrivateRoute';
 import { createRoute, makeUniqueRoutes } from '../../utils';

package/admin/src/pages/AuthPage/components/FieldActionWrapper/index.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { FieldAction } from '@strapi/design-system/Field';
+import { FieldAction } from '@strapi/design-system';
 
 const FieldActionWrapper = styled(FieldAction)`
   svg {

package/admin/src/pages/AuthPage/components/ForgotPassword/index.js

@@ -2,13 +2,7 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { Form, Link } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { Main } from '@strapi/design-system/Main';
-import { Flex } from '@strapi/design-system/Flex';
-import { Button } from '@strapi/design-system/Button';
-import { TextInput } from '@strapi/design-system/TextInput';
-import { Typography } from '@strapi/design-system/Typography';
+import { Box, Stack, Main, Flex, Button, TextInput, Typography } from '@strapi/design-system';
 import { Formik } from 'formik';
 import UnauthenticatedLayout, {
   Column,

package/admin/src/pages/AuthPage/components/ForgotPasswordSuccess/index.js

@@ -1,10 +1,7 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { Link } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
-import { Main } from '@strapi/design-system/Main';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
+import { Box, Main, Flex, Typography } from '@strapi/design-system';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,

package/admin/src/pages/AuthPage/components/Login/BaseLogin.js

@@ -1,15 +1,16 @@
 import React, { useState } from 'react';
 import { Form, Link } from '@strapi/helper-plugin';
-import EyeStriked from '@strapi/icons/EyeStriked';
-import Eye from '@strapi/icons/Eye';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { Main } from '@strapi/design-system/Main';
-import { Flex } from '@strapi/design-system/Flex';
-import { Button } from '@strapi/design-system/Button';
-import { TextInput } from '@strapi/design-system/TextInput';
-import { Checkbox } from '@strapi/design-system/Checkbox';
-import { Typography } from '@strapi/design-system/Typography';
+import { EyeStriked, Eye } from '@strapi/icons';
+import {
+  Box,
+  Stack,
+  Main,
+  Flex,
+  Button,
+  TextInput,
+  Checkbox,
+  Typography,
+} from '@strapi/design-system';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';

package/admin/src/pages/AuthPage/components/Oops/index.js

@@ -1,10 +1,7 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { useQuery, Link } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
-import { Main } from '@strapi/design-system/Main';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
+import { Box, Main, Flex, Typography } from '@strapi/design-system';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,

package/admin/src/pages/AuthPage/components/Register/index.js

@@ -15,17 +15,19 @@ import {
   getYupInnerErrors,
   Link,
 } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { Main } from '@strapi/design-system/Main';
-import { Flex } from '@strapi/design-system/Flex';
-import { Button } from '@strapi/design-system/Button';
-import { TextInput } from '@strapi/design-system/TextInput';
-import { Checkbox } from '@strapi/design-system/Checkbox';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Typography } from '@strapi/design-system/Typography';
-import EyeStriked from '@strapi/icons/EyeStriked';
-import Eye from '@strapi/icons/Eye';
+import {
+  Box,
+  Stack,
+  Main,
+  Flex,
+  Button,
+  TextInput,
+  Checkbox,
+  Grid,
+  GridItem,
+  Typography,
+} from '@strapi/design-system';
+import { EyeStriked, Eye } from '@strapi/icons';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,