@strapi/admin 4.9.0-alpha.0 → 4.9.0-beta.1

package/admin/src/content-manager/components/FieldComponent/Label.js

@@ -2,9 +2,7 @@ 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 { Box, Flex, Typography } from '@strapi/design-system';
 
 const LabelAction = styled(Box)`
   svg path {

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

@@ -6,11 +6,8 @@ import isEqual from 'react-fast-compare';
 import { useIntl } from 'react-intl';
 
 import { NotAllowedInput } from '@strapi/helper-plugin';
-import Trash from '@strapi/icons/Trash';
-import { Box } from '@strapi/design-system/Box';
-import { IconButton } from '@strapi/design-system/IconButton';
-import { Flex } from '@strapi/design-system/Flex';
-import { Stack } from '@strapi/design-system/Stack';
+import { Trash } from '@strapi/icons';
+import { Box, IconButton, Flex } from '@strapi/design-system';
 
 import connect from './utils/connect';
 import select from './utils/select';
@@ -95,7 +92,7 @@ const FieldComponent = ({
           />
         )}
       </Flex>
-      <Stack spacing={1}>
+      <Flex direction="column" alignItems="stretch" gap={1}>
         {!isRepeatable && !isInitialized && (
           <ComponentInitializer
             isReadOnly={isReadOnly}
@@ -121,7 +118,7 @@ const FieldComponent = ({
             name={name}
           />
         )}
-      </Stack>
+      </Flex>
     </Box>
   );
 };

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

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

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

@@ -1,19 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
+import { Box } from '@strapi/design-system';
 import { useCustomFields } from '@strapi/helper-plugin';
-import Date from '@strapi/icons/Date';
-import Boolean from '@strapi/icons/Boolean';
-import Email from '@strapi/icons/Email';
-import Enumeration from '@strapi/icons/Enumeration';
-import Media from '@strapi/icons/Media';
-import Relation from '@strapi/icons/Relation';
-import Text from '@strapi/icons/Text';
-import Uid from '@strapi/icons/Uid';
-import Number from '@strapi/icons/Number';
-import Json from '@strapi/icons/Json';
-import Component from '@strapi/icons/Component';
-import DynamicZone from '@strapi/icons/DynamicZone';
+import {
+  Date,
+  Boolean,
+  Email,
+  Enumeration,
+  Media,
+  Relation,
+  Text,
+  Uid,
+  Number,
+  Json,
+  Component,
+  DynamicZone,
+} from '@strapi/icons';
 
 const iconByTypes = {
   biginteger: <Number />,

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Typography } from '@strapi/design-system/Typography';
+import { Typography } from '@strapi/design-system';
 
 export const Hint = ({ id, error, name, hint }) => {
   if (hint.length === 0 || error) {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
+import { Box } from '@strapi/design-system';
 import { useInjectionZone } from '../../../shared/hooks';
 
 const InjectionZoneList = ({ area, ...props }) => {

package/admin/src/content-manager/components/InputUID/endActionStyle.js

@@ -1,7 +1,5 @@
 import styled, { keyframes } from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { FieldAction } from '@strapi/design-system/Field';
+import { Box, Flex, FieldAction } from '@strapi/design-system';
 
 export const EndActionWrapper = styled(Box)`
   position: relative;

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

@@ -3,12 +3,8 @@ import PropTypes from 'prop-types';
 import { useCMEditViewDataManager, useFetchClient } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import get from 'lodash/get';
-import { TextInput } from '@strapi/design-system/TextInput';
-import { Typography } from '@strapi/design-system/Typography';
-import Refresh from '@strapi/icons/Refresh';
-import CheckCircle from '@strapi/icons/CheckCircle';
-import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
-import Loader from '@strapi/icons/Loader';
+import { TextInput, Typography } from '@strapi/design-system';
+import { Refresh, CheckCircle, ExclamationMarkCircle, Loader } from '@strapi/icons';
 import { getRequestUrl } from '../../utils';
 import useDebounce from './useDebounce';
 import UID_REGEX from './regex';

package/admin/src/content-manager/components/Inputs/utils/getInputType.js

@@ -1,4 +1,4 @@
-import { toLower } from 'lodash';
+import toLower from 'lodash/toLower';
 
 const getInputType = (type = '') => {
   switch (toLower(type)) {

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

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { get } from 'lodash';
+import get from 'lodash/get';
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 
 function useSelect(keys) {

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

@@ -3,9 +3,7 @@
 
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Stack } from '@strapi/design-system/Stack';
+import { Box, Grid, GridItem, Flex } from '@strapi/design-system';
 import { useContentTypeLayout } from '../../hooks';
 import FieldComponent from '../FieldComponent';
 import Inputs from '../Inputs';
@@ -31,7 +29,7 @@ const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, isNested, nam
       hasRadius={isNested}
       borderColor={isNested ? 'neutral200' : ''}
     >
-      <Stack spacing={6}>
+      <Flex direction="column" alignItems="stretch" gap={6}>
         {fields.map((fieldRow, key) => {
           return (
             <Grid gap={4} key={key}>
@@ -78,7 +76,7 @@ const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, isNested, nam
             </Grid>
           );
         })}
-      </Stack>
+      </Flex>
     </Box>
   );
 };

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

@@ -4,18 +4,22 @@ import styled from 'styled-components';
 import { FixedSizeList as List } from 'react-window';
 
 import { ReactSelect } from '@strapi/helper-plugin';
-import { Status } from '@strapi/design-system/Status';
-import { Box } from '@strapi/design-system/Box';
-import { Link } from '@strapi/design-system/Link';
-import { Icon } from '@strapi/design-system/Icon';
-import { FieldLabel, FieldError, FieldHint, Field } from '@strapi/design-system/Field';
-import { TextButton } from '@strapi/design-system/TextButton';
-import { Typography } from '@strapi/design-system/Typography';
-import { Tooltip } from '@strapi/design-system/Tooltip';
-import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden';
-
-import Cross from '@strapi/icons/Cross';
-import Refresh from '@strapi/icons/Refresh';
+import {
+  Status,
+  Box,
+  Link,
+  Icon,
+  FieldLabel,
+  FieldError,
+  FieldHint,
+  Field,
+  TextButton,
+  Typography,
+  Tooltip,
+  VisuallyHidden,
+} from '@strapi/design-system';
+
+import { Cross, Refresh } from '@strapi/icons';
 
 import { Relation } from './components/Relation';
 import { RelationItem } from './components/RelationItem';
@@ -103,8 +107,7 @@ const RelationInput = ({
     [totalNumberOfRelations, numberOfRelationsToDisplay]
   );
 
-  const shouldDisplayLoadMoreButton =
-    (!!labelLoadMore && paginatedRelations.hasNextPage) || paginatedRelations.isLoading;
+  const shouldDisplayLoadMoreButton = !!labelLoadMore && paginatedRelations.hasNextPage;
 
   const options = useMemo(
     () =>

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

@@ -5,8 +5,7 @@ import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 
 import { pxToRem } from '@strapi/helper-plugin';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
+import { Flex, Typography } from '@strapi/design-system';
 
 import { getTrad } from '../../../utils';
 

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

@@ -1,8 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import { Stack } from '@strapi/design-system/Stack';
-import { Flex } from '@strapi/design-system/Flex';
+import { Flex } from '@strapi/design-system';
 
 export const Relation = ({
   children,
@@ -21,9 +20,15 @@ export const Relation = ({
         alignItems="end"
         wrap="wrap"
       >
-        <Stack basis={size <= 6 ? '100%' : '70%'} spacing={1} {...props}>
+        <Flex
+          direction="column"
+          alignItems="stretch"
+          basis={size <= 6 ? '100%' : '70%'}
+          gap={1}
+          {...props}
+        >
           {search}
-        </Stack>
+        </Flex>
 
         {loadMore}
       </Flex>

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 
-import { Box, Flex, Stack, IconButton } from '@strapi/design-system';
+import { Box, Flex, IconButton } from '@strapi/design-system';
 import { Drag } from '@strapi/icons';
 
 import { useDragAndDrop } from '../../../hooks/useDragAndDrop';
@@ -12,7 +12,7 @@ import { composeRefs, ItemTypes } from '../../../utils';
 
 import { RELATION_GUTTER } from '../constants';
 
-export const StackWrapper = styled(Stack)`
+export const FlexWrapper = styled(Flex)`
   width: 100%;
   /* Used to prevent endAction to be pushed out of container */
   min-width: 0;
@@ -94,7 +94,7 @@ export const RelationItem = ({
           data-handler-id={handlerId}
           {...props}
         >
-          <StackWrapper spacing={1} horizontal>
+          <FlexWrapper gap={1}>
             {canDrag ? (
               <IconButton
                 forwardedAs="div"
@@ -109,7 +109,7 @@ export const RelationItem = ({
               </IconButton>
             ) : null}
             <ChildrenWrapper justifyContent="space-between">{children}</ChildrenWrapper>
-          </StackWrapper>
+          </FlexWrapper>
           {endAction && <Box paddingLeft={4}>{endAction}</Box>}
         </Flex>
       )}

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

@@ -1,7 +1,7 @@
 import React 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 ShadowBox = styled(Box)`
   position: relative;

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

@@ -57,41 +57,47 @@ export const RelationInputDataManager = ({
 
   const currentLastPage = Math.ceil(get(initialData, name, []).length / RELATIONS_TO_DISPLAY);
 
-  const cacheKey = `${slug}-${initialDataPath.join('.')}`;
-  const { relations, search, searchFor } = useRelation(cacheKey, {
-    relation: {
-      enabled: !!endpoints.relation,
-      endpoint: endpoints.relation,
-      pageGoal: currentLastPage,
-      pageParams: {
-        ...defaultParams,
-        pageSize: RELATIONS_TO_DISPLAY,
-      },
-      onLoad(value) {
-        relationLoad({
-          target: {
-            initialDataPath: ['initialData', ...initialDataPath],
-            modifiedDataPath: ['modifiedData', ...nameSplit],
-            value,
-          },
-        });
-      },
-      normalizeArguments: {
-        mainFieldName: mainField.name,
-        shouldAddLink: shouldDisplayRelationLink,
-        targetModel,
+  const { relations, search, searchFor } = useRelation(
+    [slug, initialDataPath.join('.'), modifiedData.id, defaultParams],
+    {
+      relation: {
+        enabled: !!endpoints.relation,
+        endpoint: endpoints.relation,
+        pageGoal: currentLastPage,
+        pageParams: {
+          ...defaultParams,
+          pageSize: RELATIONS_TO_DISPLAY,
+        },
+        onLoad(value) {
+          relationLoad({
+            target: {
+              initialDataPath: ['initialData', ...initialDataPath],
+              modifiedDataPath: ['modifiedData', ...nameSplit],
+              value,
+            },
+          });
+        },
+        normalizeArguments: {
+          mainFieldName: mainField.name,
+          shouldAddLink: shouldDisplayRelationLink,
+          targetModel,
+        },
       },
-    },
-    search: {
-      endpoint: endpoints.search,
-      pageParams: {
-        ...defaultParams,
-        // eslint-disable-next-line no-nested-ternary
-        entityId: isCreatingEntry ? undefined : isComponentRelation ? componentId : initialData.id,
-        pageSize: SEARCH_RESULTS_TO_DISPLAY,
+      search: {
+        endpoint: endpoints.search,
+        pageParams: {
+          ...defaultParams,
+          // eslint-disable-next-line no-nested-ternary
+          entityId: isCreatingEntry
+            ? undefined
+            : isComponentRelation
+            ? componentId
+            : initialData.id,
+          pageSize: SEARCH_RESULTS_TO_DISPLAY,
+        },
       },
-    },
-  });
+    }
+  );
 
   const isMorph = useMemo(() => relationType.toLowerCase().includes('morph'), [relationType]);
   const toOneRelation = [

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

@@ -14,7 +14,7 @@ import {
   AccordionContent,
   Grid,
   GridItem,
-  Stack,
+  Flex,
   Box,
   IconButton,
 } from '@strapi/design-system';
@@ -49,7 +49,7 @@ const CustomIconButton = styled(IconButton)`
   }
 `;
 
-const ActionsStack = styled(Stack)`
+const ActionsFlex = styled(Flex)`
   & .drag-handle {
     background: unset;
 
@@ -138,7 +138,7 @@ const DraggedItem = ({
           <AccordionToggle
             action={
               isReadOnly ? null : (
-                <ActionsStack horizontal spacing={0} expanded={isOpen}>
+                <ActionsFlex gap={0} expanded={isOpen}>
                   <CustomIconButton
                     expanded={isOpen}
                     noBorder
@@ -169,14 +169,20 @@ const DraggedItem = ({
                   >
                     <Drag />
                   </IconButton>
-                </ActionsStack>
+                </ActionsFlex>
               )
             }
             title={displayedValue}
             togglePosition="left"
           />
           <AccordionContent>
-            <Stack background="neutral100" padding={6} spacing={6}>
+            <Flex
+              direction="column"
+              alignItems="stretch"
+              background="neutral100"
+              padding={6}
+              gap={6}
+            >
               {fields.map((fieldRow, key) => {
                 return (
                   // eslint-disable-next-line react/no-array-index-key
@@ -224,7 +230,7 @@ const DraggedItem = ({
                   </Grid>
                 );
               })}
-            </Stack>
+            </Flex>
           </AccordionContent>
         </Accordion>
       )}

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import CodeMirror from 'codemirror';
-import 'codemirror/addon/display/placeholder';
+import CodeMirror from 'codemirror5';
+import 'codemirror5/addon/display/placeholder';
 import PreviewWysiwyg from '../PreviewWysiwyg';
 import { EditorStylesContainer } from './EditorStylesContainer';
 import { EditorAndPreviewWrapper } from './WysiwygStyles';

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

@@ -1,10 +1,8 @@
 import React from 'react';
 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 { Typography } from '@strapi/design-system/Typography';
-import Expand from '@strapi/icons/Expand';
+import { Box, Flex, Typography } from '@strapi/design-system';
+import { Expand } from '@strapi/icons';
 import { ExpandButton } from './WysiwygStyles';
 
 const WysiwygFooter = ({ onToggleExpand }) => {

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

@@ -1,24 +1,30 @@
 import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { FocusTrap } from '@strapi/design-system/FocusTrap';
-import { Box } from '@strapi/design-system/Box';
-import { Button } from '@strapi/design-system/Button';
-import { IconButtonGroup } from '@strapi/design-system/IconButton';
-import { Option, Select } from '@strapi/design-system/Select';
-import { Popover } from '@strapi/design-system/Popover';
-import { Flex } from '@strapi/design-system/Flex';
-import Bold from '@strapi/icons/Bold';
-import Italic from '@strapi/icons/Italic';
-import Underline from '@strapi/icons/Underline';
-import StrikeThrough from '@strapi/icons/StrikeThrough';
-import BulletList from '@strapi/icons/BulletList';
-import NumberList from '@strapi/icons/NumberList';
-import Code from '@strapi/icons/Code';
-import Image from '@strapi/icons/Picture';
-import Link from '@strapi/icons/Link';
-import Quote from '@strapi/icons/Quote';
-import More from '@strapi/icons/More';
+import {
+  FocusTrap,
+  Box,
+  Button,
+  IconButtonGroup,
+  Option,
+  Select,
+  Popover,
+  Flex,
+} from '@strapi/design-system';
+import {
+  Bold,
+  Italic,
+  Underline,
+  StrikeThrough,
+  BulletList,
+  NumberList,
+  Code,
+  Picture as Image,
+  Link,
+  Quote,
+  More,
+} from '@strapi/icons';
+
 import {
   MainButtons,
   CustomIconButton,

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

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

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

@@ -2,9 +2,7 @@ import React, { useRef, useState } 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 { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
+import { Typography, Box, Flex } from '@strapi/design-system';
 import { prefixFileUrlWithBackendUrl, useLibrary } from '@strapi/helper-plugin';
 import Editor from './Editor';
 import WysiwygNav from './WysiwygNav';
@@ -127,14 +125,14 @@ const Wysiwyg = ({
 
   return (
     <>
-      <Stack spacing={1}>
-        <Stack horizontal spacing={1}>
+      <Flex direction="column" alignItems="stretch" gap={1}>
+        <Flex gap={1}>
           <Typography variant="pi" fontWeight="bold" textColor="neutral800">
             {label}
             {required && <TypographyAsterisk textColor="danger600">*</TypographyAsterisk>}
           </Typography>
           {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
-        </Stack>
+        </Flex>
 
         <EditorLayout
           isExpandMode={isExpandMode}
@@ -168,7 +166,7 @@ const Wysiwyg = ({
           {!isExpandMode && <WysiwygFooter onToggleExpand={handleToggleExpand} />}
         </EditorLayout>
         <Hint hint={hint} name={name} error={error} />
-      </Stack>
+      </Flex>
 
       {error && (
         <Box paddingTop={1}>

package/admin/src/content-manager/components/Wysiwyg/utils/continueList.js

@@ -1,4 +1,4 @@
-import CodeMirror from 'codemirror';
+import CodeMirror from 'codemirror5';
 
 // Disabling eslint on purpose
 /* eslint-disable */
@@ -7,9 +7,9 @@ var listRE = /^(\s*)(>[> ]*|[*+-] \[[x ]\]\s|[*+-]\s|(\d+)([.)]))(\s*)/,
   emptyListRE = /^(\s*)(>[> ]*|[*+-] \[[x ]\]|[*+-]|(\d+)[.)])(\s*)$/,
   unorderedListRE = /[*+-]\s/;
 
-/* 
+/*
   functions coming from CodeMirror addons continuelist.js
-  ===> https://github.com/codemirror/CodeMirror/blob/master/addon/edit/continuelist.js 
+  ===> https://github.com/codemirror/CodeMirror/blob/master/addon/edit/continuelist.js
 
   we imported it because the way the addon ask to use markdown mode
   since we have our own markdown preview system we couldn't use it directly

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

@@ -1,5 +1,4 @@
 import { useCallback } from 'react';
-import { get } from 'lodash';
 import { useSelector } from 'react-redux';
 import selectLayout from '../../pages/EditViewLayoutManager/selectors';
 
@@ -8,7 +7,7 @@ const useContentTypeLayout = () => {
 
   const getComponentLayout = useCallback(
     (componentUid) => {
-      return get(currentLayout, ['components', componentUid], {});
+      return currentLayout?.components?.[componentUid] ?? {};
     },
     [currentLayout]
   );

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

@@ -1,4 +1,7 @@
-import { cloneDeep, get, set } from 'lodash';
+import cloneDeep from 'lodash/cloneDeep';
+import get from 'lodash/get';
+import set from 'lodash/set';
+
 import { mergeMetasWithSchema } from '../../../utils';
 
 const getRelationModel = (targetModel, models) => models.find((model) => model.uid === targetModel);

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

@@ -49,7 +49,7 @@ export const useRelation = (cacheKey, { relation, search }) => {
 
   const { onLoad: onLoadRelations, normalizeArguments = {} } = relation;
 
-  const relationsRes = useInfiniteQuery(['relation', cacheKey], fetchRelations, {
+  const relationsRes = useInfiniteQuery(['relation', ...cacheKey], fetchRelations, {
     cacheTime: 0,
     enabled: relation.enabled,
     /**
@@ -138,7 +138,7 @@ export const useRelation = (cacheKey, { relation, search }) => {
   }, [status, onLoadRelationsCallback, data]);
 
   const searchRes = useInfiniteQuery(
-    ['relation', cacheKey, 'search', JSON.stringify(searchParams)],
+    ['relation', ...cacheKey, 'search', JSON.stringify(searchParams)],
     fetchSearch,
     {
       enabled: Object.keys(searchParams).length > 0,

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

@@ -15,7 +15,7 @@ import {
   SubNavSection,
   SubNavSections,
   SubNavLink,
-} from '@strapi/design-system/v2/SubNav';
+} from '@strapi/design-system/v2';
 
 import { matchByTitle } from './utils';
 import getTrad from '../../../utils/getTrad';