chore: Update @strapi packages and alter imports accordingly

admin/src/components/ActionButtons/index.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import { useDispatch, useSelector } from 'react-redux';
 import { isEmpty } from 'lodash';
-import { Button } from '@strapi/design-system/Button';
+import { Button } from '@strapi/design-system';
 import { Map } from 'immutable';
 import { useNotification } from '@strapi/helper-plugin';
 

admin/src/components/ConfigDiff/index.js

@@ -1,9 +1,14 @@
 import React from 'react';
 import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer';
 
-import { ModalLayout, ModalBody, ModalHeader } from '@strapi/design-system/ModalLayout';
+import {
-import { Grid, GridItem } from '@strapi/design-system/Grid';
+  ModalLayout,
-import { Typography } from '@strapi/design-system/Typography';
+  ModalBody,
+  ModalHeader,
+  Grid,
+  GridItem,
+  Typography,
+} from '@strapi/design-system';
 
 const ConfigDiff = ({ isOpen, onClose, oldValue, newValue, configName }) => {
   if (!isOpen) {

admin/src/components/ConfigList/ConfigListRow/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Tr, Td } from '@strapi/design-system/Table';
+import { Tr, Td, BaseCheckbox } from '@strapi/design-system';
-import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
 
 const CustomRow = ({ row, checked, updateValue }) => {
   const { configName, configType, state, onClick } = row;

admin/src/components/ConfigList/index.js

@@ -2,10 +2,16 @@ import React, { useState, useEffect } from 'react';
 import { isEmpty } from 'lodash';
 import { useDispatch } from 'react-redux';
 
-import { Table, Thead, Tbody, Tr, Th } from '@strapi/design-system/Table';
+import {
-import { Typography } from '@strapi/design-system/Typography';
+  Table,
-import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
+  Thead,
-import { Loader } from '@strapi/design-system/Loader';
+  Tbody,
+  Tr,
+  Th,
+  Typography,
+  BaseCheckbox,
+  Loader,
+} from '@strapi/design-system';
 
 import ConfigDiff from '../ConfigDiff';
 import FirstExport from '../FirstExport';

admin/src/components/ConfirmModal/index.js

@@ -1,12 +1,16 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 
-import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog';
+import {
-import { Flex } from '@strapi/design-system/Flex';
+  Dialog,
-import { Typography } from '@strapi/design-system/Typography';
+  DialogBody,
-import { Stack } from '@strapi/design-system/Stack';
+  DialogFooter,
-import { Button } from '@strapi/design-system/Button';
+  Flex,
-import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
+  Typography,
+  Stack,
+  Button,
+} from '@strapi/design-system';
+import { ExclamationMarkCircle } from '@strapi/icons';
 
 const ConfirmModal = ({ isOpen, onClose, onSubmit, type }) => {
   const { formatMessage } = useIntl();

admin/src/components/FirstExport/index.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { NoContent, useNotification } from '@strapi/helper-plugin';
-import { Button } from '@strapi/design-system/Button';
+import { Button } from '@strapi/design-system';
 
 import { exportAllConfig } from '../../state/actions/Config';
 import ConfirmModal from '../ConfirmModal';

admin/src/components/Header/index.js

@@ -7,8 +7,7 @@
 import React, { memo } from 'react';
 import { useIntl } from 'react-intl';
 
-import { HeaderLayout } from '@strapi/design-system/Layout';
+import { HeaderLayout, Box } from '@strapi/design-system';
-import { Box } from '@strapi/design-system/Box';
 
 const HeaderComponent = () => {
   const { formatMessage } = useIntl();

admin/src/components/PluginIcon/index.js

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { Icon } from '@strapi/design-system/Icon';
+import { Icon } from '@strapi/design-system';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import pluginPkg from '../../../../package.json';

admin/src/containers/ConfigPage/index.js

@@ -1,11 +1,13 @@
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Map } from 'immutable';
-import { Box } from '@strapi/design-system/Box';
+import {
-import { ContentLayout } from '@strapi/design-system/Layout';
+  Box,
+  ContentLayout,
+  Alert,
+  Typography,
+} from '@strapi/design-system';
 import { useNotification } from '@strapi/helper-plugin';
-import { Alert } from '@strapi/design-system/Alert';
-import { Typography } from '@strapi/design-system/Typography';
 
 import { getAllConfigDiff, getAppEnv } from '../../state/actions/Config';
 import ConfigList from '../../components/ConfigList';

package.json

@@ -58,10 +58,10 @@
   },
   "devDependencies": {
     "@fortawesome/react-fontawesome": "^0.1.16",
-    "@strapi/design-system": "^0.0.1-alpha.79",
+    "@strapi/design-system": "^1.3.1",
-    "@strapi/helper-plugin": "^4.1.8",
+    "@strapi/helper-plugin": "^4.5.2",
-    "@strapi/icons": "^0.0.1-alpha.79",
+    "@strapi/icons": "^1.3.1",
-    "@strapi/utils": "^4.1.8",
+    "@strapi/utils": "^4.5.2",
     "babel-eslint": "9.0.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",