@strapi/admin 4.11.1-beta.2 → 4.11.2

package/admin/src/content-manager/components/PreviewWysiwyg/index.js

@@ -6,6 +6,7 @@
  */
 
 import React, { memo, useMemo } from 'react';
+
 import PropTypes from 'prop-types';
 
 import md from './utils/mdRenderer';

package/admin/src/content-manager/components/PreviewWysiwyg/utils/mdRenderer.js

@@ -1,6 +1,6 @@
 /* eslint-disable prefer-template */
+import { getLanguage, highlight, highlightAuto } from 'highlight.js';
 import Markdown from 'markdown-it';
-import { getLanguage, highlightAuto, highlight } from 'highlight.js';
 import abbr from 'markdown-it-abbr';
 import container from 'markdown-it-container';
 import deflist from 'markdown-it-deflist';

package/admin/src/content-manager/components/RelationInput/RelationInput.js

@@ -1,37 +1,37 @@
-import React, { useRef, useState, useMemo, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { FixedSizeList as List } from 'react-window';
-/**
- * TODO: this will come in another PR.
- */
-// eslint-disable-next-line no-restricted-imports
-import { ReactSelect } from '@strapi/helper-plugin';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+
 import {
-  Status,
   Box,
-  Link,
-  Icon,
-  FieldLabel,
+  Field,
   FieldError,
   FieldHint,
-  Field,
+  FieldLabel,
+  Icon,
+  Link,
+  Status,
   TextButton,
-  Typography,
   Tooltip,
+  Typography,
   VisuallyHidden,
 } from '@strapi/design-system';
-
+/**
+ * TODO: this will come in another PR.
+ */
+// eslint-disable-next-line no-restricted-imports
+import { ReactSelect } from '@strapi/helper-plugin';
 import { Cross, Refresh } from '@strapi/icons';
+import PropTypes from 'prop-types';
+import { FixedSizeList as List } from 'react-window';
+import styled from 'styled-components';
+
+import { usePrev } from '../../hooks';
 
+import { Option } from './components/Option';
 import { Relation } from './components/Relation';
 import { RelationItem } from './components/RelationItem';
 import { RelationList } from './components/RelationList';
-import { Option } from './components/Option';
 import { RELATION_GUTTER, RELATION_ITEM_HEIGHT } from './constants';
 
-import { usePrev } from '../../hooks';
-
 export const LinkEllipsis = styled(Link)`
   display: block;
 

package/admin/src/content-manager/components/RelationInput/components/Option.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import styled from 'styled-components';
-import { components } from 'react-select';
-import { useIntl } from 'react-intl';
-import PropTypes from 'prop-types';
 
-import { pxToRem } from '@strapi/helper-plugin';
 import { Flex, Typography } from '@strapi/design-system';
+import { pxToRem } from '@strapi/helper-plugin';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { components } from 'react-select';
+import styled from 'styled-components';
 
 import { getTrad } from '../../../utils';
 

package/admin/src/content-manager/components/RelationInput/components/Relation.js

@@ -1,7 +1,7 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 
 import { Flex } from '@strapi/design-system';
+import PropTypes from 'prop-types';
 
 export const Relation = ({
   children,

package/admin/src/content-manager/components/RelationInput/components/RelationItem.js

@@ -1,15 +1,13 @@
 import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { getEmptyImage } from 'react-dnd-html5-backend';
 
 import { Box, Flex, IconButton } from '@strapi/design-system';
 import { Drag } from '@strapi/icons';
+import PropTypes from 'prop-types';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import styled from 'styled-components';
 
 import { useDragAndDrop } from '../../../hooks/useDragAndDrop';
-
 import { composeRefs, ItemTypes } from '../../../utils';
-
 import { RELATION_GUTTER } from '../constants';
 
 export const FlexWrapper = styled(Flex)`

package/admin/src/content-manager/components/RelationInput/components/RelationList.js

@@ -1,7 +1,8 @@
 import React from 'react';
+
+import { Box } from '@strapi/design-system';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Box } from '@strapi/design-system';
 
 const ShadowBox = styled(Box)`
   position: relative;

package/admin/src/content-manager/components/RelationInputDataManager/RelationInputDataManager.js

@@ -1,21 +1,19 @@
 /* eslint-disable no-nested-ternary */
-import PropTypes from 'prop-types';
 import React, { memo, useMemo, useState } from 'react';
-import { useIntl } from 'react-intl';
+
+import { NotAllowedInput, useCMEditViewDataManager } from '@strapi/helper-plugin';
 import get from 'lodash/get';
 import pick from 'lodash/pick';
-
-import { useCMEditViewDataManager, NotAllowedInput } from '@strapi/helper-plugin';
-
-import { RelationInput } from '../RelationInput';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
 
 import { useRelation } from '../../hooks/useRelation';
-
 import { getTrad } from '../../utils';
+import { getInitialDataPathUsingTempKeys } from '../../utils/paths';
+import { RelationInput } from '../RelationInput';
 
 import { PUBLICATION_STATES, RELATIONS_TO_DISPLAY, SEARCH_RESULTS_TO_DISPLAY } from './constants';
-import { connect, select, normalizeSearchResults, diffRelations, normalizeRelation } from './utils';
-import { getInitialDataPathUsingTempKeys } from '../../utils/paths';
+import { connect, diffRelations, normalizeRelation, normalizeSearchResults, select } from './utils';
 
 export const RelationInputDataManager = ({
   error,

package/admin/src/content-manager/components/RelationInputDataManager/utils/index.js

@@ -1,5 +1,5 @@
 export { default as connect } from './connect';
-export { default as select } from './select';
-export { normalizeRelations, normalizeRelation } from './normalizeRelations';
-export { normalizeSearchResults } from './normalizeSearchResults';
 export { diffRelations } from './diffRelations';
+export { normalizeRelation, normalizeRelations } from './normalizeRelations';
+export { normalizeSearchResults } from './normalizeSearchResults';
+export { default as select } from './select';

package/admin/src/content-manager/components/RelationInputDataManager/utils/normalizeRelations.js

@@ -1,7 +1,7 @@
-import { getRelationLink } from './getRelationLink';
-
 import { PUBLICATION_STATES } from '../constants';
 
+import { getRelationLink } from './getRelationLink';
+
 export const normalizeRelation = (relation, { shouldAddLink, mainFieldName, targetModel }) => {
   const nextRelation = { ...relation };
 

package/admin/src/content-manager/components/RelationInputDataManager/utils/select.js

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
-import get from 'lodash/get';
+
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+import get from 'lodash/get';
 
 import { getRequestUrl } from '../../../utils';
 

package/admin/src/content-manager/components/RepeatableComponent/components/Accordion.js

@@ -1,8 +1,9 @@
 import React from 'react';
+
+import { Box, KeyboardNavigable, Typography } from '@strapi/design-system';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
-import { Box, Typography, KeyboardNavigable } from '@strapi/design-system';
 
 export const Footer = styled(Box)`
   overflow: hidden;

package/admin/src/content-manager/components/RepeatableComponent/components/Component.js

@@ -1,34 +1,32 @@
 /* eslint-disable import/no-cycle */
 import React, { memo, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { getEmptyImage } from 'react-dnd-html5-backend';
-import styled from 'styled-components';
-import { useIntl } from 'react-intl';
-import toString from 'lodash/toString';
-import get from 'lodash/get';
 
-import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 import {
   Accordion,
-  AccordionToggle,
   AccordionContent,
+  AccordionToggle,
+  Box,
+  Flex,
   Grid,
   GridItem,
-  Flex,
-  Box,
   IconButton,
 } from '@strapi/design-system';
-import { Trash, Drag } from '@strapi/icons';
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+import { Drag, Trash } from '@strapi/icons';
+import get from 'lodash/get';
+import toString from 'lodash/toString';
+import PropTypes from 'prop-types';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
 
 import { useDragAndDrop } from '../../../hooks/useDragAndDrop';
-
+import useLazyComponents from '../../../hooks/useLazyComponents';
 import { composeRefs, getTrad, ItemTypes } from '../../../utils';
-
-import Inputs from '../../Inputs';
 import FieldComponent from '../../FieldComponent';
+import Inputs from '../../Inputs';
 
 import Preview from './Preview';
-import useLazyComponents from '../../../hooks/useLazyComponents';
 
 const CustomIconButton = styled(IconButton)`
   background-color: transparent;

package/admin/src/content-manager/components/RepeatableComponent/components/Preview.js

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import styled from 'styled-components';
 
 const StyledSpan = styled.span`

package/admin/src/content-manager/components/RepeatableComponent/index.js

@@ -1,21 +1,20 @@
 /* eslint-disable import/no-cycle */
 import React, { memo, useMemo, useState } from 'react';
-import { useIntl } from 'react-intl';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import get from 'lodash/get';
 
-import { useNotification, useCMEditViewDataManager } from '@strapi/helper-plugin';
 import { Box, Flex, TextButton, VisuallyHidden } from '@strapi/design-system';
+import { useCMEditViewDataManager, useNotification } from '@strapi/helper-plugin';
 import { Plus } from '@strapi/icons';
+import get from 'lodash/get';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
 
-import { getMaxTempKey, getTrad } from '../../utils';
 import { useContentTypeLayout } from '../../hooks';
-
+import { getMaxTempKey, getTrad } from '../../utils';
 import ComponentInitializer from '../ComponentInitializer';
-import Component from './components/Component';
-import * as Accordion from './components/Accordion';
 
+import * as Accordion from './components/Accordion';
+import Component from './components/Component';
 import getComponentErrorKeys from './utils/getComponentErrorKeys';
 
 const TextButtonCustom = styled(TextButton)`

package/admin/src/content-manager/components/SingleTypeFormWrapper/index.js

@@ -1,20 +1,22 @@
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
-import { useHistory } from 'react-router-dom';
-import { useQueryClient } from 'react-query';
-import get from 'lodash/get';
+
 import {
-  useTracking,
   formatContentTypeData,
-  useQueryParams,
-  useNotification,
-  useGuidedTour,
   useAPIErrorHandler,
   useFetchClient,
+  useGuidedTour,
+  useNotification,
+  useQueryParams,
+  useTracking,
 } from '@strapi/helper-plugin';
-import { useSelector, useDispatch } from 'react-redux';
-import PropTypes from 'prop-types';
 import axios from 'axios';
-import { createDefaultForm, getTrad, removePasswordFieldsFromData } from '../../utils';
+import get from 'lodash/get';
+import PropTypes from 'prop-types';
+import { useQueryClient } from 'react-query';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+
+import buildQueryString from '../../pages/ListView/utils/buildQueryString';
 import {
   getData,
   getDataSucceeded,
@@ -25,8 +27,9 @@ import {
   submitSucceeded,
 } from '../../sharedReducers/crudReducer/actions';
 import selectCrudReducer from '../../sharedReducers/crudReducer/selectors';
+import { createDefaultForm, getTrad, removePasswordFieldsFromData } from '../../utils';
+
 import { getRequestUrl } from './utils';
-import buildQueryString from '../../pages/ListView/utils/buildQueryString';
 
 // This container is used to handle the CRUD
 const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {

package/admin/src/content-manager/components/Wysiwyg/Editor.js

@@ -1,11 +1,15 @@
 import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
+
 import CodeMirror from 'codemirror5';
-import 'codemirror5/addon/display/placeholder';
+import PropTypes from 'prop-types';
+
 import PreviewWysiwyg from '../PreviewWysiwyg';
+
 import { EditorStylesContainer } from './EditorStylesContainer';
-import { EditorAndPreviewWrapper } from './WysiwygStyles';
 import newlineAndIndentContinueMarkdownList from './utils/continueList';
+import { EditorAndPreviewWrapper } from './WysiwygStyles';
+
+import 'codemirror5/addon/display/placeholder';
 
 const Editor = ({
   disabled,

package/admin/src/content-manager/components/Wysiwyg/EditorLayout.js

@@ -1,10 +1,11 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
+
 import { BaseButton, Box, Flex, FocusTrap, Portal, Typography } from '@strapi/design-system';
-import { Collapse } from '@strapi/icons';
 import { pxToRem, useLockScroll } from '@strapi/helper-plugin';
+import { Collapse } from '@strapi/icons';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
 
 import PreviewWysiwyg from '../PreviewWysiwyg';
 

package/admin/src/content-manager/components/Wysiwyg/WysiwygFooter.js

@@ -1,8 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
+
 import { Box, Flex, Typography } from '@strapi/design-system';
 import { Expand } from '@strapi/icons';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+
 import { ExpandButton } from './WysiwygStyles';
 
 const WysiwygFooter = ({ onToggleExpand }) => {

package/admin/src/content-manager/components/Wysiwyg/WysiwygNav.js

@@ -1,28 +1,29 @@
 import React, { useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { useIntl } from 'react-intl';
-import { Button, IconButtonGroup, Option, Select, Popover, Flex } from '@strapi/design-system';
+
+import { Button, Flex, IconButtonGroup, Option, Popover, Select } from '@strapi/design-system';
 import {
   Bold,
-  Italic,
-  Underline,
-  StrikeThrough,
   BulletList,
-  NumberList,
   Code,
-  Picture as Image,
+  Italic,
   Link,
-  Quote,
   More,
+  NumberList,
+  Picture as Image,
+  Quote,
+  StrikeThrough,
+  Underline,
 } from '@strapi/icons';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
 
 import {
-  MainButtons,
   CustomIconButton,
-  MoreButton,
-  IconButtonGroupMargin,
   CustomLinkIconButton,
+  IconButtonGroupMargin,
+  MainButtons,
+  MoreButton,
 } from './WysiwygStyles';
 
 /**

package/admin/src/content-manager/components/Wysiwyg/WysiwygStyles.js

@@ -1,5 +1,5 @@
+import { BaseButton, IconButton, IconButtonGroup } from '@strapi/design-system';
 import styled from 'styled-components';
-import { IconButtonGroup, IconButton, BaseButton } from '@strapi/design-system';
 
 // NAV BUTTONS
 export const CustomIconButton = styled(IconButton)`

package/admin/src/content-manager/components/Wysiwyg/index.js

@@ -1,22 +1,24 @@
 import React, { useRef, useState } from 'react';
+
+import { Box, Flex, Typography } from '@strapi/design-system';
+import { prefixFileUrlWithBackendUrl, useLibrary } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { Typography, Box, Flex } from '@strapi/design-system';
-import { prefixFileUrlWithBackendUrl, useLibrary } from '@strapi/helper-plugin';
-import Editor from './Editor';
-import WysiwygNav from './WysiwygNav';
-import WysiwygFooter from './WysiwygFooter';
+import styled from 'styled-components';
+
 import Hint from '../Hint';
 
+import Editor from './Editor';
+import { EditorLayout } from './EditorLayout';
 import {
-  markdownHandler,
-  listHandler,
-  titleHandler,
   insertFile,
+  listHandler,
+  markdownHandler,
   quoteAndCodeHandler,
+  titleHandler,
 } from './utils/utils';
-import { EditorLayout } from './EditorLayout';
+import WysiwygFooter from './WysiwygFooter';
+import WysiwygNav from './WysiwygNav';
 
 const LabelAction = styled(Box)`
   svg path {

package/admin/src/content-manager/hooks/index.js

@@ -1,9 +1,9 @@
 export { default as useContentTypeLayout } from './useContentTypeLayout';
+export { useDragAndDrop } from './useDragAndDrop';
 export { default as useFetchContentTypeLayout } from './useFetchContentTypeLayout';
 export { default as useFindRedirectionLink } from './useFindRedirectionLink';
+export { useKeyboardDragAndDrop } from './useKeyboardDragAndDrop';
 export { default as usePluginsQueryParams } from './usePluginsQueryParams';
+export { usePrev } from './usePrev';
 export { default as useSyncRbac } from './useSyncRbac';
 export { default as useWysiwyg } from './useWysiwyg';
-export { usePrev } from './usePrev';
-export { useDragAndDrop } from './useDragAndDrop';
-export { useKeyboardDragAndDrop } from './useKeyboardDragAndDrop';

package/admin/src/content-manager/hooks/useContentTypeLayout/index.js

@@ -1,5 +1,7 @@
 import { useCallback } from 'react';
+
 import { useSelector } from 'react-redux';
+
 import selectLayout from '../../pages/EditViewLayoutManager/selectors';
 
 const useContentTypeLayout = () => {

package/admin/src/content-manager/hooks/useDragAndDrop.js

@@ -1,4 +1,5 @@
 import { useRef } from 'react';
+
 import { useDrag, useDrop } from 'react-dnd';
 
 import { useKeyboardDragAndDrop } from './useKeyboardDragAndDrop';

package/admin/src/content-manager/hooks/useFetchContentTypeLayout/index.js

@@ -1,11 +1,14 @@
 import { useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
-import { useSelector, shallowEqual } from 'react-redux';
-import axios from 'axios';
+
 import { useFetchClient } from '@strapi/helper-plugin';
-import formatLayouts from './utils/formatLayouts';
-import reducer, { initialState } from './reducer';
+import axios from 'axios';
+import { shallowEqual, useSelector } from 'react-redux';
+
 import { makeSelectModelAndComponentSchemas } from '../../pages/App/selectors';
 
+import reducer, { initialState } from './reducer';
+import formatLayouts from './utils/formatLayouts';
+
 const useFetchContentTypeLayout = (contentTypeUID) => {
   const [{ error, isLoading, layout, layouts }, dispatch] = useReducer(reducer, initialState);
   const schemasSelector = useMemo(makeSelectModelAndComponentSchemas, []);

package/admin/src/content-manager/hooks/useFetchContentTypeLayout/utils/formatLayouts.js

@@ -162,6 +162,6 @@ export default formatLayouts;
 export {
   formatLayoutWithMetas,
   formatListLayoutWithMetas,
-  shouldDisplayRelationLink,
   getDisplayedModels,
+  shouldDisplayRelationLink,
 };

package/admin/src/content-manager/hooks/useFindRedirectionLink/index.js

@@ -1,5 +1,6 @@
-import { useSelector } from 'react-redux';
 import { useQueryParams } from '@strapi/helper-plugin';
+import { useSelector } from 'react-redux';
+
 import selectMenuLinks from './selectors';
 import getRedirectionLink from './utils/getRedirectionLink';
 

package/admin/src/content-manager/hooks/useFindRedirectionLink/utils/getRedirectionLink.js

@@ -1,6 +1,6 @@
-import { stringify, parse } from 'qs';
 import get from 'lodash/get';
 import isObject from 'lodash/isObject';
+import { parse, stringify } from 'qs';
 
 /**
  * Updates the leafs of the first argument

package/admin/src/content-manager/hooks/useLazyComponents/index.js

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
+
 import { useCustomFields } from '@strapi/helper-plugin';
 
 const componentStore = new Map();

package/admin/src/content-manager/hooks/usePluginsQueryParams/index.js

@@ -1,5 +1,5 @@
-import { useLocation } from 'react-router-dom';
 import { parse, stringify } from 'qs';
+import { useLocation } from 'react-router-dom';
 
 const usePluginsQueryParams = () => {
   const { search } = useLocation();

package/admin/src/content-manager/hooks/useRelation/useRelation.js

@@ -1,7 +1,7 @@
-import { useState, useEffect } from 'react';
-import { useInfiniteQuery } from 'react-query';
+import { useEffect, useState } from 'react';
 
-import { useFetchClient, useCallbackRef } from '@strapi/helper-plugin';
+import { useCallbackRef, useFetchClient } from '@strapi/helper-plugin';
+import { useInfiniteQuery } from 'react-query';
 
 import { normalizeRelations } from '../../components/RelationInputDataManager/utils';
 

package/admin/src/content-manager/hooks/useSyncRbac/index.js

@@ -1,7 +1,9 @@
 import { useEffect } from 'react';
+
 import { useDispatch, useSelector } from 'react-redux';
+
 import { resetPermissions, setPermissions } from './actions';
-import { selectPermissions, selectCollectionTypePermissions } from './selectors';
+import { selectCollectionTypePermissions, selectPermissions } from './selectors';
 
 const useSyncRbac = (query, collectionTypeUID, containerName = 'listView') => {
   const collectionTypesRelatedPermissions = useSelector(selectCollectionTypePermissions);

package/admin/src/content-manager/hooks/useSyncRbac/reducer.js

@@ -4,7 +4,8 @@
  */
 
 import produce from 'immer';
-import { SET_PERMISSIONS, RESET_PERMISSIONS } from './constants';
+
+import { RESET_PERMISSIONS, SET_PERMISSIONS } from './constants';
 
 export const initialState = {
   permissions: null,

package/admin/src/content-manager/hooks/useWysiwyg.js

@@ -1,4 +1,5 @@
 import { useContext } from 'react';
+
 import WysiwygContext from '../contexts/Wysiwyg';
 
 const useWysiwyg = () => useContext(WysiwygContext);

package/admin/src/content-manager/pages/App/LeftMenu/index.js

@@ -5,18 +5,18 @@
  */
 
 import React, { useMemo, useState } from 'react';
-import { useSelector, shallowEqual } from 'react-redux';
-import { useIntl } from 'react-intl';
-import { NavLink } from 'react-router-dom';
 
 import {
   SubNav,
   SubNavHeader,
+  SubNavLink,
   SubNavSection,
   SubNavSections,
-  SubNavLink,
 } from '@strapi/design-system/v2';
-import { useFilter, useCollator } from '@strapi/helper-plugin';
+import { useCollator, useFilter } from '@strapi/helper-plugin';
+import { useIntl } from 'react-intl';
+import { shallowEqual, useSelector } from 'react-redux';
+import { NavLink } from 'react-router-dom';
 
 import getTrad from '../../../utils/getTrad';
 import { makeSelectModelLinks } from '../selectors';

package/admin/src/content-manager/pages/App/components/CardDragPreview.js

@@ -1,9 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
+
 import { Flex, Typography } from '@strapi/design-system';
-import { Pencil, Cross, Drag } from '@strapi/icons';
 import { pxToRem } from '@strapi/helper-plugin';
+import { Cross, Drag, Pencil } from '@strapi/icons';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
 
 const ActionBox = styled(Flex)`
   height: ${({ theme }) => theme.spaces[7]};