From 950437033972d506c034a039045a87083277bcc9 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Sun, 21 Apr 2024 22:35:52 +0700
Subject: [PATCH] fix(layout): add v5 to layout

---
 .storybook/preview.tsx                                    | 2 +-
 .../layout-app-analytics/LayoutAppAnalytics.stories.tsx   | 6 ++----
 blocks/layout-app-analytics/LayoutAppAnalytics.tsx        | 2 +-
 blocks/layout-app-analytics/usage.mdx                     | 2 +-
 .../layout-app-messenger/LayoutAppMessenger.stories.tsx   | 6 ++----
 blocks/layout-app-messenger/LayoutAppMessenger.tsx        | 2 +-
 blocks/layout-app-messenger/usage.mdx                     | 2 +-
 .../LayoutAppReactLegacy.stories.tsx                      | 6 ++----
 blocks/layout-app-reactLegacy/LayoutAppReactLegacy.tsx    | 2 +-
 blocks/layout-app-reactLegacy/usage.mdx                   | 2 +-
 .../LayoutAppShoppingCart.stories.tsx                     | 6 ++----
 blocks/layout-app-shoppingCart/LayoutAppShoppingCart.tsx  | 2 +-
 blocks/layout-app-shoppingCart/usage.mdx                  | 2 +-
 .../{layout-core => layout-core-v5}/Content/Content.tsx   | 0
 .../Content/SidebarContent.tsx                            | 0
 .../Content/getContentSxProps.test.ts                     | 0
 .../Content/getContentSxProps.ts                          | 0
 .../EdgeSidebar/EdgeOffset.tsx                            | 0
 .../EdgeSidebar/EdgeSidebar.tsx                           | 0
 .../EdgeSidebar/EdgeSidebarBuilder.test.ts                | 0
 .../EdgeSidebar/EdgeSidebarBuilder.ts                     | 0
 .../EdgeSidebar/EdgeTrigger.tsx                           | 0
 .../EdgeSidebar/getEdgeOffsetSxProps.test.ts              | 0
 .../EdgeSidebar/getEdgeOffsetSxProps.ts                   | 0
 .../EdgeSidebar/useEdgeSidebar.test.tsx                   | 0
 .../EdgeSidebar/useEdgeSidebar.ts                         | 0
 blocks/{layout-core => layout-core-v5}/Footer/Footer.tsx  | 0
 .../Fullscreen/Fullscreen.tsx                             | 0
 .../Fullscreen/FullscreenContext.tsx                      | 0
 blocks/{layout-core => layout-core-v5}/Header/Header.tsx  | 0
 .../Header/HeaderBuilder.test.ts                          | 0
 .../Header/HeaderBuilder.ts                               | 0
 .../InsetSidebar/InsetAvoidingView.tsx                    | 0
 .../InsetSidebar/InsetContainer.tsx                       | 0
 .../InsetSidebar/InsetOffset.tsx                          | 0
 .../InsetSidebar/InsetSidebar.tsx                         | 0
 .../InsetSidebar/InsetSidebarBuilder.test.ts              | 0
 .../InsetSidebar/InsetSidebarBuilder.ts                   | 0
 .../Margin/MarginModel.test.ts                            | 0
 .../{layout-core => layout-core-v5}/Margin/MarginModel.ts | 0
 .../MultiHeaders/HeadersCompiler.test.ts                  | 0
 .../MultiHeaders/HeadersCompiler.ts                       | 0
 .../MultiHeaders/StackedHeaders.test.ts                   | 0
 .../MultiHeaders/StackedHeaders.ts                        | 0
 blocks/{layout-core => layout-core-v5}/Root/Root.test.tsx | 0
 blocks/{layout-core => layout-core-v5}/Root/Root.tsx      | 0
 .../Width/WidthModel.test.ts                              | 0
 .../{layout-core => layout-core-v5}/Width/WidthModel.ts   | 0
 blocks/{layout-core => layout-core-v5}/WindowContext.tsx  | 0
 .../hooks/useInsetHeaderMagnet.ts                         | 0
 blocks/{layout-core => layout-core-v5}/hooks/useScreen.ts | 0
 .../{layout-core => layout-core-v5}/hooks/useScrollY.ts   | 0
 .../hooks/useSidebarAutoCollapse.test.ts                  | 0
 .../hooks/useSidebarAutoCollapse.ts                       | 0
 blocks/{layout-core => layout-core-v5}/index.ts           | 0
 .../presets/contentBased.test.ts                          | 0
 .../presets/contentBased.ts                               | 0
 .../{layout-core => layout-core-v5}/presets/cozy.test.ts  | 0
 blocks/{layout-core => layout-core-v5}/presets/cozy.ts    | 0
 .../{layout-core => layout-core-v5}/presets/fixed.test.ts | 0
 blocks/{layout-core => layout-core-v5}/presets/fixed.ts   | 0
 .../presets/standard.test.ts                              | 0
 .../{layout-core => layout-core-v5}/presets/standard.ts   | 0
 .../shared/ResponsiveBuilder.test.ts                      | 0
 .../shared/ResponsiveBuilder.ts                           | 0
 blocks/{layout-core => layout-core-v5}/theme-augment.ts   | 0
 blocks/{layout-core => layout-core-v5}/utils/calc.ts      | 0
 .../utils/combineBreakpoints.test.ts                      | 0
 .../utils/combineBreakpoints.ts                           | 0
 blocks/{layout-core => layout-core-v5}/utils/constant.ts  | 0
 .../utils/createSxResult.test.ts                          | 0
 .../utils/createSxResult.ts                               | 0
 .../utils/flattenResponsive.test.ts                       | 0
 .../utils/flattenResponsive.ts                            | 0
 blocks/{layout-core => layout-core-v5}/utils/isNil.ts     | 0
 .../{layout-core => layout-core-v5}/utils/isNilOrEmpty.ts | 0
 .../utils/mapWidthToScreen.test.ts                        | 0
 .../utils/mapWidthToScreen.ts                             | 0
 .../utils/muiBreakpoints.ts                               | 0
 .../utils/pickNearestBreakpoint.test.ts                   | 0
 .../utils/pickNearestBreakpoint.ts                        | 0
 .../utils/toValidCssValue.ts                              | 0
 blocks/{layout-core => layout-core-v5}/utils/types.ts     | 0
 .../LayoutExampleControlEdgeSidebar.stories.tsx           | 2 +-
 .../LayoutExampleControlEdgeSidebar.tsx                   | 2 +-
 blocks/layout-example-controlEdgeSidebar/usage.mdx        | 2 +-
 .../LayoutExampleGlobalTheme.stories.tsx                  | 2 +-
 .../LayoutExampleGlobalTheme.tsx                          | 2 +-
 blocks/layout-example-globalTheme/usage.mdx               | 2 +-
 .../LayoutExampleInsetSidebarPosition.stories.tsx         | 6 ++----
 .../LayoutExampleInsetSidebarPosition.tsx                 | 2 +-
 blocks/layout-example-insetSidebarPosition/usage.mdx      | 2 +-
 .../LayoutExampleMultipleHeaders.stories.tsx              | 6 ++----
 .../LayoutExampleMultipleHeaders.tsx                      | 2 +-
 blocks/layout-example-multipleHeaders/usage.mdx           | 2 +-
 .../LayoutExampleRightEdgeSidebar.stories.tsx             | 6 ++----
 .../LayoutExampleRightEdgeSidebar.tsx                     | 2 +-
 blocks/layout-example-rightEdgeSidebar/usage.mdx          | 2 +-
 blocks/layout-example-rtl/LayoutExampleRtl.stories.tsx    | 2 +-
 blocks/layout-example-rtl/LayoutExampleRtl.tsx            | 2 +-
 blocks/layout-example-rtl/usage.mdx                       | 2 +-
 .../LayoutPresetContentBased.stories.tsx                  | 2 +-
 .../LayoutPresetContentBased.tsx                          | 2 +-
 blocks/layout-preset-contentBased/usage.mdx               | 2 +-
 blocks/layout-preset-cozy/LayoutPresetCozy.stories.tsx    | 2 +-
 blocks/layout-preset-cozy/LayoutPresetCozy.tsx            | 2 +-
 blocks/layout-preset-cozy/usage.mdx                       | 2 +-
 blocks/layout-preset-fixed/LayoutPresetFixed.stories.tsx  | 2 +-
 blocks/layout-preset-fixed/LayoutPresetFixed.tsx          | 2 +-
 blocks/layout-preset-fixed/usage.mdx                      | 2 +-
 .../LayoutPresetStandard.stories.tsx                      | 2 +-
 blocks/layout-preset-standard/LayoutPresetStandard.tsx    | 2 +-
 blocks/layout-preset-standard/usage.mdx                   | 2 +-
 docs/{layout => layout-v5}/Installation.mdx               | 2 +-
 .../configuration/edgeSidebar-config.mdx                  | 6 +++---
 .../{layout => layout-v5}/configuration/header-config.mdx | 8 ++++----
 .../configuration/insetSidebar-config.mdx                 | 6 +++---
 .../configuration/overall-config.mdx                      | 2 +-
 docs/{layout => layout-v5}/core-concept.mdx               | 2 +-
 docs/{layout => layout-v5}/feature/auto-collapse.mdx      | 2 +-
 docs/{layout => layout-v5}/feature/header-magnet.mdx      | 2 +-
 docs/{layout => layout-v5}/feature/multiple-headers.mdx   | 2 +-
 .../{layout => layout-v5}/feature/persistent-behavior.mdx | 2 +-
 docs/{layout => layout-v5}/feature/right-to-left.mdx      | 2 +-
 .../feature/uncollapsed-on-hover.mdx                      | 4 ++--
 docs/{layout => layout-v5}/layout-intro.mdx               | 2 +-
 docs/{layout => layout-v5}/migration-v5.mdx               | 2 +-
 docs/{layout => layout-v5}/starter-templates.mdx          | 2 +-
 docs/{layout => layout-v5}/tutorial/blog-layout.mdx       | 2 +-
 docs/{layout => layout-v5}/tutorial/dashboard-layout.mdx  | 2 +-
 130 files changed, 75 insertions(+), 89 deletions(-)
 rename blocks/{layout-core => layout-core-v5}/Content/Content.tsx (100%)
 rename blocks/{layout-core => layout-core-v5}/Content/SidebarContent.tsx (100%)
 rename blocks/{layout-core => layout-core-v5}/Content/getContentSxProps.test.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/Content/getContentSxProps.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/EdgeSidebar/EdgeOffset.tsx (100%)
 rename blocks/{layout-core => layout-core-v5}/EdgeSidebar/EdgeSidebar.tsx (100%)
 rename blocks/{layout-core => layout-core-v5}/EdgeSidebar/EdgeSidebarBuilder.test.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/EdgeSidebar/EdgeSidebarBuilder.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/EdgeSidebar/EdgeTrigger.tsx (100%)
 rename blocks/{layout-core => layout-core-v5}/EdgeSidebar/getEdgeOffsetSxProps.test.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/EdgeSidebar/getEdgeOffsetSxProps.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/EdgeSidebar/useEdgeSidebar.test.tsx (100%)
 rename blocks/{layout-core => layout-core-v5}/EdgeSidebar/useEdgeSidebar.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/Footer/Footer.tsx (100%)
 rename blocks/{layout-core => layout-core-v5}/Fullscreen/Fullscreen.tsx (100%)
 rename blocks/{layout-core => layout-core-v5}/Fullscreen/FullscreenContext.tsx (100%)
 rename blocks/{layout-core => layout-core-v5}/Header/Header.tsx (100%)
 rename blocks/{layout-core => layout-core-v5}/Header/HeaderBuilder.test.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/Header/HeaderBuilder.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/InsetSidebar/InsetAvoidingView.tsx (100%)
 rename blocks/{layout-core => layout-core-v5}/InsetSidebar/InsetContainer.tsx (100%)
 rename blocks/{layout-core => layout-core-v5}/InsetSidebar/InsetOffset.tsx (100%)
 rename blocks/{layout-core => layout-core-v5}/InsetSidebar/InsetSidebar.tsx (100%)
 rename blocks/{layout-core => layout-core-v5}/InsetSidebar/InsetSidebarBuilder.test.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/InsetSidebar/InsetSidebarBuilder.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/Margin/MarginModel.test.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/Margin/MarginModel.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/MultiHeaders/HeadersCompiler.test.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/MultiHeaders/HeadersCompiler.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/MultiHeaders/StackedHeaders.test.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/MultiHeaders/StackedHeaders.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/Root/Root.test.tsx (100%)
 rename blocks/{layout-core => layout-core-v5}/Root/Root.tsx (100%)
 rename blocks/{layout-core => layout-core-v5}/Width/WidthModel.test.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/Width/WidthModel.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/WindowContext.tsx (100%)
 rename blocks/{layout-core => layout-core-v5}/hooks/useInsetHeaderMagnet.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/hooks/useScreen.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/hooks/useScrollY.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/hooks/useSidebarAutoCollapse.test.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/hooks/useSidebarAutoCollapse.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/index.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/presets/contentBased.test.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/presets/contentBased.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/presets/cozy.test.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/presets/cozy.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/presets/fixed.test.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/presets/fixed.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/presets/standard.test.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/presets/standard.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/shared/ResponsiveBuilder.test.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/shared/ResponsiveBuilder.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/theme-augment.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/utils/calc.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/utils/combineBreakpoints.test.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/utils/combineBreakpoints.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/utils/constant.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/utils/createSxResult.test.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/utils/createSxResult.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/utils/flattenResponsive.test.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/utils/flattenResponsive.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/utils/isNil.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/utils/isNilOrEmpty.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/utils/mapWidthToScreen.test.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/utils/mapWidthToScreen.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/utils/muiBreakpoints.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/utils/pickNearestBreakpoint.test.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/utils/pickNearestBreakpoint.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/utils/toValidCssValue.ts (100%)
 rename blocks/{layout-core => layout-core-v5}/utils/types.ts (100%)
 rename docs/{layout => layout-v5}/Installation.mdx (96%)
 rename docs/{layout => layout-v5}/configuration/edgeSidebar-config.mdx (94%)
 rename docs/{layout => layout-v5}/configuration/header-config.mdx (84%)
 rename docs/{layout => layout-v5}/configuration/insetSidebar-config.mdx (87%)
 rename docs/{layout => layout-v5}/configuration/overall-config.mdx (96%)
 rename docs/{layout => layout-v5}/core-concept.mdx (97%)
 rename docs/{layout => layout-v5}/feature/auto-collapse.mdx (97%)
 rename docs/{layout => layout-v5}/feature/header-magnet.mdx (96%)
 rename docs/{layout => layout-v5}/feature/multiple-headers.mdx (98%)
 rename docs/{layout => layout-v5}/feature/persistent-behavior.mdx (97%)
 rename docs/{layout => layout-v5}/feature/right-to-left.mdx (97%)
 rename docs/{layout => layout-v5}/feature/uncollapsed-on-hover.mdx (90%)
 rename docs/{layout => layout-v5}/layout-intro.mdx (99%)
 rename docs/{layout => layout-v5}/migration-v5.mdx (99%)
 rename docs/{layout => layout-v5}/starter-templates.mdx (98%)
 rename docs/{layout => layout-v5}/tutorial/blog-layout.mdx (99%)
 rename docs/{layout => layout-v5}/tutorial/dashboard-layout.mdx (99%)

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index a3e79321f..4e6dae48d 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -35,7 +35,7 @@ const preview: Preview = {
     options: {
       storySort: {
         order: [
-          "Layout",
+          "Layout v5",
           [
             "Introduction",
             "Installation",
diff --git a/blocks/layout-app-analytics/LayoutAppAnalytics.stories.tsx b/blocks/layout-app-analytics/LayoutAppAnalytics.stories.tsx
index fb39c7d20..5ec35a436 100644
--- a/blocks/layout-app-analytics/LayoutAppAnalytics.stories.tsx
+++ b/blocks/layout-app-analytics/LayoutAppAnalytics.stories.tsx
@@ -2,11 +2,11 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import googleFont from "../../.storybook/decorators/googleFont";
 import storyDialog from "../../.storybook/decorators/storyDialog";
-import Usage from "./usage.mdx";
 import { LayoutAppAnalytics } from "./index";
+import Usage from "./usage.mdx";
 
 const meta = {
-  title: "Layout/App/Analytics",
+  title: "Layout v5/App/Analytics",
   component: LayoutAppAnalytics,
   parameters: {
     layout: "fullscreen",
@@ -21,5 +21,3 @@ type Story = StoryObj<typeof meta>;
 export const Analytics: Story = {
   render: () => <LayoutAppAnalytics />,
 };
-
-
diff --git a/blocks/layout-app-analytics/LayoutAppAnalytics.tsx b/blocks/layout-app-analytics/LayoutAppAnalytics.tsx
index a896b1883..67893d3a1 100644
--- a/blocks/layout-app-analytics/LayoutAppAnalytics.tsx
+++ b/blocks/layout-app-analytics/LayoutAppAnalytics.tsx
@@ -19,7 +19,7 @@ import {
   Root,
   SidebarContent,
   Subheader,
-} from "../layout-core";
+} from "../layout-core-v5";
 import {
   IconNavMockup,
   LinkNavMockup,
diff --git a/blocks/layout-app-analytics/usage.mdx b/blocks/layout-app-analytics/usage.mdx
index bfd5e314b..7a260c994 100644
--- a/blocks/layout-app-analytics/usage.mdx
+++ b/blocks/layout-app-analytics/usage.mdx
@@ -1,7 +1,7 @@
 import { Meta, Source } from "@storybook/blocks";
 import raw from "./LayoutAppAnalytics?raw";
 
-<Meta title="Layout/App/Analytics" />
+<Meta title="Layout v5/App/Analytics" />
 
 ## CLI
 
diff --git a/blocks/layout-app-messenger/LayoutAppMessenger.stories.tsx b/blocks/layout-app-messenger/LayoutAppMessenger.stories.tsx
index e93568845..b95e895d4 100644
--- a/blocks/layout-app-messenger/LayoutAppMessenger.stories.tsx
+++ b/blocks/layout-app-messenger/LayoutAppMessenger.stories.tsx
@@ -2,11 +2,11 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import googleFont from "../../.storybook/decorators/googleFont";
 import storyDialog from "../../.storybook/decorators/storyDialog";
-import Usage from "./usage.mdx";
 import { LayoutAppMessenger } from "./index";
+import Usage from "./usage.mdx";
 
 const meta = {
-  title: "Layout/App/Messenger",
+  title: "Layout v5/App/Messenger",
   component: LayoutAppMessenger,
   parameters: {
     layout: "fullscreen",
@@ -21,5 +21,3 @@ type Story = StoryObj<typeof meta>;
 export const Messenger: Story = {
   render: () => <LayoutAppMessenger />,
 };
-
-
diff --git a/blocks/layout-app-messenger/LayoutAppMessenger.tsx b/blocks/layout-app-messenger/LayoutAppMessenger.tsx
index 842fdb483..fc0149f9b 100644
--- a/blocks/layout-app-messenger/LayoutAppMessenger.tsx
+++ b/blocks/layout-app-messenger/LayoutAppMessenger.tsx
@@ -21,7 +21,7 @@ import {
   InsetContainer,
   InsetSidebar,
   Root,
-} from "../layout-core";
+} from "../layout-core-v5";
 import {
   ChatBar,
   ChatDialog,
diff --git a/blocks/layout-app-messenger/usage.mdx b/blocks/layout-app-messenger/usage.mdx
index 95d531e0a..68fffe352 100644
--- a/blocks/layout-app-messenger/usage.mdx
+++ b/blocks/layout-app-messenger/usage.mdx
@@ -1,7 +1,7 @@
 import { Meta, Source } from "@storybook/blocks";
 import raw from "./LayoutAppMessenger?raw";
 
-<Meta title="Layout/App/Messenger" />
+<Meta title="Layout v5/App/Messenger" />
 
 ## CLI
 
diff --git a/blocks/layout-app-reactLegacy/LayoutAppReactLegacy.stories.tsx b/blocks/layout-app-reactLegacy/LayoutAppReactLegacy.stories.tsx
index 349848294..664864e82 100644
--- a/blocks/layout-app-reactLegacy/LayoutAppReactLegacy.stories.tsx
+++ b/blocks/layout-app-reactLegacy/LayoutAppReactLegacy.stories.tsx
@@ -2,11 +2,11 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import googleFont from "../../.storybook/decorators/googleFont";
 import storyDialog from "../../.storybook/decorators/storyDialog";
-import Usage from "./usage.mdx";
 import { LayoutAppReactLegacy } from "./index";
+import Usage from "./usage.mdx";
 
 const meta = {
-  title: "Layout/App/ReactLegacy",
+  title: "Layout v5/App/ReactLegacy",
   component: LayoutAppReactLegacy,
   parameters: {
     layout: "fullscreen",
@@ -21,5 +21,3 @@ type Story = StoryObj<typeof meta>;
 export const ReactLegacy: Story = {
   render: () => <LayoutAppReactLegacy />,
 };
-
-
diff --git a/blocks/layout-app-reactLegacy/LayoutAppReactLegacy.tsx b/blocks/layout-app-reactLegacy/LayoutAppReactLegacy.tsx
index f2d043ec1..518420757 100644
--- a/blocks/layout-app-reactLegacy/LayoutAppReactLegacy.tsx
+++ b/blocks/layout-app-reactLegacy/LayoutAppReactLegacy.tsx
@@ -23,7 +23,7 @@ import {
   InsetContainer,
   InsetSidebar,
   Root,
-} from "../layout-core";
+} from "../layout-core-v5";
 // @ts-ignore
 import { ReactContent, ReactHeader, ReactNextArticle } from "./components";
 
diff --git a/blocks/layout-app-reactLegacy/usage.mdx b/blocks/layout-app-reactLegacy/usage.mdx
index 07435334b..f787080bb 100644
--- a/blocks/layout-app-reactLegacy/usage.mdx
+++ b/blocks/layout-app-reactLegacy/usage.mdx
@@ -1,7 +1,7 @@
 import { Meta, Source } from "@storybook/blocks";
 import raw from "./LayoutAppReactLegacy?raw";
 
-<Meta title="Layout/App/ReactLegacy" />
+<Meta title="Layout v5/App/ReactLegacy" />
 
 ## CLI
 
diff --git a/blocks/layout-app-shoppingCart/LayoutAppShoppingCart.stories.tsx b/blocks/layout-app-shoppingCart/LayoutAppShoppingCart.stories.tsx
index eb1966f1c..9485cd4b7 100644
--- a/blocks/layout-app-shoppingCart/LayoutAppShoppingCart.stories.tsx
+++ b/blocks/layout-app-shoppingCart/LayoutAppShoppingCart.stories.tsx
@@ -2,11 +2,11 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import googleFont from "../../.storybook/decorators/googleFont";
 import storyDialog from "../../.storybook/decorators/storyDialog";
-import Usage from "./usage.mdx";
 import { LayoutAppShoppingCart } from "./index";
+import Usage from "./usage.mdx";
 
 const meta = {
-  title: "Layout/App/ShoppingCart",
+  title: "Layout v5/App/ShoppingCart",
   component: LayoutAppShoppingCart,
   parameters: {
     layout: "fullscreen",
@@ -21,5 +21,3 @@ type Story = StoryObj<typeof meta>;
 export const ShoppingCart: Story = {
   render: () => <LayoutAppShoppingCart />,
 };
-
-
diff --git a/blocks/layout-app-shoppingCart/LayoutAppShoppingCart.tsx b/blocks/layout-app-shoppingCart/LayoutAppShoppingCart.tsx
index ae5388168..a7ae47c42 100644
--- a/blocks/layout-app-shoppingCart/LayoutAppShoppingCart.tsx
+++ b/blocks/layout-app-shoppingCart/LayoutAppShoppingCart.tsx
@@ -16,7 +16,7 @@ import {
   InsetContainer,
   InsetSidebar,
   Root,
-} from "../layout-core";
+} from "../layout-core-v5";
 import {
   DailyCart,
   DailyCheckout,
diff --git a/blocks/layout-app-shoppingCart/usage.mdx b/blocks/layout-app-shoppingCart/usage.mdx
index 3eda7f370..c12aae5f8 100644
--- a/blocks/layout-app-shoppingCart/usage.mdx
+++ b/blocks/layout-app-shoppingCart/usage.mdx
@@ -1,7 +1,7 @@
 import { Meta, Source } from "@storybook/blocks";
 import raw from "./LayoutAppShoppingCart?raw";
 
-<Meta title="Layout/App/ShoppingCart" />
+<Meta title="Layout v5/App/ShoppingCart" />
 
 ## CLI
 
diff --git a/blocks/layout-core/Content/Content.tsx b/blocks/layout-core-v5/Content/Content.tsx
similarity index 100%
rename from blocks/layout-core/Content/Content.tsx
rename to blocks/layout-core-v5/Content/Content.tsx
diff --git a/blocks/layout-core/Content/SidebarContent.tsx b/blocks/layout-core-v5/Content/SidebarContent.tsx
similarity index 100%
rename from blocks/layout-core/Content/SidebarContent.tsx
rename to blocks/layout-core-v5/Content/SidebarContent.tsx
diff --git a/blocks/layout-core/Content/getContentSxProps.test.ts b/blocks/layout-core-v5/Content/getContentSxProps.test.ts
similarity index 100%
rename from blocks/layout-core/Content/getContentSxProps.test.ts
rename to blocks/layout-core-v5/Content/getContentSxProps.test.ts
diff --git a/blocks/layout-core/Content/getContentSxProps.ts b/blocks/layout-core-v5/Content/getContentSxProps.ts
similarity index 100%
rename from blocks/layout-core/Content/getContentSxProps.ts
rename to blocks/layout-core-v5/Content/getContentSxProps.ts
diff --git a/blocks/layout-core/EdgeSidebar/EdgeOffset.tsx b/blocks/layout-core-v5/EdgeSidebar/EdgeOffset.tsx
similarity index 100%
rename from blocks/layout-core/EdgeSidebar/EdgeOffset.tsx
rename to blocks/layout-core-v5/EdgeSidebar/EdgeOffset.tsx
diff --git a/blocks/layout-core/EdgeSidebar/EdgeSidebar.tsx b/blocks/layout-core-v5/EdgeSidebar/EdgeSidebar.tsx
similarity index 100%
rename from blocks/layout-core/EdgeSidebar/EdgeSidebar.tsx
rename to blocks/layout-core-v5/EdgeSidebar/EdgeSidebar.tsx
diff --git a/blocks/layout-core/EdgeSidebar/EdgeSidebarBuilder.test.ts b/blocks/layout-core-v5/EdgeSidebar/EdgeSidebarBuilder.test.ts
similarity index 100%
rename from blocks/layout-core/EdgeSidebar/EdgeSidebarBuilder.test.ts
rename to blocks/layout-core-v5/EdgeSidebar/EdgeSidebarBuilder.test.ts
diff --git a/blocks/layout-core/EdgeSidebar/EdgeSidebarBuilder.ts b/blocks/layout-core-v5/EdgeSidebar/EdgeSidebarBuilder.ts
similarity index 100%
rename from blocks/layout-core/EdgeSidebar/EdgeSidebarBuilder.ts
rename to blocks/layout-core-v5/EdgeSidebar/EdgeSidebarBuilder.ts
diff --git a/blocks/layout-core/EdgeSidebar/EdgeTrigger.tsx b/blocks/layout-core-v5/EdgeSidebar/EdgeTrigger.tsx
similarity index 100%
rename from blocks/layout-core/EdgeSidebar/EdgeTrigger.tsx
rename to blocks/layout-core-v5/EdgeSidebar/EdgeTrigger.tsx
diff --git a/blocks/layout-core/EdgeSidebar/getEdgeOffsetSxProps.test.ts b/blocks/layout-core-v5/EdgeSidebar/getEdgeOffsetSxProps.test.ts
similarity index 100%
rename from blocks/layout-core/EdgeSidebar/getEdgeOffsetSxProps.test.ts
rename to blocks/layout-core-v5/EdgeSidebar/getEdgeOffsetSxProps.test.ts
diff --git a/blocks/layout-core/EdgeSidebar/getEdgeOffsetSxProps.ts b/blocks/layout-core-v5/EdgeSidebar/getEdgeOffsetSxProps.ts
similarity index 100%
rename from blocks/layout-core/EdgeSidebar/getEdgeOffsetSxProps.ts
rename to blocks/layout-core-v5/EdgeSidebar/getEdgeOffsetSxProps.ts
diff --git a/blocks/layout-core/EdgeSidebar/useEdgeSidebar.test.tsx b/blocks/layout-core-v5/EdgeSidebar/useEdgeSidebar.test.tsx
similarity index 100%
rename from blocks/layout-core/EdgeSidebar/useEdgeSidebar.test.tsx
rename to blocks/layout-core-v5/EdgeSidebar/useEdgeSidebar.test.tsx
diff --git a/blocks/layout-core/EdgeSidebar/useEdgeSidebar.ts b/blocks/layout-core-v5/EdgeSidebar/useEdgeSidebar.ts
similarity index 100%
rename from blocks/layout-core/EdgeSidebar/useEdgeSidebar.ts
rename to blocks/layout-core-v5/EdgeSidebar/useEdgeSidebar.ts
diff --git a/blocks/layout-core/Footer/Footer.tsx b/blocks/layout-core-v5/Footer/Footer.tsx
similarity index 100%
rename from blocks/layout-core/Footer/Footer.tsx
rename to blocks/layout-core-v5/Footer/Footer.tsx
diff --git a/blocks/layout-core/Fullscreen/Fullscreen.tsx b/blocks/layout-core-v5/Fullscreen/Fullscreen.tsx
similarity index 100%
rename from blocks/layout-core/Fullscreen/Fullscreen.tsx
rename to blocks/layout-core-v5/Fullscreen/Fullscreen.tsx
diff --git a/blocks/layout-core/Fullscreen/FullscreenContext.tsx b/blocks/layout-core-v5/Fullscreen/FullscreenContext.tsx
similarity index 100%
rename from blocks/layout-core/Fullscreen/FullscreenContext.tsx
rename to blocks/layout-core-v5/Fullscreen/FullscreenContext.tsx
diff --git a/blocks/layout-core/Header/Header.tsx b/blocks/layout-core-v5/Header/Header.tsx
similarity index 100%
rename from blocks/layout-core/Header/Header.tsx
rename to blocks/layout-core-v5/Header/Header.tsx
diff --git a/blocks/layout-core/Header/HeaderBuilder.test.ts b/blocks/layout-core-v5/Header/HeaderBuilder.test.ts
similarity index 100%
rename from blocks/layout-core/Header/HeaderBuilder.test.ts
rename to blocks/layout-core-v5/Header/HeaderBuilder.test.ts
diff --git a/blocks/layout-core/Header/HeaderBuilder.ts b/blocks/layout-core-v5/Header/HeaderBuilder.ts
similarity index 100%
rename from blocks/layout-core/Header/HeaderBuilder.ts
rename to blocks/layout-core-v5/Header/HeaderBuilder.ts
diff --git a/blocks/layout-core/InsetSidebar/InsetAvoidingView.tsx b/blocks/layout-core-v5/InsetSidebar/InsetAvoidingView.tsx
similarity index 100%
rename from blocks/layout-core/InsetSidebar/InsetAvoidingView.tsx
rename to blocks/layout-core-v5/InsetSidebar/InsetAvoidingView.tsx
diff --git a/blocks/layout-core/InsetSidebar/InsetContainer.tsx b/blocks/layout-core-v5/InsetSidebar/InsetContainer.tsx
similarity index 100%
rename from blocks/layout-core/InsetSidebar/InsetContainer.tsx
rename to blocks/layout-core-v5/InsetSidebar/InsetContainer.tsx
diff --git a/blocks/layout-core/InsetSidebar/InsetOffset.tsx b/blocks/layout-core-v5/InsetSidebar/InsetOffset.tsx
similarity index 100%
rename from blocks/layout-core/InsetSidebar/InsetOffset.tsx
rename to blocks/layout-core-v5/InsetSidebar/InsetOffset.tsx
diff --git a/blocks/layout-core/InsetSidebar/InsetSidebar.tsx b/blocks/layout-core-v5/InsetSidebar/InsetSidebar.tsx
similarity index 100%
rename from blocks/layout-core/InsetSidebar/InsetSidebar.tsx
rename to blocks/layout-core-v5/InsetSidebar/InsetSidebar.tsx
diff --git a/blocks/layout-core/InsetSidebar/InsetSidebarBuilder.test.ts b/blocks/layout-core-v5/InsetSidebar/InsetSidebarBuilder.test.ts
similarity index 100%
rename from blocks/layout-core/InsetSidebar/InsetSidebarBuilder.test.ts
rename to blocks/layout-core-v5/InsetSidebar/InsetSidebarBuilder.test.ts
diff --git a/blocks/layout-core/InsetSidebar/InsetSidebarBuilder.ts b/blocks/layout-core-v5/InsetSidebar/InsetSidebarBuilder.ts
similarity index 100%
rename from blocks/layout-core/InsetSidebar/InsetSidebarBuilder.ts
rename to blocks/layout-core-v5/InsetSidebar/InsetSidebarBuilder.ts
diff --git a/blocks/layout-core/Margin/MarginModel.test.ts b/blocks/layout-core-v5/Margin/MarginModel.test.ts
similarity index 100%
rename from blocks/layout-core/Margin/MarginModel.test.ts
rename to blocks/layout-core-v5/Margin/MarginModel.test.ts
diff --git a/blocks/layout-core/Margin/MarginModel.ts b/blocks/layout-core-v5/Margin/MarginModel.ts
similarity index 100%
rename from blocks/layout-core/Margin/MarginModel.ts
rename to blocks/layout-core-v5/Margin/MarginModel.ts
diff --git a/blocks/layout-core/MultiHeaders/HeadersCompiler.test.ts b/blocks/layout-core-v5/MultiHeaders/HeadersCompiler.test.ts
similarity index 100%
rename from blocks/layout-core/MultiHeaders/HeadersCompiler.test.ts
rename to blocks/layout-core-v5/MultiHeaders/HeadersCompiler.test.ts
diff --git a/blocks/layout-core/MultiHeaders/HeadersCompiler.ts b/blocks/layout-core-v5/MultiHeaders/HeadersCompiler.ts
similarity index 100%
rename from blocks/layout-core/MultiHeaders/HeadersCompiler.ts
rename to blocks/layout-core-v5/MultiHeaders/HeadersCompiler.ts
diff --git a/blocks/layout-core/MultiHeaders/StackedHeaders.test.ts b/blocks/layout-core-v5/MultiHeaders/StackedHeaders.test.ts
similarity index 100%
rename from blocks/layout-core/MultiHeaders/StackedHeaders.test.ts
rename to blocks/layout-core-v5/MultiHeaders/StackedHeaders.test.ts
diff --git a/blocks/layout-core/MultiHeaders/StackedHeaders.ts b/blocks/layout-core-v5/MultiHeaders/StackedHeaders.ts
similarity index 100%
rename from blocks/layout-core/MultiHeaders/StackedHeaders.ts
rename to blocks/layout-core-v5/MultiHeaders/StackedHeaders.ts
diff --git a/blocks/layout-core/Root/Root.test.tsx b/blocks/layout-core-v5/Root/Root.test.tsx
similarity index 100%
rename from blocks/layout-core/Root/Root.test.tsx
rename to blocks/layout-core-v5/Root/Root.test.tsx
diff --git a/blocks/layout-core/Root/Root.tsx b/blocks/layout-core-v5/Root/Root.tsx
similarity index 100%
rename from blocks/layout-core/Root/Root.tsx
rename to blocks/layout-core-v5/Root/Root.tsx
diff --git a/blocks/layout-core/Width/WidthModel.test.ts b/blocks/layout-core-v5/Width/WidthModel.test.ts
similarity index 100%
rename from blocks/layout-core/Width/WidthModel.test.ts
rename to blocks/layout-core-v5/Width/WidthModel.test.ts
diff --git a/blocks/layout-core/Width/WidthModel.ts b/blocks/layout-core-v5/Width/WidthModel.ts
similarity index 100%
rename from blocks/layout-core/Width/WidthModel.ts
rename to blocks/layout-core-v5/Width/WidthModel.ts
diff --git a/blocks/layout-core/WindowContext.tsx b/blocks/layout-core-v5/WindowContext.tsx
similarity index 100%
rename from blocks/layout-core/WindowContext.tsx
rename to blocks/layout-core-v5/WindowContext.tsx
diff --git a/blocks/layout-core/hooks/useInsetHeaderMagnet.ts b/blocks/layout-core-v5/hooks/useInsetHeaderMagnet.ts
similarity index 100%
rename from blocks/layout-core/hooks/useInsetHeaderMagnet.ts
rename to blocks/layout-core-v5/hooks/useInsetHeaderMagnet.ts
diff --git a/blocks/layout-core/hooks/useScreen.ts b/blocks/layout-core-v5/hooks/useScreen.ts
similarity index 100%
rename from blocks/layout-core/hooks/useScreen.ts
rename to blocks/layout-core-v5/hooks/useScreen.ts
diff --git a/blocks/layout-core/hooks/useScrollY.ts b/blocks/layout-core-v5/hooks/useScrollY.ts
similarity index 100%
rename from blocks/layout-core/hooks/useScrollY.ts
rename to blocks/layout-core-v5/hooks/useScrollY.ts
diff --git a/blocks/layout-core/hooks/useSidebarAutoCollapse.test.ts b/blocks/layout-core-v5/hooks/useSidebarAutoCollapse.test.ts
similarity index 100%
rename from blocks/layout-core/hooks/useSidebarAutoCollapse.test.ts
rename to blocks/layout-core-v5/hooks/useSidebarAutoCollapse.test.ts
diff --git a/blocks/layout-core/hooks/useSidebarAutoCollapse.ts b/blocks/layout-core-v5/hooks/useSidebarAutoCollapse.ts
similarity index 100%
rename from blocks/layout-core/hooks/useSidebarAutoCollapse.ts
rename to blocks/layout-core-v5/hooks/useSidebarAutoCollapse.ts
diff --git a/blocks/layout-core/index.ts b/blocks/layout-core-v5/index.ts
similarity index 100%
rename from blocks/layout-core/index.ts
rename to blocks/layout-core-v5/index.ts
diff --git a/blocks/layout-core/presets/contentBased.test.ts b/blocks/layout-core-v5/presets/contentBased.test.ts
similarity index 100%
rename from blocks/layout-core/presets/contentBased.test.ts
rename to blocks/layout-core-v5/presets/contentBased.test.ts
diff --git a/blocks/layout-core/presets/contentBased.ts b/blocks/layout-core-v5/presets/contentBased.ts
similarity index 100%
rename from blocks/layout-core/presets/contentBased.ts
rename to blocks/layout-core-v5/presets/contentBased.ts
diff --git a/blocks/layout-core/presets/cozy.test.ts b/blocks/layout-core-v5/presets/cozy.test.ts
similarity index 100%
rename from blocks/layout-core/presets/cozy.test.ts
rename to blocks/layout-core-v5/presets/cozy.test.ts
diff --git a/blocks/layout-core/presets/cozy.ts b/blocks/layout-core-v5/presets/cozy.ts
similarity index 100%
rename from blocks/layout-core/presets/cozy.ts
rename to blocks/layout-core-v5/presets/cozy.ts
diff --git a/blocks/layout-core/presets/fixed.test.ts b/blocks/layout-core-v5/presets/fixed.test.ts
similarity index 100%
rename from blocks/layout-core/presets/fixed.test.ts
rename to blocks/layout-core-v5/presets/fixed.test.ts
diff --git a/blocks/layout-core/presets/fixed.ts b/blocks/layout-core-v5/presets/fixed.ts
similarity index 100%
rename from blocks/layout-core/presets/fixed.ts
rename to blocks/layout-core-v5/presets/fixed.ts
diff --git a/blocks/layout-core/presets/standard.test.ts b/blocks/layout-core-v5/presets/standard.test.ts
similarity index 100%
rename from blocks/layout-core/presets/standard.test.ts
rename to blocks/layout-core-v5/presets/standard.test.ts
diff --git a/blocks/layout-core/presets/standard.ts b/blocks/layout-core-v5/presets/standard.ts
similarity index 100%
rename from blocks/layout-core/presets/standard.ts
rename to blocks/layout-core-v5/presets/standard.ts
diff --git a/blocks/layout-core/shared/ResponsiveBuilder.test.ts b/blocks/layout-core-v5/shared/ResponsiveBuilder.test.ts
similarity index 100%
rename from blocks/layout-core/shared/ResponsiveBuilder.test.ts
rename to blocks/layout-core-v5/shared/ResponsiveBuilder.test.ts
diff --git a/blocks/layout-core/shared/ResponsiveBuilder.ts b/blocks/layout-core-v5/shared/ResponsiveBuilder.ts
similarity index 100%
rename from blocks/layout-core/shared/ResponsiveBuilder.ts
rename to blocks/layout-core-v5/shared/ResponsiveBuilder.ts
diff --git a/blocks/layout-core/theme-augment.ts b/blocks/layout-core-v5/theme-augment.ts
similarity index 100%
rename from blocks/layout-core/theme-augment.ts
rename to blocks/layout-core-v5/theme-augment.ts
diff --git a/blocks/layout-core/utils/calc.ts b/blocks/layout-core-v5/utils/calc.ts
similarity index 100%
rename from blocks/layout-core/utils/calc.ts
rename to blocks/layout-core-v5/utils/calc.ts
diff --git a/blocks/layout-core/utils/combineBreakpoints.test.ts b/blocks/layout-core-v5/utils/combineBreakpoints.test.ts
similarity index 100%
rename from blocks/layout-core/utils/combineBreakpoints.test.ts
rename to blocks/layout-core-v5/utils/combineBreakpoints.test.ts
diff --git a/blocks/layout-core/utils/combineBreakpoints.ts b/blocks/layout-core-v5/utils/combineBreakpoints.ts
similarity index 100%
rename from blocks/layout-core/utils/combineBreakpoints.ts
rename to blocks/layout-core-v5/utils/combineBreakpoints.ts
diff --git a/blocks/layout-core/utils/constant.ts b/blocks/layout-core-v5/utils/constant.ts
similarity index 100%
rename from blocks/layout-core/utils/constant.ts
rename to blocks/layout-core-v5/utils/constant.ts
diff --git a/blocks/layout-core/utils/createSxResult.test.ts b/blocks/layout-core-v5/utils/createSxResult.test.ts
similarity index 100%
rename from blocks/layout-core/utils/createSxResult.test.ts
rename to blocks/layout-core-v5/utils/createSxResult.test.ts
diff --git a/blocks/layout-core/utils/createSxResult.ts b/blocks/layout-core-v5/utils/createSxResult.ts
similarity index 100%
rename from blocks/layout-core/utils/createSxResult.ts
rename to blocks/layout-core-v5/utils/createSxResult.ts
diff --git a/blocks/layout-core/utils/flattenResponsive.test.ts b/blocks/layout-core-v5/utils/flattenResponsive.test.ts
similarity index 100%
rename from blocks/layout-core/utils/flattenResponsive.test.ts
rename to blocks/layout-core-v5/utils/flattenResponsive.test.ts
diff --git a/blocks/layout-core/utils/flattenResponsive.ts b/blocks/layout-core-v5/utils/flattenResponsive.ts
similarity index 100%
rename from blocks/layout-core/utils/flattenResponsive.ts
rename to blocks/layout-core-v5/utils/flattenResponsive.ts
diff --git a/blocks/layout-core/utils/isNil.ts b/blocks/layout-core-v5/utils/isNil.ts
similarity index 100%
rename from blocks/layout-core/utils/isNil.ts
rename to blocks/layout-core-v5/utils/isNil.ts
diff --git a/blocks/layout-core/utils/isNilOrEmpty.ts b/blocks/layout-core-v5/utils/isNilOrEmpty.ts
similarity index 100%
rename from blocks/layout-core/utils/isNilOrEmpty.ts
rename to blocks/layout-core-v5/utils/isNilOrEmpty.ts
diff --git a/blocks/layout-core/utils/mapWidthToScreen.test.ts b/blocks/layout-core-v5/utils/mapWidthToScreen.test.ts
similarity index 100%
rename from blocks/layout-core/utils/mapWidthToScreen.test.ts
rename to blocks/layout-core-v5/utils/mapWidthToScreen.test.ts
diff --git a/blocks/layout-core/utils/mapWidthToScreen.ts b/blocks/layout-core-v5/utils/mapWidthToScreen.ts
similarity index 100%
rename from blocks/layout-core/utils/mapWidthToScreen.ts
rename to blocks/layout-core-v5/utils/mapWidthToScreen.ts
diff --git a/blocks/layout-core/utils/muiBreakpoints.ts b/blocks/layout-core-v5/utils/muiBreakpoints.ts
similarity index 100%
rename from blocks/layout-core/utils/muiBreakpoints.ts
rename to blocks/layout-core-v5/utils/muiBreakpoints.ts
diff --git a/blocks/layout-core/utils/pickNearestBreakpoint.test.ts b/blocks/layout-core-v5/utils/pickNearestBreakpoint.test.ts
similarity index 100%
rename from blocks/layout-core/utils/pickNearestBreakpoint.test.ts
rename to blocks/layout-core-v5/utils/pickNearestBreakpoint.test.ts
diff --git a/blocks/layout-core/utils/pickNearestBreakpoint.ts b/blocks/layout-core-v5/utils/pickNearestBreakpoint.ts
similarity index 100%
rename from blocks/layout-core/utils/pickNearestBreakpoint.ts
rename to blocks/layout-core-v5/utils/pickNearestBreakpoint.ts
diff --git a/blocks/layout-core/utils/toValidCssValue.ts b/blocks/layout-core-v5/utils/toValidCssValue.ts
similarity index 100%
rename from blocks/layout-core/utils/toValidCssValue.ts
rename to blocks/layout-core-v5/utils/toValidCssValue.ts
diff --git a/blocks/layout-core/utils/types.ts b/blocks/layout-core-v5/utils/types.ts
similarity index 100%
rename from blocks/layout-core/utils/types.ts
rename to blocks/layout-core-v5/utils/types.ts
diff --git a/blocks/layout-example-controlEdgeSidebar/LayoutExampleControlEdgeSidebar.stories.tsx b/blocks/layout-example-controlEdgeSidebar/LayoutExampleControlEdgeSidebar.stories.tsx
index c3ef13487..9eb3c6aa4 100644
--- a/blocks/layout-example-controlEdgeSidebar/LayoutExampleControlEdgeSidebar.stories.tsx
+++ b/blocks/layout-example-controlEdgeSidebar/LayoutExampleControlEdgeSidebar.stories.tsx
@@ -6,7 +6,7 @@ import { LayoutExampleControlEdgeSidebar } from "./index";
 import Usage from "./usage.mdx";
 
 const meta = {
-  title: "Layout/Example/ControlEdgeSidebar",
+  title: "Layout v5/Example/ControlEdgeSidebar",
   component: LayoutExampleControlEdgeSidebar,
   parameters: {
     layout: "fullscreen",
diff --git a/blocks/layout-example-controlEdgeSidebar/LayoutExampleControlEdgeSidebar.tsx b/blocks/layout-example-controlEdgeSidebar/LayoutExampleControlEdgeSidebar.tsx
index d13eb83f7..8da0a8e22 100644
--- a/blocks/layout-example-controlEdgeSidebar/LayoutExampleControlEdgeSidebar.tsx
+++ b/blocks/layout-example-controlEdgeSidebar/LayoutExampleControlEdgeSidebar.tsx
@@ -17,7 +17,7 @@ import {
   Root,
   SidebarContent,
   useLayoutCtx,
-} from "../layout-core";
+} from "../layout-core-v5";
 
 const TriggerUsingHook = () => {
   const {
diff --git a/blocks/layout-example-controlEdgeSidebar/usage.mdx b/blocks/layout-example-controlEdgeSidebar/usage.mdx
index 603cc1860..5e7b010e3 100644
--- a/blocks/layout-example-controlEdgeSidebar/usage.mdx
+++ b/blocks/layout-example-controlEdgeSidebar/usage.mdx
@@ -1,7 +1,7 @@
 import { Meta, Source } from "@storybook/blocks";
 import raw from "./LayoutExampleControlEdgeSidebar?raw";
 
-<Meta title="Layout/Example/ControlEdgeSidebar" />
+<Meta title="Layout v5/Example/ControlEdgeSidebar" />
 
 ## CLI
 
diff --git a/blocks/layout-example-globalTheme/LayoutExampleGlobalTheme.stories.tsx b/blocks/layout-example-globalTheme/LayoutExampleGlobalTheme.stories.tsx
index b20916b89..786001040 100644
--- a/blocks/layout-example-globalTheme/LayoutExampleGlobalTheme.stories.tsx
+++ b/blocks/layout-example-globalTheme/LayoutExampleGlobalTheme.stories.tsx
@@ -6,7 +6,7 @@ import { LayoutExampleGlobalTheme } from "./index";
 import Usage from "./usage.mdx";
 
 const meta = {
-  title: "Layout/Example/GlobalTheme",
+  title: "Layout v5/Example/GlobalTheme",
   component: LayoutExampleGlobalTheme,
   parameters: {
     layout: "fullscreen",
diff --git a/blocks/layout-example-globalTheme/LayoutExampleGlobalTheme.tsx b/blocks/layout-example-globalTheme/LayoutExampleGlobalTheme.tsx
index acdce02a9..358fbe429 100644
--- a/blocks/layout-example-globalTheme/LayoutExampleGlobalTheme.tsx
+++ b/blocks/layout-example-globalTheme/LayoutExampleGlobalTheme.tsx
@@ -34,7 +34,7 @@ import {
   InsetSidebar,
   Root,
   SidebarContent,
-} from "../layout-core";
+} from "../layout-core-v5";
 
 // https://github.com/tailwindlabs/tailwindcss/blob/master/colors.js#L244
 const coolGray = {
diff --git a/blocks/layout-example-globalTheme/usage.mdx b/blocks/layout-example-globalTheme/usage.mdx
index 64c7beb99..b581eea4e 100644
--- a/blocks/layout-example-globalTheme/usage.mdx
+++ b/blocks/layout-example-globalTheme/usage.mdx
@@ -1,7 +1,7 @@
 import { Meta, Source } from "@storybook/blocks";
 import raw from "./LayoutExampleGlobalTheme?raw";
 
-<Meta title="Layout/Example/GlobalTheme" />
+<Meta title="Layout v5/Example/GlobalTheme" />
 
 ## CLI
 
diff --git a/blocks/layout-example-insetSidebarPosition/LayoutExampleInsetSidebarPosition.stories.tsx b/blocks/layout-example-insetSidebarPosition/LayoutExampleInsetSidebarPosition.stories.tsx
index 7aea83745..5b3ce2672 100644
--- a/blocks/layout-example-insetSidebarPosition/LayoutExampleInsetSidebarPosition.stories.tsx
+++ b/blocks/layout-example-insetSidebarPosition/LayoutExampleInsetSidebarPosition.stories.tsx
@@ -2,11 +2,11 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import googleFont from "../../.storybook/decorators/googleFont";
 import storyDialog from "../../.storybook/decorators/storyDialog";
-import Usage from "./usage.mdx";
 import { LayoutExampleInsetSidebarPosition } from "./index";
+import Usage from "./usage.mdx";
 
 const meta = {
-  title: "Layout/Example/InsetSidebarPosition",
+  title: "Layout v5/Example/InsetSidebarPosition",
   component: LayoutExampleInsetSidebarPosition,
   parameters: {
     layout: "fullscreen",
@@ -21,5 +21,3 @@ type Story = StoryObj<typeof meta>;
 export const InsetSidebarPosition: Story = {
   render: () => <LayoutExampleInsetSidebarPosition />,
 };
-
-
diff --git a/blocks/layout-example-insetSidebarPosition/LayoutExampleInsetSidebarPosition.tsx b/blocks/layout-example-insetSidebarPosition/LayoutExampleInsetSidebarPosition.tsx
index eb737c56d..b67f554b3 100644
--- a/blocks/layout-example-insetSidebarPosition/LayoutExampleInsetSidebarPosition.tsx
+++ b/blocks/layout-example-insetSidebarPosition/LayoutExampleInsetSidebarPosition.tsx
@@ -16,7 +16,7 @@ import {
   InsetContainer,
   InsetSidebar,
   Root,
-} from "../layout-core";
+} from "../layout-core-v5";
 
 const theme = createTheme();
 
diff --git a/blocks/layout-example-insetSidebarPosition/usage.mdx b/blocks/layout-example-insetSidebarPosition/usage.mdx
index b5fda6e44..57d83dd82 100644
--- a/blocks/layout-example-insetSidebarPosition/usage.mdx
+++ b/blocks/layout-example-insetSidebarPosition/usage.mdx
@@ -1,7 +1,7 @@
 import { Meta, Source } from "@storybook/blocks";
 import raw from "./LayoutExampleInsetSidebarPosition?raw";
 
-<Meta title="Layout/Example/InsetSidebarPosition" />
+<Meta title="Layout v5/Example/InsetSidebarPosition" />
 
 ## CLI
 
diff --git a/blocks/layout-example-multipleHeaders/LayoutExampleMultipleHeaders.stories.tsx b/blocks/layout-example-multipleHeaders/LayoutExampleMultipleHeaders.stories.tsx
index fdc24a49e..ab57866a7 100644
--- a/blocks/layout-example-multipleHeaders/LayoutExampleMultipleHeaders.stories.tsx
+++ b/blocks/layout-example-multipleHeaders/LayoutExampleMultipleHeaders.stories.tsx
@@ -2,11 +2,11 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import googleFont from "../../.storybook/decorators/googleFont";
 import storyDialog from "../../.storybook/decorators/storyDialog";
-import Usage from "./usage.mdx";
 import { LayoutExampleMultipleHeaders } from "./index";
+import Usage from "./usage.mdx";
 
 const meta = {
-  title: "Layout/Example/MultipleHeaders",
+  title: "Layout v5/Example/MultipleHeaders",
   component: LayoutExampleMultipleHeaders,
   parameters: {
     layout: "fullscreen",
@@ -21,5 +21,3 @@ type Story = StoryObj<typeof meta>;
 export const MultipleHeaders: Story = {
   render: () => <LayoutExampleMultipleHeaders />,
 };
-
-
diff --git a/blocks/layout-example-multipleHeaders/LayoutExampleMultipleHeaders.tsx b/blocks/layout-example-multipleHeaders/LayoutExampleMultipleHeaders.tsx
index 2ed70f291..0781fc7d5 100644
--- a/blocks/layout-example-multipleHeaders/LayoutExampleMultipleHeaders.tsx
+++ b/blocks/layout-example-multipleHeaders/LayoutExampleMultipleHeaders.tsx
@@ -21,7 +21,7 @@ import {
   SidebarContent,
   Subheader,
   TopHeader,
-} from "../layout-core";
+} from "../layout-core-v5";
 
 export const LayoutExampleMultipleHeaders = () => {
   const [topHidden, setTopHidden] = React.useState(false);
diff --git a/blocks/layout-example-multipleHeaders/usage.mdx b/blocks/layout-example-multipleHeaders/usage.mdx
index c48258537..e318cf4c0 100644
--- a/blocks/layout-example-multipleHeaders/usage.mdx
+++ b/blocks/layout-example-multipleHeaders/usage.mdx
@@ -1,7 +1,7 @@
 import { Meta, Source } from "@storybook/blocks";
 import raw from "./LayoutExampleMultipleHeaders?raw";
 
-<Meta title="Layout/Example/MultipleHeaders" />
+<Meta title="Layout v5/Example/MultipleHeaders" />
 
 ## CLI
 
diff --git a/blocks/layout-example-rightEdgeSidebar/LayoutExampleRightEdgeSidebar.stories.tsx b/blocks/layout-example-rightEdgeSidebar/LayoutExampleRightEdgeSidebar.stories.tsx
index dff85e337..cb13c8de5 100644
--- a/blocks/layout-example-rightEdgeSidebar/LayoutExampleRightEdgeSidebar.stories.tsx
+++ b/blocks/layout-example-rightEdgeSidebar/LayoutExampleRightEdgeSidebar.stories.tsx
@@ -2,11 +2,11 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import googleFont from "../../.storybook/decorators/googleFont";
 import storyDialog from "../../.storybook/decorators/storyDialog";
-import Usage from "./usage.mdx";
 import { LayoutExampleRightEdgeSidebar } from "./index";
+import Usage from "./usage.mdx";
 
 const meta = {
-  title: "Layout/Example/RightEdgeSidebar",
+  title: "Layout v5/Example/RightEdgeSidebar",
   component: LayoutExampleRightEdgeSidebar,
   parameters: {
     layout: "fullscreen",
@@ -21,5 +21,3 @@ type Story = StoryObj<typeof meta>;
 export const RightEdgeSidebar: Story = {
   render: () => <LayoutExampleRightEdgeSidebar />,
 };
-
-
diff --git a/blocks/layout-example-rightEdgeSidebar/LayoutExampleRightEdgeSidebar.tsx b/blocks/layout-example-rightEdgeSidebar/LayoutExampleRightEdgeSidebar.tsx
index 6caba3dbc..eaa8c83ea 100644
--- a/blocks/layout-example-rightEdgeSidebar/LayoutExampleRightEdgeSidebar.tsx
+++ b/blocks/layout-example-rightEdgeSidebar/LayoutExampleRightEdgeSidebar.tsx
@@ -10,7 +10,7 @@ import {
   Header,
   Root,
   SidebarContent,
-} from "../layout-core";
+} from "../layout-core-v5";
 
 export const LayoutExampleRightEdgeSidebar = () => {
   return (
diff --git a/blocks/layout-example-rightEdgeSidebar/usage.mdx b/blocks/layout-example-rightEdgeSidebar/usage.mdx
index d4d6e8879..69e3c7ded 100644
--- a/blocks/layout-example-rightEdgeSidebar/usage.mdx
+++ b/blocks/layout-example-rightEdgeSidebar/usage.mdx
@@ -1,7 +1,7 @@
 import { Meta, Source } from "@storybook/blocks";
 import raw from "./LayoutExampleRightEdgeSidebar?raw";
 
-<Meta title="Layout/Example/RightEdgeSidebar" />
+<Meta title="Layout v5/Example/RightEdgeSidebar" />
 
 ## CLI
 
diff --git a/blocks/layout-example-rtl/LayoutExampleRtl.stories.tsx b/blocks/layout-example-rtl/LayoutExampleRtl.stories.tsx
index fc338766a..2a8e0e9fa 100644
--- a/blocks/layout-example-rtl/LayoutExampleRtl.stories.tsx
+++ b/blocks/layout-example-rtl/LayoutExampleRtl.stories.tsx
@@ -6,7 +6,7 @@ import { LayoutExampleRtl } from "./index";
 import Usage from "./usage.mdx";
 
 const meta = {
-  title: "Layout/Example/Right-to-Left",
+  title: "Layout v5/Example/Right-to-Left",
   component: LayoutExampleRtl,
   parameters: {
     layout: "fullscreen",
diff --git a/blocks/layout-example-rtl/LayoutExampleRtl.tsx b/blocks/layout-example-rtl/LayoutExampleRtl.tsx
index ff01f8f24..8df1ba8b9 100644
--- a/blocks/layout-example-rtl/LayoutExampleRtl.tsx
+++ b/blocks/layout-example-rtl/LayoutExampleRtl.tsx
@@ -15,7 +15,7 @@ import {
   InsetSidebar,
   Root,
   SidebarContent,
-} from "../layout-core";
+} from "../layout-core-v5";
 
 // Create rtl cache
 const cacheRtl = createCache({
diff --git a/blocks/layout-example-rtl/usage.mdx b/blocks/layout-example-rtl/usage.mdx
index 3a6f318e0..75799861e 100644
--- a/blocks/layout-example-rtl/usage.mdx
+++ b/blocks/layout-example-rtl/usage.mdx
@@ -1,7 +1,7 @@
 import { Meta, Source } from "@storybook/blocks";
 import raw from "./LayoutExampleRtl?raw";
 
-<Meta title="Layout/Example/Right-to-Left" />
+<Meta title="Layout v5/Example/Right-to-Left" />
 
 ## CLI
 
diff --git a/blocks/layout-preset-contentBased/LayoutPresetContentBased.stories.tsx b/blocks/layout-preset-contentBased/LayoutPresetContentBased.stories.tsx
index ad48d5531..36a7f6cc3 100644
--- a/blocks/layout-preset-contentBased/LayoutPresetContentBased.stories.tsx
+++ b/blocks/layout-preset-contentBased/LayoutPresetContentBased.stories.tsx
@@ -6,7 +6,7 @@ import { LayoutPresetContentBased } from "./index";
 import Usage from "./usage.mdx";
 
 const meta = {
-  title: "Layout/Preset/ContentBased",
+  title: "Layout v5/Preset/ContentBased",
   component: LayoutPresetContentBased,
   parameters: {
     layout: "fullscreen",
diff --git a/blocks/layout-preset-contentBased/LayoutPresetContentBased.tsx b/blocks/layout-preset-contentBased/LayoutPresetContentBased.tsx
index d4da651e0..ddd6901bf 100644
--- a/blocks/layout-preset-contentBased/LayoutPresetContentBased.tsx
+++ b/blocks/layout-preset-contentBased/LayoutPresetContentBased.tsx
@@ -13,7 +13,7 @@ import {
   Header,
   Root,
   SidebarContent,
-} from "../layout-core";
+} from "../layout-core-v5";
 import {
   ContentMockup,
   FooterMockup,
diff --git a/blocks/layout-preset-contentBased/usage.mdx b/blocks/layout-preset-contentBased/usage.mdx
index a5477aba5..504d05d92 100644
--- a/blocks/layout-preset-contentBased/usage.mdx
+++ b/blocks/layout-preset-contentBased/usage.mdx
@@ -1,7 +1,7 @@
 import { Meta, Source } from "@storybook/blocks";
 import raw from "./LayoutPresetContentBased?raw";
 
-<Meta title="Layout/Preset/ContentBased" />
+<Meta title="Layout v5/Preset/ContentBased" />
 
 ## CLI
 
diff --git a/blocks/layout-preset-cozy/LayoutPresetCozy.stories.tsx b/blocks/layout-preset-cozy/LayoutPresetCozy.stories.tsx
index ec8eeb55e..0cf801743 100644
--- a/blocks/layout-preset-cozy/LayoutPresetCozy.stories.tsx
+++ b/blocks/layout-preset-cozy/LayoutPresetCozy.stories.tsx
@@ -6,7 +6,7 @@ import { LayoutPresetCozy } from "./index";
 import Usage from "./usage.mdx";
 
 const meta = {
-  title: "Layout/Preset/Cozy",
+  title: "Layout v5/Preset/Cozy",
   component: LayoutPresetCozy,
   parameters: {
     layout: "fullscreen",
diff --git a/blocks/layout-preset-cozy/LayoutPresetCozy.tsx b/blocks/layout-preset-cozy/LayoutPresetCozy.tsx
index 3934f0173..c60aa8ae7 100644
--- a/blocks/layout-preset-cozy/LayoutPresetCozy.tsx
+++ b/blocks/layout-preset-cozy/LayoutPresetCozy.tsx
@@ -15,7 +15,7 @@ import {
   Header,
   Root,
   SidebarContent,
-} from "../layout-core";
+} from "../layout-core-v5";
 import {
   ContentMockup,
   FooterMockup,
diff --git a/blocks/layout-preset-cozy/usage.mdx b/blocks/layout-preset-cozy/usage.mdx
index 14269dd5f..ccfa2791f 100644
--- a/blocks/layout-preset-cozy/usage.mdx
+++ b/blocks/layout-preset-cozy/usage.mdx
@@ -1,7 +1,7 @@
 import { Meta, Source } from "@storybook/blocks";
 import raw from "./LayoutPresetCozy?raw";
 
-<Meta title="Layout/Preset/Cozy" />
+<Meta title="Layout v5/Preset/Cozy" />
 
 ## CLI
 
diff --git a/blocks/layout-preset-fixed/LayoutPresetFixed.stories.tsx b/blocks/layout-preset-fixed/LayoutPresetFixed.stories.tsx
index 6f984223b..dabf0084a 100644
--- a/blocks/layout-preset-fixed/LayoutPresetFixed.stories.tsx
+++ b/blocks/layout-preset-fixed/LayoutPresetFixed.stories.tsx
@@ -6,7 +6,7 @@ import { LayoutPresetFixed } from "./index";
 import Usage from "./usage.mdx";
 
 const meta = {
-  title: "Layout/Preset/Fixed",
+  title: "Layout v5/Preset/Fixed",
   component: LayoutPresetFixed,
   parameters: {
     layout: "fullscreen",
diff --git a/blocks/layout-preset-fixed/LayoutPresetFixed.tsx b/blocks/layout-preset-fixed/LayoutPresetFixed.tsx
index 7b1bac71f..4b6cfa5be 100644
--- a/blocks/layout-preset-fixed/LayoutPresetFixed.tsx
+++ b/blocks/layout-preset-fixed/LayoutPresetFixed.tsx
@@ -15,7 +15,7 @@ import {
   Header,
   Root,
   SidebarContent,
-} from "../layout-core";
+} from "../layout-core-v5";
 import {
   ContentMockup,
   FooterMockup,
diff --git a/blocks/layout-preset-fixed/usage.mdx b/blocks/layout-preset-fixed/usage.mdx
index bb1e946bc..97b18ae43 100644
--- a/blocks/layout-preset-fixed/usage.mdx
+++ b/blocks/layout-preset-fixed/usage.mdx
@@ -1,7 +1,7 @@
 import { Meta, Source } from "@storybook/blocks";
 import raw from "./LayoutPresetFixed?raw";
 
-<Meta title="Layout/Preset/Fixed" />
+<Meta title="Layout v5/Preset/Fixed" />
 
 ## CLI
 
diff --git a/blocks/layout-preset-standard/LayoutPresetStandard.stories.tsx b/blocks/layout-preset-standard/LayoutPresetStandard.stories.tsx
index d271f36b9..c0d0b6688 100644
--- a/blocks/layout-preset-standard/LayoutPresetStandard.stories.tsx
+++ b/blocks/layout-preset-standard/LayoutPresetStandard.stories.tsx
@@ -6,7 +6,7 @@ import { LayoutPresetStandard } from "./index";
 import Usage from "./usage.mdx";
 
 const meta = {
-  title: "Layout/Preset/Standard",
+  title: "Layout v5/Preset/Standard",
   component: LayoutPresetStandard,
   parameters: {
     layout: "fullscreen",
diff --git a/blocks/layout-preset-standard/LayoutPresetStandard.tsx b/blocks/layout-preset-standard/LayoutPresetStandard.tsx
index 6095c70e0..e4fdc948b 100644
--- a/blocks/layout-preset-standard/LayoutPresetStandard.tsx
+++ b/blocks/layout-preset-standard/LayoutPresetStandard.tsx
@@ -15,7 +15,7 @@ import {
   Header,
   Root,
   SidebarContent,
-} from "../layout-core";
+} from "../layout-core-v5";
 import { SideNavUserInfoMockup } from "../mockup-dashboard";
 import {
   ContentMockup,
diff --git a/blocks/layout-preset-standard/usage.mdx b/blocks/layout-preset-standard/usage.mdx
index 534b5d957..4f2ca32fa 100644
--- a/blocks/layout-preset-standard/usage.mdx
+++ b/blocks/layout-preset-standard/usage.mdx
@@ -1,7 +1,7 @@
 import { Meta, Source } from "@storybook/blocks";
 import raw from "./LayoutPresetStandard?raw";
 
-<Meta title="Layout/Preset/Standard" />
+<Meta title="Layout v5/Preset/Standard" />
 
 ## CLI
 
diff --git a/docs/layout/Installation.mdx b/docs/layout-v5/Installation.mdx
similarity index 96%
rename from docs/layout/Installation.mdx
rename to docs/layout-v5/Installation.mdx
index c9007ca4a..82db450c5 100644
--- a/docs/layout/Installation.mdx
+++ b/docs/layout-v5/Installation.mdx
@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/blocks";
 
-<Meta title="Layout/Installation" />
+<Meta title="Layout v5/Installation" />
 
 <style>{`
   .sbdocs.sbdocs-content {
diff --git a/docs/layout/configuration/edgeSidebar-config.mdx b/docs/layout-v5/configuration/edgeSidebar-config.mdx
similarity index 94%
rename from docs/layout/configuration/edgeSidebar-config.mdx
rename to docs/layout-v5/configuration/edgeSidebar-config.mdx
index 52040cba7..75c5ab9a7 100644
--- a/docs/layout/configuration/edgeSidebar-config.mdx
+++ b/docs/layout-v5/configuration/edgeSidebar-config.mdx
@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/addon-docs/blocks";
 
-<Meta title="Layout/Configuration/EdgeSidebar" />
+<Meta title="Layout v5/Configuration/EdgeSidebar" />
 
 <style>{`
   .sbdocs-content {
@@ -14,10 +14,10 @@ import { Meta } from "@storybook/addon-docs/blocks";
 <Root
   scheme={{
     leftEdgeSidebar: {
-      config: Responsive<EdgeSidebarConfig>
+      config: Responsive<EdgeSidebarConfig>,
     },
     rightEdgeSidebar: {
-      config: Responsive<EdgeSidebarConfig>
+      config: Responsive<EdgeSidebarConfig>,
     },
   }}
 ></Root>
diff --git a/docs/layout/configuration/header-config.mdx b/docs/layout-v5/configuration/header-config.mdx
similarity index 84%
rename from docs/layout/configuration/header-config.mdx
rename to docs/layout-v5/configuration/header-config.mdx
index 1f42cd22a..00abdf3e5 100644
--- a/docs/layout/configuration/header-config.mdx
+++ b/docs/layout-v5/configuration/header-config.mdx
@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/addon-docs/blocks";
 
-<Meta title="Layout/Configuration/Header" />
+<Meta title="Layout v5/Configuration/Header" />
 
 <style>{`
   .sbdocs-content {
@@ -14,13 +14,13 @@ import { Meta } from "@storybook/addon-docs/blocks";
 <Root
   scheme={{
     header: {
-      config: Responsive<HeaderConfig>
+      config: Responsive<HeaderConfig>,
     },
     topHeader: {
-      config: Responsive<HeaderConfig>
+      config: Responsive<HeaderConfig>,
     },
     subheader: {
-      config: Responsive<HeaderConfig>
+      config: Responsive<HeaderConfig>,
     },
   }}
 ></Root>
diff --git a/docs/layout/configuration/insetSidebar-config.mdx b/docs/layout-v5/configuration/insetSidebar-config.mdx
similarity index 87%
rename from docs/layout/configuration/insetSidebar-config.mdx
rename to docs/layout-v5/configuration/insetSidebar-config.mdx
index c1475b8a3..28b5c25ef 100644
--- a/docs/layout/configuration/insetSidebar-config.mdx
+++ b/docs/layout-v5/configuration/insetSidebar-config.mdx
@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/addon-docs/blocks";
 
-<Meta title="Layout/Configuration/InsetSidebar" />
+<Meta title="Layout v5/Configuration/InsetSidebar" />
 
 <style>{`
   .sbdocs-content {
@@ -14,10 +14,10 @@ import { Meta } from "@storybook/addon-docs/blocks";
 <Root
   scheme={{
     leftInsetSidebar: {
-      config: Responsive<InsetSidebarConfig>
+      config: Responsive<InsetSidebarConfig>,
     },
     rightInsetSidebar: {
-      config: Responsive<InsetSidebarConfig>
+      config: Responsive<InsetSidebarConfig>,
     },
   }}
 ></Root>
diff --git a/docs/layout/configuration/overall-config.mdx b/docs/layout-v5/configuration/overall-config.mdx
similarity index 96%
rename from docs/layout/configuration/overall-config.mdx
rename to docs/layout-v5/configuration/overall-config.mdx
index 511a907cb..0f087a73a 100644
--- a/docs/layout/configuration/overall-config.mdx
+++ b/docs/layout-v5/configuration/overall-config.mdx
@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/addon-docs/blocks";
 
-<Meta title="Layout/Configuration/Overall" />
+<Meta title="Layout v5/Configuration/Overall" />
 
 <style>{`
   .sbdocs-content {
diff --git a/docs/layout/core-concept.mdx b/docs/layout-v5/core-concept.mdx
similarity index 97%
rename from docs/layout/core-concept.mdx
rename to docs/layout-v5/core-concept.mdx
index 1da4e7b97..9793b3e92 100644
--- a/docs/layout/core-concept.mdx
+++ b/docs/layout-v5/core-concept.mdx
@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/blocks";
 
-<Meta title="Layout/Core Concept" />
+<Meta title="Layout v5/Core Concept" />
 
 <style>{`
   .sbdocs.sbdocs-content {
diff --git a/docs/layout/feature/auto-collapse.mdx b/docs/layout-v5/feature/auto-collapse.mdx
similarity index 97%
rename from docs/layout/feature/auto-collapse.mdx
rename to docs/layout-v5/feature/auto-collapse.mdx
index ea85f8052..9087f8040 100644
--- a/docs/layout/feature/auto-collapse.mdx
+++ b/docs/layout-v5/feature/auto-collapse.mdx
@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/addon-docs/blocks";
 
-<Meta title="Layout/Feature/Auto-collapse" />
+<Meta title="Layout v5/Feature/Auto-collapse" />
 
 <style>{`
   .sbdocs-content {
diff --git a/docs/layout/feature/header-magnet.mdx b/docs/layout-v5/feature/header-magnet.mdx
similarity index 96%
rename from docs/layout/feature/header-magnet.mdx
rename to docs/layout-v5/feature/header-magnet.mdx
index 30e55c745..db14ccf96 100644
--- a/docs/layout/feature/header-magnet.mdx
+++ b/docs/layout-v5/feature/header-magnet.mdx
@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/addon-docs/blocks";
 
-<Meta title="Layout/Feature/Header Magnet" />
+<Meta title="Layout v5/Feature/Header Magnet" />
 
 <style>{`
   .sbdocs-content {
diff --git a/docs/layout/feature/multiple-headers.mdx b/docs/layout-v5/feature/multiple-headers.mdx
similarity index 98%
rename from docs/layout/feature/multiple-headers.mdx
rename to docs/layout-v5/feature/multiple-headers.mdx
index 6043a1c3b..77f2b7176 100644
--- a/docs/layout/feature/multiple-headers.mdx
+++ b/docs/layout-v5/feature/multiple-headers.mdx
@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/addon-docs/blocks";
 
-<Meta title="Layout/Feature/Multiple Headers" />
+<Meta title="Layout v5/Feature/Multiple Headers" />
 
 <style>{`
   .sbdocs-content {
diff --git a/docs/layout/feature/persistent-behavior.mdx b/docs/layout-v5/feature/persistent-behavior.mdx
similarity index 97%
rename from docs/layout/feature/persistent-behavior.mdx
rename to docs/layout-v5/feature/persistent-behavior.mdx
index 3d6fcc314..4dd0d2f45 100644
--- a/docs/layout/feature/persistent-behavior.mdx
+++ b/docs/layout-v5/feature/persistent-behavior.mdx
@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/addon-docs/blocks";
 
-<Meta title="Layout/Feature/Persistent Behavior" />
+<Meta title="Layout v5/Feature/Persistent Behavior" />
 
 <style>{`
   .sbdocs-content {
diff --git a/docs/layout/feature/right-to-left.mdx b/docs/layout-v5/feature/right-to-left.mdx
similarity index 97%
rename from docs/layout/feature/right-to-left.mdx
rename to docs/layout-v5/feature/right-to-left.mdx
index 8ecd60486..434d64a8c 100644
--- a/docs/layout/feature/right-to-left.mdx
+++ b/docs/layout-v5/feature/right-to-left.mdx
@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/addon-docs/blocks";
 
-<Meta title="Layout/Feature/Right to Left" />
+<Meta title="Layout v5/Feature/Right to Left" />
 
 <style>{`
   .sbdocs-content {
diff --git a/docs/layout/feature/uncollapsed-on-hover.mdx b/docs/layout-v5/feature/uncollapsed-on-hover.mdx
similarity index 90%
rename from docs/layout/feature/uncollapsed-on-hover.mdx
rename to docs/layout-v5/feature/uncollapsed-on-hover.mdx
index d44808ca4..9bf4f2159 100644
--- a/docs/layout/feature/uncollapsed-on-hover.mdx
+++ b/docs/layout-v5/feature/uncollapsed-on-hover.mdx
@@ -1,6 +1,6 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
+import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
 
-<Meta title="Layout/Feature/Uncollapsed on Hover" />
+<Meta title="Layout v5/Feature/Uncollapsed on Hover" />
 
 <style>{`
   .sbdocs-content {
diff --git a/docs/layout/layout-intro.mdx b/docs/layout-v5/layout-intro.mdx
similarity index 99%
rename from docs/layout/layout-intro.mdx
rename to docs/layout-v5/layout-intro.mdx
index 79b0d996c..d32263f10 100644
--- a/docs/layout/layout-intro.mdx
+++ b/docs/layout-v5/layout-intro.mdx
@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/blocks";
 
-<Meta title="Layout/Introduction" />
+<Meta title="Layout v5/Introduction" />
 
 <style>{`
   .sbdocs.sbdocs-content {
diff --git a/docs/layout/migration-v5.mdx b/docs/layout-v5/migration-v5.mdx
similarity index 99%
rename from docs/layout/migration-v5.mdx
rename to docs/layout-v5/migration-v5.mdx
index 4b17ca750..f337a6df7 100644
--- a/docs/layout/migration-v5.mdx
+++ b/docs/layout-v5/migration-v5.mdx
@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/blocks";
 
-<Meta title="Layout/Migration to v5" />
+<Meta title="Layout v5/Migration to v5" />
 
 <style>{`
   .sbdocs-content {
diff --git a/docs/layout/starter-templates.mdx b/docs/layout-v5/starter-templates.mdx
similarity index 98%
rename from docs/layout/starter-templates.mdx
rename to docs/layout-v5/starter-templates.mdx
index a1691bfaf..74e4eafaa 100644
--- a/docs/layout/starter-templates.mdx
+++ b/docs/layout-v5/starter-templates.mdx
@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/blocks";
 
-<Meta title="Layout/Starter Templates" />
+<Meta title="Layout v5/Starter Templates" />
 
 # Starter Templates
 
diff --git a/docs/layout/tutorial/blog-layout.mdx b/docs/layout-v5/tutorial/blog-layout.mdx
similarity index 99%
rename from docs/layout/tutorial/blog-layout.mdx
rename to docs/layout-v5/tutorial/blog-layout.mdx
index 3e544f3c0..f060cd274 100644
--- a/docs/layout/tutorial/blog-layout.mdx
+++ b/docs/layout-v5/tutorial/blog-layout.mdx
@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/addon-docs/blocks";
 
-<Meta title="Layout/Tutorials/Blog" />
+<Meta title="Layout v5/Tutorials/Blog" />
 
 <style>{`
   .sbdocs-content {
diff --git a/docs/layout/tutorial/dashboard-layout.mdx b/docs/layout-v5/tutorial/dashboard-layout.mdx
similarity index 99%
rename from docs/layout/tutorial/dashboard-layout.mdx
rename to docs/layout-v5/tutorial/dashboard-layout.mdx
index 64a512149..837bb1d66 100644
--- a/docs/layout/tutorial/dashboard-layout.mdx
+++ b/docs/layout-v5/tutorial/dashboard-layout.mdx
@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/addon-docs/blocks";
 
-<Meta title="Layout/Tutorials/Dashboard" />
+<Meta title="Layout v5/Tutorials/Dashboard" />
 
 <style>{`
   .sbdocs-content {