@btst/stack 4.0.0 → 4.1.0

package/dist/packages/stack/src/plugins/cms/client/components/pages/content-list-page.internal.mjs

@@ -10,6 +10,7 @@ import { cmsPermissions } from '../../../../../../../../plugins/cms/permissions.
 import { useListState } from '@btst/stack/client/hooks';
 import { orderCMSContentTypes } from '../../overrides.mjs';
 import { CMS_PLUGIN_ID } from '../../constants.mjs';
+import { cn } from '../../../utils.mjs';
 import { EmptyState } from '../shared/empty-state.mjs';
 import { PageWrapper } from '../shared/page-wrapper.mjs';
 import { useRouteLifecycle } from '../../../../../../../ui/src/hooks/use-route-lifecycle.mjs';
@@ -23,7 +24,7 @@ function ContentListPage({ typeSlug }) {
   const t = useTranslate();
   const notify = useNotify();
   const overrides = usePluginOverrides(CMS_PLUGIN_ID);
-  const { localization } = overrides;
+  const { localization, classNames } = overrides;
   const { router, plugins, basePath: stackBasePath } = useStack();
   const navigate = router?.navigate;
   const Link = router?.Link;
@@ -205,6 +206,7 @@ function ContentListPage({ typeSlug }) {
         hasMore,
         isLoadingMore,
         localization,
+        classNames,
         t
       }
     )
@@ -224,89 +226,107 @@ function ContentTable({
   hasMore,
   isLoadingMore,
   localization,
+  classNames,
   t
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "border rounded-lg", children: [
-    /* @__PURE__ */ jsxs(Table, { children: [
-      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
-        /* @__PURE__ */ jsx(TableHead, { children: localization?.CMS_LIST_COLUMN_SLUG ?? t("cms.list.columnSlug", "Slug") }),
-        /* @__PURE__ */ jsx(TableHead, { children: localization?.CMS_LIST_COLUMN_CREATED ?? t("cms.list.columnCreated", "Created") }),
-        /* @__PURE__ */ jsx(TableHead, { children: localization?.CMS_LIST_COLUMN_UPDATED ?? t("cms.list.columnUpdated", "Updated") }),
-        /* @__PURE__ */ jsx(TableHead, { className: "w-[100px]", children: localization?.CMS_LIST_COLUMN_ACTIONS ?? t("cms.list.columnActions", "Actions") })
-      ] }) }),
-      /* @__PURE__ */ jsx(TableBody, { children: items.map((item) => /* @__PURE__ */ jsxs(TableRow, { children: [
-        /* @__PURE__ */ jsx(TableCell, { className: "font-medium", children: /* @__PURE__ */ jsx(
-          LinkComponent,
-          {
-            href: joinBasePath(basePath, `/cms/${typeSlug}/${item.id}`),
-            className: "hover:underline",
-            children: item.slug
-          }
-        ) }),
-        /* @__PURE__ */ jsx(TableCell, { children: formatDate(item.createdAt) }),
-        /* @__PURE__ */ jsx(TableCell, { children: formatDate(item.updatedAt) }),
-        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx(
-            PermissionAccess,
-            {
-              permission: cmsPermissions.record.update({
-                contentType: item.contentType?.slug ?? typeSlug,
-                recordId: item.id,
-                ...item.authorId ? { authorId: item.authorId } : {}
-              }),
-              children: /* @__PURE__ */ jsx(
-                Button,
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("border rounded-lg", classNames?.table),
+      "data-testid": "cms-content-table",
+      children: [
+        /* @__PURE__ */ jsxs(Table, { children: [
+          /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__PURE__ */ jsx(TableHead, { children: localization?.CMS_LIST_COLUMN_SLUG ?? t("cms.list.columnSlug", "Slug") }),
+            /* @__PURE__ */ jsx(TableHead, { children: localization?.CMS_LIST_COLUMN_CREATED ?? t("cms.list.columnCreated", "Created") }),
+            /* @__PURE__ */ jsx(TableHead, { children: localization?.CMS_LIST_COLUMN_UPDATED ?? t("cms.list.columnUpdated", "Updated") }),
+            /* @__PURE__ */ jsx(TableHead, { className: "w-[100px]", children: localization?.CMS_LIST_COLUMN_ACTIONS ?? t("cms.list.columnActions", "Actions") })
+          ] }) }),
+          /* @__PURE__ */ jsx(TableBody, { children: items.map((item) => /* @__PURE__ */ jsxs(TableRow, { className: classNames?.tableRow, children: [
+            /* @__PURE__ */ jsx(TableCell, { className: "font-medium", children: /* @__PURE__ */ jsx(
+              LinkComponent,
+              {
+                href: joinBasePath(basePath, `/cms/${typeSlug}/${item.id}`),
+                className: "hover:underline",
+                children: item.slug
+              }
+            ) }),
+            /* @__PURE__ */ jsx(TableCell, { children: formatDate(item.createdAt) }),
+            /* @__PURE__ */ jsx(TableCell, { children: formatDate(item.updatedAt) }),
+            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(
+                PermissionAccess,
                 {
-                  variant: "ghost",
-                  size: "icon",
-                  onClick: () => void navigate?.(
-                    joinBasePath(basePath, `/cms/${typeSlug}/${item.id}`)
-                  ),
-                  children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" })
+                  permission: cmsPermissions.record.update({
+                    contentType: item.contentType?.slug ?? typeSlug,
+                    recordId: item.id,
+                    ...item.authorId ? { authorId: item.authorId } : {}
+                  }),
+                  children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      onClick: () => void navigate?.(
+                        joinBasePath(basePath, `/cms/${typeSlug}/${item.id}`)
+                      ),
+                      children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" })
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                PermissionAccess,
+                {
+                  permission: cmsPermissions.record.delete({
+                    contentType: item.contentType?.slug ?? typeSlug,
+                    recordId: item.id,
+                    ...item.authorId ? { authorId: item.authorId } : {}
+                  }),
+                  children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      onClick: () => onDelete(item.id),
+                      disabled: isDeleting,
+                      children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4 text-destructive" })
+                    }
+                  )
                 }
               )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            PermissionAccess,
-            {
-              permission: cmsPermissions.record.delete({
-                contentType: item.contentType?.slug ?? typeSlug,
-                recordId: item.id,
-                ...item.authorId ? { authorId: item.authorId } : {}
-              }),
-              children: /* @__PURE__ */ jsx(
+            ] }) })
+          ] }, item.id)) })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-between px-4 py-3 border-t",
+              classNames?.pagination
+            ),
+            "data-testid": "cms-content-pagination",
+            children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: (localization?.CMS_LIST_PAGINATION_SHOWING ?? t("cms.list.paginationShowing", "Showing {from}-{to} of {total}")).replace("{from}", "1").replace("{to}", String(items.length)).replace("{total}", String(total)) }),
+              hasMore && /* @__PURE__ */ jsxs(
                 Button,
                 {
-                  variant: "ghost",
-                  size: "icon",
-                  onClick: () => onDelete(item.id),
-                  disabled: isDeleting,
-                  children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4 text-destructive" })
+                  variant: "outline",
+                  size: "sm",
+                  onClick: () => loadMore(),
+                  disabled: isLoadingMore,
+                  children: [
+                    isLoadingMore && /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
+                    localization?.CMS_LIST_PAGINATION_NEXT ?? t("cms.list.paginationNext", "Next")
+                  ]
                 }
               )
-            }
-          )
-        ] }) })
-      ] }, item.id)) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: (localization?.CMS_LIST_PAGINATION_SHOWING ?? t("cms.list.paginationShowing", "Showing {from}-{to} of {total}")).replace("{from}", "1").replace("{to}", String(items.length)).replace("{total}", String(total)) }),
-      hasMore && /* @__PURE__ */ jsxs(
-        Button,
-        {
-          variant: "outline",
-          size: "sm",
-          onClick: () => loadMore(),
-          disabled: isLoadingMore,
-          children: [
-            isLoadingMore && /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
-            localization?.CMS_LIST_PAGINATION_NEXT ?? t("cms.list.paginationNext", "Next")
-          ]
-        }
-      )
-    ] })
-  ] });
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 
 export { ContentListPage };

package/dist/packages/stack/src/plugins/cms/client/components/pages/dashboard-page.internal.cjs

@@ -10,12 +10,13 @@ const constants = require('../../constants.cjs');
 const emptyState = require('../shared/empty-state.cjs');
 const pageWrapper = require('../shared/page-wrapper.cjs');
 const useRouteLifecycle = require('../../../../../../../ui/src/hooks/use-route-lifecycle.cjs');
+const utils = require('../../../utils.cjs');
 const cmsHooks = require('../../hooks/cms-hooks.cjs');
 
 function DashboardPage() {
   const t = context.useTranslate();
   const overrides$1 = context.usePluginOverrides(constants.CMS_PLUGIN_ID);
-  const { localization } = overrides$1;
+  const { localization, classNames } = overrides$1;
   const { router, plugins, basePath: stackBasePath } = context.useStack();
   const navigate = router?.navigate;
   const basePath = plugins?.[constants.CMS_PLUGIN_ID]?.site.basePath ?? stackBasePath;
@@ -67,11 +68,23 @@ function DashboardPage() {
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", children: contentTypes.map((ct) => /* @__PURE__ */ jsxRuntime.jsxs(
       card.Card,
       {
-        className: "hover:border-primary/50 transition-colors cursor-pointer",
+        className: utils.cn(
+          "hover:border-primary/50 transition-colors cursor-pointer",
+          classNames?.contentTypeCard
+        ),
         onClick: () => void navigate?.(context.joinBasePath(basePath, `/cms/${ct.slug}`)),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(card.CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(card.CardTitle, { className: "text-lg font-medium", children: ct.name }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              card.CardTitle,
+              {
+                className: utils.cn(
+                  "text-lg font-medium",
+                  classNames?.contentTypeTitle
+                ),
+                children: ct.name
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.FileText, { className: "h-5 w-5 text-muted-foreground" })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(card.CardContent, { children: [

package/dist/packages/stack/src/plugins/cms/client/components/pages/dashboard-page.internal.mjs

@@ -8,12 +8,13 @@ import { CMS_PLUGIN_ID } from '../../constants.mjs';
 import { EmptyState } from '../shared/empty-state.mjs';
 import { PageWrapper } from '../shared/page-wrapper.mjs';
 import { useRouteLifecycle } from '../../../../../../../ui/src/hooks/use-route-lifecycle.mjs';
+import { cn } from '../../../utils.mjs';
 import { useSuspenseContentTypes } from '../../hooks/cms-hooks.mjs';
 
 function DashboardPage() {
   const t = useTranslate();
   const overrides = usePluginOverrides(CMS_PLUGIN_ID);
-  const { localization } = overrides;
+  const { localization, classNames } = overrides;
   const { router, plugins, basePath: stackBasePath } = useStack();
   const navigate = router?.navigate;
   const basePath = plugins?.[CMS_PLUGIN_ID]?.site.basePath ?? stackBasePath;
@@ -65,11 +66,23 @@ function DashboardPage() {
     /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", children: contentTypes.map((ct) => /* @__PURE__ */ jsxs(
       Card,
       {
-        className: "hover:border-primary/50 transition-colors cursor-pointer",
+        className: cn(
+          "hover:border-primary/50 transition-colors cursor-pointer",
+          classNames?.contentTypeCard
+        ),
         onClick: () => void navigate?.(joinBasePath(basePath, `/cms/${ct.slug}`)),
         children: [
           /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
-            /* @__PURE__ */ jsx(CardTitle, { className: "text-lg font-medium", children: ct.name }),
+            /* @__PURE__ */ jsx(
+              CardTitle,
+              {
+                className: cn(
+                  "text-lg font-medium",
+                  classNames?.contentTypeTitle
+                ),
+                children: ct.name
+              }
+            ),
             /* @__PURE__ */ jsx(FileText, { className: "h-5 w-5 text-muted-foreground" })
           ] }),
           /* @__PURE__ */ jsxs(CardContent, { children: [

package/dist/packages/stack/src/plugins/cms/client/components/shared/page-wrapper.cjs

@@ -5,19 +5,20 @@ const jsxRuntime = require('react/jsx-runtime');
 const context = require('@btst/stack/context');
 const pageWrapper = require('../../../../../../../ui/src/components/page-wrapper.cjs');
 const constants = require('../../constants.cjs');
+const utils = require('../../../utils.cjs');
 
 function PageWrapper({
   children,
   className,
   testId
 }) {
-  const { showAttribution } = context.usePluginOverrides(constants.CMS_PLUGIN_ID, {
+  const { showAttribution, classNames } = context.usePluginOverrides(constants.CMS_PLUGIN_ID, {
     showAttribution: true
   });
   return /* @__PURE__ */ jsxRuntime.jsx(
     pageWrapper.PageWrapper,
     {
-      className,
+      className: utils.cn(className, classNames?.container),
       testId,
       showAttribution,
       children

package/dist/packages/stack/src/plugins/cms/client/components/shared/page-wrapper.mjs

@@ -3,19 +3,20 @@ import { jsx } from 'react/jsx-runtime';
 import { usePluginOverrides } from '@btst/stack/context';
 import { PageWrapper as PageWrapper$1 } from '../../../../../../../ui/src/components/page-wrapper.mjs';
 import { CMS_PLUGIN_ID } from '../../constants.mjs';
+import { cn } from '../../../utils.mjs';
 
 function PageWrapper({
   children,
   className,
   testId
 }) {
-  const { showAttribution } = usePluginOverrides(CMS_PLUGIN_ID, {
+  const { showAttribution, classNames } = usePluginOverrides(CMS_PLUGIN_ID, {
     showAttribution: true
   });
   return /* @__PURE__ */ jsx(
     PageWrapper$1,
     {
-      className,
+      className: cn(className, classNames?.container),
       testId,
       showAttribution,
       children

package/dist/packages/stack/src/plugins/cms/utils.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-require('clsx');
-require('tailwind-merge');
+const clsx = require('clsx');
+const tailwindMerge = require('tailwind-merge');
 const slug = require('slug');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
@@ -11,5 +11,9 @@ const slug__default = /*#__PURE__*/_interopDefaultCompat(slug);
 function slugify(text, locale = "en") {
   return slug__default(text, { lower: true, locale });
 }
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
 
+exports.cn = cn;
 exports.slugify = slugify;

package/dist/packages/stack/src/plugins/cms/utils.mjs

@@ -1,9 +1,12 @@
-import 'clsx';
-import 'tailwind-merge';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import slug from 'slug';
 
 function slugify(text, locale = "en") {
   return slug(text, { lower: true, locale });
 }
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
 
-export { slugify };
+export { cn, slugify };

package/dist/packages/stack/src/plugins/form-builder/client/components/forms/form-renderer.cjs

@@ -12,6 +12,7 @@ const LucideIcons = require('lucide-react');
 const formBuilderHooks = require('../../hooks/form-builder-hooks.cjs');
 const plugins_formBuilder_permissions = require('../../../../../../../../plugins/form-builder/permissions.cjs');
 const constants = require('../../constants.cjs');
+const utils = require('../../../utils.cjs');
 
 function DefaultLoadingComponent() {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
@@ -58,7 +59,12 @@ function FormRenderer({
   className
 }) {
   const t = context.useTranslate();
-  const { fieldComponents: overrideFieldComponents, localization } = context.usePluginOverrides(constants.FORM_BUILDER_PLUGIN_ID);
+  const {
+    fieldComponents: overrideFieldComponents,
+    localization,
+    classNames
+  } = context.usePluginOverrides(constants.FORM_BUILDER_PLUGIN_ID);
+  const formClassName = utils.cn(className, classNames?.form);
   const { form, isLoading, error } = formBuilderHooks.useFormBySlug(slug);
   const submitMutation = formBuilderHooks.useSubmitForm(slug);
   const [submitted, setSubmitted] = React.useState(false);
@@ -104,13 +110,13 @@ function FormRenderer({
     }
   };
   if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(LoadingComponent, {}) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: formClassName, children: /* @__PURE__ */ jsxRuntime.jsx(LoadingComponent, {}) });
   }
   if (error) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(ErrorComponent, { error }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: formClassName, children: /* @__PURE__ */ jsxRuntime.jsx(ErrorComponent, { error }) });
   }
   if (!form) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: formClassName, children: /* @__PURE__ */ jsxRuntime.jsx(
       ErrorComponent,
       {
         error: new Error(
@@ -120,7 +126,7 @@ function FormRenderer({
     ) });
   }
   if (form.status !== "active") {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: formClassName, children: /* @__PURE__ */ jsxRuntime.jsx(
       ErrorComponent,
       {
         error: new Error(
@@ -133,7 +139,7 @@ function FormRenderer({
     ) });
   }
   if (!zodSchema) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: formClassName, children: /* @__PURE__ */ jsxRuntime.jsx(
       ErrorComponent,
       {
         error: new Error(
@@ -146,7 +152,7 @@ function FormRenderer({
     ) });
   }
   if (submitted && finalSuccessMessage) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultSuccessComponent, { message: finalSuccessMessage }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: formClassName, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultSuccessComponent, { message: finalSuccessMessage }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
     context.PermissionAccess,
@@ -168,7 +174,7 @@ function FormRenderer({
             ...form.createdBy ? { ownerId: form.createdBy } : {},
             status: form.status
           }),
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className, "data-testid": "form-renderer", children: /* @__PURE__ */ jsxRuntime.jsx(
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: formClassName, "data-testid": "form-renderer", children: /* @__PURE__ */ jsxRuntime.jsx(
             steppedAutoForm.default,
             {
               formSchema: zodSchema,

package/dist/packages/stack/src/plugins/form-builder/client/components/forms/form-renderer.mjs

@@ -10,6 +10,7 @@ import { AlertCircle, CheckCircle } from 'lucide-react';
 import { useFormBySlug, useSubmitForm } from '../../hooks/form-builder-hooks.mjs';
 import { formBuilderPermissions } from '../../../../../../../../plugins/form-builder/permissions.mjs';
 import { FORM_BUILDER_PLUGIN_ID } from '../../constants.mjs';
+import { cn } from '../../../utils.mjs';
 
 function DefaultLoadingComponent() {
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
@@ -56,7 +57,12 @@ function FormRenderer({
   className
 }) {
   const t = useTranslate();
-  const { fieldComponents: overrideFieldComponents, localization } = usePluginOverrides(FORM_BUILDER_PLUGIN_ID);
+  const {
+    fieldComponents: overrideFieldComponents,
+    localization,
+    classNames
+  } = usePluginOverrides(FORM_BUILDER_PLUGIN_ID);
+  const formClassName = cn(className, classNames?.form);
   const { form, isLoading, error } = useFormBySlug(slug);
   const submitMutation = useSubmitForm(slug);
   const [submitted, setSubmitted] = useState(false);
@@ -102,13 +108,13 @@ function FormRenderer({
     }
   };
   if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(LoadingComponent, {}) });
+    return /* @__PURE__ */ jsx("div", { className: formClassName, children: /* @__PURE__ */ jsx(LoadingComponent, {}) });
   }
   if (error) {
-    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(ErrorComponent, { error }) });
+    return /* @__PURE__ */ jsx("div", { className: formClassName, children: /* @__PURE__ */ jsx(ErrorComponent, { error }) });
   }
   if (!form) {
-    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { className: formClassName, children: /* @__PURE__ */ jsx(
       ErrorComponent,
       {
         error: new Error(
@@ -118,7 +124,7 @@ function FormRenderer({
     ) });
   }
   if (form.status !== "active") {
-    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { className: formClassName, children: /* @__PURE__ */ jsx(
       ErrorComponent,
       {
         error: new Error(
@@ -131,7 +137,7 @@ function FormRenderer({
     ) });
   }
   if (!zodSchema) {
-    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { className: formClassName, children: /* @__PURE__ */ jsx(
       ErrorComponent,
       {
         error: new Error(
@@ -144,7 +150,7 @@ function FormRenderer({
     ) });
   }
   if (submitted && finalSuccessMessage) {
-    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(DefaultSuccessComponent, { message: finalSuccessMessage }) });
+    return /* @__PURE__ */ jsx("div", { className: formClassName, children: /* @__PURE__ */ jsx(DefaultSuccessComponent, { message: finalSuccessMessage }) });
   }
   return /* @__PURE__ */ jsx(
     PermissionAccess,
@@ -166,7 +172,7 @@ function FormRenderer({
             ...form.createdBy ? { ownerId: form.createdBy } : {},
             status: form.status
           }),
-          children: /* @__PURE__ */ jsx("div", { className, "data-testid": "form-renderer", children: /* @__PURE__ */ jsx(
+          children: /* @__PURE__ */ jsx("div", { className: formClassName, "data-testid": "form-renderer", children: /* @__PURE__ */ jsx(
             SteppedAutoForm,
             {
               formSchema: zodSchema,