@humain/ui 2.1.63 → 2.1.65

package/dist/index227.js

@@ -1,277 +1,193 @@
 "use client";
 import { cn } from "./index2.js";
-import { useControllableState } from "./index12.js";
-import { createSafeContext } from "./index21.js";
-import { Switch } from "./index42.js";
-import { Kbd } from "./index106.js";
-import { PopoverPopup, PopoverRoot, PopoverTrigger } from "./index211.js";
-import { cva } from "class-variance-authority";
-import { ChevronRight, LogOut } from "lucide-react";
+import { Avatar, AvatarGroup } from "./index70.js";
+import { BrandIcon } from "./index71.js";
+import { PageBackground } from "./index226.js";
 import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/templates/NavAccountMenu/NavAccountMenu.tsx
-var [NavAccountMenuContext, useNavAccountMenuContext] = createSafeContext("NavAccountMenu");
-function NavAccountMenu({ type = "card", open: controlledOpen, defaultOpen = false, onOpenChange, children }) {
-	const [open, handleOpenChange] = useControllableState({
-		value: controlledOpen,
-		defaultValue: defaultOpen,
-		onChange: onOpenChange
-	});
-	const contextValue = React.useMemo(() => ({
-		type,
-		open,
-		onOpenChange: handleOpenChange
-	}), [
-		type,
-		open,
-		handleOpenChange
-	]);
-	return /* @__PURE__ */ jsx(NavAccountMenuContext.Provider, {
-		value: contextValue,
-		children: /* @__PURE__ */ jsx(PopoverRoot, {
-			open,
-			onOpenChange: handleOpenChange,
-			children: /* @__PURE__ */ jsx("div", {
-				"data-slot": "nav-account-menu",
-				children
-			})
-		})
-	});
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/templates/AuthPageLayout/AuthPageLayout.tsx
+var DEFAULT_AVATARS = [
+	{
+		fallback: "HA",
+		alt: "HUMAIN account member"
+	},
+	{
+		fallback: "OS",
+		alt: "HUMAIN OS member"
+	},
+	{
+		fallback: "AI",
+		alt: "HUMAIN AI member"
+	}
+];
+function isAsideConfig(aside) {
+	return typeof aside === "object" && aside !== null && !Array.isArray(aside) && !React.isValidElement(aside);
 }
-var triggerVariants = cva("flex items-center gap-4 w-full text-left cursor-pointer transition-colors duration-200 ease-smooth outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none", {
-	variants: { type: {
-		card: "bg-surface-1 border border-border rounded-xl shadow-xs p-3 hover:bg-surface-2",
-		simple: "border border-border px-2 py-3 hover:bg-surface-2 rounded-lg"
-	} },
-	defaultVariants: { type: "card" }
-});
-function NavAccountMenuTrigger({ avatar, name, email, badge, showLogoutButton, onLogout, compact = false, className }) {
-	const { type, open } = useNavAccountMenuContext();
-	const handleLogoutClick = (e) => {
-		e.stopPropagation();
-		onLogout?.();
-	};
-	const avatarContent = avatar ? /* @__PURE__ */ jsx("div", {
-		className: "shrink-0",
-		children: avatar
-	}) : null;
-	const accountDetails = !compact ? /* @__PURE__ */ jsxs("div", {
-		className: "flex min-w-0 flex-1 flex-col",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex min-w-0 items-center gap-2",
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "min-w-0 truncate text-sm font-semibold text-foreground",
-				children: name
-			}), badge && /* @__PURE__ */ jsx("span", {
-				className: "shrink-0",
-				children: badge
-			})]
-		}), email && /* @__PURE__ */ jsx("span", {
-			className: "truncate text-sm text-muted-foreground",
-			children: email
-		})]
-	}) : null;
-	if (type === "simple" && showLogoutButton && !compact) return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "nav-account-menu-trigger",
-		className: cn(triggerVariants({ type }), "group/trigger", className),
-		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
-			render: /* @__PURE__ */ jsx("button", {
-				type: "button",
-				"aria-haspopup": "true",
-				className: "flex min-w-0 flex-1 items-center gap-4 text-left outline-none"
-			}),
-			children: [avatarContent, accountDetails]
-		}), /* @__PURE__ */ jsx("button", {
-			type: "button",
-			onClick: handleLogoutClick,
-			className: "shrink-0 rounded-md p-1.5 text-text-quaternary transition-colors duration-200 ease-smooth hover:bg-muted hover:text-secondary-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none",
-			"aria-label": "Sign out",
-			children: /* @__PURE__ */ jsx(LogOut, { className: "size-5" })
-		})]
+function renderActionElement(action, className) {
+	if (action.render) return React.cloneElement(action.render, {
+		className: cn(action.render.props.className, className),
+		onClick: action.onClick ?? action.render.props.onClick,
+		children: action.render.props.children ?? action.label
 	});
-	return /* @__PURE__ */ jsxs(PopoverTrigger, {
-		render: /* @__PURE__ */ jsx("button", {
-			type: "button",
-			"data-slot": "nav-account-menu-trigger",
-			"aria-haspopup": "true",
-			"aria-label": compact ? `${name} account menu` : void 0,
-			className: cn(triggerVariants({ type }), "group/trigger", compact ? "w-auto justify-center" : "max-w-[280px]", className)
-		}),
-		children: [avatarContent, !compact && /* @__PURE__ */ jsxs(Fragment, { children: [accountDetails, /* @__PURE__ */ jsx(ChevronRight, { className: cn("size-4 shrink-0 text-muted-foreground transition-transform duration-200 ease-smooth motion-reduce:transition-none", open ? "rotate-180" : "rtl:rotate-180") })] })]
+	if (action.href) return /* @__PURE__ */ jsx("a", {
+		className,
+		href: action.href,
+		onClick: action.onClick,
+		children: action.label
 	});
-}
-function NavAccountMenuContent({ side = "right", align = "end", sideOffset = 8, children, className }) {
-	return /* @__PURE__ */ jsx(PopoverPopup, {
-		side,
-		align,
-		sideOffset,
-		"aria-label": "Account menu",
-		"data-slot": "nav-account-menu-content",
-		className: cn("w-[300px] max-w-[calc(100vw-2rem)] p-0 gap-0 bg-popover border border-border rounded-[14px] overflow-hidden", "shadow-[0px_12px_16px_-4px_color-mix(in_srgb,var(--foreground)_8%,transparent),0px_4px_6px_-2px_color-mix(in_srgb,var(--foreground)_3%,transparent),0px_2px_2px_-1px_color-mix(in_srgb,var(--foreground)_4%,transparent)]", "data-open:animate-in data-closed:animate-out", "data-closed:fade-out-0 data-open:fade-in-0", "data-closed:zoom-out-95 data-open:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2", "data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2", "data-[side=top]:slide-in-from-bottom-2", "duration-200 motion-reduce:animate-none", className),
-		children: /* @__PURE__ */ jsx("div", {
-			className: "flex flex-col py-2",
-			role: "menu",
-			"aria-label": "Account menu",
-			children
-		})
+	return /* @__PURE__ */ jsx("button", {
+		className,
+		type: "button",
+		onClick: action.onClick,
+		children: action.label
 	});
 }
-function NavAccountMenuHeader({ title, subtitle, className }) {
+function AuthAsidePanel({ title, description, cardTitle, cardDescription, icon, avatars, avatarOverflowCount }) {
+	const resolvedAvatars = avatars ?? DEFAULT_AVATARS;
+	const defaultOverflowCount = avatars ? 0 : 3695;
+	const visibleAvatars = resolvedAvatars.slice(0, 3);
+	const overflowAvatarCount = Math.max(0, resolvedAvatars.length - visibleAvatars.length) + Math.max(0, avatarOverflowCount ?? defaultOverflowCount);
 	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "nav-account-menu-header",
-		className: cn("px-6 pb-3 delight-fade-in", className),
-		children: [/* @__PURE__ */ jsx("p", {
-			className: "text-base font-semibold text-foreground",
-			children: title
-		}), subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx("p", {
-			className: "mt-2 text-sm text-muted-foreground",
-			children: subtitle
-		}) : /* @__PURE__ */ jsx("div", {
-			className: "mt-2",
-			children: subtitle
-		}))]
-	});
-}
-function NavAccountMenuSection({ label, bordered = false, children, className }) {
-	return /* @__PURE__ */ jsxs("section", {
-		"data-slot": "nav-account-menu-section",
-		"aria-label": label,
-		className: cn("flex flex-col gap-1 py-1.5", bordered && "border-t border-border", className),
-		children: [label && /* @__PURE__ */ jsx("div", {
-			className: "px-3 pt-1.5 pb-1",
-			children: /* @__PURE__ */ jsx("span", {
-				className: "text-xs font-semibold text-muted-foreground",
-				children: label
+		"data-slot": "auth-page-aside-panel",
+		className: "relative flex min-h-full w-full flex-col overflow-hidden rounded-xl bg-primary p-8 text-primary-foreground",
+		children: [
+			/* @__PURE__ */ jsx(BrandIcon, {
+				"aria-hidden": true,
+				className: "-start-16 top-1/3 absolute size-72 -rotate-12 text-primary-foreground/10",
+				icon: "mark",
+				size: "2xl"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative z-10 flex max-w-xl flex-col gap-6",
+				children: [title && /* @__PURE__ */ jsx("h2", {
+					className: "text-display-md font-bold leading-tight text-primary-foreground lg:text-display-lg",
+					children: title
+				}), description && /* @__PURE__ */ jsx("p", {
+					className: "text-md leading-normal text-primary-foreground lg:text-xl",
+					children: description
+				})]
+			}),
+			(cardTitle || cardDescription) && /* @__PURE__ */ jsxs("div", {
+				"data-slot": "auth-page-aside-card",
+				className: "relative z-10 mt-auto flex min-h-[248px] flex-col overflow-visible rounded-2xl bg-card px-10 py-8 text-card-foreground",
+				children: [
+					/* @__PURE__ */ jsx("svg", {
+						"aria-hidden": true,
+						"data-slot": "auth-page-aside-notch",
+						className: "pointer-events-none absolute top-0 end-0 z-0 h-[94.5px] w-[95px] overflow-visible text-primary",
+						focusable: "false",
+						preserveAspectRatio: "none",
+						viewBox: "0 0 95 94.5",
+						children: /* @__PURE__ */ jsx("path", {
+							d: "M0 0H95V94.5C95 81.2452 84.2548 70.5 71 70.5H48C34.7452 70.5 24 59.7548 24 46.5V24C24 10.7452 13.2548 0 0 0Z",
+							fill: "currentColor"
+						})
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"data-slot": "auth-page-aside-icon",
+						className: "absolute end-1 top-1 z-20 flex size-[60px] items-center justify-center rounded-[12px] bg-card text-primary",
+						children: icon ?? /* @__PURE__ */ jsx(BrandIcon, {
+							"aria-hidden": true,
+							className: "text-[40px]",
+							"data-slot": "auth-page-aside-symbol",
+							icon: "symbol",
+							size: "fluid"
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "relative z-10 flex flex-col gap-6 pe-16",
+						children: [cardTitle && /* @__PURE__ */ jsx("h3", {
+							className: "text-display-sm font-bold leading-tight text-card-foreground",
+							children: cardTitle
+						}), cardDescription && /* @__PURE__ */ jsx("p", {
+							className: "text-lg leading-normal text-card-foreground",
+							children: cardDescription
+						})]
+					}),
+					(visibleAvatars.length > 0 || overflowAvatarCount > 0) && /* @__PURE__ */ jsx("div", {
+						className: "relative z-10 mt-auto flex justify-end pt-5",
+						children: /* @__PURE__ */ jsxs(AvatarGroup, {
+							size: "sm",
+							children: [visibleAvatars.map((avatar, index) => /* @__PURE__ */ jsx(Avatar, {
+								alt: avatar.alt,
+								fallback: avatar.fallback,
+								src: avatar.src
+							}, `${avatar.fallback ?? avatar.alt ?? "avatar"}-${index}`)), overflowAvatarCount > 0 && /* @__PURE__ */ jsx("div", {
+								role: "img",
+								"aria-label": `${overflowAvatarCount} more account members`,
+								className: "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-[color-mix(in_srgb,var(--background)_97%,var(--foreground)_3%)]",
+								children: /* @__PURE__ */ jsxs("span", {
+									"aria-hidden": "true",
+									className: "font-normal text-foreground text-xs leading-4",
+									children: ["+", overflowAvatarCount]
+								})
+							})]
+						})
+					})
+				]
 			})
-		}), children]
-	});
-}
-function NavAccountMenuItem({ icon, shortcut, destructive = false, disabled = false, onSelect, render, children, className }) {
-	const { onOpenChange } = useNavAccountMenuContext();
-	const handleClick = () => {
-		if (disabled) return;
-		onSelect?.();
-		onOpenChange(false);
-	};
-	const content = /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-1 gap-2 items-center overflow-hidden p-2 rounded-md transition-[background-color] duration-200 ease-smooth delight-selection-press motion-reduce:transition-none",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex flex-1 gap-2 items-center min-w-0",
-			children: [icon && /* @__PURE__ */ jsx("span", {
-				className: cn("shrink-0 [&>svg]:size-4 transition-transform duration-200 ease-smooth group-hover/menuitem:translate-x-0.5 motion-reduce:transition-none", destructive ? "text-destructive" : "text-foreground"),
-				children: icon
-			}), /* @__PURE__ */ jsx("span", {
-				className: cn("flex-1 text-sm truncate", destructive ? "text-destructive" : "text-secondary-foreground"),
-				children
-			})]
-		}), shortcut && /* @__PURE__ */ jsx(Kbd, {
-			variant: "outline",
-			size: "xs",
-			className: "shrink-0",
-			children: shortcut
-		})]
-	});
-	const baseClassName = cn("group/menuitem flex items-center px-1.5 py-0 w-full text-left cursor-pointer outline-none", "hover:[&>div]:bg-muted focus-visible:[&>div]:bg-muted", "focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring", disabled && "pointer-events-none opacity-50", className);
-	if (render) return render({
-		className: baseClassName,
-		onClick: handleClick,
-		children: content
-	});
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		role: "menuitem",
-		"data-slot": "nav-account-menu-item",
-		className: baseClassName,
-		onClick: handleClick,
-		disabled,
-		"aria-disabled": disabled || void 0,
-		children: content
+		]
 	});
 }
-function NavAccountMenuAccount({ avatar, name, email, selected = false, onSelect, className }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "nav-account-menu-account",
-		className: cn("flex items-center px-1.5 py-0 w-full", className),
-		children: /* @__PURE__ */ jsxs("button", {
-			type: "button",
-			role: "menuitemradio",
-			"aria-checked": selected,
-			"aria-label": `Switch to ${name} (${email})`,
-			className: cn("relative flex flex-1 gap-2 items-center overflow-hidden px-2 py-1.5 rounded-md cursor-pointer outline-none", "hover:bg-muted focus-visible:bg-muted", "transition-colors duration-200 ease-smooth motion-reduce:transition-none", "focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring", "text-left", selected && "bg-surface-2"),
-			onClick: onSelect,
-			children: [
-				avatar && /* @__PURE__ */ jsx("div", {
-					className: "shrink-0",
-					children: avatar
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex flex-col min-w-0 flex-1",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "text-sm font-semibold text-foreground truncate",
-						children: name
-					}), /* @__PURE__ */ jsx("span", {
-						className: "text-sm text-muted-foreground truncate",
-						children: email
-					})]
-				}),
-				/* @__PURE__ */ jsx("div", {
-					"aria-hidden": "true",
-					className: cn("size-4 rounded-full border-2 shrink-0 flex items-center justify-center transition-colors duration-200 ease-smooth motion-reduce:transition-none", selected ? "bg-primary border-primary" : "border-border bg-transparent"),
-					children: selected && /* @__PURE__ */ jsx("div", { className: "size-1.5 rounded-full bg-primary-foreground delight-check-bounce" })
+function AuthPageLayout({ logo, title, description, aside, showAside = true, showAsideOnMobile = false, formMaxWidthClassName = "max-w-[520px]", formClassName, asideClassName, backgroundPattern = "none", className, children, ...props }) {
+	const shouldRenderAside = showAside && aside != null;
+	const stackAsideOnMobile = shouldRenderAside && showAsideOnMobile;
+	return /* @__PURE__ */ jsxs("main", {
+		...props,
+		"data-slot": "auth-page-layout",
+		className: cn("relative isolate flex min-h-screen overflow-hidden bg-surface-1 text-foreground", stackAsideOnMobile ? "flex-col lg:flex-row" : "flex-row", className),
+		children: [
+			backgroundPattern !== "none" && /* @__PURE__ */ jsx(PageBackground, {
+				pattern: backgroundPattern,
+				offset: "icon-center",
+				className: "-z-10 opacity-70"
+			}),
+			/* @__PURE__ */ jsx("section", {
+				"aria-label": "Authentication form",
+				"data-slot": "auth-page-form-pane",
+				"data-testid": "auth-page-form-pane",
+				className: cn("flex min-w-0 items-center justify-center px-6 py-12 sm:px-8 lg:min-h-screen lg:py-24", shouldRenderAside ? "flex-1 lg:w-1/2 lg:flex-none" : "flex-1", stackAsideOnMobile ? "min-h-[50vh]" : "min-h-screen"),
+				children: /* @__PURE__ */ jsxs("div", {
+					className: cn("flex w-full min-w-0 flex-col gap-6", formMaxWidthClassName, formClassName),
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							"data-slot": "auth-page-logo",
+							className: "flex h-8 items-center px-6 text-foreground",
+							children: logo ?? /* @__PURE__ */ jsx(BrandIcon, {
+								icon: "mark",
+								size: "lg"
+							})
+						}),
+						(title || description) && /* @__PURE__ */ jsxs("header", {
+							className: "flex flex-col gap-2 px-6",
+							children: [title && /* @__PURE__ */ jsx("h1", {
+								className: "text-display-xs font-semibold leading-tight text-foreground",
+								children: title
+							}), description && /* @__PURE__ */ jsx("p", {
+								className: "text-md leading-normal text-secondary-foreground",
+								children: description
+							})]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							"data-slot": "auth-page-form-content",
+							className: "px-6",
+							children
+						})
+					]
 				})
-			]
-		})
-	});
-}
-function NavAccountMenuSeparator({ className }) {
-	return /* @__PURE__ */ jsx("hr", {
-		"data-slot": "nav-account-menu-separator",
-		className: cn("h-px border-0 bg-border mx-5", className)
-	});
-}
-function NavAccountMenuFooter({ children, className }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "nav-account-menu-footer",
-		className: cn("flex items-center justify-center px-5 pt-4", className),
-		children
-	});
-}
-function NavAccountMenuThemeSwitch({ variant = "theme-gradient", size = "sm", checked, onCheckedChange, label, className }) {
-	const switchId = React.useId();
-	const labelId = label ? `${switchId}-label` : void 0;
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "nav-account-menu-theme-switch",
-		className: cn("flex items-center px-1.5 py-0", className),
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2.5 p-2",
-			children: [/* @__PURE__ */ jsx(Switch, {
-				id: switchId,
-				variant,
-				size,
-				checked,
-				onCheckedChange,
-				"aria-labelledby": labelId,
-				"aria-label": label ? void 0 : "Theme selector"
-			}), label && /* @__PURE__ */ jsx("label", {
-				htmlFor: switchId,
-				id: labelId,
-				className: "cursor-pointer text-sm text-secondary-foreground",
-				children: label
-			})]
-		})
+			}),
+			shouldRenderAside && /* @__PURE__ */ jsx("section", {
+				"aria-label": "Authentication context",
+				"data-slot": "auth-page-aside-pane",
+				"data-testid": "auth-page-aside-pane",
+				className: cn("min-w-0 flex-1 bg-muted p-5 lg:min-h-screen", "lg:w-1/2 lg:flex-none", stackAsideOnMobile ? "min-h-[50vh]" : "min-h-screen", showAsideOnMobile ? "flex" : "hidden lg:flex", asideClassName),
+				children: isAsideConfig(aside) ? /* @__PURE__ */ jsx(AuthAsidePanel, { ...aside }) : aside
+			})
+		]
 	});
 }
-NavAccountMenu.displayName = "NavAccountMenu";
-NavAccountMenuTrigger.displayName = "NavAccountMenuTrigger";
-NavAccountMenuContent.displayName = "NavAccountMenuContent";
-NavAccountMenuHeader.displayName = "NavAccountMenuHeader";
-NavAccountMenuSection.displayName = "NavAccountMenuSection";
-NavAccountMenuItem.displayName = "NavAccountMenuItem";
-NavAccountMenuAccount.displayName = "NavAccountMenuAccount";
-NavAccountMenuSeparator.displayName = "NavAccountMenuSeparator";
-NavAccountMenuFooter.displayName = "NavAccountMenuFooter";
-NavAccountMenuThemeSwitch.displayName = "NavAccountMenuThemeSwitch";
+AuthPageLayout.displayName = "AuthPageLayout";
 //#endregion
-export { NavAccountMenu, NavAccountMenuAccount, NavAccountMenuContent, NavAccountMenuFooter, NavAccountMenuHeader, NavAccountMenuItem, NavAccountMenuSection, NavAccountMenuSeparator, NavAccountMenuThemeSwitch, NavAccountMenuTrigger, triggerVariants as navAccountMenuTriggerVariants };
+export { AuthAsidePanel, AuthPageLayout, renderActionElement };
 
 //# sourceMappingURL=index227.js.map

package/dist/index227.js.map

@@ -1 +1 @@
-{"version":3,"file":"index227.js","names":[],"sources":["../src/components/templates/NavAccountMenu/NavAccountMenu.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ChevronRight, LogOut } from 'lucide-react';\nimport * as React from 'react';\nimport { Switch } from '@/components/atoms/forms/Switch/Switch';\nimport { Kbd } from '@/components/molecules/data/Kbd';\nimport {\n  PopoverRoot as PopoverBase,\n  PopoverPopup as PopoverContentBase,\n  PopoverTrigger as PopoverTriggerBase,\n} from '@/components/organisms/overlays/Popover';\nimport { useControllableState } from '@/hooks/use-controllable-state';\nimport { createSafeContext } from '@/lib/create-safe-context';\nimport { cn } from '@/lib/utils';\n\n// ============================================\n// Context for NavAccountMenu\n// ============================================\n\ninterface NavAccountMenuContextValue {\n  type: 'card' | 'simple';\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n}\n\nconst [NavAccountMenuContext, useNavAccountMenuContext] =\n  createSafeContext<NavAccountMenuContextValue>('NavAccountMenu');\n\n// ============================================\n// NavAccountMenu (Root)\n// ============================================\n\nexport interface NavAccountMenuProps {\n  /** Trigger variant style */\n  type?: 'card' | 'simple';\n  /** Controlled open state */\n  open?: boolean;\n  /** Callback when open state changes */\n  onOpenChange?: (open: boolean) => void;\n  /** Initial open state for uncontrolled mode */\n  defaultOpen?: boolean;\n  /** Children (trigger + content) */\n  children: React.ReactNode;\n}\n\nfunction NavAccountMenu({\n  type = 'card',\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  children,\n}: NavAccountMenuProps) {\n  const [open, handleOpenChange] = useControllableState({\n    value: controlledOpen,\n    defaultValue: defaultOpen,\n    onChange: onOpenChange,\n  });\n\n  const contextValue = React.useMemo(\n    () => ({\n      type,\n      open,\n      onOpenChange: handleOpenChange,\n    }),\n    [type, open, handleOpenChange],\n  );\n\n  return (\n    <NavAccountMenuContext.Provider value={contextValue}>\n      <PopoverBase open={open} onOpenChange={handleOpenChange}>\n        <div data-slot=\"nav-account-menu\">{children}</div>\n      </PopoverBase>\n    </NavAccountMenuContext.Provider>\n  );\n}\n\n// ============================================\n// NavAccountMenuTrigger\n// ============================================\n\nconst triggerVariants = cva(\n  'flex items-center gap-4 w-full text-left cursor-pointer transition-colors duration-200 ease-smooth outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none',\n  {\n    variants: {\n      type: {\n        card: 'bg-surface-1 border border-border rounded-xl shadow-xs p-3 hover:bg-surface-2',\n        simple: 'border border-border px-2 py-3 hover:bg-surface-2 rounded-lg',\n      },\n    },\n    defaultVariants: {\n      type: 'card',\n    },\n  },\n);\n\nexport interface NavAccountMenuTriggerProps\n  extends VariantProps<typeof triggerVariants> {\n  /** Avatar element (use Avatar component) */\n  avatar?: React.ReactNode;\n  /** User display name */\n  name: string;\n  /** User email address */\n  email?: string;\n  /** Optional badge after name (e.g., \"External\" tag) */\n  badge?: React.ReactNode;\n  /** Show logout button instead of chevron (for 'simple' type) */\n  showLogoutButton?: boolean;\n  /** Logout callback for simple variant */\n  onLogout?: () => void;\n  /** Show only avatar without name/email - useful for collapsed sidebar */\n  compact?: boolean;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuTrigger({\n  avatar,\n  name,\n  email,\n  badge,\n  showLogoutButton,\n  onLogout,\n  compact = false,\n  className,\n}: NavAccountMenuTriggerProps) {\n  const { type, open } = useNavAccountMenuContext();\n\n  const handleLogoutClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onLogout?.();\n  };\n\n  const avatarContent = avatar ? (\n    <div className=\"shrink-0\">{avatar}</div>\n  ) : null;\n  const accountDetails = !compact ? (\n    <div className=\"flex min-w-0 flex-1 flex-col\">\n      <div className=\"flex min-w-0 items-center gap-2\">\n        <span className=\"min-w-0 truncate text-sm font-semibold text-foreground\">\n          {name}\n        </span>\n        {badge && <span className=\"shrink-0\">{badge}</span>}\n      </div>\n      {email && (\n        <span className=\"truncate text-sm text-muted-foreground\">{email}</span>\n      )}\n    </div>\n  ) : null;\n\n  if (type === 'simple' && showLogoutButton && !compact) {\n    return (\n      <div\n        data-slot=\"nav-account-menu-trigger\"\n        className={cn(triggerVariants({ type }), 'group/trigger', className)}\n      >\n        <PopoverTriggerBase\n          render={\n            <button\n              type=\"button\"\n              aria-haspopup=\"true\"\n              className=\"flex min-w-0 flex-1 items-center gap-4 text-left outline-none\"\n            />\n          }\n        >\n          {avatarContent}\n          {accountDetails}\n        </PopoverTriggerBase>\n        <button\n          type=\"button\"\n          onClick={handleLogoutClick}\n          className=\"shrink-0 rounded-md p-1.5 text-text-quaternary transition-colors duration-200 ease-smooth hover:bg-muted hover:text-secondary-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none\"\n          aria-label=\"Sign out\"\n        >\n          <LogOut className=\"size-5\" />\n        </button>\n      </div>\n    );\n  }\n\n  return (\n    <PopoverTriggerBase\n      render={\n        <button\n          type=\"button\"\n          data-slot=\"nav-account-menu-trigger\"\n          aria-haspopup=\"true\"\n          aria-label={compact ? `${name} account menu` : undefined}\n          className={cn(\n            triggerVariants({ type }),\n            'group/trigger',\n            compact ? 'w-auto justify-center' : 'max-w-[280px]',\n            className,\n          )}\n        />\n      }\n    >\n      {avatarContent}\n      {!compact && (\n        <>\n          {accountDetails}\n          <ChevronRight\n            className={cn(\n              'size-4 shrink-0 text-muted-foreground transition-transform duration-200 ease-smooth motion-reduce:transition-none',\n              open ? 'rotate-180' : 'rtl:rotate-180',\n            )}\n          />\n        </>\n      )}\n    </PopoverTriggerBase>\n  );\n}\n\n// ============================================\n// NavAccountMenuContent\n// ============================================\n\nexport interface NavAccountMenuContentProps {\n  /** Popover side positioning */\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  /** Popover alignment */\n  align?: 'start' | 'center' | 'end';\n  /** Side offset */\n  sideOffset?: number;\n  /** Children */\n  children: React.ReactNode;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuContent({\n  side = 'right',\n  align = 'end',\n  sideOffset = 8,\n  children,\n  className,\n}: NavAccountMenuContentProps) {\n  return (\n    <PopoverContentBase\n      side={side}\n      align={align}\n      sideOffset={sideOffset}\n      aria-label=\"Account menu\"\n      data-slot=\"nav-account-menu-content\"\n      className={cn(\n        'w-[300px] max-w-[calc(100vw-2rem)] p-0 gap-0 bg-popover border border-border rounded-[14px] overflow-hidden',\n        'shadow-[0px_12px_16px_-4px_color-mix(in_srgb,var(--foreground)_8%,transparent),0px_4px_6px_-2px_color-mix(in_srgb,var(--foreground)_3%,transparent),0px_2px_2px_-1px_color-mix(in_srgb,var(--foreground)_4%,transparent)]',\n        'data-open:animate-in data-closed:animate-out',\n        'data-closed:fade-out-0 data-open:fade-in-0',\n        'data-closed:zoom-out-95 data-open:zoom-in-95',\n        'data-[side=bottom]:slide-in-from-top-2',\n        'data-[side=left]:slide-in-from-right-2',\n        'data-[side=right]:slide-in-from-left-2',\n        'data-[side=top]:slide-in-from-bottom-2',\n        'duration-200 motion-reduce:animate-none',\n        className,\n      )}\n    >\n      <div className=\"flex flex-col py-2\" role=\"menu\" aria-label=\"Account menu\">\n        {children}\n      </div>\n    </PopoverContentBase>\n  );\n}\n\n// ============================================\n// NavAccountMenuHeader\n// ============================================\n\nexport interface NavAccountMenuHeaderProps {\n  /** Header title (e.g. \"Profile\") */\n  title: string;\n  /** Subtitle text or custom React node (e.g. \"Last login 22 May, 2026 11:30pm\") */\n  subtitle?: React.ReactNode;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuHeader({\n  title,\n  subtitle,\n  className,\n}: NavAccountMenuHeaderProps) {\n  return (\n    <div\n      data-slot=\"nav-account-menu-header\"\n      className={cn('px-6 pb-3 delight-fade-in', className)}\n    >\n      <p className=\"text-base font-semibold text-foreground\">{title}</p>\n      {subtitle &&\n        (typeof subtitle === 'string' ? (\n          <p className=\"mt-2 text-sm text-muted-foreground\">{subtitle}</p>\n        ) : (\n          <div className=\"mt-2\">{subtitle}</div>\n        ))}\n    </div>\n  );\n}\n\n// ============================================\n// NavAccountMenuSection\n// ============================================\n\nexport interface NavAccountMenuSectionProps {\n  /** Optional section header label */\n  label?: string;\n  /** Show top border separator between sections */\n  bordered?: boolean;\n  /** Section content */\n  children: React.ReactNode;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuSection({\n  label,\n  bordered = false,\n  children,\n  className,\n}: NavAccountMenuSectionProps) {\n  return (\n    <section\n      data-slot=\"nav-account-menu-section\"\n      aria-label={label}\n      className={cn(\n        'flex flex-col gap-1 py-1.5',\n        bordered && 'border-t border-border',\n        className,\n      )}\n    >\n      {label && (\n        <div className=\"px-3 pt-1.5 pb-1\">\n          <span className=\"text-xs font-semibold text-muted-foreground\">\n            {label}\n          </span>\n        </div>\n      )}\n      {children}\n    </section>\n  );\n}\n\n// ============================================\n// NavAccountMenuItem\n// ============================================\n\n/**\n * Props passed to the render function for custom menu item rendering.\n */\nexport interface NavAccountMenuItemRenderProps {\n  /** Combined className for styling */\n  className: string;\n  /** Click handler that closes menu and triggers onSelect */\n  onClick: () => void;\n  /** Menu item content (icon, label, shortcut) */\n  children: React.ReactNode;\n}\n\n/**\n * Render prop type for polymorphic rendering.\n * Accepts a function that receives props and returns an element.\n */\ntype NavAccountMenuItemRenderFn = (\n  props: NavAccountMenuItemRenderProps,\n) => React.ReactElement;\n\nexport interface NavAccountMenuItemProps {\n  /** Left icon (20px) */\n  icon?: React.ReactNode;\n  /** Keyboard shortcut display */\n  shortcut?: string;\n  /** Destructive styling (red) */\n  destructive?: boolean;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Selection callback */\n  onSelect?: () => void;\n  /**\n   * Render prop for polymorphic rendering.\n   * Use this to render the menu item as a different element (e.g., link).\n   * @example\n   * <NavAccountMenuItem\n   *   icon={<User01 />}\n   *   render={(props) => <a {...props} href=\"/profile\" />}\n   * >\n   *   View profile\n   * </NavAccountMenuItem>\n   */\n  render?: NavAccountMenuItemRenderFn;\n  /** Label text */\n  children: React.ReactNode;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuItem({\n  icon,\n  shortcut,\n  destructive = false,\n  disabled = false,\n  onSelect,\n  render,\n  children,\n  className,\n}: NavAccountMenuItemProps) {\n  const { onOpenChange } = useNavAccountMenuContext();\n\n  const handleClick = () => {\n    if (disabled) return;\n    onSelect?.();\n    onOpenChange(false);\n  };\n\n  const content = (\n    <div className=\"flex flex-1 gap-2 items-center overflow-hidden p-2 rounded-md transition-[background-color] duration-200 ease-smooth delight-selection-press motion-reduce:transition-none\">\n      <div className=\"flex flex-1 gap-2 items-center min-w-0\">\n        {icon && (\n          <span\n            className={cn(\n              'shrink-0 [&>svg]:size-4 transition-transform duration-200 ease-smooth group-hover/menuitem:translate-x-0.5 motion-reduce:transition-none',\n              destructive ? 'text-destructive' : 'text-foreground',\n            )}\n          >\n            {icon}\n          </span>\n        )}\n        <span\n          className={cn(\n            'flex-1 text-sm truncate',\n            destructive ? 'text-destructive' : 'text-secondary-foreground',\n          )}\n        >\n          {children}\n        </span>\n      </div>\n      {shortcut && (\n        <Kbd variant=\"outline\" size=\"xs\" className=\"shrink-0\">\n          {shortcut}\n        </Kbd>\n      )}\n    </div>\n  );\n\n  const baseClassName = cn(\n    'group/menuitem flex items-center px-1.5 py-0 w-full text-left cursor-pointer outline-none',\n    'hover:[&>div]:bg-muted focus-visible:[&>div]:bg-muted',\n    'focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring',\n    disabled && 'pointer-events-none opacity-50',\n    className,\n  );\n\n  if (render) {\n    return render({\n      className: baseClassName,\n      onClick: handleClick,\n      children: content,\n    });\n  }\n\n  return (\n    <button\n      type=\"button\"\n      role=\"menuitem\"\n      data-slot=\"nav-account-menu-item\"\n      className={baseClassName}\n      onClick={handleClick}\n      disabled={disabled}\n      aria-disabled={disabled || undefined}\n    >\n      {content}\n    </button>\n  );\n}\n\n// ============================================\n// NavAccountMenuAccount\n// ============================================\n\nexport interface NavAccountMenuAccountProps {\n  /** Avatar element */\n  avatar?: React.ReactNode;\n  /** Account display name */\n  name: string;\n  /** Account email */\n  email: string;\n  /** Whether this account is currently selected */\n  selected?: boolean;\n  /** Selection callback */\n  onSelect?: () => void;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuAccount({\n  avatar,\n  name,\n  email,\n  selected = false,\n  onSelect,\n  className,\n}: NavAccountMenuAccountProps) {\n  return (\n    <div\n      data-slot=\"nav-account-menu-account\"\n      className={cn('flex items-center px-1.5 py-0 w-full', className)}\n    >\n      <button\n        type=\"button\"\n        role=\"menuitemradio\"\n        aria-checked={selected}\n        aria-label={`Switch to ${name} (${email})`}\n        className={cn(\n          'relative flex flex-1 gap-2 items-center overflow-hidden px-2 py-1.5 rounded-md cursor-pointer outline-none',\n          'hover:bg-muted focus-visible:bg-muted',\n          'transition-colors duration-200 ease-smooth motion-reduce:transition-none',\n          'focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring',\n          'text-left',\n          selected && 'bg-surface-2',\n        )}\n        onClick={onSelect}\n      >\n        {avatar && <div className=\"shrink-0\">{avatar}</div>}\n        <div className=\"flex flex-col min-w-0 flex-1\">\n          <span className=\"text-sm font-semibold text-foreground truncate\">\n            {name}\n          </span>\n          <span className=\"text-sm text-muted-foreground truncate\">\n            {email}\n          </span>\n        </div>\n        {/* Radio indicator */}\n        <div\n          aria-hidden=\"true\"\n          className={cn(\n            'size-4 rounded-full border-2 shrink-0 flex items-center justify-center transition-colors duration-200 ease-smooth motion-reduce:transition-none',\n            selected\n              ? 'bg-primary border-primary'\n              : 'border-border bg-transparent',\n          )}\n        >\n          {selected && (\n            <div className=\"size-1.5 rounded-full bg-primary-foreground delight-check-bounce\" />\n          )}\n        </div>\n      </button>\n    </div>\n  );\n}\n\n// ============================================\n// NavAccountMenuSeparator\n// ============================================\n\nexport interface NavAccountMenuSeparatorProps {\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuSeparator({ className }: NavAccountMenuSeparatorProps) {\n  return (\n    <hr\n      data-slot=\"nav-account-menu-separator\"\n      className={cn('h-px border-0 bg-border mx-5', className)}\n    />\n  );\n}\n\n// ============================================\n// NavAccountMenuFooter\n// ============================================\n\nexport interface NavAccountMenuFooterProps {\n  /** Footer content (typically buttons) */\n  children: React.ReactNode;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuFooter({\n  children,\n  className,\n}: NavAccountMenuFooterProps) {\n  return (\n    <div\n      data-slot=\"nav-account-menu-footer\"\n      className={cn('flex items-center justify-center px-5 pt-4', className)}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ============================================\n// NavAccountMenuThemeSwitch (uses Switch theme variant)\n// ============================================\n\nexport interface NavAccountMenuThemeSwitchProps {\n  /** Switch theme variant to render */\n  variant?:\n    | 'theme-gradient'\n    | 'theme-switch'\n    | 'theme-pill'\n    | 'theme-segmented';\n  /** Switch size */\n  size?: 'sm' | 'md' | 'lg';\n  /** Controlled checked state (dark = checked) */\n  checked?: boolean;\n  /** Callback when checked state changes */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Optional label displayed next to the switch (e.g. \"Light Mode\") */\n  label?: string;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuThemeSwitch({\n  variant = 'theme-gradient',\n  size = 'sm',\n  checked,\n  onCheckedChange,\n  label,\n  className,\n}: NavAccountMenuThemeSwitchProps) {\n  const switchId = React.useId();\n  const labelId = label ? `${switchId}-label` : undefined;\n\n  return (\n    <div\n      data-slot=\"nav-account-menu-theme-switch\"\n      className={cn('flex items-center px-1.5 py-0', className)}\n    >\n      <div className=\"flex items-center gap-2.5 p-2\">\n        <Switch\n          id={switchId}\n          variant={variant}\n          size={size}\n          checked={checked}\n          onCheckedChange={onCheckedChange}\n          aria-labelledby={labelId}\n          aria-label={label ? undefined : 'Theme selector'}\n        />\n        {label && (\n          <label\n            htmlFor={switchId}\n            id={labelId}\n            className=\"cursor-pointer text-sm text-secondary-foreground\"\n          >\n            {label}\n          </label>\n        )}\n      </div>\n    </div>\n  );\n}\n\n// ============================================\n// Display Names\n// ============================================\n\nNavAccountMenu.displayName = 'NavAccountMenu';\nNavAccountMenuTrigger.displayName = 'NavAccountMenuTrigger';\nNavAccountMenuContent.displayName = 'NavAccountMenuContent';\nNavAccountMenuHeader.displayName = 'NavAccountMenuHeader';\nNavAccountMenuSection.displayName = 'NavAccountMenuSection';\nNavAccountMenuItem.displayName = 'NavAccountMenuItem';\nNavAccountMenuAccount.displayName = 'NavAccountMenuAccount';\nNavAccountMenuSeparator.displayName = 'NavAccountMenuSeparator';\nNavAccountMenuFooter.displayName = 'NavAccountMenuFooter';\nNavAccountMenuThemeSwitch.displayName = 'NavAccountMenuThemeSwitch';\n\n// ============================================\n// Exports\n// ============================================\n\nexport {\n  NavAccountMenu,\n  NavAccountMenuAccount,\n  NavAccountMenuContent,\n  NavAccountMenuFooter,\n  NavAccountMenuHeader,\n  NavAccountMenuItem,\n  NavAccountMenuSection,\n  NavAccountMenuSeparator,\n  NavAccountMenuThemeSwitch,\n  NavAccountMenuTrigger,\n  triggerVariants as navAccountMenuTriggerVariants,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index227.js","names":[],"sources":["../src/components/templates/AuthPageLayout/AuthPageLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Avatar, AvatarGroup } from '@/components/molecules/data/Avatar';\nimport { BrandIcon } from '@/components/molecules/data/BrandIcon';\nimport {\n  PageBackground,\n  type PageBackgroundProps,\n} from '@/components/templates/PageBackground';\nimport { cn } from '@/lib/utils';\n\nexport interface AuthPageActionElementProps {\n  className?: string;\n  children?: React.ReactNode;\n  onClick?: React.MouseEventHandler<HTMLElement>;\n}\n\nexport type AuthPageActionElement =\n  React.ReactElement<AuthPageActionElementProps>;\n\nexport interface AuthPageAction {\n  label: React.ReactNode;\n  href?: string;\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  render?: AuthPageActionElement;\n}\n\nexport interface AuthPageAvatar {\n  src?: string;\n  alt?: string;\n  fallback?: string;\n}\n\nexport interface AuthPageAsideConfig {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  cardTitle?: React.ReactNode;\n  cardDescription?: React.ReactNode;\n  icon?: React.ReactNode;\n  avatars?: AuthPageAvatar[];\n  avatarOverflowCount?: number;\n}\n\nexport type AuthPageBackgroundPattern = PageBackgroundProps['pattern'] | 'none';\n\nexport interface AuthPageLayoutProps\n  extends Omit<React.ComponentProps<'main'>, 'title'> {\n  logo?: React.ReactNode;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  aside?: AuthPageAsideConfig | React.ReactNode;\n  showAside?: boolean;\n  showAsideOnMobile?: boolean;\n  formMaxWidthClassName?: string;\n  formClassName?: string;\n  asideClassName?: string;\n  backgroundPattern?: AuthPageBackgroundPattern;\n}\n\nconst DEFAULT_AVATARS: AuthPageAvatar[] = [\n  { fallback: 'HA', alt: 'HUMAIN account member' },\n  { fallback: 'OS', alt: 'HUMAIN OS member' },\n  { fallback: 'AI', alt: 'HUMAIN AI member' },\n];\n\nfunction isAsideConfig(\n  aside: AuthPageAsideConfig | React.ReactNode,\n): aside is AuthPageAsideConfig {\n  return (\n    typeof aside === 'object' &&\n    aside !== null &&\n    !Array.isArray(aside) &&\n    !React.isValidElement(aside)\n  );\n}\n\nfunction renderActionElement(\n  action: AuthPageAction,\n  className?: string,\n): React.ReactElement {\n  if (action.render) {\n    return React.cloneElement(action.render, {\n      className: cn(action.render.props.className, className),\n      onClick: action.onClick ?? action.render.props.onClick,\n      children: action.render.props.children ?? action.label,\n    });\n  }\n\n  if (action.href) {\n    return (\n      <a className={className} href={action.href} onClick={action.onClick}>\n        {action.label}\n      </a>\n    );\n  }\n\n  return (\n    <button className={className} type=\"button\" onClick={action.onClick}>\n      {action.label}\n    </button>\n  );\n}\n\nfunction AuthAsidePanel({\n  title,\n  description,\n  cardTitle,\n  cardDescription,\n  icon,\n  avatars,\n  avatarOverflowCount,\n}: AuthPageAsideConfig): React.ReactElement {\n  const resolvedAvatars = avatars ?? DEFAULT_AVATARS;\n  const defaultOverflowCount = avatars ? 0 : 3695;\n  const visibleAvatars = resolvedAvatars.slice(0, 3);\n  const hiddenAvatarCount = Math.max(\n    0,\n    resolvedAvatars.length - visibleAvatars.length,\n  );\n  const configuredOverflowCount = Math.max(\n    0,\n    avatarOverflowCount ?? defaultOverflowCount,\n  );\n  const overflowAvatarCount = hiddenAvatarCount + configuredOverflowCount;\n\n  return (\n    <div\n      data-slot=\"auth-page-aside-panel\"\n      className=\"relative flex min-h-full w-full flex-col overflow-hidden rounded-xl bg-primary p-8 text-primary-foreground\"\n    >\n      <BrandIcon\n        aria-hidden\n        className=\"-start-16 top-1/3 absolute size-72 -rotate-12 text-primary-foreground/10\"\n        icon=\"mark\"\n        size=\"2xl\"\n      />\n      <div className=\"relative z-10 flex max-w-xl flex-col gap-6\">\n        {title && (\n          <h2 className=\"text-display-md font-bold leading-tight text-primary-foreground lg:text-display-lg\">\n            {title}\n          </h2>\n        )}\n        {description && (\n          <p className=\"text-md leading-normal text-primary-foreground lg:text-xl\">\n            {description}\n          </p>\n        )}\n      </div>\n\n      {(cardTitle || cardDescription) && (\n        <div\n          data-slot=\"auth-page-aside-card\"\n          className=\"relative z-10 mt-auto flex min-h-[248px] flex-col overflow-visible rounded-2xl bg-card px-10 py-8 text-card-foreground\"\n        >\n          <svg\n            aria-hidden\n            data-slot=\"auth-page-aside-notch\"\n            className=\"pointer-events-none absolute top-0 end-0 z-0 h-[94.5px] w-[95px] overflow-visible text-primary\"\n            focusable=\"false\"\n            preserveAspectRatio=\"none\"\n            viewBox=\"0 0 95 94.5\"\n          >\n            <path\n              d=\"M0 0H95V94.5C95 81.2452 84.2548 70.5 71 70.5H48C34.7452 70.5 24 59.7548 24 46.5V24C24 10.7452 13.2548 0 0 0Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n          <div\n            data-slot=\"auth-page-aside-icon\"\n            className=\"absolute end-1 top-1 z-20 flex size-[60px] items-center justify-center rounded-[12px] bg-card text-primary\"\n          >\n            {icon ?? (\n              <BrandIcon\n                aria-hidden\n                className=\"text-[40px]\"\n                data-slot=\"auth-page-aside-symbol\"\n                icon=\"symbol\"\n                size=\"fluid\"\n              />\n            )}\n          </div>\n          <div className=\"relative z-10 flex flex-col gap-6 pe-16\">\n            {cardTitle && (\n              <h3 className=\"text-display-sm font-bold leading-tight text-card-foreground\">\n                {cardTitle}\n              </h3>\n            )}\n            {cardDescription && (\n              <p className=\"text-lg leading-normal text-card-foreground\">\n                {cardDescription}\n              </p>\n            )}\n          </div>\n          {(visibleAvatars.length > 0 || overflowAvatarCount > 0) && (\n            <div className=\"relative z-10 mt-auto flex justify-end pt-5\">\n              <AvatarGroup size=\"sm\">\n                {visibleAvatars.map((avatar, index) => (\n                  <Avatar\n                    key={`${avatar.fallback ?? avatar.alt ?? 'avatar'}-${index}`}\n                    alt={avatar.alt}\n                    fallback={avatar.fallback}\n                    src={avatar.src}\n                  />\n                ))}\n                {overflowAvatarCount > 0 && (\n                  <div\n                    role=\"img\"\n                    aria-label={`${overflowAvatarCount} more account members`}\n                    className=\"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-[color-mix(in_srgb,var(--background)_97%,var(--foreground)_3%)]\"\n                  >\n                    <span\n                      aria-hidden=\"true\"\n                      className=\"font-normal text-foreground text-xs leading-4\"\n                    >\n                      +{overflowAvatarCount}\n                    </span>\n                  </div>\n                )}\n              </AvatarGroup>\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction AuthPageLayout({\n  logo,\n  title,\n  description,\n  aside,\n  showAside = true,\n  showAsideOnMobile = false,\n  formMaxWidthClassName = 'max-w-[520px]',\n  formClassName,\n  asideClassName,\n  backgroundPattern = 'none',\n  className,\n  children,\n  ...props\n}: AuthPageLayoutProps): React.ReactElement {\n  const shouldRenderAside = showAside && aside != null;\n  const stackAsideOnMobile = shouldRenderAside && showAsideOnMobile;\n\n  return (\n    <main\n      {...props}\n      data-slot=\"auth-page-layout\"\n      className={cn(\n        'relative isolate flex min-h-screen overflow-hidden bg-surface-1 text-foreground',\n        stackAsideOnMobile ? 'flex-col lg:flex-row' : 'flex-row',\n        className,\n      )}\n    >\n      {backgroundPattern !== 'none' && (\n        <PageBackground\n          pattern={backgroundPattern}\n          offset=\"icon-center\"\n          className=\"-z-10 opacity-70\"\n        />\n      )}\n      <section\n        aria-label=\"Authentication form\"\n        data-slot=\"auth-page-form-pane\"\n        data-testid=\"auth-page-form-pane\"\n        className={cn(\n          'flex min-w-0 items-center justify-center px-6 py-12 sm:px-8 lg:min-h-screen lg:py-24',\n          shouldRenderAside ? 'flex-1 lg:w-1/2 lg:flex-none' : 'flex-1',\n          stackAsideOnMobile ? 'min-h-[50vh]' : 'min-h-screen',\n        )}\n      >\n        <div\n          className={cn(\n            'flex w-full min-w-0 flex-col gap-6',\n            formMaxWidthClassName,\n            formClassName,\n          )}\n        >\n          <div\n            data-slot=\"auth-page-logo\"\n            className=\"flex h-8 items-center px-6 text-foreground\"\n          >\n            {logo ?? <BrandIcon icon=\"mark\" size=\"lg\" />}\n          </div>\n          {(title || description) && (\n            <header className=\"flex flex-col gap-2 px-6\">\n              {title && (\n                <h1 className=\"text-display-xs font-semibold leading-tight text-foreground\">\n                  {title}\n                </h1>\n              )}\n              {description && (\n                <p className=\"text-md leading-normal text-secondary-foreground\">\n                  {description}\n                </p>\n              )}\n            </header>\n          )}\n          <div data-slot=\"auth-page-form-content\" className=\"px-6\">\n            {children}\n          </div>\n        </div>\n      </section>\n\n      {shouldRenderAside && (\n        <section\n          aria-label=\"Authentication context\"\n          data-slot=\"auth-page-aside-pane\"\n          data-testid=\"auth-page-aside-pane\"\n          className={cn(\n            'min-w-0 flex-1 bg-muted p-5 lg:min-h-screen',\n            'lg:w-1/2 lg:flex-none',\n            stackAsideOnMobile ? 'min-h-[50vh]' : 'min-h-screen',\n            showAsideOnMobile ? 'flex' : 'hidden lg:flex',\n            asideClassName,\n          )}\n        >\n          {isAsideConfig(aside) ? <AuthAsidePanel {...aside} /> : aside}\n        </section>\n      )}\n    </main>\n  );\n}\n\nAuthPageLayout.displayName = 'AuthPageLayout';\n\nexport { AuthAsidePanel, AuthPageLayout, renderActionElement };\n"],"mappings":"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"}