@loykin/designkit 0.0.1-dev.7 → 0.0.2

package/dist/index.d.cts

@@ -330,6 +330,12 @@ interface WorkbenchBodyTemplateProps {
 }
 declare function WorkbenchBodyTemplate({ theme, className, contentClassName, title, description, status, topBar, headerRight, actions, leftPane, mainPane, rightPane, bottomPane, children, resizable, leftPaneCollapsed, rightPaneCollapsed, bottomPaneCollapsed, leftPaneWidth, rightPaneWidth, bottomPaneHeight, minLeftPaneWidth, maxLeftPaneWidth, minRightPaneWidth, maxRightPaneWidth, minBottomPaneHeight, maxBottomPaneHeight, onResize, leftPaneClassName, mainPaneClassName, rightPaneClassName, bottomPaneClassName, leftPaneLabel, rightPaneLabel, }: WorkbenchBodyTemplateProps): React__default.JSX.Element;
 
+/**
+ * Defines one tab inside `DataBodyTemplate`.
+ *
+ * Must be rendered beneath a `DataBodyTemplate` root. Do not mix `Tab`, `Section`,
+ * and `Body` as sibling layout modes in the same root.
+ */
 interface DataBodyTabProps {
     id: string;
     label: React__default.ReactNode;
@@ -338,11 +344,23 @@ interface DataBodyTabProps {
     children: React__default.ReactNode;
 }
 declare function DataBodyTab(_props: DataBodyTabProps): null;
+/**
+ * Defines the single-pane body of `DataBodyTemplate`.
+ *
+ * Must be rendered beneath a `DataBodyTemplate` root. Use this instead of `Tab`
+ * or `Section` when the page has one full-height content pane.
+ */
 interface DataBodyBodyProps {
     children?: React__default.ReactNode;
     className?: string;
 }
 declare function DataBodyBody(_props: DataBodyBodyProps): null;
+/**
+ * Defines one section in the left-navigation layout of `DataBodyTemplate`.
+ *
+ * Must be rendered beneath a `DataBodyTemplate` root. Do not combine sections
+ * with `Tab` or `Body` siblings in the same root.
+ */
 interface DataBodySectionProps {
     id: string;
     label: React__default.ReactNode;
@@ -351,14 +369,24 @@ interface DataBodySectionProps {
     children?: React__default.ReactNode;
 }
 declare function DataBodySection(_props: DataBodySectionProps): null;
+/** Adds summary content beneath the header of a `DataBodyTemplate` root. */
 interface DataBodySummaryProps {
     children?: React__default.ReactNode;
 }
 declare function DataBodySummary(_props: DataBodySummaryProps): null;
 type GroupLayout = 'stacked' | 'horizontal' | 'inline' | 'split';
 type GroupVariant = 'card' | 'plain' | 'bordered';
+/**
+ * Groups related content inside `DataBodyTemplate`.
+ *
+ * `DataBodyTemplate.Group` is a compound child and must never be rendered as a
+ * standalone page component. Wrap it in `DataBodyTemplate`, optionally inside a
+ * `Tab`, `Section`, or `Body`.
+ */
 interface DataBodyGroupProps {
+    /** Visual arrangement of the group. @defaultValue `'stacked'` */
     layout?: GroupLayout;
+    /** Surface treatment. Defaults depend on `layout`. */
     variant?: GroupVariant;
     title?: React__default.ReactNode;
     description?: React__default.ReactNode;
@@ -368,12 +396,14 @@ interface DataBodyGroupProps {
     children?: React__default.ReactNode;
 }
 declare function DataBodyGroup(props: DataBodyGroupProps): React__default.JSX.Element;
+/** Read-only label/value content for a `DataBodyTemplate.Group`. */
 interface DataBodyFieldProps {
     label: string;
     description?: string;
     children?: React__default.ReactNode;
 }
 declare function DataBodyField({ label, description, children }: DataBodyFieldProps): React__default.JSX.Element;
+/** Form label/control content for a `DataBodyTemplate.Group`. */
 interface DataBodyRowProps {
     label: string;
     description?: string;
@@ -381,6 +411,12 @@ interface DataBodyRowProps {
     children?: React__default.ReactNode;
 }
 declare function DataBodyRow({ label, description, required, children }: DataBodyRowProps): React__default.JSX.Element;
+/**
+ * Props for the required root of the `DataBodyTemplate` compound component.
+ *
+ * Choose one primary child mode: direct content/groups, `Tab`, `Section`, or
+ * `Body`. Do not combine those layout modes in the same root.
+ */
 interface DataBodyTemplateProps {
     theme?: React__default.CSSProperties;
     className?: string;
@@ -397,7 +433,25 @@ interface DataBodyTemplateProps {
     children?: React__default.ReactNode;
     contentClassName?: string;
 }
-declare function Root$1({ theme, className, topBar, title, description, status, actions, toolbarLeft, toolbarRight, activeTab: controlledActive, defaultTab, onTabChange, children, contentClassName, }: DataBodyTemplateProps): React__default.JSX.Element;
+declare function Root$1(props: DataBodyTemplateProps): React__default.JSX.Element;
+/**
+ * Page-level template for data, list, tab, form, and settings experiences.
+ *
+ * Compound members such as `DataBodyTemplate.Group`, `Tab`, `Section`, `Body`,
+ * `Row`, and `Field` must be rendered beneath this root. Rendering a compound
+ * member without the root throws a descriptive runtime error.
+ *
+ * @example
+ * ```tsx
+ * <DataBodyTemplate title="Settings">
+ *   <DataBodyTemplate.Group title="Profile">
+ *     <DataBodyTemplate.Row label="Name">
+ *       <Input />
+ *     </DataBodyTemplate.Row>
+ *   </DataBodyTemplate.Group>
+ * </DataBodyTemplate>
+ * ```
+ */
 declare const DataBodyTemplate: typeof Root$1 & {
     Body: typeof DataBodyBody;
     Tab: typeof DataBodyTab;
@@ -443,6 +497,8 @@ interface DetailBodyTemplateProps {
     aside?: React__default.ReactNode;
     summary?: React__default.ReactNode;
     stickyAside?: boolean;
+    /** Class applied to the inner content + aside layout container. */
+    layoutClassName?: string;
     contentClassName?: string;
     mediaClassName?: string;
     asideClassName?: string;
@@ -475,7 +531,7 @@ interface DetailBodySectionProps {
     children?: React__default.ReactNode;
 }
 declare function DetailBodySection({ title, description, actions, surface, className, children, }: DetailBodySectionProps): React__default.JSX.Element;
-declare function DetailBodyTemplateRoot({ variant, theme, className, topBar, header, lead, eyebrow, title, description, status, actions, media, aside, summary, stickyAside, contentClassName, mediaClassName, asideClassName, children, }: DetailBodyTemplateProps): React__default.JSX.Element;
+declare function DetailBodyTemplateRoot({ variant, theme, className, topBar, header, lead, eyebrow, title, description, status, actions, media, aside, summary, stickyAside, layoutClassName, contentClassName, mediaClassName, asideClassName, children, }: DetailBodyTemplateProps): React__default.JSX.Element;
 declare const DetailBodyTemplate: typeof DetailBodyTemplateRoot & {
     Header: typeof DetailBodyHeader;
     Tab: typeof DetailBodyTab;

package/dist/index.d.ts

@@ -330,6 +330,12 @@ interface WorkbenchBodyTemplateProps {
 }
 declare function WorkbenchBodyTemplate({ theme, className, contentClassName, title, description, status, topBar, headerRight, actions, leftPane, mainPane, rightPane, bottomPane, children, resizable, leftPaneCollapsed, rightPaneCollapsed, bottomPaneCollapsed, leftPaneWidth, rightPaneWidth, bottomPaneHeight, minLeftPaneWidth, maxLeftPaneWidth, minRightPaneWidth, maxRightPaneWidth, minBottomPaneHeight, maxBottomPaneHeight, onResize, leftPaneClassName, mainPaneClassName, rightPaneClassName, bottomPaneClassName, leftPaneLabel, rightPaneLabel, }: WorkbenchBodyTemplateProps): React__default.JSX.Element;
 
+/**
+ * Defines one tab inside `DataBodyTemplate`.
+ *
+ * Must be rendered beneath a `DataBodyTemplate` root. Do not mix `Tab`, `Section`,
+ * and `Body` as sibling layout modes in the same root.
+ */
 interface DataBodyTabProps {
     id: string;
     label: React__default.ReactNode;
@@ -338,11 +344,23 @@ interface DataBodyTabProps {
     children: React__default.ReactNode;
 }
 declare function DataBodyTab(_props: DataBodyTabProps): null;
+/**
+ * Defines the single-pane body of `DataBodyTemplate`.
+ *
+ * Must be rendered beneath a `DataBodyTemplate` root. Use this instead of `Tab`
+ * or `Section` when the page has one full-height content pane.
+ */
 interface DataBodyBodyProps {
     children?: React__default.ReactNode;
     className?: string;
 }
 declare function DataBodyBody(_props: DataBodyBodyProps): null;
+/**
+ * Defines one section in the left-navigation layout of `DataBodyTemplate`.
+ *
+ * Must be rendered beneath a `DataBodyTemplate` root. Do not combine sections
+ * with `Tab` or `Body` siblings in the same root.
+ */
 interface DataBodySectionProps {
     id: string;
     label: React__default.ReactNode;
@@ -351,14 +369,24 @@ interface DataBodySectionProps {
     children?: React__default.ReactNode;
 }
 declare function DataBodySection(_props: DataBodySectionProps): null;
+/** Adds summary content beneath the header of a `DataBodyTemplate` root. */
 interface DataBodySummaryProps {
     children?: React__default.ReactNode;
 }
 declare function DataBodySummary(_props: DataBodySummaryProps): null;
 type GroupLayout = 'stacked' | 'horizontal' | 'inline' | 'split';
 type GroupVariant = 'card' | 'plain' | 'bordered';
+/**
+ * Groups related content inside `DataBodyTemplate`.
+ *
+ * `DataBodyTemplate.Group` is a compound child and must never be rendered as a
+ * standalone page component. Wrap it in `DataBodyTemplate`, optionally inside a
+ * `Tab`, `Section`, or `Body`.
+ */
 interface DataBodyGroupProps {
+    /** Visual arrangement of the group. @defaultValue `'stacked'` */
     layout?: GroupLayout;
+    /** Surface treatment. Defaults depend on `layout`. */
     variant?: GroupVariant;
     title?: React__default.ReactNode;
     description?: React__default.ReactNode;
@@ -368,12 +396,14 @@ interface DataBodyGroupProps {
     children?: React__default.ReactNode;
 }
 declare function DataBodyGroup(props: DataBodyGroupProps): React__default.JSX.Element;
+/** Read-only label/value content for a `DataBodyTemplate.Group`. */
 interface DataBodyFieldProps {
     label: string;
     description?: string;
     children?: React__default.ReactNode;
 }
 declare function DataBodyField({ label, description, children }: DataBodyFieldProps): React__default.JSX.Element;
+/** Form label/control content for a `DataBodyTemplate.Group`. */
 interface DataBodyRowProps {
     label: string;
     description?: string;
@@ -381,6 +411,12 @@ interface DataBodyRowProps {
     children?: React__default.ReactNode;
 }
 declare function DataBodyRow({ label, description, required, children }: DataBodyRowProps): React__default.JSX.Element;
+/**
+ * Props for the required root of the `DataBodyTemplate` compound component.
+ *
+ * Choose one primary child mode: direct content/groups, `Tab`, `Section`, or
+ * `Body`. Do not combine those layout modes in the same root.
+ */
 interface DataBodyTemplateProps {
     theme?: React__default.CSSProperties;
     className?: string;
@@ -397,7 +433,25 @@ interface DataBodyTemplateProps {
     children?: React__default.ReactNode;
     contentClassName?: string;
 }
-declare function Root$1({ theme, className, topBar, title, description, status, actions, toolbarLeft, toolbarRight, activeTab: controlledActive, defaultTab, onTabChange, children, contentClassName, }: DataBodyTemplateProps): React__default.JSX.Element;
+declare function Root$1(props: DataBodyTemplateProps): React__default.JSX.Element;
+/**
+ * Page-level template for data, list, tab, form, and settings experiences.
+ *
+ * Compound members such as `DataBodyTemplate.Group`, `Tab`, `Section`, `Body`,
+ * `Row`, and `Field` must be rendered beneath this root. Rendering a compound
+ * member without the root throws a descriptive runtime error.
+ *
+ * @example
+ * ```tsx
+ * <DataBodyTemplate title="Settings">
+ *   <DataBodyTemplate.Group title="Profile">
+ *     <DataBodyTemplate.Row label="Name">
+ *       <Input />
+ *     </DataBodyTemplate.Row>
+ *   </DataBodyTemplate.Group>
+ * </DataBodyTemplate>
+ * ```
+ */
 declare const DataBodyTemplate: typeof Root$1 & {
     Body: typeof DataBodyBody;
     Tab: typeof DataBodyTab;
@@ -443,6 +497,8 @@ interface DetailBodyTemplateProps {
     aside?: React__default.ReactNode;
     summary?: React__default.ReactNode;
     stickyAside?: boolean;
+    /** Class applied to the inner content + aside layout container. */
+    layoutClassName?: string;
     contentClassName?: string;
     mediaClassName?: string;
     asideClassName?: string;
@@ -475,7 +531,7 @@ interface DetailBodySectionProps {
     children?: React__default.ReactNode;
 }
 declare function DetailBodySection({ title, description, actions, surface, className, children, }: DetailBodySectionProps): React__default.JSX.Element;
-declare function DetailBodyTemplateRoot({ variant, theme, className, topBar, header, lead, eyebrow, title, description, status, actions, media, aside, summary, stickyAside, contentClassName, mediaClassName, asideClassName, children, }: DetailBodyTemplateProps): React__default.JSX.Element;
+declare function DetailBodyTemplateRoot({ variant, theme, className, topBar, header, lead, eyebrow, title, description, status, actions, media, aside, summary, stickyAside, layoutClassName, contentClassName, mediaClassName, asideClassName, children, }: DetailBodyTemplateProps): React__default.JSX.Element;
 declare const DetailBodyTemplate: typeof DetailBodyTemplateRoot & {
     Header: typeof DetailBodyHeader;
     Tab: typeof DetailBodyTab;

package/dist/index.js

@@ -3,7 +3,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Button as Button$1 } from '@base-ui/react/button';
 import { cva } from 'class-variance-authority';
-import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Avatar as Avatar$1 } from '@base-ui/react/avatar';
 import { mergeProps } from '@base-ui/react/merge-props';
 import { useRender } from '@base-ui/react/use-render';
@@ -18,7 +18,7 @@ import { Select as Select$1 } from '@base-ui/react/select';
 import { Separator as Separator$1 } from '@base-ui/react/separator';
 import { Dialog } from '@base-ui/react/dialog';
 import * as React2 from 'react';
-import React2__default, { createContext, forwardRef, useContext, useEffect, useMemo, Children, useState, Fragment, useCallback } from 'react';
+import React2__default, { createContext, forwardRef, useContext, useEffect, useMemo, Children, useState, Fragment as Fragment$1, useCallback } from 'react';
 import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
 import { Slider as Slider$1 } from '@base-ui/react/slider';
 import { Switch as Switch$1 } from '@base-ui/react/switch';
@@ -1458,7 +1458,7 @@ function Sidebar({
             /* @__PURE__ */ jsx(SheetTitle, { children: "Sidebar" }),
             /* @__PURE__ */ jsx(SheetDescription, { children: "Displays the mobile sidebar." })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex h-full w-full flex-col", children })
+          /* @__PURE__ */ jsx("div", { className: "flex h-full min-h-0 w-full flex-col", children })
         ]
       }
     ) });
@@ -2645,7 +2645,7 @@ function WorkbenchBodyTemplate({
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-0 flex-1 overflow-hidden", contentClassName), children: [
-      showLeftPane && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      showLeftPane && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
           "aside",
           {
@@ -2684,8 +2684,8 @@ function WorkbenchBodyTemplate({
         )
       ] }),
       /* @__PURE__ */ jsxs("main", { className: cn("flex min-w-0 flex-1 flex-col overflow-hidden", mainPaneClassName), children: [
-        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: mainPane ?? children }),
-        showBottomPane && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: mainPane ?? children }),
+        showBottomPane && /* @__PURE__ */ jsxs(Fragment, { children: [
           resizable && /* @__PURE__ */ jsx(
             ResizeHandle,
             {
@@ -2724,7 +2724,7 @@ function WorkbenchBodyTemplate({
           )
         ] })
       ] }),
-      showRightPane && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      showRightPane && /* @__PURE__ */ jsxs(Fragment, { children: [
         resizable && /* @__PURE__ */ jsx(
           ResizeHandle,
           {
@@ -2765,19 +2765,30 @@ function WorkbenchBodyTemplate({
     ] })
   ] });
 }
+var DataBodyTemplateContext = React2__default.createContext(false);
+function useDataBodyTemplateParent(component) {
+  if (!React2__default.useContext(DataBodyTemplateContext)) {
+    throw new Error(
+      `[DesignKit] <DataBodyTemplate.${component}> must be rendered inside <DataBodyTemplate>. Wrap it like: <DataBodyTemplate><DataBodyTemplate.${component}>...</DataBodyTemplate.${component}></DataBodyTemplate>.`
+    );
+  }
+}
 function DataBodyTab(_props) {
+  useDataBodyTemplateParent("Tab");
   return null;
 }
 function isDataBodyTab(node) {
   return Boolean(node && typeof node === "object" && "type" in node && node.type === DataBodyTab);
 }
 function DataBodyBody(_props) {
+  useDataBodyTemplateParent("Body");
   return null;
 }
 function isDataBodyBody(node) {
   return Boolean(node && typeof node === "object" && "type" in node && node.type === DataBodyBody);
 }
 function DataBodySection(_props) {
+  useDataBodyTemplateParent("Section");
   return null;
 }
 function isDataBodySection(node) {
@@ -2786,6 +2797,7 @@ function isDataBodySection(node) {
   );
 }
 function DataBodySummary(_props) {
+  useDataBodyTemplateParent("Summary");
   return null;
 }
 function isDataBodySummary(node) {
@@ -2800,6 +2812,7 @@ var layoutDefaultVariant = {
   split: "bordered"
 };
 function DataBodyGroup(props) {
+  useDataBodyTemplateParent("Group");
   return renderGroupProps(props);
 }
 function isDataBodyGroup(node) {
@@ -2819,12 +2832,12 @@ function GroupWrapper({
     }
     return /* @__PURE__ */ jsx("div", { className: "rounded-(--radius) border border-border p-(--designkit-panel-gap)", children });
   }
-  return /* @__PURE__ */ jsx(Fragment$1, { children });
+  return /* @__PURE__ */ jsx(Fragment, { children });
 }
 function renderGroups(nodes) {
   const childArray = Children.toArray(nodes);
   if (!childArray.some(isDataBodyGroup)) return nodes;
-  return /* @__PURE__ */ jsx(Fragment$1, { children: childArray.map((child, i) => /* @__PURE__ */ jsx(Fragment, { children: isDataBodyGroup(child) ? renderGroup(child) : child }, i)) });
+  return /* @__PURE__ */ jsx(Fragment, { children: childArray.map((child, i) => /* @__PURE__ */ jsx(Fragment$1, { children: isDataBodyGroup(child) ? renderGroup(child) : child }, i)) });
 }
 function renderGroup(group) {
   return renderGroupProps(group.props);
@@ -2897,6 +2910,7 @@ function renderGroupProps(props) {
   ] });
 }
 function DataBodyField({ label, description, children }) {
+  useDataBodyTemplateParent("Field");
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -2913,6 +2927,7 @@ function DataBodyField({ label, description, children }) {
   );
 }
 function DataBodyRow({ label, description, required, children }) {
+  useDataBodyTemplateParent("Row");
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -2935,7 +2950,7 @@ function TopBarSlot({ topBar }) {
   if (!topBar) return null;
   return /* @__PURE__ */ jsx("div", { className: "shrink-0", children: topBar });
 }
-function Root2({
+function RootContent({
   theme,
   className,
   topBar,
@@ -3041,10 +3056,13 @@ function Root2({
         /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-2", children: toolbarLeft }),
         /* @__PURE__ */ jsx(DataPage.Actions, { children: toolbarRight })
       ] }),
-      hasTabs ? /* @__PURE__ */ jsx(DataPage.GroupBody, { className: "min-h-full", children: renderGroups(activeTabNode?.props.children) }) : /* @__PURE__ */ jsx(DataPage.GroupBody, { children: bodyChildren.map((child, i) => /* @__PURE__ */ jsx(Fragment, { children: isDataBodyGroup(child) ? renderGroup(child) : child }, i)) })
+      hasTabs ? /* @__PURE__ */ jsx(DataPage.GroupBody, { className: "min-h-full", children: renderGroups(activeTabNode?.props.children) }) : /* @__PURE__ */ jsx(DataPage.GroupBody, { children: bodyChildren.map((child, i) => /* @__PURE__ */ jsx(Fragment$1, { children: isDataBodyGroup(child) ? renderGroup(child) : child }, i)) })
     ] })
   ] });
 }
+function Root2(props) {
+  return /* @__PURE__ */ jsx(DataBodyTemplateContext.Provider, { value: true, children: /* @__PURE__ */ jsx(RootContent, { ...props }) });
+}
 var DataBodyTemplate = Object.assign(Root2, {
   Body: DataBodyBody,
   Tab: DataBodyTab,
@@ -3122,7 +3140,7 @@ function BrowseBodyTemplate({
           "div",
           {
             className: cn(
-              "min-w-0 flex-1 overflow-hidden px-(--designkit-page-padding-x) py-(--designkit-page-padding-y)",
+              "min-w-0 flex-1 overflow-auto px-(--designkit-page-padding-x) py-(--designkit-page-padding-y)",
               "[&_.gridkit-shell]:h-full [&_.gridkit-table-stack]:flex-1 [&_.gridkit-table-stack]:min-h-0",
               "[&_.gridkit-frame]:flex-1 [&_.gridkit-frame]:min-h-0 [&_.gridkit-frame]:overflow-auto",
               contentClassName
@@ -3193,7 +3211,7 @@ function DetailBodySection({
   );
 }
 function renderChildren(nodes) {
-  return Children.toArray(nodes).map((child, i) => /* @__PURE__ */ jsx(Fragment, { children: child }, i));
+  return Children.toArray(nodes).map((child, i) => /* @__PURE__ */ jsx(Fragment$1, { children: child }, i));
 }
 function DetailBodyTemplateRoot({
   variant = "record",
@@ -3211,6 +3229,7 @@ function DetailBodyTemplateRoot({
   aside,
   summary,
   stickyAside = true,
+  layoutClassName,
   contentClassName,
   mediaClassName,
   asideClassName,
@@ -3267,7 +3286,7 @@ function DetailBodyTemplateRoot({
   const hasRecordInspector = Boolean(leadSlot);
   const hasFullLeadArea = Boolean(leadSlot || insideAsideSlot);
   const layout = {
-    media: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    media: /* @__PURE__ */ jsxs(Fragment, { children: [
       leadSlot && /* @__PURE__ */ jsx("div", { className: "mb-(--designkit-panel-gap)", children: leadSlot }),
       body
     ] }),
@@ -3284,7 +3303,7 @@ function DetailBodyTemplateRoot({
         ]
       }
     ),
-    full: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    full: /* @__PURE__ */ jsxs(Fragment, { children: [
       hasFullLeadArea && /* @__PURE__ */ jsxs(
         "div",
         {
@@ -3324,7 +3343,8 @@ function DetailBodyTemplateRoot({
           {
             className: cn(
               "grid h-full min-h-0 grid-cols-1 overflow-hidden",
-              outsideAsideSlot && "lg:grid-cols-[minmax(0,1fr)_minmax(18rem,24rem)]"
+              outsideAsideSlot && "lg:grid-cols-[minmax(0,1fr)_minmax(18rem,24rem)]",
+              layoutClassName
             ),
             children: [
               /* @__PURE__ */ jsx(
@@ -3491,7 +3511,7 @@ function FormWizardBodyTemplate({
   return /* @__PURE__ */ jsxs(DataPage, { className: "layout-form-wizard", style: theme, children: [
     topBar && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: topBar }),
     /* @__PURE__ */ jsx(DataPage.Header, { children: /* @__PURE__ */ jsx(DataPage.TitleBlock, { title, status }) }),
-    /* @__PURE__ */ jsx("div", { className: "shrink-0 px-(--designkit-page-padding-x) pb-4", children: /* @__PURE__ */ jsx("div", { className: "flex items-center", children: steps.map((step, i) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "shrink-0 px-(--designkit-page-padding-x) pb-4", children: /* @__PURE__ */ jsx("div", { className: "flex items-center", children: steps.map((step, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
       i > 0 && /* @__PURE__ */ jsx(
         "div",
         {