@questpie/admin 3.0.2 → 3.0.4

package/dist/client/views/auth/auth-layout.d.mts

@@ -1,7 +1,13 @@
 import * as React from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/client/views/auth/auth-layout.d.ts
+
+/**
+ * Props for the auth layout — and for any custom `adminAuthLayout` override.
+ *
+ * Export path: `@questpie/admin/client`
+ */
 type AuthLayoutProps = {
   /** Page title */
   title: string;
@@ -17,7 +23,15 @@ type AuthLayoutProps = {
   className?: string;
 };
 /**
- * Centered layout for authentication pages (login, register, forgot password, etc.)
+ * Minimal split layout for authentication pages (login, register, forgot password, etc.)
+ *
+ * Checks `adminAuthLayout` in the component registry (registered via
+ * `questpie/admin/components/admin-auth-layout.tsx`) and renders it when present,
+ * falling back to the built-in minimal split layout.
+ *
+ * Works without `<AdminProvider>` and falls back to the built-in layout.
+ * When used inside `<AdminProvider>`, a registered `adminAuthLayout` override
+ * can replace the built-in layout.
  *
  * @example
  * ```tsx
@@ -31,13 +45,6 @@ type AuthLayoutProps = {
  * </AuthLayout>
  * ```
  */
-declare function AuthLayout({
-  title,
-  description,
-  logo,
-  footer,
-  children,
-  className
-}: AuthLayoutProps): react_jsx_runtime0.JSX.Element;
+declare function AuthLayout(props: AuthLayoutProps): react_jsx_runtime1.JSX.Element;
 //#endregion
-export { AuthLayout };
+export { AuthLayout, AuthLayoutProps };

package/dist/client/views/auth/auth-layout.mjs

@@ -1,116 +1,327 @@
 import { cn } from "../../lib/utils.mjs";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../components/ui/card.mjs";
+import { useAdminStoreRaw } from "../../runtime/provider.mjs";
+import { Card, CardContent } from "../../components/ui/card.mjs";
+import { useLazyComponent } from "../../utils/use-lazy-component.mjs";
+import { useHasManagedAdminTheme, useManagedAdminTheme } from "../layout/admin-theme.mjs";
 import { c } from "react/compiler-runtime";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/client/views/auth/auth-layout.tsx
 /**
-* Centered layout for authentication pages (login, register, forgot password, etc.)
+* Auth Layout - minimal shell for authentication pages
 *
-* @example
-* ```tsx
-* <AuthLayout
-*   title="Sign in"
-*   description="Enter your credentials to access the admin panel"
-*   logo={<Logo />}
-*   footer={<Link to="/forgot-password">Forgot password?</Link>}
-* >
-*   <LoginForm />
-* </AuthLayout>
-* ```
+* Supports a file-first override via `questpie/admin/components/admin-auth-layout.tsx`.
+* When that component is registered in the admin-client registry under the reserved
+* key `adminAuthLayout`, it replaces the entire layout — all existing auth pages
+* using `AuthLayout` are automatically affected.
+*
+* Works without `AdminProvider`. When an AdminProvider is present, a registered
+* `adminAuthLayout` override can replace the built-in layout.
 */
-function AuthLayout(t0) {
-	const $ = c(23);
-	const { title, description, logo, footer, children, className } = t0;
+function AuthBrandMark(t0) {
+	const $ = c(9);
+	const { className, decorative: t1 } = t0;
+	const decorative = t1 === void 0 ? false : t1;
+	let t2;
+	if ($[0] !== className) {
+		t2 = cn("text-foreground size-16 shrink-0", className);
+		$[0] = className;
+		$[1] = t2;
+	} else t2 = $[1];
+	const t3 = decorative ? true : void 0;
+	const t4 = decorative ? void 0 : "QUESTPIE";
+	let t5;
+	let t6;
+	let t7;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx("path", {
+			d: "M2 2H22V10",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "square"
+		});
+		t6 = /* @__PURE__ */ jsx("path", {
+			d: "M2 2V22H10",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "square"
+		});
+		t7 = /* @__PURE__ */ jsx("path", {
+			d: "M23 13H13V23H23V13Z",
+			fill: "currentColor",
+			opacity: "0.72"
+		});
+		$[2] = t5;
+		$[3] = t6;
+		$[4] = t7;
+	} else {
+		t5 = $[2];
+		t6 = $[3];
+		t7 = $[4];
+	}
+	let t8;
+	if ($[5] !== t2 || $[6] !== t3 || $[7] !== t4) {
+		t8 = /* @__PURE__ */ jsxs("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			className: t2,
+			"aria-hidden": t3,
+			"aria-label": t4,
+			children: [
+				t5,
+				t6,
+				t7
+			]
+		});
+		$[5] = t2;
+		$[6] = t3;
+		$[7] = t4;
+		$[8] = t8;
+	} else t8 = $[8];
+	return t8;
+}
+function AuthDefaultLogo(t0) {
+	const $ = c(3);
+	const { brandName } = t0;
 	let t1;
-	if ($[0] !== logo) {
-		t1 = logo && /* @__PURE__ */ jsx("div", {
-			className: "qa-auth-layout__logo flex justify-center",
-			children: logo
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(AuthBrandMark, {
+			className: "size-9",
+			decorative: true
 		});
-		$[0] = logo;
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== brandName) {
+		t2 = /* @__PURE__ */ jsxs("div", {
+			className: "qa-auth-layout__default-logo flex max-w-full min-w-0 items-center gap-3 text-left",
+			children: [t1, /* @__PURE__ */ jsx("div", {
+				className: "min-w-0",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "text-foreground truncate text-sm font-semibold tracking-tight",
+					children: brandName
+				})
+			})]
+		});
+		$[1] = brandName;
+		$[2] = t2;
+	} else t2 = $[2];
+	return t2;
+}
+function AuthLogo(t0) {
+	const $ = c(7);
+	const { logo, className } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = cn("qa-auth-layout__logo flex min-w-0 items-center justify-start text-left", className);
+		$[0] = className;
 		$[1] = t1;
 	} else t1 = $[1];
 	let t2;
-	if ($[2] !== className) {
-		t2 = cn("qa-auth-layout__card w-full", className);
-		$[2] = className;
+	if ($[2] !== logo) {
+		t2 = logo ?? /* @__PURE__ */ jsx(AuthDefaultLogo, { brandName: "QUESTPIE" });
+		$[2] = logo;
 		$[3] = t2;
 	} else t2 = $[3];
 	let t3;
-	if ($[4] !== title) {
-		t3 = /* @__PURE__ */ jsx(CardTitle, {
-			className: "text-lg",
-			children: title
-		});
-		$[4] = title;
-		$[5] = t3;
-	} else t3 = $[5];
+	if ($[4] !== t1 || $[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			children: t2
+		});
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+}
+/** Built-in minimal split layout (fallback when no override is registered). */
+function AuthLayoutBuiltIn(t0) {
+	const $ = c(21);
+	const { logo, footer, children, className } = t0;
+	let t1;
+	if ($[0] !== logo) {
+		t1 = /* @__PURE__ */ jsx(AuthLogo, {
+			logo,
+			className: "max-w-[calc(100vw-2.5rem)]"
+		});
+		$[0] = logo;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground hidden text-xs tracking-[0.14em] uppercase lg:block",
+			children: "Built with QUESTPIE"
+		});
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== t1) {
+		t3 = /* @__PURE__ */ jsxs("aside", {
+			className: "qa-auth-layout__brand flex flex-col items-center justify-center gap-8",
+			children: [t1, t2]
+		});
+		$[3] = t1;
+		$[4] = t3;
+	} else t3 = $[4];
 	let t4;
-	if ($[6] !== description) {
-		t4 = description && /* @__PURE__ */ jsx(CardDescription, { children: description });
-		$[6] = description;
-		$[7] = t4;
-	} else t4 = $[7];
+	if ($[5] !== className) {
+		t4 = cn("qa-auth-layout__card border-border-subtle w-full shadow-none", className);
+		$[5] = className;
+		$[6] = t4;
+	} else t4 = $[6];
 	let t5;
-	if ($[8] !== t3 || $[9] !== t4) {
-		t5 = /* @__PURE__ */ jsxs(CardHeader, {
-			className: "qa-auth-layout__card-header text-center",
-			children: [t3, t4]
-		});
-		$[8] = t3;
-		$[9] = t4;
-		$[10] = t5;
-	} else t5 = $[10];
-	let t6;
-	if ($[11] !== children) {
-		t6 = /* @__PURE__ */ jsx(CardContent, {
+	if ($[7] !== children) {
+		t5 = /* @__PURE__ */ jsx(CardContent, {
 			className: "qa-auth-layout__card-content",
 			children
 		});
-		$[11] = children;
-		$[12] = t6;
-	} else t6 = $[12];
-	let t7;
-	if ($[13] !== t2 || $[14] !== t5 || $[15] !== t6) {
-		t7 = /* @__PURE__ */ jsxs(Card, {
-			className: t2,
-			children: [t5, t6]
+		$[7] = children;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== t4 || $[10] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Card, {
+			className: t4,
+			children: t5
 		});
-		$[13] = t2;
-		$[14] = t5;
-		$[15] = t6;
-		$[16] = t7;
-	} else t7 = $[16];
-	let t8;
-	if ($[17] !== footer) {
-		t8 = footer && /* @__PURE__ */ jsx("div", {
+		$[9] = t4;
+		$[10] = t5;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== footer) {
+		t7 = footer && /* @__PURE__ */ jsx("div", {
 			className: "qa-auth-layout__footer text-muted-foreground text-center text-xs",
 			children: footer
 		});
-		$[17] = footer;
-		$[18] = t8;
-	} else t8 = $[18];
+		$[12] = footer;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground text-center text-[11px] tracking-[0.14em] uppercase lg:hidden",
+			children: "Built with QUESTPIE"
+		});
+		$[14] = t8;
+	} else t8 = $[14];
 	let t9;
-	if ($[19] !== t1 || $[20] !== t7 || $[21] !== t8) {
-		t9 = /* @__PURE__ */ jsx("div", {
-			className: "qa-auth-layout bg-background flex min-h-screen flex-col items-center justify-center p-4",
+	if ($[15] !== t6 || $[16] !== t7) {
+		t9 = /* @__PURE__ */ jsx("main", {
+			className: "qa-auth-layout__form-panel flex items-center justify-center",
 			children: /* @__PURE__ */ jsxs("div", {
-				className: "qa-auth-layout__content w-full max-w-sm space-y-6",
+				className: "qa-auth-layout__content w-full max-w-sm space-y-5",
 				children: [
-					t1,
+					t6,
 					t7,
 					t8
 				]
 			})
 		});
-		$[19] = t1;
-		$[20] = t7;
-		$[21] = t8;
-		$[22] = t9;
-	} else t9 = $[22];
-	return t9;
+		$[15] = t6;
+		$[16] = t7;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] !== t3 || $[19] !== t9) {
+		t10 = /* @__PURE__ */ jsx("div", {
+			className: "qa-auth-layout bg-background text-foreground relative flex min-h-screen items-center justify-center overflow-hidden px-5 py-8 sm:px-8",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "qa-auth-layout__shell grid w-full max-w-4xl items-center gap-10 lg:grid-cols-[minmax(220px,280px)_minmax(360px,384px)] lg:gap-16",
+				children: [t3, t9]
+			})
+		});
+		$[18] = t3;
+		$[19] = t9;
+		$[20] = t10;
+	} else t10 = $[20];
+	return t10;
+}
+/**
+* Minimal split layout for authentication pages (login, register, forgot password, etc.)
+*
+* Checks `adminAuthLayout` in the component registry (registered via
+* `questpie/admin/components/admin-auth-layout.tsx`) and renders it when present,
+* falling back to the built-in minimal split layout.
+*
+* Works without `<AdminProvider>` and falls back to the built-in layout.
+* When used inside `<AdminProvider>`, a registered `adminAuthLayout` override
+* can replace the built-in layout.
+*
+* @example
+* ```tsx
+* <AuthLayout
+*   title="Sign in"
+*   description="Enter your credentials to access the admin panel"
+*   logo={<Logo />}
+*   footer={<Link to="/forgot-password">Forgot password?</Link>}
+* >
+*   <LoginForm />
+* </AuthLayout>
+* ```
+*/
+function AuthLayout(props) {
+	const $ = c(15);
+	const t0 = !useHasManagedAdminTheme();
+	let t1;
+	if ($[0] !== t0) {
+		t1 = { enabled: t0 };
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	useManagedAdminTheme(void 0, void 0, t1);
+	const adminStore = useAdminStoreRaw();
+	let t2;
+	if ($[2] !== adminStore) {
+		t2 = adminStore?.getState().admin.getComponent("adminAuthLayout");
+		$[2] = adminStore;
+		$[3] = t2;
+	} else t2 = $[3];
+	const overrideLoader = t2;
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = { allowDynamicImportLoaders: false };
+		$[4] = t3;
+	} else t3 = $[4];
+	const { Component: Override } = useLazyComponent(overrideLoader, t3);
+	if (Override) {
+		let t4$1;
+		if ($[5] !== props) {
+			t4$1 = /* @__PURE__ */ jsx(AuthLayoutBuiltIn, { ...props });
+			$[5] = props;
+			$[6] = t4$1;
+		} else t4$1 = $[6];
+		let t5;
+		if ($[7] !== Override || $[8] !== props) {
+			t5 = /* @__PURE__ */ jsx(Override, { ...props });
+			$[7] = Override;
+			$[8] = props;
+			$[9] = t5;
+		} else t5 = $[9];
+		let t6;
+		if ($[10] !== t4$1 || $[11] !== t5) {
+			t6 = /* @__PURE__ */ jsx(React.Suspense, {
+				fallback: t4$1,
+				children: t5
+			});
+			$[10] = t4$1;
+			$[11] = t5;
+			$[12] = t6;
+		} else t6 = $[12];
+		return t6;
+	}
+	let t4;
+	if ($[13] !== props) {
+		t4 = /* @__PURE__ */ jsx(AuthLayoutBuiltIn, { ...props });
+		$[13] = props;
+		$[14] = t4;
+	} else t4 = $[14];
+	return t4;
 }
 
 //#endregion
-export { AuthLayout };
+export { AuthDefaultLogo, AuthLayout };

package/dist/client/views/auth/forgot-password-form.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/client/views/auth/forgot-password-form.d.ts
 /**
@@ -53,6 +53,6 @@ declare function ForgotPasswordForm({
   defaultValues,
   className,
   error
-}: ForgotPasswordFormProps): react_jsx_runtime1.JSX.Element;
+}: ForgotPasswordFormProps): react_jsx_runtime3.JSX.Element;
 //#endregion
 export { ForgotPasswordForm };

package/dist/client/views/auth/forgot-password-form.mjs

@@ -87,10 +87,10 @@ function ForgotPasswordForm(t0) {
 		let t6$1;
 		if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
 			t6$1 = /* @__PURE__ */ jsx("div", {
-				className: "bg-primary/10 mx-auto flex size-12 items-center justify-center",
+				className: "bg-surface-high mx-auto flex size-12 items-center justify-center rounded-lg",
 				children: /* @__PURE__ */ jsx(Icon, {
 					icon: "ph:check-circle-duotone",
-					className: "text-primary size-6"
+					className: "text-foreground size-6"
 				})
 			});
 			$[9] = t6$1;

package/dist/client/views/auth/login-form.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 
 //#region src/client/views/auth/login-form.d.ts
 /**
@@ -70,6 +70,6 @@ declare function LoginForm({
   className,
   error,
   minPasswordLength
-}: LoginFormProps): react_jsx_runtime2.JSX.Element;
+}: LoginFormProps): react_jsx_runtime4.JSX.Element;
 //#endregion
 export { LoginForm };

package/dist/client/views/auth/login-form.mjs

@@ -275,7 +275,7 @@ function LoginForm(t0) {
 				className: "text-muted-foreground flex items-center gap-2 text-xs",
 				children: [/* @__PURE__ */ jsx("input", {
 					type: "checkbox",
-					className: "border-border accent-primary",
+					className: "border-border accent-foreground",
 					...register("rememberMe")
 				}), t("auth.rememberMe")]
 			}), showForgotPassword && /* @__PURE__ */ jsx(Button, {

package/dist/client/views/auth/reset-password-form.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 
 //#region src/client/views/auth/reset-password-form.d.ts
 /**
@@ -60,6 +60,6 @@ declare function ResetPasswordForm({
   minPasswordLength,
   className,
   error
-}: ResetPasswordFormProps): react_jsx_runtime3.JSX.Element;
+}: ResetPasswordFormProps): react_jsx_runtime5.JSX.Element;
 //#endregion
 export { ResetPasswordForm };

package/dist/client/views/auth/reset-password-form.mjs

@@ -102,10 +102,10 @@ function ResetPasswordForm(t0) {
 		let t8$1;
 		if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
 			t8$1 = /* @__PURE__ */ jsx("div", {
-				className: "bg-primary/10 mx-auto flex size-12 items-center justify-center",
+				className: "bg-surface-high mx-auto flex size-12 items-center justify-center rounded-lg",
 				children: /* @__PURE__ */ jsx(Icon, {
 					icon: "ph:check-circle-duotone",
-					className: "text-primary size-6"
+					className: "text-foreground size-6"
 				})
 			});
 			$[11] = t8$1;

package/dist/client/views/auth/setup-form.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 
 //#region src/client/views/auth/setup-form.d.ts
 /**
@@ -55,6 +55,6 @@ declare function SetupForm({
   className,
   error,
   minPasswordLength
-}: SetupFormProps): react_jsx_runtime4.JSX.Element;
+}: SetupFormProps): react_jsx_runtime6.JSX.Element;
 //#endregion
 export { SetupForm, SetupFormValues };

package/dist/client/views/collection/auto-form-fields.mjs

@@ -335,7 +335,7 @@ function SectionLayoutRenderer(t0) {
 				className: "qa-form-fields__section-title text-lg font-semibold",
 				children: resolveText(section.label, "", formValues)
 			}), section.description && /* @__PURE__ */ jsx("p", {
-				className: "text-muted-foreground mt-1 text-sm",
+				className: "text-muted-foreground mt-1 text-sm text-pretty",
 				children: resolveText(section.description, "", formValues)
 			})]
 		}) : null;
@@ -379,7 +379,7 @@ function SectionLayoutRenderer(t0) {
 		let t7;
 		if ($[30] !== formValues || $[31] !== resolveText || $[32] !== section.description) {
 			t7 = section.description && /* @__PURE__ */ jsx("p", {
-				className: "text-muted-foreground mb-4 text-sm",
+				className: "text-muted-foreground mb-4 text-sm text-pretty",
 				children: resolveText(section.description, "", formValues)
 			});
 			$[30] = formValues;
@@ -401,7 +401,7 @@ function SectionLayoutRenderer(t0) {
 		if ($[37] !== t6 || $[38] !== t8 || $[39] !== value) {
 			t9 = /* @__PURE__ */ jsxs(AccordionItem, {
 				value,
-				className: "border px-4",
+				className: "border-transparent px-4",
 				children: [t6, t8]
 			});
 			$[37] = t6;
@@ -471,7 +471,8 @@ function TabsLayoutRenderer(t0) {
 			if ($[15] !== formValues || $[16] !== resolveText) {
 				t6 = (tab_0) => /* @__PURE__ */ jsxs(TabsTrigger, {
 					value: tab_0.id,
-					children: [resolveIconElement(tab_0.icon, { className: "mr-2 size-4" }), resolveText(tab_0.label, tab_0.id, formValues)]
+					className: "flex-1",
+					children: [resolveIconElement(tab_0.icon, { className: "size-3.5" }), resolveText(tab_0.label, tab_0.id, formValues)]
 				}, tab_0.id);
 				$[15] = formValues;
 				$[16] = resolveText;
@@ -511,7 +512,7 @@ function TabsLayoutRenderer(t0) {
 			t3 = /* @__PURE__ */ jsxs(Tabs, {
 				defaultValue: defaultTab,
 				children: [/* @__PURE__ */ jsx(TabsList, {
-					variant: "line",
+					className: "w-full",
 					children: visibleTabs.map(t6)
 				}), visibleTabs.map(t7)]
 			});
@@ -610,8 +611,9 @@ function AutoFormFields(t0) {
 	const $ = c(55);
 	const { collection, mode: t1, config, registry, fieldResolver, fieldPrefix, allCollectionsConfig } = t0;
 	const mode = t1 === void 0 ? "collection" : t1;
+	const isActionForm = collection === "__action__";
 	const t2 = mode === "collection" ? config?.fields : void 0;
-	const t3 = mode === "collection";
+	const t3 = mode === "collection" && !isActionForm;
 	let t4;
 	if ($[0] !== t3) {
 		t4 = { enabled: t3 };
@@ -637,7 +639,7 @@ function AutoFormFields(t0) {
 		$[6] = t7;
 	} else t7 = $[6];
 	const globalResult = useGlobalFields(mode === "global" ? collection : "", t7);
-	const t8 = mode === "collection";
+	const t8 = mode === "collection" && !isActionForm;
 	let t9;
 	if ($[7] !== t8) {
 		t9 = { enabled: t8 };
@@ -806,7 +808,7 @@ function AutoFormFields(t0) {
 		} else t22 = $[36];
 		let t23;
 		if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
-			t23 = cn("qa-form-fields__sidebar", "border-border w-full @max-2xl:border-b @max-2xl:pb-4 @2xl:border-l @2xl:pl-4", "w-full @2xl:max-w-xs");
+			t23 = cn("qa-form-fields__sidebar", "w-full @max-2xl:pb-2 @2xl:max-w-[18rem] @2xl:pl-1");
 			$[37] = t23;
 		} else t23 = $[37];
 		let t24;
@@ -814,7 +816,7 @@ function AutoFormFields(t0) {
 			t24 = /* @__PURE__ */ jsx("aside", {
 				className: t23,
 				children: /* @__PURE__ */ jsx("div", {
-					className: "space-y-4 @2xl:sticky @2xl:top-4 @2xl:h-auto",
+					className: "bg-surface-low/45 space-y-4 rounded-md px-3 py-3 @2xl:sticky @2xl:top-4 @2xl:h-auto",
 					children: /* @__PURE__ */ jsx(SidebarRenderer, {
 						sidebar: formConfig.sidebar,
 						fields,