fix: all errors in the core admin

packages/core/admin/components/ContentManagerHooks/ConfirmationCheckbox/index.tsx

@@ -4,12 +4,10 @@ import {
   Button,
   Checkbox,
   Dialog,
-  DialogBody,
-  DialogFooter,
   Flex,
   Typography,
 } from '@strapi/design-system';
-import { ExclamationMarkCircle } from '@strapi/icons';
+import { WarningCircle } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import getTrad from '../../../helpers/getTrad';
@@ -87,57 +85,54 @@ const CheckboxConfirmation: FC<Props> = ({
         id={name}
         name={name}
         onValueChange={handleChange}
+        // @ts-ignore
         value={value}
-        type="checkbox"
       >
         {label}
       </Checkbox>
       {isOpen && (
-        <Dialog onClose={handleToggle} title="Confirmation" isOpen={isOpen}>
-          <DialogBody icon={<ExclamationMarkCircle />}>
-            <Flex direction="column" alignItems="stretch" gap={2}>
-              <Flex justifyContent="center">
-                <TextAlignTypography id="confirm-description">
-                  {formatMessage({
-                    id: getTrad('webtools.CheckboxConfirmation.Modal.content'),
-                    defaultMessage:
-                      'Disabling url alias will engender the deletion of all your paths for this content type',
-                  })}
-                </TextAlignTypography>
-              </Flex>
-              <Flex justifyContent="center">
-                <Typography fontWeight="semiBold" id="confirm-description">
-                  {formatMessage({
-                    id: getTrad('CheckboxConfirmation.Modal.body'),
-                    defaultMessage: 'Do you want to disable it?',
-                  })}
-                </Typography>
+        <Dialog.Root>
+          <Dialog.Trigger />
+          <Dialog.Content>
+            <Dialog.Body icon={<WarningCircle />}>
+              <Flex direction="column" alignItems="stretch" gap={2}>
+                <Flex justifyContent="center">
+                  <TextAlignTypography id="confirm-description">
+                    {formatMessage({
+                      id: getTrad('webtools.CheckboxConfirmation.Modal.content'),
+                      defaultMessage:
+                        'Disabling url alias will engender the deletion of all your paths for this content type',
+                    })}
+                  </TextAlignTypography>
+                </Flex>
+                <Flex justifyContent="center">
+                  <Typography fontWeight="semiBold" id="confirm-description">
+                    {formatMessage({
+                      id: getTrad('CheckboxConfirmation.Modal.body'),
+                      defaultMessage: 'Do you want to disable it?',
+                    })}
+                  </Typography>
+                </Flex>
               </Flex>
-            </Flex>
-          </DialogBody>
-          <DialogFooter
-            startAction={
-              (
+            </Dialog.Body>
+            <Dialog.Footer>
+              <Dialog.Cancel>
                 <Button onClick={handleToggle} variant="tertiary">
                   {formatMessage({
                     id: 'components.popUpWarning.button.cancel',
                     defaultMessage: 'No, cancel',
                   })}
                 </Button>
-              )
-            }
-            endAction={
-              (
-                <Button variant="danger-light" onClick={handleConfirm}>
-                  {formatMessage({
-                    id: getTrad('CheckboxConfirmation.Modal.button-confirm'),
-                    defaultMessage: 'Yes, disable',
-                  })}
-                </Button>
-              )
-            }
-          />
-        </Dialog>
+              </Dialog.Cancel>
+              <Button variant="danger-light" onClick={handleConfirm}>
+                {formatMessage({
+                  id: getTrad('CheckboxConfirmation.Modal.button-confirm'),
+                  defaultMessage: 'Yes, disable',
+                })}
+              </Button>
+            </Dialog.Footer>
+          </Dialog.Content>
+        </Dialog.Root>
       )}
     </>
   );

packages/core/admin/components/EditForm/index.tsx

@@ -5,13 +5,12 @@ import { unstable_useContentManagerContext } from '@strapi/strapi/admin';
 
 import {
   Box,
-  Stack,
+  Flex,
   TextInput,
   Checkbox,
   Link,
   Accordion,
-  AccordionToggle,
-  AccordionContent,
+  Field,
 } from '@strapi/design-system';
 
 import getTrad from '../../helpers/getTrad';
@@ -45,56 +44,65 @@ const EditForm = () => {
   const toggle = (index: number) => setExpanded((prevExpanded) => (prevExpanded === index ? null : index));
 
   return (
-    <Stack size={2}>
-      {modifiedDataUrlAliases?.map((alias, index) => (
-        <Accordion
-          key={alias.id}
-          value={`acc-${alias.id}`}
-          expanded={expanded === index}
-          onToggle={() => toggle(index)}
-          variant="secondary"
-          size="S"
-        >
-          <AccordionToggle
-            description={alias.url_path ? alias.url_path : 'Initial URL alias'}
+    <Flex>
+      <Accordion.Root
+        size="S"
+      >
+        {modifiedDataUrlAliases?.map((alias, index) => (
+          <Accordion.Item
+            key={alias.id}
+            value={`acc-${alias.id}`}
           >
-            {`Alias #${index + 1}`}
-          </AccordionToggle>
-          <AccordionContent padding="12px">
-            <Box>
-              <Checkbox
-                onValueChange={(value: string) => {
-                  updateValue(index, 'generated', value);
-                }}
-                value={alias.generated !== undefined ? alias.generated : true}
-                name={`generated-${index}`}
-                hint="Uncheck this to create a custom alias below."
+            <Accordion.Header>
+              <Accordion.Trigger
+                description={alias.url_path ? alias.url_path : 'Initial URL alias'}
               >
-                {formatMessage({
-                  id: getTrad('EditView.ExcludeFromSitemap'),
-                  defaultMessage: ' Generate automatic URL alias',
-                })}
-              </Checkbox>
-              <Link to="/plugins/webtools/patterns">Configure URL alias patterns.</Link>
-            </Box>
-            <Box paddingTop={4}>
-              <TextInput
-                label="URL alias"
-                name={`path-${index}`}
-                hint='Specify a path by which this data can be accessed in the browser. For example, type "/about" when writing an about page.'
-                disabled={alias.generated !== undefined ? alias.generated : true}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  if (e.target.value.match(/^[A-Za-z0-9-_.~[\]/]*$/)) {
-                    updateValue(index, 'url_path', e.target.value);
-                  }
-                }}
-                value={alias.url_path}
-              />
-            </Box>
-          </AccordionContent>
-        </Accordion>
-      ))}
-    </Stack>
+                {`Alias #${index + 1}`}
+              </Accordion.Trigger>
+            </Accordion.Header>
+            <Accordion.Content>
+              <Box>
+                <Checkbox
+                  onValueChange={(value: string) => {
+                    updateValue(index, 'generated', value);
+                  }}
+                  // @ts-ignore
+                  value={alias.generated !== undefined ? alias.generated : true}
+                  name={`generated-${index}`}
+                  hint="Uncheck this to create a custom alias below."
+                >
+                  {formatMessage({
+                    id: getTrad('EditView.ExcludeFromSitemap'),
+                    defaultMessage: ' Generate automatic URL alias',
+                  })}
+                </Checkbox>
+                <Link href="/plugins/webtools/patterns">Configure URL alias patterns.</Link>
+              </Box>
+              <Box paddingTop={4}>
+                <Field.Root
+                  hint='Specify a path by which this data can be accessed in the browser. For example, type "/about" when writing an about page.'
+                >
+                  <Field.Label>
+                    URL alias
+                  </Field.Label>
+                  <TextInput
+                    name={`path-${index}`}
+                    disabled={alias.generated !== undefined ? alias.generated : true}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                      if (e.target.value.match(/^[A-Za-z0-9-_.~[\]/]*$/)) {
+                        updateValue(index, 'url_path', e.target.value);
+                      }
+                    }}
+                    value={alias.url_path}
+                  />
+                  <Field.Hint />
+                </Field.Root>
+              </Box>
+            </Accordion.Content>
+          </Accordion.Item>
+        ))}
+      </Accordion.Root>
+    </Flex>
   );
 };
 

packages/core/admin/components/LabelField/index.tsx

@@ -10,6 +10,7 @@ import {
   Box,
   TextButton,
   Typography,
+  Field,
 } from '@strapi/design-system';
 import { PatternFormValues } from '../../types/url-patterns';
 
@@ -40,20 +41,27 @@ const LabelField: FC<Props> = ({
 
   return (
     <Box>
-      <TextInput
-        name="label"
-        value={values.label || ''}
-        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFieldValue('label', e.target.value)}
-        label={formatMessage({
-          id: 'webtools.settings.form.label.label',
-          defaultMessage: 'Label',
-        })}
+      <Field.Root
+        // @ts-ignore
         error={
           errors.label && touched.label
             ? formatMessage({ id: errors.label, defaultMessage: 'Invalid value' })
             : null
         }
-      />
+      >
+        <Field.Label>
+          {formatMessage({
+            id: 'webtools.settings.form.label.label',
+            defaultMessage: 'Label',
+          })}
+        </Field.Label>
+        <TextInput
+          name="label"
+          value={values.label || ''}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFieldValue('label', e.target.value)}
+        />
+        <Field.Error />
+      </Field.Root>
       {(generatedCode && !open) && (
         <Box style={{ display: 'flex', marginTop: 5 }}>
           <Typography>Machine name: {generatedCode}</Typography>
@@ -63,20 +71,27 @@ const LabelField: FC<Props> = ({
 
       {open && (
         <Box style={{ marginTop: 20 }}>
-          <TextInput
-            name="code"
-            value={values.code || generatedCode}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFieldValue('code', e.target.value)}
-            label={formatMessage({
-              id: 'global.sde',
-              defaultMessage: 'Code',
-            })}
+          <Field.Root
+            // @ts-ignore
             error={
               errors.code
                 ? formatMessage({ id: errors.code, defaultMessage: 'This value must be unique' })
                 : null
             }
-          />
+          >
+            <Field.Label>
+              {formatMessage({
+                id: 'global.sde',
+                defaultMessage: 'Code',
+              })}
+            </Field.Label>
+            <TextInput
+              name="code"
+              value={values.code || generatedCode}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFieldValue('code', e.target.value)}
+            />
+            <Field.Error />
+          </Field.Root>
         </Box>
       )}
     </Box>

packages/core/admin/components/LanguageCheckboxes/index.tsx

@@ -4,8 +4,6 @@ import {
   Flex,
   Checkbox,
   Field,
-  FieldLabel,
-  FieldError,
 } from '@strapi/design-system';
 import { getFetchClient } from '@strapi/strapi/admin';
 
@@ -44,12 +42,13 @@ const LanguageCheckboxes = ({
   }
 
   return (
-    <Field name="password" error={error as string}>
-      <FieldLabel>Select the language</FieldLabel>
+    <Field.Root name="password" error={error as string}>
+      <Field.Label>Select the language</Field.Label>
       <Flex direction="column" alignItems="start" gap="1" marginTop="2">
         {languages.map((contentType) => (
           <Checkbox
             aria-label={`Select ${contentType.name}`}
+            // @ts-ignore
             value={selectedLanguages.includes(contentType.uid)}
             onValueChange={() => {
               if (selectedLanguages.includes(contentType.uid)) {
@@ -66,9 +65,9 @@ const LanguageCheckboxes = ({
             {contentType.name}
           </Checkbox>
         ))}
-        <FieldError />
+        <Field.Error />
       </Flex>
-    </Field>
+    </Field.Root>
   );
 };
 

packages/core/admin/components/Loader/index.jsx → packages/core/admin/components/Loader/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Loader as LoaderComponent } from '@strapi/design-system';
 
 const Loader = () => {
-  const style = {
+  const style: React.CSSProperties = {
     display: 'flex',
     justifyContent: 'center',
     position: 'absolute',

packages/core/admin/components/PatternField/index.tsx

@@ -7,7 +7,8 @@ import styled from 'styled-components';
 import { FormikErrors } from 'formik';
 
 import {
-  TextInput, Popover, Stack, Box, Loader, Typography,
+  TextInput, Popover, Flex, Box, Loader, Typography,
+  Field,
 } from '@strapi/design-system';
 import { getFetchClient } from '@strapi/strapi/admin';
 import { PatternFormValues } from '../../types/url-patterns';
@@ -101,44 +102,55 @@ const PatternField: FC<Props> = ({
 
   return (
     <div>
-      <div ref={patternRef}>
-        <TextInput
-          label={formatMessage({
-            id: 'webtools.settings.form.pattern.label',
-            defaultMessage: 'Pattern',
-          })}
-          name="pattern"
-          value={values.pattern}
-          placeholder="/en/pages/[id]"
-          error={error}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            setPopoverDismissed(false);
-            if (e.target.value.match(/^[A-Za-z0-9-_.~[\]/]*$/)) {
-              return setFieldValue('pattern', e.target.value);
-            }
-
-            return null;
-          }}
-        />
-      </div>
       <Typography variant="pi">{patternHint()}</Typography>
       {values.pattern.endsWith('[') && !popoverDismissed && (
-        <Popover source={patternRef} onDismiss={() => setPopoverDismissed(true)} fullWidth>
-          <Stack size={1}>
-            {allowedFields[uid].map((fieldName) => (
-              <HoverBox
-                key={fieldName}
-                padding={2}
-                onClick={() => {
-                  const newPattern = `${values.pattern}${fieldName}]`;
-                  return setFieldValue('pattern', newPattern);
-                }}
+        <Popover.Root>
+          <Popover.Trigger>
+            <div>
+              <Field.Root
+                // @ts-ignore
+                error={error}
               >
-                {fieldName}
-              </HoverBox>
-            ))}
-          </Stack>
-        </Popover>
+                <Field.Label>
+                  {formatMessage({
+                    id: 'webtools.settings.form.pattern.label',
+                    defaultMessage: 'Pattern',
+                  })}
+                </Field.Label>
+                <TextInput
+                  name="pattern"
+                  value={values.pattern}
+                  placeholder="/en/pages/[id]"
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    setPopoverDismissed(false);
+                    if (e.target.value.match(/^[A-Za-z0-9-_.~[\]/]*$/)) {
+                      return setFieldValue('pattern', e.target.value);
+                    }
+
+                    return null;
+                  }}
+                />
+                <Field.Error />
+              </Field.Root>
+            </div>
+          </Popover.Trigger>
+          <Popover.Content>
+            <Flex>
+              {allowedFields[uid].map((fieldName) => (
+                <HoverBox
+                  key={fieldName}
+                  padding={2}
+                  onClick={() => {
+                    const newPattern = `${values.pattern}${fieldName}]`;
+                    return setFieldValue('pattern', newPattern);
+                  }}
+                >
+                  {fieldName}
+                </HoverBox>
+              ))}
+            </Flex>
+          </Popover.Content>
+        </Popover.Root>
       )}
     </div>
   );

packages/core/admin/components/Select/index.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { Select, Option } from '@strapi/design-system';
+import { Field, SingleSelect, SingleSelectOption } from '@strapi/design-system';
 import { FormikErrors } from 'formik';
 
 type ListItem = {
@@ -33,21 +33,29 @@ const SelectComponent: FC<Props> = ({
   }
 
   return (
-    <Select
-      label={label}
-      name={name}
-      placeholder={placeholder}
+    <Field.Root
       hint={hint}
+      // @ts-ignore
       error={error}
-      value={value}
-      onChange={(v: any) => setFieldValue(name, v)}
     >
-      {list.map((item) => (
-        <Option key={item.uid} value={item.uid}>
-          {item.name}
-        </Option>
-      ))}
-    </Select>
+      <Field.Label>
+        {label}
+      </Field.Label>
+      <SingleSelect
+        name={name}
+        placeholder={placeholder}
+        value={value}
+        onChange={(v: any) => setFieldValue(name, v)}
+      >
+        {list.map((item) => (
+          <SingleSelectOption key={item.uid} value={item.uid}>
+            {item.name}
+          </SingleSelectOption>
+        ))}
+      </SingleSelect>
+      <Field.Hint />
+      <Field.Error />
+    </Field.Root>
   );
 };
 

packages/core/admin/containers/App/index.tsx

@@ -2,14 +2,13 @@ import React from 'react';
 import { Route, Switch, useHistory } from 'react-router-dom';
 
 import {
-  Layout,
   SubNav,
   SubNavHeader,
   SubNavSections,
   SubNavSection,
   SubNavLink,
 } from '@strapi/design-system';
-import { Page, useStrapiApp } from '@strapi/strapi/admin';
+import { Page, useStrapiApp, Layouts } from '@strapi/strapi/admin';
 
 
 import pluginPermissions from '../../permissions';
@@ -33,19 +32,19 @@ const App = () => {
 
   return (
     <Page.Protect permissions={pluginPermissions['settings.patterns']}>
-      <Layout
+      <Layouts.Root
         sideNav={(
-          <SubNav ariaLabel="Webtools sub nav">
+          <SubNav>
             <SubNavHeader value="" label="Webtools" />
             <SubNavSections>
               <SubNavSection label="Core">
-                <SubNavLink to="/plugins/webtools/overview" key="test">
+                <SubNavLink href="/plugins/webtools/overview" key="test">
                   Overview
                 </SubNavLink>
-                <SubNavLink to="/plugins/webtools/urls" key="test">
+                <SubNavLink href="/plugins/webtools/urls" key="test">
                   All URLs
                 </SubNavLink>
-                <SubNavLink to="/plugins/webtools/patterns" key="test">
+                <SubNavLink href="/plugins/webtools/patterns" key="test">
                   Url Patterns
                 </SubNavLink>
               </SubNavSection>
@@ -69,7 +68,7 @@ const App = () => {
           {routerComponents.map(({ Component }) => <Component />)}
           {/* <Route path="" component={NotFound} /> */}
         </Switch>
-      </Layout>
+      </Layouts.Root>
     </Page.Protect>
   );
 };

packages/core/admin/screens/List/components/DeleteConfirmModal/index.tsx

@@ -3,14 +3,11 @@ import { useIntl } from 'react-intl';
 
 import {
   Dialog,
-  DialogBody,
-  DialogFooter,
   Flex,
   Typography,
-  Stack,
   Button,
 } from '@strapi/design-system';
-import { ExclamationMarkCircle } from '@strapi/icons';
+import { WarningCircle } from '@strapi/icons';
 
 type Props = {
   isOpen: boolean;
@@ -30,41 +27,43 @@ const DeleteConfirmModal = (props: Props) => {
   if (!isOpen) return null;
 
   return (
-    <Dialog
-      onClose={onClose}
-      title={formatMessage({
-        id: 'webtools.settings.page.list.delete_confirm_modal.title',
-        defaultMessage: 'Delete item',
-      })}
-      isOpen={isOpen}
-    >
-      <DialogBody icon={<ExclamationMarkCircle />}>
-        <Stack size={2}>
-          <Flex justifyContent="center">
-            <Typography variant="omega" id="confirm-description" style={{ textAlign: 'center' }}>
+    <Dialog.Root>
+      <Dialog.Trigger>
+        <div>test</div>
+      </Dialog.Trigger>
+      <Dialog.Content>
+        <Dialog.Header>
+          {formatMessage({
+            id: 'webtools.settings.page.list.delete_confirm_modal.title',
+            defaultMessage: 'Delete item',
+          })}
+        </Dialog.Header>
+        <Dialog.Body icon={<WarningCircle />}>
+          <Flex>
+            <Flex justifyContent="center">
+              <Typography variant="omega" id="confirm-description" style={{ textAlign: 'center' }}>
+                {formatMessage({
+                  id: 'webtools.settings.page.list.delete_confirm_modal.body',
+                  defaultMessage: 'Are you sure you want to delete this item?',
+                })}
+              </Typography>
+            </Flex>
+          </Flex>
+        </Dialog.Body>
+        <Dialog.Footer>
+          <Dialog.Cancel>
+            <Button
+              onClick={() => {
+                onClose();
+              }}
+              variant="tertiary"
+            >
               {formatMessage({
-                id: 'webtools.settings.page.list.delete_confirm_modal.body',
-                defaultMessage: 'Are you sure you want to delete this item?',
+                id: 'webtools.settings.button.cancel',
+                defaultMessage: 'Cancel',
               })}
-            </Typography>
-          </Flex>
-        </Stack>
-      </DialogBody>
-      <DialogFooter
-        startAction={(
-          <Button
-            onClick={() => {
-              onClose();
-            }}
-            variant="tertiary"
-          >
-            {formatMessage({
-              id: 'webtools.settings.button.cancel',
-              defaultMessage: 'Cancel',
-            })}
-          </Button>
-        )}
-        endAction={(
+            </Button>
+          </Dialog.Cancel>
           <Button
             variant="secondary"
             onClick={() => {
@@ -77,9 +76,9 @@ const DeleteConfirmModal = (props: Props) => {
               defaultMessage: 'Delete',
             })}
           </Button>
-        )}
-      />
-    </Dialog>
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog.Root>
   );
 };
 

packages/core/admin/screens/List/components/Filters/FilterInput/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Select, Option } from '@strapi/design-system';
+import { SingleSelect, SingleSelectOption } from '@strapi/design-system';
 import { EnabledContentTypes } from '../../../../../types/enabled-contenttypes';
 
 type Props = {
@@ -16,13 +16,13 @@ const FilterInput = ({
   contentTypes,
 }: Props) => {
   return (
-    <Select key="type-filter" aria-label={label} onChange={(newValue) => onChange(String(newValue))} value={value}>
+    <SingleSelect key="type-filter" aria-label={label} onChange={(newValue) => onChange(String(newValue))} value={value}>
       {contentTypes.map((contentType) => (
-        <Option key={contentType.uid} value={contentType.uid}>
+        <SingleSelectOption key={contentType.uid} value={contentType.uid}>
           {contentType.name}
-        </Option>
+        </SingleSelectOption>
       ))}
-    </Select>
+    </SingleSelect>
   );
 };
 

packages/core/admin/screens/List/components/Filters/index.tsx

@@ -34,7 +34,7 @@ const Filters = ({ contentTypes }: Props) => {
         metadatas: {
           label: 'Content-Type',
           // eslint-disable-next-line react/no-unstable-nested-components
-          customInput: (props) => <FilterInput contentTypes={contentTypes} {...props} />,
+          customInput: (props: any) => <FilterInput contentTypes={contentTypes} {...props} />,
         },
         fieldSchema: {
           type: 'string',
@@ -75,17 +75,15 @@ const Filters = ({ contentTypes }: Props) => {
             })}
           </Button>
           {isVisible && (
-            <StrapiFilters.Popover
-              displayedFilters={filters}
-              isVisible={isVisible}
-              onToggle={() => setIsVisible((prev) => !prev)}
-              source={buttonRef}
-            />
+            <StrapiFilters.Popover />
+            // displayedFilters={filters}
+            // isVisible={isVisible}
+            // onToggle={() => setIsVisible((prev) => !prev)}
+            // source={buttonRef}
           )}
         </Box>
-        <StrapiFilters.List
-          filtersSchema={filters}
-        />
+        <StrapiFilters.List />
+        {/* filtersSchema={filters} */}
       </Flex>
     </StrapiFilters.Root>
   );

packages/core/admin/screens/List/components/GeneratePathsModal/index.tsx

@@ -2,14 +2,10 @@ import React, { ChangeEvent } from 'react';
 import { useIntl } from 'react-intl';
 
 import {
-  ModalLayout,
-  ModalFooter,
-  ModalBody,
-  ModalHeader,
+  Modal,
   Button,
   Typography,
   Checkbox,
-  RadioGroup,
   Radio,
   Flex,
   Box,
@@ -21,7 +17,7 @@ import { GenerationType } from '../../../../../server/types';
 type Props = {
   isOpen: boolean;
   onClose: () => void;
-  onSubmit: (types: EnabledContentType['uid'][], generationType: GenerationType) => void;
+  onSubmit: (types: EnabledContentType['uid'][], generationType?: GenerationType) => void;
   contentTypes: EnabledContentTypes;
 };
 
@@ -37,106 +33,104 @@ const GeneratePathsModal = ({
   if (!isOpen) return null;
 
   return (
-    <ModalLayout
-      onClose={onClose}
-      labelledBy="title"
-    >
-      <ModalHeader>
-        <Typography textColor="neutral800" variant="omega" fontWeight="bold">
-          {formatMessage({
-            id: 'webtools.settings.page.list.generate_paths_modal.title',
-            defaultMessage: 'Generate URL aliases',
-          })}
-        </Typography>
-      </ModalHeader>
-      <ModalBody>
-        <Flex direction="column" alignItems="start" gap="7">
-          <Flex direction="column" alignItems="start" gap="2">
-            <Typography variant="delta">
-              {formatMessage({
-                id: 'webtools.settings.page.list.generate_paths_modal.types.title',
-                defaultMessage: 'Content types',
-              })}
-            </Typography>
-            <Typography variant="omega">
-              {formatMessage({
-                id: 'webtools.settings.page.list.generate_paths_modal.types.body',
-                defaultMessage: 'Select the content types you want to generate the URLs for.',
-              })}
-            </Typography>
-            <Flex direction="column" alignItems="start" gap="1" marginTop="2">
-              {contentTypes.map((contentType) => (
-                <Checkbox
-                  aria-label={`Select ${contentType.name}`}
-                  value={selectedContentTypes.includes(contentType.uid)}
-                  onValueChange={() => {
-                    if (selectedContentTypes.includes(contentType.uid)) {
-                      const newContentTypes = selectedContentTypes
-                        .filter((uid) => uid !== contentType.uid);
+    <Modal.Root>
+      <Modal.Content>
+        <Modal.Header>
+          <Typography textColor="neutral800" variant="omega" fontWeight="bold">
+            {formatMessage({
+              id: 'webtools.settings.page.list.generate_paths_modal.title',
+              defaultMessage: 'Generate URL aliases',
+            })}
+          </Typography>
+        </Modal.Header>
+        <Modal.Body>
+          <Flex direction="column" alignItems="start" gap="7">
+            <Flex direction="column" alignItems="start" gap="2">
+              <Typography variant="delta">
+                {formatMessage({
+                  id: 'webtools.settings.page.list.generate_paths_modal.types.title',
+                  defaultMessage: 'Content types',
+                })}
+              </Typography>
+              <Typography variant="omega">
+                {formatMessage({
+                  id: 'webtools.settings.page.list.generate_paths_modal.types.body',
+                  defaultMessage: 'Select the content types you want to generate the URLs for.',
+                })}
+              </Typography>
+              <Flex direction="column" alignItems="start" gap="1" marginTop="2">
+                {contentTypes.map((contentType) => (
+                  <Checkbox
+                    aria-label={`Select ${contentType.name}`}
+                    // @ts-ignore
+                    value={selectedContentTypes.includes(contentType.uid)}
+                    onValueChange={() => {
+                      if (selectedContentTypes.includes(contentType.uid)) {
+                        const newContentTypes = selectedContentTypes
+                          .filter((uid) => uid !== contentType.uid);
 
-                      setSelectedContentTypes(newContentTypes);
+                        setSelectedContentTypes(newContentTypes);
 
-                      return;
-                    }
+                        return;
+                      }
 
-                    setSelectedContentTypes([...selectedContentTypes, contentType.uid]);
-                  }}
-                >
-                  {contentType.name}
-                </Checkbox>
-              ))}
+                      setSelectedContentTypes([...selectedContentTypes, contentType.uid]);
+                    }}
+                  >
+                    {contentType.name}
+                  </Checkbox>
+                ))}
+              </Flex>
+            </Flex>
+            <Flex direction="column" alignItems="start" gap="2">
+              <Typography variant="delta">
+                {formatMessage({
+                  id: 'webtools.settings.page.list.generate_paths_modal.generation_type.title',
+                  defaultMessage: 'Generation type',
+                })}
+              </Typography>
+              <Typography variant="omega">
+                {formatMessage({
+                  id: 'webtools.settings.page.list.generate_paths_modal.generation_type.body',
+                  defaultMessage: 'Select how you would like to generate the URLs.',
+                })}
+              </Typography>
+              <Box marginTop="2">
+                <Radio.Group onChange={(e: ChangeEvent<HTMLInputElement>) => setSelectedGenerationType(e.target.value as GenerationType)} value={selectedGenerationType} name="meal">
+                  <Flex direction="column" alignItems="start" gap="2">
+                    <Radio.Item value="only_without_alias">
+                      {formatMessage({
+                        id: 'webtools.settings.page.list.generate_paths_modal.generation_type.only_without_alias',
+                        defaultMessage: 'Generate only for pages without an URL alias',
+                      })}
+                    </Radio.Item>
+                    <Radio.Item value="only_generated">
+                      {formatMessage({
+                        id: 'webtools.settings.page.list.generate_paths_modal.generation_type.only_generated',
+                        defaultMessage: 'Re-generate only URL alias that were auto-generated',
+                      })}
+                    </Radio.Item>
+                    <Radio.Item value="all">
+                      {formatMessage({
+                        id: 'webtools.settings.page.list.generate_paths_modal.generation_type.all',
+                        defaultMessage: 'Re-generate all URL aliases',
+                      })}
+                    </Radio.Item>
+                  </Flex>
+                </Radio.Group>
+              </Box>
             </Flex>
           </Flex>
-          <Flex direction="column" alignItems="start" gap="2">
-            <Typography variant="delta">
+        </Modal.Body>
+        <Modal.Footer>
+          <Modal.Close>
+            <Button onClick={onClose} variant="tertiary">
               {formatMessage({
-                id: 'webtools.settings.page.list.generate_paths_modal.generation_type.title',
-                defaultMessage: 'Generation type',
+                id: 'webtools.settings.button.cancel',
+                defaultMessage: 'Cancel',
               })}
-            </Typography>
-            <Typography variant="omega">
-              {formatMessage({
-                id: 'webtools.settings.page.list.generate_paths_modal.generation_type.body',
-                defaultMessage: 'Select how you would like to generate the URLs.',
-              })}
-            </Typography>
-            <Box marginTop="2">
-              <RadioGroup labelledBy="trophy-champions" onChange={(e: ChangeEvent<HTMLInputElement>) => setSelectedGenerationType(e.target.value as GenerationType)} value={selectedGenerationType} name="meal">
-                <Flex direction="column" alignItems="start" gap="2">
-                  <Radio value="only_without_alias">
-                    {formatMessage({
-                      id: 'webtools.settings.page.list.generate_paths_modal.generation_type.only_without_alias',
-                      defaultMessage: 'Generate only for pages without an URL alias',
-                    })}
-                  </Radio>
-                  <Radio value="only_generated">
-                    {formatMessage({
-                      id: 'webtools.settings.page.list.generate_paths_modal.generation_type.only_generated',
-                      defaultMessage: 'Re-generate only URL alias that were auto-generated',
-                    })}
-                  </Radio>
-                  <Radio value="all">
-                    {formatMessage({
-                      id: 'webtools.settings.page.list.generate_paths_modal.generation_type.all',
-                      defaultMessage: 'Re-generate all URL aliases',
-                    })}
-                  </Radio>
-                </Flex>
-              </RadioGroup>
-            </Box>
-          </Flex>
-        </Flex>
-      </ModalBody>
-      <ModalFooter
-        startActions={(
-          <Button onClick={onClose} variant="tertiary">
-            {formatMessage({
-              id: 'webtools.settings.button.cancel',
-              defaultMessage: 'Cancel',
-            })}
-          </Button>
-        )}
-        endActions={(
+            </Button>
+          </Modal.Close>
           <Button
             onClick={() => {
               onSubmit(selectedContentTypes, selectedGenerationType);
@@ -148,9 +142,9 @@ const GeneratePathsModal = ({
               defaultMessage: 'Generate paths',
             })}
           </Button>
-        )}
-      />
-    </ModalLayout>
+        </Modal.Footer>
+      </Modal.Content>
+    </Modal.Root>
   );
 };
 

packages/core/admin/screens/List/components/Table/index.tsx

@@ -4,7 +4,6 @@ import React, {
   useState,
 } from 'react';
 import { useIntl } from 'react-intl';
-import { Attribute } from '@strapi/strapi';
 
 import {
   Table,
@@ -25,7 +24,7 @@ import Filters from '../Filters';
 import { Config } from '../../../../../server/admin-api/config';
 
 type Props = {
-  paths: Attribute.GetValues<'plugin::webtools.url-alias'>[],
+  paths: any[],
   onDelete: () => void,
   pagination: Pagination,
   contentTypes: any[],

packages/core/admin/screens/List/components/TableRow/index.tsx

@@ -8,15 +8,14 @@ import {
   IconButton,
 } from '@strapi/design-system';
 import { useNotification, getFetchClient } from '@strapi/strapi/admin';
-import { Attribute, Entity } from '@strapi/strapi';
 import { useIntl } from 'react-intl';
 import { Trash, ExternalLink, Pencil } from '@strapi/icons';
 import { useHistory } from 'react-router-dom';
 import DeleteConfirmModal from '../DeleteConfirmModal';
 import { Config } from '../../../../../server/admin-api/config';
 
 type Props = {
-  row: Attribute.GetValues<'plugin::webtools.url-alias'>;
+  row: any;
   checked?: boolean;
   onDelete?: () => void;
   updateValue: () => any;
@@ -46,7 +45,7 @@ const TableRow: FC<Props> = ({
       .catch(() => { });
   };
 
-  const handleDelete = (id: Entity.ID) => {
+  const handleDelete = (id: number) => {
     get(`/webtools/url-alias/delete/${id}`)
       .then(() => {
         if (onDelete) onDelete();

packages/core/admin/screens/List/index.tsx

@@ -1,11 +1,15 @@
 import React, { useEffect, useState } from 'react';
-import { EntityService, Attribute } from '@strapi/types';
 import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { ContentLayout, HeaderLayout, Button } from '@strapi/design-system';
+import { Button } from '@strapi/design-system';
 
-import { Page, useNotification, getFetchClient } from '@strapi/strapi/admin';
+import {
+  Page,
+  useNotification,
+  getFetchClient,
+  Layouts,
+} from '@strapi/strapi/admin';
 
 import pluginPermissions from '../../permissions';
 import Table from './components/Table';
@@ -25,7 +29,7 @@ export type Pagination = {
 const List = () => {
   const [queryCount, setQueryCount] = useState<number>(0);
   const [loading, setLoading] = useState<boolean>(false);
-  const [paths, setPaths] = useState<Attribute.GetValues<'plugin::webtools.url-alias'>[] | null>(null);
+  const [paths, setPaths] = useState<any[] | null>(null);
   const [config, setConfig] = useState<Config | null>(null);
   const [pagination, setPagination] = useState<Pagination | null>(null);
   const [openModal, setOpenModal] = useState<boolean>(false);
@@ -48,7 +52,7 @@ const List = () => {
   }, [get, toggleNotification]);
 
   useEffect(() => {
-    get<EntityService.PaginatedResult<'plugin::webtools.url-alias'>>(`/webtools/url-alias/findMany${history.location.search}`)
+    get<any>(`/webtools/url-alias/findMany${history.location.search}`)
       .then((res) => {
         setPaths(res.data.results);
         setPagination(res.data.pagination);
@@ -92,10 +96,9 @@ const List = () => {
   return (
     <Page.Protect permissions={pluginPermissions['settings.patterns']}>
       {loading && <Loader />}
-      <HeaderLayout
+      <Layouts.Header
         title={formatMessage({ id: 'webtools.settings.page.list.title', defaultMessage: 'URLs' })}
         subtitle={formatMessage({ id: 'webtools.settings.page.list.description', defaultMessage: 'A list of all the known URL aliases.' })}
-        as="h2"
         // TODO: Generate all button.
         primaryAction={(
           <Button onClick={() => setOpenModal(true)} size="L">
@@ -106,18 +109,18 @@ const List = () => {
           </Button>
         )}
       />
-      <ContentLayout>
+      <Layouts.Content>
         <Table
           paths={paths}
           pagination={pagination}
           onDelete={() => setQueryCount(queryCount + 1)}
           config={config}
           contentTypes={contentTypes}
         />
-      </ContentLayout>
+      </Layouts.Content>
       <GeneratePathsModal
         isOpen={openModal}
-        // eslint-disable-next-line @typescript-eslint/no-misused-promises
+        // @ts-ignore
         onSubmit={handleGeneratePaths}
         onClose={() => setOpenModal(false)}
         contentTypes={contentTypes}

packages/core/admin/screens/Overview/index.tsx

@@ -2,10 +2,10 @@ import React, { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 
 import {
-  ContentLayout, HeaderLayout, Typography, Grid, GridItem, Flex, Link,
+  Typography, Grid, Flex, Link,
 } from '@strapi/design-system';
 import { ExternalLink } from '@strapi/icons';
-import { Page, getFetchClient } from '@strapi/strapi/admin';
+import { Page, getFetchClient, Layouts } from '@strapi/strapi/admin';
 
 import pluginPermissions from '../../permissions';
 import { WebtoolsAddonInfo } from '../../types/addons';
@@ -33,12 +33,11 @@ const List = () => {
   }
   return (
     <Page.Protect permissions={pluginPermissions['settings.patterns']}>
-      <HeaderLayout
+      <Layouts.Header
         title={formatMessage({ id: 'webtools.settings.page.overview.title', defaultMessage: 'Overview' })}
         subtitle={formatMessage({ id: 'webtools.settings.page.overview.description', defaultMessage: 'Webtools global information' })}
-        as="h2"
       />
-      <ContentLayout>
+      <Layouts.Content>
         <Flex direction="column" alignItems="stretch" gap={6}>
           <Flex
             direction="column"
@@ -59,20 +58,20 @@ const List = () => {
               })}
             </Typography>
 
-            <Grid gap={5} as="dl">
-              <GridItem col={6} s={12}>
-                <Typography variant="sigma" textColor="neutral600" as="dt">
+            <Grid.Root gap={5}>
+              <Grid.Item col={6} s={12}>
+                <Typography variant="sigma" textColor="neutral600">
                   {formatMessage({
                     id: 'webtools.settings.application.strapiVersion',
                     defaultMessage: 'strapi version',
                   })}
                 </Typography>
-                <Flex gap={3} direction="column" alignItems="start" as="dd">
+                <Flex gap={3} direction="column" alignItems="start">
                   <Typography>v{packageJson.version}</Typography>
                 </Flex>
-              </GridItem>
-              <GridItem col={6} s={12}>
-                <Typography variant="sigma" textColor="neutral600" as="dt">
+              </Grid.Item>
+              <Grid.Item col={6} s={12}>
+                <Typography variant="sigma" textColor="neutral600">
                   {formatMessage({
                     id: 'TODO_REPLACE',
                     defaultMessage: 'Links',
@@ -102,8 +101,8 @@ const List = () => {
                     })}
                   </Link>
                 </Flex>
-              </GridItem>
-            </Grid>
+              </Grid.Item>
+            </Grid.Root>
           </Flex>
         </Flex>
         {/* <Box
@@ -135,7 +134,7 @@ const List = () => {
             ))}
           </Flex>
         </Box> */}
-      </ContentLayout>
+      </Layouts.Content>
     </Page.Protect>
   );
 };

packages/core/admin/screens/Patterns/CreatePage/index.tsx

@@ -9,18 +9,15 @@ import {
 import { useHistory } from 'react-router-dom';
 
 import {
-  ContentLayout,
-  HeaderLayout,
   Box,
   Link,
   Button,
-  Stack,
+  Flex,
   Typography,
-  GridItem,
   Grid,
   Loader,
 } from '@strapi/design-system';
-import { useNotification, getFetchClient } from '@strapi/strapi/admin';
+import { useNotification, getFetchClient, Layouts } from '@strapi/strapi/admin';
 import { ArrowLeft, Check } from '@strapi/icons';
 import schema from './utils/schema';
 import { ErrorResponse } from '../../../types/error-response';
@@ -126,6 +123,7 @@ const CreatePatternPage = () => {
       initialValues={{
         label: '', pattern: '', contenttype: '', languages: [], localized: false,
       }}
+      // @ts-ignore
       onSubmit={handleCreateSubmit}
       validationSchema={schema}
       validate={validatePattern}
@@ -138,8 +136,8 @@ const CreatePatternPage = () => {
         isSubmitting,
         setFieldValue,
       }) => (
-        <Form noValidate onSubmit={handleSubmit} placeholder={null}>
-          <HeaderLayout
+        <Form noValidate onSubmit={handleSubmit}>
+          <Layouts.Header
             title={formatMessage({
               id: 'webtools.settings.page.patterns.create.title',
               defaultMessage: 'Add new pattern',
@@ -148,9 +146,8 @@ const CreatePatternPage = () => {
               id: 'webtools.settings.page.patterns.create.description',
               defaultMessage: 'Add a pattern for automatic URL alias generation.',
             })}
-            as="h2"
             navigationAction={(
-              <Link startIcon={<ArrowLeft />} to={`/plugins/${pluginId}/patterns`}>
+              <Link startIcon={<ArrowLeft />} href={`/plugins/${pluginId}/patterns`}>
                 {formatMessage({
                   id: 'global.back',
                   defaultMessage: 'Back',
@@ -166,8 +163,8 @@ const CreatePatternPage = () => {
               </Button>
             )}
           />
-          <ContentLayout>
-            <Stack spacing={7}>
+          <Layouts.Content>
+            <Flex>
               <Box
                 background="neutral0"
                 hasRadius
@@ -177,15 +174,15 @@ const CreatePatternPage = () => {
                 paddingLeft={7}
                 paddingRight={7}
               >
-                <Stack spacing={4}>
+                <Flex>
                   <Typography variant="delta">
                     {formatMessage({
                       id: 'webtools.settings.page.patterns.create.subtitle',
                       defaultMessage: 'Pattern details',
                     })}
                   </Typography>
-                  <Grid gap={4}>
-                    <GridItem col={6}>
+                  <Grid.Root gap={4}>
+                    <Grid.Item col={6}>
                       <Select
                         name="contenttype"
                         list={contentTypes}
@@ -201,39 +198,41 @@ const CreatePatternPage = () => {
                             : null
                         }
                       />
-                    </GridItem>
-                    <GridItem col={12} />
-                    <GridItem col={6}>
+                    </Grid.Item>
+                    <Grid.Item col={12} />
+                    <Grid.Item col={6}>
                       <LabelField
                         values={values}
                         setFieldValue={setFieldValue}
                         errors={errors}
                         touched={touched}
                       />
-                    </GridItem>
-                    <GridItem col={12} />
+                    </Grid.Item>
+                    <Grid.Item col={12} />
 
                     {(values.contenttype !== '') && (
-                      <GridItem col={6}>
+                      <Grid.Item col={6}>
                         <PatternField
                           values={values}
                           uid={values.contenttype}
                           setFieldValue={setFieldValue}
+                          // @ts-ignore
                           error={
                             errors.pattern && touched.pattern
                               ? errors.pattern
                               : null
                           }
                         />
-                      </GridItem>
+                      </Grid.Item>
                     )}
                     <HiddenLocalizedField
+                      // @ts-ignore
                       localized={getSelectedContentType(values.contenttype)?.localized}
                       setFieldValue={setFieldValue}
                     />
                     {values.localized && (
-                      <GridItem col={12}>
-                        <GridItem col={6}>
+                      <Grid.Item col={12}>
+                        <Grid.Item col={6}>
                           <LanguageCheckboxes
                             onChange={(newLanguages) => setFieldValue('languages', newLanguages)}
                             selectedLanguages={values.languages}
@@ -243,14 +242,14 @@ const CreatePatternPage = () => {
                                 : null
                             }
                           />
-                        </GridItem>
-                      </GridItem>
+                        </Grid.Item>
+                      </Grid.Item>
                     )}
-                  </Grid>
-                </Stack>
+                  </Grid.Root>
+                </Flex>
               </Box>
-            </Stack>
-          </ContentLayout>
+            </Flex>
+          </Layouts.Content>
         </Form>
       )}
     </Formik>

packages/core/admin/screens/Patterns/EditPage/index.tsx

@@ -3,18 +3,15 @@ import { useIntl } from 'react-intl';
 import { Formik, Form, FormikProps } from 'formik';
 import { useRouteMatch, useHistory } from 'react-router-dom';
 import {
-  ContentLayout,
-  HeaderLayout,
   Box,
   Link,
   Button,
-  Stack,
+  Flex,
   Typography,
-  GridItem,
   Grid,
   Loader,
 } from '@strapi/design-system';
-import { useNotification, getFetchClient } from '@strapi/strapi/admin';
+import { useNotification, getFetchClient, Layouts } from '@strapi/strapi/admin';
 import { ArrowLeft, Check } from '@strapi/icons';
 import { ErrorResponse } from '../../../types/error-response';
 import schema from './utils/schema';
@@ -74,7 +71,7 @@ const EditPatternPage = () => {
   ) => {
     try {
       // Proceed to update the current pattern
-      await put(`/webtools/url-pattern/update/${patternEntity.id}`, {
+      await put(`/webtools/url-pattern/update/${patternEntity?.id}`, {
         data: values,
       });
 
@@ -150,6 +147,7 @@ const EditPatternPage = () => {
         code: patternEntity.code,
         localized: false,
       }}
+      // @ts-ignore
       onSubmit={handleEditSubmit}
       validationSchema={schema}
       validate={validatePattern}
@@ -162,8 +160,8 @@ const EditPatternPage = () => {
         isSubmitting,
         setFieldValue,
       }) => (
-        <Form noValidate onSubmit={handleSubmit} placeholder={null}>
-          <HeaderLayout
+        <Form noValidate onSubmit={handleSubmit}>
+          <Layouts.Header
             title={formatMessage({
               id: 'webtools.settings.page.patterns.edit.title',
               defaultMessage: 'Edit pattern',
@@ -173,11 +171,10 @@ const EditPatternPage = () => {
               defaultMessage:
                 'Edit this pattern for automatic URL alias generation.',
             })}
-            as="h2"
             navigationAction={(
               <Link
                 startIcon={<ArrowLeft />}
-                to={`/plugins/${pluginId}/patterns`}
+                href={`/plugins/${pluginId}/patterns`}
               >
                 {formatMessage({
                   id: 'global.back',
@@ -198,8 +195,8 @@ const EditPatternPage = () => {
               </Button>
             )}
           />
-          <ContentLayout>
-            <Stack spacing={7}>
+          <Layouts.Content>
+            <Flex>
               <Box
                 background="neutral0"
                 hasRadius
@@ -209,15 +206,15 @@ const EditPatternPage = () => {
                 paddingLeft={7}
                 paddingRight={7}
               >
-                <Stack spacing={4}>
+                <Flex>
                   <Typography variant="delta">
                     {formatMessage({
                       id: 'webtools.settings.page.patterns.edit.subtitle',
                       defaultMessage: 'Pattern details',
                     })}
                   </Typography>
-                  <Grid gap={4}>
-                    <GridItem col={6}>
+                  <Grid.Root gap={4}>
+                    <Grid.Item col={6}>
                       <Select
                         name="contenttype"
                         list={contentTypes}
@@ -239,25 +236,26 @@ const EditPatternPage = () => {
                             : null
                         }
                       />
-                    </GridItem>
-                    <GridItem col={12} />
-                    <GridItem col={12} />
-                    <GridItem col={6}>
+                    </Grid.Item>
+                    <Grid.Item col={12} />
+                    <Grid.Item col={12} />
+                    <Grid.Item col={6}>
                       <LabelField
                         values={values}
                         setFieldValue={setFieldValue}
                         errors={errors}
                         touched={touched}
                       />
-                    </GridItem>
-                    <GridItem col={12} />
+                    </Grid.Item>
+                    <Grid.Item col={12} />
 
                     {values.contenttype !== '' && (
-                      <GridItem col={6}>
+                      <Grid.Item col={6}>
                         <PatternField
                           values={values}
                           uid={values.contenttype}
                           setFieldValue={setFieldValue}
+                          // @ts-ignore
                           error={
                               errors.pattern
                               && touched.pattern
@@ -266,15 +264,15 @@ const EditPatternPage = () => {
                                 : null
                             }
                         />
-                      </GridItem>
+                      </Grid.Item>
                     )}
                     <HiddenLocalizedField
                       localized={getSelectedContentType(values.contenttype)?.localized}
                       setFieldValue={setFieldValue}
                     />
                     {values.localized && (
-                      <GridItem col={12}>
-                        <GridItem col={6}>
+                      <Grid.Item col={12}>
+                        <Grid.Item col={6}>
                           <LanguageCheckboxes
                             onChange={(newLanguages) => setFieldValue('languages', newLanguages)}
                             selectedLanguages={values.languages}
@@ -284,14 +282,14 @@ const EditPatternPage = () => {
                                 : null
                             }
                           />
-                        </GridItem>
-                      </GridItem>
+                        </Grid.Item>
+                      </Grid.Item>
                     )}
-                  </Grid>
-                </Stack>
+                  </Grid.Root>
+                </Flex>
               </Box>
-            </Stack>
-          </ContentLayout>
+            </Flex>
+          </Layouts.Content>
         </Form>
       )}
     </Formik>

packages/core/admin/screens/Patterns/ListPage/index.tsx

@@ -3,14 +3,12 @@ import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import {
   Loader,
-  ContentLayout,
-  HeaderLayout,
   Button,
   Box,
 } from '@strapi/design-system';
 
 import { Plus } from '@strapi/icons';
-import { getFetchClient } from '@strapi/strapi/admin';
+import { getFetchClient, Layouts } from '@strapi/strapi/admin';
 
 import pluginId from '../../../helpers/pluginId';
 import Table from './components/Table';
@@ -52,22 +50,21 @@ const ListPatternPage = () => {
 
   return (
     <Box>
-      <HeaderLayout
+      <Layouts.Header
         title={formatMessage({ id: 'webtools.settings.page.patterns.title', defaultMessage: 'Patterns' })}
         subtitle={formatMessage({ id: 'webtools.settings.page.patterns.description', defaultMessage: 'A list of all the known URL alias patterns.' })}
-        as="h2"
         primaryAction={(
           <Button onClick={() => push(`/plugins/${pluginId}/patterns/new`)} startIcon={<Plus />} size="L">
             {formatMessage({
               id: 'webtools.settings.button.add_pattern',
               defaultMessage: 'Add new pattern',
             })}
           </Button>
-                )}
+        )}
       />
-      <ContentLayout>
+      <Layouts.Content>
         <Table patterns={patterns} />
-      </ContentLayout>
+      </Layouts.Content>
     </Box>
   );
 };

packages/core/admin/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "@strapi/typescript-utils/tsconfigs/admin",
-  "include": ["./src", "./custom.d.ts"],
+  "include": [".", "./custom.d.ts"],
   "compilerOptions": {
     "rootDir": "../",
     "baseUrl": "."