@omnitron-dev/prism 0.2.0 → 0.3.0

package/dist/chunk-Z5OSPAOC.js

@@ -0,0 +1,1576 @@
+import { ARIA_LABELS, SkipLink } from './chunk-AD4W7HYC.js';
+import { useSettingsStore } from './chunk-XIXSSI3B.js';
+import { createContext, useState, useMemo, useCallback, useContext, Fragment as Fragment$1, useEffect } from 'react';
+import { useTheme, useMediaQuery } from '@mui/material';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import GlobalStyles from '@mui/material/GlobalStyles';
+import { styled, alpha, useTheme as useTheme$1 } from '@mui/material/styles';
+import Box8 from '@mui/material/Box';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import Container2 from '@mui/material/Container';
+import Avatar from '@mui/material/Avatar';
+import ButtonBase from '@mui/material/ButtonBase';
+import Popover from '@mui/material/Popover';
+import Divider from '@mui/material/Divider';
+import Typography2 from '@mui/material/Typography';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import IconButton from '@mui/material/IconButton';
+import SvgIcon from '@mui/material/SvgIcon';
+import Drawer from '@mui/material/Drawer';
+import List from '@mui/material/List';
+import ListSubheader from '@mui/material/ListSubheader';
+import ListItemButton from '@mui/material/ListItemButton';
+import Tooltip from '@mui/material/Tooltip';
+import { useLocation, Link as Link$1 } from 'react-router-dom';
+import Card from '@mui/material/Card';
+import Link from '@mui/material/Link';
+
+// src/layouts/types.ts
+var DRAWER_WIDTHS = {
+  /** Full expanded width */
+  full: 280,
+  /** Collapsed/mini width (72 content + 1px border = header desktop height) */
+  mini: 73,
+  /** Mobile drawer width */
+  mobile: 280,
+  /** Stacked sidenav collapsed width (left panel only) */
+  stackedCollapsed: 72,
+  /** Stacked sidenav expanded width */
+  stackedExpanded: 300
+};
+var HEADER_HEIGHTS = {
+  mobile: 64,
+  desktop: 72
+};
+var LAYOUT_CSS_VARS = {
+  // Header
+  headerHeight: "--layout-header-height",
+  headerMobileHeight: "--layout-header-mobile-height",
+  headerDesktopHeight: "--layout-header-desktop-height",
+  headerBlur: "--layout-header-blur",
+  headerZIndex: "--layout-header-z-index",
+  // Nav
+  navWidth: "--layout-nav-width",
+  navMiniWidth: "--layout-nav-mini-width",
+  navMobileWidth: "--layout-nav-mobile-width",
+  navZIndex: "--layout-nav-z-index",
+  navBg: "--layout-nav-bg",
+  navTextColor: "--layout-nav-text-color",
+  navTextSecondaryColor: "--layout-nav-text-secondary-color",
+  // Main
+  mainPaddingTop: "--layout-main-padding-top",
+  mainPaddingBottom: "--layout-main-padding-bottom",
+  mainPaddingLeft: "--layout-main-padding-left",
+  mainPaddingRight: "--layout-main-padding-right"
+};
+var DEFAULT_LAYOUT_CSS_VARS = {
+  [LAYOUT_CSS_VARS.headerMobileHeight]: `${HEADER_HEIGHTS.mobile}px`,
+  [LAYOUT_CSS_VARS.headerDesktopHeight]: `${HEADER_HEIGHTS.desktop}px`,
+  [LAYOUT_CSS_VARS.headerBlur]: "8px",
+  [LAYOUT_CSS_VARS.navWidth]: `${DRAWER_WIDTHS.full}px`,
+  [LAYOUT_CSS_VARS.navMiniWidth]: `${DRAWER_WIDTHS.mini}px`,
+  [LAYOUT_CSS_VARS.navMobileWidth]: `${DRAWER_WIDTHS.mobile}px`
+};
+var defaultLayoutConfig = {
+  navigationMenuType: "sidenav",
+  sidenavVariant: "default",
+  sidenavCollapsed: false,
+  topnavVariant: "default",
+  navColor: "default",
+  drawerOpen: false,
+  drawerWidth: DRAWER_WIDTHS.full,
+  compactLayout: false
+};
+var LayoutContext = createContext(null);
+LayoutContext.displayName = "LayoutContext";
+function LayoutProvider({ children, initialConfig, persistKey }) {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+  const sidebarCollapsedMap = useSettingsStore((s) => s.sidebarCollapsed);
+  const setSidebarCollapsedPersist = useSettingsStore((s) => s.setSidebarCollapsed);
+  const [config, setConfigState] = useState(() => {
+    const persisted = persistKey ? sidebarCollapsedMap[persistKey] ?? false : false;
+    return {
+      ...defaultLayoutConfig,
+      ...initialConfig,
+      ...persistKey ? { sidenavCollapsed: persisted } : {}
+    };
+  });
+  const [openItems, setOpenItems] = useState([]);
+  const calculatedDrawerWidth = useMemo(() => {
+    if (config.sidenavVariant === "mini" || config.sidenavCollapsed) {
+      return config.sidenavVariant === "stacked" ? DRAWER_WIDTHS.stackedCollapsed : DRAWER_WIDTHS.mini;
+    }
+    if (config.sidenavVariant === "stacked") {
+      return DRAWER_WIDTHS.stackedExpanded;
+    }
+    return DRAWER_WIDTHS.full;
+  }, [config.sidenavVariant, config.sidenavCollapsed]);
+  const effectiveConfig = useMemo(
+    () => ({
+      ...config,
+      drawerWidth: calculatedDrawerWidth
+    }),
+    [config, calculatedDrawerWidth]
+  );
+  const setConfig = useCallback((updates) => {
+    setConfigState((prev) => ({ ...prev, ...updates }));
+  }, []);
+  const toggleDrawer = useCallback(() => {
+    setConfigState((prev) => ({ ...prev, drawerOpen: !prev.drawerOpen }));
+  }, []);
+  const toggleSidenavCollapse = useCallback(() => {
+    setConfigState((prev) => {
+      const next = !prev.sidenavCollapsed;
+      if (persistKey) {
+        queueMicrotask(() => setSidebarCollapsedPersist(persistKey, next));
+      }
+      return { ...prev, sidenavCollapsed: next };
+    });
+  }, [persistKey, setSidebarCollapsedPersist]);
+  const setNavigationMenuType = useCallback((type) => {
+    setConfigState((prev) => ({ ...prev, navigationMenuType: type }));
+  }, []);
+  const setSidenavVariant = useCallback((variant) => {
+    setConfigState((prev) => ({ ...prev, sidenavVariant: variant }));
+  }, []);
+  const setNavColor = useCallback((mode) => {
+    setConfigState((prev) => ({ ...prev, navColor: mode }));
+  }, []);
+  const isItemOpen = useCallback((id) => openItems.includes(id), [openItems]);
+  const toggleItem = useCallback((id) => {
+    setOpenItems((prev) => prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]);
+  }, []);
+  const isNavItemActive = useCallback((item, pathname) => {
+    if (!item.path) return false;
+    const cleanPath = pathname.split(/[?#]/)[0].replace(/\/+$/, "") || "/";
+    if (item.path === cleanPath) return true;
+    if (item.selectionPrefix) {
+      const prefixes = Array.isArray(item.selectionPrefix) ? item.selectionPrefix : [item.selectionPrefix];
+      if (prefixes.some((p) => cleanPath.startsWith(p))) {
+        return true;
+      }
+    }
+    if (item.deepMatch !== false && cleanPath.startsWith(item.path)) {
+      const nextChar = cleanPath[item.path.length];
+      return !nextChar || nextChar === "/";
+    }
+    return false;
+  }, []);
+  const isNestedItemActive = useCallback(
+    (items, pathname) => {
+      if (!items || items.length === 0) return false;
+      const checkItem = (item) => {
+        if (isNavItemActive(item, pathname)) {
+          return true;
+        }
+        if (item.children && item.children.length > 0) {
+          return item.children.some(checkItem);
+        }
+        return false;
+      };
+      return items.some(checkItem);
+    },
+    [isNavItemActive]
+  );
+  const contextValue = useMemo(
+    () => ({
+      config: effectiveConfig,
+      isMobile,
+      setConfig,
+      toggleDrawer,
+      toggleSidenavCollapse,
+      setNavigationMenuType,
+      setSidenavVariant,
+      setNavColor,
+      openItems,
+      setOpenItems,
+      isItemOpen,
+      toggleItem,
+      isNestedItemActive,
+      isNavItemActive
+    }),
+    [
+      effectiveConfig,
+      isMobile,
+      setConfig,
+      toggleDrawer,
+      toggleSidenavCollapse,
+      setNavigationMenuType,
+      setSidenavVariant,
+      setNavColor,
+      openItems,
+      isItemOpen,
+      toggleItem,
+      isNestedItemActive,
+      isNavItemActive
+    ]
+  );
+  return /* @__PURE__ */ jsx(LayoutContext.Provider, { value: contextValue, children });
+}
+function useLayoutContext() {
+  const context = useContext(LayoutContext);
+  if (!context) {
+    throw new Error("useLayoutContext must be used within a LayoutProvider");
+  }
+  return context;
+}
+function useLayoutConfig() {
+  const { config } = useLayoutContext();
+  return config;
+}
+function useSidenavVisible() {
+  const { config } = useLayoutContext();
+  return config.navigationMenuType === "sidenav" || config.navigationMenuType === "combo";
+}
+function useTopnavVisible() {
+  const { config } = useLayoutContext();
+  return config.navigationMenuType === "topnav" || config.navigationMenuType === "combo";
+}
+function useNavActive(pathname) {
+  const { isNavItemActive, isNestedItemActive } = useLayoutContext();
+  return useMemo(
+    () => ({
+      /**
+       * Check if a nav item is active.
+       */
+      isItemActive: (item) => isNavItemActive(item, pathname),
+      /**
+       * Check if any nested item is active.
+       */
+      isNestedActive: (items) => isNestedItemActive(items, pathname)
+    }),
+    [isNavItemActive, isNestedItemActive, pathname]
+  );
+}
+function getBaseLayoutCssVars(zIndexBase) {
+  return {
+    // Header dimensions
+    [LAYOUT_CSS_VARS.headerMobileHeight]: `${HEADER_HEIGHTS.mobile}px`,
+    [LAYOUT_CSS_VARS.headerDesktopHeight]: `${HEADER_HEIGHTS.desktop}px`,
+    [LAYOUT_CSS_VARS.headerBlur]: "8px",
+    [LAYOUT_CSS_VARS.headerZIndex]: zIndexBase + 1,
+    // Nav dimensions
+    [LAYOUT_CSS_VARS.navWidth]: `${DRAWER_WIDTHS.full}px`,
+    [LAYOUT_CSS_VARS.navMiniWidth]: `${DRAWER_WIDTHS.mini}px`,
+    [LAYOUT_CSS_VARS.navMobileWidth]: `${DRAWER_WIDTHS.mobile}px`,
+    [LAYOUT_CSS_VARS.navZIndex]: zIndexBase
+  };
+}
+function getNavColorCssVars(mode, theme) {
+  const isDark = theme.palette.mode === "dark";
+  switch (mode) {
+    case "vibrant":
+      return {
+        [LAYOUT_CSS_VARS.navBg]: isDark ? "linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)" : "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+        [LAYOUT_CSS_VARS.navTextColor]: "#ffffff",
+        [LAYOUT_CSS_VARS.navTextSecondaryColor]: "rgba(255, 255, 255, 0.7)"
+      };
+    case "integrate":
+      return {
+        [LAYOUT_CSS_VARS.navBg]: "transparent",
+        [LAYOUT_CSS_VARS.navTextColor]: theme.palette.text.primary,
+        [LAYOUT_CSS_VARS.navTextSecondaryColor]: theme.palette.text.secondary
+      };
+    case "default":
+    default:
+      return {
+        [LAYOUT_CSS_VARS.navBg]: theme.palette.background.paper,
+        [LAYOUT_CSS_VARS.navTextColor]: theme.palette.text.primary,
+        [LAYOUT_CSS_VARS.navTextSecondaryColor]: theme.palette.text.secondary
+      };
+  }
+}
+function mergeLayoutCssVars(customVars, ...defaultVars) {
+  return Object.assign({}, ...defaultVars, customVars);
+}
+function LayoutGlobalStyles({ cssVars }) {
+  const theme = useTheme$1();
+  const baseVars = getBaseLayoutCssVars(theme.zIndex.drawer);
+  const allVars = mergeLayoutCssVars(cssVars, baseVars);
+  Object.entries(allVars).map(([key, value]) => `${key}: ${value};`).join("\n");
+  return /* @__PURE__ */ jsx(
+    GlobalStyles,
+    {
+      styles: {
+        ":root": Object.fromEntries(Object.entries(allVars).map(([key, value]) => [key, value])),
+        // Responsive header height
+        [`@media (max-width: ${theme.breakpoints.values.md}px)`]: {
+          ":root": {
+            [LAYOUT_CSS_VARS.headerHeight]: `var(${LAYOUT_CSS_VARS.headerMobileHeight})`
+          }
+        },
+        [`@media (min-width: ${theme.breakpoints.values.md}px)`]: {
+          ":root": {
+            [LAYOUT_CSS_VARS.headerHeight]: `var(${LAYOUT_CSS_VARS.headerDesktopHeight})`
+          }
+        }
+      }
+    }
+  );
+}
+var LayoutRoot = styled(Box8)({
+  minHeight: "100%",
+  display: "flex",
+  flex: "1 1 auto",
+  flexDirection: "column"
+});
+var LayoutSidebarContainer = styled(Box8)({
+  display: "flex",
+  flex: "1 1 auto",
+  flexDirection: "row",
+  minHeight: 0
+  // Allow shrinking in flex context
+});
+function LayoutSection({
+  headerSection,
+  sidebarSection,
+  footerSection,
+  children,
+  cssVars,
+  sx
+}) {
+  const mainContent = /* @__PURE__ */ jsxs(
+    Box8,
+    {
+      component: "main",
+      sx: {
+        display: "flex",
+        flex: "1 1 auto",
+        flexDirection: "column",
+        minWidth: 0
+        // Allow text truncation
+      },
+      children: [
+        children,
+        footerSection
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(LayoutRoot, { sx, children: [
+    /* @__PURE__ */ jsx(LayoutGlobalStyles, { cssVars }),
+    headerSection,
+    sidebarSection ? /* @__PURE__ */ jsxs(LayoutSidebarContainer, { children: [
+      sidebarSection,
+      mainContent
+    ] }) : mainContent
+  ] });
+}
+function MainSection({ children, sx }) {
+  return /* @__PURE__ */ jsx(
+    Box8,
+    {
+      component: "main",
+      sx: [
+        {
+          display: "flex",
+          flex: "1 1 auto",
+          flexDirection: "column",
+          minWidth: 0,
+          py: {
+            xs: 2,
+            sm: 3,
+            md: 4
+          },
+          px: {
+            xs: 2,
+            sm: 3,
+            md: 4
+          }
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children
+    }
+  );
+}
+function useScrollOffset(threshold = 10) {
+  const [isOffset, setIsOffset] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined") return void 0;
+    const upper = threshold;
+    const lower = Math.max(0, threshold / 2);
+    let ticking = false;
+    const handleScroll = () => {
+      if (!ticking) {
+        ticking = true;
+        requestAnimationFrame(() => {
+          const y = window.scrollY;
+          setIsOffset((prev) => prev ? y > lower : y > upper);
+          ticking = false;
+        });
+      }
+    };
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [threshold]);
+  return isOffset;
+}
+var StyledAppBar = styled(AppBar, {
+  shouldForwardProp: (prop) => !["isOffset", "disableOffset", "disableElevation"].includes(prop)
+})(({ theme, isOffset, disableOffset, disableElevation }) => {
+  const pseudoBase = {
+    opacity: 0,
+    content: '""',
+    visibility: "hidden",
+    position: "absolute",
+    transition: theme.transitions.create(["opacity", "visibility"], {
+      easing: theme.transitions.easing.easeInOut,
+      duration: theme.transitions.duration.shorter
+    })
+  };
+  const bgStyles = {
+    ...pseudoBase,
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    zIndex: -1,
+    backdropFilter: `blur(var(${LAYOUT_CSS_VARS.headerBlur}, 8px))`,
+    WebkitBackdropFilter: `blur(var(${LAYOUT_CSS_VARS.headerBlur}, 8px))`,
+    backgroundColor: alpha(theme.palette.background.default, 0.8),
+    ...isOffset && { opacity: 1, visibility: "visible" }
+  };
+  const shadowStyles = {
+    ...pseudoBase,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: 24,
+    margin: "auto",
+    borderRadius: "50%",
+    width: "calc(100% - 48px)",
+    zIndex: -2,
+    boxShadow: theme.shadows[8],
+    ...isOffset && { opacity: 0.48, visibility: "visible" }
+  };
+  return {
+    backgroundColor: "transparent",
+    boxShadow: "none",
+    zIndex: `var(${LAYOUT_CSS_VARS.headerZIndex}, ${theme.zIndex.appBar})`,
+    ...!disableOffset && { "&::before": bgStyles },
+    ...!disableElevation && { "&::after": shadowStyles }
+  };
+});
+var StyledToolbar = styled(Toolbar)(({ theme }) => ({
+  minHeight: HEADER_HEIGHTS.mobile,
+  [theme.breakpoints.up("md")]: {
+    minHeight: HEADER_HEIGHTS.desktop,
+    paddingLeft: theme.spacing(4),
+    paddingRight: theme.spacing(4)
+  }
+}));
+var SlotContainer = styled(Box8)({
+  display: "flex",
+  alignItems: "center"
+});
+function HeaderSection({
+  slots,
+  slotProps,
+  disableSticky = false,
+  disableOffset = false,
+  disableElevation = false,
+  containerized = false,
+  maxWidth = "lg",
+  sx
+}) {
+  const isOffset = useScrollOffset();
+  const toolbarContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    slots?.leftArea && /* @__PURE__ */ jsx(SlotContainer, { sx: { gap: 1, ...slotProps?.leftArea }, children: slots.leftArea }),
+    /* @__PURE__ */ jsx(
+      SlotContainer,
+      {
+        sx: {
+          flex: 1,
+          justifyContent: "center",
+          mx: 2,
+          ...slotProps?.centerArea
+        },
+        children: slots?.centerArea
+      }
+    ),
+    slots?.rightArea && /* @__PURE__ */ jsx(SlotContainer, { sx: { gap: 1, ...slotProps?.rightArea }, children: slots.rightArea })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    StyledAppBar,
+    {
+      position: disableSticky ? "static" : "sticky",
+      isOffset,
+      disableOffset,
+      disableElevation,
+      sx,
+      children: [
+        slots?.topArea && /* @__PURE__ */ jsx(Box8, { sx: slotProps?.topArea, children: slots.topArea }),
+        /* @__PURE__ */ jsx(StyledToolbar, { children: containerized ? /* @__PURE__ */ jsx(
+          Container2,
+          {
+            maxWidth,
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              ...slotProps?.container
+            },
+            children: toolbarContent
+          }
+        ) : toolbarContent }),
+        slots?.bottomArea && /* @__PURE__ */ jsx(Box8, { sx: slotProps?.bottomArea, children: slots.bottomArea })
+      ]
+    }
+  );
+}
+function HeaderToolbar({ children, sx }) {
+  return /* @__PURE__ */ jsx(StyledToolbar, { sx, children });
+}
+var AVATAR_SIZES = {
+  small: 32,
+  medium: 40,
+  large: 48
+};
+var TriggerButton = styled(ButtonBase)(({ theme }) => ({
+  borderRadius: "50%",
+  padding: 0,
+  transition: theme.transitions.create(["box-shadow", "background-color"], {
+    duration: theme.transitions.duration.shorter
+  }),
+  "&:hover": {
+    backgroundColor: alpha(theme.palette.primary.main, 0.08)
+  },
+  "&:focus-visible": {
+    outline: `2px solid ${theme.palette.primary.main}`,
+    outlineOffset: 2
+  }
+}));
+var StyledPopover = styled(Popover)(({ theme }) => ({
+  "& .MuiPopover-paper": {
+    minWidth: 220,
+    maxWidth: 280,
+    borderRadius: Number(theme.shape.borderRadius) * 1.5,
+    boxShadow: theme.shadows[8],
+    overflow: "hidden"
+  }
+}));
+var UserHeader = styled(Box8)(({ theme }) => ({
+  padding: theme.spacing(2),
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1.5)
+}));
+var UserInfo = styled(Box8)({
+  flex: 1,
+  minWidth: 0,
+  // Enable text truncation
+  overflow: "hidden"
+});
+var StyledMenuItem = styled(MenuItem, {
+  shouldForwardProp: (prop) => prop !== "destructive"
+})(({ theme, destructive }) => ({
+  padding: theme.spacing(1, 2),
+  minHeight: 40,
+  gap: theme.spacing(1.5),
+  ...destructive && {
+    color: theme.palette.error.main,
+    "&:hover": {
+      backgroundColor: alpha(theme.palette.error.main, 0.08)
+    }
+  }
+}));
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length >= 2) {
+    return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+  }
+  return (parts[0]?.[0] || "?").toUpperCase();
+}
+function getAvatarColor(name) {
+  const colors = [
+    "#1976d2",
+    // Blue
+    "#388e3c",
+    // Green
+    "#d32f2f",
+    // Red
+    "#7b1fa2",
+    // Purple
+    "#f57c00",
+    // Orange
+    "#0097a7",
+    // Cyan
+    "#c2185b",
+    // Pink
+    "#5d4037"
+    // Brown
+  ];
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return colors[Math.abs(hash) % colors.length];
+}
+function UserMenu({
+  user,
+  menuItems = [],
+  header,
+  footer,
+  avatarSize = "medium",
+  showEmail = true,
+  showRole = false,
+  sx,
+  popoverSx,
+  onOpen,
+  onClose
+}) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const handleOpen = useCallback(
+    (event) => {
+      setAnchorEl(event.currentTarget);
+      onOpen?.();
+    },
+    [onOpen]
+  );
+  const handleClose = useCallback(() => {
+    setAnchorEl(null);
+    onClose?.();
+  }, [onClose]);
+  const handleMenuItemClick = useCallback(
+    (item) => {
+      item.onClick?.();
+      handleClose();
+    },
+    [handleClose]
+  );
+  const size = AVATAR_SIZES[avatarSize];
+  const initials = getInitials(user.name);
+  const avatarBgColor = getAvatarColor(user.name);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(TriggerButton, { onClick: handleOpen, "aria-label": "Open user menu", "aria-haspopup": "true", "aria-expanded": open, sx, children: /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        src: user.avatarUrl,
+        alt: user.name,
+        sx: {
+          width: size,
+          height: size,
+          bgcolor: user.avatarUrl ? "transparent" : avatarBgColor,
+          fontSize: size * 0.4,
+          fontWeight: 600
+        },
+        children: initials
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      StyledPopover,
+      {
+        open,
+        anchorEl,
+        onClose: handleClose,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "right"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "right"
+        },
+        slotProps: {
+          paper: {
+            sx: popoverSx
+          }
+        },
+        children: [
+          header ?? /* @__PURE__ */ jsxs(UserHeader, { children: [
+            /* @__PURE__ */ jsx(
+              Avatar,
+              {
+                src: user.avatarUrl,
+                alt: user.name,
+                sx: {
+                  width: 44,
+                  height: 44,
+                  bgcolor: user.avatarUrl ? "transparent" : avatarBgColor,
+                  fontSize: 18,
+                  fontWeight: 600
+                },
+                children: initials
+              }
+            ),
+            /* @__PURE__ */ jsxs(UserInfo, { children: [
+              /* @__PURE__ */ jsx(Typography2, { variant: "subtitle2", noWrap: true, sx: { fontWeight: 600 }, children: user.name }),
+              showEmail && user.email && /* @__PURE__ */ jsx(Typography2, { variant: "body2", noWrap: true, sx: {
+                color: "text.secondary"
+              }, children: user.email }),
+              showRole && user.role && /* @__PURE__ */ jsx(Typography2, { variant: "caption", noWrap: true, sx: {
+                color: "text.disabled"
+              }, children: user.role })
+            ] })
+          ] }),
+          menuItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Divider, { sx: { my: 0.5 } }),
+            /* @__PURE__ */ jsx(Box8, { sx: { py: 0.5 }, children: menuItems.map((item) => /* @__PURE__ */ jsxs(Box8, { children: [
+              /* @__PURE__ */ jsxs(
+                StyledMenuItem,
+                {
+                  onClick: () => handleMenuItemClick(item),
+                  disabled: item.disabled,
+                  destructive: item.destructive,
+                  children: [
+                    item.icon && /* @__PURE__ */ jsx(
+                      ListItemIcon,
+                      {
+                        sx: {
+                          minWidth: "auto",
+                          color: item.destructive ? "error.main" : "inherit"
+                        },
+                        children: item.icon
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      ListItemText,
+                      {
+                        primary: item.label,
+                        slotProps: {
+                          primary: {
+                            variant: "body2",
+                            noWrap: true
+                          }
+                        }
+                      }
+                    )
+                  ]
+                }
+              ),
+              item.dividerAfter && /* @__PURE__ */ jsx(Divider, { sx: { my: 0.5 } })
+            ] }, item.key)) })
+          ] }),
+          footer && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Divider, {}),
+            footer
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+var NavRoot = styled(Box8, {
+  shouldForwardProp: (prop) => !["variant", "collapsed"].includes(prop)
+})(({ theme, variant, collapsed }) => {
+  let width = DRAWER_WIDTHS.full;
+  if (collapsed) {
+    width = variant === "stacked" ? DRAWER_WIDTHS.stackedCollapsed : DRAWER_WIDTHS.mini;
+  } else if (variant === "mini") {
+    width = DRAWER_WIDTHS.mini;
+  } else if (variant === "stacked") {
+    width = DRAWER_WIDTHS.stackedExpanded;
+  }
+  return {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    height: "100%",
+    width,
+    flexShrink: 0,
+    display: "flex",
+    flexDirection: "column",
+    zIndex: theme.zIndex.drawer,
+    backgroundColor: `var(${LAYOUT_CSS_VARS.navBg}, ${theme.palette.background.paper})`,
+    borderRight: `1px solid ${theme.palette.divider}`,
+    transition: theme.transitions.create("width", {
+      duration: theme.transitions.duration.shorter
+    })
+  };
+});
+var NavContent = styled(Box8)({
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  overflow: "hidden"
+});
+var NavScrollArea = styled(Box8)({
+  flex: 1,
+  overflow: "auto",
+  // Custom scrollbar
+  "&::-webkit-scrollbar": {
+    width: 6
+  },
+  "&::-webkit-scrollbar-thumb": {
+    backgroundColor: "rgba(0, 0, 0, 0.2)",
+    borderRadius: 3
+  }
+});
+var CollapseButton = styled(IconButton)(({ theme }) => ({
+  position: "absolute",
+  top: HEADER_HEIGHTS.desktop / 2,
+  transform: "translateY(-50%)",
+  right: -12,
+  width: 24,
+  height: 24,
+  backgroundColor: theme.palette.background.paper,
+  border: `1px solid ${theme.palette.divider}`,
+  boxShadow: theme.shadows[1],
+  "&:hover": {
+    backgroundColor: theme.palette.action.hover
+  },
+  "& svg": {
+    width: 16,
+    height: 16
+  }
+}));
+function Sidenav({
+  logo,
+  navData,
+  renderNavItem,
+  footer,
+  showCollapseButton = true,
+  layoutQuery = "md",
+  "aria-label": ariaLabel = ARIA_LABELS.mainNav,
+  sx
+}) {
+  const { config, toggleSidenavCollapse } = useLayoutContext();
+  const { sidenavVariant, sidenavCollapsed } = config;
+  const showText = !sidenavCollapsed && sidenavVariant !== "mini";
+  return /* @__PURE__ */ jsxs(
+    NavRoot,
+    {
+      role: "navigation",
+      "aria-label": ariaLabel,
+      variant: sidenavVariant,
+      collapsed: sidenavCollapsed,
+      sx: [
+        (theme) => ({
+          display: { xs: "none", [layoutQuery]: "flex" }
+        }),
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: [
+        /* @__PURE__ */ jsx(
+          Box8,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: showText ? "flex-start" : "center",
+              height: { xs: HEADER_HEIGHTS.mobile, md: HEADER_HEIGHTS.desktop },
+              px: showText ? 3 : 1,
+              flexShrink: 0
+            },
+            children: logo
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsxs(NavContent, { children: [
+          /* @__PURE__ */ jsx(NavScrollArea, { children: navData?.map((section, idx) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            !showText && idx > 0 && /* @__PURE__ */ jsx(Divider, { sx: { mx: 1.5 } }),
+            /* @__PURE__ */ jsx(
+              List,
+              {
+                subheader: showText && section.subheader ? /* @__PURE__ */ jsx(
+                  ListSubheader,
+                  {
+                    disableSticky: true,
+                    sx: {
+                      px: 2.5,
+                      py: 1.5,
+                      typography: "overline",
+                      color: "text.secondary",
+                      bgcolor: "transparent"
+                    },
+                    children: section.subheader
+                  }
+                ) : null,
+                sx: { px: showText ? 1 : 0.5 },
+                children: section.items.map(
+                  (item) => renderNavItem ? renderNavItem(item, 0) : /* @__PURE__ */ jsx(NavItemWithActive, { item, showText, depth: 0 }, item.id)
+                )
+              }
+            )
+          ] }, section.id)) }),
+          footer && /* @__PURE__ */ jsx(Box8, { sx: { flexShrink: 0, p: 2 }, children: footer })
+        ] }),
+        showCollapseButton && sidenavVariant !== "mini" && /* @__PURE__ */ jsx(
+          CollapseButton,
+          {
+            onClick: toggleSidenavCollapse,
+            size: "small",
+            "aria-label": sidenavCollapsed ? "Expand sidebar" : "Collapse sidebar",
+            "aria-expanded": !sidenavCollapsed,
+            children: /* @__PURE__ */ jsx(ChevronIcon, { direction: sidenavCollapsed ? "right" : "left" })
+          }
+        )
+      ]
+    }
+  );
+}
+function MobileSidenav({
+  logo,
+  navData,
+  renderNavItem,
+  footer,
+  layoutQuery = "md",
+  "aria-label": ariaLabel = ARIA_LABELS.mainNav,
+  sx
+}) {
+  const { config, toggleDrawer } = useLayoutContext();
+  const { drawerOpen } = config;
+  return /* @__PURE__ */ jsxs(
+    Drawer,
+    {
+      open: drawerOpen,
+      onClose: toggleDrawer,
+      "aria-label": ariaLabel,
+      sx: [
+        (theme) => ({
+          display: { xs: "block", [layoutQuery]: "none" },
+          "& .MuiDrawer-paper": {
+            width: DRAWER_WIDTHS.mobile,
+            backgroundColor: `var(${LAYOUT_CSS_VARS.navBg}, ${theme.palette.background.paper})`
+          }
+        }),
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: [
+        /* @__PURE__ */ jsx(
+          Box8,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              height: { xs: HEADER_HEIGHTS.mobile, md: HEADER_HEIGHTS.desktop },
+              px: 2.5
+            },
+            children: logo
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsx(Box8, { component: "nav", role: "navigation", sx: { flex: 1, overflow: "auto" }, children: navData?.map((section) => /* @__PURE__ */ jsx(
+          List,
+          {
+            subheader: section.subheader ? /* @__PURE__ */ jsx(
+              ListSubheader,
+              {
+                disableSticky: true,
+                sx: {
+                  px: 2.5,
+                  py: 1.5,
+                  typography: "overline",
+                  color: "text.secondary",
+                  bgcolor: "transparent"
+                },
+                children: section.subheader
+              }
+            ) : null,
+            sx: { px: 1 },
+            children: section.items.map(
+              (item) => renderNavItem ? renderNavItem(item, 0) : /* @__PURE__ */ jsx(NavItemWithActive, { item, showText: true, depth: 0 }, item.id)
+            )
+          },
+          section.id
+        )) }),
+        footer && /* @__PURE__ */ jsx(Box8, { sx: { p: 2 }, children: footer })
+      ]
+    }
+  );
+}
+function DefaultNavItem({ item, showText, depth, active }) {
+  const button = /* @__PURE__ */ jsxs(
+    ListItemButton,
+    {
+      component: item.path ? Link$1 : "div",
+      ...item.path ? { to: item.path } : {},
+      disabled: item.disabled,
+      selected: active,
+      sx: (theme) => ({
+        minHeight: 44,
+        borderRadius: 1,
+        pl: showText ? depth * 2 + 2 : void 0,
+        // Collapsed mode: center icon
+        ...!showText && {
+          justifyContent: "center",
+          px: 1,
+          mx: 0.5
+        },
+        // Active state
+        ...active && {
+          color: "primary.main",
+          bgcolor: alpha(theme.palette.primary.main, 0.08),
+          "&:hover": {
+            bgcolor: alpha(theme.palette.primary.main, 0.16)
+          }
+        }
+      }),
+      children: [
+        item.icon && /* @__PURE__ */ jsx(
+          ListItemIcon,
+          {
+            sx: {
+              minWidth: showText ? 36 : "unset",
+              color: active ? "primary.main" : "text.secondary",
+              ...!showText && { mr: 0, justifyContent: "center" }
+            },
+            children: /* @__PURE__ */ jsx(
+              Box8,
+              {
+                component: "span",
+                sx: { display: "flex", alignItems: "center", justifyContent: "center", width: 24, height: 24 },
+                children: item.icon
+              }
+            )
+          }
+        ),
+        showText && /* @__PURE__ */ jsx(
+          ListItemText,
+          {
+            primary: item.title,
+            slotProps: {
+              primary: {
+                variant: "body2",
+                noWrap: true,
+                sx: { fontWeight: active ? 600 : 500 }
+              }
+            }
+          }
+        ),
+        showText && item.info
+      ]
+    }
+  );
+  if (!showText) {
+    return /* @__PURE__ */ jsx(Tooltip, { title: item.title, placement: "right", arrow: true, children: button }, item.id);
+  }
+  return button;
+}
+function NavItemWithActive({ item, showText, depth }) {
+  const { pathname } = useLocation();
+  const { isItemActive } = useNavActive(pathname);
+  const active = isItemActive(item);
+  return /* @__PURE__ */ jsx(DefaultNavItem, { item, showText, depth, active }, item.id);
+}
+function ChevronIcon({ direction }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      style: {
+        transform: direction === "right" ? "rotate(180deg)" : void 0
+      },
+      children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" })
+    }
+  );
+}
+var TopnavRoot = styled("nav")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  width: "100%",
+  minHeight: 48,
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  backgroundColor: `var(${LAYOUT_CSS_VARS.navBg}, ${theme.palette.background.paper})`,
+  paddingLeft: theme.spacing(2),
+  paddingRight: theme.spacing(2),
+  gap: theme.spacing(0.5),
+  overflowX: "auto",
+  // Hide scrollbar but keep scroll functional
+  scrollbarWidth: "none",
+  "&::-webkit-scrollbar": { display: "none" }
+}));
+function Topnav({
+  navData,
+  renderNavItem,
+  layoutQuery = "lg",
+  "aria-label": ariaLabel = ARIA_LABELS.mainNav,
+  sx
+}) {
+  return /* @__PURE__ */ jsx(TopnavRoot, { "aria-label": ariaLabel, sx, children: navData?.map(
+    (section) => section.items.map(
+      (item) => renderNavItem ? renderNavItem(item, 0) : /* @__PURE__ */ jsx(DefaultTopnavItem, { item }, item.id)
+    )
+  ) });
+}
+function DefaultTopnavItem({ item }) {
+  const { pathname } = useLocation();
+  const { isItemActive } = useNavActive(pathname);
+  const active = isItemActive(item);
+  return /* @__PURE__ */ jsxs(
+    Box8,
+    {
+      component: item.path ? Link$1 : "div",
+      ...item.path ? { to: item.path } : {},
+      role: "menuitem",
+      tabIndex: 0,
+      "aria-disabled": item.disabled || void 0,
+      "aria-current": active ? "page" : void 0,
+      sx: (theme) => ({
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        px: 1.5,
+        py: 0.75,
+        borderRadius: 1,
+        whiteSpace: "nowrap",
+        textDecoration: "none",
+        color: active ? "primary.main" : "text.primary",
+        typography: "body2",
+        fontWeight: active ? 600 : 500,
+        cursor: item.disabled ? "default" : "pointer",
+        opacity: item.disabled ? 0.5 : 1,
+        ...active && {
+          bgcolor: alpha(theme.palette.primary.main, 0.08)
+        },
+        "&:hover": {
+          bgcolor: item.disabled ? void 0 : active ? alpha(theme.palette.primary.main, 0.16) : "action.hover"
+        },
+        "&:focus-visible": {
+          outline: `2px solid ${theme.palette.primary.main}`,
+          outlineOffset: -2
+        }
+      }),
+      children: [
+        item.icon && /* @__PURE__ */ jsx(
+          Box8,
+          {
+            component: "span",
+            "aria-hidden": "true",
+            sx: { display: "flex", color: active ? "primary.main" : "text.secondary" },
+            children: item.icon
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: item.title }),
+        item.info
+      ]
+    }
+  );
+}
+function MenuIcon() {
+  return /* @__PURE__ */ jsx(SvgIcon, { children: /* @__PURE__ */ jsx("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" }) });
+}
+var MainWrapper = styled(Box8, {
+  shouldForwardProp: (prop) => !["hasSidebar", "sidebarWidth", "layoutQuery"].includes(prop)
+})(({ theme, hasSidebar, sidebarWidth, layoutQuery }) => ({
+  display: "flex",
+  flexDirection: "column",
+  flex: "1 1 auto",
+  minHeight: "100vh",
+  // Adjust margin for sidebar on desktop
+  ...hasSidebar && {
+    [theme.breakpoints.up(layoutQuery)]: {
+      marginLeft: sidebarWidth
+    }
+  },
+  // Smooth transition
+  transition: theme.transitions.create("margin-left", {
+    duration: theme.transitions.duration.shorter
+  })
+}));
+function DashboardLayoutInternal({
+  children,
+  layoutQuery,
+  navData,
+  headerSlots,
+  logo,
+  footer,
+  sidenavFooter,
+  slotProps
+}) {
+  const config = useLayoutConfig();
+  const { toggleDrawer } = useLayoutContext();
+  const {
+    navigationMenuType,
+    sidenavCollapsed: _sidenavCollapsed,
+    sidenavVariant: _sidenavVariant,
+    drawerWidth
+  } = config;
+  const hasSidebar = navigationMenuType === "sidenav" || navigationMenuType === "combo";
+  const hasTopnav = navigationMenuType === "topnav" || navigationMenuType === "combo";
+  const sidebarWidth = hasSidebar ? drawerWidth : 0;
+  const mergedHeaderSlots = useMemo(() => {
+    if (!hasSidebar) return headerSlots;
+    const mobileMenuButton = /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        onClick: toggleDrawer,
+        "aria-label": "Open menu",
+        sx: {
+          display: { xs: "inline-flex", [layoutQuery]: "none" },
+          bgcolor: "transparent",
+          transition: "transform 0.2s ease",
+          "&:hover": { bgcolor: "transparent", transform: "scale(1.1)" }
+        },
+        children: /* @__PURE__ */ jsx(MenuIcon, {})
+      }
+    );
+    return {
+      ...headerSlots,
+      leftArea: /* @__PURE__ */ jsxs(Fragment, { children: [
+        mobileMenuButton,
+        headerSlots?.leftArea
+      ] })
+    };
+  }, [hasSidebar, headerSlots, toggleDrawer, layoutQuery]);
+  return /* @__PURE__ */ jsxs(MainWrapper, { hasSidebar, sidebarWidth, layoutQuery, children: [
+    /* @__PURE__ */ jsx(SkipLink, { href: "#main-content", children: "Skip to main content" }),
+    /* @__PURE__ */ jsx(
+      HeaderSection,
+      {
+        slots: mergedHeaderSlots,
+        "aria-label": ARIA_LABELS.header,
+        sx: {
+          ...slotProps?.header?.sx
+        },
+        ...slotProps?.header
+      }
+    ),
+    hasTopnav && /* @__PURE__ */ jsx(
+      Topnav,
+      {
+        navData,
+        layoutQuery,
+        "aria-label": hasSidebar ? "Secondary navigation" : ARIA_LABELS.mainNav
+      }
+    ),
+    hasSidebar && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Sidenav,
+        {
+          logo,
+          navData,
+          footer: sidenavFooter,
+          layoutQuery,
+          "aria-label": ARIA_LABELS.mainNav
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MobileSidenav,
+        {
+          logo,
+          navData,
+          footer: sidenavFooter,
+          layoutQuery,
+          "aria-label": ARIA_LABELS.mainNav
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Box8,
+      {
+        component: "main",
+        id: "main-content",
+        role: "main",
+        "aria-label": ARIA_LABELS.main,
+        tabIndex: -1,
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          flex: "1 1 auto",
+          // Remove focus outline for skip link target
+          "&:focus": {
+            outline: "none"
+          },
+          ...!slotProps?.main?.disablePadding && {
+            py: { xs: 2, sm: 3, md: 4 },
+            px: { xs: 2, sm: 3, md: 4 }
+          },
+          ...slotProps?.main?.sx
+        },
+        children: slotProps?.main?.maxWidth ? /* @__PURE__ */ jsx(Container2, { maxWidth: slotProps.main.maxWidth, sx: { flex: 1, display: "flex", flexDirection: "column" }, children }) : children
+      }
+    ),
+    footer
+  ] });
+}
+function DashboardLayout({
+  children,
+  layoutQuery = "lg",
+  navData,
+  headerSlots,
+  logo,
+  footer,
+  sidenavFooter,
+  initialConfig,
+  persistKey,
+  slotProps
+}) {
+  return /* @__PURE__ */ jsx(LayoutProvider, { initialConfig, persistKey, children: /* @__PURE__ */ jsx(
+    DashboardLayoutInternal,
+    {
+      layoutQuery,
+      navData,
+      headerSlots,
+      logo,
+      footer,
+      sidenavFooter,
+      slotProps,
+      children
+    }
+  ) });
+}
+function DashboardContent({ children, disablePadding = false, maxWidth, sx }) {
+  return /* @__PURE__ */ jsx(
+    Box8,
+    {
+      sx: [
+        {
+          flex: "1 1 auto",
+          display: "flex",
+          flexDirection: "column",
+          ...!disablePadding && {
+            py: { xs: 2, sm: 3, md: 4 },
+            px: { xs: 2, sm: 3, md: 4 }
+          }
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: maxWidth ? /* @__PURE__ */ jsx(Container2, { maxWidth, sx: { flex: 1 }, children }) : children
+    }
+  );
+}
+var LayoutRoot2 = styled(Box8)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  minHeight: "100vh",
+  // Subtle background gradient
+  background: theme.palette.mode === "dark" ? `linear-gradient(135deg, ${alpha(theme.palette.primary.dark, 0.1)} 0%, ${theme.palette.background.default} 100%)` : `linear-gradient(135deg, ${alpha(theme.palette.primary.light, 0.1)} 0%, ${theme.palette.background.default} 100%)`
+}));
+var MainContent = styled(Box8)({
+  display: "flex",
+  flex: "1 1 auto",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 24
+});
+var ContentCard = styled(Card)(({ theme }) => ({
+  width: "100%",
+  maxWidth: 420,
+  padding: theme.spacing(5, 3),
+  position: "relative",
+  zIndex: 2
+}));
+function AuthCenteredLayout({ children, logo, maxWidth = 420, sx }) {
+  return /* @__PURE__ */ jsxs(LayoutRoot2, { sx, children: [
+    logo && /* @__PURE__ */ jsx(
+      Box8,
+      {
+        sx: {
+          position: { xs: "static", md: "fixed" },
+          top: 0,
+          left: 0,
+          p: 3,
+          zIndex: 3
+        },
+        children: logo
+      }
+    ),
+    /* @__PURE__ */ jsx(MainContent, { children: /* @__PURE__ */ jsx(ContentCard, { sx: { maxWidth }, children }) })
+  ] });
+}
+function AuthCenteredContent({ children, maxWidth = 420, sx }) {
+  return /* @__PURE__ */ jsx(ContentCard, { sx: [{ maxWidth }, ...Array.isArray(sx) ? sx : [sx]], children });
+}
+var LayoutRoot3 = styled(Box8)({
+  display: "flex",
+  flexDirection: "column",
+  minHeight: "100vh"
+});
+var MainContent2 = styled(Box8)(({ theme }) => ({
+  display: "flex",
+  flex: "1 1 auto",
+  [theme.breakpoints.up("md")]: {
+    flexDirection: "row"
+  }
+}));
+var IllustrationSection = styled(Box8)(({ theme }) => ({
+  display: "none",
+  [theme.breakpoints.up("md")]: {
+    display: "flex",
+    flexDirection: "column",
+    width: "50%",
+    position: "relative",
+    background: `linear-gradient(135deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.dark} 100%)`,
+    color: theme.palette.primary.contrastText,
+    padding: theme.spacing(8),
+    justifyContent: "center",
+    alignItems: "center"
+  }
+}));
+var IllustrationContent = styled(Box8)({
+  maxWidth: 480,
+  textAlign: "center",
+  position: "relative",
+  zIndex: 1
+});
+var FormSection = styled(Box8)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  [theme.breakpoints.up("md")]: {
+    width: "50%"
+  }
+}));
+var FormContent = styled(Box8)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  flex: 1,
+  padding: theme.spacing(3),
+  [theme.breakpoints.up("sm")]: {
+    padding: theme.spacing(5)
+  },
+  [theme.breakpoints.up("md")]: {
+    padding: theme.spacing(8),
+    maxWidth: 480,
+    marginLeft: "auto",
+    marginRight: "auto"
+  }
+}));
+function AuthSplitLayout({
+  children,
+  logo,
+  title = "Welcome",
+  subtitle,
+  illustration,
+  showHelp = true,
+  helpUrl = "/help",
+  helpText = "Need help?",
+  settingsButton,
+  maxWidth = 480,
+  illustrationSx,
+  sx
+}) {
+  return /* @__PURE__ */ jsxs(LayoutRoot3, { sx, children: [
+    /* @__PURE__ */ jsx(
+      HeaderSection,
+      {
+        disableSticky: true,
+        disableOffset: true,
+        slots: {
+          leftArea: logo,
+          rightArea: /* @__PURE__ */ jsxs(Box8, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
+            showHelp && /* @__PURE__ */ jsx(Link, { href: helpUrl, underline: "hover", variant: "body2", sx: { color: "text.secondary" }, children: helpText }),
+            settingsButton
+          ] })
+        },
+        sx: {
+          position: { xs: "static", md: "fixed" },
+          top: 0,
+          left: 0,
+          right: 0,
+          zIndex: 10
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(MainContent2, { children: [
+      /* @__PURE__ */ jsxs(IllustrationSection, { sx: illustrationSx, children: [
+        /* @__PURE__ */ jsxs(IllustrationContent, { children: [
+          illustration && /* @__PURE__ */ jsx(Box8, { sx: { mb: 4 }, children: illustration }),
+          /* @__PURE__ */ jsx(Typography2, { variant: "h3", sx: { mb: 2, fontWeight: 700 }, children: title }),
+          subtitle && /* @__PURE__ */ jsx(Typography2, { variant: "body1", sx: { opacity: 0.8, maxWidth: 360, mx: "auto" }, children: subtitle })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Box8,
+          {
+            sx: {
+              position: "absolute",
+              bottom: 0,
+              left: 0,
+              right: 0,
+              height: "30%",
+              background: "linear-gradient(to top, rgba(0,0,0,0.1) 0%, transparent 100%)"
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(FormSection, { children: /* @__PURE__ */ jsx(FormContent, { sx: { maxWidth }, children }) })
+    ] })
+  ] });
+}
+function AuthSplitIllustration({ title, subtitle, illustration, sx }) {
+  return /* @__PURE__ */ jsx(IllustrationSection, { sx, children: /* @__PURE__ */ jsxs(IllustrationContent, { children: [
+    illustration && /* @__PURE__ */ jsx(Box8, { sx: { mb: 4 }, children: illustration }),
+    title && /* @__PURE__ */ jsx(Typography2, { variant: "h3", sx: { mb: 2, fontWeight: 700 }, children: title }),
+    subtitle && /* @__PURE__ */ jsx(Typography2, { variant: "body1", sx: { opacity: 0.8 }, children: subtitle })
+  ] }) });
+}
+function AuthSplitContent({ children, maxWidth = 480, sx }) {
+  return /* @__PURE__ */ jsx(FormSection, { children: /* @__PURE__ */ jsx(FormContent, { sx: [{ maxWidth }, ...Array.isArray(sx) ? sx : [sx]], children }) });
+}
+var LayoutRoot4 = styled(Box8)({
+  display: "flex",
+  flexDirection: "column",
+  minHeight: "100vh"
+});
+var MainContent3 = styled(Box8)({
+  display: "flex",
+  flexDirection: "column",
+  flex: "1 1 auto"
+});
+var CompactContent = styled(Box8)(({ theme }) => ({
+  flex: "1 1 auto",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  padding: theme.spacing(3, 2, 10, 2),
+  [theme.breakpoints.up("sm")]: {
+    padding: theme.spacing(10, 0),
+    maxWidth: 448,
+    margin: "0 auto",
+    width: "100%"
+  }
+}));
+function AuthSimpleLayout({
+  children,
+  logo,
+  showHelp = true,
+  helpUrl = "/help",
+  helpText = "Need help?",
+  settingsButton,
+  compact = false,
+  maxWidth = "lg",
+  sx
+}) {
+  return /* @__PURE__ */ jsxs(LayoutRoot4, { sx, children: [
+    /* @__PURE__ */ jsx(
+      HeaderSection,
+      {
+        disableOffset: true,
+        slots: {
+          leftArea: logo,
+          rightArea: /* @__PURE__ */ jsxs(Box8, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
+            showHelp && /* @__PURE__ */ jsx(Link, { href: helpUrl, underline: "hover", variant: "body2", sx: { color: "text.secondary" }, children: helpText }),
+            settingsButton
+          ] })
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(MainContent3, { children: compact ? /* @__PURE__ */ jsx(CompactContent, { children }) : /* @__PURE__ */ jsx(
+      Container2,
+      {
+        maxWidth,
+        sx: {
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          py: { xs: 3, sm: 5 }
+        },
+        children
+      }
+    ) })
+  ] });
+}
+function SimpleCompactContent({ children, sx }) {
+  return /* @__PURE__ */ jsx(CompactContent, { sx, children });
+}
+
+export { AuthCenteredContent, AuthCenteredLayout, AuthSimpleLayout, AuthSplitContent, AuthSplitIllustration, AuthSplitLayout, DEFAULT_LAYOUT_CSS_VARS, DRAWER_WIDTHS, DashboardContent, DashboardLayout, HEADER_HEIGHTS, HeaderSection, HeaderToolbar, LAYOUT_CSS_VARS, LayoutContext, LayoutGlobalStyles, LayoutProvider, LayoutSection, MainSection, MobileSidenav, Sidenav, SimpleCompactContent, UserMenu, defaultLayoutConfig, getBaseLayoutCssVars, getNavColorCssVars, mergeLayoutCssVars, useLayoutConfig, useLayoutContext, useNavActive, useSidenavVisible, useTopnavVisible };
+//# sourceMappingURL=chunk-Z5OSPAOC.js.map
+//# sourceMappingURL=chunk-Z5OSPAOC.js.map