Repository: marigold-ui/marigold
Pull request #3234 (2023-07-28 06:08:04)

chore: navigation structure
Co-authored-by: Sebastian Sebald <sebald@users.noreply.github.com>
Co-authored-by: Osama Abdul Latif  <OsamaAbdellateef@users.noreply.github.com>

changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: 75b004021b32dfc1f844cd643c4230f5706869d3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/marigold-ui/marigold/new/new-navigation-structure?filename=.changeset/pretty-eels-protect.md&value=---%0A%22%40marigold%2Fdocs%22%3A%20patch%0A---%0A%0Achore%3A%20navigation%20structure%0A)


vercel[bot]: [vc]: #22RTr6a/+f/uqV46EjNEfdADN0HbBcAlKmwYH+ugthM=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJtYXJpZ29sZC1zdG9yeWJvb2siLCJyb290RGlyZWN0b3J5IjpudWxsLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vbWFyaWdvbGQvbWFyaWdvbGQtc3Rvcnlib29rL0RjVmdSY1pGVHpwakg5OVgxNnA2eFFLdmtxMWIiLCJwcmV2aWV3VXJsIjoibWFyaWdvbGQtc3Rvcnlib29rLWdpdC1uZXctbmF2aWdhdGlvbi1zdHJ1Y3R1cmUtbWFyaWdvbGQudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCJ9LHsibmFtZSI6Im1hcmlnb2xkLWRvY3MiLCJyb290RGlyZWN0b3J5IjpudWxsLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vbWFyaWdvbGQvbWFyaWdvbGQtZG9jcy8zUFhhYUpWQkMyWkJibWdQN0VSY1ZHa1I5Rml0IiwicHJldmlld1VybCI6Im1hcmlnb2xkLWRvY3MtZ2l0LW5ldy1uYXZpZ2F0aW9uLXN0cnVjdHVyZS1tYXJpZ29sZC52ZXJjZWwuYXBwIiwibmV4dENvbW1pdFN0YXR1cyI6IkRFUExPWUVEIn1dfQ==
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Updated (UTC) |
| :--- | :----- | :------ | :------ |
| **marigold-docs** | ✅ Ready ([Inspect](https://vercel.com/marigold/marigold-docs/3PXaaJVBC2ZBbmgP7ERcVGkR9Fit)) | [Visit Preview](https://marigold-docs-git-new-navigation-structure-marigold.vercel.app) | Jul 28, 2023 6:08am |
| **marigold-storybook** | ✅ Ready ([Inspect](https://vercel.com/marigold/marigold-storybook/DcVgRcZFTzpjH99X16p6xQKvkq1b)) | [Visit Preview](https://marigold-storybook-git-new-navigation-structure-marigold.vercel.app) | Jul 28, 2023 6:08am |




Patch:
diff --git a/docs/app/[...slug]/page.tsx b/docs/app/[...slug]/page.tsx
index c8ccce863..74cbfe628 100644
--- a/docs/app/[...slug]/page.tsx
+++ b/docs/app/[...slug]/page.tsx
@@ -13,39 +13,32 @@ interface ContentPageProps {
 
 async function getPageFromParams(params: ContentPageProps['params']) {
   const slug = params?.slug?.join('/');
-  const page = allContentPages.find(page => page.slugAsParams === slug);
-
-  if (!page) {
-    return null;
-  }
-
-  return page;
+  const page = allContentPages.find(page => page.slug === slug);
+  return page || null;
 }
 
 export async function generateMetadata({
   params,
 }: ContentPageProps): Promise<Metadata> {
   const page = await getPageFromParams(params);
-
-  if (!page) {
-    return {};
-  }
-
-  return {
-    title: page.title,
-  };
+  return page
+    ? {
+        title: page.title,
+      }
+    : {};
 }
 
 export async function generateStaticParams(): Promise<
   ContentPageProps['params'][]
 > {
   return allContentPages.map(page => ({
-    slug: page.slugAsParams.split('/'),
+    slug: page.slug.split('/'),
   }));
 }
 
 export default async function ContentPage({ params }: ContentPageProps) {
   const page = await getPageFromParams(params);
+
   if (!page) {
     notFound();
   }
diff --git a/docs/app/_components/Navigation.tsx b/docs/app/_components/Navigation.tsx
index 20327ceb2..83b1db80c 100644
--- a/docs/app/_components/Navigation.tsx
+++ b/docs/app/_components/Navigation.tsx
@@ -2,88 +2,58 @@
 
 import { usePathname } from 'next/navigation';
 
-import {
-  allContentPages,
-  ComponentPage,
-  allComponentPages,
-  allHookPages,
-} from 'contentlayer/generated';
+import { allContentPages } from 'contentlayer/generated';
 
 import { siteConfig } from '@/lib/config';
 import { NavLink } from './NavLink';
 
-// Render Sections
+// Types
 // ---------------
-export interface RenderProps {
-  onClick?: () => void;
-  current: string;
-}
-export const renderHookPages = ({ onClick, current }: RenderProps) => {
-  const pages = [...allHookPages];
-
-  return pages.map(({ title, slug }) => (
-    <div key={slug} className="flex flex-col gap-2">
-      <div className="border-secondary-300 ml-0.5 flex flex-col gap-2 border-l">
-        <NavLink
-          key={slug}
-          current={current === slug}
-          href={slug}
-          onClick={onClick}
-        >
-          {title}
-        </NavLink>
-      </div>
-    </div>
-  ));
-};
 
-export const renderContentPages = ({ onClick, current }: RenderProps) => {
-  const pages = [...allContentPages].sort(
-    (a, b) => (a.order || 1000) - (b.order || 1000)
-  );
-
-  return pages.map(({ title, slug }) => (
-    <NavLink
-      key={slug}
-      variant="main"
-      current={current === slug}
-      href={slug}
-      onClick={onClick}
-    >
-      {title}
-    </NavLink>
-  ));
-};
+interface NavigationLink {
+  href: string;
+  name: string;
+}
 
-export const renderComponentPages = ({ onClick, current }: RenderProps) => {
-  const groups = siteConfig.navigation.componentGroups;
-  const pages: { [group in ComponentPage['group']]?: ComponentPage[] } = {};
+interface NavigationSubsection {
+  name: string;
+  links: NavigationLink[];
+}
+interface NavigationSection {
+  name: string;
+  links: NavigationLink[];
+  subsections: NavigationSubsection[];
+}
 
-  allComponentPages.forEach(page => {
-    const group = pages[page.group] || [];
-    return (pages[page.group] = [...group, page]);
+const useNavigation = (): NavigationSection[] => {
+  const navigation = siteConfig.navigation;
+
+  return navigation.map(({ name, slug, subsections = [] }) => {
+    // Section Page = has a section but NO subsection
+    const sectionPages = allContentPages.filter(
+      page => page.section === slug && !page.subsection
+    );
+
+    return {
+      name,
+      links: sectionPages.map(page => ({
+        name: page.title,
+        href: `/${page.slug}`,
+      })),
+      subsections: subsections.map(subsection => ({
+        name: subsection.name,
+        links: allContentPages
+          .filter(
+            // Subsection Page = has a section AND a subsection
+            page => page.section === slug && page.subsection === subsection.slug
+          )
+          .map(page => ({
+            name: page.title,
+            href: `/${page.slug}`,
+          })),
+      })),
+    };
   });
-
-  const list = Object.entries(pages);
-  list.sort(([a], [b]) => groups.indexOf(a) - groups.indexOf(b));
-
-  return list.map(([group, list]) => (
-    <div key={group} className="flex flex-col gap-2 pb-4">
-      <div className="text-secondary-700 text-sm font-semibold">{group}</div>
-      <div className="border-secondary-300 ml-0.5 flex flex-col gap-2 border-l">
-        {list.map(({ title, slug }) => (
-          <NavLink
-            key={slug}
-            current={current === slug}
-            href={slug}
-            onClick={onClick}
-          >
-            {title}
-          </NavLink>
-        ))}
-      </div>
-    </div>
-  ));
 };
 
 // Props
@@ -96,22 +66,47 @@ export interface NavigationProps {
 // ---------------
 export const Navigation = ({ onClick }: NavigationProps) => {
   const pathname = usePathname();
+  const navigation = useNavigation();
 
   return (
     <nav className="flex flex-col gap-8 pl-4 pr-11 pt-8">
-      <div className="flex flex-col gap-4">
-        {renderContentPages({ onClick, current: pathname })}
-      </div>
-
-      <div className="flex flex-col gap-4">
-        <div className="font-semibold">Components</div>
-        {renderComponentPages({ onClick, current: pathname })}
-      </div>
-
-      <div className="flex flex-col gap-4">
-        <div className="font-semibold">Hooks</div>
-        {renderHookPages({ onClick, current: pathname })}
-      </div>
+      {navigation.map(section => (
+        <div className="flex flex-col gap-4">
+          <div className="font-semibold">{section.name}</div>
+          <div className="border-secondary-300 ml-0.5 flex flex-col gap-2 border-l">
+            {section.links.map(({ name, href }) => (
+              <NavLink
+                key={href}
+                current={pathname === href}
+                href={href}
+                onClick={onClick}
+              >
+                {name}
+              </NavLink>
+            ))}
+          </div>
+          {section.subsections &&
+            section.subsections.map(({ name, links }) => (
+              <div key={name} className="flex flex-col gap-2 pb-4">
+                <div className="text-secondary-700 text-sm font-semibold">
+                  {name}
+                </div>
+                <div className="border-secondary-300 ml-0.5 flex flex-col gap-2 border-l">
+                  {links.map(({ name, href }) => (
+                    <NavLink
+                      key={href}
+                      current={pathname === href}
+                      href={href}
+                      onClick={onClick}
+                    >
+                      {name}
+                    </NavLink>
+                  ))}
+                </div>
+              </div>
+            ))}
+        </div>
+      ))}
     </nav>
   );
 };
diff --git a/docs/app/_components/ThemeMenu.tsx b/docs/app/_components/ThemeMenu.tsx
index 7a5cb7b94..983991591 100644
--- a/docs/app/_components/ThemeMenu.tsx
+++ b/docs/app/_components/ThemeMenu.tsx
@@ -2,7 +2,7 @@
 
 import { Button, Menu } from '@marigold/components';
 import { ChevronDown } from '@marigold/icons';
-import { useThemeSwitch } from './ThemeSwitch';
+import { useThemeSwitch } from '@/ui/ThemeSwitch';
 
 export const ThemeMenu = () => {
   const { current, themes, setTheme } = useThemeSwitch();
diff --git a/docs/app/components/[...slug]/_components/index.ts b/docs/app/components/[...slug]/_components/index.ts
deleted file mode 100644
index ccc569b40..000000000
--- a/docs/app/components/[...slug]/_components/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './AppearanceTable';
-export * from './PropsTable';
-export * from '../../../_components/ThemeMenu';
-export * from '../../../_components/ThemeSwitch';
diff --git a/docs/app/components/[...slug]/page.tsx b/docs/app/components/[...slug]/page.tsx
deleted file mode 100644
index 6eb1bf0ae..000000000
--- a/docs/app/components/[...slug]/page.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { notFound } from 'next/navigation';
-import { Metadata } from 'next';
-import { allComponentPages } from 'contentlayer/generated';
-
-import { Headline } from '@/ui';
-import { Mdx } from '@/ui/mdx';
-
-interface ComponentPageProps {
-  params: {
-    slug: string[];
-  };
-}
-
-async function getPageFromParams(params: ComponentPageProps['params']) {
-  const slug = params?.slug?.join('/');
-  const page = allComponentPages.find(page => page.slugAsParams === slug);
-
-  if (!page) {
-    return null;
-  }
-
-  return page;
-}
-
-export async function generateMetadata({
-  params,
-}: ComponentPageProps): Promise<Metadata> {
-  const page = await getPageFromParams(params);
-
-  if (!page) {
-    return {};
-  }
-
-  return {
-    title: page.title,
-  };
-}
-
-export async function generateStaticParams(): Promise<
-  ComponentPageProps['params'][]
-> {
-  return allComponentPages.map(page => ({
-    slug: page.slugAsParams.split('/'),
-  }));
-}
-
-export default async function ComponentPage({ params }: ComponentPageProps) {
-  const page = await getPageFromParams(params);
-
-  if (!page) {
-    notFound();
-  }
-
-  return (
-    <article className="prose py-6">
-      <Headline level="1">{page.title}</Headline>
-      <div className="text-text-primary-muted -mt-8">{page.caption}</div>
-      <Mdx title={page.title} code={page.body.code} />
-    </article>
-  );
-}
diff --git a/docs/app/components/index.ts b/docs/app/components/index.ts
deleted file mode 100644
index 77f1e04d0..000000000
--- a/docs/app/components/index.ts
+++ /dev/null
@@ -1,1 +0,0 @@
-export * from './IconList';
diff --git a/docs/app/hooks/[...slug]/page.tsx b/docs/app/hooks/[...slug]/page.tsx
deleted file mode 100644
index 1fa75adfb..000000000
--- a/docs/app/hooks/[...slug]/page.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { notFound } from 'next/navigation';
-import { Metadata } from 'next';
-import { allHookPages } from 'contentlayer/generated';
-
-import { Headline } from '@/ui';
-import { Mdx } from '@/ui/mdx';
-
-interface HookPageProps {
-  params: {
-    slug: string[];
-  };
-}
-
-async function getPageFromParams(params: HookPageProps['params']) {
-  const slug = params?.slug?.join('/');
-  const page = allHookPages.find(page => page.slugAsParams === slug);
-
-  if (!page) {
-    return null;
-  }
-
-  return page;
-}
-
-export async function generateMetadata({
-  params,
-}: HookPageProps): Promise<Metadata> {
-  const page = await getPageFromParams(params);
-
-  if (!page) {
-    return {};
-  }
-
-  return {
-    title: page.title,
-  };
-}
-
-export async function generateStaticParams(): Promise<
-  HookPageProps['params'][]
-> {
-  return allHookPages.map(page => ({
-    slug: page.slugAsParams.split('/'),
-  }));
-}
-
-export default async function ContentPage({ params }: HookPageProps) {
-  const page = await getPageFromParams(params);
-  if (!page) {
-    notFound();
-  }
-
-  return (
-    <article className="prose py-6">
-      <Headline level="1">{page.title}</Headline>
-      <Mdx code={page.body.code} />
-    </article>
-  );
-}
diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx
index 8234e3daa..779ef3f53 100644
--- a/docs/app/layout.tsx
+++ b/docs/app/layout.tsx
@@ -3,13 +3,13 @@ import '@marigold/theme-b2b/index.css';
 import '@marigold/theme-core/index.css';
 
 import { MarigoldProvider } from '@/ui';
+import { MarigoldThemeSwitch } from '@/ui/ThemeSwitch';
 import { theme, b2bTheme, coreTheme } from '@/theme';
 import { fontSans } from '@/theme/fonts';
 
 import { Analytics } from './_components/Analytics';
 import { Navigation } from './_components/Navigation';
 import { SiteHeader } from './_components/SiteHeader';
-import { MarigoldThemeSwitch } from './_components/ThemeSwitch';
 
 // Metadata
 // ---------------
diff --git a/docs/content/components/.eslintrc.js b/docs/content/.eslintrc.js
similarity index 100%
rename from docs/content/components/.eslintrc.js
rename to docs/content/.eslintrc.js
diff --git a/docs/content/components/provider/provider.mdx b/docs/content/components/application/provider/provider.mdx
similarity index 100%
rename from docs/content/components/provider/provider.mdx
rename to docs/content/components/application/provider/provider.mdx
diff --git a/docs/content/components/accordion/accordion-basic.demo.tsx b/docs/content/components/collection/accordion/accordion-basic.demo.tsx
similarity index 100%
rename from docs/content/components/accordion/accordion-basic.demo.tsx
rename to docs/content/components/collection/accordion/accordion-basic.demo.tsx
diff --git a/docs/content/components/accordion/accordion.mdx b/docs/content/components/collection/accordion/accordion.mdx
similarity index 100%
rename from docs/content/components/accordion/accordion.mdx
rename to docs/content/components/collection/accordion/accordion.mdx
diff --git a/docs/content/components/accordion/basic-accordion.demo.tsx b/docs/content/components/collection/accordion/basic-accordion.demo.tsx
similarity index 100%
rename from docs/content/components/accordion/basic-accordion.demo.tsx
rename to docs/content/components/collection/accordion/basic-accordion.demo.tsx
diff --git a/docs/content/components/accordion/multi-select-accordion.demo.tsx b/docs/content/components/collection/accordion/multi-select-accordion.demo.tsx
similarity index 100%
rename from docs/content/components/accordion/multi-select-accordion.demo.tsx
rename to docs/content/components/collection/accordion/multi-select-accordion.demo.tsx
diff --git a/docs/content/components/accordion/single-select-accordion.demo.tsx b/docs/content/components/collection/accordion/single-select-accordion.demo.tsx
similarity index 100%
rename from docs/content/components/accordion/single-select-accordion.demo.tsx
rename to docs/content/components/collection/accordion/single-select-accordion.demo.tsx
diff --git a/docs/content/components/table/table-async.demo.tsx b/docs/content/components/collection/table/table-async.demo.tsx
similarity index 100%
rename from docs/content/components/table/table-async.demo.tsx
rename to docs/content/components/collection/table/table-async.demo.tsx
diff --git a/docs/content/components/table/table-compact.demo.tsx b/docs/content/components/collection/table/table-compact.demo.tsx
similarity index 100%
rename from docs/content/components/table/table-compact.demo.tsx
rename to docs/content/components/collection/table/table-compact.demo.tsx
diff --git a/docs/content/components/table/table-disabled.demo.tsx b/docs/content/components/collection/table/table-disabled.demo.tsx
similarity index 100%
rename from docs/content/components/table/table-disabled.demo.tsx
rename to docs/content/components/collection/table/table-disabled.demo.tsx
diff --git a/docs/content/components/table/table-dynamic.demo.tsx b/docs/content/components/collection/table/table-dynamic.demo.tsx
similarity index 100%
rename from docs/content/components/table/table-dynamic.demo.tsx
rename to docs/content/components/collection/table/table-dynamic.demo.tsx
diff --git a/docs/content/components/table/table-multi-mode.demo.tsx b/docs/content/components/collection/table/table-multi-mode.demo.tsx
similarity index 100%
rename from docs/content/components/table/table-multi-mode.demo.tsx
rename to docs/content/components/collection/table/table-multi-mode.demo.tsx
diff --git a/docs/content/components/table/table-nested.demo.tsx b/docs/content/components/collection/table/table-nested.demo.tsx
similarity index 100%
rename from docs/content/components/table/table-nested.demo.tsx
rename to docs/content/components/collection/table/table-nested.demo.tsx
diff --git a/docs/content/components/table/table-single-mode.demo.tsx b/docs/content/components/collection/table/table-single-mode.demo.tsx
similarity index 100%
rename from docs/content/components/table/table-single-mode.demo.tsx
rename to docs/content/components/collection/table/table-single-mode.demo.tsx
diff --git a/docs/content/components/table/table-sorting.demo.tsx b/docs/content/components/collection/table/table-sorting.demo.tsx
similarity index 100%
rename from docs/content/components/table/table-sorting.demo.tsx
rename to docs/content/components/collection/table/table-sorting.demo.tsx
diff --git a/docs/content/components/table/table.mdx b/docs/content/components/collection/table/table.mdx
similarity index 100%
rename from docs/content/components/table/table.mdx
rename to docs/content/components/collection/table/table.mdx
diff --git a/docs/content/components/badge/badge-dark.demo.tsx b/docs/content/components/content/badge/badge-dark.demo.tsx
similarity index 100%
rename from docs/content/components/badge/badge-dark.demo.tsx
rename to docs/content/components/content/badge/badge-dark.demo.tsx
diff --git a/docs/content/components/badge/badge.mdx b/docs/content/components/content/badge/badge.mdx
similarity index 100%
rename from docs/content/components/badge/badge.mdx
rename to docs/content/components/content/badge/badge.mdx
diff --git a/docs/content/components/badge/basic-badge.demo.tsx b/docs/content/components/content/badge/basic-badge.demo.tsx
similarity index 100%
rename from docs/content/components/badge/basic-badge.demo.tsx
rename to docs/content/components/content/badge/basic-badge.demo.tsx
diff --git a/docs/content/components/badge/icon-badge.demo.tsx b/docs/content/components/content/badge/icon-badge.demo.tsx
similarity index 100%
rename from docs/content/components/badge/icon-badge.demo.tsx
rename to docs/content/components/content/badge/icon-badge.demo.tsx
diff --git a/docs/content/components/body/body.mdx b/docs/content/components/content/body/body.mdx
similarity index 100%
rename from docs/content/components/body/body.mdx
rename to docs/content/components/content/body/body.mdx
diff --git a/docs/content/components/body/simple-body.demo.tsx b/docs/content/components/content/body/simple-body.demo.tsx
similarity index 100%
rename from docs/content/components/body/simple-body.demo.tsx
rename to docs/content/components/content/body/simple-body.demo.tsx
diff --git a/docs/content/components/card/card-form.demo.tsx b/docs/content/components/content/card/card-form.demo.tsx
similarity index 100%
rename from docs/content/components/card/card-form.demo.tsx
rename to docs/content/components/content/card/card-form.demo.tsx
diff --git a/docs/content/components/card/card-infos.demo.tsx b/docs/content/components/content/card/card-infos.demo.tsx
similarity index 100%
rename from docs/content/components/card/card-infos.demo.tsx
rename to docs/content/components/content/card/card-infos.demo.tsx
diff --git a/docs/content/components/card/card.mdx b/docs/content/components/content/card/card.mdx
similarity index 100%
rename from docs/content/components/card/card.mdx
rename to docs/content/components/content/card/card.mdx
diff --git a/docs/content/components/divider/divider-bold.demo.tsx b/docs/content/components/content/divider/divider-bold.demo.tsx
similarity index 100%
rename from docs/content/components/divider/divider-bold.demo.tsx
rename to docs/content/components/content/divider/divider-bold.demo.tsx
diff --git a/docs/content/components/divider/divider-section.demo.tsx b/docs/content/components/content/divider/divider-section.demo.tsx
similarity index 100%
rename from docs/content/components/divider/divider-section.demo.tsx
rename to docs/content/components/content/divider/divider-section.demo.tsx
diff --git a/docs/content/components/divider/divider-text.demo.tsx b/docs/content/components/content/divider/divider-text.demo.tsx
similarity index 100%
rename from docs/content/components/divider/divider-text.demo.tsx
rename to docs/content/components/content/divider/divider-text.demo.tsx
diff --git a/docs/content/components/divider/divider.mdx b/docs/content/components/content/divider/divider.mdx
similarity index 100%
rename from docs/content/components/divider/divider.mdx
rename to docs/content/components/content/divider/divider.mdx
diff --git a/docs/content/components/footer/copyright-footer.demo.tsx b/docs/content/components/content/footer/copyright-footer.demo.tsx
similarity index 100%
rename from docs/content/components/footer/copyright-footer.demo.tsx
rename to docs/content/components/content/footer/copyright-footer.demo.tsx
diff --git a/docs/content/components/footer/footer.mdx b/docs/content/components/content/footer/footer.mdx
similarity index 100%
rename from docs/content/components/footer/footer.mdx
rename to docs/content/components/content/footer/footer.mdx
diff --git a/docs/content/components/footer/list-footer.demo.tsx b/docs/content/components/content/footer/list-footer.demo.tsx
similarity index 100%
rename from docs/content/components/footer/list-footer.demo.tsx
rename to docs/content/components/content/footer/list-footer.demo.tsx
diff --git a/docs/content/components/header/header.mdx b/docs/content/components/content/header/header.mdx
similarity index 100%
rename from docs/content/components/header/header.mdx
rename to docs/content/components/content/header/header.mdx
diff --git a/docs/content/components/header/simple-header.demo.tsx b/docs/content/components/content/header/simple-header.demo.tsx
similarity index 100%
rename from docs/content/components/header/simple-header.demo.tsx
rename to docs/content/components/content/header/simple-header.demo.tsx
diff --git a/docs/content/components/headline/headline.demo.tsx b/docs/content/components/content/headline/headline.demo.tsx
similarity index 100%
rename from docs/content/components/headline/headline.demo.tsx
rename to docs/content/components/content/headline/headline.demo.tsx
diff --git a/docs/content/components/headline/headline.mdx b/docs/content/components/content/headline/headline.mdx
similarity index 100%
rename from docs/content/components/headline/headline.mdx
rename to docs/content/components/content/headline/headline.mdx
diff --git a/docs/content/components/icon/icon-fill.demo.tsx b/docs/content/components/content/icon/icon-fill.demo.tsx
similarity index 100%
rename from docs/content/components/icon/icon-fill.demo.tsx
rename to docs/content/components/content/icon/icon-fill.demo.tsx
diff --git a/docs/content/components/icon/icon-size.demo.tsx b/docs/content/components/content/icon/icon-size.demo.tsx
similarity index 100%
rename from docs/content/components/icon/icon-size.demo.tsx
rename to docs/content/components/content/icon/icon-size.demo.tsx
diff --git a/docs/content/components/icon/icon.mdx b/docs/content/components/content/icon/icon.mdx
similarity index 100%
rename from docs/content/components/icon/icon.mdx
rename to docs/content/components/content/icon/icon.mdx
diff --git a/docs/content/components/image/image-fit-position.demo.tsx b/docs/content/components/content/image/image-fit-position.demo.tsx
similarity index 100%
rename from docs/content/components/image/image-fit-position.demo.tsx
rename to docs/content/components/content/image/image-fit-position.demo.tsx
diff --git a/docs/content/components/image/image.demo.tsx b/docs/content/components/content/image/image.demo.tsx
similarity index 100%
rename from docs/content/components/image/image.demo.tsx
rename to docs/content/components/content/image/image.demo.tsx
diff --git a/docs/content/components/image/image.mdx b/docs/content/components/content/image/image.mdx
similarity index 100%
rename from docs/content/components/image/image.mdx
rename to docs/content/components/content/image/image.mdx
diff --git a/docs/content/components/link/link-anchor.demo.tsx b/docs/content/components/content/link/link-anchor.demo.tsx
similarity index 100%
rename from docs/content/components/link/link-anchor.demo.tsx
rename to docs/content/components/content/link/link-anchor.demo.tsx
diff --git a/docs/content/components/link/link-disabled.demo.tsx b/docs/content/components/content/link/link-disabled.demo.tsx
similarity index 100%
rename from docs/content/components/link/link-disabled.demo.tsx
rename to docs/content/components/content/link/link-disabled.demo.tsx
diff --git a/docs/content/components/link/link-standard.demo.tsx b/docs/content/components/content/link/link-standard.demo.tsx
similarity index 100%
rename from docs/content/components/link/link-standard.demo.tsx
rename to docs/content/components/content/link/link-standard.demo.tsx
diff --git a/docs/content/components/link/link-target.demo.tsx b/docs/content/components/content/link/link-target.demo.tsx
similarity index 100%
rename from docs/content/components/link/link-target.demo.tsx
rename to docs/content/components/content/link/link-target.demo.tsx
diff --git a/docs/content/components/link/link.mdx b/docs/content/components/content/link/link.mdx
similarity index 100%
rename from docs/content/components/link/link.mdx
rename to docs/content/components/content/link/link.mdx
diff --git a/docs/content/components/list/list-ordered.demo.tsx b/docs/content/components/content/list/list-ordered.demo.tsx
similarity index 100%
rename from docs/content/components/list/list-ordered.demo.tsx
rename to docs/content/components/content/list/list-ordered.demo.tsx
diff --git a/docs/content/components/list/list-unorded-stacked.demo.tsx b/docs/content/components/content/list/list-unorded-stacked.demo.tsx
similarity index 100%
rename from docs/content/components/list/list-unorded-stacked.demo.tsx
rename to docs/content/components/content/list/list-unorded-stacked.demo.tsx
diff --git a/docs/content/components/list/list.mdx b/docs/content/components/content/list/list.mdx
similarity index 100%
rename from docs/content/components/list/list.mdx
rename to docs/content/components/content/list/list.mdx
diff --git a/docs/content/components/list/simple-list.demo.tsx b/docs/content/components/content/list/simple-list.demo.tsx
similarity index 100%
rename from docs/content/components/list/simple-list.demo.tsx
rename to docs/content/components/content/list/simple-list.demo.tsx
diff --git a/docs/content/components/message/message-error.demo.tsx b/docs/content/components/content/message/message-error.demo.tsx
similarity index 100%
rename from docs/content/components/message/message-error.demo.tsx
rename to docs/content/components/content/message/message-error.demo.tsx
diff --git a/docs/content/components/message/message-info.demo.tsx b/docs/content/components/content/message/message-info.demo.tsx
similarity index 100%
rename from docs/content/components/message/message-info.demo.tsx
rename to docs/content/components/content/message/message-info.demo.tsx
diff --git a/docs/content/components/message/message-warn.demo.tsx b/docs/content/components/content/message/message-warn.demo.tsx
similarity index 100%
rename from docs/content/components/message/message-warn.demo.tsx
rename to docs/content/components/content/message/message-warn.demo.tsx
diff --git a/docs/content/components/message/message.mdx b/docs/content/components/content/message/message.mdx
similarity index 100%
rename from docs/content/components/message/message.mdx
rename to docs/content/components/content/message/message.mdx
diff --git a/docs/content/components/svg/svg.demo.tsx b/docs/content/components/content/svg/svg.demo.tsx
similarity index 100%
rename from docs/content/components/svg/svg.demo.tsx
rename to docs/content/components/content/svg/svg.demo.tsx
diff --git a/docs/content/components/svg/svg.mdx b/docs/content/components/content/svg/svg.mdx
similarity index 100%
rename from docs/content/components/svg/svg.mdx
rename to docs/content/components/content/svg/svg.mdx
diff --git a/docs/content/components/text/text-color.demo.tsx b/docs/content/components/content/text/text-color.demo.tsx
similarity index 100%
rename from docs/content/components/text/text-color.demo.tsx
rename to docs/content/components/content/text/text-color.demo.tsx
diff --git a/docs/content/components/text/text-default.demo.tsx b/docs/content/components/content/text/text-default.demo.tsx
similarity index 100%
rename from docs/content/components/text/text-default.demo.tsx
rename to docs/content/components/content/text/text-default.demo.tsx
diff --git a/docs/content/components/text/text.mdx b/docs/content/components/content/text/text.mdx
similarity index 100%
rename from docs/content/components/text/text.mdx
rename to docs/content/components/content/text/text.mdx
diff --git a/docs/content/components/visually-hidden/visually-hidden.demo.tsx b/docs/content/components/content/visually-hidden/visually-hidden.demo.tsx
similarity index 100%
rename from docs/content/components/visually-hidden/visually-hidden.demo.tsx
rename to docs/content/components/content/visually-hidden/visually-hidden.demo.tsx
diff --git a/docs/content/components/visually-hidden/visually-hidden.mdx b/docs/content/components/content/visually-hidden/visually-hidden.mdx
similarity index 100%
rename from docs/content/components/visually-hidden/visually-hidden.mdx
rename to docs/content/components/content/visually-hidden/visually-hidden.mdx
diff --git a/docs/content/components/xloader/XLoader-props.demo.tsx b/docs/content/components/content/xloader/XLoader-props.demo.tsx
similarity index 100%
rename from docs/content/components/xloader/XLoader-props.demo.tsx
rename to docs/content/components/content/xloader/XLoader-props.demo.tsx
diff --git a/docs/content/components/xloader/xloader.mdx b/docs/content/components/content/xloader/xloader.mdx
similarity index 100%
rename from docs/content/components/xloader/xloader.mdx
rename to docs/content/components/content/xloader/xloader.mdx
diff --git a/docs/content/components/autocomplete/autocomplete-async.demo.tsx b/docs/content/components/form/autocomplete/autocomplete-async.demo.tsx
similarity index 100%
rename from docs/content/components/autocomplete/autocomplete-async.demo.tsx
rename to docs/content/components/form/autocomplete/autocomplete-async.demo.tsx
diff --git a/docs/content/components/autocomplete/autocomplete-controlled.demo.tsx b/docs/content/components/form/autocomplete/autocomplete-controlled.demo.tsx
similarity index 100%
rename from docs/content/components/autocomplete/autocomplete-controlled.demo.tsx
rename to docs/content/components/form/autocomplete/autocomplete-controlled.demo.tsx
diff --git a/docs/content/components/autocomplete/autocomplete-uncontrolled.demo.tsx b/docs/content/components/form/autocomplete/autocomplete-uncontrolled.demo.tsx
similarity index 100%
rename from docs/content/components/autocomplete/autocomplete-uncontrolled.demo.tsx
rename to docs/content/components/form/autocomplete/autocomplete-uncontrolled.demo.tsx
diff --git a/docs/content/components/autocomplete/autocomplete.mdx b/docs/content/components/form/autocomplete/autocomplete.mdx
similarity index 100%
rename from docs/content/components/autocomplete/autocomplete.mdx
rename to docs/content/components/form/autocomplete/autocomplete.mdx
diff --git a/docs/content/components/button/button-ghost.demo.tsx b/docs/content/components/form/button/button-ghost.demo.tsx
similarity index 100%
rename from docs/content/components/button/button-ghost.demo.tsx
rename to docs/content/components/form/button/button-ghost.demo.tsx
diff --git a/docs/content/components/button/button-icon.demo.tsx b/docs/content/components/form/button/button-icon.demo.tsx
similarity index 100%
rename from docs/content/components/button/button-icon.demo.tsx
rename to docs/content/components/form/button/button-icon.demo.tsx
diff --git a/docs/content/components/button/button-link.demo.tsx b/docs/content/components/form/button/button-link.demo.tsx
similarity index 100%
rename from docs/content/components/button/button-link.demo.tsx
rename to docs/content/components/form/button/button-link.demo.tsx
diff --git a/docs/content/components/button/button-primary.demo.tsx b/docs/content/components/form/button/button-primary.demo.tsx
similarity index 100%
rename from docs/content/components/button/button-primary.demo.tsx
rename to docs/content/components/form/button/button-primary.demo.tsx
diff --git a/docs/content/components/button/button-secondary.demo.tsx b/docs/content/components/form/button/button-secondary.demo.tsx
similarity index 100%
rename from docs/content/components/button/button-secondary.demo.tsx
rename to docs/content/components/form/button/button-secondary.demo.tsx
diff --git a/docs/content/components/button/button-size.demo.tsx b/docs/content/components/form/button/button-size.demo.tsx
similarity index 100%
rename from docs/content/components/button/button-size.demo.tsx
rename to docs/content/components/form/button/button-size.demo.tsx
diff --git a/docs/content/components/button/button-text.demo.tsx b/docs/content/components/form/button/button-text.demo.tsx
similarity index 100%
rename from docs/content/components/button/button-text.demo.tsx
rename to docs/content/components/form/button/button-text.demo.tsx
diff --git a/docs/content/components/button/button.mdx b/docs/content/components/form/button/button.mdx
similarity index 100%
rename from docs/content/components/button/button.mdx
rename to docs/content/components/form/button/button.mdx
diff --git a/docs/content/components/calendar/basic-calendar.demo.tsx b/docs/content/components/form/calendar/basic-calendar.demo.tsx
similarity index 100%
rename from docs/content/components/calendar/basic-calendar.demo.tsx
rename to docs/content/components/form/calendar/basic-calendar.demo.tsx
diff --git a/docs/content/components/calendar/calendar.mdx b/docs/content/components/form/calendar/calendar.mdx
similarity index 100%
rename from docs/content/components/calendar/calendar.mdx
rename to docs/content/components/form/calendar/calendar.mdx
diff --git a/docs/content/components/calendar/disabled-calendar.demo.tsx b/docs/content/components/form/calendar/disabled-calendar.demo.tsx
similarity index 100%
rename from docs/content/components/calendar/disabled-calendar.demo.tsx
rename to docs/content/components/form/calendar/disabled-calendar.demo.tsx
diff --git a/docs/content/components/calendar/range-calendar.demo.tsx b/docs/content/components/form/calendar/range-calendar.demo.tsx
similarity index 100%
rename from docs/content/components/calendar/range-calendar.demo.tsx
rename to docs/content/components/form/calendar/range-calendar.demo.tsx
diff --git a/docs/content/components/checkbox/checkbox-disabled.demo.tsx b/docs/content/components/form/checkbox/checkbox-disabled.demo.tsx
similarity index 100%
rename from docs/content/components/checkbox/checkbox-disabled.demo.tsx
rename to docs/content/components/form/checkbox/checkbox-disabled.demo.tsx
diff --git a/docs/content/components/checkbox/checkbox-group.demo.tsx b/docs/content/components/form/checkbox/checkbox-group.demo.tsx
similarity index 100%
rename from docs/content/components/checkbox/checkbox-group.demo.tsx
rename to docs/content/components/form/checkbox/checkbox-group.demo.tsx
diff --git a/docs/content/components/checkbox/checkbox-indeterminate.demo.tsx b/docs/content/components/form/checkbox/checkbox-indeterminate.demo.tsx
similarity index 100%
rename from docs/content/components/checkbox/checkbox-indeterminate.demo.tsx
rename to docs/content/components/form/checkbox/checkbox-indeterminate.demo.tsx
diff --git a/docs/content/components/checkbox/checkbox.mdx b/docs/content/components/form/checkbox/checkbox.mdx
similarity index 100%
rename from docs/content/components/checkbox/checkbox.mdx
rename to docs/content/components/form/checkbox/checkbox.mdx
diff --git a/docs/content/components/combobox/combobox-async.demo.tsx b/docs/content/components/form/combobox/combobox-async.demo.tsx
similarity index 100%
rename from docs/content/components/combobox/combobox-async.demo.tsx
rename to docs/content/components/form/combobox/combobox-async.demo.tsx
diff --git a/docs/content/components/combobox/combobox-basic.demo.tsx b/docs/content/components/form/combobox/combobox-basic.demo.tsx
similarity index 100%
rename from docs/content/components/combobox/combobox-basic.demo.tsx
rename to docs/content/components/form/combobox/combobox-basic.demo.tsx
diff --git a/docs/content/components/combobox/combobox-controlled.demo.tsx b/docs/content/components/form/combobox/combobox-controlled.demo.tsx
similarity index 100%
rename from docs/content/components/combobox/combobox-controlled.demo.tsx
rename to docs/content/components/form/combobox/combobox-controlled.demo.tsx
diff --git a/docs/content/components/combobox/combobox.mdx b/docs/content/components/form/combobox/combobox.mdx
similarity index 100%
rename from docs/content/components/combobox/combobox.mdx
rename to docs/content/components/form/combobox/combobox.mdx
diff --git a/docs/content/components/datefield/date-field-basic.demo.tsx b/docs/content/components/form/datefield/date-field-basic.demo.tsx
similarity index 100%
rename from docs/content/components/datefield/date-field-basic.demo.tsx
rename to docs/content/components/form/datefield/date-field-basic.demo.tsx
diff --git a/docs/content/components/datefield/date-field-disabled.demo.tsx b/docs/content/components/form/datefield/date-field-disabled.demo.tsx
similarity index 100%
rename from docs/content/components/datefield/date-field-disabled.demo.tsx
rename to docs/content/components/form/datefield/date-field-disabled.demo.tsx
diff --git a/docs/content/components/datefield/date-field-error.demo.tsx b/docs/content/components/form/datefield/date-field-error.demo.tsx
similarity index 100%
rename from docs/content/components/datefield/date-field-error.demo.tsx
rename to docs/content/components/form/datefield/date-field-error.demo.tsx
diff --git a/docs/content/components/datefield/date-field-required.demo.tsx b/docs/content/components/form/datefield/date-field-required.demo.tsx
similarity index 100%
rename from docs/content/components/datefield/date-field-required.demo.tsx
rename to docs/content/components/form/datefield/date-field-required.demo.tsx
diff --git a/docs/content/components/datefield/datefield.mdx b/docs/content/components/form/datefield/datefield.mdx
similarity index 100%
rename from docs/content/components/datefield/datefield.mdx
rename to docs/content/components/form/datefield/datefield.mdx
diff --git a/docs/content/components/datepicker/date-picker-basic.demo.tsx b/docs/content/components/form/datepicker/date-picker-basic.demo.tsx
similarity index 100%
rename from docs/content/components/datepicker/date-picker-basic.demo.tsx
rename to docs/content/components/form/datepicker/date-picker-basic.demo.tsx
diff --git a/docs/content/components/datepicker/date-picker-disabled.demo.tsx b/docs/content/components/form/datepicker/date-picker-disabled.demo.tsx
similarity index 100%
rename from docs/content/components/datepicker/date-picker-disabled.demo.tsx
rename to docs/content/components/form/datepicker/date-picker-disabled.demo.tsx
diff --git a/docs/content/components/datepicker/date-picker-error.demo.tsx b/docs/content/components/form/datepicker/date-picker-error.demo.tsx
similarity index 100%
rename from docs/content/components/datepicker/date-picker-error.demo.tsx
rename to docs/content/components/form/datepicker/date-picker-error.demo.tsx
diff --git a/docs/content/components/datepicker/date-picker-min-max.demo.tsx b/docs/content/components/form/datepicker/date-picker-min-max.demo.tsx
similarity index 100%
rename from docs/content/components/datepicker/date-picker-min-max.demo.tsx
rename to docs/content/components/form/datepicker/date-picker-min-max.demo.tsx
diff --git a/docs/content/components/datepicker/date-picker-required.demo.tsx b/docs/content/components/form/datepicker/date-picker-required.demo.tsx
similarity index 100%
rename from docs/content/components/datepicker/date-picker-required.demo.tsx
rename to docs/content/components/form/datepicker/date-picker-required.demo.tsx
diff --git a/docs/content/components/datepicker/datepicker.mdx b/docs/content/components/form/datepicker/datepicker.mdx
similarity index 100%
rename from docs/content/components/datepicker/datepicker.mdx
rename to docs/content/components/form/datepicker/datepicker.mdx
diff --git a/docs/content/components/number-field/number-field-amount.demo.tsx b/docs/content/components/form/number-field/number-field-amount.demo.tsx
similarity index 100%
rename from docs/content/components/number-field/number-field-amount.demo.tsx
rename to docs/content/components/form/number-field/number-field-amount.demo.tsx
diff --git a/docs/content/components/number-field/number-field-disabled.demo.tsx b/docs/content/components/form/number-field/number-field-disabled.demo.tsx
similarity index 100%
rename from docs/content/components/number-field/number-field-disabled.demo.tsx
rename to docs/content/components/form/number-field/number-field-disabled.demo.tsx
diff --git a/docs/content/components/number-field/number-field-error.demo.tsx b/docs/content/components/form/number-field/number-field-error.demo.tsx
similarity index 100%
rename from docs/content/components/number-field/number-field-error.demo.tsx
rename to docs/content/components/form/number-field/number-field-error.demo.tsx
diff --git a/docs/content/components/number-field/number-field-format.demo.tsx b/docs/content/components/form/number-field/number-field-format.demo.tsx
similarity index 100%
rename from docs/content/components/number-field/number-field-format.demo.tsx
rename to docs/content/components/form/number-field/number-field-format.demo.tsx
diff --git a/docs/content/components/number-field/number-field-hide.demo.tsx b/docs/content/components/form/number-field/number-field-hide.demo.tsx
similarity index 100%
rename from docs/content/components/number-field/number-field-hide.demo.tsx
rename to docs/content/components/form/number-field/number-field-hide.demo.tsx
diff --git a/docs/content/components/number-field/number-field-required.demo.tsx b/docs/content/components/form/number-field/number-field-required.demo.tsx
similarity index 100%
rename from docs/content/components/number-field/number-field-required.demo.tsx
rename to docs/content/components/form/number-field/number-field-required.demo.tsx
diff --git a/docs/content/components/number-field/number-field-simple.demo.tsx b/docs/content/components/form/number-field/number-field-simple.demo.tsx
similarity index 100%
rename from docs/content/components/number-field/number-field-simple.demo.tsx
rename to docs/content/components/form/number-field/number-field-simple.demo.tsx
diff --git a/docs/content/components/number-field/number-field-values.demo.tsx b/docs/content/components/form/number-field/number-field-values.demo.tsx
similarity index 100%
rename from docs/content/components/number-field/number-field-values.demo.tsx
rename to docs/content/components/form/number-field/number-field-values.demo.tsx
diff --git a/docs/content/components/number-field/number-field.mdx b/docs/content/components/form/number-field/number-field.mdx
similarity index 100%
rename from docs/content/components/number-field/number-field.mdx
rename to docs/content/components/form/number-field/number-field.mdx
diff --git a/docs/content/components/radio/radio-disabled.demo.tsx b/docs/content/components/form/radio/radio-disabled.demo.tsx
similarity index 100%
rename from docs/content/components/radio/radio-disabled.demo.tsx
rename to docs/content/components/form/radio/radio-disabled.demo.tsx
diff --git a/docs/content/components/radio/radio-error.demo.tsx b/docs/content/components/form/radio/radio-error.demo.tsx
similarity index 100%
rename from docs/content/components/radio/radio-error.demo.tsx
rename to docs/content/components/form/radio/radio-error.demo.tsx
diff --git a/docs/content/components/radio/radio-required.demo.tsx b/docs/content/components/form/radio/radio-required.demo.tsx
similarity index 100%
rename from docs/content/components/radio/radio-required.demo.tsx
rename to docs/content/components/form/radio/radio-required.demo.tsx
diff --git a/docs/content/components/radio/radio.demo.tsx b/docs/content/components/form/radio/radio.demo.tsx
similarity index 100%
rename from docs/content/components/radio/radio.demo.tsx
rename to docs/content/components/form/radio/radio.demo.tsx
diff --git a/docs/content/components/radio/radio.mdx b/docs/content/components/form/radio/radio.mdx
similarity index 100%
rename from docs/content/components/radio/radio.mdx
rename to docs/content/components/form/radio/radio.mdx
diff --git a/docs/content/components/search-field/search-field-basic.demo.tsx b/docs/content/components/form/search-field/search-field-basic.demo.tsx
similarity index 100%
rename from docs/content/components/search-field/search-field-basic.demo.tsx
rename to docs/content/components/form/search-field/search-field-basic.demo.tsx
diff --git a/docs/content/components/search-field/search-field-disabled.demo.tsx b/docs/content/components/form/search-field/search-field-disabled.demo.tsx
similarity index 100%
rename from docs/content/components/search-field/search-field-disabled.demo.tsx
rename to docs/content/components/form/search-field/search-field-disabled.demo.tsx
diff --git a/docs/content/components/search-field/search-field-error.demo.tsx b/docs/content/components/form/search-field/search-field-error.demo.tsx
similarity index 100%
rename from docs/content/components/search-field/search-field-error.demo.tsx
rename to docs/content/components/form/search-field/search-field-error.demo.tsx
diff --git a/docs/content/components/search-field/search-field-readoOnly.demo.tsx b/docs/content/components/form/search-field/search-field-readoOnly.demo.tsx
similarity index 100%
rename from docs/content/components/search-field/search-field-readoOnly.demo.tsx
rename to docs/content/components/form/search-field/search-field-readoOnly.demo.tsx
diff --git a/docs/content/components/search-field/search-field-req.demo.tsx b/docs/content/components/form/search-field/search-field-req.demo.tsx
similarity index 100%
rename from docs/content/components/search-field/search-field-req.demo.tsx
rename to docs/content/components/form/search-field/search-field-req.demo.tsx
diff --git a/docs/content/components/search-field/search-field.mdx b/docs/content/components/form/search-field/search-field.mdx
similarity index 100%
rename from docs/content/components/search-field/search-field.mdx
rename to docs/content/components/form/search-field/search-field.mdx
diff --git a/docs/content/components/select/select-basic.demo.tsx b/docs/content/components/form/select/select-basic.demo.tsx
similarity index 100%
rename from docs/content/components/select/select-basic.demo.tsx
rename to docs/content/components/form/select/select-basic.demo.tsx
diff --git a/docs/content/components/select/select-default-selected.demo.tsx b/docs/content/components/form/select/select-default-selected.demo.tsx
similarity index 100%
rename from docs/content/components/select/select-default-selected.demo.tsx
rename to docs/content/components/form/select/select-default-selected.demo.tsx
diff --git a/docs/content/components/select/select-disabled-keys.demo.tsx b/docs/content/components/form/select/select-disabled-keys.demo.tsx
similarity index 100%
rename from docs/content/components/select/select-disabled-keys.demo.tsx
rename to docs/content/components/form/select/select-disabled-keys.demo.tsx
diff --git a/docs/content/components/select/select-disabled.demo.tsx b/docs/content/components/form/select/select-disabled.demo.tsx
similarity index 100%
rename from docs/content/components/select/select-disabled.demo.tsx
rename to docs/content/components/form/select/select-disabled.demo.tsx
diff --git a/docs/content/components/select/select-section.demo.tsx b/docs/content/components/form/select/select-section.demo.tsx
similarity index 100%
rename from docs/content/components/select/select-section.demo.tsx
rename to docs/content/components/form/select/select-section.demo.tsx
diff --git a/docs/content/components/select/select.mdx b/docs/content/components/form/select/select.mdx
similarity index 100%
rename from docs/content/components/select/select.mdx
rename to docs/content/components/form/select/select.mdx
diff --git a/docs/content/components/slider/slider-controlled.demo.tsx b/docs/content/components/form/slider/slider-controlled.demo.tsx
similarity index 100%
rename from docs/content/components/slider/slider-controlled.demo.tsx
rename to docs/content/components/form/slider/slider-controlled.demo.tsx
diff --git a/docs/content/components/slider/slider-disabled.demo.tsx b/docs/content/components/form/slider/slider-disabled.demo.tsx
similarity index 100%
rename from docs/content/components/slider/slider-disabled.demo.tsx
rename to docs/content/components/form/slider/slider-disabled.demo.tsx
diff --git a/docs/content/components/slider/slider-format.demo.tsx b/docs/content/components/form/slider/slider-format.demo.tsx
similarity index 100%
rename from docs/content/components/slider/slider-format.demo.tsx
rename to docs/content/components/form/slider/slider-format.demo.tsx
diff --git a/docs/content/components/slider/slider-max.demo.tsx b/docs/content/components/form/slider/slider-max.demo.tsx
similarity index 100%
rename from docs/content/components/slider/slider-max.demo.tsx
rename to docs/content/components/form/slider/slider-max.demo.tsx
diff --git a/docs/content/components/slider/slider-steps.demo.tsx b/docs/content/components/form/slider/slider-steps.demo.tsx
similarity index 100%
rename from docs/content/components/slider/slider-steps.demo.tsx
rename to docs/content/components/form/slider/slider-steps.demo.tsx
diff --git a/docs/content/components/slider/slider-uncontrolled.demo.tsx b/docs/content/components/form/slider/slider-uncontrolled.demo.tsx
similarity index 100%
rename from docs/content/components/slider/slider-uncontrolled.demo.tsx
rename to docs/content/components/form/slider/slider-uncontrolled.demo.tsx
diff --git a/docs/content/components/slider/slider-width.demo.tsx b/docs/content/components/form/slider/slider-width.demo.tsx
similarity index 100%
rename from docs/content/components/slider/slider-width.demo.tsx
rename to docs/content/components/form/slider/slider-width.demo.tsx
diff --git a/docs/content/components/slider/slider.mdx b/docs/content/components/form/slider/slider.mdx
similarity index 100%
rename from docs/content/components/slider/slider.mdx
rename to docs/content/components/form/slider/slider.mdx
diff --git a/docs/content/components/switch/switch-active-disabled.demo.tsx b/docs/content/components/form/switch/switch-active-disabled.demo.tsx
similarity index 100%
rename from docs/content/components/switch/switch-active-disabled.demo.tsx
rename to docs/content/components/form/switch/switch-active-disabled.demo.tsx
diff --git a/docs/content/components/switch/switch-active.demo.tsx b/docs/content/components/form/switch/switch-active.demo.tsx
similarity index 100%
rename from docs/content/components/switch/switch-active.demo.tsx
rename to docs/content/components/form/switch/switch-active.demo.tsx
diff --git a/docs/content/components/switch/switch-basic.demo.tsx b/docs/content/components/form/switch/switch-basic.demo.tsx
similarity index 100%
rename from docs/content/components/switch/switch-basic.demo.tsx
rename to docs/content/components/form/switch/switch-basic.demo.tsx
diff --git a/docs/content/components/switch/switch-disabled.demo.tsx b/docs/content/components/form/switch/switch-disabled.demo.tsx
similarity index 100%
rename from docs/content/components/switch/switch-disabled.demo.tsx
rename to docs/content/components/form/switch/switch-disabled.demo.tsx
diff --git a/docs/content/components/switch/switch.mdx b/docs/content/components/form/switch/switch.mdx
similarity index 100%
rename from docs/content/components/switch/switch.mdx
rename to docs/content/components/form/switch/switch.mdx
diff --git a/docs/content/components/tag/basic-tag.demo.tsx b/docs/content/components/form/tag/basic-tag.demo.tsx
similarity index 100%
rename from docs/content/components/tag/basic-tag.demo.tsx
rename to docs/content/components/form/tag/basic-tag.demo.tsx
diff --git a/docs/content/components/tag/label-tag.demo.tsx b/docs/content/components/form/tag/label-tag.demo.tsx
similarity index 100%
rename from docs/content/components/tag/label-tag.demo.tsx
rename to docs/content/components/form/tag/label-tag.demo.tsx
diff --git a/docs/content/components/tag/remove-tag.demo.tsx b/docs/content/components/form/tag/remove-tag.demo.tsx
similarity index 100%
rename from docs/content/components/tag/remove-tag.demo.tsx
rename to docs/content/components/form/tag/remove-tag.demo.tsx
diff --git a/docs/content/components/tag/tag.mdx b/docs/content/components/form/tag/tag.mdx
similarity index 100%
rename from docs/content/components/tag/tag.mdx
rename to docs/content/components/form/tag/tag.mdx
diff --git a/docs/content/components/text-area/text-area-basic.demo.tsx b/docs/content/components/form/text-area/text-area-basic.demo.tsx
similarity index 100%
rename from docs/content/components/text-area/text-area-basic.demo.tsx
rename to docs/content/components/form/text-area/text-area-basic.demo.tsx
diff --git a/docs/content/components/text-area/text-area-disabled.demo.tsx b/docs/content/components/form/text-area/text-area-disabled.demo.tsx
similarity index 100%
rename from docs/content/components/text-area/text-area-disabled.demo.tsx
rename to docs/content/components/form/text-area/text-area-disabled.demo.tsx
diff --git a/docs/content/components/text-area/text-area-error.demo.tsx b/docs/content/components/form/text-area/text-area-error.demo.tsx
similarity index 100%
rename from docs/content/components/text-area/text-area-error.demo.tsx
rename to docs/content/components/form/text-area/text-area-error.demo.tsx
diff --git a/docs/content/components/text-area/text-area-req.demo.tsx b/docs/content/components/form/text-area/text-area-req.demo.tsx
similarity index 100%
rename from docs/content/components/text-area/text-area-req.demo.tsx
rename to docs/content/components/form/text-area/text-area-req.demo.tsx
diff --git a/docs/content/components/text-area/text-area.mdx b/docs/content/components/form/text-area/text-area.mdx
similarity index 100%
rename from docs/content/components/text-area/text-area.mdx
rename to docs/content/components/form/text-area/text-area.mdx
diff --git a/docs/content/components/textfield/textfield-basic.demo.tsx b/docs/content/components/form/textfield/textfield-basic.demo.tsx
similarity index 100%
rename from docs/content/components/textfield/textfield-basic.demo.tsx
rename to docs/content/components/form/textfield/textfield-basic.demo.tsx
diff --git a/docs/content/components/textfield/textfield-disabled.demo.tsx b/docs/content/components/form/textfield/textfield-disabled.demo.tsx
similarity index 100%
rename from docs/content/components/textfield/textfield-disabled.demo.tsx
rename to docs/content/components/form/textfield/textfield-disabled.demo.tsx
diff --git a/docs/content/components/textfield/textfield-error.demo.tsx b/docs/content/components/form/textfield/textfield-error.demo.tsx
similarity index 100%
rename from docs/content/components/textfield/textfield-error.demo.tsx
rename to docs/content/components/form/textfield/textfield-error.demo.tsx
diff --git a/docs/content/components/textfield/textfield-group.demo.tsx b/docs/content/components/form/textfield/textfield-group.demo.tsx
similarity index 100%
rename from docs/content/components/textfield/textfield-group.demo.tsx
rename to docs/content/components/form/textfield/textfield-group.demo.tsx
diff --git a/docs/content/components/textfield/textfield-number.demo.tsx b/docs/content/components/form/textfield/textfield-number.demo.tsx
similarity index 100%
rename from docs/content/components/textfield/textfield-number.demo.tsx
rename to docs/content/components/form/textfield/textfield-number.demo.tsx
diff --git a/docs/content/components/textfield/textfield-req.demo.tsx b/docs/content/components/form/textfield/textfield-req.demo.tsx
similarity index 100%
rename from docs/content/components/textfield/textfield-req.demo.tsx
rename to docs/content/components/form/textfield/textfield-req.demo.tsx
diff --git a/docs/content/components/textfield/textfield-types.demo.tsx b/docs/content/components/form/textfield/textfield-types.demo.tsx
similarity index 100%
rename from docs/content/components/textfield/textfield-types.demo.tsx
rename to docs/content/components/form/textfield/textfield-types.demo.tsx
diff --git a/docs/content/components/textfield/textfield.mdx b/docs/content/components/form/textfield/textfield.mdx
similarity index 100%
rename from docs/content/components/textfield/textfield.mdx
rename to docs/content/components/form/textfield/textfield.mdx
diff --git a/docs/content/components/aside/aside.mdx b/docs/content/components/layout/aside/aside.mdx
similarity index 100%
rename from docs/content/components/aside/aside.mdx
rename to docs/content/components/layout/aside/aside.mdx
diff --git a/docs/content/components/aside/rightside.demo.tsx b/docs/content/components/layout/aside/rightside.demo.tsx
similarity index 100%
rename from docs/content/components/aside/rightside.demo.tsx
rename to docs/content/components/layout/aside/rightside.demo.tsx
diff --git a/docs/content/components/aside/space.demo.tsx b/docs/content/components/layout/aside/space.demo.tsx
similarity index 100%
rename from docs/content/components/aside/space.demo.tsx
rename to docs/content/components/layout/aside/space.demo.tsx
diff --git a/docs/content/components/aspect/aspect.mdx b/docs/content/components/layout/aspect/aspect.mdx
similarity index 100%
rename from docs/content/components/aspect/aspect.mdx
rename to docs/content/components/layout/aspect/aspect.mdx
diff --git a/docs/content/components/aspect/golden-aspect.demo.tsx b/docs/content/components/layout/aspect/golden-aspect.demo.tsx
similarity index 100%
rename from docs/content/components/aspect/golden-aspect.demo.tsx
rename to docs/content/components/layout/aspect/golden-aspect.demo.tsx
diff --git a/docs/content/components/aspect/map.demo.tsx b/docs/content/components/layout/aspect/map.demo.tsx
similarity index 100%
rename from docs/content/components/aspect/map.demo.tsx
rename to docs/content/components/layout/aspect/map.demo.tsx
diff --git a/docs/content/components/aspect/ratio-square.demo.tsx b/docs/content/components/layout/aspect/ratio-square.demo.tsx
similarity index 100%
rename from docs/content/components/aspect/ratio-square.demo.tsx
rename to docs/content/components/layout/aspect/ratio-square.demo.tsx
diff --git a/docs/content/components/aspect/video.demo.tsx b/docs/content/components/layout/aspect/video.demo.tsx
similarity index 100%
rename from docs/content/components/aspect/video.demo.tsx
rename to docs/content/components/layout/aspect/video.demo.tsx
diff --git a/docs/content/components/breakout/breakout.mdx b/docs/content/components/layout/breakout/breakout.mdx
similarity index 100%
rename from docs/content/components/breakout/breakout.mdx
rename to docs/content/components/layout/breakout/breakout.mdx
diff --git a/docs/content/components/breakout/horizontal-breakout.demo.tsx b/docs/content/components/layout/breakout/horizontal-breakout.demo.tsx
similarity index 100%
rename from docs/content/components/breakout/horizontal-breakout.demo.tsx
rename to docs/content/components/layout/breakout/horizontal-breakout.demo.tsx
diff --git a/docs/content/components/breakout/iframe-breakout.demo.tsx b/docs/content/components/layout/breakout/iframe-breakout.demo.tsx
similarity index 100%
rename from docs/content/components/breakout/iframe-breakout.demo.tsx
rename to docs/content/components/layout/breakout/iframe-breakout.demo.tsx
diff --git a/docs/content/components/breakout/vertical-breakout.demo.tsx b/docs/content/components/layout/breakout/vertical-breakout.demo.tsx
similarity index 100%
rename from docs/content/components/breakout/vertical-breakout.demo.tsx
rename to docs/content/components/layout/breakout/vertical-breakout.demo.tsx
diff --git a/docs/content/components/center/center.mdx b/docs/content/components/layout/center/center.mdx
similarity index 100%
rename from docs/content/components/center/center.mdx
rename to docs/content/components/layout/center/center.mdx
diff --git a/docs/content/components/center/space-center.demo.tsx b/docs/content/components/layout/center/space-center.demo.tsx
similarity index 100%
rename from docs/content/components/center/space-center.demo.tsx
rename to docs/content/components/layout/center/space-center.demo.tsx
diff --git a/docs/content/components/center/text-center.demo.tsx b/docs/content/components/layout/center/text-center.demo.tsx
similarity index 100%
rename from docs/content/components/center/text-center.demo.tsx
rename to docs/content/components/layout/center/text-center.demo.tsx
diff --git a/docs/content/components/center/width-center.demo.tsx b/docs/content/components/layout/center/width-center.demo.tsx
similarity index 100%
rename from docs/content/components/center/width-center.demo.tsx
rename to docs/content/components/layout/center/width-center.demo.tsx
diff --git a/docs/content/components/columns/collapse-columns.demo.tsx b/docs/content/components/layout/columns/collapse-columns.demo.tsx
similarity index 100%
rename from docs/content/components/columns/collapse-columns.demo.tsx
rename to docs/content/components/layout/columns/collapse-columns.demo.tsx
diff --git a/docs/content/components/columns/columns.mdx b/docs/content/components/layout/columns/columns.mdx
similarity index 100%
rename from docs/content/components/columns/columns.mdx
rename to docs/content/components/layout/columns/columns.mdx
diff --git a/docs/content/components/columns/layout-columns.demo.tsx b/docs/content/components/layout/columns/layout-columns.demo.tsx
similarity index 100%
rename from docs/content/components/columns/layout-columns.demo.tsx
rename to docs/content/components/layout/columns/layout-columns.demo.tsx
diff --git a/docs/content/components/columns/space-columns.demo.tsx b/docs/content/components/layout/columns/space-columns.demo.tsx
similarity index 100%
rename from docs/content/components/columns/space-columns.demo.tsx
rename to docs/content/components/layout/columns/space-columns.demo.tsx
diff --git a/docs/content/components/columns/stretch-columns-switch.demo.tsx b/docs/content/components/layout/columns/stretch-columns-switch.demo.tsx
similarity index 100%
rename from docs/content/components/columns/stretch-columns-switch.demo.tsx
rename to docs/content/components/layout/columns/stretch-columns-switch.demo.tsx
diff --git a/docs/content/components/columns/stretch-columns.demo.tsx b/docs/content/components/layout/columns/stretch-columns.demo.tsx
similarity index 100%
rename from docs/content/components/columns/stretch-columns.demo.tsx
rename to docs/content/components/layout/columns/stretch-columns.demo.tsx
diff --git a/docs/content/components/container/container.mdx b/docs/content/components/layout/container/container.mdx
similarity index 100%
rename from docs/content/components/container/container.mdx
rename to docs/content/components/layout/container/container.mdx
diff --git a/docs/content/components/container/full-container.demo.tsx b/docs/content/components/layout/container/full-container.demo.tsx
similarity index 100%
rename from docs/content/components/container/full-container.demo.tsx
rename to docs/content/components/layout/container/full-container.demo.tsx
diff --git a/docs/content/components/container/small-container.demo.tsx b/docs/content/components/layout/container/small-container.demo.tsx
similarity index 100%
rename from docs/content/components/container/small-container.demo.tsx
rename to docs/content/components/layout/container/small-container.demo.tsx
diff --git a/docs/content/components/inline/inline-alignments.demo.tsx b/docs/content/components/layout/inline/inline-alignments.demo.tsx
similarity index 100%
rename from docs/content/components/inline/inline-alignments.demo.tsx
rename to docs/content/components/layout/inline/inline-alignments.demo.tsx
diff --git a/docs/content/components/inline/inline-elements.demo.tsx b/docs/content/components/layout/inline/inline-elements.demo.tsx
similarity index 100%
rename from docs/content/components/inline/inline-elements.demo.tsx
rename to docs/content/components/layout/inline/inline-elements.demo.tsx
diff --git a/docs/content/components/inline/inline-nested.demo.tsx b/docs/content/components/layout/inline/inline-nested.demo.tsx
similarity index 100%
rename from docs/content/components/inline/inline-nested.demo.tsx
rename to docs/content/components/layout/inline/inline-nested.demo.tsx
diff --git a/docs/content/components/inline/inline-spacing.demo.tsx b/docs/content/components/layout/inline/inline-spacing.demo.tsx
similarity index 100%
rename from docs/content/components/inline/inline-spacing.demo.tsx
rename to docs/content/components/layout/inline/inline-spacing.demo.tsx
diff --git a/docs/content/components/inline/inline.mdx b/docs/content/components/layout/inline/inline.mdx
similarity index 100%
rename from docs/content/components/inline/inline.mdx
rename to docs/content/components/layout/inline/inline.mdx
diff --git a/docs/content/components/inset/inset-equal.demo.tsx b/docs/content/components/layout/inset/inset-equal.demo.tsx
similarity index 100%
rename from docs/content/components/inset/inset-equal.demo.tsx
rename to docs/content/components/layout/inset/inset-equal.demo.tsx
diff --git a/docs/content/components/inset/inset-hv.demo.tsx b/docs/content/components/layout/inset/inset-hv.demo.tsx
similarity index 100%
rename from docs/content/components/inset/inset-hv.demo.tsx
rename to docs/content/components/layout/inset/inset-hv.demo.tsx
diff --git a/docs/content/components/inset/inset.mdx b/docs/content/components/layout/inset/inset.mdx
similarity index 100%
rename from docs/content/components/inset/inset.mdx
rename to docs/content/components/layout/inset/inset.mdx
diff --git a/docs/content/components/split/split-inline.demo.tsx b/docs/content/components/layout/split/split-inline.demo.tsx
similarity index 100%
rename from docs/content/components/split/split-inline.demo.tsx
rename to docs/content/components/layout/split/split-inline.demo.tsx
diff --git a/docs/content/components/split/split-stack.demo.tsx b/docs/content/components/layout/split/split-stack.demo.tsx
similarity index 100%
rename from docs/content/components/split/split-stack.demo.tsx
rename to docs/content/components/layout/split/split-stack.demo.tsx
diff --git a/docs/content/components/split/split.mdx b/docs/content/components/layout/split/split.mdx
similarity index 100%
rename from docs/content/components/split/split.mdx
rename to docs/content/components/layout/split/split.mdx
diff --git a/docs/content/components/stack/stack-horizontal.demo.tsx b/docs/content/components/layout/stack/stack-horizontal.demo.tsx
similarity index 100%
rename from docs/content/components/stack/stack-horizontal.demo.tsx
rename to docs/content/components/layout/stack/stack-horizontal.demo.tsx
diff --git a/docs/content/components/stack/stack-nested.demo.tsx b/docs/content/components/layout/stack/stack-nested.demo.tsx
similarity index 100%
rename from docs/content/components/stack/stack-nested.demo.tsx
rename to docs/content/components/layout/stack/stack-nested.demo.tsx
diff --git a/docs/content/components/stack/stack-spacing.demo.tsx b/docs/content/components/layout/stack/stack-spacing.demo.tsx
similarity index 100%
rename from docs/content/components/stack/stack-spacing.demo.tsx
rename to docs/content/components/layout/stack/stack-spacing.demo.tsx
diff --git a/docs/content/components/stack/stack-vertical.demo.tsx b/docs/content/components/layout/stack/stack-vertical.demo.tsx
similarity index 100%
rename from docs/content/components/stack/stack-vertical.demo.tsx
rename to docs/content/components/layout/stack/stack-vertical.demo.tsx
diff --git a/docs/content/components/stack/stack.mdx b/docs/content/components/layout/stack/stack.mdx
similarity index 100%
rename from docs/content/components/stack/stack.mdx
rename to docs/content/components/layout/stack/stack.mdx
diff --git a/docs/content/components/tiles/tiles-autoRows.demo.tsx b/docs/content/components/layout/tiles/tiles-autoRows.demo.tsx
similarity index 100%
rename from docs/content/components/tiles/tiles-autoRows.demo.tsx
rename to docs/content/components/layout/tiles/tiles-autoRows.demo.tsx
diff --git a/docs/content/components/tiles/tiles-complex.demo.tsx b/docs/content/components/layout/tiles/tiles-complex.demo.tsx
similarity index 100%
rename from docs/content/components/tiles/tiles-complex.demo.tsx
rename to docs/content/components/layout/tiles/tiles-complex.demo.tsx
diff --git a/docs/content/components/tiles/tiles-itemwidth.demo.tsx b/docs/content/components/layout/tiles/tiles-itemwidth.demo.tsx
similarity index 100%
rename from docs/content/components/tiles/tiles-itemwidth.demo.tsx
rename to docs/content/components/layout/tiles/tiles-itemwidth.demo.tsx
diff --git a/docs/content/components/tiles/tiles-spacing.demo.tsx b/docs/content/components/layout/tiles/tiles-spacing.demo.tsx
similarity index 100%
rename from docs/content/components/tiles/tiles-spacing.demo.tsx
rename to docs/content/components/layout/tiles/tiles-spacing.demo.tsx
diff --git a/docs/content/components/tiles/tiles-stretch.demo.tsx b/docs/content/components/layout/tiles/tiles-stretch.demo.tsx
similarity index 100%
rename from docs/content/components/tiles/tiles-stretch.demo.tsx
rename to docs/content/components/layout/tiles/tiles-stretch.demo.tsx
diff --git a/docs/content/components/tiles/tiles.mdx b/docs/content/components/layout/tiles/tiles.mdx
similarity index 100%
rename from docs/content/components/tiles/tiles.mdx
rename to docs/content/components/layout/tiles/tiles.mdx
diff --git a/docs/content/components/tabs/tabs-disabled.demo.tsx b/docs/content/components/navigation/tabs/tabs-disabled.demo.tsx
similarity index 100%
rename from docs/content/components/tabs/tabs-disabled.demo.tsx
rename to docs/content/components/navigation/tabs/tabs-disabled.demo.tsx
diff --git a/docs/content/components/tabs/tabs-large.demo.tsx b/docs/content/components/navigation/tabs/tabs-large.demo.tsx
similarity index 100%
rename from docs/content/components/tabs/tabs-large.demo.tsx
rename to docs/content/components/navigation/tabs/tabs-large.demo.tsx
diff --git a/docs/content/components/tabs/tabs-selectedKey.demo.tsx b/docs/content/components/navigation/tabs/tabs-selectedKey.demo.tsx
similarity index 100%
rename from docs/content/components/tabs/tabs-selectedKey.demo.tsx
rename to docs/content/components/navigation/tabs/tabs-selectedKey.demo.tsx
diff --git a/docs/content/components/tabs/tabs.mdx b/docs/content/components/navigation/tabs/tabs.mdx
similarity index 100%
rename from docs/content/components/tabs/tabs.mdx
rename to docs/content/components/navigation/tabs/tabs.mdx
diff --git a/docs/content/components/dialog/dialog-dismiss.demo.tsx b/docs/content/components/overlay/dialog/dialog-dismiss.demo.tsx
similarity index 100%
rename from docs/content/components/dialog/dialog-dismiss.demo.tsx
rename to docs/content/components/overlay/dialog/dialog-dismiss.demo.tsx
diff --git a/docs/content/components/dialog/dialog-form.demo.tsx b/docs/content/components/overlay/dialog/dialog-form.demo.tsx
similarity index 100%
rename from docs/content/components/dialog/dialog-form.demo.tsx
rename to docs/content/components/overlay/dialog/dialog-form.demo.tsx
diff --git a/docs/content/components/dialog/dialog.mdx b/docs/content/components/overlay/dialog/dialog.mdx
similarity index 100%
rename from docs/content/components/dialog/dialog.mdx
rename to docs/content/components/overlay/dialog/dialog.mdx
diff --git a/docs/content/components/dialog/menu-open-dialog.demo.tsx b/docs/content/components/overlay/dialog/menu-open-dialog.demo.tsx
similarity index 100%
rename from docs/content/components/dialog/menu-open-dialog.demo.tsx
rename to docs/content/components/overlay/dialog/menu-open-dialog.demo.tsx
diff --git a/docs/content/components/menu/kebab-menu.demo.tsx b/docs/content/components/overlay/menu/kebab-menu.demo.tsx
similarity index 100%
rename from docs/content/components/menu/kebab-menu.demo.tsx
rename to docs/content/components/overlay/menu/kebab-menu.demo.tsx
diff --git a/docs/content/components/menu/menu-action.demo.tsx b/docs/content/components/overlay/menu/menu-action.demo.tsx
similarity index 100%
rename from docs/content/components/menu/menu-action.demo.tsx
rename to docs/content/components/overlay/menu/menu-action.demo.tsx
diff --git a/docs/content/components/menu/menu-disabled.demo.tsx b/docs/content/components/overlay/menu/menu-disabled.demo.tsx
similarity index 100%
rename from docs/content/components/menu/menu-disabled.demo.tsx
rename to docs/content/components/overlay/menu/menu-disabled.demo.tsx
diff --git a/docs/content/components/menu/menu-open-dialog.demo.tsx b/docs/content/components/overlay/menu/menu-open-dialog.demo.tsx
similarity index 100%
rename from docs/content/components/menu/menu-open-dialog.demo.tsx
rename to docs/content/components/overlay/menu/menu-open-dialog.demo.tsx
diff --git a/docs/content/components/menu/menu-open.demo.tsx b/docs/content/components/overlay/menu/menu-open.demo.tsx
similarity index 100%
rename from docs/content/components/menu/menu-open.demo.tsx
rename to docs/content/components/overlay/menu/menu-open.demo.tsx
diff --git a/docs/content/components/menu/menu-section.demo.tsx b/docs/content/components/overlay/menu/menu-section.demo.tsx
similarity index 100%
rename from docs/content/components/menu/menu-section.demo.tsx
rename to docs/content/components/overlay/menu/menu-section.demo.tsx
diff --git a/docs/content/components/menu/menu.mdx b/docs/content/components/overlay/menu/menu.mdx
similarity index 100%
rename from docs/content/components/menu/menu.mdx
rename to docs/content/components/overlay/menu/menu.mdx
diff --git a/docs/content/components/tooltip/tooltip-basic.demo.tsx b/docs/content/components/overlay/tooltip/tooltip-basic.demo.tsx
similarity index 100%
rename from docs/content/components/tooltip/tooltip-basic.demo.tsx
rename to docs/content/components/overlay/tooltip/tooltip-basic.demo.tsx
diff --git a/docs/content/components/tooltip/tooltip-custom.demo.tsx b/docs/content/components/overlay/tooltip/tooltip-custom.demo.tsx
similarity index 100%
rename from docs/content/components/tooltip/tooltip-custom.demo.tsx
rename to docs/content/components/overlay/tooltip/tooltip-custom.demo.tsx
diff --git a/docs/content/components/tooltip/tooltip-focus.demo.tsx b/docs/content/components/overlay/tooltip/tooltip-focus.demo.tsx
similarity index 100%
rename from docs/content/components/tooltip/tooltip-focus.demo.tsx
rename to docs/content/components/overlay/tooltip/tooltip-focus.demo.tsx
diff --git a/docs/content/components/tooltip/tooltip-pressed.demo.tsx b/docs/content/components/overlay/tooltip/tooltip-pressed.demo.tsx
similarity index 100%
rename from docs/content/components/tooltip/tooltip-pressed.demo.tsx
rename to docs/content/components/overlay/tooltip/tooltip-pressed.demo.tsx
diff --git a/docs/content/components/tooltip/tooltip.mdx b/docs/content/components/overlay/tooltip/tooltip.mdx
similarity index 100%
rename from docs/content/components/tooltip/tooltip.mdx
rename to docs/content/components/overlay/tooltip/tooltip.mdx
diff --git a/docs/content/pages/concepts/building-forms-hook-form.demo.tsx b/docs/content/concepts/building-forms-hook-form.demo.tsx
similarity index 100%
rename from docs/content/pages/concepts/building-forms-hook-form.demo.tsx
rename to docs/content/concepts/building-forms-hook-form.demo.tsx
diff --git a/docs/content/pages/concepts/building-forms-zod.demo.tsx b/docs/content/concepts/building-forms-zod.demo.tsx
similarity index 100%
rename from docs/content/pages/concepts/building-forms-zod.demo.tsx
rename to docs/content/concepts/building-forms-zod.demo.tsx
diff --git a/docs/content/pages/concepts/building-forms.mdx b/docs/content/concepts/building-forms.mdx
similarity index 100%
rename from docs/content/pages/concepts/building-forms.mdx
rename to docs/content/concepts/building-forms.mdx
diff --git a/docs/content/pages/concepts/concepts-layouts.demo.tsx b/docs/content/concepts/concepts-layouts.demo.tsx
similarity index 91%
rename from docs/content/pages/concepts/concepts-layouts.demo.tsx
rename to docs/content/concepts/concepts-layouts.demo.tsx
index cb023217f..a29f3ac9f 100644
--- a/docs/content/pages/concepts/concepts-layouts.demo.tsx
+++ b/docs/content/concepts/concepts-layouts.demo.tsx
@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import { Card, Columns, Stack, Text, Tiles } from '@marigold/components';
-import { Rectangle } from '@/app/components/Rectangle';
-import { Squircle } from '@/app/components/Squircle';
+import { Rectangle } from '@/ui/Rectangle';
+import { Squircle } from '@/ui/Squircle';
 
 const Annotation = ({ children }: { children: ReactNode }) => (
   <Text variant="caption" align="center">
diff --git a/docs/content/pages/concepts/error-handling.demo.tsx b/docs/content/concepts/error-handling.demo.tsx
similarity index 100%
rename from docs/content/pages/concepts/error-handling.demo.tsx
rename to docs/content/concepts/error-handling.demo.tsx
diff --git a/docs/content/pages/concepts/icons.mdx b/docs/content/concepts/icons.mdx
similarity index 100%
rename from docs/content/pages/concepts/icons.mdx
rename to docs/content/concepts/icons.mdx
diff --git a/docs/content/pages/concepts/layout-forms.demo.tsx b/docs/content/concepts/layout-forms.demo.tsx
similarity index 100%
rename from docs/content/pages/concepts/layout-forms.demo.tsx
rename to docs/content/concepts/layout-forms.demo.tsx
diff --git a/docs/content/pages/concepts/layouts.mdx b/docs/content/concepts/layouts.mdx
similarity index 100%
rename from docs/content/pages/concepts/layouts.mdx
rename to docs/content/concepts/layouts.mdx
diff --git a/docs/content/pages/concepts/logical-interaction.demo.tsx b/docs/content/concepts/logical-interaction.demo.tsx
similarity index 100%
rename from docs/content/pages/concepts/logical-interaction.demo.tsx
rename to docs/content/concepts/logical-interaction.demo.tsx
diff --git a/docs/content/pages/develop/release.mdx b/docs/content/develop/release.mdx
similarity index 100%
rename from docs/content/pages/develop/release.mdx
rename to docs/content/develop/release.mdx
diff --git a/docs/content/pages/develop/scripts.mdx b/docs/content/develop/scripts.mdx
similarity index 100%
rename from docs/content/pages/develop/scripts.mdx
rename to docs/content/develop/scripts.mdx
diff --git a/docs/content/hooks/.eslintrc.js b/docs/content/hooks/.eslintrc.js
deleted file mode 100644
index ed0d67d02..000000000
--- a/docs/content/hooks/.eslintrc.js
+++ /dev/null
@@ -1,8 +0,0 @@
-module.exports = {
-  rules: {
-    /**
-     * We use default exports for demos.
-     */
-    'import/no-anonymous-default-export': 'off',
-  },
-};
diff --git a/docs/content/pages/introduction/about.mdx b/docs/content/introduction/about.mdx
similarity index 100%
rename from docs/content/pages/introduction/about.mdx
rename to docs/content/introduction/about.mdx
diff --git a/docs/content/pages/introduction/faq.mdx b/docs/content/introduction/faq.mdx
similarity index 100%
rename from docs/content/pages/introduction/faq.mdx
rename to docs/content/introduction/faq.mdx
diff --git a/docs/content/pages/introduction/getting-started.mdx b/docs/content/introduction/getting-started.mdx
similarity index 100%
rename from docs/content/pages/introduction/getting-started.mdx
rename to docs/content/introduction/getting-started.mdx
diff --git a/docs/content/pages/.eslintrc.js b/docs/content/pages/.eslintrc.js
deleted file mode 100644
index ed0d67d02..000000000
--- a/docs/content/pages/.eslintrc.js
+++ /dev/null
@@ -1,8 +0,0 @@
-module.exports = {
-  rules: {
-    /**
-     * We use default exports for demos.
-     */
-    'import/no-anonymous-default-export': 'off',
-  },
-};
diff --git a/docs/content/pages/recipes/bookings-form.demo.tsx b/docs/content/recipes/bookings-form.demo.tsx
similarity index 100%
rename from docs/content/pages/recipes/bookings-form.demo.tsx
rename to docs/content/recipes/bookings-form.demo.tsx
diff --git a/docs/content/pages/recipes/core-table-print.demo.tsx b/docs/content/recipes/core-table-print.demo.tsx
similarity index 100%
rename from docs/content/pages/recipes/core-table-print.demo.tsx
rename to docs/content/recipes/core-table-print.demo.tsx
diff --git a/docs/content/pages/recipes/form-recipes.mdx b/docs/content/recipes/form-recipes.mdx
similarity index 100%
rename from docs/content/pages/recipes/form-recipes.mdx
rename to docs/content/recipes/form-recipes.mdx
diff --git a/docs/content/pages/recipes/organization-search.demo.tsx b/docs/content/recipes/organization-search.demo.tsx
similarity index 100%
rename from docs/content/pages/recipes/organization-search.demo.tsx
rename to docs/content/recipes/organization-search.demo.tsx
diff --git a/docs/content/pages/recipes/table-recipes.mdx b/docs/content/recipes/table-recipes.mdx
similarity index 100%
rename from docs/content/pages/recipes/table-recipes.mdx
rename to docs/content/recipes/table-recipes.mdx
diff --git a/docs/contentlayer.config.ts b/docs/contentlayer.config.ts
index 1c6786cf6..6f4acc016 100644
--- a/docs/contentlayer.config.ts
+++ b/docs/contentlayer.config.ts
@@ -1,8 +1,4 @@
-import {
-  defineDocumentType,
-  makeSource,
-  type FieldDefs,
-} from 'contentlayer/source-files';
+import { defineDocumentType, makeSource } from 'contentlayer/source-files';
 
 import remarkGfm from 'remark-gfm';
 import rehypeSlug from 'rehype-slug';
@@ -12,95 +8,89 @@ import { visit } from 'unist-util-visit';
 
 import { rehypeComponentDemo } from './lib/mdx/rehype-component-demo';
 
-import { siteConfig } from './lib/config';
+/**
+ * Normalizaiton supports "grouped pages". E.g. when we want to put
+ * the page next to its demos.
+ *
+ * Outpu:
+ * - concepts/layouts -> concepts/layouts
+ * - components/form/button/button -> components/form/button
+ */
+const getNormalizedPath = (val: string) => {
+  let paths = val.split('/');
 
-// Helpers
-// ---------------
-const commonFields: FieldDefs = {
-  title: {
-    type: 'string',
-    required: true,
-  },
-  caption: {
-    type: 'string',
-    required: true,
-  },
+  // Support pages that are grouped with their demos into a folder
+  if (paths.at(-1) === paths.at(-2)) {
+    paths.pop();
+  }
+
+  return paths;
 };
 
 // Page Types
 // ---------------
 export const ContentPage = defineDocumentType(() => ({
   name: 'ContentPage',
-  filePathPattern: 'pages/**/*.mdx',
+  filePathPattern: '{**,*}/*.mdx',
   contentType: 'mdx',
   fields: {
-    ...commonFields,
-    order: {
-      type: 'number',
-    },
-  },
-  computedFields: {
-    slug: {
+    title: {
       type: 'string',
-      resolve: doc => doc._raw.flattenedPath.replace('pages', ''),
+      required: true,
     },
-    slugAsParams: {
+    caption: {
       type: 'string',
-      resolve: doc => doc._raw.flattenedPath.split('/').slice(1).join('/'),
-    },
-  },
-}));
-
-export const ComponentPage = defineDocumentType(() => ({
-  name: 'ComponentPage',
-  filePathPattern: 'components/**/*.mdx',
-  contentType: 'mdx',
-  fields: {
-    ...commonFields,
-    group: {
-      type: 'enum',
-      options: siteConfig.navigation.componentGroups,
       required: true,
     },
+    order: {
+      type: 'number',
+    },
   },
   computedFields: {
+    // Transforms the page's path to a slug to use with next.js API
     slug: {
       type: 'string',
-      resolve: doc =>
-        `/${doc._raw.flattenedPath.substring(
-          0,
-          doc._raw.flattenedPath.lastIndexOf('/')
-        )}`,
+      resolve: doc => getNormalizedPath(doc._raw.flattenedPath).join('/'),
     },
-    slugAsParams: {
+    // Subsection is the 1st folder level of a page.
+    section: {
       type: 'string',
-      // Slugs are matched agains the name of the component or rather the file name
-      resolve: doc => doc._raw.sourceFileName.split('.')[0],
-    },
-  },
-}));
-
-export const HookPage = defineDocumentType(() => ({
-  name: 'HookPage',
-  filePathPattern: 'hooks/**/*.mdx',
-  contentType: 'mdx',
-  fields: {
-    ...commonFields,
-  },
-  computedFields: {
-    slug: {
-      type: 'string',
-      resolve: doc =>
-        `/${doc._raw.flattenedPath.substring(
-          0,
-          doc._raw.flattenedPath.lastIndexOf('/')
-        )}`,
+      resolve: doc => {
+        const path = getNormalizedPath(doc._raw.flattenedPath);
+        return path.length < 2 ? null : path.at(0);
+      },
     },
-    slugAsParams: {
+    // Subsection is the 2nd folder level of a page.
+    subsection: {
       type: 'string',
-      // Slugs are matched agains the name of the component or rather the file name
-      resolve: doc => doc._raw.sourceFileName.split('.')[0],
+      resolve: doc => {
+        const path = getNormalizedPath(doc._raw.flattenedPath);
+        return path.length < 3 ? null : path.at(1);
+      },
     },
+
+    /**
+     * flattened Path:
+     *
+     * - pages/concepts/layouts
+     * - components/button/button
+     * - hooks/useTheme/useTheme
+     *
+     * [ 'components', 'footer', 'footer' ] footer footer
+     */
+
+    // section: {
+    //   type: 'string',
+    //   resolve: doc => doc._raw.sourceFileDir.split('/').at(-1),
+    // },
+    // slug: {
+    //   type: 'string',
+    //   resolve: doc => doc._raw.flattenedPath.replace('pages', ''),
+    // },
+    // slugAsParams: {
+    //   type: 'string',
+    //   resolve: doc => doc._raw.flattenedPath.split('/').slice(1).join('/'),
+    // },
   },
 }));
 
@@ -110,6 +100,7 @@ const contentDirPath = './content';
 
 export default makeSource({
   contentDirPath,
+  documentTypes: [ContentPage],
   mdx: {
     remarkPlugins: [remarkGfm],
     rehypePlugins: [
@@ -190,5 +181,4 @@ export default makeSource({
       ],
     ],
   },
-  documentTypes: [ContentPage, ComponentPage, HookPage],
 });
diff --git a/docs/lib/config.ts b/docs/lib/config.ts
index d7bb010f4..ea0a13782 100644
--- a/docs/lib/config.ts
+++ b/docs/lib/config.ts
@@ -1,13 +1,58 @@
 export const siteConfig = {
-  navigation: {
-    componentGroups: [
-      'Applicaiton',
-      'Layout',
-      'Navigation',
-      'Form',
-      'Collection',
-      'Overlay',
-      'Content',
-    ],
-  },
+  navigation: [
+    {
+      name: 'Introduction',
+      slug: 'introduction',
+    },
+    {
+      name: 'Concepts',
+      slug: 'concepts',
+    },
+    {
+      name: 'Components',
+      slug: 'components',
+      subsections: [
+        {
+          name: 'Application',
+          slug: 'application',
+        },
+        {
+          name: 'Layout',
+          slug: 'layout',
+        },
+        {
+          name: 'Navigation',
+          slug: 'navigation',
+        },
+        {
+          name: 'Form',
+          slug: 'form',
+        },
+        {
+          name: 'Collection',
+          slug: 'collection',
+        },
+        {
+          name: 'Overlay',
+          slug: 'overlay',
+        },
+        {
+          name: 'Content',
+          slug: 'content',
+        },
+      ],
+    },
+    {
+      name: 'Hooks',
+      slug: 'hooks',
+    },
+    {
+      name: 'Recipes',
+      slug: 'recipes',
+    },
+    {
+      name: 'Develop',
+      slug: 'develop',
+    },
+  ],
 };
diff --git a/docs/app/components/[...slug]/_components/AppearanceTable.tsx b/docs/ui/AppearanceTable.tsx
similarity index 97%
rename from docs/app/components/[...slug]/_components/AppearanceTable.tsx
rename to docs/ui/AppearanceTable.tsx
index 0f1fd9af5..7ebae79ad 100644
--- a/docs/app/components/[...slug]/_components/AppearanceTable.tsx
+++ b/docs/ui/AppearanceTable.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import { Card, Inline, Table, Text, Theme, ConfigSchema } from '@/ui';
+import { useThemeSwitch } from './ThemeSwitch';
 import { BlankCanvas } from './icons';
-import { useThemeSwitch } from '../../../_components/ThemeSwitch';
 
 export interface AppearanceTableProps {
   component: keyof Theme['components'];
diff --git a/docs/ui/ComponentDemo.tsx b/docs/ui/ComponentDemo.tsx
index ec62f5bf6..f0be45ffa 100644
--- a/docs/ui/ComponentDemo.tsx
+++ b/docs/ui/ComponentDemo.tsx
@@ -3,7 +3,7 @@ import { Card, MarigoldProvider, Tabs } from './marigold';
 import { type Theme } from '@marigold/system';
 
 import { registry } from '@/registry';
-import { useThemeSwitch } from '@/app/_components/ThemeSwitch';
+import { useThemeSwitch } from '@/ui/ThemeSwitch';
 
 // Props
 // ---------------
diff --git a/docs/app/_components/ThemeSwitch.tsx b/docs/ui/ThemeSwitch.tsx
similarity index 100%
rename from docs/app/_components/ThemeSwitch.tsx
rename to docs/ui/ThemeSwitch.tsx
diff --git a/docs/app/components/[...slug]/_components/icons/BlankCanvas.tsx b/docs/ui/icons/BlankCanvas.tsx
similarity index 100%
rename from docs/app/components/[...slug]/_components/icons/BlankCanvas.tsx
rename to docs/ui/icons/BlankCanvas.tsx
diff --git a/docs/app/components/[...slug]/_components/icons/index.ts b/docs/ui/icons/index.ts
similarity index 100%
rename from docs/app/components/[...slug]/_components/icons/index.ts
rename to docs/ui/icons/index.ts
diff --git a/docs/ui/mdx.tsx b/docs/ui/mdx.tsx
index 779c30f85..16e6db93c 100644
--- a/docs/ui/mdx.tsx
+++ b/docs/ui/mdx.tsx
@@ -3,12 +3,13 @@
 import { HTMLAttributes } from 'react';
 import { useMDXComponent } from 'next-contentlayer/hooks';
 
-import { IconList } from '@/app/components';
+import { IconList } from '@/ui/IconList';
 
 import { Headline, Message, Link, Text } from './';
+import { AppearanceTable } from './AppearanceTable';
+import { PropsTable } from './PropsTable';
 import { ComponentDemo } from './ComponentDemo';
 import { CopyButton } from './CopyButton';
-import * as DocComponents from '@/app/components/[...slug]/_components';
 
 // Typography
 // ---------------
@@ -66,7 +67,6 @@ const typography = {
 // MDX Components
 // ---------------
 const components = {
-  ...DocComponents,
   ...typography,
   // TODO: wrap Marigold's Image/Link with next's image/link component
   ComponentDemo,
@@ -74,6 +74,8 @@ const components = {
   Message,
   Text,
   IconList,
+  AppearanceTable,
+  PropsTable,
 };
 
 // Props
@@ -87,6 +89,5 @@ interface MdxProps {
 // ---------------
 export const Mdx = ({ title, code }: MdxProps) => {
   const Component = useMDXComponent(code, { title: title });
-  // @ts-expect-error (Marigold exports includes some hooks)
   return <Component components={components} />;
 };


Test patch:
diff --git a/docs/app/components/IconList.tsx b/docs/ui/IconList.tsx
similarity index 100%
rename from docs/app/components/IconList.tsx
rename to docs/ui/IconList.tsx
diff --git a/docs/app/components/[...slug]/_components/PropsTable.tsx b/docs/ui/PropsTable.tsx
similarity index 100%
rename from docs/app/components/[...slug]/_components/PropsTable.tsx
rename to docs/ui/PropsTable.tsx
diff --git a/docs/app/components/Rectangle.tsx b/docs/ui/Rectangle.tsx
similarity index 100%
rename from docs/app/components/Rectangle.tsx
rename to docs/ui/Rectangle.tsx
diff --git a/docs/app/components/Squircle.tsx b/docs/ui/Squircle.tsx
similarity index 100%
rename from docs/app/components/Squircle.tsx
rename to docs/ui/Squircle.tsx
diff --git a/docs/app/_components/ThemeSwitch.test.tsx b/docs/ui/ThemeSwitch.test.tsx
similarity index 94%
rename from docs/app/_components/ThemeSwitch.test.tsx
rename to docs/ui/ThemeSwitch.test.tsx
index beffd17e5..3414e2767 100644
--- a/docs/app/_components/ThemeSwitch.test.tsx
+++ b/docs/ui/ThemeSwitch.test.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { act, renderHook } from '@testing-library/react-hooks';
-import { b2bTheme, coreTheme } from '../../theme';
+import { b2bTheme, coreTheme } from '../theme';
 import { MarigoldThemeSwitch, useThemeSwitch } from './ThemeSwitch';
 
 const themes = {