@12-apps/ui 6.10.1 → 6.11.1

package/dist/navigation/NavigationMenu.js

@@ -1,1034 +1,14 @@
-import "../chunk-PZ5AY32C.js";
-
-// src/components/navigation/NavigationMenu/NavigationMenu.tsx
-import {
-  Box as Box5,
-  Paper as Paper2
-} from "@mui/material";
-import React5, { useState as useState2 } from "react";
-
-// src/components/navigation/NavigationMenu/NavigationMegaSection.tsx
-import { Box as Box3, List as List3, Typography } from "@mui/material";
-
-// src/components/navigation/NavigationMenu/NavigationMenu.shell.tsx
-import { Box, List, ListItemButton } from "@mui/material";
-import { alpha as alpha2, keyframes as keyframes2, styled } from "@mui/material";
-import React from "react";
-
-// src/components/navigation/NavigationMenu/NavigationMenu.styles.ts
-import { alpha, keyframes } from "@mui/material";
-var slideIn = keyframes`
-  from {
-    opacity: 0;
-    transform: translateX(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-`;
-var pulseGlow = keyframes`
-  0% {
-    box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.4);
-  }
-  70% {
-    box-shadow: 0 0 0 10px rgba(25, 118, 210, 0);
-  }
-  100% {
-    box-shadow: 0 0 0 0 rgba(25, 118, 210, 0);
-  }
-`;
-var SIZE_STYLES = {
-  sm: (theme) => ({
-    padding: theme.spacing(1, 1.5),
-    fontSize: "0.875rem",
-    "& .MuiListItemIcon-root": { transform: "scale(0.85)" }
-  }),
-  lg: (theme) => ({
-    padding: theme.spacing(2, 2.5),
-    fontSize: "1.125rem",
-    "& .MuiListItemIcon-root": { transform: "scale(1.15)" }
-  })
-};
-var horizontalStyles = (theme) => ({
-  borderRadius: theme.spacing(1.5),
-  margin: theme.spacing(0, 0.5),
-  background: alpha(theme.palette.background.paper, 0.6),
-  backdropFilter: "blur(8px)",
-  border: `none`
-  // border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
-});
-var collapsedStyles = () => ({
-  justifyContent: "center",
-  minHeight: 56,
-  "& .MuiListItemIcon-root": {
-    margin: 0
-  }
-});
-var activeStyles = (theme, _variant) => ({
-  color: theme.palette.primary.main,
-  cursor: "default",
-  "& .MuiListItemIcon-root": {
-    color: theme.palette.primary.main
-  },
-  "&::before": {
-    opacity: 1,
-    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.2)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)`
-  },
-  "&:hover": {
-    background: "none",
-    transform: "none",
-    boxShadow: "none",
-    "&::before": {
-      opacity: 1
-    },
-    "& .MuiListItemIcon-root": {
-      transform: "none"
-    },
-    "& .MuiListItemText-primary": {
-      transform: "none"
-    }
-  }
-});
-var navDecorationStyles = (theme) => ({
-  "&::before": {
-    content: '""',
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0)} 0%, ${alpha(theme.palette.primary.main, 0.08)} 100%)`,
-    opacity: 0,
-    transition: "opacity 0.3s ease"
-  },
-  "&::after": {
-    content: '""',
-    position: "absolute",
-    top: "50%",
-    left: "50%",
-    width: "100%",
-    height: "100%",
-    background: `radial-gradient(circle, ${alpha(theme.palette.primary.main, 0.3)} 0%, transparent 70%)`,
-    transform: "translate(-50%, -50%) scale(0)",
-    transition: "transform 0.6s ease",
-    borderRadius: "50%"
-  }
-});
-var navInteractionStyles = (theme, minimal, collapsed, size) => ({
-  "&:hover": minimal ? {
-    // Simple hover for minimal variant
-    backgroundColor: alpha(theme.palette.action.hover, 0.08),
-    color: theme.palette.primary.main,
-    "& .MuiListItemIcon-root": {
-      color: theme.palette.primary.main
-    }
-  } : {
-    // Fancy hover for non-minimal variant
-    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.15)} 0%, ${alpha(theme.palette.primary.main, 0.08)} 100%)`,
-    color: theme.palette.primary.main,
-    boxShadow: `0 8px 24px ${alpha(theme.palette.primary.main, 0.15)}`,
-    backgroundColor: alpha(theme.palette.primary.main, 0.04),
-    "&::before": {
-      opacity: 1
-    },
-    "& .MuiListItemIcon-root": {
-      color: theme.palette.primary.main,
-      transform: collapsed ? "scale(1.1)" : size === "sm" ? "scale(0.95) rotate(-5deg)" : size === "lg" ? "scale(1.25) rotate(-5deg)" : "scale(1.1) rotate(-5deg)",
-      transition: "all 0.3s ease"
-    },
-    "& .MuiListItemText-primary": {
-      transform: "translateX(4px)",
-      transition: "transform 0.3s ease"
-    }
-  },
-  "&:active": minimal ? {
-    // Simple active state for minimal variant
-    opacity: 0.7
-  } : {
-    // Fancy active state for non-minimal variant
-    transform: "scale(0.98)",
-    "&::after": {
-      transform: "translate(-50%, -50%) scale(2)"
-    }
-  }
-});
-var navItemButtonStyles = ({
-  theme,
-  variant,
-  active,
-  size,
-  collapsed,
-  minimal
-}) => ({
-  ...size ? SIZE_STYLES[size]?.(theme) ?? {} : {},
-  ...variant === "horizontal" ? horizontalStyles(theme) : {},
-  ...collapsed ? collapsedStyles() : {},
-  ...active ? activeStyles(theme, variant) : {},
-  ...navDecorationStyles(theme),
-  ...navInteractionStyles(theme, minimal, collapsed, size),
-  borderRadius: theme.spacing(1.5),
-  margin: theme.spacing(0.5),
-  position: "relative",
-  overflow: "hidden",
-  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-  transformStyle: "preserve-3d"
-});
-
-// src/components/navigation/NavigationMenu/NavigationMenu.shell.tsx
-import { jsx } from "react/jsx-runtime";
-var megaMenuSlide = keyframes2`
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-`;
-var NavigationContainer = styled(Box, {
-  shouldForwardProp: (prop) => !["variant", "collapsed", "minimal"].includes(prop)
-})(({ theme, variant, collapsed, minimal }) => ({
-  display: "flex",
-  position: "relative",
-  animation: `${slideIn} 0.4s ease-out`,
-  ...variant === "horizontal" && {
-    flexDirection: "row",
-    alignItems: "center",
-    width: "100%",
-    ...!minimal && {
-      background: `linear-gradient(135deg, ${alpha2(theme.palette.background.paper, 0.95)} 0%, ${alpha2(theme.palette.background.paper, 0.98)} 100%)`,
-      backdropFilter: "blur(10px)",
-      borderRadius: theme.spacing(2),
-      boxShadow: `0 8px 32px ${alpha2(theme.palette.common.black, 0.08)}`
-    }
-  },
-  ...variant === "vertical" && {
-    flexDirection: "column",
-    width: collapsed ? 80 : 280,
-    transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
-    height: "100%",
-    ...!minimal && {
-      background: `linear-gradient(180deg, ${alpha2(theme.palette.background.paper, 0.98)} 0%, ${alpha2(theme.palette.background.paper, 0.95)} 100%)`,
-      backdropFilter: "blur(12px)",
-      borderRadius: theme.spacing(2),
-      boxShadow: `0 12px 40px ${alpha2(theme.palette.common.black, 0.1)}`,
-      "&::before": {
-        content: '""',
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        height: "200px",
-        background: `radial-gradient(ellipse at top, ${alpha2(theme.palette.primary.main, 0.05)} 0%, transparent 70%)`,
-        pointerEvents: "none"
-      }
-    }
-  },
-  ...variant === "mega" && {
-    flexDirection: "column",
-    width: "100%",
-    ...!minimal && {
-      background: `linear-gradient(135deg, ${alpha2(theme.palette.background.paper, 0.98)} 0%, ${alpha2(theme.palette.background.default, 0.95)} 100%)`,
-      backdropFilter: "blur(15px)",
-      borderRadius: theme.spacing(3),
-      overflow: "hidden",
-      boxShadow: `0 20px 60px ${alpha2(theme.palette.common.black, 0.12)}`
-    }
-  }
-}));
-var StyledList = styled(List, {
-  shouldForwardProp: (prop) => !["variant", "size"].includes(prop)
-})(({ theme, variant }) => ({
-  padding: 0,
-  width: "100%",
-  ...variant === "horizontal" && {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center"
-  },
-  ...variant === "mega" && {
-    display: "grid",
-    gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
-    gap: theme.spacing(2),
-    padding: theme.spacing(2)
-  }
-}));
-var LogoContainer = styled(Box)(({ theme }) => ({
-  padding: theme.spacing(2.5),
-  marginBottom: theme.spacing(2),
-  position: "relative",
-  background: `linear-gradient(135deg, ${alpha2(theme.palette.primary.main, 0.08)} 0%, ${alpha2(theme.palette.primary.dark, 0.04)} 100%)`,
-  borderBottom: `2px solid ${alpha2(theme.palette.primary.main, 0.2)}`,
-  overflow: "hidden",
-  "&::before": {
-    content: '""',
-    position: "absolute",
-    top: "-50%",
-    right: "-50%",
-    width: "200%",
-    height: "200%",
-    background: `radial-gradient(circle, ${alpha2(theme.palette.primary.light, 0.1)} 0%, transparent 70%)`,
-    animation: `${slideIn} 1s ease-out`
-  },
-  "& > *": {
-    position: "relative",
-    zIndex: 1
-  }
-}));
-var CollapseButton = styled(ListItemButton)(({ theme }) => ({
-  borderRadius: theme.spacing(1.5),
-  margin: theme.spacing(1),
-  background: `linear-gradient(135deg, ${alpha2(theme.palette.primary.main, 0.08)} 0%, ${alpha2(theme.palette.primary.dark, 0.04)} 100%)`,
-  border: `1px solid ${alpha2(theme.palette.primary.main, 0.2)}`,
-  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-  "&:hover": {
-    backgroundColor: alpha2(theme.palette.primary.main, 0.12),
-    transform: "scale(1.05)",
-    boxShadow: `0 6px 20px ${alpha2(theme.palette.primary.main, 0.2)}`,
-    "& .MuiListItemIcon-root": {
-      transform: "rotate(180deg)",
-      transition: "transform 0.3s ease"
-    }
-  },
-  "&:active": {
-    transform: "scale(0.98)"
-  }
-}));
-var MegaMenuSection = styled(Box)(({ theme }) => ({
-  padding: theme.spacing(3),
-  borderRadius: theme.spacing(2),
-  background: `linear-gradient(145deg, ${theme.palette.background.paper} 0%, ${alpha2(theme.palette.background.default, 0.9)} 100%)`,
-  boxShadow: `0 10px 30px ${alpha2(theme.palette.common.black, 0.08)}`,
-  border: `1px solid ${alpha2(theme.palette.divider, 0.08)}`,
-  position: "relative",
-  overflow: "hidden",
-  animation: `${megaMenuSlide} 0.5s ease-out`,
-  animationFillMode: "both",
-  "&::before": {
-    content: '""',
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    height: "3px",
-    background: `linear-gradient(90deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.light} 50%, ${theme.palette.primary.main} 100%)`,
-    backgroundSize: "200% 100%",
-    animation: "shimmer 3s ease-in-out infinite"
-  },
-  "@keyframes shimmer": {
-    "0%": {
-      backgroundPosition: "200% 0"
-    },
-    "100%": {
-      backgroundPosition: "-200% 0"
-    }
-  },
-  "&:hover": {
-    transform: "translateY(-4px)",
-    boxShadow: `0 15px 40px ${alpha2(theme.palette.common.black, 0.12)}`,
-    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
-  },
-  "&:nth-of-type(1)": { animationDelay: "0.1s" },
-  "&:nth-of-type(2)": { animationDelay: "0.2s" },
-  "&:nth-of-type(3)": { animationDelay: "0.3s" },
-  "&:nth-of-type(4)": { animationDelay: "0.4s" }
-}));
-var NavigationShell = React.forwardRef(
-  ({ children, ...props }, ref) => /* @__PURE__ */ jsx(NavigationContainer, { ref, ...props, children })
-);
-NavigationShell.displayName = "NavigationShell";
-var LogoBar = ({ children }) => /* @__PURE__ */ jsx(LogoContainer, { children });
-var MenuList = ({
-  children,
-  ...props
-}) => /* @__PURE__ */ jsx(StyledList, { ...props, children });
-var CollapseToggle = ({
-  children,
-  onClick
-}) => /* @__PURE__ */ jsx(CollapseButton, { onClick, children });
-var MegaSection = ({ children }) => /* @__PURE__ */ jsx(MegaMenuSection, { children });
-
-// src/components/navigation/NavigationMenu/NavigationMenuItem.tsx
-import ChevronRight from "@mui/icons-material/ChevronRight";
-import ExpandMore from "@mui/icons-material/ExpandMore";
+import "../chunk-I53WONUS.js";
 import {
-  Box as Box2,
-  Collapse,
-  Fade,
-  List as List2,
-  ListItem,
-  ListItemButton as ListItemButton2,
-  ListItemIcon,
-  Grow,
-  ListItemText,
-  Popover
-} from "@mui/material";
-import { alpha as alpha3, styled as styled2 } from "@mui/material";
-import React3 from "react";
-
-// src/components/navigation/NavigationMenu/NavigationMenuItem.hooks.ts
-import React2, { useState } from "react";
-var CLOSE_DELAY_MS = 150;
-var useHoverIntent = ({
-  enabled,
-  closeTimerRef,
-  setAnchorEl
-}) => {
-  const clearCloseTimer = () => {
-    if (closeTimerRef.current) {
-      clearTimeout(closeTimerRef.current);
-      closeTimerRef.current = null;
-    }
-  };
-  const handleMouseEnter = (event) => {
-    if (!enabled) return;
-    {
-      clearCloseTimer();
-      setAnchorEl(event.currentTarget);
-    }
-  };
-  const handleMouseLeave = () => {
-    if (!enabled) return;
-    {
-      closeTimerRef.current = setTimeout(() => {
-        setAnchorEl(null);
-      }, CLOSE_DELAY_MS);
-    }
-  };
-  const handlePopoverMouseEnter = () => {
-    clearCloseTimer();
-  };
-  const handlePopoverMouseLeave = () => {
-    setAnchorEl(null);
-  };
-  React2.useEffect(() => {
-    return () => {
-      clearCloseTimer();
-    };
-  }, []);
-  return {
-    clearCloseTimer,
-    handleMouseEnter,
-    handleMouseLeave,
-    handlePopoverMouseEnter,
-    handlePopoverMouseLeave
-  };
-};
-var useMenuItemState = ({
-  item,
-  variant,
-  onItemClick
-}) => {
-  const [open, setOpen] = useState(false);
-  const [anchorEl, setAnchorEl] = useState(null);
-  const closeTimerRef = React2.useRef(null);
-  const hasChildren = item.children && item.children.length > 0;
-  const handleClick = (event) => {
-    if (hasChildren && variant !== "horizontal") {
-      setOpen(!open);
-    }
-    if (item.onClick) {
-      item.onClick(event);
-    }
-    if (onItemClick) {
-      onItemClick(item);
-    }
-  };
-  const {
-    clearCloseTimer,
-    handleMouseEnter,
-    handleMouseLeave,
-    handlePopoverMouseEnter,
-    handlePopoverMouseLeave
-  } = useHoverIntent({
-    enabled: Boolean(hasChildren) && variant === "horizontal",
-    closeTimerRef,
-    setAnchorEl
-  });
-  const closePopover = () => {
-    clearCloseTimer();
-    setAnchorEl(null);
-  };
-  return {
-    open,
-    anchorEl,
-    hasChildren,
-    handleClick,
-    handleMouseEnter,
-    handleMouseLeave,
-    handlePopoverMouseEnter,
-    handlePopoverMouseLeave,
-    closePopover
-  };
-};
-
-// src/components/navigation/NavigationMenu/NavigationMenuItem.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var StyledListItem = styled2(ListItem, {
-  shouldForwardProp: (prop) => !["variant", "active", "size", "level"].includes(prop)
-})(
-  ({ theme, variant, level = 0 }) => ({
-    padding: 0,
-    ...variant === "horizontal" && {
-      width: "auto"
-    },
-    ...level > 0 && {
-      paddingLeft: theme.spacing(2 * level)
-    }
-  })
-);
-var StyledListItemButton = styled2(ListItemButton2, {
-  shouldForwardProp: (prop) => !["variant", "active", "size", "collapsed", "minimal"].includes(prop)
-})(
-  ({ theme, variant, active, size, collapsed, minimal }) => ({
-    ...navItemButtonStyles({ theme, variant, active, size, collapsed, minimal })
-  })
-);
-var MenuItemPopover = ({ anchorEl, item, size, minimal, onClose, onMouseEnter, onMouseLeave, onItemClick }) => /* @__PURE__ */ jsx2(
-  Popover,
-  {
-    open: Boolean(anchorEl),
-    anchorEl,
-    onClose,
-    anchorOrigin: {
-      vertical: "bottom",
-      horizontal: "left"
-    },
-    transformOrigin: {
-      vertical: "top",
-      horizontal: "left"
-    },
-    disableRestoreFocus: true,
-    sx: {
-      pointerEvents: "none"
-    },
-    slotProps: {
-      paper: {
-        onMouseEnter,
-        onMouseLeave,
-        sx: {
-          pointerEvents: "auto",
-          mt: 0.5,
-          borderRadius: 2,
-          boxShadow: (theme) => `0 12px 40px ${alpha3(theme.palette.common.black, 0.15)}`,
-          border: (theme) => `1px solid ${alpha3(theme.palette.divider, 0.1)}`,
-          background: (theme) => `linear-gradient(145deg, ${theme.palette.background.paper} 0%, ${alpha3(theme.palette.background.default, 0.95)} 100%)`,
-          backdropFilter: "blur(10px)",
-          minWidth: 200
-        }
-      }
-    },
-    children: /* @__PURE__ */ jsx2(List2, { sx: { p: 1 }, children: item.children?.map((child) => {
-      const childHasChildren = child.children && child.children.length > 0;
-      if (childHasChildren) {
-        return renderMenuItem(child, "vertical", size, false, minimal, 0, onItemClick);
-      }
-      return /* @__PURE__ */ jsx2(
-        Box2,
-        {
-          onClick: onClose,
-          children: renderMenuItem(child, "vertical", size, false, minimal, 0, onItemClick)
-        },
-        child.id
-      );
-    }) })
-  }
-);
-var MenuItemLabel = ({ item, collapsed, open, hasChildren, size, variant }) => /* @__PURE__ */ jsx2(Fade, { in: !collapsed, timeout: 400, children: /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", alignItems: "center", width: "100%", gap: 1 }, children: [
-  /* @__PURE__ */ jsx2(
-    ListItemText,
-    {
-      primary: item.label,
-      secondary: item.description,
-      sx: {
-        flex: 1,
-        minWidth: 0
-        // Allows text truncation if needed
-      },
-      slotProps: {
-        primary: {
-          variant: size === "sm" ? "body2" : size === "lg" ? "h6" : "body1",
-          sx: {
-            fontWeight: item.active ? 600 : 400,
-            transition: "all 0.3s ease"
-          }
-        },
-        secondary: {
-          sx: {
-            opacity: 0.7,
-            transition: "all 0.3s ease"
-          }
-        }
-      }
-    }
-  ),
-  item.badge && /* @__PURE__ */ jsx2(
-    Box2,
-    {
-      component: "span",
-      sx: {
-        flexShrink: 0,
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        minWidth: 20,
-        height: 20,
-        px: 0.75,
-        borderRadius: "10px",
-        fontSize: "0.75rem",
-        fontWeight: 600,
-        color: "#fff",
-        background: "linear-gradient(135deg, #ff5252 0%, #ff1744 100%)",
-        boxShadow: "0 2px 8px rgba(255, 23, 68, 0.4)",
-        animation: typeof item.badge === "number" && item.badge > 0 ? `${pulseGlow} 2s infinite` : "none"
-      },
-      children: item.badge
-    }
-  ),
-  hasChildren && /* @__PURE__ */ jsx2(
-    Box2,
-    {
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        flexShrink: 0,
-        // Prevents expand icon from shrinking
-        transition: "transform 0.3s ease",
-        transform: open ? "rotate(180deg)" : "rotate(0deg)"
-      },
-      children: variant === "horizontal" ? /* @__PURE__ */ jsx2(ChevronRight, { fontSize: "small" }) : /* @__PURE__ */ jsx2(ExpandMore, {})
-    }
-  )
-] }) });
-var MenuItemContent = ({
-  item,
-  variant,
-  size,
-  active: _active,
-  collapsed,
-  minimal,
-  level,
-  open,
-  hasChildren,
-  onClick,
-  onMouseEnter,
-  onMouseLeave
-}) => /* @__PURE__ */ jsx2(StyledListItem, { variant, active: item.active, size, level, children: /* @__PURE__ */ jsxs(
-  StyledListItemButton,
-  {
-    variant,
-    active: item.active,
-    size,
-    collapsed,
-    minimal,
-    disabled: item.disabled,
-    onClick,
-    onMouseEnter,
-    onMouseLeave,
-    ...item.href && !hasChildren ? {
-      component: "a",
-      href: item.href,
-      target: item.target
-    } : {},
-    children: [
-      item.icon && /* @__PURE__ */ jsx2(
-        ListItemIcon,
-        {
-          sx: {
-            minWidth: collapsed ? 0 : 40,
-            justifyContent: "center",
-            transition: "all 0.3s ease",
-            "& svg": {
-              filter: item.active ? "drop-shadow(0 2px 8px rgba(0,0,0,0.15))" : "none",
-              transition: "all 0.3s ease"
-            }
-          },
-          children: /* @__PURE__ */ jsx2(Grow, { in: true, timeout: 600, children: /* @__PURE__ */ jsx2(Box2, { children: item.icon }) })
-        }
-      ),
-      !collapsed && /* @__PURE__ */ jsx2(
-        MenuItemLabel,
-        {
-          item,
-          collapsed,
-          minimal,
-          open,
-          hasChildren,
-          size,
-          variant
-        }
-      )
-    ]
-  }
-) }, item.id);
-var MenuItemRenderer = ({
-  item,
-  variant,
-  size,
-  collapsed,
-  minimal,
-  level,
-  onItemClick
-}) => {
-  const {
-    open,
-    anchorEl,
-    hasChildren,
-    handleClick,
-    handleMouseEnter,
-    handleMouseLeave,
-    handlePopoverMouseEnter,
-    handlePopoverMouseLeave,
-    closePopover
-  } = useMenuItemState({ item, variant, onItemClick });
-  const itemContent = /* @__PURE__ */ jsx2(
-    MenuItemContent,
-    {
-      item,
-      variant,
-      size,
-      active: item.active,
-      collapsed,
-      minimal,
-      level,
-      open,
-      hasChildren,
-      onClick: handleClick,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave
-    }
-  );
-  if (hasChildren && variant === "horizontal") {
-    return /* @__PURE__ */ jsxs(React3.Fragment, { children: [
-      itemContent,
-      /* @__PURE__ */ jsx2(
-        MenuItemPopover,
-        {
-          anchorEl,
-          item,
-          size,
-          minimal,
-          onClose: closePopover,
-          onMouseEnter: handlePopoverMouseEnter,
-          onMouseLeave: handlePopoverMouseLeave,
-          onItemClick
-        }
-      )
-    ] }, item.id);
-  }
-  if (hasChildren && variant !== "horizontal") {
-    return /* @__PURE__ */ jsxs(React3.Fragment, { children: [
-      itemContent,
-      !collapsed && /* @__PURE__ */ jsx2(Collapse, { in: open, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsx2(List2, { component: "div", disablePadding: true, children: item.children?.map(
-        (child) => renderMenuItem(child, variant, size, collapsed, minimal, level + 1, onItemClick)
-      ) }) })
-    ] }, item.id);
-  }
-  return itemContent;
-};
-var renderMenuItem = (item, variant = "vertical", size = "md", collapsed = false, minimal = false, level = 0, onItemClick) => /* @__PURE__ */ jsx2(
-  MenuItemRenderer,
-  {
-    item,
-    variant,
-    size,
-    collapsed,
-    minimal,
-    level,
-    onItemClick
-  },
-  item.id
-);
-
-// src/components/navigation/NavigationMenu/NavigationMegaSection.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var SECTION_TITLE_SX = {
-  mb: 2.5,
-  color: "primary.main",
-  fontWeight: 600,
-  position: "relative",
-  paddingBottom: 1,
-  // The short rule under each section heading.
-  "&::after": {
-    content: '""',
-    position: "absolute",
-    bottom: 0,
-    left: 0,
-    width: "40px",
-    height: "3px",
-    background: (theme) => `linear-gradient(90deg, ${theme.palette.primary.main} 0%, transparent 100%)`,
-    borderRadius: "2px"
-  }
-};
-var NavigationMegaSection = ({
-  section,
-  sectionIndex,
-  variant,
-  size,
-  minimal
-}) => /* @__PURE__ */ jsxs2(MegaSection, { children: [
-  /* @__PURE__ */ jsx3(Typography, { variant: "h6", sx: SECTION_TITLE_SX, children: section.label }),
-  /* @__PURE__ */ jsx3(List3, { sx: { p: 0 }, children: section.children?.map((item, itemIndex) => /* @__PURE__ */ jsx3(
-    Box3,
-    {
-      sx: {
-        animation: `${slideIn} 0.4s ease-out`,
-        animationDelay: `${sectionIndex * 0.1 + itemIndex * 0.05}s`,
-        animationFillMode: "both"
-      },
-      children: renderMenuItem(item, variant, size, false, minimal, 0)
-    },
-    item.id
-  )) })
-] });
-
-// src/components/navigation/NavigationMenu/NavigationStandardBody.tsx
-import MenuIcon from "@mui/icons-material/Menu";
-import { alpha as alpha4, Box as Box4, Divider, Fade as Fade2, ListItemIcon as ListItemIcon2, ListItemText as ListItemText2, Paper } from "@mui/material";
-import React4 from "react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var DividerRule = () => /* @__PURE__ */ jsx4(
-  Divider,
-  {
-    sx: {
-      my: 1,
-      opacity: 0.5,
-      background: (theme) => `linear-gradient(90deg, transparent 0%, ${alpha4(theme.palette.divider, 0.5)} 50%, transparent 100%)`
-    }
-  }
-);
-var VerticalLogo = ({ logo, collapsed }) => /* @__PURE__ */ jsx4(LogoBar, { children: collapsed ? /* @__PURE__ */ jsx4(Box4, { sx: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx4(MenuIcon, {}) }) : logo });
-var CollapseControl = ({
-  collapsed,
-  onToggle
-}) => /* @__PURE__ */ jsxs3(CollapseToggle, { onClick: onToggle, children: [
-  /* @__PURE__ */ jsx4(ListItemIcon2, { sx: { minWidth: collapsed ? 0 : 40, justifyContent: "center" }, children: /* @__PURE__ */ jsx4(MenuIcon, {}) }),
-  !collapsed && /* @__PURE__ */ jsx4(ListItemText2, { primary: "Collapse" })
-] });
-var MenuItems = ({ items, variant, size, collapsed, minimal, showDividers }) => /* @__PURE__ */ jsx4(MenuList, { variant, size, children: items.map((item, index) => /* @__PURE__ */ jsxs3(React4.Fragment, { children: [
-  /* @__PURE__ */ jsx4(
-    Box4,
-    {
-      sx: {
-        // Staggered so the list fills in rather than appearing at once.
-        animation: `${slideIn} 0.4s ease-out`,
-        animationDelay: `${index * 0.05}s`,
-        animationFillMode: "both"
-      },
-      children: renderMenuItem(item, variant, size, collapsed, minimal, 0)
-    }
-  ),
-  showDividers && index < items.length - 1 && /* @__PURE__ */ jsx4(DividerRule, {})
-] }, item.id)) });
-var EndPanel = ({ children }) => /* @__PURE__ */ jsx4(Fade2, { in: true, timeout: 600, children: /* @__PURE__ */ jsx4(
-  Box4,
-  {
-    sx: {
-      mt: "auto",
-      p: 2,
-      borderTop: (theme) => `1px solid ${alpha4(theme.palette.divider, 0.1)}`,
-      background: (theme) => `linear-gradient(180deg, transparent 0%, ${alpha4(theme.palette.background.default, 0.5)} 100%)`
-    },
-    children
-  }
-) });
-var NavigationStandardBody = ({
-  variant,
-  size,
-  minimal,
-  collapsed,
-  collapsible,
-  showDividers,
-  items,
-  logo,
-  endContent,
-  onCollapseToggle
-}) => {
-  const isVertical = variant === "vertical";
-  const elevation = !minimal && variant === "horizontal" ? 1 : 0;
-  return /* @__PURE__ */ jsxs3(
-    Paper,
-    {
-      elevation,
-      sx: {
-        width: "100%",
-        height: isVertical ? "100%" : "auto",
-        overflow: "hidden",
-        background: minimal ? "transparent" : void 0
-      },
-      children: [
-        logo && isVertical && /* @__PURE__ */ jsx4(VerticalLogo, { logo, collapsed }),
-        collapsible && isVertical && /* @__PURE__ */ jsx4(CollapseControl, { collapsed, onToggle: onCollapseToggle }),
-        /* @__PURE__ */ jsx4(
-          MenuItems,
-          {
-            items,
-            variant,
-            size,
-            collapsed,
-            minimal,
-            showDividers
-          }
-        ),
-        endContent && /* @__PURE__ */ jsx4(EndPanel, { children: endContent })
-      ]
-    }
-  );
-};
-
-// src/components/navigation/NavigationMenu/NavigationMenu.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var MegaMenuLayout = React5.forwardRef(
-  ({
-    variant,
-    logo,
-    items,
-    size,
-    minimal,
-    dataTestId: _dataTestId,
-    className,
-    maxWidth,
-    style,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsx5(
-      NavigationShell,
-      {
-        ref,
-        variant,
-        minimal,
-        className,
-        style: { maxWidth, ...style },
-        ...props,
-        children: /* @__PURE__ */ jsxs4(
-          Paper2,
-          {
-            elevation: minimal ? 0 : 1,
-            sx: {
-              width: "100%",
-              overflow: "hidden",
-              background: minimal ? "transparent" : void 0
-            },
-            children: [
-              logo && /* @__PURE__ */ jsx5(LogoBar, { children: logo }),
-              /* @__PURE__ */ jsx5(
-                Box5,
-                {
-                  sx: {
-                    display: "grid",
-                    gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
-                    gap: 3,
-                    p: 3
-                  },
-                  children: items.map((section, sectionIndex) => /* @__PURE__ */ jsx5(
-                    NavigationMegaSection,
-                    {
-                      section,
-                      sectionIndex,
-                      variant,
-                      size,
-                      minimal
-                    },
-                    section.id
-                  ))
-                }
-              )
-            ]
-          }
-        )
-      }
-    );
-  }
-);
-MegaMenuLayout.displayName = "MegaMenuLayout";
-var NAVIGATION_DEFAULTS = {
-  variant: "vertical",
-  size: "md",
-  minimal: false,
-  collapsible: false,
-  showDividers: false
-};
-var resolveProps = (props) => ({
-  ...NAVIGATION_DEFAULTS,
-  ...Object.fromEntries(
-    Object.entries(props).filter(([, value]) => value !== void 0)
-  )
-});
-var NavigationMenu = React5.forwardRef(
-  (componentProps, ref) => {
-    const {
-      variant,
-      items,
-      size,
-      minimal,
-      collapsible,
-      collapsed: controlledCollapsed,
-      onCollapseChange,
-      logo,
-      endContent,
-      maxWidth,
-      showDividers,
-      className,
-      style,
-      ...props
-    } = resolveProps(componentProps);
-    const [internalCollapsed, setInternalCollapsed] = useState2(false);
-    const isControlled = controlledCollapsed !== void 0;
-    const collapsed = isControlled ? controlledCollapsed : internalCollapsed;
-    const handleCollapseToggle = () => {
-      if (!isControlled) setInternalCollapsed(!collapsed);
-      onCollapseChange?.(!collapsed);
-    };
-    if (variant === "mega") {
-      return /* @__PURE__ */ jsx5(
-        MegaMenuLayout,
-        {
-          ref,
-          variant,
-          collapsed,
-          logo,
-          items,
-          size,
-          minimal,
-          className,
-          maxWidth,
-          style,
-          ...props
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx5(
-      NavigationShell,
-      {
-        ref,
-        variant,
-        minimal,
-        collapsed,
-        className,
-        style,
-        ...props,
-        children: /* @__PURE__ */ jsx5(
-          NavigationStandardBody,
-          {
-            variant,
-            size,
-            minimal,
-            collapsed,
-            collapsible,
-            showDividers,
-            items,
-            logo,
-            endContent,
-            onCollapseToggle: handleCollapseToggle
-          }
-        )
-      }
-    );
-  }
-);
-NavigationMenu.displayName = "NavigationMenu";
+  NavigationMenu
+} from "../chunk-ZASIPWXI.js";
+import "../chunk-7FPQOFJF.js";
+import "../chunk-7OFAXH25.js";
+import "../chunk-6WUP22G7.js";
+import "../chunk-3L5OZCGA.js";
+import "../chunk-6AVN3CIZ.js";
+import "../chunk-YLHCICYS.js";
+import "../chunk-PZ5AY32C.js";
 export {
   NavigationMenu
 };