@questpie/admin 3.0.5 → 3.0.7

package/README.md

@@ -46,7 +46,13 @@ Branding name, sidebar, dashboard, and admin locale are configured via `config/a
 import { adminConfig } from "#questpie/factories";
 
 export default adminConfig({
-	branding: { name: "My Admin" },
+	branding: {
+		name: "My Admin",
+		// Optional — see "Whitelabeling" below
+		logo: "/brand/logo.svg",
+		tagline: "Powered by My Co.",
+		favicon: "/brand/favicon.ico",
+	},
 	sidebar: {
 		sections: [
 			{
@@ -266,6 +272,98 @@ Import the admin base stylesheet and scan the admin package:
 
 `index.css` is an alias for `base.css`; import `base.css` directly when you want explicit control.
 
+## Whitelabeling
+
+There are two layers, deliberately separated:
+
+| Layer        | Configured in                                   | Covers                                       |
+| ------------ | ----------------------------------------------- | -------------------------------------------- |
+| **Content**  | `config/admin.ts` → `branding`                  | Name, logo, tagline, favicon                 |
+| **Theme**    | Your app's `admin.css`                          | Colors, fonts, radii, shadows, motion        |
+| **Chrome**   | Files in `questpie/admin/components/` (see below) | Sidebar brand, nav item, auth layout       |
+
+### Branding (config-driven)
+
+```ts
+// config/admin.ts
+export default adminConfig({
+	branding: {
+		name: "Acme Studio",
+		// String, or { src, srcDark } for separate light/dark images,
+		// or a server ComponentReference for an inline SVG.
+		logo: { src: "/brand/logo-light.svg", srcDark: "/brand/logo-dark.svg" },
+		// Replaces the "Built with QUESTPIE" footer on auth pages.
+		// Omit to render no footer text at all.
+		tagline: "Studio admin",
+		favicon: "/brand/favicon.ico",
+	},
+});
+```
+
+The logo also accepts an `I18nText` for `name`/`tagline` (`{ en: "...", sk: "..." }`)
+and the same locale-map / translation-key shape used elsewhere in the admin.
+
+### Theming (CSS override)
+
+The admin exposes every visual token as a CSS custom property in `base.css`. To
+rebrand colors, fonts, or shape, override them in your app's `admin.css`
+**after** the base import — source order ensures your overrides win:
+
+```css
+/* admin.css */
+@import "tailwindcss";
+@import "@questpie/admin/client/styles/base.css";
+
+/* Optional: load a brand font */
+@import url("https://fonts.googleapis.com/css2?family=Caveat+Brush&display=swap");
+
+:root,
+.light {
+	--primary: oklch(0.65 0.2 25);
+	--ring: oklch(0.65 0.2 25);
+	--font-heading: "Caveat Brush", system-ui, sans-serif;
+	--surface-radius: 0.5rem;
+}
+
+.dark {
+	--primary: oklch(0.78 0.18 25); /* lifted L for dark surfaces */
+	--ring: oklch(0.78 0.18 25);
+}
+```
+
+`OKLCH` is recommended because the admin's derived hover/focus states use
+`color-mix(in oklch, …)` — values stay perceptually consistent. HEX and `rgb()`
+work too; `hsl()` is discouraged (no P3 gamut). See the full token list in
+`@questpie/admin/client/styles/base.css`; common knobs:
+
+- Colors: `--primary`, `--background`, `--foreground`, `--surface`, `--border`,
+  `--ring`, `--accent`, `--destructive`, `--success`, …
+- Sidebar: `--sidebar`, `--sidebar-accent`, `--sidebar-active-background`, …
+- Typography: `--font-sans`, `--font-mono`, `--font-chrome`, `--font-heading`
+- Shape: `--control-radius`, `--surface-radius`, `--floating-radius`
+
+### Zero-FOUC favicon (optional, TanStack Start)
+
+By default the favicon is applied client-side after the admin config loads.
+For SSR-clean favicons, fetch your config in the route loader and add a link
+yourself:
+
+```tsx
+// routes/admin.tsx
+export const Route = createFileRoute("/admin")({
+	loader: async ({ context }) => ({ config: await context.client.routes.getAdminConfig() }),
+	head: ({ loaderData }) => ({
+		links: [
+			{ rel: "stylesheet", href: adminCss },
+			...(loaderData?.config?.branding?.favicon
+				? [{ rel: "icon", href: loaderData.config.branding.favicon }]
+				: []),
+		],
+	}),
+	component: AdminLayout,
+});
+```
+
 ## Chrome Overrides (File-First)
 
 Place component files in `questpie/admin/components/` to override specific UI chrome without changing your app shell:

package/dist/client/builder/types/field-types.d.mts

@@ -506,6 +506,17 @@ interface FieldReactiveConfig<TData = any> {
 interface FieldLayoutItemWithReactive<TData = any> extends FieldReactiveConfig<TData> {
   field: string;
   className?: string;
+  /**
+   * Extra props forwarded to the field component. Use for component-specific
+   * configuration that doesn't have a dedicated layout key (e.g. relation
+   * field's `filter`, custom render functions).
+   *
+   * @example
+   * ```ts
+   * { field: f.counselorId, props: { filter: () => ({ role: "admin" }) } }
+   * ```
+   */
+  props?: Record<string, any>;
 }
 /**
  * Field layout item - can be a simple field name, field with config, section, or tabs

package/dist/client/components/brand-logo.d.mts

@@ -0,0 +1,25 @@
+import { BrandLogoConfig } from "../types/admin-config.mjs";
+import * as React from "react";
+
+//#region src/client/components/brand-logo.d.ts
+interface BrandLogoMarkProps {
+  logo: BrandLogoConfig | null | undefined;
+  className?: string;
+  fallback?: React.ReactNode;
+  alt?: string;
+}
+/**
+ * Default renderer for `branding.logo`. Accepts:
+ *   - a URL string (same image both modes)
+ *   - `{ src, srcDark }` (separate light/dark images, switched by .dark class)
+ *   - a `ComponentReference` (server-registered component, e.g. an SVG)
+ *
+ * When `logo` is null/undefined the `fallback` prop is rendered (typically
+ * the framework's built-in mark, e.g. `<QuestpieSymbol />`).
+ *
+ * Light/dark switching uses Tailwind's `dark:` variant against the
+ * `.dark` class the admin theme manager toggles on `<html>`.
+ */
+declare const BrandLogoMark: React.NamedExoticComponent<BrandLogoMarkProps>;
+//#endregion
+export { BrandLogoMark, BrandLogoMarkProps };

package/dist/client/components/brand-logo.mjs

@@ -0,0 +1,174 @@
+import { cn } from "../lib/utils.mjs";
+import { ComponentRenderer } from "./component-renderer.mjs";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/brand-logo.tsx
+/**
+* Default renderer for `branding.logo`. Accepts:
+*   - a URL string (same image both modes)
+*   - `{ src, srcDark }` (separate light/dark images, switched by .dark class)
+*   - a `ComponentReference` (server-registered component, e.g. an SVG)
+*
+* When `logo` is null/undefined the `fallback` prop is rendered (typically
+* the framework's built-in mark, e.g. `<QuestpieSymbol />`).
+*
+* Light/dark switching uses Tailwind's `dark:` variant against the
+* `.dark` class the admin theme manager toggles on `<html>`.
+*/
+const BrandLogoMark = React.memo(function BrandLogoMark$1(t0) {
+	const $ = c(46);
+	const { logo, className, fallback: t1, alt: t2 } = t0;
+	const fallback = t1 === void 0 ? null : t1;
+	const alt = t2 === void 0 ? "" : t2;
+	if (logo == null) {
+		let t3$1;
+		if ($[0] !== fallback) {
+			t3$1 = /* @__PURE__ */ jsx(Fragment, { children: fallback });
+			$[0] = fallback;
+			$[1] = t3$1;
+		} else t3$1 = $[1];
+		return t3$1;
+	}
+	if (typeof logo === "string") {
+		let t3$1;
+		if ($[2] !== className) {
+			t3$1 = cn("size-6 shrink-0 object-contain", className);
+			$[2] = className;
+			$[3] = t3$1;
+		} else t3$1 = $[3];
+		let t4$1;
+		if ($[4] !== alt || $[5] !== logo || $[6] !== t3$1) {
+			t4$1 = /* @__PURE__ */ jsx("img", {
+				src: logo,
+				alt,
+				className: t3$1
+			});
+			$[4] = alt;
+			$[5] = logo;
+			$[6] = t3$1;
+			$[7] = t4$1;
+		} else t4$1 = $[7];
+		return t4$1;
+	}
+	if ("src" in logo) {
+		const { src, srcDark, alt: t3$1, width, height } = logo;
+		const imgAlt = t3$1 === void 0 ? alt : t3$1;
+		if (!srcDark) {
+			let t4$2;
+			if ($[8] !== className) {
+				t4$2 = cn("size-6 shrink-0 object-contain", className);
+				$[8] = className;
+				$[9] = t4$2;
+			} else t4$2 = $[9];
+			let t5$2;
+			if ($[10] !== height || $[11] !== imgAlt || $[12] !== src || $[13] !== t4$2 || $[14] !== width) {
+				t5$2 = /* @__PURE__ */ jsx("img", {
+					src,
+					alt: imgAlt,
+					width,
+					height,
+					className: t4$2
+				});
+				$[10] = height;
+				$[11] = imgAlt;
+				$[12] = src;
+				$[13] = t4$2;
+				$[14] = width;
+				$[15] = t5$2;
+			} else t5$2 = $[15];
+			return t5$2;
+		}
+		let t4$1;
+		if ($[16] !== className) {
+			t4$1 = cn("size-6 shrink-0 object-contain dark:hidden", className);
+			$[16] = className;
+			$[17] = t4$1;
+		} else t4$1 = $[17];
+		let t5$1;
+		if ($[18] !== height || $[19] !== imgAlt || $[20] !== src || $[21] !== t4$1 || $[22] !== width) {
+			t5$1 = /* @__PURE__ */ jsx("img", {
+				src,
+				alt: imgAlt,
+				width,
+				height,
+				className: t4$1
+			});
+			$[18] = height;
+			$[19] = imgAlt;
+			$[20] = src;
+			$[21] = t4$1;
+			$[22] = width;
+			$[23] = t5$1;
+		} else t5$1 = $[23];
+		let t6$1;
+		if ($[24] !== className) {
+			t6$1 = cn("hidden size-6 shrink-0 object-contain dark:block", className);
+			$[24] = className;
+			$[25] = t6$1;
+		} else t6$1 = $[25];
+		let t7;
+		if ($[26] !== height || $[27] !== imgAlt || $[28] !== srcDark || $[29] !== t6$1 || $[30] !== width) {
+			t7 = /* @__PURE__ */ jsx("img", {
+				src: srcDark,
+				alt: imgAlt,
+				width,
+				height,
+				className: t6$1
+			});
+			$[26] = height;
+			$[27] = imgAlt;
+			$[28] = srcDark;
+			$[29] = t6$1;
+			$[30] = width;
+			$[31] = t7;
+		} else t7 = $[31];
+		let t8;
+		if ($[32] !== t5$1 || $[33] !== t7) {
+			t8 = /* @__PURE__ */ jsxs(Fragment, { children: [t5$1, t7] });
+			$[32] = t5$1;
+			$[33] = t7;
+			$[34] = t8;
+		} else t8 = $[34];
+		return t8;
+	}
+	let t3;
+	if ($[35] !== logo.props) {
+		t3 = logo.props ?? {};
+		$[35] = logo.props;
+		$[36] = t3;
+	} else t3 = $[36];
+	let t4;
+	if ($[37] !== logo.type || $[38] !== t3) {
+		t4 = {
+			type: logo.type,
+			props: t3
+		};
+		$[37] = logo.type;
+		$[38] = t3;
+		$[39] = t4;
+	} else t4 = $[39];
+	let t5;
+	if ($[40] !== className) {
+		t5 = className ? { className } : void 0;
+		$[40] = className;
+		$[41] = t5;
+	} else t5 = $[41];
+	let t6;
+	if ($[42] !== fallback || $[43] !== t4 || $[44] !== t5) {
+		t6 = /* @__PURE__ */ jsx(ComponentRenderer, {
+			reference: t4,
+			fallback,
+			additionalProps: t5
+		});
+		$[42] = fallback;
+		$[43] = t4;
+		$[44] = t5;
+		$[45] = t6;
+	} else t6 = $[45];
+	return t6;
+});
+
+//#endregion
+export { BrandLogoMark };

package/dist/client/create-admin-client.d.mts

@@ -0,0 +1,7 @@
+import { QuestpieApp, QuestpieClient, QuestpieClientConfig } from "questpie/client";
+
+//#region src/client/create-admin-client.d.ts
+
+declare function createAdminClient<TApp extends QuestpieApp>(config: QuestpieClientConfig): QuestpieClient<TApp>;
+//#endregion
+export { createAdminClient };

package/dist/client/create-admin-client.mjs

@@ -0,0 +1,25 @@
+import { withAdminRequestHeader } from "../shared/preview-utils.mjs";
+import { createClient } from "questpie/client";
+
+//#region src/client/create-admin-client.ts
+/**
+* createAdminClient — typed CMS client preconfigured for admin SPA usage.
+*
+* Wraps `createClient` from `questpie/client` and auto-injects the
+* `X-Questpie-Admin` request header on every outbound call. Server-side
+* `isAdminRequest()` (and any access rule that uses it) can then branch
+* on the header instead of relying on URL prefix matching.
+*
+* Use this for the client passed to `<AdminLayoutProvider client={...}>`.
+* Keep your public/frontend client as plain `createClient` — that one
+* MUST NOT inject the admin header.
+*/
+function createAdminClient(config) {
+	return createClient({
+		...config,
+		fetch: withAdminRequestHeader(config.fetch)
+	});
+}
+
+//#endregion
+export { createAdminClient };

package/dist/client/hooks/use-brand.d.mts

@@ -0,0 +1,22 @@
+import { BrandLogoConfig } from "../types/admin-config.mjs";
+
+//#region src/client/hooks/use-brand.d.ts
+interface BrandSnapshot {
+  name: string;
+  logo: BrandLogoConfig | null;
+  tagline: string | null;
+  favicon: string | null;
+}
+/**
+ * Read branding fields from the admin store. Safe to call outside of an
+ * `<AdminProvider>` — falls back to the default snapshot when no store is
+ * mounted (e.g. on a bare auth page).
+ */
+declare function useBrand(): BrandSnapshot;
+/**
+ * Imperative variant for code paths that cannot use hooks (callbacks,
+ * server-side helpers). Returns null when no provider is mounted.
+ */
+declare function useBrandSnapshotRef(): BrandSnapshot | null;
+//#endregion
+export { BrandSnapshot, useBrand, useBrandSnapshotRef };

package/dist/client/hooks/use-brand.mjs

@@ -0,0 +1,52 @@
+import { useAdminStoreRaw } from "../runtime/provider.mjs";
+import { c } from "react/compiler-runtime";
+import { createStore, useStore } from "zustand";
+
+//#region src/client/hooks/use-brand.ts
+const DEFAULT_BRAND = {
+	name: "Admin",
+	logo: null,
+	tagline: null,
+	favicon: null
+};
+const FALLBACK_STORE = createStore(() => ({
+	brandName: DEFAULT_BRAND.name,
+	brandLogo: DEFAULT_BRAND.logo,
+	brandTagline: DEFAULT_BRAND.tagline,
+	brandFavicon: DEFAULT_BRAND.favicon
+}));
+function selectBrand(state) {
+	return {
+		name: state.brandName,
+		logo: state.brandLogo,
+		tagline: state.brandTagline,
+		favicon: state.brandFavicon
+	};
+}
+/**
+* Read branding fields from the admin store. Safe to call outside of an
+* `<AdminProvider>` — falls back to the default snapshot when no store is
+* mounted (e.g. on a bare auth page).
+*/
+function useBrand() {
+	return useStore(useAdminStoreRaw() ?? FALLBACK_STORE, selectBrand);
+}
+/**
+* Imperative variant for code paths that cannot use hooks (callbacks,
+* server-side helpers). Returns null when no provider is mounted.
+*/
+function useBrandSnapshotRef() {
+	const $ = c(2);
+	const store = useAdminStoreRaw();
+	if (!store) return null;
+	let t0;
+	if ($[0] !== store) {
+		t0 = selectBrand(store.getState());
+		$[0] = store;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+
+//#endregion
+export { useBrand, useBrandSnapshotRef };

package/dist/client/runtime/index.mjs

@@ -1,4 +1,4 @@
-import { AdminProvider, selectAdmin, selectAuthClient, selectBasePath, selectBrandName, selectClient, selectContentLocale, selectNavigate, selectRealtime, selectSetContentLocale, useAdminStore } from "./provider.mjs";
+import { AdminProvider, selectAdmin, selectAuthClient, selectBasePath, selectClient, selectContentLocale, selectNavigate, selectRealtime, selectSetContentLocale, useAdminStore } from "./provider.mjs";
 import { useSafeContentLocales } from "./content-locales-provider.mjs";
 import { LocaleScopeProvider, useScopedLocale } from "./locale-scope.mjs";
 import { useShallow } from "zustand/shallow";

package/dist/client/runtime/provider.d.mts

@@ -2,6 +2,7 @@ import { I18nAdapter } from "../i18n/types.mjs";
 import { AdminState as AdminState$1, BlockDefinitionMap, ComponentDefinitionMap, FieldDefinitionMap, PageDefinitionMap, TranslationsMap, ViewDefinitionMap, WidgetDefinitionMap } from "../builder/admin-types.mjs";
 import { Admin, AdminInput } from "../builder/admin.mjs";
 import { AnyQuestpieClient } from "../builder/index.mjs";
+import { BrandLogoConfig } from "../types/admin-config.mjs";
 import { NavigationGroup } from "./routes.mjs";
 import { ReactElement, ReactNode } from "react";
 import { QueryClient } from "@tanstack/react-query";
@@ -22,6 +23,9 @@ interface AdminState {
   setContentLocale: (locale: string) => void;
   navigation: NavigationGroup[];
   brandName: string;
+  brandLogo: BrandLogoConfig | null;
+  brandTagline: string | null;
+  brandFavicon: string | null;
 }
 type AdminStore = ReturnType<typeof createAdminStore>;
 interface CreateAdminStoreProps {

package/dist/client/runtime/provider.mjs

@@ -51,7 +51,10 @@ function createAdminStore({ admin, client, authClient, basePath, navigate, realt
 			set({ contentLocale: newLocale });
 		},
 		navigation: buildNavigation(admin, { basePath }),
-		brandName: "Admin"
+		brandName: "Admin",
+		brandLogo: null,
+		brandTagline: null,
+		brandFavicon: null
 	}));
 }
 const AdminStoreContext = createContext(null);
@@ -317,6 +320,28 @@ function AdminProvider(t0) {
 function _temp(s) {
 	return s.contentLocale;
 }
+function resolveBrandText(value, fallback) {
+	if (typeof value === "string") return value;
+	if (value && typeof value === "object") {
+		const obj = value;
+		if (typeof obj.en === "string") return obj.en;
+		const first = Object.values(obj).find((v) => typeof v === "string");
+		if (typeof first === "string") return first;
+	}
+	return fallback;
+}
+function applyFavicon(href) {
+	if (typeof document === "undefined" || !href) return;
+	const FAVICON_ID = "qa-brand-favicon";
+	let link = document.getElementById(FAVICON_ID);
+	if (!link) {
+		link = document.createElement("link");
+		link.id = FAVICON_ID;
+		link.rel = "icon";
+		document.head.appendChild(link);
+	}
+	link.href = href;
+}
 function BrandingSync() {
 	const $ = c(3);
 	const store = useContext(AdminStoreContext);
@@ -328,11 +353,18 @@ function BrandingSync() {
 			const client = store.getState().client;
 			if (!client || !client.routes?.getAdminConfig) return;
 			client.routes.getAdminConfig().then((config) => {
-				if (config?.branding?.name) {
-					const name = config.branding.name;
-					const resolved = typeof name === "string" ? name : typeof name === "object" && name !== null ? name.en ?? Object.values(name)[0] ?? "Admin" : "Admin";
-					store.setState({ brandName: resolved });
+				const branding = config?.branding;
+				if (!branding) return;
+				const next = {};
+				if (branding.name !== void 0) next.brandName = resolveBrandText(branding.name, "Admin");
+				if (branding.logo !== void 0) next.brandLogo = branding.logo ?? null;
+				if (branding.tagline !== void 0) next.brandTagline = branding.tagline ? resolveBrandText(branding.tagline, "") : null;
+				if (branding.favicon !== void 0) {
+					const favicon = branding.favicon ?? null;
+					next.brandFavicon = favicon;
+					applyFavicon(favicon);
 				}
+				if (Object.keys(next).length > 0) store.setState(next);
 			}).catch(_temp2);
 		};
 		t1 = [store];
@@ -393,8 +425,6 @@ const selectRealtime = (s) => s.realtime;
 const selectContentLocale = (s) => s.contentLocale;
 /** Select setContentLocale function */
 const selectSetContentLocale = (s) => s.setContentLocale;
-/** Select brand name */
-const selectBrandName = (s) => s.brandName;
 
 //#endregion
-export { AdminProvider, selectAdmin, selectAuthClient, selectBasePath, selectBrandName, selectClient, selectContentLocale, selectNavigate, selectRealtime, selectSetContentLocale, useAdminStore, useAdminStoreRaw };
+export { AdminProvider, selectAdmin, selectAuthClient, selectBasePath, selectClient, selectContentLocale, selectNavigate, selectRealtime, selectSetContentLocale, useAdminStore, useAdminStoreRaw };

package/dist/client/styles/base.css

@@ -58,6 +58,7 @@
    --font-sans           Default for all UI body text and content
    --font-mono           Technical content: code, kbd, IDs, timestamps
    --font-chrome         UI chrome (buttons, labels, inputs, tabs, badges)
+   --font-heading        Headings (h1-h6); defaults to var(--font-sans)
 
    -- Spacing ------------------------------------------------
    --spacing-card        Internal card/panel padding (default: 16px)
@@ -139,6 +140,7 @@
 	--font-mono:
 		"JetBrains Mono Variable", "JetBrains Mono", ui-monospace, monospace;
 	--font-chrome: var(--font-sans);
+	--font-heading: var(--font-sans);
 
 	/* Spacing Scale */
 	--spacing-section: 1.5rem;
@@ -236,6 +238,7 @@
 	--font-mono:
 		"JetBrains Mono Variable", "JetBrains Mono", ui-monospace, monospace;
 	--font-chrome: var(--font-sans);
+	--font-heading: var(--font-heading);
 
 	/* Radius: Autopilot neutral-soft ladder */
 	--radius-xs: 4px;
@@ -744,6 +747,7 @@
 	h4,
 	h5,
 	h6 {
+		font-family: var(--font-heading);
 		letter-spacing: -0.02em;
 		text-wrap: balance;
 	}

package/dist/client/types/admin-config.d.mts

@@ -0,0 +1,24 @@
+import { I18nText } from "../i18n/types.mjs";
+import "../../server/augmentation.mjs";
+import "../../server/block/index.mjs";
+
+//#region src/client/types/admin-config.d.ts
+
+type BrandLogoConfig = string | {
+  src: string;
+  srcDark?: string;
+  alt?: string;
+  width?: number;
+  height?: number;
+} | {
+  type: string;
+  props?: Record<string, unknown>;
+};
+type BrandingConfig = {
+  name?: I18nText;
+  logo?: BrandLogoConfig;
+  tagline?: I18nText;
+  favicon?: string;
+};
+//#endregion
+export { BrandLogoConfig, BrandingConfig };

package/dist/client/views/auth/accept-invite-form.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/client/views/auth/accept-invite-form.d.ts
 /**
@@ -67,6 +67,6 @@ declare function AcceptInviteForm({
   className,
   error,
   minPasswordLength
-}: AcceptInviteFormProps): react_jsx_runtime2.JSX.Element;
+}: AcceptInviteFormProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { AcceptInviteForm };

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

@@ -1,5 +1,5 @@
 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
 
@@ -22,6 +22,11 @@ type AuthLayoutProps = {
   /** Additional class name for the card */
   className?: string;
 };
+declare function AuthDefaultLogo({
+  brandName
+}: {
+  brandName: string;
+}): react_jsx_runtime1.JSX.Element;
 /**
  * Minimal split layout for authentication pages (login, register, forgot password, etc.)
  *
@@ -45,6 +50,6 @@ type AuthLayoutProps = {
  * </AuthLayout>
  * ```
  */
-declare function AuthLayout(props: AuthLayoutProps): react_jsx_runtime0.JSX.Element;
+declare function AuthLayout(props: AuthLayoutProps): react_jsx_runtime1.JSX.Element;
 //#endregion
-export { AuthLayout, AuthLayoutProps };
+export { AuthDefaultLogo, AuthLayout, AuthLayoutProps };