From 3ae249212aac86c77dbdc84ac83721e09cecd60a Mon Sep 17 00:00:00 2001
From: Adrien L <thewebsdoor@gmail.com>
Date: Tue, 7 Oct 2025 11:45:13 +0200
Subject: [PATCH] fix: scroll in sidenav (#24521)

* fix: scroll in sidenav

* fix: update snapshot
---
 .../admin/admin/src/components/SubNav.tsx     |    6 +
 .../pages/Settings/components/SettingsNav.tsx |    6 +-
 .../admin/src/components/LeftMenu.tsx         |   14 +-
 .../ContentTypeBuilderNav.tsx                 |  308 +++--
 .../tests/__snapshots__/index.test.tsx.snap   | 1228 +++++++++--------
 5 files changed, 796 insertions(+), 766 deletions(-)

diff --git a/packages/core/admin/admin/src/components/SubNav.tsx b/packages/core/admin/admin/src/components/SubNav.tsx
index 16f51264f8..c744a544a2 100644
--- a/packages/core/admin/admin/src/components/SubNav.tsx
+++ b/packages/core/admin/admin/src/components/SubNav.tsx
@@ -7,6 +7,7 @@ import {
   Typography,
   IconButton,
   Badge,
+  ScrollArea,
 } from '@strapi/design-system';
 import { ChevronDown, Plus } from '@strapi/icons';
 import { NavLink } from 'react-router-dom';
@@ -349,8 +350,13 @@ const PageWrapper = styled(Box)`
   }
 `;
 
+const Content = ({ children }: { children: React.ReactNode }) => {
+  return <ScrollArea>{children}</ScrollArea>;
+};
+
 export const SubNav = {
   Main,
+  Content,
   Header,
   Link,
   Sections,
diff --git a/packages/core/admin/admin/src/pages/Settings/components/SettingsNav.tsx b/packages/core/admin/admin/src/pages/Settings/components/SettingsNav.tsx
index 2fe77c2603..f3739fae58 100644
--- a/packages/core/admin/admin/src/pages/Settings/components/SettingsNav.tsx
+++ b/packages/core/admin/admin/src/pages/Settings/components/SettingsNav.tsx
@@ -1,4 +1,4 @@
-import { Badge, Divider, ScrollArea } from '@strapi/design-system';
+import { Badge, Divider } from '@strapi/design-system';
 import { Lightning } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { useLocation } from 'react-router-dom';
@@ -78,7 +78,7 @@ const SettingsNav = ({ isFullPage = false }: { isFullPage?: boolean }) => {
           <Divider />
         </>
       )}
-      <ScrollArea>
+      <SubNav.Content>
         {isFullPage && <SubNav.Header label={label} />}
         <SubNav.Sections>
           {sections.map((section) => (
@@ -124,7 +124,7 @@ const SettingsNav = ({ isFullPage = false }: { isFullPage?: boolean }) => {
             </SubNav.Section>
           ))}
         </SubNav.Sections>
-      </ScrollArea>
+      </SubNav.Content>
     </SubNav.Main>
   );
 };
diff --git a/packages/core/content-manager/admin/src/components/LeftMenu.tsx b/packages/core/content-manager/admin/src/components/LeftMenu.tsx
index cf96403a9e..00c8ab9042 100644
--- a/packages/core/content-manager/admin/src/components/LeftMenu.tsx
+++ b/packages/core/content-manager/admin/src/components/LeftMenu.tsx
@@ -1,15 +1,7 @@
 import * as React from 'react';
 
 import { useQueryParams, SubNav } from '@strapi/admin/strapi-admin';
-import {
-  Flex,
-  Searchbar,
-  useCollator,
-  useFilter,
-  Divider,
-  ScrollArea,
-  Loader,
-} from '@strapi/design-system';
+import { Flex, Searchbar, useCollator, useFilter, Divider, Loader } from '@strapi/design-system';
 import { parse, stringify } from 'qs';
 import { useIntl } from 'react-intl';
 
@@ -143,7 +135,7 @@ const LeftMenu = ({ isFullPage = false }: { isFullPage?: boolean }) => {
           <Divider />
         </>
       )}
-      <ScrollArea>
+      <SubNav.Content>
         {isFullPage && <SubNav.Header label={label} />}
         <Flex
           paddingLeft={{
@@ -209,7 +201,7 @@ const LeftMenu = ({ isFullPage = false }: { isFullPage?: boolean }) => {
             );
           })}
         </SubNav.Sections>
-      </ScrollArea>
+      </SubNav.Content>
     </SubNav.Main>
   );
 };
diff --git a/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/ContentTypeBuilderNav.tsx b/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/ContentTypeBuilderNav.tsx
index 48fd4e3961..53bc42b8ea 100644
--- a/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/ContentTypeBuilderNav.tsx
+++ b/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/ContentTypeBuilderNav.tsx
@@ -99,167 +99,169 @@ export const ContentTypeBuilderNav = () => {
     <SubNav.Main aria-label={pluginName}>
       <SubNav.Header label={pluginName} />
       <Divider background="neutral150" />
-      <Flex padding={5} gap={3} direction={'column'} alignItems={'stretch'}>
-        <tours.contentTypeBuilder.Save>
-          <Flex gap={2}>
-            <Button
-              flex={1}
-              onClick={(e) => {
-                e.preventDefault();
-                saveSchema();
-              }}
-              type="submit"
-              disabled={!isModified || !isInDevelopmentMode}
-              fullWidth
-              size="S"
-            >
-              {formatMessage({
-                id: 'global.save',
-                defaultMessage: 'Save',
-              })}
-            </Button>
-            <Menu.Root open={menuIsOpen} onOpenChange={setMenuIsOpen}>
-              <Menu.Trigger
+      <SubNav.Content>
+        <Flex padding={5} gap={3} direction={'column'} alignItems={'stretch'}>
+          <tours.contentTypeBuilder.Save>
+            <Flex gap={2}>
+              <Button
+                flex={1}
+                onClick={(e) => {
+                  e.preventDefault();
+                  saveSchema();
+                }}
+                type="submit"
+                disabled={!isModified || !isInDevelopmentMode}
+                fullWidth
                 size="S"
-                endIcon={null}
-                paddingTop="4px"
-                paddingLeft="7px"
-                paddingRight="7px"
-                variant="tertiary"
               >
-                <More fill="neutral500" aria-hidden focusable={false} />
-                <VisuallyHidden tag="span">
-                  {formatMessage({
-                    id: 'global.more.actions',
-                    defaultMessage: 'More actions',
-                  })}
-                </VisuallyHidden>
-              </Menu.Trigger>
-              <Menu.Content zIndex={1}>
-                <Menu.Item
-                  disabled={!history.canUndo || !isInDevelopmentMode}
-                  onSelect={undoHandler}
-                  startIcon={<ArrowCounterClockwise />}
+                {formatMessage({
+                  id: 'global.save',
+                  defaultMessage: 'Save',
+                })}
+              </Button>
+              <Menu.Root open={menuIsOpen} onOpenChange={setMenuIsOpen}>
+                <Menu.Trigger
+                  size="S"
+                  endIcon={null}
+                  paddingTop="4px"
+                  paddingLeft="7px"
+                  paddingRight="7px"
+                  variant="tertiary"
                 >
-                  {formatMessage({
-                    id: 'global.last-change.undo',
-                    defaultMessage: 'Undo last change',
-                  })}
-                </Menu.Item>
-                <Menu.Item
-                  disabled={!history.canRedo || !isInDevelopmentMode}
-                  onSelect={redoHandler}
-                  startIcon={<ArrowClockwise />}
-                >
-                  {formatMessage({
-                    id: 'global.last-change.redo',
-                    defaultMessage: 'Redo last change',
-                  })}
-                </Menu.Item>
-                <Menu.Separator />
-                <DiscardAllMenuItem
-                  disabled={!history.canDiscardAll || !isInDevelopmentMode}
-                  onSelect={discardHandler}
-                >
-                  <Flex gap={2}>
-                    <Cross />
-                    <Typography>
-                      {formatMessage({
-                        id: 'global.last-changes.discard',
-                        defaultMessage: 'Discard last changes',
-                      })}
-                    </Typography>
-                  </Flex>
-                </DiscardAllMenuItem>
-              </Menu.Content>
-            </Menu.Root>
-          </Flex>
-        </tours.contentTypeBuilder.Save>
+                  <More fill="neutral500" aria-hidden focusable={false} />
+                  <VisuallyHidden tag="span">
+                    {formatMessage({
+                      id: 'global.more.actions',
+                      defaultMessage: 'More actions',
+                    })}
+                  </VisuallyHidden>
+                </Menu.Trigger>
+                <Menu.Content zIndex={1}>
+                  <Menu.Item
+                    disabled={!history.canUndo || !isInDevelopmentMode}
+                    onSelect={undoHandler}
+                    startIcon={<ArrowCounterClockwise />}
+                  >
+                    {formatMessage({
+                      id: 'global.last-change.undo',
+                      defaultMessage: 'Undo last change',
+                    })}
+                  </Menu.Item>
+                  <Menu.Item
+                    disabled={!history.canRedo || !isInDevelopmentMode}
+                    onSelect={redoHandler}
+                    startIcon={<ArrowClockwise />}
+                  >
+                    {formatMessage({
+                      id: 'global.last-change.redo',
+                      defaultMessage: 'Redo last change',
+                    })}
+                  </Menu.Item>
+                  <Menu.Separator />
+                  <DiscardAllMenuItem
+                    disabled={!history.canDiscardAll || !isInDevelopmentMode}
+                    onSelect={discardHandler}
+                  >
+                    <Flex gap={2}>
+                      <Cross />
+                      <Typography>
+                        {formatMessage({
+                          id: 'global.last-changes.discard',
+                          defaultMessage: 'Discard last changes',
+                        })}
+                      </Typography>
+                    </Flex>
+                  </DiscardAllMenuItem>
+                </Menu.Content>
+              </Menu.Root>
+            </Flex>
+          </tours.contentTypeBuilder.Save>
 
-        <Searchbar
-          value={search.value}
-          onChange={(e) => search.onChange(e.target.value)}
-          onClear={() => search.onChange('')}
-          placeholder={formatMessage({
-            id: getTrad('search.placeholder'),
-            defaultMessage: 'Search',
-          })}
-          size="S"
-          // eslint-disable-next-line react/no-children-prop
-          children={undefined}
-          name={'search_contentType'}
-          clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}
-          aria-label={formatMessage({
-            id: getTrad('search.placeholder'),
-            defaultMessage: 'Search',
-          })}
-        />
-      </Flex>
-      <SubNav.Sections>
-        {menu.map((section) => (
-          <Fragment key={section.name}>
-            <SubNav.Section
-              label={formatMessage({
-                id: section.title.id,
-                defaultMessage: section.title.defaultMessage,
-              })}
-              link={
-                section.customLink && {
-                  label: formatMessage({
-                    id: section.customLink?.id,
-                    defaultMessage: section.customLink?.defaultMessage,
-                  }),
-                  onClick: section.customLink?.onClick,
+          <Searchbar
+            value={search.value}
+            onChange={(e) => search.onChange(e.target.value)}
+            onClear={() => search.onChange('')}
+            placeholder={formatMessage({
+              id: getTrad('search.placeholder'),
+              defaultMessage: 'Search',
+            })}
+            size="S"
+            // eslint-disable-next-line react/no-children-prop
+            children={undefined}
+            name={'search_contentType'}
+            clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}
+            aria-label={formatMessage({
+              id: getTrad('search.placeholder'),
+              defaultMessage: 'Search',
+            })}
+          />
+        </Flex>
+        <SubNav.Sections>
+          {menu.map((section) => (
+            <Fragment key={section.name}>
+              <SubNav.Section
+                label={formatMessage({
+                  id: section.title.id,
+                  defaultMessage: section.title.defaultMessage,
+                })}
+                link={
+                  section.customLink && {
+                    label: formatMessage({
+                      id: section.customLink?.id,
+                      defaultMessage: section.customLink?.defaultMessage,
+                    }),
+                    onClick: section.customLink?.onClick,
+                  }
                 }
-              }
-              sectionId={section.name}
-            >
-              {section.links.map((link) => {
-                const linkLabel = formatMessage({ id: link.name, defaultMessage: link.title });
+                sectionId={section.name}
+              >
+                {section.links.map((link) => {
+                  const linkLabel = formatMessage({ id: link.name, defaultMessage: link.title });
+
+                  if ('links' in link) {
+                    return (
+                      <SubNav.SubSection key={link.name} label={link.title}>
+                        {link.links.map((subLink) => {
+                          const label = formatMessage({
+                            id: subLink.name,
+                            defaultMessage: subLink.title,
+                          });
+
+                          return (
+                            <SubNav.Link
+                              to={subLink.to}
+                              key={subLink.name}
+                              label={label}
+                              endAction={
+                                <Box tag="span" textAlign="center" width={'24px'}>
+                                  <Status status={subLink.status} />
+                                </Box>
+                              }
+                            />
+                          );
+                        })}
+                      </SubNav.SubSection>
+                    );
+                  }
 
-                if ('links' in link) {
                   return (
-                    <SubNav.SubSection key={link.name} label={link.title}>
-                      {link.links.map((subLink) => {
-                        const label = formatMessage({
-                          id: subLink.name,
-                          defaultMessage: subLink.title,
-                        });
-
-                        return (
-                          <SubNav.Link
-                            to={subLink.to}
-                            key={subLink.name}
-                            label={label}
-                            endAction={
-                              <Box tag="span" textAlign="center" width={'24px'}>
-                                <Status status={subLink.status} />
-                              </Box>
-                            }
-                          />
-                        );
-                      })}
-                    </SubNav.SubSection>
+                    <SubNav.Link
+                      to={link.to}
+                      key={link.name}
+                      label={linkLabel}
+                      endAction={
+                        <Box tag="span" textAlign="center" width={'24px'}>
+                          <Status status={link.status} />
+                        </Box>
+                      }
+                    />
                   );
-                }
-
-                return (
-                  <SubNav.Link
-                    to={link.to}
-                    key={link.name}
-                    label={linkLabel}
-                    endAction={
-                      <Box tag="span" textAlign="center" width={'24px'}>
-                        <Status status={link.status} />
-                      </Box>
-                    }
-                  />
-                );
-              })}
-            </SubNav.Section>
-          </Fragment>
-        ))}
-      </SubNav.Sections>
+                })}
+              </SubNav.Section>
+            </Fragment>
+          ))}
+        </SubNav.Sections>
+      </SubNav.Content>
       <Dialog.Root
         open={discardConfirmationModalIsOpen}
         onOpenChange={setDiscardConfirmationModalIsOpen}
diff --git a/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/tests/__snapshots__/index.test.tsx.snap b/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/tests/__snapshots__/index.test.tsx.snap
index 71b26b2ba2..78124786ec 100644
--- a/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/tests/__snapshots__/index.test.tsx.snap
+++ b/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/tests/__snapshots__/index.test.tsx.snap
@@ -21,14 +21,14 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   background: #eaeaef;
 }
 
-.c10 {
+.c12 {
   padding-block-start: 20px;
   padding-inline-end: 20px;
   padding-block-end: 20px;
   padding-inline-start: 20px;
 }
 
-.c13 {
+.c15 {
   padding-inline-start: 16px;
   padding-inline-end: 16px;
   width: 100%;
@@ -37,7 +37,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   flex: 1;
 }
 
-.c17 {
+.c19 {
   padding-block-start: 4px;
   padding-inline-start: 7px;
   padding-inline-end: 7px;
@@ -45,52 +45,52 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   cursor: pointer;
 }
 
-.c28 {
+.c30 {
   padding-block-start: 16px;
   padding-block-end: 16px;
 }
 
-.c31 {
+.c33 {
   position: relative;
 }
 
-.c33 {
+.c35 {
   padding-inline-end: 4px;
 }
 
-.c36 {
+.c38 {
   border-radius: 4px;
   display: inline-flex;
   cursor: pointer;
 }
 
-.c39 {
+.c41 {
   margin-inline-start: 4px;
   margin-inline-end: 4px;
 }
 
-.c43 {
+.c45 {
   padding-inline-start: 12px;
   padding-inline-end: 12px;
   width: 100%;
   border-radius: 4px;
 }
 
-.c44 {
+.c46 {
   width: 100%;
 }
 
-.c46 {
+.c48 {
   width: 100%;
   overflow: hidden;
 }
 
-.c48 {
+.c50 {
   width: 24px;
   text-align: center;
 }
 
-.c50 {
+.c52 {
   padding-inline-start: 8px;
 }
 
@@ -108,21 +108,21 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   display: flex;
 }
 
-.c11 {
+.c13 {
   gap: 12px;
   align-items: stretch;
   flex-direction: column;
   display: flex;
 }
 
-.c12 {
+.c14 {
   gap: 8px;
   align-items: center;
   flex-direction: row;
   display: flex;
 }
 
-.c14 {
+.c16 {
   gap: 8px;
   align-items: center;
   justify-content: center;
@@ -130,14 +130,14 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   display: inline-flex;
 }
 
-.c21 {
+.c23 {
   gap: 4px;
   align-items: stretch;
   flex-direction: column;
   display: flex;
 }
 
-.c22 {
+.c24 {
   gap: 8px;
   align-items: center;
   justify-content: space-between;
@@ -145,48 +145,48 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   display: flex;
 }
 
-.c29 {
+.c31 {
   gap: 20px;
   align-items: stretch;
   flex-direction: column;
   display: flex;
 }
 
-.c30 {
+.c32 {
   gap: 8px;
   align-items: stretch;
   flex-direction: column;
   display: flex;
 }
 
-.c32 {
-  align-items: center;
-  flex-direction: row;
-  display: flex;
-}
-
-.c35 {
-  gap: 4px;
+.c34 {
   align-items: center;
   flex-direction: row;
   display: flex;
 }
 
 .c37 {
+  gap: 4px;
+  align-items: center;
+  flex-direction: row;
+  display: flex;
+}
+
+.c39 {
   align-items: center;
   justify-content: center;
   flex-direction: row;
   display: flex;
 }
 
-.c40 {
+.c42 {
   gap: 2px;
   align-items: stretch;
   flex-direction: column;
   display: flex;
 }
 
-.c45 {
+.c47 {
   gap: 4px;
   align-items: center;
   justify-content: space-between;
@@ -201,14 +201,14 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   color: currentcolor;
 }
 
-.c16 {
+.c18 {
   font-size: 1.2rem;
   line-height: 1.33;
   color: currentcolor;
   font-weight: 600;
 }
 
-.c34 {
+.c36 {
   font-weight: 600;
   font-size: 1.1rem;
   line-height: 1.45;
@@ -216,21 +216,21 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   color: #666687;
 }
 
-.c47 {
+.c49 {
   font-size: 1.4rem;
   line-height: 1.43;
   color: currentcolor;
   line-height: 32px;
 }
 
-.c51 {
+.c53 {
   font-size: 1.4rem;
   line-height: 1.43;
   color: #32324d;
   font-weight: 500;
 }
 
-.c19 {
+.c21 {
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
@@ -241,7 +241,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c15 {
+.c17 {
   height: 3.2rem;
   text-decoration: none;
   border: 1px solid #4945ff;
@@ -249,24 +249,24 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   color: #ffffff;
 }
 
-.c15:hover {
+.c17:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c15:active {
+.c17:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c15[aria-disabled='true'] {
+.c17[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
   color: #666687;
   cursor: default;
 }
 
-.c18 {
+.c20 {
   height: 3.2rem;
   text-decoration: none;
   border: 1px solid #dcdce4;
@@ -274,22 +274,22 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   color: #32324d;
 }
 
-.c18:hover {
+.c20:hover {
   background-color: #f6f6f9;
 }
 
-.c18:active {
+.c20:active {
   background-color: #eaeaef;
 }
 
-.c18[aria-disabled='true'] {
+.c20[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
   color: #666687;
   cursor: default;
 }
 
-.c38 {
+.c40 {
   text-decoration: none;
   padding-block: 0.2rem;
   padding-inline: 0.2rem;
@@ -298,26 +298,26 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   color: #32324d;
 }
 
-.c38 svg {
+.c40 svg {
   fill: #8e8ea9;
 }
 
-.c38:hover {
+.c40:hover {
   background-color: #f6f6f9;
 }
 
-.c38:active {
+.c40:active {
   background-color: #eaeaef;
 }
 
-.c38[aria-disabled='true'] {
+.c40[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
   color: #666687;
   cursor: default;
 }
 
-.c27 {
+.c29 {
   border: none;
   border-radius: 4px;
   color: #32324d;
@@ -332,21 +332,21 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   padding-block: 4px;
 }
 
-.c27::placeholder {
+.c29::placeholder {
   color: #666687;
   opacity: 1;
 }
 
-.c27[aria-disabled='true'] {
+.c29[aria-disabled='true'] {
   color: inherit;
 }
 
-.c27:focus {
+.c29:focus {
   outline: none;
   box-shadow: none;
 }
 
-.c23 {
+.c25 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   background: #ffffff;
@@ -358,34 +358,45 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   transition-duration: 0.2s;
 }
 
-.c23:focus-within {
+.c25:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
+.c10 {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+}
+
+.c11 {
+  min-width: 100%;
+}
+
 .c9 {
   height: 1px;
   border: none;
   flex-shrink: 0;
 }
 
-.c26 {
+.c28 {
   font-size: 1rem;
 }
 
-.c26 path {
+.c28 path {
   fill: #8e8ea9;
 }
 
-.c20 {
+.c22 {
   border-radius: 4px;
 }
 
-border:1px solid #eaeaef .c20:focus-within .c25 {
+border:1px solid #eaeaef .c22:focus-within .c27 {
   fill: #4945ff;
 }
 
-.c24 {
+.c26 {
   border: 1px solid #eaeaef height:16px;
   padding: 0 0 0 8px;
   color: #32324d;
@@ -395,11 +406,11 @@ border:1px solid #eaeaef .c20:focus-within .c25 {
   transition-duration: 0.2s;
 }
 
-.c24:hover button {
+.c26:hover button {
   cursor: pointer;
 }
 
-.c24:focus-within {
+.c26:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
@@ -430,7 +441,7 @@ border:1px solid #eaeaef .c20:focus-within .c25 {
   z-index: 2;
 }
 
-.c42 {
+.c44 {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -439,21 +450,21 @@ border:1px solid #eaeaef .c20:focus-within .c25 {
   color: #32324d;
 }
 
-.c42.active>div {
+.c44.active>div {
   background-color: #f0f0ff;
   color: #271fe0;
   font-weight: 500;
 }
 
-.c42:hover.active>div {
+.c44:hover.active>div {
   background-color: #f0f0ff;
 }
 
-.c42:hover>div {
+.c44:hover>div {
   background-color: #f6f6f9;
 }
 
-.c42:focus-visible {
+.c44:focus-visible {
   outline-offset: -2px;
 }
 
@@ -462,7 +473,7 @@ border:1px solid #eaeaef .c20:focus-within .c25 {
   height: 5.6rem;
 }
 
-.c49 {
+.c51 {
   cursor: pointer;
   width: 100%;
   border: none;
@@ -477,11 +488,11 @@ border:1px solid #eaeaef .c20:focus-within .c25 {
   padding-bottom: 8px;
 }
 
-.c49:hover {
+.c51:hover {
   background-color: #f6f6f9;
 }
 
-.c52 .c41>div {
+.c54 .c43>div {
   padding-left: 36px;
 }
 
@@ -493,26 +504,26 @@ border:1px solid #eaeaef .c20:focus-within .c25 {
 }
 
 @media (min-width: 1080px) {
-  .c39 {
+  .c41 {
     margin-inline-start: 8px;
     margin-inline-end: 8px;
   }
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .c15 {
+  .c17 {
     transition: background-color 120ms cubic-bezier(0.25, 0.46, 0.45, 0.94),color 120ms cubic-bezier(0.25, 0.46, 0.45, 0.94),border-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .c18 {
+  .c20 {
     transition: background-color 120ms cubic-bezier(0.25, 0.46, 0.45, 0.94),color 120ms cubic-bezier(0.25, 0.46, 0.45, 0.94),border-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .c38 {
+  .c40 {
     transition: background-color 120ms cubic-bezier(0.25, 0.46, 0.45, 0.94),color 120ms cubic-bezier(0.25, 0.46, 0.45, 0.94),border-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
 }
@@ -554,546 +565,565 @@ border:1px solid #eaeaef .c20:focus-within .c25 {
       role="separator"
     />
     <div
-      class="c10 c11"
+      class="c10"
+      dir="ltr"
+      style="position: relative; --radix-scroll-area-corner-width: 0px; --radix-scroll-area-corner-height: 0px;"
     >
+      <style>
+        [data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}
+      </style>
       <div
-        class="c12"
-      >
-        <button
-          aria-disabled="false"
-          class="c13 c14 c15"
-          type="submit"
-        >
-          <span
-            class="c16"
-          >
-            Save
-          </span>
-        </button>
-        <button
-          aria-disabled="false"
-          aria-expanded="false"
-          aria-haspopup="menu"
-          class="c17 c14 c18"
-          data-state="closed"
-          id="radix-:r0:"
-          type="button"
-        >
-          <span
-            class="c16"
-          >
-            <svg
-              aria-hidden="true"
-              fill="#8e8ea9"
-              focusable="false"
-              height="16"
-              viewBox="0 0 32 32"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M18 16a2 2 0 1 1-4 0 2 2 0 0 1 4 0M7.5 14a2 2 0 1 0 0 4 2 2 0 0 0 0-4m17 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4"
-              />
-            </svg>
-            <span
-              class="c19"
-            >
-              More actions
-            </span>
-          </span>
-        </button>
-      </div>
-      <div
-        class="c20"
+        class="c11"
+        data-radix-scroll-area-viewport=""
+        style="overflow-x: scroll; overflow-y: scroll;"
       >
         <div
-          class="c21"
+          style="min-width: 100%; display: table;"
         >
-          <span
-            class="c19"
-          />
           <div
-            class="c22 c23 c24"
+            class="c12 c13"
           >
-            <svg
-              aria-hidden="true"
-              class="c25 c26"
-              fill="currentColor"
-              height="16"
-              viewBox="0 0 32 32"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="c14"
             >
-              <path
-                d="M29.061 26.939 23.125 21A11.515 11.515 0 1 0 21 23.125l5.941 5.942a1.503 1.503 0 0 0 2.125-2.125zM5.5 14a8.5 8.5 0 1 1 8.5 8.5A8.51 8.51 0 0 1 5.5 14"
-              />
-            </svg>
-            <input
-              aria-disabled="false"
-              aria-label="Search"
-              class="c27"
-              id=":r2:"
-              name="search_contentType"
-              placeholder="Search"
-              value=""
-            />
+              <button
+                aria-disabled="false"
+                class="c15 c16 c17"
+                type="submit"
+              >
+                <span
+                  class="c18"
+                >
+                  Save
+                </span>
+              </button>
+              <button
+                aria-disabled="false"
+                aria-expanded="false"
+                aria-haspopup="menu"
+                class="c19 c16 c20"
+                data-state="closed"
+                id="radix-:r0:"
+                type="button"
+              >
+                <span
+                  class="c18"
+                >
+                  <svg
+                    aria-hidden="true"
+                    fill="#8e8ea9"
+                    focusable="false"
+                    height="16"
+                    viewBox="0 0 32 32"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M18 16a2 2 0 1 1-4 0 2 2 0 0 1 4 0M7.5 14a2 2 0 1 0 0 4 2 2 0 0 0 0-4m17 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4"
+                    />
+                  </svg>
+                  <span
+                    class="c21"
+                  >
+                    More actions
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div
+              class="c22"
+            >
+              <div
+                class="c23"
+              >
+                <span
+                  class="c21"
+                />
+                <div
+                  class="c24 c25 c26"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="c27 c28"
+                    fill="currentColor"
+                    height="16"
+                    viewBox="0 0 32 32"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M29.061 26.939 23.125 21A11.515 11.515 0 1 0 21 23.125l5.941 5.942a1.503 1.503 0 0 0 2.125-2.125zM5.5 14a8.5 8.5 0 1 1 8.5 8.5A8.51 8.51 0 0 1 5.5 14"
+                    />
+                  </svg>
+                  <input
+                    aria-disabled="false"
+                    aria-label="Search"
+                    class="c29"
+                    id=":r2:"
+                    name="search_contentType"
+                    placeholder="Search"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="c30"
+          >
+            <ol
+              class="c31"
+            >
+              <li>
+                <div
+                  class="c32"
+                >
+                  <div
+                    class="c4"
+                  >
+                    <div
+                      class="c33 c24"
+                    >
+                      <div
+                        class="c34"
+                      >
+                        <div
+                          class="c35"
+                        >
+                          <span
+                            class="c36"
+                          >
+                            Collection Types
+                          </span>
+                        </div>
+                      </div>
+                      <div
+                        class="c37"
+                      >
+                        <button
+                          aria-disabled="false"
+                          class="c38 c39 c40"
+                          data-state="closed"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            fill="currentColor"
+                            focusable="false"
+                            height="16"
+                            viewBox="0 0 32 32"
+                            width="16"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M28.5 16a1.5 1.5 0 0 1-1.5 1.5h-9.5V27a1.5 1.5 0 1 1-3 0v-9.5H5a1.5 1.5 0 1 1 0-3h9.5V5a1.5 1.5 0 1 1 3 0v9.5H27a1.5 1.5 0 0 1 1.5 1.5"
+                            />
+                          </svg>
+                          <span
+                            class="c21"
+                          >
+                            Create new collection type
+                          </span>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                  <ol
+                    class="c41 c42"
+                    id=":r3:"
+                  >
+                    <li>
+                      <a
+                        class="c43 c44"
+                        href="/plugins/content-type-builder/content-types/application::address.address"
+                      >
+                        <div
+                          class="c45"
+                        >
+                          <div
+                            class="c46 c47"
+                          >
+                            <div
+                              class="c48 c49"
+                              style="text-overflow: ellipsis; white-space: nowrap;"
+                            >
+                              address
+                            </div>
+                            <div
+                              class="c14"
+                            >
+                              <span
+                                class="c50"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        class="c43 c44"
+                        href="/plugins/content-type-builder/content-types/application::category.category"
+                      >
+                        <div
+                          class="c45"
+                        >
+                          <div
+                            class="c46 c47"
+                          >
+                            <div
+                              class="c48 c49"
+                              style="text-overflow: ellipsis; white-space: nowrap;"
+                            >
+                              category
+                            </div>
+                            <div
+                              class="c14"
+                            >
+                              <span
+                                class="c50"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </a>
+                    </li>
+                  </ol>
+                </div>
+              </li>
+              <li>
+                <div
+                  class="c32"
+                >
+                  <div
+                    class="c4"
+                  >
+                    <div
+                      class="c33 c24"
+                    >
+                      <div
+                        class="c34"
+                      >
+                        <div
+                          class="c35"
+                        >
+                          <span
+                            class="c36"
+                          >
+                            Single Types
+                          </span>
+                        </div>
+                      </div>
+                      <div
+                        class="c37"
+                      >
+                        <button
+                          aria-disabled="false"
+                          class="c38 c39 c40"
+                          data-state="closed"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            fill="currentColor"
+                            focusable="false"
+                            height="16"
+                            viewBox="0 0 32 32"
+                            width="16"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M28.5 16a1.5 1.5 0 0 1-1.5 1.5h-9.5V27a1.5 1.5 0 1 1-3 0v-9.5H5a1.5 1.5 0 1 1 0-3h9.5V5a1.5 1.5 0 1 1 3 0v9.5H27a1.5 1.5 0 0 1 1.5 1.5"
+                            />
+                          </svg>
+                          <span
+                            class="c21"
+                          >
+                            Create new single type
+                          </span>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                  <ol
+                    class="c41 c42"
+                    id=":r5:"
+                  >
+                    <li>
+                      <a
+                        class="c43 c44"
+                        href="/plugins/content-type-builder/content-types/application::homepage.homepage"
+                      >
+                        <div
+                          class="c45"
+                        >
+                          <div
+                            class="c46 c47"
+                          >
+                            <div
+                              class="c48 c49"
+                              style="text-overflow: ellipsis; white-space: nowrap;"
+                            >
+                              Homepage
+                            </div>
+                            <div
+                              class="c14"
+                            >
+                              <span
+                                class="c50"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </a>
+                    </li>
+                  </ol>
+                </div>
+              </li>
+              <li>
+                <div
+                  class="c32"
+                >
+                  <div
+                    class="c4"
+                  >
+                    <div
+                      class="c33 c24"
+                    >
+                      <div
+                        class="c34"
+                      >
+                        <div
+                          class="c35"
+                        >
+                          <span
+                            class="c36"
+                          >
+                            Components
+                          </span>
+                        </div>
+                      </div>
+                      <div
+                        class="c37"
+                      >
+                        <button
+                          aria-disabled="false"
+                          class="c38 c39 c40"
+                          data-state="closed"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            fill="currentColor"
+                            focusable="false"
+                            height="16"
+                            viewBox="0 0 32 32"
+                            width="16"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M28.5 16a1.5 1.5 0 0 1-1.5 1.5h-9.5V27a1.5 1.5 0 1 1-3 0v-9.5H5a1.5 1.5 0 1 1 0-3h9.5V5a1.5 1.5 0 1 1 3 0v9.5H27a1.5 1.5 0 0 1 1.5 1.5"
+                            />
+                          </svg>
+                          <span
+                            class="c21"
+                          >
+                            Create a new component
+                          </span>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                  <ol
+                    class="c41 c42"
+                    id=":r7:"
+                  >
+                    <li>
+                      <div
+                        class=""
+                      >
+                        <div
+                          class="c5"
+                        >
+                          <button
+                            aria-controls=":r9:"
+                            aria-expanded="true"
+                            class="c51"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              fill="#8e8ea9"
+                              height="16"
+                              style="transform: rotate(0deg); transition: transform 0.5s;"
+                              viewBox="0 0 32 32"
+                              width="16"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="m27.061 13.061-10 10a1.503 1.503 0 0 1-2.125 0l-10-10a1.503 1.503 0 1 1 2.125-2.125L16 19.875l8.939-8.94a1.502 1.502 0 1 1 2.125 2.125z"
+                              />
+                            </svg>
+                            <div
+                              class="c52"
+                            >
+                              <span
+                                class="c53"
+                              >
+                                basic
+                              </span>
+                            </div>
+                          </button>
+                        </div>
+                        <ul
+                          class="c42"
+                          id=":r9:"
+                          style="max-height: 1000px; overflow: hidden; transition: max-height 1s ease-in-out;"
+                        >
+                          <li
+                            class="c54"
+                          >
+                            <a
+                              class="c43 c44"
+                              href="/plugins/content-type-builder/component-categories/basic/basic.simple"
+                            >
+                              <div
+                                class="c45"
+                              >
+                                <div
+                                  class="c46 c47"
+                                >
+                                  <div
+                                    class="c48 c49"
+                                    style="text-overflow: ellipsis; white-space: nowrap;"
+                                  >
+                                    simple
+                                  </div>
+                                  <div
+                                    class="c14"
+                                  >
+                                    <span
+                                      class="c50"
+                                    />
+                                  </div>
+                                </div>
+                              </div>
+                            </a>
+                          </li>
+                        </ul>
+                      </div>
+                    </li>
+                    <li>
+                      <div
+                        class=""
+                      >
+                        <div
+                          class="c5"
+                        >
+                          <button
+                            aria-controls=":ra:"
+                            aria-expanded="true"
+                            class="c51"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              fill="#8e8ea9"
+                              height="16"
+                              style="transform: rotate(0deg); transition: transform 0.5s;"
+                              viewBox="0 0 32 32"
+                              width="16"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="m27.061 13.061-10 10a1.503 1.503 0 0 1-2.125 0l-10-10a1.503 1.503 0 1 1 2.125-2.125L16 19.875l8.939-8.94a1.502 1.502 0 1 1 2.125 2.125z"
+                              />
+                            </svg>
+                            <div
+                              class="c52"
+                            >
+                              <span
+                                class="c53"
+                              >
+                                default
+                              </span>
+                            </div>
+                          </button>
+                        </div>
+                        <ul
+                          class="c42"
+                          id=":ra:"
+                          style="max-height: 1000px; overflow: hidden; transition: max-height 1s ease-in-out;"
+                        >
+                          <li
+                            class="c54"
+                          >
+                            <a
+                              class="c43 c44"
+                              href="/plugins/content-type-builder/component-categories/default/default.closingperiod"
+                            >
+                              <div
+                                class="c45"
+                              >
+                                <div
+                                  class="c46 c47"
+                                >
+                                  <div
+                                    class="c48 c49"
+                                    style="text-overflow: ellipsis; white-space: nowrap;"
+                                  >
+                                    closingperiod
+                                  </div>
+                                  <div
+                                    class="c14"
+                                  >
+                                    <span
+                                      class="c50"
+                                    />
+                                  </div>
+                                </div>
+                              </div>
+                            </a>
+                          </li>
+                          <li
+                            class="c54"
+                          >
+                            <a
+                              class="c43 c44"
+                              href="/plugins/content-type-builder/component-categories/default/default.dish"
+                            >
+                              <div
+                                class="c45"
+                              >
+                                <div
+                                  class="c46 c47"
+                                >
+                                  <div
+                                    class="c48 c49"
+                                    style="text-overflow: ellipsis; white-space: nowrap;"
+                                  >
+                                    dish
+                                  </div>
+                                  <div
+                                    class="c14"
+                                  >
+                                    <span
+                                      class="c50"
+                                    />
+                                  </div>
+                                </div>
+                              </div>
+                            </a>
+                          </li>
+                        </ul>
+                      </div>
+                    </li>
+                  </ol>
+                </div>
+              </li>
+            </ol>
           </div>
         </div>
       </div>
     </div>
-    <div
-      class="c28"
-    >
-      <ol
-        class="c29"
-      >
-        <li>
-          <div
-            class="c30"
-          >
-            <div
-              class="c4"
-            >
-              <div
-                class="c31 c22"
-              >
-                <div
-                  class="c32"
-                >
-                  <div
-                    class="c33"
-                  >
-                    <span
-                      class="c34"
-                    >
-                      Collection Types
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="c35"
-                >
-                  <button
-                    aria-disabled="false"
-                    class="c36 c37 c38"
-                    data-state="closed"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      fill="currentColor"
-                      focusable="false"
-                      height="16"
-                      viewBox="0 0 32 32"
-                      width="16"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M28.5 16a1.5 1.5 0 0 1-1.5 1.5h-9.5V27a1.5 1.5 0 1 1-3 0v-9.5H5a1.5 1.5 0 1 1 0-3h9.5V5a1.5 1.5 0 1 1 3 0v9.5H27a1.5 1.5 0 0 1 1.5 1.5"
-                      />
-                    </svg>
-                    <span
-                      class="c19"
-                    >
-                      Create new collection type
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
-            <ol
-              class="c39 c40"
-              id=":r3:"
-            >
-              <li>
-                <a
-                  class="c41 c42"
-                  href="/plugins/content-type-builder/content-types/application::address.address"
-                >
-                  <div
-                    class="c43"
-                  >
-                    <div
-                      class="c44 c45"
-                    >
-                      <div
-                        class="c46 c47"
-                        style="text-overflow: ellipsis; white-space: nowrap;"
-                      >
-                        address
-                      </div>
-                      <div
-                        class="c12"
-                      >
-                        <span
-                          class="c48"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </a>
-              </li>
-              <li>
-                <a
-                  class="c41 c42"
-                  href="/plugins/content-type-builder/content-types/application::category.category"
-                >
-                  <div
-                    class="c43"
-                  >
-                    <div
-                      class="c44 c45"
-                    >
-                      <div
-                        class="c46 c47"
-                        style="text-overflow: ellipsis; white-space: nowrap;"
-                      >
-                        category
-                      </div>
-                      <div
-                        class="c12"
-                      >
-                        <span
-                          class="c48"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </a>
-              </li>
-            </ol>
-          </div>
-        </li>
-        <li>
-          <div
-            class="c30"
-          >
-            <div
-              class="c4"
-            >
-              <div
-                class="c31 c22"
-              >
-                <div
-                  class="c32"
-                >
-                  <div
-                    class="c33"
-                  >
-                    <span
-                      class="c34"
-                    >
-                      Single Types
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="c35"
-                >
-                  <button
-                    aria-disabled="false"
-                    class="c36 c37 c38"
-                    data-state="closed"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      fill="currentColor"
-                      focusable="false"
-                      height="16"
-                      viewBox="0 0 32 32"
-                      width="16"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M28.5 16a1.5 1.5 0 0 1-1.5 1.5h-9.5V27a1.5 1.5 0 1 1-3 0v-9.5H5a1.5 1.5 0 1 1 0-3h9.5V5a1.5 1.5 0 1 1 3 0v9.5H27a1.5 1.5 0 0 1 1.5 1.5"
-                      />
-                    </svg>
-                    <span
-                      class="c19"
-                    >
-                      Create new single type
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
-            <ol
-              class="c39 c40"
-              id=":r5:"
-            >
-              <li>
-                <a
-                  class="c41 c42"
-                  href="/plugins/content-type-builder/content-types/application::homepage.homepage"
-                >
-                  <div
-                    class="c43"
-                  >
-                    <div
-                      class="c44 c45"
-                    >
-                      <div
-                        class="c46 c47"
-                        style="text-overflow: ellipsis; white-space: nowrap;"
-                      >
-                        Homepage
-                      </div>
-                      <div
-                        class="c12"
-                      >
-                        <span
-                          class="c48"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </a>
-              </li>
-            </ol>
-          </div>
-        </li>
-        <li>
-          <div
-            class="c30"
-          >
-            <div
-              class="c4"
-            >
-              <div
-                class="c31 c22"
-              >
-                <div
-                  class="c32"
-                >
-                  <div
-                    class="c33"
-                  >
-                    <span
-                      class="c34"
-                    >
-                      Components
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="c35"
-                >
-                  <button
-                    aria-disabled="false"
-                    class="c36 c37 c38"
-                    data-state="closed"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      fill="currentColor"
-                      focusable="false"
-                      height="16"
-                      viewBox="0 0 32 32"
-                      width="16"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M28.5 16a1.5 1.5 0 0 1-1.5 1.5h-9.5V27a1.5 1.5 0 1 1-3 0v-9.5H5a1.5 1.5 0 1 1 0-3h9.5V5a1.5 1.5 0 1 1 3 0v9.5H27a1.5 1.5 0 0 1 1.5 1.5"
-                      />
-                    </svg>
-                    <span
-                      class="c19"
-                    >
-                      Create a new component
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
-            <ol
-              class="c39 c40"
-              id=":r7:"
-            >
-              <li>
-                <div
-                  class=""
-                >
-                  <div
-                    class="c5"
-                  >
-                    <button
-                      aria-controls=":r9:"
-                      aria-expanded="true"
-                      class="c49"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        fill="#8e8ea9"
-                        height="16"
-                        style="transform: rotate(0deg); transition: transform 0.5s;"
-                        viewBox="0 0 32 32"
-                        width="16"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m27.061 13.061-10 10a1.503 1.503 0 0 1-2.125 0l-10-10a1.503 1.503 0 1 1 2.125-2.125L16 19.875l8.939-8.94a1.502 1.502 0 1 1 2.125 2.125z"
-                        />
-                      </svg>
-                      <div
-                        class="c50"
-                      >
-                        <span
-                          class="c51"
-                        >
-                          basic
-                        </span>
-                      </div>
-                    </button>
-                  </div>
-                  <ul
-                    class="c40"
-                    id=":r9:"
-                    style="max-height: 1000px; overflow: hidden; transition: max-height 1s ease-in-out;"
-                  >
-                    <li
-                      class="c52"
-                    >
-                      <a
-                        class="c41 c42"
-                        href="/plugins/content-type-builder/component-categories/basic/basic.simple"
-                      >
-                        <div
-                          class="c43"
-                        >
-                          <div
-                            class="c44 c45"
-                          >
-                            <div
-                              class="c46 c47"
-                              style="text-overflow: ellipsis; white-space: nowrap;"
-                            >
-                              simple
-                            </div>
-                            <div
-                              class="c12"
-                            >
-                              <span
-                                class="c48"
-                              />
-                            </div>
-                          </div>
-                        </div>
-                      </a>
-                    </li>
-                  </ul>
-                </div>
-              </li>
-              <li>
-                <div
-                  class=""
-                >
-                  <div
-                    class="c5"
-                  >
-                    <button
-                      aria-controls=":ra:"
-                      aria-expanded="true"
-                      class="c49"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        fill="#8e8ea9"
-                        height="16"
-                        style="transform: rotate(0deg); transition: transform 0.5s;"
-                        viewBox="0 0 32 32"
-                        width="16"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m27.061 13.061-10 10a1.503 1.503 0 0 1-2.125 0l-10-10a1.503 1.503 0 1 1 2.125-2.125L16 19.875l8.939-8.94a1.502 1.502 0 1 1 2.125 2.125z"
-                        />
-                      </svg>
-                      <div
-                        class="c50"
-                      >
-                        <span
-                          class="c51"
-                        >
-                          default
-                        </span>
-                      </div>
-                    </button>
-                  </div>
-                  <ul
-                    class="c40"
-                    id=":ra:"
-                    style="max-height: 1000px; overflow: hidden; transition: max-height 1s ease-in-out;"
-                  >
-                    <li
-                      class="c52"
-                    >
-                      <a
-                        class="c41 c42"
-                        href="/plugins/content-type-builder/component-categories/default/default.closingperiod"
-                      >
-                        <div
-                          class="c43"
-                        >
-                          <div
-                            class="c44 c45"
-                          >
-                            <div
-                              class="c46 c47"
-                              style="text-overflow: ellipsis; white-space: nowrap;"
-                            >
-                              closingperiod
-                            </div>
-                            <div
-                              class="c12"
-                            >
-                              <span
-                                class="c48"
-                              />
-                            </div>
-                          </div>
-                        </div>
-                      </a>
-                    </li>
-                    <li
-                      class="c52"
-                    >
-                      <a
-                        class="c41 c42"
-                        href="/plugins/content-type-builder/component-categories/default/default.dish"
-                      >
-                        <div
-                          class="c43"
-                        >
-                          <div
-                            class="c44 c45"
-                          >
-                            <div
-                              class="c46 c47"
-                              style="text-overflow: ellipsis; white-space: nowrap;"
-                            >
-                              dish
-                            </div>
-                            <div
-                              class="c12"
-                            >
-                              <span
-                                class="c48"
-                              />
-                            </div>
-                          </div>
-                        </div>
-                      </a>
-                    </li>
-                  </ul>
-                </div>
-              </li>
-            </ol>
-          </div>
-        </li>
-      </ol>
-    </div>
   </nav>
   <span
-    class="c19"
+    class="c21"
   >
     <p
       aria-live="polite"