@strapi/admin 4.6.0 → 4.6.2

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/Users/EditPage/index.js

@@ -19,15 +19,18 @@ import {
 } from '@strapi/helper-plugin';
 import { useQuery } from 'react-query';
 import { Formik } from 'formik';
-import { Box } from '@strapi/design-system/Box';
-import { Button } from '@strapi/design-system/Button';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
-import { Typography } from '@strapi/design-system/Typography';
-import { Main } from '@strapi/design-system/Main';
-import { Stack } from '@strapi/design-system/Stack';
-import ArrowLeft from '@strapi/icons/ArrowLeft';
-import Check from '@strapi/icons/Check';
+import {
+  Box,
+  Button,
+  Grid,
+  GridItem,
+  HeaderLayout,
+  ContentLayout,
+  Typography,
+  Main,
+  Stack,
+} from '@strapi/design-system';
+import { ArrowLeft, Check } from '@strapi/icons';
 import MagicLink from 'ee_else_ce/pages/SettingsPage/pages/Users/components/MagicLink';
 import { formatAPIErrors, getFullName } from '../../../../../utils';
 import { fetchUser, putUser } from './utils/api';

package/admin/src/pages/SettingsPage/pages/Users/EditPage/utils/api.js

@@ -1,13 +1,16 @@
-import { axiosInstance } from '../../../../../../core/utils';
+import { getFetchClient } from '@strapi/helper-plugin';
 
 const fetchUser = async (id) => {
-  const { data } = await axiosInstance.get(`/admin/users/${id}`);
+  const { get } = getFetchClient();
+  const { data } = await get(`/admin/users/${id}`);
 
   return data.data;
 };
 
 const putUser = async (id, body) => {
-  const { data } = await axiosInstance.put(`/admin/users/${id}`, body);
+  const { put } = getFetchClient();
+
+  const { data } = await put(`/admin/users/${id}`, body);
 
   return data.data;
 };

package/admin/src/pages/SettingsPage/pages/Users/ListPage/DynamicTable/TableRows/index.js

@@ -1,13 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
-import { Box } from '@strapi/design-system/Box';
-import { IconButton } from '@strapi/design-system/IconButton';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import { Tbody, Td, Tr } from '@strapi/design-system/Table';
-import Pencil from '@strapi/icons/Pencil';
-import Trash from '@strapi/icons/Trash';
+import {
+  BaseCheckbox,
+  Box,
+  IconButton,
+  Flex,
+  Typography,
+  Tbody,
+  Td,
+  Tr,
+} from '@strapi/design-system';
+import { Pencil, Trash } from '@strapi/icons';
 import { useHistory } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 import { stopPropagation, onRowClick } from '@strapi/helper-plugin';

package/admin/src/pages/SettingsPage/pages/Users/ListPage/ModalForm/index.js

@@ -6,21 +6,28 @@ import {
   ModalHeader,
   ModalFooter,
   ModalBody,
-} from '@strapi/design-system/ModalLayout';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Breadcrumbs, Crumb } from '@strapi/design-system/Breadcrumbs';
-import { Box } from '@strapi/design-system/Box';
-import { Button } from '@strapi/design-system/Button';
-import { Stack } from '@strapi/design-system/Stack';
-import { Typography } from '@strapi/design-system/Typography';
+  Grid,
+  GridItem,
+  Breadcrumbs,
+  Crumb,
+  Box,
+  Button,
+  Stack,
+  Typography,
+} from '@strapi/design-system';
 
 import { Formik } from 'formik';
-import { Form, GenericInput, useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
+import {
+  Form,
+  GenericInput,
+  useNotification,
+  useOverlayBlocker,
+  useFetchClient,
+} from '@strapi/helper-plugin';
 import { useQueryClient, useMutation } from 'react-query';
 import formDataModel from 'ee_else_ce/pages/SettingsPage/pages/Users/ListPage/ModalForm/utils/formDataModel';
 import roleSettingsForm from 'ee_else_ce/pages/SettingsPage/pages/Users/ListPage/ModalForm/utils/roleSettingsForm';
 import MagicLink from 'ee_else_ce/pages/SettingsPage/pages/Users/components/MagicLink';
-import { axiosInstance } from '../../../../../../core/utils';
 import SelectRoles from '../../components/SelectRoles';
 import layout from './utils/layout';
 import schema from './utils/schema';
@@ -34,9 +41,10 @@ const ModalForm = ({ queryName, onToggle }) => {
   const { formatMessage } = useIntl();
   const toggleNotification = useNotification();
   const { lockApp, unlockApp } = useOverlayBlocker();
+  const { post } = useFetchClient();
   const postMutation = useMutation(
     (body) => {
-      return axiosInstance.post('/admin/users', body);
+      return post('/admin/users', body);
     },
     {
       async onSuccess({ data }) {

package/admin/src/pages/SettingsPage/pages/Users/ListPage/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/pages/SettingsPage/pages/Users/ListPage/index.js

@@ -8,17 +8,21 @@ import {
   useFocusWhenNavigate,
   NoPermissions,
 } from '@strapi/helper-plugin';
-import { ActionLayout, ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
-import { Button } from '@strapi/design-system/Button';
-import { Main } from '@strapi/design-system/Main';
-import { useNotifyAT } from '@strapi/design-system/LiveRegions';
-import Envelop from '@strapi/icons/Envelop';
+import {
+  ActionLayout,
+  ContentLayout,
+  HeaderLayout,
+  Button,
+  Main,
+  useNotifyAT,
+} from '@strapi/design-system';
+import { Envelop } from '@strapi/icons';
 import { useLocation } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import adminPermissions from '../../../../../permissions';
 import TableRows from './DynamicTable/TableRows';
-import Filters from './Filters';
+import Filters from '../../../components/Filters';
 import ModalForm from './ModalForm';
 import PaginationFooter from './PaginationFooter';
 import { deleteData, fetchData } from './utils/api';

package/admin/src/pages/SettingsPage/pages/Users/ListPage/utils/api.js

@@ -1,9 +1,10 @@
-import { axiosInstance } from '../../../../../../core/utils';
+import { getFetchClient } from '@strapi/helper-plugin';
 
 const fetchData = async (search, notify) => {
+  const { get } = getFetchClient();
   const {
     data: { data },
-  } = await axiosInstance.get(`/admin/users${search}`);
+  } = await get(`/admin/users${search}`);
 
   notify();
 
@@ -11,7 +12,9 @@ const fetchData = async (search, notify) => {
 };
 
 const deleteData = async (ids) => {
-  await axiosInstance.post('/admin/users/batch-delete', { ids });
+  const { post } = getFetchClient();
+
+  await post('/admin/users/batch-delete', { ids });
 };
 
 export { deleteData, fetchData };

package/admin/src/pages/SettingsPage/pages/Users/ListPage/utils/tableHeaders.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
+import { Flex, Typography } from '@strapi/design-system';
 import { Status } from '@strapi/helper-plugin';
 
 const tableHeaders = [

package/admin/src/pages/SettingsPage/pages/Users/components/MagicLink/MagicLinkWrapper.js

@@ -1,28 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { IconButton } from '@strapi/design-system/IconButton';
+import { IconButton } from '@strapi/design-system';
 import { useNotification, ContentBox } from '@strapi/helper-plugin';
-import Duplicate from '@strapi/icons/Duplicate';
+import { Duplicate } from '@strapi/icons';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { useIntl } from 'react-intl';
 
-// FIXME replace with parts when ready
-const Envelope = () => (
-  <svg xmlns="http://www.w3.org/2000/svg">
-    <text
-      transform="translate(-23 -9)"
-      fill="#4B515A"
-      fillRule="evenodd"
-      fontSize="32"
-      fontFamily="AppleColorEmoji, Apple Color Emoji"
-    >
-      <tspan x="23" y="36">
-        ✉️
-      </tspan>
-    </text>
-  </svg>
-);
-
 const MagicLinkWrapper = ({ children, target }) => {
   const toggleNotification = useNotification();
   const { formatMessage } = useIntl();
@@ -46,7 +29,7 @@ const MagicLinkWrapper = ({ children, target }) => {
       title={target}
       titleEllipsis
       subtitle={children}
-      icon={<Envelope />}
+      icon={<span style={{ fontSize: 32 }}>✉️</span>}
       iconBackground="neutral100"
     />
   );

package/admin/src/pages/SettingsPage/pages/Users/components/SelectRoles/index.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Select, Option } from '@strapi/design-system/Select';
+import { Select, Option } from '@strapi/design-system';
 import { useQuery } from 'react-query';
 import styled, { keyframes } from 'styled-components';
-import LoadingIcon from '@strapi/icons/Loader';
-import { axiosInstance } from '../../../../../../core/utils';
+import { Loader as LoadingIcon } from '@strapi/icons';
+import { getFetchClient } from '@strapi/helper-plugin';
 
 const rotation = keyframes`
   from {
@@ -27,7 +27,8 @@ const Loader = () => (
 );
 
 const fetchData = async () => {
-  const { data } = await axiosInstance.get('/admin/roles');
+  const { get } = getFetchClient();
+  const { data } = await get('/admin/roles');
 
   return data.data;
 };

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/EventInput/EventRow.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
-import { Checkbox } from '@strapi/design-system/Checkbox';
+import { BaseCheckbox, Checkbox } from '@strapi/design-system';
 import upperFirst from 'lodash/upperFirst';
 
 const EventRow = ({ disabledEvents, name, events, inputValue, handleChange, handleChangeAll }) => {

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/EventInput/index.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FieldLabel } from '@strapi/design-system/Field';
-import { Stack } from '@strapi/design-system/Stack';
-import { Typography } from '@strapi/design-system/Typography';
+import { FieldLabel, Stack, Typography } from '@strapi/design-system';
 import { useFormikContext } from 'formik';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/HeadersInput/Combobox.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { ComboboxOption, CreatableCombobox } from '@strapi/design-system/Combobox';
+import { ComboboxOption, CreatableCombobox } from '@strapi/design-system';
 import keys from './keys';
 
 const Combobox = ({ name, onChange, value, ...props }) => {

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/HeadersInput/index.js

@@ -1,13 +1,16 @@
 import React from 'react';
 import { RemoveRoundedButton } from '@strapi/helper-plugin';
-import Plus from '@strapi/icons/Plus';
-import { Box } from '@strapi/design-system/Box';
-import { FieldLabel } from '@strapi/design-system/Field';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Flex } from '@strapi/design-system/Flex';
-import { Stack } from '@strapi/design-system/Stack';
-import { TextInput } from '@strapi/design-system/TextInput';
-import { TextButton } from '@strapi/design-system/TextButton';
+import { Plus } from '@strapi/icons';
+import {
+  Box,
+  FieldLabel,
+  Grid,
+  GridItem,
+  Flex,
+  Stack,
+  TextInput,
+  TextButton,
+} from '@strapi/design-system';
 import { Field, FieldArray, useFormikContext } from 'formik';
 import { useIntl } from 'react-intl';
 import Combobox from './Combobox';

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/TriggerContainer/index.js

@@ -3,14 +3,8 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import { pxToRem } from '@strapi/helper-plugin';
-import Check from '@strapi/icons/Check';
-import Cross from '@strapi/icons/Cross';
-import Loader from '@strapi/icons/Loader';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import { Stack } from '@strapi/design-system/Stack';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
+import { Check, Cross, Loader } from '@strapi/icons';
+import { Box, Flex, Typography, Stack, Grid, GridItem } from '@strapi/design-system';
 
 // Being discussed in Notion: create a <Icon /> component in Parts
 const Icon = styled.svg(