fix(layout): add v5 to layout

siriwatknp · Apr 21, 2024 · 9504370 · 9504370
1 parent b28b2fd
commit 9504370
Show file tree

Hide file tree

Showing 130 changed files with 75 additions and 89 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 → blocks/layout-core-v5/Content/Content.tsx b/blocks/layout-core/Content/Content.tsx → blocks/layout-core-v5/Content/Content.tsx
diff --git a/...ks/layout-core/Content/SidebarContent.tsx → ...layout-core-v5/Content/SidebarContent.tsx b/...ks/layout-core/Content/SidebarContent.tsx → ...layout-core-v5/Content/SidebarContent.tsx
diff --git a/...ut-core/Content/getContentSxProps.test.ts → ...core-v5/Content/getContentSxProps.test.ts b/...ut-core/Content/getContentSxProps.test.ts → ...core-v5/Content/getContentSxProps.test.ts
diff --git a/.../layout-core/Content/getContentSxProps.ts → ...yout-core-v5/Content/getContentSxProps.ts b/.../layout-core/Content/getContentSxProps.ts → ...yout-core-v5/Content/getContentSxProps.ts
diff --git a/...ks/layout-core/EdgeSidebar/EdgeOffset.tsx → ...layout-core-v5/EdgeSidebar/EdgeOffset.tsx b/...ks/layout-core/EdgeSidebar/EdgeOffset.tsx → ...layout-core-v5/EdgeSidebar/EdgeOffset.tsx
diff --git a/...s/layout-core/EdgeSidebar/EdgeSidebar.tsx → ...ayout-core-v5/EdgeSidebar/EdgeSidebar.tsx b/...s/layout-core/EdgeSidebar/EdgeSidebar.tsx → ...ayout-core-v5/EdgeSidebar/EdgeSidebar.tsx
diff --git a/...re/EdgeSidebar/EdgeSidebarBuilder.test.ts → ...v5/EdgeSidebar/EdgeSidebarBuilder.test.ts b/...re/EdgeSidebar/EdgeSidebarBuilder.test.ts → ...v5/EdgeSidebar/EdgeSidebarBuilder.test.ts
diff --git a/...ut-core/EdgeSidebar/EdgeSidebarBuilder.ts → ...core-v5/EdgeSidebar/EdgeSidebarBuilder.ts b/...ut-core/EdgeSidebar/EdgeSidebarBuilder.ts → ...core-v5/EdgeSidebar/EdgeSidebarBuilder.ts
diff --git a/...s/layout-core/EdgeSidebar/EdgeTrigger.tsx → ...ayout-core-v5/EdgeSidebar/EdgeTrigger.tsx b/...s/layout-core/EdgeSidebar/EdgeTrigger.tsx → ...ayout-core-v5/EdgeSidebar/EdgeTrigger.tsx
diff --git a/.../EdgeSidebar/getEdgeOffsetSxProps.test.ts → .../EdgeSidebar/getEdgeOffsetSxProps.test.ts b/.../EdgeSidebar/getEdgeOffsetSxProps.test.ts → .../EdgeSidebar/getEdgeOffsetSxProps.test.ts
diff --git a/...-core/EdgeSidebar/getEdgeOffsetSxProps.ts → ...re-v5/EdgeSidebar/getEdgeOffsetSxProps.ts b/...-core/EdgeSidebar/getEdgeOffsetSxProps.ts → ...re-v5/EdgeSidebar/getEdgeOffsetSxProps.ts
diff --git a/...-core/EdgeSidebar/useEdgeSidebar.test.tsx → ...re-v5/EdgeSidebar/useEdgeSidebar.test.tsx b/...-core/EdgeSidebar/useEdgeSidebar.test.tsx → ...re-v5/EdgeSidebar/useEdgeSidebar.test.tsx
diff --git a/...layout-core/EdgeSidebar/useEdgeSidebar.ts → ...out-core-v5/EdgeSidebar/useEdgeSidebar.ts b/...layout-core/EdgeSidebar/useEdgeSidebar.ts → ...out-core-v5/EdgeSidebar/useEdgeSidebar.ts
diff --git a/blocks/layout-core/Footer/Footer.tsx → blocks/layout-core-v5/Footer/Footer.tsx b/blocks/layout-core/Footer/Footer.tsx → blocks/layout-core-v5/Footer/Footer.tsx
diff --git a/blocks/layout-core/Fullscreen/Fullscreen.tsx → .../layout-core-v5/Fullscreen/Fullscreen.tsx b/blocks/layout-core/Fullscreen/Fullscreen.tsx → .../layout-core-v5/Fullscreen/Fullscreen.tsx
diff --git a/...out-core/Fullscreen/FullscreenContext.tsx → ...-core-v5/Fullscreen/FullscreenContext.tsx b/...out-core/Fullscreen/FullscreenContext.tsx → ...-core-v5/Fullscreen/FullscreenContext.tsx
diff --git a/blocks/layout-core/Header/Header.tsx → blocks/layout-core-v5/Header/Header.tsx b/blocks/layout-core/Header/Header.tsx → blocks/layout-core-v5/Header/Header.tsx
diff --git a/.../layout-core/Header/HeaderBuilder.test.ts → ...yout-core-v5/Header/HeaderBuilder.test.ts b/.../layout-core/Header/HeaderBuilder.test.ts → ...yout-core-v5/Header/HeaderBuilder.test.ts
diff --git a/blocks/layout-core/Header/HeaderBuilder.ts → ...ks/layout-core-v5/Header/HeaderBuilder.ts b/blocks/layout-core/Header/HeaderBuilder.ts → ...ks/layout-core-v5/Header/HeaderBuilder.ts
diff --git a/...t-core/InsetSidebar/InsetAvoidingView.tsx → ...ore-v5/InsetSidebar/InsetAvoidingView.tsx b/...t-core/InsetSidebar/InsetAvoidingView.tsx → ...ore-v5/InsetSidebar/InsetAvoidingView.tsx
diff --git a/...yout-core/InsetSidebar/InsetContainer.tsx → ...t-core-v5/InsetSidebar/InsetContainer.tsx b/...yout-core/InsetSidebar/InsetContainer.tsx → ...t-core-v5/InsetSidebar/InsetContainer.tsx
diff --git a/.../layout-core/InsetSidebar/InsetOffset.tsx → ...yout-core-v5/InsetSidebar/InsetOffset.tsx b/.../layout-core/InsetSidebar/InsetOffset.tsx → ...yout-core-v5/InsetSidebar/InsetOffset.tsx
diff --git a/...layout-core/InsetSidebar/InsetSidebar.tsx → ...out-core-v5/InsetSidebar/InsetSidebar.tsx b/...layout-core/InsetSidebar/InsetSidebar.tsx → ...out-core-v5/InsetSidebar/InsetSidebar.tsx
diff --git a/.../InsetSidebar/InsetSidebarBuilder.test.ts → .../InsetSidebar/InsetSidebarBuilder.test.ts b/.../InsetSidebar/InsetSidebarBuilder.test.ts → .../InsetSidebar/InsetSidebarBuilder.test.ts
diff --git a/...-core/InsetSidebar/InsetSidebarBuilder.ts → ...re-v5/InsetSidebar/InsetSidebarBuilder.ts b/...-core/InsetSidebar/InsetSidebarBuilder.ts → ...re-v5/InsetSidebar/InsetSidebarBuilder.ts
diff --git a/...ks/layout-core/Margin/MarginModel.test.ts → ...layout-core-v5/Margin/MarginModel.test.ts b/...ks/layout-core/Margin/MarginModel.test.ts → ...layout-core-v5/Margin/MarginModel.test.ts
diff --git a/blocks/layout-core/Margin/MarginModel.ts → blocks/layout-core-v5/Margin/MarginModel.ts b/blocks/layout-core/Margin/MarginModel.ts → blocks/layout-core-v5/Margin/MarginModel.ts
diff --git a/...core/MultiHeaders/HeadersCompiler.test.ts → ...e-v5/MultiHeaders/HeadersCompiler.test.ts b/...core/MultiHeaders/HeadersCompiler.test.ts → ...e-v5/MultiHeaders/HeadersCompiler.test.ts
diff --git a/...yout-core/MultiHeaders/HeadersCompiler.ts → ...t-core-v5/MultiHeaders/HeadersCompiler.ts b/...yout-core/MultiHeaders/HeadersCompiler.ts → ...t-core-v5/MultiHeaders/HeadersCompiler.ts
diff --git a/...-core/MultiHeaders/StackedHeaders.test.ts → ...re-v5/MultiHeaders/StackedHeaders.test.ts b/...-core/MultiHeaders/StackedHeaders.test.ts → ...re-v5/MultiHeaders/StackedHeaders.test.ts
diff --git a/...ayout-core/MultiHeaders/StackedHeaders.ts → ...ut-core-v5/MultiHeaders/StackedHeaders.ts b/...ayout-core/MultiHeaders/StackedHeaders.ts → ...ut-core-v5/MultiHeaders/StackedHeaders.ts
diff --git a/blocks/layout-core/Root/Root.test.tsx → blocks/layout-core-v5/Root/Root.test.tsx b/blocks/layout-core/Root/Root.test.tsx → blocks/layout-core-v5/Root/Root.test.tsx
diff --git a/blocks/layout-core/Root/Root.tsx → blocks/layout-core-v5/Root/Root.tsx b/blocks/layout-core/Root/Root.tsx → blocks/layout-core-v5/Root/Root.tsx
diff --git a/blocks/layout-core/Width/WidthModel.test.ts → ...s/layout-core-v5/Width/WidthModel.test.ts b/blocks/layout-core/Width/WidthModel.test.ts → ...s/layout-core-v5/Width/WidthModel.test.ts
diff --git a/blocks/layout-core/Width/WidthModel.ts → blocks/layout-core-v5/Width/WidthModel.ts b/blocks/layout-core/Width/WidthModel.ts → blocks/layout-core-v5/Width/WidthModel.ts
diff --git a/blocks/layout-core/WindowContext.tsx → blocks/layout-core-v5/WindowContext.tsx b/blocks/layout-core/WindowContext.tsx → blocks/layout-core-v5/WindowContext.tsx
diff --git a/...layout-core/hooks/useInsetHeaderMagnet.ts → ...out-core-v5/hooks/useInsetHeaderMagnet.ts b/...layout-core/hooks/useInsetHeaderMagnet.ts → ...out-core-v5/hooks/useInsetHeaderMagnet.ts
diff --git a/blocks/layout-core/hooks/useScreen.ts → blocks/layout-core-v5/hooks/useScreen.ts b/blocks/layout-core/hooks/useScreen.ts → blocks/layout-core-v5/hooks/useScreen.ts
diff --git a/blocks/layout-core/hooks/useScrollY.ts → blocks/layout-core-v5/hooks/useScrollY.ts b/blocks/layout-core/hooks/useScrollY.ts → blocks/layout-core-v5/hooks/useScrollY.ts
diff --git a/...core/hooks/useSidebarAutoCollapse.test.ts → ...e-v5/hooks/useSidebarAutoCollapse.test.ts b/...core/hooks/useSidebarAutoCollapse.test.ts → ...e-v5/hooks/useSidebarAutoCollapse.test.ts
diff --git a/...yout-core/hooks/useSidebarAutoCollapse.ts → ...t-core-v5/hooks/useSidebarAutoCollapse.ts b/...yout-core/hooks/useSidebarAutoCollapse.ts → ...t-core-v5/hooks/useSidebarAutoCollapse.ts
diff --git a/blocks/layout-core/index.ts → blocks/layout-core-v5/index.ts b/blocks/layout-core/index.ts → blocks/layout-core-v5/index.ts
diff --git a/.../layout-core/presets/contentBased.test.ts → ...yout-core-v5/presets/contentBased.test.ts b/.../layout-core/presets/contentBased.test.ts → ...yout-core-v5/presets/contentBased.test.ts
diff --git a/blocks/layout-core/presets/contentBased.ts → ...ks/layout-core-v5/presets/contentBased.ts b/blocks/layout-core/presets/contentBased.ts → ...ks/layout-core-v5/presets/contentBased.ts
diff --git a/blocks/layout-core/presets/cozy.test.ts → blocks/layout-core-v5/presets/cozy.test.ts b/blocks/layout-core/presets/cozy.test.ts → blocks/layout-core-v5/presets/cozy.test.ts
diff --git a/blocks/layout-core/presets/cozy.ts → blocks/layout-core-v5/presets/cozy.ts b/blocks/layout-core/presets/cozy.ts → blocks/layout-core-v5/presets/cozy.ts
diff --git a/blocks/layout-core/presets/fixed.test.ts → blocks/layout-core-v5/presets/fixed.test.ts b/blocks/layout-core/presets/fixed.test.ts → blocks/layout-core-v5/presets/fixed.test.ts
diff --git a/blocks/layout-core/presets/fixed.ts → blocks/layout-core-v5/presets/fixed.ts b/blocks/layout-core/presets/fixed.ts → blocks/layout-core-v5/presets/fixed.ts
diff --git a/blocks/layout-core/presets/standard.test.ts → ...s/layout-core-v5/presets/standard.test.ts b/blocks/layout-core/presets/standard.test.ts → ...s/layout-core-v5/presets/standard.test.ts
diff --git a/blocks/layout-core/presets/standard.ts → blocks/layout-core-v5/presets/standard.ts b/blocks/layout-core/presets/standard.ts → blocks/layout-core-v5/presets/standard.ts
diff --git a/...out-core/shared/ResponsiveBuilder.test.ts → ...-core-v5/shared/ResponsiveBuilder.test.ts b/...out-core/shared/ResponsiveBuilder.test.ts → ...-core-v5/shared/ResponsiveBuilder.test.ts
diff --git a/...s/layout-core/shared/ResponsiveBuilder.ts → ...ayout-core-v5/shared/ResponsiveBuilder.ts b/...s/layout-core/shared/ResponsiveBuilder.ts → ...ayout-core-v5/shared/ResponsiveBuilder.ts
diff --git a/blocks/layout-core/theme-augment.ts → blocks/layout-core-v5/theme-augment.ts b/blocks/layout-core/theme-augment.ts → blocks/layout-core-v5/theme-augment.ts
diff --git a/blocks/layout-core/utils/calc.ts → blocks/layout-core-v5/utils/calc.ts b/blocks/layout-core/utils/calc.ts → blocks/layout-core-v5/utils/calc.ts
diff --git a/...out-core/utils/combineBreakpoints.test.ts → ...-core-v5/utils/combineBreakpoints.test.ts b/...out-core/utils/combineBreakpoints.test.ts → ...-core-v5/utils/combineBreakpoints.test.ts
diff --git a/...s/layout-core/utils/combineBreakpoints.ts → ...ayout-core-v5/utils/combineBreakpoints.ts b/...s/layout-core/utils/combineBreakpoints.ts → ...ayout-core-v5/utils/combineBreakpoints.ts
diff --git a/blocks/layout-core/utils/constant.ts → blocks/layout-core-v5/utils/constant.ts b/blocks/layout-core/utils/constant.ts → blocks/layout-core-v5/utils/constant.ts
diff --git a/.../layout-core/utils/createSxResult.test.ts → ...yout-core-v5/utils/createSxResult.test.ts b/.../layout-core/utils/createSxResult.test.ts → ...yout-core-v5/utils/createSxResult.test.ts
diff --git a/blocks/layout-core/utils/createSxResult.ts → ...ks/layout-core-v5/utils/createSxResult.ts b/blocks/layout-core/utils/createSxResult.ts → ...ks/layout-core-v5/utils/createSxResult.ts
diff --git a/...yout-core/utils/flattenResponsive.test.ts → ...t-core-v5/utils/flattenResponsive.test.ts b/...yout-core/utils/flattenResponsive.test.ts → ...t-core-v5/utils/flattenResponsive.test.ts
diff --git a/...ks/layout-core/utils/flattenResponsive.ts → ...layout-core-v5/utils/flattenResponsive.ts b/...ks/layout-core/utils/flattenResponsive.ts → ...layout-core-v5/utils/flattenResponsive.ts
diff --git a/blocks/layout-core/utils/isNil.ts → blocks/layout-core-v5/utils/isNil.ts b/blocks/layout-core/utils/isNil.ts → blocks/layout-core-v5/utils/isNil.ts
diff --git a/blocks/layout-core/utils/isNilOrEmpty.ts → blocks/layout-core-v5/utils/isNilOrEmpty.ts b/blocks/layout-core/utils/isNilOrEmpty.ts → blocks/layout-core-v5/utils/isNilOrEmpty.ts
diff --git a/...ayout-core/utils/mapWidthToScreen.test.ts → ...ut-core-v5/utils/mapWidthToScreen.test.ts b/...ayout-core/utils/mapWidthToScreen.test.ts → ...ut-core-v5/utils/mapWidthToScreen.test.ts
diff --git a/blocks/layout-core/utils/mapWidthToScreen.ts → .../layout-core-v5/utils/mapWidthToScreen.ts b/blocks/layout-core/utils/mapWidthToScreen.ts → .../layout-core-v5/utils/mapWidthToScreen.ts
diff --git a/blocks/layout-core/utils/muiBreakpoints.ts → ...ks/layout-core-v5/utils/muiBreakpoints.ts b/blocks/layout-core/utils/muiBreakpoints.ts → ...ks/layout-core-v5/utils/muiBreakpoints.ts
diff --git a/...-core/utils/pickNearestBreakpoint.test.ts → ...re-v5/utils/pickNearestBreakpoint.test.ts b/...-core/utils/pickNearestBreakpoint.test.ts → ...re-v5/utils/pickNearestBreakpoint.test.ts
diff --git a/...ayout-core/utils/pickNearestBreakpoint.ts → ...ut-core-v5/utils/pickNearestBreakpoint.ts b/...ayout-core/utils/pickNearestBreakpoint.ts → ...ut-core-v5/utils/pickNearestBreakpoint.ts
diff --git a/blocks/layout-core/utils/toValidCssValue.ts → ...s/layout-core-v5/utils/toValidCssValue.ts b/blocks/layout-core/utils/toValidCssValue.ts → ...s/layout-core-v5/utils/toValidCssValue.ts
diff --git a/blocks/layout-core/utils/types.ts → blocks/layout-core-v5/utils/types.ts b/blocks/layout-core/utils/types.ts → 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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",